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

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

@@ -1,289 +0,0 @@
-import { useState, useMemo, useEffect, useCallback, useRef } from 'react'
-import type { FC } from 'react'
-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'
-import './ToolCallPart.css'
-
-interface ToolCallPartProps {
-  id: string
-  name: string
-  args?: Record<string, unknown>
-  output?: {
-    stdout?: string
-    stderr?: string
-  }
-  status: 'pending' | 'running' | 'done' | 'error' | 'cancelled' | 'skipped'
-  expandedType?: StepsExpandedType
-  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',
-  running: 'lucide:loader-2',
-  pending: 'lucide:clock',
-  cancelled: 'lucide:ban',
-  skipped: 'lucide:skip-forward',
-}
-
-const statusColors: Record<string, string> = {
-  error: 'var(--chat-error, #ef4444)',
-  done: 'var(--chat-success, #22c55e)',
-  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',
-  cancelled: 'lucide:ban',
-  skipped: 'lucide:skip-forward',
-}
-
-const statusTexts: Record<string, string> = {
-  done: '成功',
-  error: '错误',
-  cancelled: '已取消',
-  skipped: '已跳过',
-}
-
-export const ToolCallPart: FC<ToolCallPartProps> = ({
-  id,
-  name,
-  args,
-  output,
-  status,
-  expandedType = 'auto',
-  adapter,
-  onCancelToolCall,
-  autoRunConfig,
-  onSaveConfig,
-}) => {
-  const currentMode = autoRunConfig?.mode ?? 'run-everything'
-
-  // 参数类型：'json' | 'command' | 'text'
-  const argsType = useMemo(() => {
-    if (name === 'execute_command' && args?.command) {
-      return 'command'
-    }
-    if (args && Object.keys(args).length > 0) {
-      return 'json'
-    }
-    return 'text'
-  }, [name, args])
-
-  // 参数文本（格式化后的）
-  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)
-      }
-    }
-    return name
-  }, [name, args])
-
-  // JSON 高亮后的 HTML
-  const highlightedJson = useMemo(() => {
-    if (argsType === 'json') {
-      return highlightCode(argsText, 'json')
-    }
-    return ''
-  }, [argsType, argsText])
-
-  // 折叠状态
-  const [expanded, setExpanded] = useState(() => {
-    if (expandedType === 'open') return true
-    if (expandedType === 'close') return false
-    return status === 'pending' || status === 'running'
-  })
-
-  useEffect(() => {
-    if (expandedType === 'auto') {
-      setExpanded(status === 'pending' || status === 'running')
-    }
-  }, [status, expandedType])
-
-  // 标题
-  const title = useMemo(() => {
-    const suffixes: Record<string, string> = {
-      pending: ' - 等待确认',
-      running: ' - 执行中...',
-      error: ' - 执行失败',
-      done: ' - 执行完成',
-      cancelled: ' - 已取消',
-      skipped: ' - 已跳过',
-    }
-    return name + (suffixes[status] ?? '')
-  }, [name, status])
-
-  // 操作
-  const handleModeChange = useCallback(async (value: string) => {
-    if (!onSaveConfig || !autoRunConfig) return
-    await onSaveConfig({ ...autoRunConfig, mode: value as AutoRunMode })
-  }, [onSaveConfig, autoRunConfig])
-
-  const handleSkip = useCallback(async () => {
-    await adapter?.respondToolApproval?.(id, false)
-  }, [adapter, id])
-
-  const handleRun = useCallback(async () => {
-    await adapter?.respondToolApproval?.(id, true)
-  }, [adapter, id])
-
-  const handleCancel = useCallback(() => {
-    if (onCancelToolCall) {
-      onCancelToolCall(id)
-      return
-    }
-    adapter?.cancel?.()
-  }, [adapter, id, onCancelToolCall])
-
-  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
-    if (prevMode === 'manual' && currentMode === 'run-everything' && status === 'pending') {
-      handleRun()
-    }
-    prevModeRef.current = currentMode
-  }, [currentMode, status, handleRun])
-
-  return (
-    <CollapsibleCard
-      icon={statusIcons[status] ?? 'lucide:clock'}
-      iconColor={statusColors[status] ?? 'var(--chat-text-muted, #888)'}
-      title={title}
-      expanded={expanded}
-      onExpandedChange={setExpanded}
-      spinning={status === 'running'}
-      headerActions={<CopyButton text={argsText} title="复制" />}
-    >
-      {/* 参数内容 */}
-      <pre className={`tool-args ${argsType}`}>
-        {argsType === 'json' ? (
-          <code dangerouslySetInnerHTML={{ __html: highlightedJson }} />
-        ) : (
-          argsText
-        )}
-      </pre>
-
-      {/* 输出面板（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,67 +0,0 @@
-.tool-result-part {
-}
-
-.default-result {
-  border-radius: 8px;
-  background: var(--chat-muted, #2a2a2a);
-  border: 1px solid var(--chat-border, #333);
-  overflow: hidden;
-}
-
-/* 将样式限定在 .default-result 内部，避免污染其他组件 */
-.default-result .result-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.default-result .result-header:hover {
-  background: var(--chat-hover, #333);
-}
-
-.default-result .result-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.default-result .result-icon .success {
-  color: var(--chat-success, #22c55e);
-}
-
-.default-result .result-icon .error {
-  color: var(--chat-error, #ef4444);
-}
-
-.default-result .result-name {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--chat-text, #ccc);
-}
-
-.default-result .result-chevron {
-  margin-left: auto;
-  color: var(--chat-text-muted, #666);
-  transition: transform 0.2s;
-}
-
-.default-result.expanded .result-chevron {
-  transform: rotate(180deg);
-}
-
-.default-result .result-content {
-  padding: 12px;
-  padding-top: 0;
-}
-
-.default-result .result-content pre {
-  margin: 0;
-  font-size: 12px;
-  font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
-  color: var(--chat-code-text, var(--chat-text-muted, #999));
-  white-space: pre-wrap;
-  word-break: break-word;
-}

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

@@ -1,13 +0,0 @@
-/**
- * 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 { ImagePart } from './ImagePart'
-export { ErrorPart } from './ErrorPart'

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

@@ -1,43 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

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

package/src/components/message/welcome-types.ts

@@ -1,46 +0,0 @@
-/** 功能项 */
-export interface WelcomeFeature {
-  name: string;
-  icon: string;
-}
-
-/** 快捷任务 */
-export interface WelcomeTask {
-  name: string;
-  desc: string;
-  prompt: string;
-  icon: string;
-}
-
-/** 欢迎页配置 */
-export interface WelcomeConfig {
-  /** 标题 */
-  title: string;
-  /** 副标题 */
-  subtitle: string;
-  /** 图标 */
-  icon: string;
-  /** 功能列表 */
-  features: WelcomeFeature[];
-  /** 快捷任务 */
-  tasks: WelcomeTask[];
-}
-
-/** 默认配置 */
-export const defaultWelcomeConfig: WelcomeConfig = {
-  title: 'AI 助手',
-  subtitle: '智能对话 · 文档分析 · 内容创作',
-  icon: 'lucide:sparkles',
-  features: [
-    { name: '上下文引用', icon: 'lucide:at-sign' },
-    { name: '图片分析', icon: 'lucide:image' },
-    { name: '深度思考', icon: 'lucide:sparkles' },
-    { name: '联网搜索', icon: 'lucide:globe' },
-  ],
-  tasks: [
-    { name: '总结内容', desc: '快速总结文档要点', prompt: '帮我总结一下这段内容的主要要点', icon: 'lucide:file-text' },
-    { name: '翻译文本', desc: '多语言翻译助手', prompt: '帮我翻译这段文字', icon: 'lucide:languages' },
-    { name: '写作助手', desc: '帮助撰写文章', prompt: '帮我写一篇关于以下主题的文章：', icon: 'lucide:pen-tool' },
-    { name: '问答对话', desc: '回答各种问题', prompt: '我想了解一下：', icon: 'lucide:message-circle' },
-  ],
-};

package/src/context/AutoRunConfigContext.tsx

@@ -1,13 +0,0 @@
-import { createContext, useContext } from 'react'
-import type { AutoRunConfig } from '@huyooo/ai-chat-bridge-electron/renderer'
-
-export interface AutoRunConfigContextValue {
-  autoRunConfig: AutoRunConfig
-  saveAutoRunConfig: (config: AutoRunConfig) => Promise<void>
-}
-
-export const AutoRunConfigContext = createContext<AutoRunConfigContextValue | null>(null)
-
-export function useAutoRunConfig(): AutoRunConfigContextValue | null {
-  return useContext(AutoRunConfigContext)
-}

package/src/context/ChatAdapterContext.tsx

@@ -1,8 +0,0 @@
-import { createContext, useContext } from 'react'
-import type { ChatAdapter } from '../adapter'
-
-export const ChatAdapterContext = createContext<ChatAdapter | null>(null)
-
-export function useChatAdapter(): ChatAdapter | null {
-  return useContext(ChatAdapterContext)
-}

package/src/context/ChatInputContext.tsx

@@ -1,40 +0,0 @@
-/**
- * 全局 ChatInput 状态 Context
- * 用于在 MessageBubble 中的 ChatInput 共享和修改全局状态
- */
-
-import { createContext, useContext, type ReactNode, type FC } from 'react'
-import type { ChatMode, ModelOption } from '../types'
-import type { ChatAdapter } from '@huyooo/ai-chat-bridge-electron/renderer'
-
-export interface ChatInputContextValue {
-  mode: ChatMode
-  model: string
-  models: ModelOption[]
-  webSearch: boolean
-  thinking: boolean
-  isLoading: boolean
-  /** Electron adapter（用于 @ 文件选择） */
-  adapter?: ChatAdapter
-  // cwd 已解耦，不再通过 context 传递
-  // FileBrowser 会直接通过 adapter.setCwd() 同步到 Agent
-  setMode: (value: ChatMode) => void
-  setModel: (value: string) => void
-  setWebSearch: (value: boolean) => void
-  setThinking: (value: boolean) => void
-}
-
-const ChatInputContext = createContext<ChatInputContextValue | null>(null)
-
-interface ChatInputProviderProps {
-  value: ChatInputContextValue
-  children: ReactNode
-}
-
-export const ChatInputProvider: FC<ChatInputProviderProps> = ({ value, children }) => {
-  return <ChatInputContext.Provider value={value}>{children}</ChatInputContext.Provider>
-}
-
-export function useChatInputContext(): ChatInputContextValue | null {
-  return useContext(ChatInputContext)
-}

package/src/context/RenderersContext.tsx

@@ -1,35 +0,0 @@
-/**
- * Part 渲染器上下文
- * 用于注入自定义 Part 类型渲染器（如 weather, stock 等）
- */
-
-import { createContext, type ComponentType, type ReactNode, type FC } from 'react'
-
-/** Part 渲染器 Props（每个自定义渲染器接收的 props） */
-export interface PartRendererProps {
-  [key: string]: unknown
-}
-
-/** Part 渲染器映射（key: part.type, value: 渲染组件） */
-export type PartRenderers = Record<string, ComponentType<PartRendererProps>>
-
-/** Part 渲染器上下文 */
-export const PartRenderersContext = createContext<PartRenderers>({})
-
-/** Part 渲染器 Provider Props */
-interface PartRenderersProviderProps {
-  partRenderers?: PartRenderers
-  children: ReactNode
-}
-
-/** Part 渲染器 Provider */
-export const PartRenderersProvider: FC<PartRenderersProviderProps> = ({
-  partRenderers = {},
-  children,
-}) => {
-  return (
-    <PartRenderersContext.Provider value={partRenderers}>
-      {children}
-    </PartRenderersContext.Provider>
-  )
-}