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

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

@@ -4,6 +4,7 @@ import { Icon } from '@iconify/react'
 import { DropdownSelector } from '../../input/DropdownSelector'
 import { CollapsibleCard } from './CollapsibleCard'
 import { CopyButton } from '../../common/CopyButton'
+import { highlightCode } from '@huyooo/ai-chat-shared'
 import type { ChatAdapter } from '../../../adapter'
 import type { AutoRunConfig, AutoRunMode } from '@huyooo/ai-chat-bridge-electron/renderer'
 import type { StepsExpandedType } from '../../../types'
@@ -13,22 +14,23 @@ interface ToolCallPartProps {
   id: string
   name: string
   args?: Record<string, unknown>
+  output?: {
+    stdout?: string
+    stderr?: string
+  }
   status: 'pending' | 'running' | 'done' | 'error' | 'cancelled' | 'skipped'
-  result: unknown | null
   expandedType?: StepsExpandedType
-  // 通过 props 传递，不使用 context
   adapter?: ChatAdapter
+  onCancelToolCall?: (toolCallId: string) => void
   autoRunConfig?: AutoRunConfig
   onSaveConfig?: (config: AutoRunConfig) => Promise<void>
 }
 
-// 模式选项
 const modeOptions = [
   { value: 'manual', label: '执行前询问我' },
   { value: 'run-everything', label: '自动执行' },
 ]
 
-// 状态图标映射
 const statusIcons: Record<string, string> = {
   error: 'lucide:x-circle',
   done: 'lucide:check-circle',
@@ -38,32 +40,25 @@ const statusIcons: Record<string, string> = {
   skipped: 'lucide:skip-forward',
 }
 
-// 状态颜色映射
 const statusColors: Record<string, string> = {
   error: 'var(--chat-error, #ef4444)',
   done: 'var(--chat-success, #22c55e)',
-  cancelled: 'var(--chat-warning, #f59e0b)',
-  skipped: 'var(--chat-text-muted, #888)',
   running: 'var(--chat-accent, #3b82f6)',
   pending: 'var(--chat-text-muted, #888)',
+  cancelled: 'var(--chat-warning, #f59e0b)',
+  skipped: 'var(--chat-text-muted, #888)',
 }
 
-// 状态显示图标
 const statusDisplayIcons: Record<string, string> = {
   done: 'lucide:check-circle-2',
   error: 'lucide:x-circle',
-  running: 'lucide:loader-2',
-  pending: 'lucide:clock',
   cancelled: 'lucide:ban',
   skipped: 'lucide:skip-forward',
 }
 
-// 状态文本
 const statusTexts: Record<string, string> = {
   done: '成功',
   error: '错误',
-  running: '运行中',
-  pending: '等待中',
   cancelled: '已取消',
   skipped: '已跳过',
 }
@@ -72,32 +67,35 @@ export const ToolCallPart: FC<ToolCallPartProps> = ({
   id,
   name,
   args,
+  output,
   status,
-  result,
   expandedType = 'auto',
   adapter,
+  onCancelToolCall,
   autoRunConfig,
   onSaveConfig,
 }) => {
-  // 当前模式：直接从配置读取
   const currentMode = autoRunConfig?.mode ?? 'run-everything'
 
-  // 命令显示
-  const commandDisplay = useMemo(() => {
+  // 参数类型：'json' | 'command' | 'text'
+  const argsType = useMemo(() => {
     if (name === 'execute_command' && args?.command) {
-      const cmd = String(args.command)
-      const parts = cmd.trim().split(/\s+/)
-      return parts.slice(0, 3).join(' ') + (parts.length > 3 ? '...' : '')
+      return 'command'
     }
-    return name
+    if (args && Object.keys(args).length > 0) {
+      return 'json'
+    }
+    return 'text'
   }, [name, args])
 
-  const commandText = useMemo(() => {
+  // 参数文本（格式化后的）
+  const argsText = useMemo(() => {
     if (name === 'execute_command' && args?.command) {
       return String(args.command)
     }
     if (args && Object.keys(args).length > 0) {
       try {
+        // JSON 格式化：2 空格缩进
         return JSON.stringify(args, null, 2)
       } catch {
         return String(args)
@@ -106,27 +104,21 @@ export const ToolCallPart: FC<ToolCallPartProps> = ({
     return name
   }, [name, args])
 
-  // 格式化执行结果
-  const formattedResult = useMemo(() => {
-    if (result === null) return ''
-    if (typeof result === 'string') return result
-    try {
-      return JSON.stringify(result, null, 2)
-    } catch {
-      return String(result)
+  // JSON 高亮后的 HTML
+  const highlightedJson = useMemo(() => {
+    if (argsType === 'json') {
+      return highlightCode(argsText, 'json')
     }
-  }, [result])
+    return ''
+  }, [argsType, argsText])
 
   // 折叠状态
-  const getInitialExpanded = (): boolean => {
+  const [expanded, setExpanded] = useState(() => {
     if (expandedType === 'open') return true
     if (expandedType === 'close') return false
     return status === 'pending' || status === 'running'
-  }
-
-  const [expanded, setExpanded] = useState(getInitialExpanded)
+  })
 
-  // auto 模式下：状态变化时自动折叠/展开
   useEffect(() => {
     if (expandedType === 'auto') {
       setExpanded(status === 'pending' || status === 'running')
@@ -146,53 +138,56 @@ export const ToolCallPart: FC<ToolCallPartProps> = ({
     return name + (suffixes[status] ?? '')
   }, [name, status])
 
-  /** 处理模式变化 */
+  // 操作
   const handleModeChange = useCallback(async (value: string) => {
     if (!onSaveConfig || !autoRunConfig) return
-    
-    try {
-      await onSaveConfig({
-        ...autoRunConfig,
-        mode: value as AutoRunMode,
-      })
-    } catch (error) {
-      console.error('[ToolCallPart] 保存配置失败:', error)
-    }
+    await onSaveConfig({ ...autoRunConfig, mode: value as AutoRunMode })
   }, [onSaveConfig, autoRunConfig])
 
-  /** 跳过执行：只拒绝当前工具，AI 继续思考 */
   const handleSkip = useCallback(async () => {
-    if (!adapter?.respondToolApproval) return
-    
-    try {
-      // 只拒绝工具执行，不取消整个请求
-      // AI 会收到"用户跳过了此工具"的反馈，然后可能：
-      // 1. 尝试其他工具/方法
-      // 2. 直接回复用户
-      // 3. 询问用户想要什么
-      await adapter.respondToolApproval(id, false)
-    } catch (error) {
-      console.error('[ToolCallPart] 跳过失败:', error)
-    }
+    await adapter?.respondToolApproval?.(id, false)
   }, [adapter, id])
 
-  /** 运行执行 */
   const handleRun = useCallback(async () => {
-    if (!adapter?.respondToolApproval) return
-    
-    try {
-      await adapter.respondToolApproval(id, true)
-    } catch (error) {
-      console.error('[ToolCallPart] 运行失败:', error)
-    }
+    await adapter?.respondToolApproval?.(id, true)
   }, [adapter, id])
 
-  /** 取消执行 */
   const handleCancel = useCallback(() => {
+    if (onCancelToolCall) {
+      onCancelToolCall(id)
+      return
+    }
     adapter?.cancel?.()
-  }, [adapter])
+  }, [adapter, id, onCancelToolCall])
 
-  // 监听模式变化：从 manual 切换到 run-everything 时，自动执行 pending 的工具
+  const hasOutput = Boolean(output?.stdout || output?.stderr)
+  const [activeStream, setActiveStream] = useState<'stdout' | 'stderr'>('stdout')
+  const activeOutputText = useMemo(() => {
+    return activeStream === 'stdout' ? (output?.stdout ?? '') : (output?.stderr ?? '')
+  }, [activeStream, output])
+
+  const saveLog = useCallback(() => {
+    const stdout = output?.stdout ?? ''
+    const stderr = output?.stderr ?? ''
+    const content =
+      `# tool: ${name}\n` +
+      `# id: ${id}\n` +
+      `# time: ${new Date().toISOString()}\n\n` +
+      `===== STDOUT =====\n${stdout}\n\n` +
+      `===== STDERR =====\n${stderr}\n`
+
+    const blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `tool-${name}-${id}.log`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }, [id, name, output])
+
+  // 模式切换时自动执行
   const prevModeRef = useRef(currentMode)
   useEffect(() => {
     const prevMode = prevModeRef.current
@@ -202,7 +197,6 @@ export const ToolCallPart: FC<ToolCallPartProps> = ({
     prevModeRef.current = currentMode
   }, [currentMode, status, handleRun])
 
-
   return (
     <CollapsibleCard
       icon={statusIcons[status] ?? 'lucide:clock'}
@@ -211,73 +205,83 @@ export const ToolCallPart: FC<ToolCallPartProps> = ({
       expanded={expanded}
       onExpandedChange={setExpanded}
       spinning={status === 'running'}
-      headerActions={
-        <CopyButton text={commandText} title="复制" />
-      }
+      headerActions={<CopyButton text={argsText} title="复制" />}
     >
-      <div className="tool-call-content">
-        {/* 命令显示区域 */}
-        <div className="tool-call-command">
-          <div className="command-header">
-            <span className="command-label">执行：</span>
-            <span className="command-name">{commandDisplay}</span>
-          </div>
-          <code className="command-code">{commandText}</code>
-        </div>
-
-        {/* 执行结果（如果有） */}
-        {result !== null && (
-          <div className="tool-call-result">
-            <div className="result-header">
-              <span className="result-label">结果：</span>
-              <span className="result-name"></span>
-            </div>
-            <code className="result-content">{formattedResult}</code>
-          </div>
+      {/* 参数内容 */}
+      <pre className={`tool-args ${argsType}`}>
+        {argsType === 'json' ? (
+          <code dangerouslySetInnerHTML={{ __html: highlightedJson }} />
+        ) : (
+          argsText
         )}
+      </pre>
 
-        {/* 底部操作区域 */}
-        <div className="tool-call-footer">
-          {/* 左侧：模式选择（始终可用，切换后影响后续操作） */}
-          <div className="footer-left">
-            <DropdownSelector
-              value={currentMode}
-              options={modeOptions}
-              onSelect={handleModeChange}
-            />
-          </div>
-
-          {/* 右侧：执行状态或按钮 */}
-          <div className="footer-right">
-            {/* pending 状态：显示跳过/运行按钮 */}
-            {status === 'pending' ? (
-              <div className="action-buttons">
-                <button className="btn btn-skip" onClick={handleSkip}>跳过</button>
-                <button className="btn btn-run" onClick={handleRun}>
-                  运行
-                  <Icon icon="lucide:arrow-right" width={14} />
-                </button>
-              </div>
-            ) : status === 'running' ? (
-              /* running 状态：显示运行中状态 + 取消按钮 */
-              <>
-                <div className="execution-status running">
-                  <Icon icon="lucide:loader-2" width={14} className="spinning" />
-                  <span>运行中</span>
-                </div>
-                <button className="btn btn-cancel" onClick={handleCancel}>
-                  <Icon icon="lucide:x" width={14} />
-                  取消
-                </button>
-              </>
-            ) : (
-              /* done/error 状态：只显示状态 */
-              <div className={`execution-status ${status}`}>
-                <Icon icon={statusDisplayIcons[status] ?? 'lucide:clock'} width={14} />
-                <span>{statusTexts[status] ?? ''}</span>
-              </div>
-            )}
+      {/* 输出面板（stdout/stderr） */}
+      {hasOutput && (
+        <div className="output-panel">
+          <div className="output-header">
+            <div className="output-tabs">
+              <button
+                className={`tab${activeStream === 'stdout' ? ' active' : ''}`}
+                type="button"
+                onClick={() => setActiveStream('stdout')}
+              >
+                正常输出
+              </button>
+              <button
+                className={`tab${activeStream === 'stderr' ? ' active' : ''}`}
+                type="button"
+                onClick={() => setActiveStream('stderr')}
+              >
+                异常/告警输出
+              </button>
+            </div>
+            <div className="output-actions">
+              <button className="btn btn-save" type="button" onClick={saveLog}>
+                <Icon icon="lucide:download" width={14} />
+                保存日志
+              </button>
+              <CopyButton text={activeOutputText} title="复制输出" />
+            </div>
           </div>
+          <pre className="output-body chat-scrollbar"><code>{activeOutputText || '(无输出)'}</code></pre>
+        </div>
+      )}
+      
+      {/* 底部操作区 */}
+      <div className="tool-footer">
+        <DropdownSelector
+          value={currentMode}
+          options={modeOptions}
+          onSelect={handleModeChange}
+        />
+        
+        <div className="tool-actions">
+          {status === 'pending' ? (
+            <>
+              <button className="btn btn-skip" onClick={handleSkip}>跳过</button>
+              <button className="btn btn-run" onClick={handleRun}>
+                运行
+                <Icon icon="lucide:arrow-right" width={14} />
+              </button>
+            </>
+          ) : status === 'running' ? (
+            <>
+              <span className="status-text running">
+                <Icon icon="lucide:loader-2" width={14} className="spinning" />
+                运行中
+              </span>
+              <button className="btn btn-cancel" onClick={handleCancel}>
+                <Icon icon="lucide:x" width={14} />
+                取消
+              </button>
+            </>
+          ) : (
+            <span className={`status-text ${status}`}>
+              <Icon icon={statusDisplayIcons[status] ?? 'lucide:clock'} width={14} />
+              {statusTexts[status] ?? ''}
+            </span>
+          )}
         </div>
       </div>
     </CollapsibleCard>

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

@@ -1,5 +1,4 @@
 .tool-result-part {
-  margin: 8px 0;
 }
 
 .default-result {

package/src/components/message/parts/index.ts

@@ -1,11 +1,13 @@
 /**
  * Part 渲染组件导出
+ * 
+ * 内置 Part 类型：text, thinking, search, tool_call, image, error
+ * 自定义 Part 类型（如 weather, stock）通过 partRenderers 注册
  */
 export { CollapsibleCard } from './CollapsibleCard'
 export { TextPart } from './TextPart'
 export { ThinkingPart } from './ThinkingPart'
 export { SearchPart } from './SearchPart'
 export { ToolCallPart } from './ToolCallPart'
-export { ToolResultPart } from './ToolResultPart'
 export { ImagePart } from './ImagePart'
 export { ErrorPart } from './ErrorPart'

package/src/components/message/parts/visual-predicate.ts

@@ -0,0 +1,43 @@
+function normalizeLanguage(lang?: string): string {
+  return (lang || '').trim().toLowerCase()
+}
+
+export function isMermaidLanguage(lang?: string): boolean {
+  return normalizeLanguage(lang) === 'mermaid'
+}
+
+export function isLatexLanguage(lang?: string): boolean {
+  const l = normalizeLanguage(lang)
+  return l === 'latex' || l === 'katex' || l === 'tex'
+}
+
+export function isLatexDocument(code: string): boolean {
+  const t = (code || '').trim()
+  return /\\documentclass\b|\\usepackage\b|\\begin\{document\}|\\end\{document\}/.test(t)
+}
+
+export function canVisualizeLatex(code: string): boolean {
+  const t = (code || '').trim()
+  if (!t) return false
+  if (isLatexDocument(t)) return false
+  return true
+}
+
+export function hasLatexDelimiters(code: string): boolean {
+  const t = (code || '').trim()
+  if (!t) return false
+  return (
+    /\$\$[\s\S]*\$\$/.test(t) ||
+    /\\\[[\s\S]*\\\]/.test(t) ||
+    /\\\([\s\S]*\\\)/.test(t) ||
+    /(?<!\$)\$(?!\$)[\s\S]*?\$(?!\$)/.test(t)
+  )
+}
+
+export function shouldShowVisualToggle(lang?: string, code?: string): boolean {
+  if (isMermaidLanguage(lang)) return true
+  if (isLatexLanguage(lang)) return canVisualizeLatex(code || '')
+  return false
+}
+
+

package/src/components/message/parts/visual-render.ts

@@ -0,0 +1,19 @@
+import { renderMarkdown } from '@huyooo/ai-chat-shared'
+import { canVisualizeLatex, hasLatexDelimiters } from './visual-predicate'
+
+export function renderFencedLatexToHtml(code: string): string {
+  const t = (code || '').trim()
+  if (!t) return ''
+
+  if (!canVisualizeLatex(t)) {
+    return renderMarkdown(
+      `> 不支持将完整 LaTeX 文档作为公式渲染，请切换到代码视图查看。\n\n\`\`\`latex\n${t}\n\`\`\``
+    )
+  }
+
+  if (hasLatexDelimiters(t)) return renderMarkdown(t)
+
+  return renderMarkdown(`$$\n${t}\n$$`)
+}
+
+

package/src/components/message/parts/visual.ts

@@ -0,0 +1,12 @@
+export {
+  isMermaidLanguage,
+  isLatexLanguage,
+  isLatexDocument,
+  canVisualizeLatex,
+  hasLatexDelimiters,
+  shouldShowVisualToggle,
+} from './visual-predicate'
+
+export { renderFencedLatexToHtml } from './visual-render'
+
+

package/src/context/RenderersContext.tsx

@@ -1,41 +1,35 @@
 /**
- * 渲染器上下文
- * 用于注入自定义块渲染器和工具结果渲染器
+ * Part 渲染器上下文
+ * 用于注入自定义 Part 类型渲染器（如 weather, stock 等）
  */
 
 import { createContext, type ComponentType, type ReactNode, type FC } from 'react'
-import type { ContentBlock, ToolRendererProps } from '@huyooo/ai-chat-shared'
 
-/** 块渲染器映射 */
-export type BlockRenderers = Record<string, ComponentType<{ block: ContentBlock }>>
-
-/** 工具结果渲染器映射 */
-export type ToolRenderers = Record<string, ComponentType<ToolRendererProps>>
+/** Part 渲染器 Props（每个自定义渲染器接收的 props） */
+export interface PartRendererProps {
+  [key: string]: unknown
+}
 
-/** 块渲染器上下文 */
-export const BlockRenderersContext = createContext<BlockRenderers>({})
+/** Part 渲染器映射（key: part.type, value: 渲染组件） */
+export type PartRenderers = Record<string, ComponentType<PartRendererProps>>
 
-/** 工具结果渲染器上下文 */
-export const ToolRenderersContext = createContext<ToolRenderers>({})
+/** Part 渲染器上下文 */
+export const PartRenderersContext = createContext<PartRenderers>({})
 
-/** 渲染器 Provider Props */
-interface RenderersProviderProps {
-  blockRenderers?: BlockRenderers
-  toolRenderers?: ToolRenderers
+/** Part 渲染器 Provider Props */
+interface PartRenderersProviderProps {
+  partRenderers?: PartRenderers
   children: ReactNode
 }
 
-/** 渲染器 Provider */
-export const RenderersProvider: FC<RenderersProviderProps> = ({
-  blockRenderers = {},
-  toolRenderers = {},
+/** Part 渲染器 Provider */
+export const PartRenderersProvider: FC<PartRenderersProviderProps> = ({
+  partRenderers = {},
   children,
 }) => {
   return (
-    <BlockRenderersContext.Provider value={blockRenderers}>
-      <ToolRenderersContext.Provider value={toolRenderers}>
-        {children}
-      </ToolRenderersContext.Provider>
-    </BlockRenderersContext.Provider>
+    <PartRenderersContext.Provider value={partRenderers}>
+      {children}
+    </PartRenderersContext.Provider>
   )
 }