@huyooo/ai-chat-frontend-vue 0.1.2

package/src/components/ChatInput.vue

@@ -0,0 +1,649 @@
+<template>
+  <div :class="['chat-input', { 'message-variant': isMessageVariant }]">
+    <div
+      ref="containerRef"
+      :class="['input-container', { focused: isFocused }]"
+    >
+      <!-- 附件预览 -->
+      <div v-if="selectedImages.length > 0" class="attachment-preview">
+        <div class="preview-images">
+          <template v-for="(img, index) in selectedPreview" :key="`${img}-${index}`">
+            <div class="preview-item">
+              <img
+                :src="getImageUrl(img)"
+                class="preview-thumb"
+                @error="handleImageError"
+              />
+              <button
+                v-if="!isMessageVariant"
+                class="remove-btn"
+                :title="`移除图片 ${index + 1}`"
+                @click="removeAttachment(index)"
+              >
+                <X :size="10" />
+              </button>
+            </div>
+          </template>
+          <div v-if="selectedImages.length > 3" class="preview-more">
+            +{{ selectedImages.length - 3 }}
+          </div>
+        </div>
+      </div>
+
+      <!-- 输入框区域 -->
+      <div class="input-field-wrapper">
+        <textarea
+          ref="inputRef"
+          v-model="inputText"
+          :placeholder="placeholder"
+          rows="1"
+          class="input-field"
+          @keydown="handleKeydown"
+          @input="adjustTextareaHeight"
+          @focus="isFocused = true"
+        ></textarea>
+      </div>
+
+      <!-- 底部控制栏 -->
+      <div v-if="showToolbar" class="input-controls">
+        <!-- 左侧：模式和模型选择 -->
+        <div class="input-left">
+          <!-- 模式选择 -->
+          <div class="selector mode-selector" @click.stop="toggleModeMenu">
+            <component :is="currentModeIcon" :size="12" />
+            <span>{{ currentModeName }}</span>
+            <ChevronDown :size="10" class="chevron" />
+
+            <div v-if="modeMenuOpen" class="dropdown-menu" @click.stop>
+              <button
+                v-for="m in modes"
+                :key="m.value"
+                :class="['dropdown-item', { active: mode === m.value }]"
+                @click="selectMode(m.value)"
+              >
+                <component :is="m.icon" :size="14" />
+                <span>{{ m.label }}</span>
+                <Check v-if="mode === m.value" :size="14" class="check-icon" />
+              </button>
+            </div>
+          </div>
+
+          <!-- 模型选择 -->
+          <div class="selector model-selector" @click.stop="toggleModelMenu">
+            <span>{{ currentModelName }}</span>
+            <ChevronDown :size="10" class="chevron" />
+
+            <div v-if="modelMenuOpen" class="dropdown-menu" @click.stop>
+              <button
+                v-for="m in models"
+                :key="m.model"
+                :class="['dropdown-item', { active: model === m.model }]"
+                @click="selectModel(m)"
+              >
+                <span>{{ m.displayName }}</span>
+                <Check v-if="model === m.model" :size="14" class="check-icon" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧：功能按钮 -->
+        <div class="input-right">
+          <!-- @ 上下文 -->
+          <button
+            class="icon-btn"
+            title="提及上下文 (@)"
+            @click="$emit('at-context')"
+          >
+            <AtSign :size="14" />
+          </button>
+
+          <!-- 深度思考 -->
+          <button
+            :class="['toggle-btn', { active: thinkingEnabled }]"
+            title="深度思考"
+            @click="$emit('update:thinking', !thinkingEnabled)"
+          >
+            <Sparkles :size="14" />
+          </button>
+
+          <!-- 联网搜索 -->
+          <button
+            :class="['toggle-btn', { active: webSearchEnabled }]"
+            title="联网搜索"
+            @click="$emit('update:webSearch', !webSearchEnabled)"
+          >
+            <Globe :size="14" />
+          </button>
+
+          <!-- 上传图片 -->
+          <button
+            class="icon-btn"
+            title="上传图片"
+            @click="$emit('upload-image')"
+          >
+            <ImageIcon :size="14" />
+          </button>
+
+          <!-- 发送/停止按钮 -->
+          <button
+            v-if="inputText.trim() || isLoading"
+            :class="['send-btn', { loading: isLoading }]"
+            :title="isLoading ? '停止' : isMessageVariant ? '重新发送' : '发送'"
+            @click="handleSendOrCancel"
+          >
+            <Square v-if="isLoading" :size="14" />
+            <ArrowUp v-else :size="14" />
+          </button>
+          <button v-else class="icon-btn" title="语音输入">
+            <Mic :size="14" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted, watch, markRaw } from 'vue';
+import {
+  X,
+  ChevronDown,
+  Check,
+  Globe,
+  Sparkles,
+  ImageIcon,
+  Square,
+  ArrowUp,
+  Zap,
+  MessageCircle,
+  AtSign,
+  Mic,
+} from 'lucide-vue-next';
+import type { ChatMode, ModelConfig } from '../types';
+import { DEFAULT_MODELS } from '../types';
+
+const props = withDefaults(
+  defineProps<{
+    /** 变体模式：input-底部输入框，message-历史消息 */
+    variant?: 'input' | 'message';
+    /** 受控值（用于历史消息编辑） */
+    value?: string;
+    selectedImages?: string[];
+    isLoading?: boolean;
+    mode?: ChatMode;
+    model?: string;
+    models?: ModelConfig[];
+    webSearchEnabled?: boolean;
+    thinkingEnabled?: boolean;
+  }>(),
+  {
+    variant: 'input',
+    value: '',
+    selectedImages: () => [],
+    isLoading: false,
+    mode: 'agent',
+    model: '',
+    models: () => DEFAULT_MODELS,
+    webSearchEnabled: false,
+    thinkingEnabled: false,
+  }
+);
+
+const emit = defineEmits<{
+  send: [text: string];
+  'remove-image': [index: number];
+  cancel: [];
+  'upload-image': [];
+  '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);
+
+// 同步外部 value
+watch(
+  () => props.value,
+  (newVal) => {
+    inputText.value = newVal;
+  }
+);
+
+// 模式配置
+const modes = [
+  { value: 'agent' as const, label: 'Agent', icon: markRaw(Zap) },
+  { value: 'ask' as const, label: 'Ask', icon: markRaw(MessageCircle) },
+];
+
+// 菜单状态
+const modeMenuOpen = ref(false);
+const modelMenuOpen = ref(false);
+
+// 是否显示工具栏
+const showToolbar = computed(() => !isMessageVariant.value || isFocused.value);
+
+// 预览
+const selectedPreview = computed(() => props.selectedImages.slice(0, 3));
+
+// 占位符
+const placeholder = computed(() => {
+  if (props.selectedImages.length > 0) return '描述你想要的效果...';
+  if (props.mode === 'ask') return '有什么问题想问我？';
+  return '描述任务，@ 添加上下文';
+});
+
+// 当前模式
+const currentModeName = computed(() => {
+  const m = modes.find((item) => item.value === props.mode);
+  return m?.label || 'Agent';
+});
+
+const currentModeIcon = computed(() => {
+  const m = modes.find((item) => item.value === props.mode);
+  return m?.icon || Zap;
+});
+
+// 当前模型
+const currentModelName = computed(() => {
+  const m = props.models.find((item) => item.model === props.model);
+  return m?.displayName || 'Auto';
+});
+
+// 切换菜单
+function toggleModeMenu() {
+  modeMenuOpen.value = !modeMenuOpen.value;
+  modelMenuOpen.value = false;
+}
+
+function toggleModelMenu() {
+  modelMenuOpen.value = !modelMenuOpen.value;
+  modeMenuOpen.value = false;
+}
+
+// 选择
+function selectMode(value: ChatMode) {
+  emit('update:mode', value);
+  modeMenuOpen.value = false;
+}
+
+function selectModel(m: ModelConfig) {
+  emit('update:model', m.model);
+  modelMenuOpen.value = false;
+}
+
+// 图片相关
+function getImageUrl(path: string): string {
+  if (
+    path.startsWith('app://') ||
+    path.startsWith('file://') ||
+    path.startsWith('data:') ||
+    path.startsWith('http')
+  ) {
+    return path;
+  }
+  if (path.match(/^[A-Z]:\\/i)) {
+    return `app://file${encodeURIComponent(path.replace(/\\/g, '/'))}`;
+  }
+  return `app://file${encodeURIComponent(path)}`;
+}
+
+function handleImageError(event: Event) {
+  const img = event.target as HTMLImageElement;
+  img.style.display = 'none';
+}
+
+function removeAttachment(index: number) {
+  emit('remove-image', index);
+}
+
+// 自动调整高度
+function adjustTextareaHeight() {
+  if (inputRef.value) {
+    inputRef.value.style.height = 'auto';
+    const scrollHeight = inputRef.value.scrollHeight;
+    inputRef.value.style.height = `${Math.min(scrollHeight, 150)}px`;
+  }
+}
+
+// 发送或取消
+function handleSendOrCancel() {
+  if (props.isLoading) {
+    emit('cancel');
+    return;
+  }
+
+  const text = inputText.value.trim();
+  if (!text) return;
+
+  emit('send', text);
+
+  if (!isMessageVariant.value) {
+    inputText.value = '';
+    if (inputRef.value) {
+      inputRef.value.style.height = 'auto';
+    }
+    inputRef.value?.focus();
+  } else {
+    isFocused.value = false;
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Enter' && !event.shiftKey) {
+    event.preventDefault();
+    handleSendOrCancel();
+  } else {
+    setTimeout(adjustTextareaHeight, 0);
+  }
+}
+
+// 点击外部
+function handleClickOutside(event: MouseEvent) {
+  const target = event.target as HTMLElement;
+  if (!target.closest('.selector')) {
+    modeMenuOpen.value = false;
+    modelMenuOpen.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;
+  },
+  clear: () => {
+    inputText.value = '';
+  },
+});
+</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);
+}
+
+/* 附件预览 */
+.attachment-preview {
+  margin-bottom: 8px;
+}
+
+.preview-images {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.preview-item {
+  position: relative;
+}
+
+.preview-thumb {
+  width: 48px;
+  height: 48px;
+  object-fit: cover;
+  border-radius: 8px;
+  border: 1px solid var(--chat-border, #444);
+}
+
+.preview-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  background: var(--chat-muted, #3c3c3c);
+  border-radius: 8px;
+  color: var(--chat-text-muted, #888);
+  font-size: 12px;
+}
+
+.remove-btn {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--chat-bg, #1e1e1e);
+  border: 1px solid var(--chat-border, #444);
+  border-radius: 50%;
+  color: var(--chat-text-muted, #888);
+  cursor: pointer;
+  padding: 0;
+}
+
+.remove-btn:hover {
+  background: var(--chat-muted, #3c3c3c);
+  color: var(--chat-text, #ccc);
+}
+
+/* 输入框 */
+.input-field-wrapper {
+  margin-bottom: 8px;
+}
+
+.input-field {
+  width: 100%;
+  background: transparent;
+  border: none;
+  padding: 0;
+  color: var(--chat-text, #ccc);
+  font-size: 14px;
+  resize: none;
+  min-height: 24px;
+  max-height: 150px;
+  line-height: 1.5;
+  font-family: inherit;
+}
+
+.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;
+}
+
+/* 选择器 */
+.selector {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background: var(--chat-muted, #3c3c3c);
+  border: none;
+  border-radius: 6px;
+  font-size: 12px;
+  color: var(--chat-text-muted, #888);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.selector:hover {
+  background: var(--chat-muted-hover, #444);
+  color: var(--chat-text, #ccc);
+}
+
+.chevron {
+  color: var(--chat-text-muted, #666);
+}
+
+/* 下拉菜单 */
+.dropdown-menu {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 4px;
+  min-width: 160px;
+  background: var(--chat-dropdown-bg, #252526);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  z-index: 100;
+  padding: 4px;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  font-size: 13px;
+  color: var(--chat-text-muted, #999);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.dropdown-item:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--chat-text, #ccc);
+}
+
+.dropdown-item.active {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--chat-text, #fff);
+}
+
+.check-icon {
+  margin-left: auto;
+  color: var(--chat-text, #ccc);
+}
+
+/* 右侧按钮 */
+.input-right {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.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;
+}
+
+.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);
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.send-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: rgba(255, 255, 255, 0.9);
+  border: none;
+  border-radius: 6px;
+  color: #1e1e1e;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.send-btn:hover {
+  background: #fff;
+}
+
+.send-btn.loading {
+  background: var(--chat-destructive, #ef4444);
+}
+
+.send-btn.loading:hover {
+  background: var(--chat-destructive-hover, #dc2626);
+}
+</style>