sending improvements

Author: emir-karabeg

apps/sim/app/workspace/[workspaceId]/components/index.ts

@@ -26,4 +26,4 @@ export type {
   RowDragDropConfig,
   SelectableConfig,
 } from './resource/resource'
-export { EMPTY_CELL_PLACEHOLDER, Resource, ResourceTable } from './resource/resource'
+export { Resource, ResourceTable } from './resource/resource'

apps/sim/app/workspace/[workspaceId]/home/components/chat-context-kind-registry.tsx

@@ -10,6 +10,7 @@ import { getDocumentIcon } from '@/components/icons/document-icons'
 import { cn } from '@/lib/core/utils/cn'
 import { workflowBorderColor } from '@/lib/workspaces/colors'
 import type { ChatContextKind, ChatMessageContext } from '@/app/workspace/[workspaceId]/home/types'
+import { registry as blockRegistry } from '@/blocks/registry'
 
 interface RenderIconArgs {
   context: ChatMessageContext
@@ -38,6 +39,21 @@ function renderWorkflowSquare({ className, workflowColor }: RenderIconArgs): Rea
   )
 }
 
+/**
+ * Renders the integration chip glyph: just the block's brand SVG icon, no
+ * background tile — sized and positioned by the caller-supplied className
+ * (same slot the `@` character normally occupies). The block is resolved
+ * by `context.blockType` so the chip stays in sync with the registry.
+ */
+function renderIntegrationTile({ context, className }: RenderIconArgs): ReactNode | null {
+  if (context.kind !== 'integration') return null
+  if (!context.blockType) return null
+  const block = blockRegistry[context.blockType]
+  if (!block) return null
+  const Icon = block.icon
+  return <Icon className={className} />
+}
+
 /**
  * Single source of truth for the icon and label associated with each
  * {@link ChatContextKind}. The `Record<ChatContextKind, …>` typing forces a
@@ -84,4 +100,5 @@ export const CHAT_CONTEXT_KIND_REGISTRY: Record<ChatContextKind, ChatContextKind
   templates: { label: 'Templates', renderIcon: () => null },
   docs: { label: 'Docs', renderIcon: () => null },
   slash_command: { label: 'Command', renderIcon: () => null },
+  integration: { label: 'Integration', renderIcon: renderIntegrationTile },
 }

apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx

@@ -16,14 +16,21 @@ import {
   SlackIcon,
 } from '@/components/icons'
 import { cn } from '@/lib/core/utils/cn'
+import { INTEGRATIONS } from '@/lib/integrations'
+import { integrationConnectHref } from '@/app/workspace/[workspaceId]/integrations/connect-route'
 import { useWorkspaceCredentials } from '@/hooks/queries/credentials'
 import { useOAuthConnections } from '@/hooks/queries/oauth/oauth-connections'
 
 type Icon = ComponentType<{ className?: string }>
 
 type Action =
   | { kind: 'prompt'; id: string; label: string; prompt: string; icon: Icon }
-  | { kind: 'integration'; id: string; label: string; icon: Icon }
+  | { kind: 'integration'; id: string; label: string; icon: Icon; slug: string }
+
+/** Lookup integration slug by OAuth service display name (case-insensitive). */
+const SLUG_BY_LOWER_NAME: ReadonlyMap<string, string> = new Map(
+  INTEGRATIONS.map((i) => [i.name.toLowerCase(), i.slug])
+)
 
 interface PromptOption {
   id: string
@@ -174,12 +181,13 @@ function toPromptAction(option: PromptOption): Action {
   }
 }
 
-function toIntegrationAction(service: ServiceInfo): Action {
+function toIntegrationAction(service: ServiceInfo, slug: string): Action {
   return {
     kind: 'integration',
     id: `integrate-${service.providerId}`,
     label: `Integrate with ${service.name}`,
     icon: service.icon,
+    slug,
   }
 }
 
@@ -190,8 +198,20 @@ function toIntegrationAction(service: ServiceInfo): Action {
  * replaces it with personalized integrations.
  */
 const INITIAL_ACTIONS: Action[] = [
-  { kind: 'integration', id: 'integrate-slack', label: 'Integrate with Slack', icon: SlackIcon },
-  { kind: 'integration', id: 'integrate-gmail', label: 'Integrate with Gmail', icon: GmailIcon },
+  {
+    kind: 'integration',
+    id: 'integrate-slack',
+    label: 'Integrate with Slack',
+    icon: SlackIcon,
+    slug: 'slack',
+  },
+  {
+    kind: 'integration',
+    id: 'integrate-gmail',
+    label: 'Integrate with Gmail',
+    icon: GmailIcon,
+    slug: 'gmail',
+  },
   toPromptAction(TABLE_PROMPTS.find((p) => p.id === 'crm')!),
   toPromptAction(INTEGRATION_PROMPTS.find((p) => p.id === 'github-pr-review')!),
 ]
@@ -227,8 +247,14 @@ export function SuggestedActions({ onSelectPrompt }: SuggestedActionsProps) {
   useEffect(() => {
     if (services.length === 0 || connectedProviders.size === 0) return
 
-    const availableServices = services.filter((s) => !connectedProviders.has(s.providerId))
-    const integrations = sample(availableServices, 2).map(toIntegrationAction)
+    const candidates = services.flatMap((s) => {
+      if (connectedProviders.has(s.providerId)) return []
+      const slug = SLUG_BY_LOWER_NAME.get(s.name.toLowerCase())
+      return slug ? [{ service: s, slug }] : []
+    })
+    const integrations = sample(candidates, 2).map(({ service, slug }) =>
+      toIntegrationAction(service, slug)
+    )
 
     const integrationPool = INTEGRATION_PROMPTS.filter(
       (p) => !p.providerId || !connectedProviders.has(p.providerId)
@@ -247,7 +273,7 @@ export function SuggestedActions({ onSelectPrompt }: SuggestedActionsProps) {
       onSelectPrompt(action.prompt)
       return
     }
-    router.push(`/workspace/${workspaceId}/integrations`)
+    router.push(integrationConnectHref(workspaceId, action.slug))
   }
 
   return (

apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx

@@ -43,6 +43,7 @@ import type {
 import {
   useContextManagement,
   useFileAttachments,
+  useIntegrationAutoMention,
   useMentionMenu,
   useMentionTokens,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks'
@@ -157,13 +158,7 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
   const overlayRef = useRef<HTMLDivElement>(null)
   const plusMenuRef = useRef<PlusMenuHandle>(null)
 
-  const [prevDefaultValue, setPrevDefaultValue] = useState(defaultValue)
-  if (defaultValue && defaultValue !== prevDefaultValue) {
-    setPrevDefaultValue(defaultValue)
-    setValue(defaultValue)
-  } else if (!defaultValue && prevDefaultValue) {
-    setPrevDefaultValue(defaultValue)
-  }
+  const prevDefaultValueRef = useRef(defaultValue)
 
   const files = useFileAttachments({
     userId: userId || session?.user?.id,
@@ -321,17 +316,51 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
     setSelectedContexts: contextManagement.setSelectedContexts,
   })
 
+  const integrationAutoMention = useIntegrationAutoMention({
+    setSelectedContexts: contextManagement.setSelectedContexts,
+  })
+
   const canSubmit = (value.trim().length > 0 || hasFiles) && !isSending && !hasUploadingFiles
 
   const valueRef = useRef(value)
   valueRef.current = value
+
+  /**
+   * Convert integration names on mount for any initial value seeded by
+   * `defaultValue` or a restored mothership draft. Mid-typing conversion
+   * is intentionally NOT handled here — the keystroke fast-path in
+   * `handleInputChange` covers that case via `processChange`, and running
+   * it on every value change would inject `@` while the user is still
+   * typing the name and prematurely open the mention menu.
+   */
+  useEffect(() => {
+    if (!valueRef.current) return
+    const converted = integrationAutoMention.applyToText(valueRef.current)
+    if (converted !== valueRef.current) setValue(converted)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  /**
+   * Sync `value` when the `defaultValue` prop changes post-mount — e.g.
+   * the user clicks a different template while UserInput is already
+   * mounted. Mirrors the previously inline render-phase derivation but
+   * now runs the prompt through `applyToText` so integration names get
+   * chipified consistently with paste / draft restore flows.
+   */
+  useEffect(() => {
+    if (defaultValue === prevDefaultValueRef.current) return
+    prevDefaultValueRef.current = defaultValue
+    if (defaultValue) setValue(integrationAutoMention.applyToText(defaultValue))
+  }, [defaultValue, integrationAutoMention.applyToText])
+
   const sttPrefixRef = useRef('')
 
   function handleTranscript(text: string) {
     const prefix = sttPrefixRef.current
     const newVal = prefix ? `${prefix} ${text}` : text
-    setValue(newVal)
-    valueRef.current = newVal
+    const converted = integrationAutoMention.applyToText(newVal)
+    setValue(converted)
+    valueRef.current = converted
   }
 
   function handleUsageLimitExceeded() {
@@ -377,7 +406,7 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
     ref,
     () => ({
       loadQueuedMessage: (msg: QueuedMessage) => {
-        setValue(msg.content)
+        setValue(integrationAutoMention.applyToText(msg.content))
         const restored: AttachedFile[] = (msg.fileAttachments ?? []).map((a) => ({
           id: a.id,
           name: a.filename,
@@ -399,7 +428,12 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
         })
       },
     }),
-    [files.restoreAttachedFiles, contextManagement.setSelectedContexts, textareaRef]
+    [
+      files.restoreAttachedFiles,
+      contextManagement.setSelectedContexts,
+      textareaRef,
+      integrationAutoMention.applyToText,
+    ]
   )
 
   useLayoutEffect(() => {
@@ -733,9 +767,12 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
   const syncMentionState = useCallback(
     (textarea: HTMLTextAreaElement, text: string, caret: number) => {
       const active = getActiveMentionAtRef.current(caret, text)
-      // Treat any whitespace inside the query as a closer — typing a space
-      // after `@foo` should leave the raw `@foo` text and dismiss the menu.
-      const isOpenable = active && !/\s/.test(active.query)
+      // Any word-boundary character inside the query — whitespace, sentence
+      // punctuation, or brackets — dismisses the menu. The mention token
+      // is "complete" the moment the user types a non-word character, so
+      // there's nothing more to query. Mirrors the boundary set the
+      // integration auto-detector uses for symmetry.
+      const isOpenable = active && !/[\s.,;:!?(){}[\]"'`/\\<>]/.test(active.query)
       if (!isOpenable) {
         if (mentionRangeRef.current !== null) {
           mentionRangeRef.current = null
@@ -759,12 +796,32 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
 
   const handleInputChange = useCallback(
     (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      const newValue = e.target.value
-      const caret = e.target.selectionStart ?? newValue.length
-      setValue(newValue)
-      syncMentionState(e.target, newValue, caret)
+      const previousValue = valueRef.current
+      const nextValue = e.target.value
+
+      let finalValue = nextValue
+      if (nextValue.length === previousValue.length + 1) {
+        // Single-char keystroke — synchronous, boundary-triggered.
+        finalValue = integrationAutoMention.processChange({
+          textarea: e.target,
+          previousValue,
+          nextValue,
+        })
+      } else if (nextValue.length > previousValue.length + 1) {
+        // Multi-char insertion (paste, drag-drop, IME commit) — bulk
+        // convert all matches and rewrite the textarea via `setRangeText`
+        // to keep the edit in a single native undo step.
+        finalValue = integrationAutoMention.applyToText(nextValue)
+        if (finalValue !== nextValue) {
+          e.target.setRangeText(finalValue, 0, nextValue.length, 'preserve')
+        }
+      }
+
+      const caret = e.target.selectionStart ?? finalValue.length
+      setValue(finalValue)
+      syncMentionState(e.target, finalValue, caret)
     },
-    [syncMentionState]
+    [integrationAutoMention.applyToText, integrationAutoMention.processChange, syncMentionState]
   )
 
   const handleSelectAdjust = useCallback(() => {

apps/sim/app/workspace/[workspaceId]/home/home.tsx

@@ -14,6 +14,10 @@ import {
   type LandingWorkflowSeed,
   LandingWorkflowSeedStorage,
 } from '@/lib/core/utils/browser-storage'
+import {
+  MOTHERSHIP_SEND_MESSAGE_EVENT,
+  type MothershipSendMessageDetail,
+} from '@/lib/mothership/events'
 import { captureEvent } from '@/lib/posthog/client'
 import { persistImportedWorkflow } from '@/lib/workflows/operations/import-export'
 import { useChatHistory, useMarkTaskRead } from '@/hooks/queries/tasks'
@@ -240,11 +244,11 @@ export function Home({ chatId }: HomeProps = {}) {
 
   useEffect(() => {
     const handler = (e: Event) => {
-      const message = (e as CustomEvent<{ message: string }>).detail?.message
+      const message = (e as CustomEvent<MothershipSendMessageDetail>).detail?.message
       if (message) sendMessage(message)
     }
-    window.addEventListener('mothership-send-message', handler)
-    return () => window.removeEventListener('mothership-send-message', handler)
+    window.addEventListener(MOTHERSHIP_SEND_MESSAGE_EVENT, handler)
+    return () => window.removeEventListener(MOTHERSHIP_SEND_MESSAGE_EVENT, handler)
   }, [sendMessage])
 
   function resolveResourceFromContext(

apps/sim/app/workspace/[workspaceId]/home/types.ts

@@ -153,6 +153,7 @@ export interface ChatMessageContext {
   fileId?: string
   folderId?: string
   chatId?: string
+  blockType?: string
 }
 
 export interface ChatMessage {