@huyooo/ai-chat-frontend-vue 0.1.6 → 0.1.8

package/src/components/input/ChatInput.vue

@@ -0,0 +1,653 @@
+<template>
+  <div
+    :class="['chat-input', { 'message-variant': isMessageVariant }]"
+    @dragover.prevent="imageUpload.handleDragOver"
+    @dragleave="imageUpload.handleDragLeave"
+    @drop.prevent="imageUpload.handleDrop"
+  >
+    <div ref="containerRef" :class="['input-container', { focused: isFocused, 'drag-over': imageUpload.isDragOver.value }]">
+      <!-- 图片预览区 -->
+      <div v-if="imageUpload.hasImages.value" class="images-preview">
+        <div v-for="(img, i) in imageUpload.images.value" :key="i" class="image-preview-item">
+          <img :src="img.dataUrl" alt="预览" class="image-thumbnail" @click="imageUpload.openPreview(i)" />
+          <button class="image-remove-btn" title="移除图片" @click.stop="imageUpload.removeImage(i)">
+            <Icon icon="lucide:x" width="10" />
+          </button>
+        </div>
+      </div>
+
+      <!-- 图片预览弹窗 -->
+      <ImagePreviewModal
+        v-model:index="previewIndex"
+        :visible="imageUpload.previewVisible.value"
+        :images="imageUpload.imageUrls.value"
+        @close="imageUpload.closePreview"
+      />
+
+      <!-- 输入框区域 -->
+      <div class="input-field-wrapper">
+        <textarea
+          ref="inputRef"
+          v-model="inputText"
+          :placeholder="placeholder"
+          rows="1"
+          class="input-field chat-scrollbar"
+          spellcheck="false"
+          autocorrect="off"
+          autocomplete="off"
+          autocapitalize="off"
+          @keydown="handleKeydown"
+          @input="adjustTextareaHeight"
+          @focus="isFocused = true"
+          @paste="imageUpload.handlePaste"
+        ></textarea>
+      </div>
+
+      <!-- 底部控制栏 -->
+      <div v-if="showToolbar" class="input-controls">
+        <!-- 左侧：模式和模型选择 -->
+        <div class="input-left">
+          <!-- 模式选择 -->
+          <DropdownSelector
+            :value="mode"
+            :options="modeOptions"
+            :container-ref="containerRef"
+            @select="selectMode"
+          />
+
+          <!-- 模型选择（使用后端返回的分组数据） -->
+          <DropdownSelector
+            :value="model"
+            :grouped-options="groupedModelOptions"
+            :container-ref="containerRef"
+            @select="selectModel"
+          />
+        </div>
+
+        <!-- 右侧：功能按钮 -->
+        <div class="input-right">
+          <!-- 深度思考 -->
+          <button
+            :class="['toggle-btn', { active: thinkingEnabled }]"
+            title="深度思考"
+            @click="$emit('update:thinking', !thinkingEnabled)"
+          >
+            <Icon icon="lucide:sparkles" width="18" />
+          </button>
+
+          <!-- 联网搜索 -->
+          <button
+            :class="['toggle-btn', { active: webSearchEnabled }]"
+            title="联网搜索"
+            @click="$emit('update:webSearch', !webSearchEnabled)"
+          >
+            <Icon icon="lucide:globe" width="18" />
+          </button>
+
+          <!-- 图片上传按钮 -->
+          <button class="icon-btn" title="添加图片" @click="triggerImageUpload">
+            <Icon icon="lucide:image" width="18" />
+          </button>
+          <input
+            ref="imageInputRef"
+            type="file"
+            accept="image/*"
+            multiple
+            class="hidden-input"
+            @change="imageUpload.handleImageSelect"
+          />
+
+          <!-- @ 上下文选择器 -->
+          <div ref="atSelectorRef" class="at-picker-wrapper" @click.stop="toggleAtPicker">
+            <button class="icon-btn" title="提及上下文 (@)">
+              <Icon icon="lucide:at-sign" width="18" />
+            </button>
+
+            <!-- @ 下拉菜单 -->
+            <AtFilePicker
+              v-if="chatAdapter"
+              :visible="atPickerVisible"
+              :adapter="chatAdapter"
+              :anchor-el="atSelectorRef"
+              @close="closeAtPicker"
+              @select="applyAtPath"
+            />
+          </div>
+
+          <!-- 发送/停止按钮 -->
+          <button
+            v-if="inputText.trim() || imageUpload.hasImages.value || isLoading"
+            :class="['send-btn', { loading: isLoading }]"
+            :title="isLoading ? '停止' : isMessageVariant ? '重新发送' : '发送'"
+            @click="handleSendOrCancel"
+          >
+            <Icon v-if="isLoading" icon="streamline-flex:button-pause-circle-remix" width="18" />
+            <Icon v-else icon="streamline-flex:mail-send-email-message-circle-remix" width="18" />
+          </button>
+          <button v-else class="icon-btn" title="语音输入">
+            <Icon icon="lucide:mic" width="18" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { Icon } from '@iconify/vue';
+import type { ChatMode, ModelOption } from '../../types';
+import AtFilePicker from './AtFilePicker.vue';
+import ImagePreviewModal from './ImagePreviewModal.vue';
+import DropdownSelector, { type GroupedOptions } from './DropdownSelector.vue';
+import type { ChatAdapter, ImageData } from '../../adapter';
+import { useImageUpload } from '../../composables/useImageUpload';
+
+const props = withDefaults(
+  defineProps<{
+    /** 变体模式：input-底部输入框，message-历史消息 */
+    variant?: 'input' | 'message';
+    /** 受控值（用于历史消息编辑） */
+    value?: string;
+    isLoading?: boolean;
+    mode?: ChatMode;
+    model?: string;
+    /** 模型列表 */
+    models?: ModelOption[];
+    webSearchEnabled?: boolean;
+    thinkingEnabled?: boolean;
+  }>(),
+  {
+    variant: 'input',
+    value: '',
+    isLoading: false,
+    mode: 'agent',
+    model: '',
+    models: () => [],
+    webSearchEnabled: false,
+    thinkingEnabled: false,
+  }
+);
+
+const emit = defineEmits<{
+  send: [text: string, images?: ImageData[]];
+  cancel: [];
+  'at-context': [];
+  'update:mode': [mode: ChatMode];
+  'update:model': [model: string];
+  'update:webSearch': [enabled: boolean];
+  'update:thinking': [enabled: boolean];
+}>();
+
+// 是否为历史消息模式
+const isMessageVariant = computed(() => props.variant === 'message');
+
+const inputText = ref(props.value);
+const inputRef = ref<HTMLTextAreaElement | null>(null);
+const containerRef = ref<HTMLDivElement | null>(null);
+const isFocused = ref(false);
+const lastInputText = ref(props.value);
+
+// 注入 adapter（由 ChatPanel 提供）
+const chatAdapter = inject<ChatAdapter | null>('chatAdapter', null);
+
+// ============ 图片上传功能（使用 composable） ============
+const imageUpload = useImageUpload();
+const imageInputRef = ref<HTMLInputElement | null>(null);
+
+// 预览索引（使用 computed 双向绑定到 composable）
+const previewIndex = computed({
+  get: () => imageUpload.previewIndex.value,
+  set: (v) => (imageUpload.previewIndex.value = v),
+});
+
+// 触发文件选择
+function triggerImageUpload() {
+  imageInputRef.value?.click();
+}
+
+// @ 文件选择面板
+const atPickerVisible = ref(false);
+const replaceRange = ref<{ start: number; end: number } | null>(null);
+const atSelectorRef = ref<HTMLDivElement | null>(null);
+
+function toggleAtPicker() {
+  if (!chatAdapter) return;
+  if (!atPickerVisible.value) {
+    replaceRange.value = null;
+  }
+  atPickerVisible.value = !atPickerVisible.value;
+}
+
+function closeAtPicker() {
+  atPickerVisible.value = false;
+  replaceRange.value = null;
+  nextTick(() => inputRef.value?.focus());
+}
+
+function applyAtPath(path: string) {
+  const insert = `@${path}\n`;
+  const el = inputRef.value;
+  const current = inputText.value || '';
+  if (!el) {
+    inputText.value = current + insert;
+    closeAtPicker();
+    return;
+  }
+
+  // 如果是 typed 模式且光标前确实是 '@'，替换这个字符
+  const range = replaceRange.value;
+  if (range && current.slice(range.start, range.end) === '@') {
+    const next = current.slice(0, range.start) + insert + current.slice(range.end);
+    inputText.value = next;
+    nextTick(() => {
+      adjustTextareaHeight();
+      const pos = range.start + insert.length;
+      el.focus();
+      el.setSelectionRange(pos, pos);
+    });
+    closeAtPicker();
+    return;
+  }
+
+  // 否则插入到当前光标处
+  const start = el.selectionStart ?? current.length;
+  const end = el.selectionEnd ?? start;
+  inputText.value = current.slice(0, start) + insert + current.slice(end);
+  nextTick(() => {
+    adjustTextareaHeight();
+    const pos = start + insert.length;
+    el.focus();
+    el.setSelectionRange(pos, pos);
+  });
+  closeAtPicker();
+}
+
+// 同步外部 value
+watch(
+  () => props.value,
+  (newVal) => {
+    inputText.value = newVal;
+  }
+);
+
+// 模式选项（用于 DropdownSelector）
+const modeOptions = computed(() => [
+  { value: 'agent', label: 'Agent', icon: 'lucide:zap' },
+  { value: 'ask', label: 'Ask', icon: 'lucide:message-circle' },
+]);
+
+// 模型选项（用于 DropdownSelector，支持分组显示和搜索）
+// 将模型列表转换为分组格式（完全使用后端返回的 group 字段）
+const groupedModelOptions = computed(() => {
+  const groups: Record<string, Array<{ value: string; label: string; icon?: string }>> = {};
+  
+  props.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;
+});
+
+// 选择模式
+function selectMode(value: string) {
+  emit('update:mode', value as ChatMode);
+}
+
+// 选择模型
+function selectModel(value: string) {
+  emit('update:model', value);
+}
+
+// 是否显示工具栏
+const showToolbar = computed(() => !isMessageVariant.value || isFocused.value);
+
+// 占位符
+const placeholder = computed(() => {
+  if (props.mode === 'ask') return '有什么问题想问我？';
+  return '描述任务，@ 添加上下文';
+});
+
+// 自动调整高度
+function adjustTextareaHeight() {
+  if (inputRef.value) {
+    inputRef.value.style.height = 'auto';
+    const scrollHeight = inputRef.value.scrollHeight;
+    inputRef.value.style.height = `${Math.min(scrollHeight, 150)}px`;
+  }
+
+  // 检测是否新增输入了 '@'，用事件驱动打开面板
+  const cur = inputText.value || '';
+  const prev = lastInputText.value || '';
+  if (chatAdapter && cur.length === prev.length + 1 && inputRef.value) {
+    const cursor = inputRef.value.selectionStart ?? cur.length;
+    const inserted = cur.slice(cursor - 1, cursor);
+    if (inserted === '@') {
+      replaceRange.value = { start: cursor - 1, end: cursor };
+      atPickerVisible.value = true;
+    }
+  }
+  lastInputText.value = cur;
+}
+
+// 发送或取消
+function handleSendOrCancel() {
+  if (props.isLoading) {
+    emit('cancel');
+    return;
+  }
+
+  const text = inputText.value.trim();
+  const hasContent = text || imageUpload.hasImages.value;
+  if (!hasContent) return;
+
+  // 获取图片数据
+  const images = imageUpload.imageData.value.length > 0 ? imageUpload.imageData.value : undefined;
+
+  emit('send', text, images);
+
+  if (!isMessageVariant.value) {
+    inputText.value = '';
+    imageUpload.clearImages();
+    if (inputRef.value) {
+      inputRef.value.style.height = 'auto';
+    }
+    nextTick(() => {
+      adjustTextareaHeight();
+      inputRef.value?.focus();
+    });
+  } else {
+    isFocused.value = false;
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Enter' && !event.shiftKey) {
+    event.preventDefault();
+    handleSendOrCancel();
+  } else {
+    nextTick(() => adjustTextareaHeight());
+  }
+}
+
+// 点击外部
+function handleClickOutside(event: MouseEvent) {
+  const target = event.target as HTMLElement;
+  // 关闭 @ 选择器
+  if (!target.closest('.at-picker-wrapper')) {
+    atPickerVisible.value = false;
+  }
+  if (isMessageVariant.value && containerRef.value && !containerRef.value.contains(target)) {
+    isFocused.value = false;
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+
+defineExpose({
+  focus: () => inputRef.value?.focus(),
+  setText: (text: string) => {
+    inputText.value = text;
+    nextTick(() => {
+      adjustTextareaHeight();
+    });
+  },
+  /** 在光标位置插入文本（用于 @ 上下文） */
+  insertText: (text: string) => {
+    if (!text) return;
+    const el = inputRef.value;
+    if (!el) {
+      inputText.value = (inputText.value || '') + text;
+      nextTick(() => adjustTextareaHeight());
+      return;
+    }
+
+    const start = el.selectionStart ?? (inputText.value || '').length;
+    const end = el.selectionEnd ?? start;
+    const current = inputText.value || '';
+    inputText.value = current.slice(0, start) + text + current.slice(end);
+
+    nextTick(() => {
+      adjustTextareaHeight();
+      const nextPos = start + text.length;
+      el.focus();
+      el.setSelectionRange(nextPos, nextPos);
+    });
+  },
+  clear: () => {
+    inputText.value = '';
+    imageUpload.clearImages();
+    if (inputRef.value) {
+      inputRef.value.style.height = 'auto';
+    }
+  },
+  /** 添加图片 */
+  addImages: (files: File[]) => {
+    imageUpload.addImages(files);
+  },
+});
+</script>
+
+<style scoped>
+.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);
+}
+</style>