feat(desktop): make file paths in chat messages clickable

ui/desktop/src/components/MarkdownContent.tsx

@@ -29,6 +29,7 @@ const customOneDarkTheme = {
 import { Check, Copy } from './icons';
 import { wrapHTMLInCodeBlock } from '../utils/htmlSecurity';
 import { isProtocolSafe, getProtocol, BLOCKED_PROTOCOLS } from '../utils/urlSecurity';
+import { remarkLinkifyPaths, OPEN_FILE_PROTOCOL, isTrustedGeneratedFileLink, decodeFileLinkHref } from '../utils/linkifyPaths';
 import { ConfirmationModal } from './ui/ConfirmationModal';
 import { defineMessages, useIntl } from '../i18n';
 
@@ -197,6 +198,19 @@ const customUrlTransform = (url: string): string => {
   return url;
 };
 
+function getAnchorText(children: React.ReactNode): string {
+  if (typeof children === 'string' || typeof children === 'number') {
+    return String(children);
+  }
+  if (Array.isArray(children)) {
+    return children.map(getAnchorText).join('');
+  }
+  if (React.isValidElement<{ children?: React.ReactNode }>(children)) {
+    return getAnchorText(children.props.children);
+  }
+  return '';
+};
+
 const MarkdownContent = memo(function MarkdownContent({
   content,
   className = '',
@@ -258,7 +272,7 @@ const MarkdownContent = memo(function MarkdownContent({
       >
         <ReactMarkdown
           urlTransform={customUrlTransform}
-          remarkPlugins={[remarkGfm, remarkBreaks, [remarkMath, { singleDollarTextMath: false }]]}
+          remarkPlugins={[remarkGfm, remarkBreaks, remarkLinkifyPaths, [remarkMath, { singleDollarTextMath: false }]]}
           rehypePlugins={[
             [
               rehypeKatex,
@@ -271,6 +285,26 @@ const MarkdownContent = memo(function MarkdownContent({
           ]}
           components={{
             a: (props) => {
+              const href = props.href;
+              if (href && href.startsWith(OPEN_FILE_PROTOCOL)) {
+                const filePath = decodeFileLinkHref(href);
+                const label = getAnchorText(props.children);
+                if (filePath && isTrustedGeneratedFileLink(href, label)) {
+                  return (
+                    <a
+                      {...props}
+                      href={href}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        window.electron.openPathInExplorer(filePath);
+                      }}
+                      className="file-path-link"
+                      title={`Show in Finder: ${filePath}`}
+                    />
+                  );
+                }
+              }
               return (
                 <a
                   {...props}

ui/desktop/src/main.ts

@@ -2779,6 +2779,16 @@ async function appMain() {
     }
   });
 
+  ipcMain.handle('open-path-in-explorer', async (_event, path: string) => {
+    try {
+      shell.showItemInFolder(expandTilde(path));
+      return true;
+    } catch (error) {
+      console.error('Error showing path in explorer:', error);
+      return false;
+    }
+  });
+
   ipcMain.handle('launch-app', async (event, gooseApp: GooseApp) => {
     try {
       const launchingWindow = BrowserWindow.fromWebContents(event.sender);

ui/desktop/src/preload.ts

@@ -186,6 +186,7 @@ type ElectronAPI = {
   hasAcceptedRecipeBefore: (recipe: Recipe) => Promise<boolean>;
   recordRecipeHash: (recipe: Recipe) => Promise<boolean>;
   openDirectoryInExplorer: (directoryPath: string) => Promise<boolean>;
+  openPathInExplorer: (filePath: string) => Promise<boolean>;
   launchApp: (app: GooseApp) => Promise<void>;
   refreshApp: (app: GooseApp) => Promise<void>;
   closeApp: (appName: string) => Promise<void>;
@@ -344,6 +345,8 @@ const electronAPI: ElectronAPI = {
   recordRecipeHash: (recipe: Recipe) => ipcRenderer.invoke('record-recipe-hash', recipe),
   openDirectoryInExplorer: (directoryPath: string) =>
     ipcRenderer.invoke('open-directory-in-explorer', directoryPath),
+  openPathInExplorer: (filePath: string) =>
+    ipcRenderer.invoke('open-path-in-explorer', filePath),
   launchApp: (app: GooseApp) => ipcRenderer.invoke('launch-app', app),
   refreshApp: (app: GooseApp) => ipcRenderer.invoke('refresh-app', app),
   closeApp: (appName: string) => ipcRenderer.invoke('close-app', appName),

ui/desktop/src/styles/main.css

@@ -581,6 +581,18 @@ pre:has(> code.bg-inline-code) {
   content: '';
 }
 
+a.file-path-link {
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  border-bottom: 1px dashed currentColor;
+}
+
+a.file-path-link:hover {
+  border-bottom-style: solid;
+  opacity: 0.8;
+}
+
 .user-message p {
   margin-bottom: 0 !important;
 }