Initial public release

2025-12-07 19:32:53 +02:00
commit 4b2edf7318
319 changed files with 81600 additions and 0 deletions
@@ -0,0 +1,346 @@
+import React from 'react';
+import { Streamdown } from 'streamdown';
+import { FadeInOnReveal } from './message/FadeInOnReveal';
+import type { Part } from '@opencode-ai/sdk';
+import { cn } from '@/lib/utils';
+import { RiFileCopyLine, RiCheckLine, RiDownloadLine } from '@remixicon/react';
+
+const SHIKI_THEMES = ['vitesse-light', 'vitesse-dark'] as const;
+
+// Table utility functions
+const extractTableData = (tableEl: HTMLTableElement): { headers: string[]; rows: string[][] } => {
+  const headers: string[] = [];
+  const rows: string[][] = [];
+  
+  const thead = tableEl.querySelector('thead');
+  if (thead) {
+    const headerCells = thead.querySelectorAll('th');
+    headerCells.forEach(cell => headers.push(cell.innerText.trim()));
+  }
+  
+  const tbody = tableEl.querySelector('tbody');
+  if (tbody) {
+    const rowEls = tbody.querySelectorAll('tr');
+    rowEls.forEach(row => {
+      const cells = row.querySelectorAll('td');
+      const rowData: string[] = [];
+      cells.forEach(cell => rowData.push(cell.innerText.trim()));
+      rows.push(rowData);
+    });
+  }
+  
+  return { headers, rows };
+};
+
+const tableToCSV = ({ headers, rows }: { headers: string[]; rows: string[][] }): string => {
+  const escapeCell = (cell: string): string => {
+    if (cell.includes(',') || cell.includes('"') || cell.includes('\n')) {
+      return `"${cell.replace(/"/g, '""')}"`;
+    }
+    return cell;
+  };
+  
+  const lines: string[] = [];
+  if (headers.length > 0) {
+    lines.push(headers.map(escapeCell).join(','));
+  }
+  rows.forEach(row => lines.push(row.map(escapeCell).join(',')));
+  return lines.join('\n');
+};
+
+const tableToTSV = ({ headers, rows }: { headers: string[]; rows: string[][] }): string => {
+  const escapeCell = (cell: string): string => {
+    return cell.replace(/\t/g, '\\t').replace(/\n/g, '\\n').replace(/\r/g, '\\r');
+  };
+  
+  const lines: string[] = [];
+  if (headers.length > 0) {
+    lines.push(headers.map(escapeCell).join('\t'));
+  }
+  rows.forEach(row => lines.push(row.map(escapeCell).join('\t')));
+  return lines.join('\n');
+};
+
+const tableToMarkdown = ({ headers, rows }: { headers: string[]; rows: string[][] }): string => {
+  if (headers.length === 0) return '';
+  
+  const escapeCell = (cell: string): string => {
+    return cell.replace(/\\/g, '\\\\').replace(/\|/g, '\\|');
+  };
+  
+  const lines: string[] = [];
+  lines.push(`| ${headers.map(escapeCell).join(' | ')} |`);
+  lines.push(`| ${headers.map(() => '---').join(' | ')} |`);
+  rows.forEach(row => {
+    const paddedRow = headers.map((_, i) => escapeCell(row[i] || ''));
+    lines.push(`| ${paddedRow.join(' | ')} |`);
+  });
+  return lines.join('\n');
+};
+
+const downloadFile = (filename: string, content: string, mimeType: string) => {
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+};
+
+// Table copy button with dropdown
+const TableCopyButton: React.FC<{ tableRef: React.RefObject<HTMLDivElement | null> }> = ({ tableRef }) => {
+  const [copied, setCopied] = React.useState(false);
+  const [showMenu, setShowMenu] = React.useState(false);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setShowMenu(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleCopy = async (format: 'csv' | 'tsv') => {
+    const tableEl = tableRef.current?.querySelector('table');
+    if (!tableEl) return;
+    
+    try {
+      const data = extractTableData(tableEl);
+      const content = format === 'csv' ? tableToCSV(data) : tableToTSV(data);
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          'text/plain': new Blob([content], { type: 'text/plain' }),
+          'text/html': new Blob([tableEl.outerHTML], { type: 'text/html' }),
+        }),
+      ]);
+      setCopied(true);
+      setShowMenu(false);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy table:', err);
+    }
+  };
+
+  return (
+    <div className="relative" ref={menuRef}>
+      <button
+        onClick={() => setShowMenu(!showMenu)}
+        className="p-1 rounded hover:bg-muted/60 text-muted-foreground hover:text-foreground transition-colors"
+        title="Copy table"
+      >
+        {copied ? <RiCheckLine className="size-3.5" /> : <RiFileCopyLine className="size-3.5" />}
+      </button>
+      {showMenu && (
+        <div className="absolute top-full right-0 z-10 mt-1 min-w-[100px] overflow-hidden rounded-md border border-border bg-background shadow-lg">
+          <button
+            className="w-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-muted/40"
+            onClick={() => handleCopy('csv')}
+          >
+            CSV
+          </button>
+          <button
+            className="w-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-muted/40"
+            onClick={() => handleCopy('tsv')}
+          >
+            TSV
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Table download button with dropdown
+const TableDownloadButton: React.FC<{ tableRef: React.RefObject<HTMLDivElement | null> }> = ({ tableRef }) => {
+  const [showMenu, setShowMenu] = React.useState(false);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setShowMenu(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleDownload = (format: 'csv' | 'markdown') => {
+    const tableEl = tableRef.current?.querySelector('table');
+    if (!tableEl) return;
+    
+    try {
+      const data = extractTableData(tableEl);
+      const content = format === 'csv' ? tableToCSV(data) : tableToMarkdown(data);
+      const filename = format === 'csv' ? 'table.csv' : 'table.md';
+      const mimeType = format === 'csv' ? 'text/csv' : 'text/markdown';
+      downloadFile(filename, content, mimeType);
+      setShowMenu(false);
+    } catch (err) {
+      console.error('Failed to download table:', err);
+    }
+  };
+
+  return (
+    <div className="relative" ref={menuRef}>
+      <button
+        onClick={() => setShowMenu(!showMenu)}
+        className="p-1 rounded hover:bg-muted/60 text-muted-foreground hover:text-foreground transition-colors"
+        title="Download table"
+      >
+        <RiDownloadLine className="size-3.5" />
+      </button>
+      {showMenu && (
+        <div className="absolute top-full right-0 z-10 mt-1 min-w-[100px] overflow-hidden rounded-md border border-border bg-background shadow-lg">
+          <button
+            className="w-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-muted/40"
+            onClick={() => handleDownload('csv')}
+          >
+            CSV
+          </button>
+          <button
+            className="w-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-muted/40"
+            onClick={() => handleDownload('markdown')}
+          >
+            Markdown
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Table wrapper with custom controls
+const TableWrapper: React.FC<{ children?: React.ReactNode; className?: string }> = ({ children, className }) => {
+  const tableRef = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <div className="group my-4 flex flex-col space-y-2" data-streamdown="table-wrapper" ref={tableRef}>
+      <div className="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+        <TableCopyButton tableRef={tableRef} />
+        <TableDownloadButton tableRef={tableRef} />
+      </div>
+      <div className="overflow-x-auto">
+        <table className={cn('w-full border-collapse border border-border', className)} data-streamdown="table">
+          {children}
+        </table>
+      </div>
+    </div>
+  );
+};
+
+const CodeBlockWrapper: React.FC<{ children?: React.ReactNode; className?: string }> = ({ children, className }) => {
+  const [copied, setCopied] = React.useState(false);
+  const codeRef = React.useRef<HTMLDivElement>(null);
+
+  const getCodeContent = (): string => {
+    if (!codeRef.current) return '';
+    const codeEl = codeRef.current.querySelector('code');
+
+    return codeEl?.innerText || '';
+  };
+
+  const handleCopy = async () => {
+    const code = getCodeContent();
+    if (!code) return;
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  return (
+    <div className={cn('group relative', className)} ref={codeRef}>
+      {children}
+      <div className="absolute top-1 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+        <button
+          onClick={handleCopy}
+          className="p-1 rounded hover:bg-muted/60 text-muted-foreground hover:text-foreground transition-colors"
+          title="Copy"
+        >
+          {copied ? <RiCheckLine className="size-3.5" /> : <RiFileCopyLine className="size-3.5" />}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+const streamdownComponents = {
+  pre: CodeBlockWrapper,
+  table: TableWrapper,
+};
+
+interface MarkdownRendererProps {
+  content: string;
+  part?: Part;
+  messageId: string;
+  isAnimated?: boolean;
+  className?: string;
+  isStreaming?: boolean;
+}
+
+export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
+  content,
+  part,
+  messageId,
+  isAnimated = true,
+  className,
+  isStreaming = false,
+}) => {
+  const componentKey = React.useMemo(() => {
+    const signature = part?.id ? `part-${part.id}` : `message-${messageId}`;
+    return `markdown-${signature}`;
+  }, [messageId, part?.id]);
+
+  const markdownContent = (
+    <div className={cn('break-words', className)}>
+      <Streamdown
+        mode={isStreaming ? 'streaming' : 'static'}
+        shikiTheme={SHIKI_THEMES}
+        className="streamdown-content"
+        controls={{ code: false, table: false }}
+        components={streamdownComponents}
+      >
+        {content}
+      </Streamdown>
+    </div>
+  );
+
+  if (isAnimated) {
+    return (
+      <FadeInOnReveal key={componentKey}>
+        {markdownContent}
+      </FadeInOnReveal>
+    );
+  }
+
+  return markdownContent;
+};
+
+export const SimpleMarkdownRenderer: React.FC<{
+  content: string;
+  className?: string;
+}> = ({ content, className }) => {
+  return (
+    <div className={cn('break-words', className)}>
+      <Streamdown
+        mode="static"
+        shikiTheme={SHIKI_THEMES}
+        className="streamdown-content"
+        controls={{ code: false, table: false }}
+        components={streamdownComponents}
+      >
+        {content}
+      </Streamdown>
+    </div>
+  );
+};