@huyooo/ai-chat-frontend-react 0.1.6 → 0.2.0

package/src/components/input/ChatInput.css

@@ -0,0 +1,204 @@
+/**
+ * ChatInput 组件样式
+ */
+
+.chat-input {
+  padding: 12px;
+}
+
+.chat-input.message-variant {
+  padding: 0;
+  margin-bottom: 16px;
+}
+
+.input-container {
+  display: flex;
+  flex-direction: column;
+  background: var(--chat-input-bg, #2d2d2d);
+  border: 1px solid var(--chat-border, #444);
+  border-radius: 12px;
+  padding: 12px;
+  transition: border-color 0.15s;
+}
+
+.input-container.focused {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.input-container.drag-over {
+  border-color: var(--chat-primary, #2563eb);
+  background: rgba(37, 99, 235, 0.1);
+}
+
+/* 图片预览区 */
+.images-preview {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+
+.image-preview-item {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  border-radius: 6px;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.image-thumbnail {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.image-thumbnail:hover {
+  opacity: 0.8;
+}
+
+.image-remove-btn {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  border: none;
+  border-radius: 50%;
+  color: #fff;
+  cursor: pointer;
+  opacity: 0;
+  transition: all 0.15s;
+}
+
+.image-preview-item:hover .image-remove-btn {
+  opacity: 1;
+}
+
+.image-remove-btn:hover {
+  background: rgba(239, 68, 68, 0.9);
+}
+
+/* 隐藏的文件输入 */
+.hidden-input {
+  display: none;
+}
+
+/* 输入框 */
+.input-field-wrapper {
+  margin-bottom: 8px;
+}
+
+.input-field {
+  width: 100%;
+  background: transparent;
+  border: none;
+  padding: 0;
+  padding-right: 8px;
+  color: var(--chat-text, #ccc);
+  font-size: 14px;
+  resize: none;
+  min-height: 24px;
+  max-height: 150px;
+  line-height: 1.5;
+  font-family: inherit;
+  overflow-y: auto;
+}
+
+.input-field:focus {
+  outline: none;
+}
+
+.input-field::placeholder {
+  color: var(--chat-text-muted, #666);
+}
+
+/* 底部控制栏 */
+.input-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.input-left {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* 右侧按钮 */
+.input-right {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+/* @ 选择器容器 */
+.at-picker-wrapper {
+  position: relative;
+}
+
+.input-right .icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--chat-text-muted, #666);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.input-right .icon-btn:hover {
+  color: var(--chat-text, #ccc);
+}
+
+.toggle-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--chat-text-muted, #666);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.toggle-btn:hover {
+  color: var(--chat-text, #ccc);
+}
+
+.toggle-btn.active {
+  color: var(--chat-text, #fff);
+}
+
+.send-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--chat-text-muted, #666);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.send-btn:hover {
+  color: var(--chat-text, #ccc);
+}

package/src/components/input/ChatInput.tsx

@@ -0,0 +1,506 @@
+/**
+ * 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, GroupedOptions } from './DropdownSelector';
+import { useChatInputContext } from '../../context/ChatInputContext';
+import { useImageUpload } from '../../hooks/useImageUpload';
+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;
+  isLoading?: boolean;
+  mode?: ChatMode;
+  model?: string;
+  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 = '',
+      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();
+    }, []);
+
+    // 将模型列表转换为分组格式（完全使用后端返回的 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({
+          value: m.modelId,
+          label: m.displayName,
+        });
+      });
+      
+      // 对每个分组内的选项进行排序
+      Object.keys(groups).forEach(groupName => {
+        groups[groupName].sort((a, b) => a.label.localeCompare(b.label));
+      });
+      
+      return groups;
+    }, [models]);
+
+    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]);
+
+    // 是否显示工具栏
+    const showToolbar = !isMessageVariant || isFocused;
+
+    // 占位符
+    const placeholder = mode === 'ask' ? '有什么问题想问我？' : '描述任务，@ 添加上下文';
+
+    // 是否有内容可发送
+    const hasContent = useMemo(() => {
+      return inputText.trim() || imageUpload.hasImages;
+    }, [inputText, imageUpload.hasImages]);
+
+    // 自动调整高度
+    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 (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 (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          handleSendOrCancel();
+        }
+      },
+      [handleSendOrCancel]
+    );
+
+    // 点击外部关闭菜单
+    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' : ''}`.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"
+              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} 
+                  groupedOptions={groupedModelOptions}
+                  onSelect={(v) => onModelChange?.(v)} 
+                />
+              </div>
+
+              {/* 右侧 */}
+              <div className="input-right">
+                <button
+                  className={`toggle-btn${thinkingEnabled ? ' active' : ''}`}
+                  title="深度思考"
+                  onClick={() => onThinkingChange?.(!thinkingEnabled)}
+                >
+                  <Icon icon="lucide:sparkles" width={18} />
+                </button>
+
+                <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>
+
+                {hasContent || isLoading ? (
+                  <button
+                    className={`send-btn${isLoading ? ' loading' : ''}`}
+                    title={isLoading ? '停止' : isMessageVariant ? '重新发送' : '发送'}
+                    onClick={handleSendOrCancel}
+                  >
+                    {isLoading ? (
+                      <Icon icon="streamline-flex:button-pause-circle-remix" width={18} />
+                    ) : (
+                      <Icon icon="streamline-flex:mail-send-email-message-circle-remix" width={18} />
+                    )}
+                  </button>
+                ) : (
+                  <button className="icon-btn" title="语音输入">
+                    <Icon icon="lucide:mic" width={18} />
+                  </button>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+// 添加 displayName 以便于调试
+ChatInput.displayName = 'ChatInput';