improvement(chat): name the query in the knowledge search row and list a reply's sources densely

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/message-sources/message-sources.tsx

@@ -15,36 +15,24 @@ const STRIP_FADE_CLASSES =
 
 interface MessageSourcesProps {
   sources: readonly SourceTagData[]
-  /** The question the reply answers; its terms are bolded in result cards. */
-  query?: string
-  /** Asks the agent about one cited document, when the surface can send a message. */
-  onSummarize?: (prompt: string) => void
 }
 
 /**
  * Footer listing every document a reply cited, once each. Sources that carry
- * a snippet — a search answer — are laid out as result cards; otherwise one
+ * a title — a search answer — are laid out as one dense row per document, the
+ * prose above having already cited each claim inline; otherwise one
  * horizontally scrolling row of {@link SourceChip}s that fades out at the
  * right edge instead of wrapping, so a long list stays a single quiet line
  * under the answer.
  */
-export function MessageSources({ sources, query, onSummarize }: MessageSourcesProps) {
+export function MessageSources({ sources }: MessageSourcesProps) {
   if (sources.length === 0) return null
 
   if (sources.some((source) => source.snippet)) {
     return (
-      <div className='flex flex-col gap-0.5'>
+      <div className='flex flex-col'>
         {sources.map((source) => (
-          <SourceCard
-            key={source.url}
-            source={source}
-            query={query}
-            onSummarize={
-              onSummarize
-                ? (cited) => onSummarize(`Summarize "${cited.title ?? cited.url}" (${cited.url})`)
-                : undefined
-            }
-          />
+          <SourceCard key={source.url} source={source} dense />
         ))}
       </div>
     )

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/source-card/source-card.tsx

@@ -111,6 +111,11 @@ interface SourceCardProps {
   query?: string
   /** Offers a Summarize action that asks the agent about this document. */
   onSummarize?: (source: SourceTagData) => void
+  /**
+   * One line per document: the mark, the title, and where it lives, with no
+   * snippet. For a list under a reply whose prose already cites each claim.
+   */
+  dense?: boolean
 }
 
 /**
@@ -119,9 +124,9 @@ interface SourceCardProps {
  * who it is from, and when it last changed, and the passage that matched with
  * the query terms in bold. Actions stay out of the way until the row is
  * hovered or its title focused. The same row serves the composer's search
- * results and the footer of a reply that cited its sources with a snippet.
+ * results and, in its dense form, the footer of a reply that cited sources.
  */
-export function SourceCard({ source, query, onSummarize }: SourceCardProps) {
+export function SourceCard({ source, query, onSummarize, dense = false }: SourceCardProps) {
   const hostname = externalLinkHostname(source.url)
   const ConnectorIcon = source.connectorType
     ? BRAND_ICON_BY_BASE_TYPE.get(source.connectorType)
@@ -133,20 +138,48 @@ export function SourceCard({ source, query, onSummarize }: SourceCardProps) {
     updatedAt ? formatDate(updatedAt) : null,
   ].filter((part): part is string => Boolean(part))
 
+  const mark = ConnectorIcon ? (
+    <BrandIcon icon={ConnectorIcon} className='size-[16px]' />
+  ) : hostname ? (
+    <img
+      src={faviconUrl(hostname, 32)}
+      alt=''
+      className='size-[16px] rounded-[3px]'
+      onError={hideBrokenFavicon}
+    />
+  ) : null
+
+  if (dense) {
+    return (
+      <div className={cn(SOURCE_ROW_CLASSES, 'items-center py-1')}>
+        <span className={chipIconSlotClass}>{mark}</span>
+        <a
+          href={source.url}
+          target='_blank'
+          rel='noopener noreferrer'
+          data-source-link=''
+          onClick={(event) => handleExternalLinkClick(event, source.url)}
+          className='min-w-0 flex-1 text-[var(--text-primary)] text-sm no-underline underline-offset-2 hover:underline'
+        >
+          <OverflowText
+            label={source.title?.trim() || sourceLabel(source)}
+            focusTarget='nearest-interactive'
+          />
+        </a>
+        <OverflowText
+          label={meta.join(' · ')}
+          className='max-w-[40%] shrink-0 text-[var(--text-muted)] text-caption'
+        />
+        <div className='flex flex-shrink-0 items-center opacity-0 transition-opacity group-focus-within/source:opacity-100 group-hover/source:opacity-100 [@media(hover:none)]:opacity-100'>
+          <CopyLinkAction url={source.url} />
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className={SOURCE_ROW_CLASSES}>
-      <span className={SOURCE_ROW_MARK_CLASSES}>
-        {ConnectorIcon ? (
-          <BrandIcon icon={ConnectorIcon} className='size-[16px]' />
-        ) : hostname ? (
-          <img
-            src={faviconUrl(hostname, 32)}
-            alt=''
-            className='size-[16px] rounded-[3px]'
-            onError={hideBrokenFavicon}
-          />
-        ) : null}
-      </span>
+      <span className={SOURCE_ROW_MARK_CLASSES}>{mark}</span>
       <div className='flex min-w-0 flex-1 flex-col gap-0.5'>
         <a
           href={source.url}

apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx

@@ -834,8 +834,6 @@ interface MessageContentProps {
   onOptionSelect?: (id: string) => void
   onQuestionDismiss?: () => void
   onPhaseChange?: (phase: MessagePhase) => void
-  /** The user message this reply answers, for the result cards' highlighting. */
-  userQuery?: string
   /**
    * The message's actions row (copy/thumbs). Rendered here, in the thinking
    * slot's position, so at settle the shimmer and the actions trade places in
@@ -856,7 +854,6 @@ function MessageContentInner({
   credentialSubmission,
   credentialAbandoned,
   onOptionSelect,
-  userQuery,
   onQuestionDismiss,
   onPhaseChange,
   actions,
@@ -1032,7 +1029,7 @@ function MessageContentInner({
         })}
         {sources.length > 0 && (
           <div className={isStreaming ? 'animate-stream-fade-in' : undefined}>
-            <MessageSources sources={sources} query={userQuery} onSummarize={onOptionSelect} />
+            <MessageSources sources={sources} />
           </div>
         )}
       </div>

apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx

@@ -204,7 +204,6 @@ interface AssistantMessageRowProps {
   prepareContentForCopy: (content: string) => ClipboardContent
   isStreaming: boolean
   isLast: boolean
-  precedingUserContent?: string
   /** Transcript-derived answers for this message's question card (renders the recap). */
   questionAnswers?: string[]
   /** Transcript-derived status payload for this message's credential card. */
@@ -221,7 +220,6 @@ const AssistantMessageRow = memo(function AssistantMessageRow({
   prepareContentForCopy,
   isStreaming,
   isLast,
-  precedingUserContent,
   questionAnswers,
   credentialSubmission,
   credentialAbandoned,
@@ -297,7 +295,6 @@ const AssistantMessageRow = memo(function AssistantMessageRow({
         credentialSubmission={credentialSubmission}
         credentialAbandoned={credentialAbandoned}
         onOptionSelect={onOptionSelect}
-        userQuery={precedingUserContent}
         onQuestionDismiss={handleQuestionDismiss}
         onPhaseChange={setPhase}
         actions={
@@ -307,7 +304,6 @@ const AssistantMessageRow = memo(function AssistantMessageRow({
               getCopyContent={getCopyContent}
               hasCopyContent={Boolean(getOrchestratorMessageText(blocks, message.content).trim())}
               prepareContentForCopy={prepareContentForCopy}
-              userQuery={precedingUserContent}
               requestId={message.requestId}
               messageId={message.id}
             />
@@ -556,16 +552,6 @@ export function MothershipChat({
     return out
   }, [messages])
 
-  const precedingUserContentByIndex = useMemo(() => {
-    const out: Array<string | undefined> = []
-    let lastUserContent: string | undefined
-    for (const [index, message] of messages.entries()) {
-      out[index] = lastUserContent
-      if (message.role === 'user') lastUserContent = message.content
-    }
-    return out
-  }, [messages])
-
   /**
    * Pairs each assistant question/credential card with the user message that
    * completed it. The paired user message is hidden — the answered card IS the
@@ -810,7 +796,6 @@ export function MothershipChat({
                         prepareContentForCopy={prepareContentForCopy}
                         isStreaming={isStreamActive && isLast}
                         isLast={isLast}
-                        precedingUserContent={precedingUserContentByIndex[index]}
                         questionAnswers={interactionPairing.answersByIndex[index]}
                         credentialSubmission={interactionPairing.credentialSubmissionByIndex[index]}
                         credentialAbandoned={interactionPairing.credentialAbandonedByIndex[index]}

apps/sim/lib/copilot/tools/tool-display.test.ts

@@ -378,6 +378,12 @@ describe('getToolDisplayTitle for operation-driven tools', () => {
     expect(getToolDisplayTitle('manage_knowledge_base', { operation: 'query' })).toBe(
       'Searching knowledge base'
     )
+    expect(
+      getToolDisplayTitle('manage_knowledge_base', {
+        operation: 'query',
+        args: { query: 'volvo delivery process' },
+      })
+    ).toBe('Searching knowledge base for volvo delivery process')
     expect(getToolDisplayTitle('manage_knowledge_base', { operation: 'sync_connector' })).toBe(
       'Syncing knowledge base connector'
     )

apps/sim/lib/copilot/tools/tool-display.ts

@@ -301,10 +301,11 @@ function knowledgeBaseTitle(args: ToolArgs): string {
     'file'
   )
 
+  const query = stringArg(operationArgs, 'query')
   const titles: Record<string, string> = {
     create: `Creating ${name || 'knowledge base'}`,
     get: 'Reading knowledge base',
-    query: 'Searching knowledge base',
+    query: query ? `Searching knowledge base for ${query}` : 'Searching knowledge base',
     add_file: `Adding ${fileTarget} to knowledge base`,
     update: 'Updating knowledge base',
     delete: `Deleting ${countedResourceTarget(operationArgs, 'knowledgeBaseIds', 'knowledge base', 'knowledge bases')}`,