fix(chat): parse wsres links once, derive file icons from the VFS path

Author: waleedlatif1

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

@@ -12,6 +12,7 @@ import 'prismjs/components/prism-css'
 import 'prismjs/components/prism-markup'
 import '@sim/emcn/components/code/code.css'
 import { Checkbox, CopyCodeButton, cn, highlight, languages } from '@sim/emcn'
+import { decodeVfsSegmentSafe } from '@/lib/copilot/vfs/path-utils'
 import { extractTextContent } from '@/lib/core/utils/react-node-text'
 import { ContextMentionIcon } from '@/app/workspace/[workspaceId]/home/components/context-mention-icon'
 import {
@@ -144,6 +145,20 @@ const WSRES_LINK_KINDS: Record<string, ChatContextKind | undefined> = {
   file: 'file',
 }
 
+/**
+ * Label used to pick a file link's extension-aware document icon. The visible
+ * link text can be a custom title without an extension, so prefer the file
+ * name carried in the link's VFS path (its last extension-bearing segment).
+ */
+function fileIconLabel(ref: string, fallback: string): string {
+  const segments = ref.split('/').filter(Boolean)
+  for (let i = segments.length - 1; i >= 0; i--) {
+    const decoded = decodeVfsSegmentSafe(segments[i])
+    if (decoded.includes('.')) return decoded
+  }
+  return fallback
+}
+
 const MARKDOWN_COMPONENTS = {
   table({ children }: { children?: React.ReactNode }) {
     return (
@@ -214,7 +229,10 @@ const MARKDOWN_COMPONENTS = {
   },
   a({ children, href }: { children?: React.ReactNode; href?: string }) {
     if (href?.startsWith('#wsres-')) {
-      const kind = WSRES_LINK_KINDS[href.match(/^#wsres-(\w+)-/)?.[1] ?? '']
+      const match = href.match(/^#wsres-(\w+)-(.+)$/)
+      const type = match?.[1]
+      const ref = match?.[2]
+      const kind = type ? WSRES_LINK_KINDS[type] : undefined
       const label = extractTextContent(children)
       return (
         <a
@@ -227,25 +245,21 @@ const MARKDOWN_COMPONENTS = {
           )}
           onClick={(e) => {
             e.preventDefault()
-            const match = href.match(/^#wsres-(\w+)-(.+)$/)
-            if (match) {
-              const type = match[1]
-              const ref = match[2]
-              const linkText = label || ref
-              window.dispatchEvent(
-                new CustomEvent('wsres-click', {
-                  detail:
-                    type === 'file'
-                      ? { type, path: ref, title: linkText }
-                      : { type, id: ref, title: linkText },
-                })
-              )
-            }
+            if (!type || !ref) return
+            const linkText = label || ref
+            window.dispatchEvent(
+              new CustomEvent('wsres-click', {
+                detail:
+                  type === 'file'
+                    ? { type, path: ref, title: linkText }
+                    : { type, id: ref, title: linkText },
+              })
+            )
           }}
         >
-          {kind && (
+          {kind && ref && (
             <ContextMentionIcon
-              context={{ kind, label }}
+              context={{ kind, label: kind === 'file' ? fileIconLabel(ref, label) : label }}
               className='size-[14px] flex-shrink-0 text-[var(--text-icon)]'
             />
           )}

apps/sim/lib/copilot/tools/client/store-utils.ts

@@ -6,7 +6,7 @@ import { VFS_DIR_TO_RESOURCE } from '@/lib/copilot/resources/types'
 import { isToolHiddenInUi } from '@/lib/copilot/tools/client/hidden-tools'
 import { getReadTargetBlock } from '@/lib/copilot/tools/client/read-block'
 import { ClientToolCallState } from '@/lib/copilot/tools/client/tool-call-state'
-import { decodeVfsSegment } from '@/lib/copilot/vfs/path-utils'
+import { decodeVfsSegmentSafe } from '@/lib/copilot/vfs/path-utils'
 
 /** Respond tools are internal handoff tools shown with a friendly generic label. */
 const HIDDEN_TOOL_SUFFIX = '_respond'
@@ -82,20 +82,6 @@ function formatReadingLabel(target: string | undefined, state: ClientToolCallSta
   }
 }
 
-/**
- * VFS paths store each segment percent-encoded (see {@link encodeVfsSegment}), so
- * a read on "My Report.txt" arrives as "files/My%20Report.txt". Decode for
- * display so the user sees the real file name. Falls back to the raw segment when
- * it is not valid encoding (e.g. a literal "%" that was never encoded).
- */
-function decodeVfsSegmentSafe(segment: string): string {
-  try {
-    return decodeVfsSegment(segment)
-  } catch {
-    return segment
-  }
-}
-
 function describeReadTarget(path: string | undefined): string | undefined {
   if (!path) return undefined
 

apps/sim/lib/copilot/vfs/path-utils.ts

@@ -34,6 +34,18 @@ export function decodeVfsSegment(segment: string): string {
   }
 }
 
+/**
+ * Decodes a VFS path segment for display, falling back to the raw segment when
+ * it is not valid encoding (e.g. a literal "%" that was never encoded).
+ */
+export function decodeVfsSegmentSafe(segment: string): string {
+  try {
+    return decodeVfsSegment(segment)
+  } catch {
+    return segment
+  }
+}
+
 export function encodeVfsPathSegments(segments: string[]): string {
   return segments.map(encodeVfsSegment).join('/')
 }