@huyooo/ai-chat-frontend-react 0.2.12 → 0.2.14

package/src/components/message/parts/TextPart.tsx

@@ -1,20 +1,213 @@
-import type { FC } from 'react'
-import { renderMarkdown } from '@huyooo/ai-chat-shared'
+import { useEffect, useState, useCallback, useRef, type FC } from 'react'
+import {
+  createStreamParseState,
+  finishStreamParse,
+  parseContentStream,
+  highlightCode,
+  renderMarkdown,
+  initMermaid,
+  renderMermaidDiagrams,
+  encodeMermaidCodeToBase64Url,
+  type ContentBlock,
+  type StreamParseState,
+} from '@huyooo/ai-chat-shared'
+import {
+  canVisualizeLatex,
+  isLatexLanguage,
+  isMermaidLanguage,
+  renderFencedLatexToHtml,
+  shouldShowVisualToggle,
+} from './visual'
+// KaTeX CSS for LaTeX rendering
+import 'katex/dist/katex.min.css'
 import './TextPart.css'
 
+// 初始化 Mermaid（模块加载时执行一次）
+initMermaid()
+
 interface TextPartProps {
   text: string
 }
 
 export const TextPart: FC<TextPartProps> = ({ text }) => {
-  if (!text) return null
+  const containerRef = useRef<HTMLDivElement>(null)
+  const streamStateRef = useRef<StreamParseState>(createStreamParseState())
+  const lastTextRef = useRef<string>('')
+  const autoSwitchedVisualRef = useRef<Set<string>>(new Set())
+
+  // 渲染块（流式解析：代码块未闭合时也以 code block 展示）
+  const [blocks, setBlocks] = useState<ContentBlock[]>([])
+
+  // 记录哪些 mermaid block 要显示图表（默认 undefined/false = 显示代码）
+  const [visualShowMap, setVisualShowMap] = useState<Record<string, boolean>>({})
   
-  const html = renderMarkdown(text)
+  // 复制状态
+  const [copiedId, setCopiedId] = useState<string | null>(null)
+
+  // 复制代码
+  const copyCode = useCallback(async (content: string, id: string) => {
+    try {
+      await navigator.clipboard.writeText(content)
+      setCopiedId(id)
+      setTimeout(() => setCopiedId(null), 2000)
+    } catch (err) {
+      console.error('复制失败:', err)
+    }
+  }, [])
   
+  if (!text) return null
+
+  // text 变化：增量喂给流式解析器，并在 mermaid 代码块闭合后自动切换到图表视图
+  useEffect(() => {
+    const prev = lastTextRef.current
+    const current = text || ''
+
+    let nextState = streamStateRef.current
+    if (prev && current.startsWith(prev)) {
+      const delta = current.slice(prev.length)
+      if (delta) nextState = parseContentStream(delta, nextState)
+    } else {
+      nextState = createStreamParseState()
+      nextState = parseContentStream(current, nextState)
+    }
+
+    streamStateRef.current = nextState
+    lastTextRef.current = current
+
+    const nextBlocks = finishStreamParse(nextState)
+    setBlocks(nextBlocks)
+
+    // mermaid：未闭合时保持代码视图；闭合后自动切到图表视图并触发渲染
+    const inProgressVisualId =
+      nextState.inCodeBlock &&
+      (['mermaid', 'latex', 'katex', 'tex'].includes((nextState.codeLanguage || '').toLowerCase()))
+        ? nextState.codeBlockId
+        : null
+
+    const completedVisualIds: string[] = []
+    for (const b of nextState.blocks) {
+      if (b.type !== 'code') continue
+      const lang = (b.language || '').toLowerCase()
+      if (!['mermaid', 'latex', 'katex', 'tex'].includes(lang)) continue
+      if (inProgressVisualId && b.id === inProgressVisualId) continue
+      if (['latex', 'katex', 'tex'].includes(lang) && !canVisualizeLatex(b.content)) continue
+      if (!autoSwitchedVisualRef.current.has(b.id)) completedVisualIds.push(b.id)
+    }
+
+    if (completedVisualIds.length > 0) {
+      for (const id of completedVisualIds) autoSwitchedVisualRef.current.add(id)
+      setVisualShowMap((prevMap) => {
+        const nextMap = { ...prevMap }
+        for (const id of completedVisualIds) {
+          if (nextMap[id] === undefined) nextMap[id] = true
+        }
+        return nextMap
+      })
+
+      window.setTimeout(() => {
+        if (containerRef.current) renderMermaidDiagrams(containerRef.current)
+      }, 0)
+    }
+  }, [text])
+
+  const toggleVisualView = (id: string) => {
+    const willShowVisual = !visualShowMap[id]
+    setVisualShowMap((prev) => ({ ...prev, [id]: willShowVisual }))
+
+    // 切换到图表模式时，需要在 DOM 更新后触发渲染
+    if (willShowVisual) {
+      window.setTimeout(() => {
+        if (containerRef.current) {
+          renderMermaidDiagrams(containerRef.current)
+        }
+      }, 0)
+    }
+  }
+
   return (
-    <div 
-      className="text-part markdown-content" 
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
+    <div className="text-part" ref={containerRef}>
+      {blocks.map((block) => {
+        if (block.type === 'text') {
+          return (
+            <div 
+              key={block.id} 
+              className="text-block" 
+              dangerouslySetInnerHTML={{ __html: renderMarkdown(block.content) }}
+            />
+          )
+        } else if (block.type === 'code') {
+          const isMermaid = isMermaidLanguage(block.language)
+          const isLatex = isLatexLanguage(block.language)
+          const canVisualizeLatexBlock = isLatex && canVisualizeLatex(block.content)
+          // 默认显示代码（undefined/false），闭合后自动切到可视化（true）
+          const showVisual = !!visualShowMap[block.id]
+          return (
+            <div key={block.id} className="code-block-wrapper">
+              <div className="code-header">
+                <span className="code-language">{block.language || 'plaintext'}</span>
+                <div className="code-actions">
+                  {shouldShowVisualToggle(block.language, block.content) && (
+                    <button
+                      className="code-action-btn"
+                      onClick={() => toggleVisualView(block.id)}
+                      title={showVisual ? '切换为代码视图' : '切换为可视化视图'}
+                    >
+                      {/* 切换图标 */}
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <polyline points="17 1 21 5 17 9"></polyline>
+                        <path d="M3 11V9a4 4 0 0 1 4-4h14"></path>
+                        <polyline points="7 23 3 19 7 15"></polyline>
+                        <path d="M21 13v2a4 4 0 0 1-4 4H3"></path>
+                      </svg>
+                      <span>切换视图</span>
+                    </button>
+                  )}
+                  <button 
+                    className="code-action-btn"
+                    onClick={() => copyCode(block.content, block.id)}
+                    title={copiedId === block.id ? '已复制' : '复制代码'}
+                  >
+                    {copiedId !== block.id ? (
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                      </svg>
+                    ) : (
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <polyline points="20 6 9 17 4 12"></polyline>
+                      </svg>
+                    )}
+                    <span>{copiedId === block.id ? '已复制' : '复制'}</span>
+                  </button>
+                </div>
+              </div>
+              {/* Mermaid: 闭合后自动切换到图表视图 */}
+              {isMermaid && showVisual && (
+                <div
+                  className="mermaid-placeholder"
+                  data-mermaid-code-b64={encodeMermaidCodeToBase64Url(block.content)}
+                >
+                  <div className="mermaid-loading">加载图表中...</div>
+                </div>
+              )}
+              {/* LaTeX: 闭合后自动切换到渲染视图 */}
+              {isLatex && showVisual && canVisualizeLatexBlock && (
+                <div
+                  className="latex-rendered"
+                  dangerouslySetInnerHTML={{ __html: renderFencedLatexToHtml(block.content) }}
+                />
+              )}
+              {(!(isMermaid || isLatex) || !showVisual || (isLatex && !canVisualizeLatexBlock)) && (
+                <pre className="code-block"><code
+                  className={block.language ? `language-${block.language}` : ''}
+                  dangerouslySetInnerHTML={{ __html: highlightCode(block.content, block.language) }}
+                /></pre>
+              )}
+            </div>
+          )
+        }
+        return null
+      })}
+    </div>
   )
 }

package/src/components/message/parts/ToolCallPart.css

@@ -1,122 +1,96 @@
-.tool-call-content {
-  display: flex;
-  flex-direction: column;
+.tool-args {
+  margin: 0 0 12px 0;
+  padding: 0.75em 1em;
+  background: var(--chat-bg, #1e1e1e);
+  border: 1px solid var(--chat-border, rgba(255, 255, 255, 0.08));
+  border-radius: 8px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--chat-text-muted, #999);
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-x: auto;
 }
 
-.tool-call-command {
-  margin-bottom: 12px;
+/* JSON 格式：使用等宽字体，更好的可读性，支持横向滚动 */
+.tool-args.json {
+  font-family: "Monaco", "Menlo", "Courier New", monospace;
+  font-size: 12px;
+  line-height: 1.8;
+  white-space: pre;
+  word-break: normal;
+  overflow-x: auto;
 }
 
-.command-header,
-.result-header {
-  display: block;
-  margin-bottom: 8px;
-  padding: 0;
-  cursor: default;
-  user-select: none;
-  font-size: 12px;
-  line-height: 1.5;
+/* JSON 横向滚动条样式（与全局 chat-scrollbar 对齐） */
+.tool-args.json::-webkit-scrollbar {
+  height: 6px;
 }
 
-/* 确保没有 hover 效果 - 明确覆盖其他地方的样式 */
-.command-header:hover,
-.result-header:hover,
-.command-label:hover,
-.result-label:hover,
-.command-name:hover,
-.result-name:hover {
-  background: transparent !important;
+.tool-args.json::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-.command-code {
-  display: block;
-  padding: 10px;
-  /* 浅色主题下 rgba(0,0,0,0.3) 会显得“脏黑”，这里统一走 code token */
-  background: var(--chat-code-bg, rgba(0, 0, 0, 0.3));
-  border: 1px solid var(--chat-border, #333);
-  border-radius: 6px;
-  font-family: "Monaco", "Menlo", "Courier New", monospace;
-  font-size: 13px;
-  color: var(--chat-code-text, var(--chat-text, #ccc));
-  white-space: pre-wrap;
-  word-break: break-all;
-  overflow-x: auto;
+.tool-args.json::-webkit-scrollbar-thumb {
+  background: var(--chat-scrollbar, rgba(255, 255, 255, 0.2));
+  border-radius: 3px;
 }
 
-.tool-call-result {
-  margin-bottom: 12px;
+.tool-args.json::-webkit-scrollbar-thumb:hover {
+  background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
 }
 
-.result-label,
-.command-label {
-  color: var(--chat-text-muted, #888);
-  font-weight: 500;
+/* JSON 语法高亮样式（使用 CSS 变量，跟随主题） */
+.tool-args.json .hljs-attr,
+.tool-args.json .hljs-attribute {
+  color: var(--chat-hljs-attr, #79c0ff); /* 键名 */
 }
 
-.result-name,
-.command-name {
-  color: var(--chat-text, #ccc);
+.tool-args.json .hljs-string,
+.tool-args.json .hljs-template-variable {
+  color: var(--chat-hljs-string, #a5d6ff); /* 字符串值 */
 }
 
-.result-content {
-  display: block;
-  padding: 10px;
-  /* 浅色主题下 rgba(0,0,0,0.3) 会显得“脏黑”，这里统一走 code token */
-  background: var(--chat-code-bg, rgba(0, 0, 0, 0.3));
-  border: 1px solid var(--chat-border, #333);
-  border-radius: 6px;
-  font-family: "Monaco", "Menlo", "Courier New", monospace;
-  font-size: 13px;
-  color: var(--chat-code-text, var(--chat-text, #ccc));
-  white-space: pre-wrap;
-  word-break: break-all;
-  overflow-x: auto;
+.tool-args.json .hljs-number {
+  color: var(--chat-hljs-number, #79c0ff); /* 数字 */
 }
 
-.execution-stats {
-  display: flex;
-  gap: 16px;
-  margin-bottom: 12px;
-  padding-top: 8px;
-  border-top: 1px solid var(--chat-border, #333);
+.tool-args.json .hljs-literal,
+.tool-args.json .hljs-null {
+  color: var(--chat-hljs-literal, #79c0ff); /* true, false, null */
 }
 
-.stat-item {
-  display: flex;
-  gap: 4px;
-  font-size: 12px;
+.tool-args.json .hljs-punctuation {
+  color: var(--chat-hljs-punctuation, #e6edf3); /* 括号、逗号等 */
 }
 
-.stat-label {
-  color: var(--chat-text-muted, #888);
+/* 命令格式：使用等宽字体 */
+.tool-args.command {
+  font-family: "Monaco", "Menlo", "Courier New", monospace;
+  font-size: 12px;
+  line-height: 1.6;
 }
 
-.stat-value {
-  color: var(--chat-text, #ccc);
+/* 普通文本：保持默认字体 */
+.tool-args.text {
+  font-size: 13px;
+  line-height: 1.5;
 }
 
-.tool-call-footer {
+.tool-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  padding-top: 12px;
-  border-top: 1px solid var(--chat-border, #333);
 }
 
-.footer-left {
-  flex-shrink: 0;
-  position: relative;
-  z-index: 10;
-}
-
-.footer-right {
+.tool-actions {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
 }
 
-.execution-status {
+.status-text {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -124,37 +98,22 @@
   font-weight: 500;
 }
 
-.execution-status.success {
+.status-text.done {
   color: var(--chat-success, #22c55e);
 }
-
-.execution-status.error {
-  color: #ef4444;
+.status-text.error {
+  color: var(--chat-error, #ef4444);
 }
-
-.execution-status.running {
+.status-text.running {
   color: var(--chat-accent, #3b82f6);
 }
-
-.execution-status.pending {
-  color: var(--chat-text-muted, #888);
-}
-
-.mode-display {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
+.status-text.cancelled {
+  color: var(--chat-warning, #f59e0b);
 }
-
-.mode-label {
+.status-text.skipped {
   color: var(--chat-text-muted, #888);
 }
 
-.mode-value {
-  color: var(--chat-text, #ccc);
-}
-
 .spinning {
   animation: spin 1s linear infinite;
 }
@@ -168,11 +127,6 @@
   }
 }
 
-.action-buttons {
-  display: flex;
-  gap: 8px;
-}
-
 .btn {
   padding: 6px 12px;
   border-radius: 6px;
@@ -191,7 +145,6 @@
   color: var(--chat-text, #ccc);
   border: 1px solid var(--chat-border, #333);
 }
-
 .btn-skip:hover {
   background: var(--chat-muted-hover, #333);
 }
@@ -200,7 +153,6 @@
   background: var(--chat-accent, #3b82f6);
   color: #fff;
 }
-
 .btn-run:hover {
   background: var(--chat-accent-hover, #2563eb);
 }
@@ -210,13 +162,85 @@
   color: var(--chat-text-muted, #888);
   border: 1px solid var(--chat-border, #333);
 }
-
 .btn-cancel:hover {
   background: rgba(239, 68, 68, 0.1);
   color: #ef4444;
   border-color: #ef4444;
 }
 
-.execution-status.cancelled {
-  color: var(--chat-warning, #f59e0b);
+.output-panel {
+  margin: 0 0 12px 0;
+  border: 1px solid var(--chat-border, rgba(255, 255, 255, 0.08));
+  border-radius: 8px;
+  background: var(--chat-bg, #1e1e1e);
+  overflow: hidden;
+}
+
+.output-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--chat-border, rgba(255, 255, 255, 0.08));
+}
+
+.output-tabs {
+  display: flex;
+  gap: 6px;
+}
+
+.tab {
+  padding: 4px 8px;
+  border-radius: 6px;
+  border: 1px solid var(--chat-border, #333);
+  background: var(--chat-muted, #2a2a2a);
+  color: var(--chat-text-muted, #999);
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.tab.active {
+  background: rgba(59, 130, 246, 0.15);
+  border-color: rgba(59, 130, 246, 0.35);
+  color: var(--chat-text, #ccc);
+}
+
+.output-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.btn-save {
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid var(--chat-border, #333);
+  background: transparent;
+  color: var(--chat-text-muted, #888);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: all 0.2s;
+}
+
+.btn-save:hover {
+  background: var(--chat-muted-hover, #333);
+  color: var(--chat-text, #ccc);
+}
+
+.output-body {
+  margin: 0;
+  padding: 10px 12px;
+  font-family: "Monaco", "Menlo", "Courier New", monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--chat-text-muted, #999);
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 260px;
+  overflow: auto;
 }