Merge pull request #2790 from generalaction/chat-ui-ff

fix: add mermaid open dialog to chat ui

Author: Davidknp

apps/emdash-desktop/src/renderer/features/conversations/acp/acp-chat-panel.tsx

@@ -1,5 +1,5 @@
 import type { AttachmentMimeType, AttachmentRef } from '@emdash/core/acp/client';
-import { ChatComposer, ImageViewerDialog } from '@emdash/ui/react/components';
+import { ChatComposer, ImageViewerDialog, MermaidViewerDialog } from '@emdash/ui/react/components';
 import type {
   CommandItem,
   ComposerAgentOption,
@@ -631,6 +631,7 @@ export const AcpChatPanel = observer(function AcpChatPanel() {
   const [heroSlot, setHeroSlot] = useState<HTMLElement | null>(null);
   const [overlaySlot, setOverlaySlot] = useState<HTMLElement | null>(null);
   const [viewer, setViewer] = useState<{ src?: string; alt?: string } | null>(null);
+  const [mermaidViewer, setMermaidViewer] = useState<{ svg: string | null } | null>(null);
   const placementConversationRef = useRef<string | null>(null);
   const placementWasEmptyRef = useRef<boolean | null>(null);
   // True while the scroll viewport is at the tail. Defaults to true so the
@@ -721,6 +722,11 @@ export const AcpChatPanel = observer(function AcpChatPanel() {
       },
       resolveAttachment: (attachment) =>
         store ? resolveAttachmentDataUrl(store, attachment.id) : Promise.resolve(null),
+      onViewMermaid: (arg) => {
+        setMermaidViewer({
+          svg: store?.chatContext.sharedCaches.renderMermaid(arg.chart) ?? null,
+        });
+      },
       onOpenFile: (arg) => {
         if (!store) return;
         const open = arg.source === 'diff' ? openFileInAdjacentPane : openFileInTaskEditor;
@@ -844,6 +850,13 @@ export const AcpChatPanel = observer(function AcpChatPanel() {
         src={viewer?.src}
         alt={viewer?.alt}
       />
+      <MermaidViewerDialog
+        open={!!mermaidViewer}
+        onOpenChange={(open) => {
+          if (!open) setMermaidViewer(null);
+        }}
+        svg={mermaidViewer?.svg ?? null}
+      />
     </div>
   );
 });

packages/ui/src/react/components/index.ts

@@ -30,5 +30,6 @@ export type {
 } from './chat-composer/permission-band';
 export { ConfirmationDialog, type ConfirmationDialogProps } from './confirmation-dialog';
 export { ImageViewerDialog, type ImageViewerDialogProps } from './image-viewer';
+export { MermaidViewerDialog, type MermaidViewerDialogProps } from './mermaid-viewer';
 export { ComboboxPopover, type ComboboxPopoverProps } from './combobox-popover';
 export { UpdateCard, type UpdateCardProps, type UpdateStatus } from './update-card/update-card';

packages/ui/src/react/components/mermaid-viewer/index.tsx

@@ -0,0 +1,30 @@
+import { Dialog } from '@/react/primitives/dialog';
+import * as styles from './mermaid-viewer-dialog.css';
+
+export interface MermaidViewerDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Pre-rendered Mermaid SVG markup; null when rendering failed. */
+  svg: string | null;
+  /** Human-readable title shown in the dialog header. */
+  title?: string;
+}
+
+export function MermaidViewerDialog({ open, onOpenChange, svg, title }: MermaidViewerDialogProps) {
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Content size="xl">
+        <Dialog.Header>
+          <Dialog.Title>{title ?? 'Diagram'}</Dialog.Title>
+        </Dialog.Header>
+        <div className={styles.diagramContainer}>
+          {svg ? (
+            <div className={styles.diagram} dangerouslySetInnerHTML={{ __html: svg }} />
+          ) : (
+            <p className={styles.unavailable}>Couldn&apos;t render diagram.</p>
+          )}
+        </div>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}

packages/ui/src/react/components/mermaid-viewer/mermaid-viewer-dialog.css.ts

@@ -0,0 +1,27 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+import { vars } from '@theme/core/contract/contract.css';
+import { tokenVars } from '@theme/tokens.css';
+
+export const diagramContainer = style({
+  minHeight: 0,
+  flex: 1,
+  overflow: 'auto',
+  padding: '1rem',
+  paddingTop: 0,
+});
+
+export const diagram = style({
+  minWidth: 0,
+});
+
+globalStyle(`${diagram} svg`, {
+  display: 'block',
+  maxWidth: '100%',
+  height: 'auto',
+  margin: '0 auto',
+});
+
+export const unavailable = style({
+  fontSize: tokenVars.textSm,
+  color: vars.foregroundMuted,
+});