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

package/src/components/ChatInput.vue

@@ -1,649 +0,0 @@
-<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>