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

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

@@ -1,213 +0,0 @@
-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 }) => {
-  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 [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" 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/ThinkingPart.css

@@ -1,9 +0,0 @@
-.thinking-content {
-  font-size: 13px;
-  line-height: 1.5;
-  color: var(--chat-text-muted, #999);
-  white-space: pre-wrap;
-  word-break: break-word;
-  overflow-wrap: break-word;
-  margin: 0;
-}

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

@@ -1,48 +0,0 @@
-import { useState, useEffect, type FC } from 'react'
-import { CollapsibleCard } from './CollapsibleCard'
-import type { StepsExpandedType } from '../../../types'
-import './ThinkingPart.css'
-
-interface ThinkingPartProps {
-  text: string
-  status: 'running' | 'done'
-  duration?: number
-  expandedType?: StepsExpandedType
-}
-
-export const ThinkingPart: FC<ThinkingPartProps> = ({ 
-  text, 
-  status, 
-  duration,
-  expandedType = 'auto'
-}) => {
-  // 根据模式计算初始状态
-  const getInitialExpanded = () => {
-    if (expandedType === 'open') return true
-    if (expandedType === 'close') return false
-    // auto: 运行时展开
-    return status === 'running'
-  }
-  
-  const [expanded, setExpanded] = useState(getInitialExpanded)
-  
-  // auto 模式下：状态变化时自动折叠/展开
-  useEffect(() => {
-    if (expandedType === 'auto') {
-      setExpanded(status === 'running')
-    }
-  }, [status, expandedType])
-
-  return (
-    <CollapsibleCard
-      icon="lucide:lightbulb"
-      iconColor="var(--chat-accent, #f59e0b)"
-      title={status === 'running' ? '思考中...' : '思考完成'}
-      subtitle={duration && status === 'done' ? `(${duration}s)` : undefined}
-      expanded={expanded}
-      onExpandedChange={setExpanded}
-    >
-      <div className="thinking-content">{text}</div>
-    </CollapsibleCard>
-  )
-}

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

@@ -1,246 +0,0 @@
-.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;
-}
-
-/* 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;
-}
-
-/* JSON 横向滚动条样式（与全局 chat-scrollbar 对齐） */
-.tool-args.json::-webkit-scrollbar {
-  height: 6px;
-}
-
-.tool-args.json::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.tool-args.json::-webkit-scrollbar-thumb {
-  background: var(--chat-scrollbar, rgba(255, 255, 255, 0.2));
-  border-radius: 3px;
-}
-
-.tool-args.json::-webkit-scrollbar-thumb:hover {
-  background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
-}
-
-/* JSON 语法高亮样式（使用 CSS 变量，跟随主题） */
-.tool-args.json .hljs-attr,
-.tool-args.json .hljs-attribute {
-  color: var(--chat-hljs-attr, #79c0ff); /* 键名 */
-}
-
-.tool-args.json .hljs-string,
-.tool-args.json .hljs-template-variable {
-  color: var(--chat-hljs-string, #a5d6ff); /* 字符串值 */
-}
-
-.tool-args.json .hljs-number {
-  color: var(--chat-hljs-number, #79c0ff); /* 数字 */
-}
-
-.tool-args.json .hljs-literal,
-.tool-args.json .hljs-null {
-  color: var(--chat-hljs-literal, #79c0ff); /* true, false, null */
-}
-
-.tool-args.json .hljs-punctuation {
-  color: var(--chat-hljs-punctuation, #e6edf3); /* 括号、逗号等 */
-}
-
-/* 命令格式：使用等宽字体 */
-.tool-args.command {
-  font-family: "Monaco", "Menlo", "Courier New", monospace;
-  font-size: 12px;
-  line-height: 1.6;
-}
-
-/* 普通文本：保持默认字体 */
-.tool-args.text {
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.tool-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.tool-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.status-text {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.status-text.done {
-  color: var(--chat-success, #22c55e);
-}
-.status-text.error {
-  color: var(--chat-error, #ef4444);
-}
-.status-text.running {
-  color: var(--chat-accent, #3b82f6);
-}
-.status-text.cancelled {
-  color: var(--chat-warning, #f59e0b);
-}
-.status-text.skipped {
-  color: var(--chat-text-muted, #888);
-}
-
-.spinning {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.btn {
-  padding: 6px 12px;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  border: none;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  transition: all 0.2s;
-}
-
-.btn-skip {
-  background: var(--chat-muted, #2a2a2a);
-  color: var(--chat-text, #ccc);
-  border: 1px solid var(--chat-border, #333);
-}
-.btn-skip:hover {
-  background: var(--chat-muted-hover, #333);
-}
-
-.btn-run {
-  background: var(--chat-accent, #3b82f6);
-  color: #fff;
-}
-.btn-run:hover {
-  background: var(--chat-accent-hover, #2563eb);
-}
-
-.btn-cancel {
-  background: transparent;
-  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;
-}
-
-.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;
-}