Simplify the Platform chat seam and its per-chunk work

Carry the hook's own types through the models instead of unknown casts, parse a
Search target once in the projection, and move secret saving out of the card.
Drop fields nothing reads. Cache settled turns with their copy text and pairing,
serialize a tool payload once, follow the stream with a ResizeObserver, and read
reference inventories only when a picker opens. Search stays idle behind
Assistant. The read-path grammar is one shared module.

Author: waleedlatif1

apps/sim/lib/mothership/tools/client/read-block.ts

@@ -1,3 +1,4 @@
+import { parseReadTarget } from '@/lib/mothership/tools/client/read-target'
 import { getBlock, getLatestBlock } from '@/blocks/registry'
 import type { BlockConfig } from '@/blocks/types'
 
@@ -9,19 +10,7 @@ import type { BlockConfig } from '@/blocks/types'
  * untouched.
  */
 export function getReadTargetBlock(path: string | undefined): BlockConfig | undefined {
-  if (!path) return undefined
-  const segments = path.trim().split('/').filter(Boolean)
-
-  if (segments[0] === 'organization' && segments[1] === 'custom-blocks' && segments.length === 3) {
-    return getBlock(segments[2].replace(/\.json$/, ''))
-  }
-
-  if (segments[0] !== 'components' || segments.length < 3) return undefined
-  if (segments[1] === 'blocks' && segments.length === 3) {
-    return getBlock(segments[2].replace(/\.json$/, ''))
-  }
-  if (segments[1] === 'integrations') {
-    return getLatestBlock(segments[2])
-  }
-  return undefined
+  const target = parseReadTarget(path)
+  if (!target) return undefined
+  return target.kind === 'block' ? getBlock(target.type) : getLatestBlock(target.type)
 }

apps/sim/lib/mothership/tools/client/read-target.ts

@@ -0,0 +1,23 @@
+/**
+ * The block a copilot `read` path names, without resolving it: a component schema or an organization
+ * custom block by exact type, an integration by its family. Null for every other path.
+ */
+export function parseReadTarget(
+  path: string | undefined
+): { kind: 'block' | 'integration'; type: string } | null {
+  if (!path) return null
+  const segments = path.trim().split('/').filter(Boolean)
+
+  if (segments[0] === 'organization' && segments[1] === 'custom-blocks' && segments.length === 3) {
+    return { kind: 'block', type: segments[2].replace(/\.json$/, '') }
+  }
+
+  if (segments[0] !== 'components' || segments.length < 3) return null
+  if (segments[1] === 'blocks' && segments.length === 3) {
+    return { kind: 'block', type: segments[2].replace(/\.json$/, '') }
+  }
+  if (segments[1] === 'integrations') {
+    return { kind: 'integration', type: segments[2] }
+  }
+  return null
+}

apps/sim/platform/app/(shell)/_components/chat/cards/live-credential-card.tsx

@@ -11,8 +11,6 @@ import { Button, InlineNotice } from '@/platform/design-system/components'
 import { Input } from '@/platform/design-system/components/field/inputs'
 import {
   CredentialWorkspaceProvider,
-  credentialSubmissionMessage,
-  parseSearchTarget,
   useCredentialWorkspace,
   useFolderAccess,
   useIntegrationsHref,
@@ -21,7 +19,7 @@ import {
   useSecretSaver,
   useUsageLink,
 } from '@/platform/lib/data/chat-credentials'
-import { toast } from '@/platform/lib/data/toast'
+import type { SearchConnectionTarget } from '@/platform/lib/data/chat-types'
 
 function serviceName(item: PlatformCredentialRequest): string {
   return (item.provider ?? 'integration').replace(/[-_]/g, ' ')
@@ -61,9 +59,14 @@ function LinkRow({ item, controlId, onConnected }: RowProps) {
   )
 }
 
-function SearchRow({ item, controlId, onConnected }: RowProps) {
+function SearchRow({
+  item,
+  target,
+  controlId,
+  onConnected,
+}: RowProps & { target: SearchConnectionTarget }) {
   const name = serviceName(item)
-  const connection = useSearchConnectionRow(item, controlId, onConnected)
+  const connection = useSearchConnectionRow(target, controlId, onConnected)
   const label = connection.connected
     ? `Connected ${name}`
     : connection.pending
@@ -135,9 +138,7 @@ export function LiveCredentialCard({
   const [saving, setSaving] = useState(false)
   const [submitted, setSubmitted] = useState(false)
   const secretRows = items.flatMap((item, index) =>
-    item.type === 'secret_input' && item.name
-      ? [{ item, index, name: item.name, scope: item.scope ?? 'workspace' }]
-      : []
+    item.type === 'secret_input' && item.name ? [{ index, name: item.name }] : []
   )
   const integrationRows = items.flatMap((item, index) =>
     item.type === 'link' || item.type === 'service_account' ? [{ item, index }] : []
@@ -148,19 +149,21 @@ export function LiveCredentialCard({
     const named = [
       ...integrationRows.map(({ item, index }) => ({
         label: serviceName(item),
-        done: submission ? saved.has(item.provider ?? '') : connected.has(index),
+        status: (submission ? saved.has(item.provider ?? '') : connected.has(index))
+          ? 'Connected'
+          : 'Skipped',
       })),
       ...secretRows.map(({ name, index }) => ({
         label: name,
-        done: submission ? saved.has(name) : savedRows.has(index),
+        status: (submission ? saved.has(name) : savedRows.has(index)) ? 'Added' : 'Skipped',
       })),
     ]
     return (
       <dl className={styles.fields}>
-        {named.map(({ label, done }) => (
+        {named.map(({ label, status }) => (
           <div key={label}>
             <dt data-type='T052'>{label}</dt>
-            <dd data-type='T048'>{done ? 'Added' : 'Skipped'}</dd>
+            <dd data-type='T048'>{status}</dd>
           </div>
         ))}
       </dl>
@@ -171,34 +174,12 @@ export function LiveCredentialCard({
 
   async function submit() {
     setSaving(true)
-    const groups = new Map<string, Record<string, string>>()
-    for (const { index, name, scope } of secretRows) {
-      const value = drafts[index]?.trim()
-      if (!value || savedRows.has(index)) continue
-      groups.set(scope, { ...groups.get(scope), [name]: value })
-    }
-    const next = new Set(savedRows)
-    const results = await Promise.allSettled(
-      [...groups].map(async ([scope, variables]) => {
-        await saver.save(scope, workspaceId, variables)
-        for (const { index, name, scope: rowScope } of secretRows)
-          if (rowScope === scope && Object.hasOwn(variables, name)) next.add(index)
-      })
-    )
-    setSavedRows(next)
+    const result = await saver.submit({ drafts, saved: savedRows, connected, workspaceId })
+    setSavedRows(result.saved)
     setSaving(false)
-    if (results.some((result) => result.status === 'rejected')) {
-      toast.error(`Couldn't save all secrets. Retry the remaining entries.`)
-      return
-    }
-    const secretIndexes = new Set(
-      secretRows.flatMap(({ index }, position) => (next.has(index) ? [position] : []))
-    )
-    const integrationIndexes = new Set(
-      integrationRows.flatMap(({ index }, position) => (connected.has(index) ? [position] : []))
-    )
+    if (result.message === null) return
     setSubmitted(true)
-    onSubmit(credentialSubmissionMessage(items, integrationIndexes, secretIndexes))
+    onSubmit(result.message)
   }
 
   const isCard = items.every((item) => CARD_TYPES.has(item.type))
@@ -211,10 +192,11 @@ export function LiveCredentialCard({
           switch (item.type) {
             case 'link':
               if (!item.provider) return null
-              return parseSearchTarget(item) ? (
+              return item.searchTarget ? (
                 <SearchRow
                   key={controlId}
                   item={item}
+                  target={item.searchTarget}
                   controlId={controlId}
                   onConnected={markConnected}
                 />

apps/sim/platform/app/(shell)/_components/chat/conversation/conversation.tsx

@@ -19,15 +19,15 @@ import {
 } from '@/platform/design-system/components'
 import { useScrollEdges } from '@/platform/design-system/components/scroll-area/use-scroll-edges'
 
-function Turn({ turn, onRetry }: { turn: PlatformTurn; onRetry: (id: string) => void }) {
+function Turn({ turn }: { turn: PlatformTurn }) {
   if (turn.role === 'user') return <UserMessage turn={turn} />
   if (turn.role === 'automated')
     return (
       <p className={styles.automated} data-type='T052'>
         <strong>{turn.label}</strong> {turn.summary}
       </p>
     )
-  return <ResponseMessage turn={turn} onRetry={() => onRetry(turn.id)} />
+  return <ResponseMessage turn={turn} />
 }
 
 /** One exchange per article: a person's message and what answered it. */
@@ -59,17 +59,23 @@ export function Conversation({ runtime, composer, placeholders, header }: Conver
   const { title, turns, status, chatId, queue } = runtime
   const running = status === 'sending' || status === 'reconnecting'
   const last = turns.at(-1)
-  const following = useRef(true)
-  // Pinned on every commit, since a stream grows the last turn without changing its id.
+  const thread = useRef<HTMLDivElement>(null)
+  // A new turn always comes into view, and scrolling back up is what stops it following.
   useLayoutEffect(() => {
-    const el = viewport.current
-    if (el && following.current) el.scrollTop = el.scrollHeight
-  })
-  useLayoutEffect(() => {
-    following.current = true
+    setEarlier(false)
     const el = viewport.current
     if (el) el.scrollTop = el.scrollHeight
   }, [chatId, last?.id])
+  // A stream grows the last turn without changing its id, so follow the thread's size.
+  useLayoutEffect(() => {
+    const el = viewport.current
+    if (earlier || !el || !thread.current) return
+    const observer = new ResizeObserver(() => {
+      el.scrollTop = el.scrollHeight
+    })
+    observer.observe(thread.current)
+    return () => observer.disconnect()
+  }, [earlier])
   return (
     <ChatRuntimeProvider runtime={runtime}>
       <div className={styles.chat}>
@@ -88,12 +94,10 @@ export function Conversation({ runtime, composer, placeholders, header }: Conver
           ref={reading}
           onScroll={(event) => {
             const el = event.currentTarget
-            const distance = el.scrollHeight - el.clientHeight - el.scrollTop
-            following.current = distance <= FOLLOW_SLACK
-            setEarlier(distance > FOLLOW_SLACK)
+            setEarlier(el.scrollHeight - el.clientHeight - el.scrollTop > FOLLOW_SLACK)
           }}
         >
-          <div className={styles.thread}>
+          <div className={styles.thread} ref={thread}>
             {status === 'loading' && (
               <p className={styles.turn} data-type='T048' role='status'>
                 Loading conversation
@@ -113,7 +117,7 @@ export function Conversation({ runtime, composer, placeholders, header }: Conver
             {groupExchanges(turns).map((exchange) => (
               <article key={exchange[0].id} className={styles.turn}>
                 {exchange.map((turn) => (
-                  <Turn key={turn.id} turn={turn} onRetry={runtime.retry} />
+                  <Turn key={turn.id} turn={turn} />
                 ))}
               </article>
             ))}

apps/sim/platform/app/(shell)/_components/chat/conversation/fixture-chat.tsx

@@ -1,16 +1,13 @@
 'use client'
 
 import { Conversation } from '@/platform/app/(shell)/_components/chat/conversation/conversation'
-import type { ConversationData } from '@/platform/app/(shell)/_components/chat/conversation/model'
+import {
+  CHAT_PLACEHOLDERS,
+  type ConversationData,
+} from '@/platform/app/(shell)/_components/chat/conversation/model'
 import { useFixtureChatRuntime } from '@/platform/app/(shell)/_components/session/chat-changes'
 import { useComposerHost } from '@/platform/app/(shell)/_components/session/composer-host'
 
-const PLACEHOLDERS = {
-  first: 'Ask about your business, or give Sim something to do…',
-  followUp: 'Ask a follow-up…',
-  running: 'Add a follow-up…',
-}
-
 interface FixtureChatProps {
   data: ConversationData | null
   chatId?: string
@@ -25,5 +22,7 @@ export function FixtureChat({ data, chatId }: FixtureChatProps) {
     references: data?.references,
     initialAttachments: !id || thread ? data?.draftAttachments : undefined,
   })
-  return <Conversation key={id} runtime={runtime} composer={composer} placeholders={PLACEHOLDERS} />
+  return (
+    <Conversation key={id} runtime={runtime} composer={composer} placeholders={CHAT_PLACEHOLDERS} />
+  )
 }

apps/sim/platform/app/(shell)/_components/chat/conversation/model.ts

@@ -9,3 +9,9 @@ export interface ConversationData {
   references: ComposerReferences
   draftAttachments: ChatAttachment[]
 }
+
+export const CHAT_PLACEHOLDERS = {
+  first: 'Ask about your business, or give Sim something to do…',
+  followUp: 'Ask a follow-up…',
+  running: 'Add a follow-up…',
+}

apps/sim/platform/app/(shell)/_components/chat/live/live-chat.tsx

@@ -1,12 +1,13 @@
 'use client'
 
 import type { ReactNode } from 'react'
-import { useMemo, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import {
   LiveCredentialCard,
   LiveUsageNotice,
 } from '@/platform/app/(shell)/_components/chat/cards/live-credential-card'
 import { Conversation } from '@/platform/app/(shell)/_components/chat/conversation/conversation'
+import { CHAT_PLACEHOLDERS } from '@/platform/app/(shell)/_components/chat/conversation/model'
 import {
   type ChatCards,
   ChatCardsProvider,
@@ -23,16 +24,8 @@ import { useOrganization } from '@/platform/lib/data/organization'
 const CARDS: ChatCards = { Credential: LiveCredentialCard, Usage: LiveUsageNotice }
 
 const PLACEHOLDERS = {
-  agent: {
-    first: 'Ask about your business, or give Sim something to do…',
-    followUp: 'Ask a follow-up…',
-    running: 'Add a follow-up…',
-  },
-  assistant: {
-    first: 'Ask about your company’s knowledge…',
-    followUp: 'Ask a follow-up…',
-    running: 'Add a follow-up…',
-  },
+  agent: CHAT_PLACEHOLDERS,
+  assistant: { ...CHAT_PLACEHOLDERS, first: 'Ask about your company’s knowledge…' },
 }
 
 interface LiveChatProps {
@@ -41,8 +34,6 @@ interface LiveChatProps {
   /** A surface's own controls in place of the chat title. */
   header?: ReactNode
   chatPath?: (chatId: string) => string
-  /** Tells the surface a chat now exists, so it can drop its landing state. */
-  children?: ReactNode
 }
 
 function LiveConversation({ chatId, destination, header, chatPath }: LiveChatProps) {
@@ -64,15 +55,14 @@ function LiveConversation({ chatId, destination, header, chatPath }: LiveChatPro
   })
   restore.current = composer.restore
   const resources = usePanelResources({ chat, panel, controller })
-  const placeholders = useMemo(() => PLACEHOLDERS[destination], [destination])
   return (
     <ChatCardsProvider value={CARDS}>
       <SearchTabProvider value={LiveSearchTab}>
         <ResourcePanels panel={resources}>
           <Conversation
             runtime={runtime}
             composer={composer}
-            placeholders={placeholders}
+            placeholders={PLACEHOLDERS[destination]}
             header={header}
           />
         </ResourcePanels>

apps/sim/platform/app/(shell)/_components/chat/message/markdown-content.tsx

@@ -4,14 +4,7 @@ import { memo, type ReactNode } from 'react'
 import { Streamdown } from 'streamdown'
 import styles from '@/platform/app/(shell)/_components/chat/message/markdown.module.css'
 import { CopyButton } from '@/platform/design-system/components'
-
-function textOf(node: ReactNode): string {
-  if (typeof node === 'string' || typeof node === 'number') return String(node)
-  if (Array.isArray(node)) return node.map(textOf).join('')
-  if (node && typeof node === 'object' && 'props' in node)
-    return textOf((node.props as { children?: ReactNode }).children)
-  return ''
-}
+import { extractTextContent } from '@/platform/lib/data/node-text'
 
 const COMPONENTS = {
   p: ({ children }: { children?: ReactNode }) => <p data-type='T048'>{children}</p>,
@@ -28,7 +21,7 @@ const COMPONENTS = {
   pre: ({ children }: { children?: ReactNode }) => (
     <div className={styles.code}>
       <span className={styles.copy}>
-        <CopyButton label='Copy code' text={textOf(children)} />
+        <CopyButton label='Copy code' text={extractTextContent(children)} />
       </span>
       <pre>{children}</pre>
     </div>

apps/sim/platform/app/(shell)/_components/chat/message/response-actions.tsx

@@ -20,11 +20,10 @@ type Rating = 'Good response' | 'Bad response'
 
 interface ResponseActionsProps {
   turn: Extract<PlatformTurn, { role: 'assistant' }>
-  text: string
-  sentAt?: number
 }
 
-export function ResponseActions({ turn, text, sentAt }: ResponseActionsProps) {
+export function ResponseActions({ turn }: ResponseActionsProps) {
+  const { copyText: text, sentAt } = turn
   const { rate, fork } = useChatRuntime()
   const [feedback, setFeedback] = useState<Rating | null>(null)
   const [rating, setRating] = useState<Rating | null>(null)