@huyooo/ai-chat-frontend-react 0.1.4 → 0.1.8

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

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

@@ -0,0 +1,220 @@
+.tool-call-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.tool-call-command {
+  margin-bottom: 12px;
+}
+
+.command-header,
+.result-header {
+  display: block;
+  margin-bottom: 8px;
+  padding: 0;
+  cursor: default;
+  user-select: none;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+/* 确保没有 hover 效果 - 明确覆盖其他地方的样式 */
+.command-header:hover,
+.result-header:hover,
+.command-label:hover,
+.result-label:hover,
+.command-name:hover,
+.result-name:hover {
+  background: transparent !important;
+}
+
+.command-code {
+  display: block;
+  padding: 10px;
+  background: 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-text, #ccc);
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow-x: auto;
+}
+
+.tool-call-result {
+  margin-bottom: 12px;
+}
+
+.result-label,
+.command-label {
+  color: var(--chat-text-muted, #888);
+  font-weight: 500;
+}
+
+.result-name,
+.command-name {
+  color: var(--chat-text, #ccc);
+}
+
+.result-content {
+  display: block;
+  padding: 10px;
+  background: 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-text, #ccc);
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow-x: auto;
+}
+
+.execution-stats {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 12px;
+  padding-top: 8px;
+  border-top: 1px solid var(--chat-border, #333);
+}
+
+.stat-item {
+  display: flex;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.stat-label {
+  color: var(--chat-text-muted, #888);
+}
+
+.stat-value {
+  color: var(--chat-text, #ccc);
+}
+
+.tool-call-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 {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.execution-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.execution-status.success {
+  color: var(--chat-success, #22c55e);
+}
+
+.execution-status.error {
+  color: #ef4444;
+}
+
+.execution-status.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;
+}
+
+.mode-label {
+  color: var(--chat-text-muted, #888);
+}
+
+.mode-value {
+  color: var(--chat-text, #ccc);
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.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;
+}
+
+.execution-status.cancelled {
+  color: var(--chat-warning, #f59e0b);
+}

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

@@ -0,0 +1,285 @@
+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 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>
+  status: 'pending' | 'running' | 'done' | 'error' | 'cancelled' | 'skipped'
+  result: unknown | null
+  expandedType?: StepsExpandedType
+  // 通过 props 传递，不使用 context
+  adapter?: ChatAdapter
+  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)',
+  cancelled: 'var(--chat-warning, #f59e0b)',
+  skipped: 'var(--chat-text-muted, #888)',
+  running: 'var(--chat-accent, #3b82f6)',
+  pending: '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: '已跳过',
+}
+
+export const ToolCallPart: FC<ToolCallPartProps> = ({
+  id,
+  name,
+  args,
+  status,
+  result,
+  expandedType = 'auto',
+  adapter,
+  autoRunConfig,
+  onSaveConfig,
+}) => {
+  // 当前模式：直接从配置读取
+  const currentMode = autoRunConfig?.mode ?? 'run-everything'
+
+  // 命令显示
+  const commandDisplay = 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 name
+  }, [name, args])
+
+  const commandText = useMemo(() => {
+    if (name === 'execute_command' && args?.command) {
+      return String(args.command)
+    }
+    if (args && Object.keys(args).length > 0) {
+      try {
+        return JSON.stringify(args, null, 2)
+      } catch {
+        return String(args)
+      }
+    }
+    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)
+    }
+  }, [result])
+
+  // 折叠状态
+  const getInitialExpanded = (): boolean => {
+    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')
+    }
+  }, [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
+    
+    try {
+      await onSaveConfig({
+        ...autoRunConfig,
+        mode: value as AutoRunMode,
+      })
+    } catch (error) {
+      console.error('[ToolCallPart] 保存配置失败:', error)
+    }
+  }, [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)
+    }
+  }, [adapter, id])
+
+  /** 运行执行 */
+  const handleRun = useCallback(async () => {
+    if (!adapter?.respondToolApproval) return
+    
+    try {
+      await adapter.respondToolApproval(id, true)
+    } catch (error) {
+      console.error('[ToolCallPart] 运行失败:', error)
+    }
+  }, [adapter, id])
+
+  /** 取消执行 */
+  const handleCancel = useCallback(() => {
+    adapter?.cancel?.()
+  }, [adapter])
+
+  // 监听模式变化：从 manual 切换到 run-everything 时，自动执行 pending 的工具
+  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={commandText} 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>
+        )}
+
+        {/* 底部操作区域 */}
+        <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>
+            )}
+          </div>
+        </div>
+      </div>
+    </CollapsibleCard>
+  )
+}

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

@@ -0,0 +1,68 @@
+.tool-result-part {
+  margin: 8px 0;
+}
+
+.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-text-muted, #999);
+  white-space: pre-wrap;
+  word-break: break-word;
+}

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

@@ -0,0 +1,96 @@
+import { useState, useContext, useMemo, type FC, type ComponentType } from 'react'
+import { Icon } from '@iconify/react'
+import { ToolRenderersContext } from '../../../context/RenderersContext'
+import type { ToolRendererProps } from '@huyooo/ai-chat-shared'
+import type { StepsExpandedType } from '../../../types'
+import './ToolResultPart.css'
+
+interface ToolResultPartProps {
+  id: string
+  name: string
+  args?: Record<string, unknown>
+  result: unknown
+  status: 'done' | 'error' | 'cancelled' | 'skipped'
+  expandedType?: StepsExpandedType
+}
+
+export const ToolResultPart: FC<ToolResultPartProps> = ({ 
+  name, 
+  args, 
+  result, 
+  status,
+  expandedType = 'auto'
+}) => {
+  const toolRenderers = useContext(ToolRenderersContext)
+  
+  // 根据模式计算初始状态（工具结果完成后默认折叠，除非 mode 是 open）
+  const getInitialExpanded = () => {
+    if (expandedType === 'open') return true
+    return false // close 和 auto 模式下默认折叠
+  }
+  
+  const [expanded, setExpanded] = useState(getInitialExpanded)
+
+  // 获取自定义渲染器
+  const CustomRenderer = useMemo(() => {
+    return toolRenderers[name] as ComponentType<ToolRendererProps> | undefined
+  }, [toolRenderers, name])
+
+  // 格式化结果
+  const formattedResult = useMemo(() => {
+    if (typeof result === 'string') {
+      return result
+    }
+    return JSON.stringify(result, null, 2)
+  }, [result])
+
+  // 将 ToolResultPart 的 status 映射到 ToolRendererProps 的 status
+  const rendererStatus = useMemo((): 'running' | 'completed' | 'error' => {
+    if (status === 'error') return 'error'
+    if (status === 'cancelled') return 'error'
+    // 'done' 和 'skipped' 都映射为 'completed'
+    return 'completed'
+  }, [status])
+
+  // 如果有自定义渲染器，使用它
+  if (CustomRenderer) {
+    return (
+      <div className="tool-result-part">
+        <CustomRenderer 
+          toolName={name}
+          toolArgs={args || {}}
+          toolResult={result}
+          status={rendererStatus}
+        />
+      </div>
+    )
+  }
+
+  // 默认渲染：可折叠的 JSON
+  return (
+    <div className="tool-result-part">
+      <div className={`default-result ${expanded ? 'expanded' : ''}`}>
+        <div className="result-header" onClick={() => setExpanded(!expanded)}>
+          <div className="result-icon">
+            {status === 'error' ? (
+              <Icon icon="lucide:x-circle" width={14} className="error" />
+            ) : (
+              <Icon icon="lucide:check-circle" width={14} className="success" />
+            )}
+          </div>
+          <span className="result-name">{name}</span>
+          <Icon 
+            icon={expanded ? 'lucide:chevron-up' : 'lucide:chevron-down'} 
+            width={14} 
+            className="result-chevron"
+          />
+        </div>
+        {expanded && (
+          <div className="result-content">
+            <pre>{formattedResult}</pre>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}