bingocode 1.0.1 → 1.0.3

package/desktop/src/components/chat/MermaidRenderer.test.tsx

@@ -0,0 +1,98 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+const { initializeMock, renderMock } = vi.hoisted(() => ({
+  initializeMock: vi.fn(),
+  renderMock: vi.fn(),
+}))
+
+vi.mock('mermaid', () => ({
+  default: {
+    initialize: initializeMock,
+    render: renderMock,
+  },
+}))
+
+import { MermaidRenderer } from './MermaidRenderer'
+
+describe('MermaidRenderer', () => {
+  beforeEach(() => {
+    initializeMock.mockReset()
+    renderMock.mockReset()
+    renderMock.mockResolvedValue({
+      svg: '<svg viewBox="0 0 200 100"><rect width="200" height="100"></rect></svg>',
+    })
+  })
+
+  it('opens preview with zoom controls and updates the zoom label', async () => {
+    render(<MermaidRenderer code={'graph TB\nA-->B'} />)
+
+    const previewButton = await screen.findByRole('button', { name: /preview/i })
+    expect(previewButton).toBeInTheDocument()
+
+    fireEvent.click(previewButton)
+
+    await screen.findByText('Mermaid Diagram')
+    expect(screen.getByRole('button', { name: 'Zoom in' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Zoom out' })).toBeInTheDocument()
+
+    const zoomButton = screen.getByRole('button', { name: '100%' })
+    expect(zoomButton).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }))
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: '125%' })).toBeInTheDocument()
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: '125%' }))
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: '100%' })).toBeInTheDocument()
+    })
+  })
+
+  it('enters and exits dragging state while panning the preview viewport', async () => {
+    render(<MermaidRenderer code={'graph TB\nA-->B'} />)
+
+    fireEvent.click(await screen.findByRole('button', { name: /preview/i }))
+    const viewport = await screen.findByTestId('mermaid-preview-viewport')
+    const canvas = screen.getByLabelText('Mermaid preview canvas')
+
+    Object.defineProperty(viewport, 'setPointerCapture', {
+      value: vi.fn(),
+      configurable: true,
+    })
+    Object.defineProperty(viewport, 'releasePointerCapture', {
+      value: vi.fn(),
+      configurable: true,
+    })
+    Object.defineProperty(viewport, 'scrollLeft', {
+      value: 0,
+      writable: true,
+      configurable: true,
+    })
+    Object.defineProperty(viewport, 'scrollTop', {
+      value: 0,
+      writable: true,
+      configurable: true,
+    })
+
+    fireEvent.pointerDown(viewport, {
+      pointerId: 7,
+      clientX: 180,
+      clientY: 120,
+      pageX: 180,
+      pageY: 120,
+      button: 0,
+      pointerType: 'mouse',
+    })
+    expect(canvas).toHaveAttribute('data-dragging', 'true')
+    expect(viewport).toHaveStyle({ cursor: 'grabbing' })
+
+    fireEvent.pointerUp(viewport, { pointerId: 7, pointerType: 'mouse' })
+    expect(canvas).toHaveAttribute('data-dragging', 'false')
+    expect(viewport).toHaveStyle({ cursor: 'grab' })
+  })
+})

package/desktop/src/components/chat/MermaidRenderer.tsx

@@ -0,0 +1,361 @@
+import { useEffect, useRef, useState, useCallback } from 'react'
+import DOMPurify from 'dompurify'
+import mermaid from 'mermaid'
+import { Modal } from '../shared/Modal'
+import { CopyButton } from '../shared/CopyButton'
+
+type Props = {
+  code: string
+}
+
+let mermaidInitialized = false
+const MIN_PREVIEW_ZOOM = 0.5
+const MAX_PREVIEW_ZOOM = 3
+const PREVIEW_ZOOM_STEP = 0.25
+
+type SvgMetrics = {
+  width: number
+  height: number
+}
+
+type DragState = {
+  pointerId: number
+  startX: number
+  startY: number
+  scrollLeft: number
+  scrollTop: number
+}
+
+function initMermaid() {
+  if (mermaidInitialized) return
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: 'default',
+    securityLevel: 'strict',
+    fontFamily: 'var(--font-sans)',
+  })
+  mermaidInitialized = true
+}
+
+let mermaidIdCounter = 0
+
+function clampZoom(value: number) {
+  return Math.min(MAX_PREVIEW_ZOOM, Math.max(MIN_PREVIEW_ZOOM, value))
+}
+
+function getPointerPosition(
+  event: Pick<React.PointerEvent<HTMLDivElement>, 'clientX' | 'clientY' | 'pageX' | 'pageY'>,
+) {
+  const x = Number.isFinite(event.clientX) ? event.clientX : event.pageX
+  const y = Number.isFinite(event.clientY) ? event.clientY : event.pageY
+
+  return {
+    x: Number.isFinite(x) ? x : 0,
+    y: Number.isFinite(y) ? y : 0,
+  }
+}
+
+function parseSvgMetrics(svg: string): SvgMetrics | null {
+  const viewBoxMatch = svg.match(/viewBox="([^"]+)"/i)
+  if (viewBoxMatch) {
+    const viewBox = viewBoxMatch[1]
+    if (!viewBox) return null
+
+    const values = viewBox
+      .split(/[\s,]+/)
+      .map((part) => Number.parseFloat(part))
+
+    if (values.length === 4 && values.every((value) => Number.isFinite(value))) {
+      const [, , width, height] = values
+      if (width !== undefined && height !== undefined) {
+        return { width, height }
+      }
+    }
+  }
+
+  const widthMatch = svg.match(/\bwidth="([0-9.]+)(?:px)?"/i)
+  const heightMatch = svg.match(/\bheight="([0-9.]+)(?:px)?"/i)
+  if (widthMatch && heightMatch) {
+    const widthValue = widthMatch[1]
+    const heightValue = heightMatch[1]
+    if (!widthValue || !heightValue) return null
+
+    const width = Number.parseFloat(widthValue)
+    const height = Number.parseFloat(heightValue)
+    if (Number.isFinite(width) && Number.isFinite(height)) {
+      return { width, height }
+    }
+  }
+
+  return null
+}
+
+export function MermaidRenderer({ code }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const previewViewportRef = useRef<HTMLDivElement>(null)
+  const previewContentRef = useRef<HTMLDivElement>(null)
+  const dragStateRef = useRef<DragState | null>(null)
+  const [svg, setSvg] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [previewOpen, setPreviewOpen] = useState(false)
+  const [previewZoom, setPreviewZoom] = useState(1)
+  const [isDraggingPreview, setIsDraggingPreview] = useState(false)
+
+  const svgMetrics = svg ? parseSvgMetrics(svg) : null
+
+  useEffect(() => {
+    let cancelled = false
+    initMermaid()
+
+    const id = `mermaid-${++mermaidIdCounter}`
+
+    mermaid.render(id, code).then(
+      ({ svg: renderedSvg }) => {
+        if (!cancelled) {
+          setSvg(renderedSvg)
+          setError(null)
+        }
+      },
+      (err) => {
+        if (!cancelled) {
+          setError(String(err?.message || err))
+          setSvg(null)
+        }
+      },
+    )
+
+    return () => { cancelled = true }
+  }, [code])
+
+  const handlePreview = useCallback(() => setPreviewOpen(true), [])
+  const handlePreviewClose = useCallback(() => setPreviewOpen(false), [])
+  const zoomIn = useCallback(
+    () => setPreviewZoom((value) => clampZoom(value + PREVIEW_ZOOM_STEP)),
+    [],
+  )
+  const zoomOut = useCallback(
+    () => setPreviewZoom((value) => clampZoom(value - PREVIEW_ZOOM_STEP)),
+    [],
+  )
+  const resetZoom = useCallback(() => setPreviewZoom(1), [])
+
+  useEffect(() => {
+    if (!previewOpen) {
+      setPreviewZoom(1)
+      setIsDraggingPreview(false)
+      dragStateRef.current = null
+    }
+  }, [previewOpen, svg])
+
+  const stopDraggingPreview = useCallback(() => {
+    const viewport = previewViewportRef.current
+    const dragState = dragStateRef.current
+    if (viewport && dragState) {
+      try {
+        viewport.releasePointerCapture(dragState.pointerId)
+      } catch {
+        // Ignore capture release failures from synthetic test events.
+      }
+    }
+    dragStateRef.current = null
+    setIsDraggingPreview(false)
+  }, [])
+
+  useEffect(() => stopDraggingPreview, [stopDraggingPreview])
+
+  useEffect(() => {
+    if (!previewOpen || !previewContentRef.current) return
+
+    const renderedSvg = previewContentRef.current.querySelector('svg')
+    if (!renderedSvg) return
+
+    renderedSvg.setAttribute('width', '100%')
+    renderedSvg.setAttribute('height', '100%')
+    renderedSvg.style.width = '100%'
+    renderedSvg.style.height = '100%'
+    renderedSvg.style.display = 'block'
+  }, [previewOpen, svg, previewZoom])
+
+  const handlePreviewWheel = useCallback((event: React.WheelEvent<HTMLDivElement>) => {
+    if (!event.ctrlKey && !event.metaKey) return
+
+    event.preventDefault()
+    const direction = event.deltaY < 0 ? PREVIEW_ZOOM_STEP : -PREVIEW_ZOOM_STEP
+    setPreviewZoom((value) => clampZoom(value + direction))
+  }, [])
+
+  const handlePreviewPointerDown = useCallback((event: React.PointerEvent<HTMLDivElement>) => {
+    if (event.pointerType === 'mouse' && event.button !== 0) return
+
+    const viewport = previewViewportRef.current
+    if (!viewport) return
+    const { x, y } = getPointerPosition(event)
+
+    dragStateRef.current = {
+      pointerId: event.pointerId,
+      startX: x,
+      startY: y,
+      scrollLeft: viewport.scrollLeft,
+      scrollTop: viewport.scrollTop,
+    }
+    setIsDraggingPreview(true)
+    viewport.setPointerCapture(event.pointerId)
+  }, [])
+
+  const handlePreviewPointerMove = useCallback((event: React.PointerEvent<HTMLDivElement>) => {
+    const viewport = previewViewportRef.current
+    const dragState = dragStateRef.current
+    if (!viewport || !dragState || dragState.pointerId !== event.pointerId) return
+
+    event.preventDefault()
+    const { x, y } = getPointerPosition(event)
+    viewport.scrollLeft = dragState.scrollLeft - (x - dragState.startX)
+    viewport.scrollTop = dragState.scrollTop - (y - dragState.startY)
+  }, [])
+
+  const handlePreviewPointerUp = useCallback((event: React.PointerEvent<HTMLDivElement>) => {
+    const dragState = dragStateRef.current
+    if (!dragState || dragState.pointerId !== event.pointerId) return
+    stopDraggingPreview()
+  }, [stopDraggingPreview])
+
+  const previewCanvasStyle = svgMetrics
+    ? {
+        width: `${svgMetrics.width * previewZoom}px`,
+        height: `${svgMetrics.height * previewZoom}px`,
+      }
+    : undefined
+
+  if (error) {
+    return (
+      <div className="my-4 overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-error)]/30">
+        <div className="flex items-center gap-2 border-b border-[var(--color-error)]/20 bg-[var(--color-error-container)] px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-[var(--color-error)]">
+          <span className="material-symbols-outlined text-[14px]">error</span>
+          Mermaid Error
+        </div>
+        <div className="bg-[var(--color-error-container)]/30 px-3 py-2 font-[var(--font-mono)] text-[11px] text-[var(--color-error)]">
+          {error}
+        </div>
+      </div>
+    )
+  }
+
+  if (!svg) {
+    return (
+      <div className="my-4 flex items-center justify-center rounded-[var(--radius-lg)] border border-[var(--color-border)]/50 bg-[var(--color-surface-container-low)] py-8">
+        <div className="flex items-center gap-2 text-[11px] text-[var(--color-text-tertiary)]">
+          <span className="material-symbols-outlined animate-spin text-[16px]">progress_activity</span>
+          Rendering diagram...
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="my-4 overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-outline-variant)]/50 bg-[var(--color-surface-container-low)]">
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-[var(--color-outline-variant)]/40 bg-[var(--color-surface-container)] px-3 py-1.5 text-[11px] text-[var(--color-text-tertiary)]">
+          <div className="flex items-center gap-2">
+            <span className="material-symbols-outlined text-[14px]">account_tree</span>
+            <span className="font-semibold uppercase tracking-[0.14em]">Mermaid</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <button
+              onClick={handlePreview}
+              className="flex items-center gap-1 rounded-md border border-[var(--color-outline-variant)]/40 bg-[var(--color-surface-container-lowest)] px-2 py-1 text-[11px] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-container-high)] hover:text-[var(--color-text-primary)]"
+            >
+              <span className="material-symbols-outlined text-[12px]">fullscreen</span>
+              Preview
+            </button>
+            <CopyButton
+              text={code}
+              className="rounded-md border border-[var(--color-outline-variant)]/40 bg-[var(--color-surface-container-lowest)] px-2 py-1 text-[11px] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-container-high)] hover:text-[var(--color-text-primary)]"
+            />
+          </div>
+        </div>
+
+        {/* Diagram */}
+        <div
+          ref={containerRef}
+          className="flex items-center justify-center overflow-auto bg-white p-4 cursor-pointer"
+          style={{ maxHeight: 400 }}
+          onClick={handlePreview}
+          dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(svg, { USE_PROFILES: { svg: true, svgFilters: true } }) }}
+        />
+      </div>
+
+      {/* Fullscreen preview modal */}
+      <Modal open={previewOpen} onClose={handlePreviewClose} width={1100}>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2 text-sm font-semibold text-[var(--color-text-primary)]">
+              <span className="material-symbols-outlined text-[18px]">account_tree</span>
+              Mermaid Diagram
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="flex items-center gap-1 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-1 py-1">
+                <button
+                  type="button"
+                  onClick={zoomOut}
+                  aria-label="Zoom out"
+                  className="flex h-8 w-8 items-center justify-center rounded-md text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]"
+                >
+                  <span className="material-symbols-outlined text-[16px]">remove</span>
+                </button>
+                <button
+                  type="button"
+                  onClick={resetZoom}
+                  className="min-w-[68px] rounded-md px-2 py-1 text-[11px] font-semibold text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]"
+                >
+                  {Math.round(previewZoom * 100)}%
+                </button>
+                <button
+                  type="button"
+                  onClick={zoomIn}
+                  aria-label="Zoom in"
+                  className="flex h-8 w-8 items-center justify-center rounded-md text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]"
+                >
+                  <span className="material-symbols-outlined text-[16px]">add</span>
+                </button>
+              </div>
+              <CopyButton
+                text={code}
+                className="rounded-md border border-[var(--color-border)] px-2.5 py-1 text-[11px] text-[var(--color-text-tertiary)] transition-colors hover:text-[var(--color-text-primary)]"
+              />
+            </div>
+          </div>
+          <div
+            ref={previewViewportRef}
+            data-testid="mermaid-preview-viewport"
+            className="overflow-auto rounded-xl bg-white"
+            style={{
+              maxHeight: '75vh',
+              cursor: isDraggingPreview ? 'grabbing' : 'grab',
+            }}
+            onWheel={handlePreviewWheel}
+            onPointerDown={handlePreviewPointerDown}
+            onPointerMove={handlePreviewPointerMove}
+            onPointerUp={handlePreviewPointerUp}
+            onPointerCancel={handlePreviewPointerUp}
+            onPointerLeave={handlePreviewPointerUp}
+          >
+            <div className="min-h-full min-w-full p-6">
+              <div
+                ref={previewContentRef}
+                className="mx-auto shrink-0 select-none"
+                style={previewCanvasStyle}
+                data-dragging={isDraggingPreview ? 'true' : 'false'}
+                aria-label="Mermaid preview canvas"
+                dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(svg, { USE_PROFILES: { svg: true, svgFilters: true } }) }}
+              />
+            </div>
+          </div>
+          <div className="text-[11px] text-[var(--color-text-tertiary)]">
+            Use the zoom controls to enlarge the diagram. Drag inside the preview to pan, or use the trackpad, mouse wheel, and scrollbars. Hold Ctrl/Command while scrolling to zoom.
+          </div>
+        </div>
+      </Modal>
+    </>
+  )
+}

package/desktop/src/components/chat/MessageActionBar.tsx

@@ -0,0 +1,27 @@
+import { CopyButton } from '../shared/CopyButton'
+
+type Props = {
+  copyText?: string
+  copyLabel: string
+}
+
+export function MessageActionBar({
+  copyText,
+  copyLabel,
+}: Props) {
+  const hasCopy = Boolean(copyText?.trim())
+
+  if (!hasCopy) return null
+
+  return (
+    <div className="shrink-0 pb-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+      <CopyButton
+        text={copyText!}
+        label={copyLabel}
+        displayLabel="Copy"
+        displayCopiedLabel="Copied"
+        className="inline-flex min-h-7 items-center rounded-full border border-[var(--color-border)]/70 bg-[var(--color-surface)] px-2.5 text-[11px] font-medium text-[var(--color-text-tertiary)] transition-colors hover:border-[var(--color-brand)]/35 hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand)]/35"
+      />
+    </div>
+  )
+}