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

package/src/components/input/ChatInput.tsx

@@ -10,7 +10,7 @@ import type { ChatMode, ModelOption } from '../../types';
 import { AtFilePicker } from './AtFilePicker';
 import { ImagePreviewModal } from './ImagePreviewModal';
 import { DropdownSelector } from './DropdownSelector';
-import type { DropdownOption, GroupedOptions } from './DropdownSelector';
+import type { DropdownOption } from './DropdownSelector';
 import { useChatInputContext } from '../../context/ChatInputContext';
 import { useImageUpload } from '../../hooks/useImageUpload';
 import { useVoiceToTextInput } from '../../hooks/useVoiceToTextInput';
@@ -35,9 +35,12 @@ interface ChatInputProps {
   variant?: 'input' | 'message';
   /** 受控值（用于历史消息编辑） */
   value?: string;
+  /** 图片数据（用于历史消息编辑） */
+  images?: string[];
   isLoading?: boolean;
   mode?: ChatMode;
   model?: string;
+  /** 模型列表（tooltip 由后端下发，前端仅透传渲染） */
   models?: ModelOption[];
   webSearchEnabled?: boolean;
   thinkingEnabled?: boolean;
@@ -61,6 +64,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
     {
       variant = 'input',
       value = '',
+      images = [],
       isLoading = false,
       mode = 'agent',
       model = '',
@@ -105,31 +109,23 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
       imageInputRef.current?.click();
     }, []);
 
-    // 将模型列表转换为分组格式（完全使用后端返回的 group 字段）
-    const groupedModelOptions = useMemo<GroupedOptions>(() => {
-      const groups: Record<string, Array<{ value: string; label: string; icon?: string }>> = {};
-      
-      models.forEach((m) => {
-        // 完全使用后端返回的 group 字段
-        const groupName = m.group;
-        
-        if (!groups[groupName]) {
-          groups[groupName] = [];
-        }
-        
-        groups[groupName].push({
+    // 模型选项
+    // 模型选项：tooltip/能力由后端（ai-chat-core）统一提供，前端只负责渲染
+    const modelOptions = useMemo<DropdownOption[]>(
+      () =>
+        models.map((m) => ({
           value: m.modelId,
           label: m.displayName,
-        });
-      });
-      
-      // 对每个分组内的选项进行排序
-      Object.keys(groups).forEach(groupName => {
-        groups[groupName].sort((a, b) => a.label.localeCompare(b.label));
-      });
-      
-      return groups;
-    }, [models]);
+          tooltip: m.tooltip,
+        })),
+      [models]
+    );
+
+    // 当前模型是否支持深度思考
+    const currentModelSupportsThinking = useMemo(() => {
+      const currentModel = models.find(m => m.modelId === model);
+      return currentModel?.supportsThinking ?? false;
+    }, [models, model]);
 
     const closeAtPicker = useCallback(() => {
       setAtPickerVisible(false);
@@ -183,6 +179,18 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
       setInputText(value);
     }, [value]);
 
+    // 同步外部 images（用于历史消息编辑）
+    // 使用 JSON.stringify 比较，避免空数组引用变化导致无限循环
+    const imagesKey = JSON.stringify(images);
+    useEffect(() => {
+      if (images?.length) {
+        imageUpload.initImages(images);
+      } else {
+        imageUpload.clearImages();
+      }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [imagesKey]);
+
     // 是否显示工具栏
     const showToolbar = !isMessageVariant || isFocused;
 
@@ -252,6 +260,14 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
         clear: () => {
           setInputText('');
           imageUpload.clearImages();
+          // 重置语音输入状态
+          if (voiceInput.status !== 'idle') {
+            voiceInput.cancel();
+          }
+          // 重置 @ 选择器
+          setAtPickerVisible(false);
+          replaceRangeRef.current = null;
+          // 重置输入框高度
           if (inputRef.current) {
             inputRef.current.style.height = 'auto';
           }
@@ -434,13 +450,15 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                 {/* 模型选择（分组显示：原生和 OpenRouter） */}
                 <DropdownSelector 
                   value={model} 
-                  groupedOptions={groupedModelOptions}
+                  options={modelOptions}
                   onSelect={(v) => onModelChange?.(v)} 
                 />
               </div>
 
               {/* 右侧 */}
               <div className="input-right">
+                {/* 深度思考（ask 模式隐藏，仅支持的模型显示） */}
+                {mode !== 'ask' && currentModelSupportsThinking && (
                 <button
                   className={`toggle-btn${thinkingEnabled ? ' active' : ''}`}
                   title="深度思考"
@@ -448,7 +466,10 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                 >
                   <Icon icon="lucide:sparkles" width={18} />
                 </button>
+                )}
 
+                {/* 联网搜索（ask 模式隐藏） */}
+                {mode !== 'ask' && (
                 <button
                   className={`toggle-btn${webSearchEnabled ? ' active' : ''}`}
                   title="联网搜索"
@@ -456,6 +477,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                 >
                   <Icon icon="lucide:globe" width={18} />
                 </button>
+                )}
 
                 {/* 图片上传按钮 */}
                 <button className="icon-btn" title="添加图片" onClick={triggerImageUpload}>
@@ -537,7 +559,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                   {isLoading ? (
                     <Icon icon="streamline-flex:button-pause-circle-remix" width={18} />
                   ) : (
-                    <Icon icon="streamline-flex:mail-send-email-message-circle-remix" width={18} />
+                    <Icon icon="uil:message" width={18} />
                   )}
                 </button>
               </div>

package/src/components/input/DropdownSelector.css

@@ -163,3 +163,69 @@
 .dropdown-selector .provider-badge.native {
   color: var(--chat-text-muted, #999);
 }
+
+/* 选项包装器 */
+.dropdown-selector .dropdown-item-wrapper {
+  position: relative;
+}
+
+/* 模型特性提示框（组件内渲染，但使用 fixed 定位） */
+.ai-chat-model-tooltip {
+  /* 比之前更窄一点，避免“太宽” */
+  min-width: 160px;
+  max-width: 240px;
+  width: max-content;
+  padding: 12px;
+  background: var(--chat-dropdown-bg, #252526);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+}
+
+.ai-chat-model-tooltip__section {
+  margin-bottom: 10px;
+}
+
+.ai-chat-model-tooltip__section:last-child {
+  margin-bottom: 0;
+}
+
+.ai-chat-model-tooltip__title {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--chat-text-muted, #888);
+  margin-bottom: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.ai-chat-model-tooltip__features {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ai-chat-model-tooltip__feature {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--chat-text, #ccc);
+}
+
+.ai-chat-model-tooltip__check {
+  color: #4ade80;
+  flex-shrink: 0;
+}
+
+.ai-chat-model-tooltip__cost {
+  font-size: 13px;
+  color: var(--chat-text, #ccc);
+}
+
+.ai-chat-model-tooltip__description {
+  font-size: 12px;
+  color: var(--chat-text-muted, #999);
+  line-height: 1.5;
+}

package/src/components/input/DropdownSelector.tsx

@@ -4,7 +4,7 @@
  * 前端只负责渲染，分组数据由后端提供
  */
 
-import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { useState, useRef, useCallback, useEffect, useMemo, useLayoutEffect } from 'react';
 import { Icon } from '@iconify/react';
 import './DropdownSelector.css';
 
@@ -15,6 +15,15 @@ export interface DropdownOption {
   icon?: string;
   /** 分组名称（由后端决定，前端只负责渲染） */
   group?: string;
+  /** 模型特性信息（用于 hover 提示） */
+  tooltip?: {
+    /** 可用功能列表 */
+    features?: string[];
+    /** 开销信息（数组，分行显示） */
+    cost?: string[];
+    /** 其他描述信息 */
+    description?: string;
+  };
 }
 
 /** 分组后的选项（由后端提供） */
@@ -49,8 +58,12 @@ export function DropdownSelector({
   align = 'left',
 }: DropdownSelectorProps) {
   const selectorRef = useRef<HTMLDivElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const hoveredItemRef = useRef<HTMLElement | null>(null);
   const [menuOpen, setMenuOpen] = useState(false);
   const [dropdownDirection, setDropdownDirection] = useState<'up' | 'down'>('up');
+  const [hoveredOption, setHoveredOption] = useState<DropdownOption | null>(null);
+  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
 
   // 检查是否有选项
   const hasOptions = useMemo(() => {
@@ -115,6 +128,70 @@ export function DropdownSelector({
     [onSelect]
   );
 
+  /**
+   * 处理选项 hover 事件
+   */
+  const handleItemHover = useCallback((event: React.MouseEvent<HTMLDivElement>, opt: DropdownOption) => {
+    const target = event.currentTarget as HTMLElement;
+    hoveredItemRef.current = target;
+    setHoveredOption(opt);
+    
+    if (!opt.tooltip) {
+      setTooltipPosition({ top: 0, left: 0 });
+      return;
+    }
+    
+    if (!target) return;
+    
+    const rect = target.getBoundingClientRect();
+    // 提示框初始位置：右侧，距离 8px
+    setTooltipPosition({
+      top: rect.top,
+      left: rect.right + 8,
+    });
+  }, []);
+
+  /**
+   * 当提示框显示后，调整位置（避免超出视口）
+   * 使用 requestAnimationFrame 确保 tooltip 已完成渲染
+   */
+  useLayoutEffect(() => {
+    if (!hoveredOption?.tooltip || !hoveredItemRef.current) return;
+    
+    // 使用 rAF 确保 tooltip 已渲染完成
+    const rafId = requestAnimationFrame(() => {
+      if (!tooltipRef.current || !hoveredItemRef.current) return;
+      
+      const tooltip = tooltipRef.current;
+      const item = hoveredItemRef.current;
+      const itemRect = item.getBoundingClientRect();
+      const tooltipRect = tooltip.getBoundingClientRect();
+      
+      let top = itemRect.top;
+      let left = itemRect.right + 8;
+      
+      // 检查是否会超出视口右侧
+      if (left + tooltipRect.width > window.innerWidth) {
+        // 显示在左侧
+        left = itemRect.left - tooltipRect.width - 8;
+      }
+      
+      // 检查是否会超出视口底部
+      if (top + tooltipRect.height > window.innerHeight) {
+        top = window.innerHeight - tooltipRect.height - 8;
+      }
+      
+      // 检查是否会超出视口顶部
+      if (top < 8) {
+        top = 8;
+      }
+      
+      setTooltipPosition({ top, left });
+    });
+    
+    return () => cancelAnimationFrame(rafId);
+  }, [hoveredOption]);
+
   /**
    * 点击外部关闭菜单
    */
@@ -157,17 +234,26 @@ export function DropdownSelector({
                 <div key={groupName}>
                   <div className="group-title">{groupName}</div>
                   {groupItems.map((opt) => (
-                    <button
+                    <div
                       key={opt.value}
-                      className={`dropdown-item${value === opt.value ? ' active' : ''}`}
-                      onClick={() => selectOption(opt.value)}
+                      className="dropdown-item-wrapper"
+                      onMouseEnter={(e) => handleItemHover(e, opt)}
+                      onMouseLeave={() => {
+                        setHoveredOption(null);
+                        hoveredItemRef.current = null;
+                      }}
                     >
-                      {opt.icon && <Icon icon={opt.icon} width={14} />}
-                      <span className="option-label">{opt.label}</span>
-                      <span className="option-right">
-                        {value === opt.value && <Icon icon="lucide:check" width={14} className="check-icon" />}
-                      </span>
-                    </button>
+                      <button
+                        className={`dropdown-item${value === opt.value ? ' active' : ''}`}
+                        onClick={() => selectOption(opt.value)}
+                      >
+                        {opt.icon && <Icon icon={opt.icon} width={14} />}
+                        <span className="option-label">{opt.label}</span>
+                        <span className="option-right">
+                          {value === opt.value && <Icon icon="lucide:check" width={14} className="check-icon" />}
+                        </span>
+                      </button>
+                    </div>
                   ))}
                 </div>
               ))}
@@ -175,21 +261,73 @@ export function DropdownSelector({
           ) : (
             /* 扁平列表模式：无分组数据时使用 */
             sortedOptions.map((opt) => (
-              <button
+              <div
                 key={opt.value}
-                className={`dropdown-item${value === opt.value ? ' active' : ''}`}
-                onClick={() => selectOption(opt.value)}
+                className="dropdown-item-wrapper"
+                onMouseEnter={(e) => handleItemHover(e, opt)}
+                onMouseLeave={() => {
+                  setHoveredOption(null);
+                  hoveredItemRef.current = null;
+                }}
               >
-                {opt.icon && <Icon icon={opt.icon} width={14} />}
-                <span className="option-label">{opt.label}</span>
-                <span className="option-right">
-                  {value === opt.value && <Icon icon="lucide:check" width={14} className="check-icon" />}
-                </span>
-              </button>
+                <button
+                  className={`dropdown-item${value === opt.value ? ' active' : ''}`}
+                  onClick={() => selectOption(opt.value)}
+                >
+                  {opt.icon && <Icon icon={opt.icon} width={14} />}
+                  <span className="option-label">{opt.label}</span>
+                  <span className="option-right">
+                    {value === opt.value && <Icon icon="lucide:check" width={14} className="check-icon" />}
+                  </span>
+                </button>
+              </div>
             ))
           )}
         </div>
       )}
+
+      {/* Hover 提示：不使用 Portal，采用 fixed 定位避免 overflow 裁剪，同时样式保持组件内可控 */}
+      {hoveredOption?.tooltip && (
+        <div
+          ref={tooltipRef}
+          className="ai-chat-model-tooltip"
+          style={{
+            position: 'fixed',
+            top: `${tooltipPosition.top}px`,
+            left: `${tooltipPosition.left}px`,
+            zIndex: 10000,
+          }}
+        >
+          {hoveredOption.tooltip.features && hoveredOption.tooltip.features.length > 0 && (
+            <div className="ai-chat-model-tooltip__section">
+              <div className="ai-chat-model-tooltip__title">可用功能</div>
+              <div className="ai-chat-model-tooltip__features">
+                {hoveredOption.tooltip.features.map((feature) => (
+                  <div key={feature} className="ai-chat-model-tooltip__feature">
+                    <Icon icon="lucide:check" width={12} className="ai-chat-model-tooltip__check" />
+                    <span>{feature}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+          {hoveredOption.tooltip.cost && hoveredOption.tooltip.cost.length > 0 && (
+            <div className="ai-chat-model-tooltip__section">
+              <div className="ai-chat-model-tooltip__title">开销</div>
+              <div className="ai-chat-model-tooltip__cost">
+                {hoveredOption.tooltip.cost.map((line, i) => (
+                  <div key={i}>{line}</div>
+                ))}
+              </div>
+            </div>
+          )}
+          {hoveredOption.tooltip.description && (
+            <div className="ai-chat-model-tooltip__section">
+              <div className="ai-chat-model-tooltip__description">{hoveredOption.tooltip.description}</div>
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 }

package/src/components/message/MessageBubble.css

@@ -4,7 +4,6 @@
  */
 
 .message-bubble {
-  padding: 8px 0;
   animation: fadeIn 0.2s ease;
 }
 
@@ -79,7 +78,11 @@
   background: var(--chat-muted, #2a2a2a);
   border-radius: 8px;
   overflow: hidden;
-  margin: 8px 0;
+}
+
+/* 当上方有内容时，添加间距 */
+.loading-indicator.has-content-above {
+  margin-top: 8px;
 }
 
 .loading-text {

package/src/components/message/MessageBubble.tsx

@@ -37,6 +37,8 @@ interface MessageBubbleProps {
   stepsExpandedType?: 'open' | 'close' | 'auto'
   /** 工具调用相关 - 通过 props 传递 */
   adapter?: ChatAdapter
+  /** 取消工具调用（通常会中止当前请求/流式输出） */
+  onCancelToolCall?: (toolCallId: string) => void
   autoRunConfig?: AutoRunConfig
   onSaveConfig?: (config: AutoRunConfig) => Promise<void>
 }
@@ -76,6 +78,7 @@ export const MessageBubble: FC<MessageBubbleProps> = ({
   onSend,
   stepsExpandedType = 'auto',
   adapter,
+  onCancelToolCall,
   autoRunConfig,
   onSaveConfig,
 }) => {
@@ -94,61 +97,65 @@ export const MessageBubble: FC<MessageBubbleProps> = ({
   // 是否有内容（用于显示操作按钮）
   const hasContent = useMemo(() => {
     return parts.some(p => 
-      (p.type === 'text' && p.text) || 
-      p.type === 'tool_result' ||
+      (p.type === 'text' && (p as TextPart).text) || 
       p.type === 'thinking' ||
-      p.type === 'search'
+      p.type === 'search' ||
+      p.type === 'tool_call'
     )
   }, [parts])
 
   // loading 状态：决定显示什么类型的指示器
-  // cursor: 闪烁光标（文本流式输出时）
   // text: 文字提示（等待状态时）
-  // none: 不显示
-  const loadingState = useMemo<{ type: 'cursor' | 'text' | 'none'; text?: string }>(() => {
+  // none: 不显示（有正在进行的活动）
+  const loadingState = useMemo<{ type: 'text' | 'none'; text?: string }>(() => {
     if (!loading) {
       return { type: 'none' }
     }
     
-    if (parts.length === 0) {
-      return { type: 'text', text: '正在思考...' }
-    }
-    
-    const lastPart = parts[parts.length - 1]
+    // 分模式显示：ask 模式直接生成回答，agent 模式规划下一步
+    const waitingText = mode === 'ask' ? '正在生成回答...' : '正在规划下一步...'
     
-    // 文本流式输出 → 不需要额外指示，用户能看到文字在增加
-    if (lastPart.type === 'text') {
-      return { type: 'none' }
+    // 没有任何 parts 时，显示等待
+    if (parts.length === 0) {
+      return { type: 'text', text: waitingText }
     }
     
-    // 工具调用完成后 → 显示规划提示
-    if (lastPart.type === 'tool_call') {
-      const status = (lastPart as ToolCallPart).status
-      if (status === 'done' || status === 'error' || status === 'skipped') {
-        return { type: 'text', text: '正在规划下一步...' }
+    // 检查是否有正在进行的活动（如果有，不需要显示等待提示）
+    const hasActiveActivity = parts.some(part => {
+      // 思考正在进行
+      if (part.type === 'thinking' && (part as ThinkingPart).status === 'running') {
+        return true
       }
-      // 工具正在执行时，卡片本身有状态，不需要额外指示
-      return { type: 'none' }
-    }
-    
-    // 搜索完成后 → 显示规划提示
-    if (lastPart.type === 'search') {
-      if ((lastPart as SearchPart).status === 'done') {
-        return { type: 'text', text: '正在规划下一步...' }
+      // 搜索正在进行
+      if (part.type === 'search' && (part as SearchPart).status === 'running') {
+        return true
       }
+      // 工具调用正在进行（running 或 pending）
+      if (part.type === 'tool_call') {
+        const status = (part as ToolCallPart).status
+        if (status === 'running' || status === 'pending') {
+          return true
+        }
+      }
+      return false
+    })
+    
+    // 有正在进行的活动 → 不显示等待提示（活动本身有状态显示）
+    if (hasActiveActivity) {
       return { type: 'none' }
     }
     
-    // 思考完成后 → 显示规划提示
-    if (lastPart.type === 'thinking') {
-      if ((lastPart as ThinkingPart).status === 'done') {
-        return { type: 'text', text: '正在规划下一步...' }
-      }
+    // 检查最后一个 part 是否是正在流式输出的文本
+    const lastPart = parts[parts.length - 1]
+    if (lastPart.type === 'text') {
+      // 文本正在流式输出 → 不显示等待提示
       return { type: 'none' }
     }
     
-    return { type: 'none' }
-  }, [loading, parts])
+    // 没有任何正在进行的活动，但 loading=true → 显示等待提示
+    // 这包括：工具执行完成后、思考完成后、搜索完成后等"空窗期"
+    return { type: 'text', text: waitingText }
+  }, [loading, parts, mode])
 
   return (
     <div className={`message-bubble ${role}`}>
@@ -158,6 +165,7 @@ export const MessageBubble: FC<MessageBubbleProps> = ({
           <ChatInput
             variant="message"
             value={userText}
+            images={images}
             mode={inputContext.mode}
             model={inputContext.model}
             models={inputContext.models}
@@ -191,13 +199,14 @@ export const MessageBubble: FC<MessageBubbleProps> = ({
               parts={parts} 
               expandedType={stepsExpandedType}
               adapter={adapter}
+              onCancelToolCall={onCancelToolCall}
               autoRunConfig={autoRunConfig}
               onSaveConfig={onSaveConfig}
             />
             
             {/* 加载指示器：等待状态时显示 */}
             {loadingState.type === 'text' && (
-              <div className="loading-indicator">
+              <div className={`loading-indicator${parts.length > 0 ? ' has-content-above' : ''}`}>
                 <span className="loading-text">{loadingState.text}</span>
                 <span className="loading-shimmer"></span>
               </div>

package/src/components/message/PartsRenderer.css

@@ -2,3 +2,11 @@
   display: flex;
   flex-direction: column;
 }
+
+.part-item {
+  margin-top: 8px;
+}
+
+.part-item:first-child {
+  margin-top: 0;
+}