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

package/src/components/input/ChatInput.tsx

@@ -1,575 +0,0 @@
-/**
- * ChatInput Component
- * 与 Vue 版本 ChatInput.vue 保持一致
- */
-
-import { useState, useRef, useCallback, useEffect, forwardRef, useImperativeHandle, useLayoutEffect, useMemo } from 'react';
-import './ChatInput.css';
-import { Icon } from '@iconify/react';
-import type { ChatMode, ModelOption } from '../../types';
-import { AtFilePicker } from './AtFilePicker';
-import { ImagePreviewModal } from './ImagePreviewModal';
-import { DropdownSelector } from './DropdownSelector';
-import type { DropdownOption } from './DropdownSelector';
-import { useChatInputContext } from '../../context/ChatInputContext';
-import { useImageUpload } from '../../hooks/useImageUpload';
-import { useVoiceToTextInput } from '../../hooks/useVoiceToTextInput';
-import type { ImageData } from '../../adapter';
-
-/** ChatInput 暴露给外部的方法 */
-export interface ChatInputHandle {
-  /** 设置输入框内容 */
-  setText: (text: string) => void;
-  /** 聚焦输入框 */
-  focus: () => void;
-  /** 清空输入框 */
-  clear: () => void;
-  /** 在光标位置插入文本（用于 @ 上下文） */
-  insertText: (text: string) => void;
-  /** 添加图片 */
-  addImages: (files: File[]) => void;
-}
-
-interface ChatInputProps {
-  /** 变体模式：input-底部输入框，message-历史消息 */
-  variant?: 'input' | 'message';
-  /** 受控值（用于历史消息编辑） */
-  value?: string;
-  /** 图片数据（用于历史消息编辑） */
-  images?: string[];
-  isLoading?: boolean;
-  mode?: ChatMode;
-  model?: string;
-  /** 模型列表（tooltip 由后端下发，前端仅透传渲染） */
-  models?: ModelOption[];
-  webSearchEnabled?: boolean;
-  thinkingEnabled?: boolean;
-  onSend?: (text: string, images?: ImageData[]) => void;
-  onCancel?: () => void;
-  onAtContext?: () => void;
-  onModeChange?: (mode: ChatMode) => void;
-  onModelChange?: (model: string) => void;
-  onWebSearchChange?: (enabled: boolean) => void;
-  onThinkingChange?: (enabled: boolean) => void;
-}
-
-/** 模式配置 */
-const MODE_OPTIONS: DropdownOption[] = [
-  { value: 'agent', label: 'Agent', icon: 'lucide:zap' },
-  { value: 'ask', label: 'Ask', icon: 'lucide:message-circle' },
-];
-
-export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
-  (
-    {
-      variant = 'input',
-      value = '',
-      images = [],
-      isLoading = false,
-      mode = 'agent',
-      model = '',
-      models = [],
-      webSearchEnabled = false,
-      thinkingEnabled = false,
-      onSend,
-      onCancel,
-      onModeChange,
-      onModelChange,
-      onWebSearchChange,
-      onThinkingChange,
-    },
-    ref
-  ) => {
-    const isMessageVariant = variant === 'message';
-
-    const inputContext = useChatInputContext();
-    const adapter = inputContext?.adapter;
-    // cwd 已解耦，不再通过 context 传递
-
-    const [inputText, setInputText] = useState(value);
-    const [isFocused, setIsFocused] = useState(false);
-
-    // 图片上传（使用 hook）
-    const imageUpload = useImageUpload();
-    const imageInputRef = useRef<HTMLInputElement>(null);
-
-    const inputRef = useRef<HTMLTextAreaElement>(null);
-    const containerRef = useRef<HTMLDivElement>(null);
-    const atSelectorRef = useRef<HTMLDivElement>(null);
-
-    // @ 文件选择面板
-    const [atPickerVisible, setAtPickerVisible] = useState(false);
-    const replaceRangeRef = useRef<{ start: number; end: number } | null>(null);
-    const pendingCaretRef = useRef<number | null>(null);
-    const pendingFocusRef = useRef(false);
-    const prevValueRef = useRef(value);
-
-    // 触发文件选择
-    const triggerImageUpload = useCallback(() => {
-      imageInputRef.current?.click();
-    }, []);
-
-    // 模型选项
-    // 模型选项：tooltip/能力由后端（ai-chat-core）统一提供，前端只负责渲染
-    const modelOptions = useMemo<DropdownOption[]>(
-      () =>
-        models.map((m) => ({
-          value: m.modelId,
-          label: m.displayName,
-          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);
-      replaceRangeRef.current = null;
-      pendingFocusRef.current = true;
-    }, []);
-
-    const applyAtPath = useCallback(
-      (path: string) => {
-        const el = inputRef.current;
-        const current = el?.value ?? inputText;
-        const insert = `@${path}\n`;
-        const range = replaceRangeRef.current;
-
-        let nextText = current;
-        let nextCaret = 0;
-
-        if (range && current.slice(range.start, range.end) === '@') {
-          nextText = current.slice(0, range.start) + insert + current.slice(range.end);
-          nextCaret = range.start + insert.length;
-        } else if (el) {
-          const start = el.selectionStart ?? current.length;
-          const end = el.selectionEnd ?? start;
-          nextText = current.slice(0, start) + insert + current.slice(end);
-          nextCaret = start + insert.length;
-        } else {
-          nextText = current + insert;
-          nextCaret = nextText.length;
-        }
-
-        setInputText(nextText);
-        pendingCaretRef.current = nextCaret;
-        pendingFocusRef.current = true;
-
-        closeAtPicker();
-      },
-      [closeAtPicker, inputText]
-    );
-
-    // 切换 @ 选择器
-    const toggleAtPicker = useCallback(() => {
-      if (!adapter) return;
-      if (!atPickerVisible) {
-        replaceRangeRef.current = null;
-      }
-      setAtPickerVisible((prev) => !prev);
-    }, [adapter, atPickerVisible]);
-
-    // 同步外部 value
-    useEffect(() => {
-      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;
-
-    // 占位符
-    const placeholder = mode === 'ask' ? '有什么问题想问我？' : '描述任务，@ 添加上下文';
-
-    // 是否有内容可发送
-    const hasContent = useMemo(() => {
-      return inputText.trim() || imageUpload.hasImages;
-    }, [inputText, imageUpload.hasImages]);
-
-    const voiceCtl = useVoiceToTextInput({
-      adapter,
-      inputText,
-      setInputText,
-      hasImages: imageUpload.hasImages,
-      isLoading,
-    });
-    const voiceInput = voiceCtl.voiceInput;
-    const toggleVoiceInput = useCallback(async () => {
-      await voiceCtl.toggleVoice();
-      // 停止/取消后聚焦输入框
-      if (voiceInput.status === 'recording' || voiceInput.status === 'connecting') {
-        pendingFocusRef.current = true;
-        pendingCaretRef.current = null;
-      }
-    }, [voiceCtl, voiceInput.status]);
-
-    // 自动调整高度
-    const adjustTextareaHeight = useCallback(() => {
-      if (inputRef.current) {
-        inputRef.current.style.height = 'auto';
-        const scrollHeight = inputRef.current.scrollHeight;
-        inputRef.current.style.height = `${Math.min(scrollHeight, 150)}px`;
-      }
-    }, []);
-
-    // 统一在 DOM commit 后调整高度/光标
-    useLayoutEffect(() => {
-      adjustTextareaHeight();
-      const el = inputRef.current;
-      if (!el) return;
-
-      if (pendingFocusRef.current) {
-        el.focus();
-        pendingFocusRef.current = false;
-      }
-      if (pendingCaretRef.current !== null) {
-        const pos = pendingCaretRef.current;
-        pendingCaretRef.current = null;
-        el.setSelectionRange(pos, pos);
-      }
-    }, [inputText, adjustTextareaHeight]);
-
-    // 暴露给外部的方法
-    useImperativeHandle(
-      ref,
-      () => ({
-        setText: (text: string) => {
-          setInputText(text);
-          pendingCaretRef.current = text.length;
-          pendingFocusRef.current = false;
-        },
-        focus: () => {
-          inputRef.current?.focus();
-        },
-        clear: () => {
-          setInputText('');
-          imageUpload.clearImages();
-          // 重置语音输入状态
-          if (voiceInput.status !== 'idle') {
-            voiceInput.cancel();
-          }
-          // 重置 @ 选择器
-          setAtPickerVisible(false);
-          replaceRangeRef.current = null;
-          // 重置输入框高度
-          if (inputRef.current) {
-            inputRef.current.style.height = 'auto';
-          }
-          pendingCaretRef.current = 0;
-        },
-        insertText: (text: string) => {
-          if (!text) return;
-          const el = inputRef.current;
-          const current = inputText;
-          if (!el) {
-            setInputText(current + text);
-            pendingCaretRef.current = (current + text).length;
-            return;
-          }
-          const start = el.selectionStart ?? current.length;
-          const end = el.selectionEnd ?? start;
-          const next = current.slice(0, start) + text + current.slice(end);
-          setInputText(next);
-          pendingCaretRef.current = start + text.length;
-          pendingFocusRef.current = true;
-        },
-        addImages: (files: File[]) => {
-          imageUpload.addImages(files);
-        },
-      }),
-      [inputText, imageUpload]
-    );
-
-    // 发送或取消
-    const handleSendOrCancel = useCallback(() => {
-      if (isLoading) {
-        onCancel?.();
-        return;
-      }
-
-      const text = inputText.trim();
-      if (!text && !imageUpload.hasImages) return;
-
-      // 获取图片数据
-      const images = imageUpload.imageData.length > 0 ? imageUpload.imageData : undefined;
-
-      onSend?.(text, images);
-
-      if (!isMessageVariant) {
-        setInputText('');
-        imageUpload.clearImages();
-        if (inputRef.current) {
-          inputRef.current.style.height = 'auto';
-        }
-        pendingCaretRef.current = 0;
-        pendingFocusRef.current = true;
-      } else {
-        setIsFocused(false);
-      }
-    }, [isLoading, inputText, imageUpload, isMessageVariant, onCancel, onSend]);
-
-    // 处理键盘事件
-    const handleKeyDown = useCallback(
-      (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-        if (voiceCtl.handleKeyDownForVoice(e)) return;
-        if (e.key === 'Enter' && !e.shiftKey) {
-          e.preventDefault();
-          handleSendOrCancel();
-        }
-      },
-      [handleSendOrCancel, voiceCtl]
-    );
-
-    // 点击外部关闭菜单
-    useEffect(() => {
-      const handleClickOutside = (event: MouseEvent) => {
-        const target = event.target as HTMLElement;
-        // 关闭 @ 选择器
-        if (!target.closest('.at-picker-wrapper')) {
-          setAtPickerVisible(false);
-        }
-        if (isMessageVariant && containerRef.current && !containerRef.current.contains(target)) {
-          setIsFocused(false);
-        }
-      };
-
-      document.addEventListener('click', handleClickOutside);
-      return () => document.removeEventListener('click', handleClickOutside);
-    }, [isMessageVariant]);
-
-    return (
-      <div
-        className={`chat-input${isMessageVariant ? ' message-variant' : ''}`.trim()}
-        onDragOver={imageUpload.handleDragOver}
-        onDragLeave={imageUpload.handleDragLeave}
-        onDrop={imageUpload.handleDrop}
-      >
-        <div
-          ref={containerRef}
-          className={`input-container${isFocused ? ' focused' : ''}${imageUpload.isDragOver ? ' drag-over' : ''}${voiceInput.status === 'connecting' ? ' connecting' : ''}${voiceInput.isRecording ? ' recording' : ''}`.trim()}
-        >
-          {/* 图片预览区 */}
-          {imageUpload.hasImages && (
-            <div className="images-preview">
-              {imageUpload.images.map((img, i) => (
-                <div key={i} className="image-preview-item">
-                  <img
-                    src={img.dataUrl}
-                    alt="预览"
-                    className="image-thumbnail"
-                    onClick={() => imageUpload.openPreview(i)}
-                  />
-                  <button
-                    className="image-remove-btn"
-                    title="移除图片"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      imageUpload.removeImage(i);
-                    }}
-                  >
-                    <Icon icon="lucide:x" width={10} />
-                  </button>
-                </div>
-              ))}
-            </div>
-          )}
-
-          {/* 图片预览弹窗 */}
-          <ImagePreviewModal
-            visible={imageUpload.previewVisible}
-            images={imageUpload.imageUrls}
-            initialIndex={imageUpload.previewIndex}
-            onClose={imageUpload.closePreview}
-            onIndexChange={imageUpload.setPreviewIndex}
-          />
-
-          {/* 输入框 */}
-          <div className="input-field-wrapper">
-            <textarea
-              ref={inputRef}
-              value={inputText}
-              placeholder={placeholder}
-              rows={1}
-              className="input-field chat-scrollbar"
-                readOnly={voiceInput.isRecording}
-              spellCheck={false}
-              autoCorrect="off"
-              autoComplete="off"
-              autoCapitalize="off"
-              onChange={(e) => {
-                const next = e.target.value;
-                const prev = prevValueRef.current;
-                prevValueRef.current = next;
-                setInputText(next);
-
-                // 检测是否新增输入了 '@'，用事件驱动打开面板
-                if (adapter && next.length === prev.length + 1) {
-                  const cursor = e.target.selectionStart ?? next.length;
-                  const inserted = next.slice(cursor - 1, cursor);
-                  if (inserted === '@') {
-                    replaceRangeRef.current = { start: cursor - 1, end: cursor };
-                    setAtPickerVisible(true);
-                  }
-                }
-              }}
-              onInput={adjustTextareaHeight}
-              onKeyDown={handleKeyDown}
-              onFocus={() => setIsFocused(true)}
-              onPaste={imageUpload.handlePaste}
-            />
-          </div>
-
-          {/* 底部控制栏 */}
-          {showToolbar && (
-            <div className="input-controls">
-              {/* 左侧 */}
-              <div className="input-left">
-                {/* 模式选择 */}
-                <DropdownSelector
-                  value={mode}
-                  options={MODE_OPTIONS}
-                  onSelect={(v) => onModeChange?.(v as ChatMode)}
-                />
-
-                {/* 模型选择（分组显示：原生和 OpenRouter） */}
-                <DropdownSelector 
-                  value={model} 
-                  options={modelOptions}
-                  onSelect={(v) => onModelChange?.(v)} 
-                />
-              </div>
-
-              {/* 右侧 */}
-              <div className="input-right">
-                {/* 深度思考（ask 模式隐藏，仅支持的模型显示） */}
-                {mode !== 'ask' && currentModelSupportsThinking && (
-                <button
-                  className={`toggle-btn${thinkingEnabled ? ' active' : ''}`}
-                  title="深度思考"
-                  onClick={() => onThinkingChange?.(!thinkingEnabled)}
-                >
-                  <Icon icon="lucide:sparkles" width={18} />
-                </button>
-                )}
-
-                {/* 联网搜索（ask 模式隐藏） */}
-                {mode !== 'ask' && (
-                <button
-                  className={`toggle-btn${webSearchEnabled ? ' active' : ''}`}
-                  title="联网搜索"
-                  onClick={() => onWebSearchChange?.(!webSearchEnabled)}
-                >
-                  <Icon icon="lucide:globe" width={18} />
-                </button>
-                )}
-
-                {/* 图片上传按钮 */}
-                <button className="icon-btn" title="添加图片" onClick={triggerImageUpload}>
-                  <Icon icon="lucide:image" width={18} />
-                </button>
-                <input
-                  ref={imageInputRef}
-                  type="file"
-                  accept="image/*"
-                  multiple
-                  className="hidden-input"
-                  onChange={imageUpload.handleImageSelect}
-                />
-
-                {/* @ 上下文选择器 */}
-                <div
-                  ref={atSelectorRef}
-                  className="at-picker-wrapper"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    toggleAtPicker();
-                  }}
-                >
-                  <button className="icon-btn" title="提及上下文 (@)">
-                    <Icon icon="lucide:at-sign" width={18} />
-                  </button>
-
-                  {/* @ 下拉菜单 */}
-                  {adapter && (
-                    <AtFilePicker
-                      visible={atPickerVisible}
-                      adapter={adapter}
-                      // initialDir 已移除，cwd 已解耦
-                      anchorEl={atSelectorRef.current}
-                      onClose={closeAtPicker}
-                      onSelect={applyAtPath}
-                    />
-                  )}
-                </div>
-
-                {/* 方案 A：录音按钮 + 发送按钮独立（停止录音入口永不消失） */}
-                <button
-                  className={`voice-btn${voiceInput.status === 'connecting' ? ' connecting' : ''}${voiceInput.isRecording ? ' recording' : ''}`}
-                  title={
-                    voiceInput.status === 'connecting'
-                      ? '正在连接，点击取消'
-                      : voiceInput.isRecording
-                        ? '点击停止'
-                        : '点击录音'
-                  }
-                  onClick={() => toggleVoiceInput().catch(() => {})}
-                  disabled={isLoading || !adapter}
-                >
-                  {voiceInput.status === 'connecting' ? (
-                    <Icon icon="lucide:loader-2" width={18} className="spin" />
-                  ) : voiceInput.isRecording ? (
-                    <Icon icon="streamline-flex:button-pause-circle-remix" width={18} />
-                  ) : (
-                    <Icon icon="lucide:mic" width={18} />
-                  )}
-                </button>
-
-                <button
-                  className={`send-btn${isLoading ? ' loading' : ''}`}
-                  title={
-                    isLoading
-                      ? '停止'
-                      : voiceInput.status === 'connecting'
-                        ? '语音连接中，先取消/停止'
-                        : voiceInput.isRecording
-                          ? '录音中，先停止'
-                          : isMessageVariant
-                            ? '重新发送'
-                            : '发送'
-                  }
-                  onClick={handleSendOrCancel}
-                  disabled={(!hasContent && !isLoading) || voiceInput.isRecording || voiceInput.status === 'connecting'}
-                >
-                  {isLoading ? (
-                    <Icon icon="streamline-flex:button-pause-circle-remix" width={18} />
-                  ) : (
-                    <Icon icon="uil:message" width={18} />
-                  )}
-                </button>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
-);
-
-// 添加 displayName 以便于调试
-ChatInput.displayName = 'ChatInput';