@huyooo/ai-chat-frontend-vue 0.2.15 → 0.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huyooo/ai-chat-frontend-vue",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "description": "AI Chat Frontend - Vue components with adapter pattern",
   "type": "module",
   "main": "./dist/index.js",
@@ -16,8 +16,7 @@
     "./style.css": "./dist/style.css"
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "scripts": {
     "prebuild": "npm run clean",
@@ -31,8 +30,8 @@
     "vue": "^3.4.0"
   },
   "dependencies": {
-    "@huyooo/ai-chat-bridge-electron": "^0.2.15",
-    "@huyooo/ai-chat-shared": "^0.2.15",
+    "@huyooo/ai-chat-bridge-electron": "^0.2.16",
+    "@huyooo/ai-chat-shared": "^0.2.16",
     "@iconify/vue": "^4.1.2",
     "vscode-uri": "^3.1.0",
     "marked": "^12.0.0",

package/src/adapter.ts

@@ -1,72 +0,0 @@
-/**
- * Chat Adapter 辅助类型和工具
- * 核心 ChatAdapter 接口从 bridge-electron 导入
- */
-
-import type {
-  ChatAdapter as ChatAdapterType,
-  ChatMode,
-  ThinkingMode,
-} from '@huyooo/ai-chat-bridge-electron/renderer'
-
-/**
- * 重新导出 ChatAdapter 类型供内部组件使用
- */
-export type ChatAdapter = ChatAdapterType
-
-/** 思考数据 */
-export interface ThinkingData {
-  content: string
-  isComplete: boolean
-}
-
-/** 工具调用数据 */
-export interface ToolCallData {
-  name: string
-  args: Record<string, unknown>
-}
-
-/** 工具结果数据 */
-export interface ToolResultData {
-  name: string
-  result: string
-}
-
-/** 图片数据 */
-export interface ImageData {
-  base64: string
-  mimeType: string
-}
-
-/** 发送消息选项 */
-export interface SendMessageOptions {
-  mode: ChatMode
-  model: string
-  enableWebSearch: boolean
-  /** 深度思考开关（每个 provider 内部使用最优参数） */
-  thinkingMode: ThinkingMode
-}
-
-/** 创建会话选项 */
-export interface CreateSessionOptions {
-  title: string
-  model: string
-  mode: ChatMode
-}
-
-/** 更新会话选项 */
-export interface UpdateSessionOptions {
-  title?: string
-  model?: string
-  mode?: ChatMode
-}
-
-/** 保存消息选项 */
-export interface SaveMessageOptions {
-  sessionId: string
-  role: 'user' | 'assistant'
-  content: string
-  /** 执行步骤列表 JSON */
-  steps?: string
-  operationIds?: string
-}

package/src/components/ChatPanel.vue

@@ -1,591 +0,0 @@
-<template>
-  <div class="chat-panel">
-    <!-- 确认弹窗 -->
-    <ConfirmDialog
-      v-model:visible="confirmDialog.visible"
-      :title="confirmDialog.title"
-      :message="confirmDialog.message"
-      :type="confirmDialog.type"
-      :confirm-text="confirmDialog.confirmText"
-      @confirm="confirmDialog.onConfirm"
-    />
-
-    <!-- Toast 消息 -->
-    <Toast v-model:visible="toast.visible" :message="toast.message" :type="toast.type" />
-
-    <!-- 工具批准现在内嵌在 ToolCallPart 中，不再需要全局对话框 -->
-
-    <!-- 设置面板 -->
-    <SettingsPanel
-      v-model:visible="settingsPanelVisible"
-      v-model:config="autoRunConfig"
-      :all-tools="allTools"
-      :enabled-tools="enabledTools"
-      @save="handleSaveSettings"
-      @update:enabled-tools="handleUpdateEnabledTools"
-    />
-
-    <!-- 顶部标题栏 -->
-    <ChatHeader
-      v-if="!hideHeader"
-      :sessions="sessions"
-      :current-session-id="currentSessionId"
-      :show-close="!!onClose"
-      @new-session="handleNewSession"
-      @switch-session="switchSession"
-      @delete-session="deleteSession"
-      @hide-session="hideSession"
-      @close="handleClose"
-      @clear-all="handleClearAll"
-      @close-others="handleCloseOthers"
-      @export="handleExport"
-      @copy-id="handleCopyId"
-      @feedback="handleFeedback"
-      @settings="handleSettings"
-    />
-
-    <!-- 消息列表容器 -->
-    <div class="messages-wrapper">
-      <div ref="messagesRef" class="messages-container chat-scrollbar" @scroll="handleScroll">
-        <WelcomeMessage v-if="messages.length === 0" :config="props.welcomeConfig" @quick-action="handleQuickAction" />
-        <template v-else>
-          <MessageBubble
-            v-for="(msg, index) in messages"
-            :key="msg.id"
-            :role="msg.role"
-            :parts="msg.parts"
-            :model="msg.model"
-            :mode="msg.mode"
-            :images="msg.images"
-            :copied="msg.copied"
-            :loading="msg.loading"
-            :timestamp="msg.timestamp"
-            :steps-expanded-type="stepsExpandedType"
-            :adapter="props.adapter"
-            :auto-run-config="autoRunConfig"
-            :on-save-config="saveAutoRunConfig"
-            :on-cancel-tool-call="handleCancelToolCall"
-            @copy="copyMessage(msg.id)"
-            @regenerate="regenerateMessage(index)"
-            @send="(text) => handleResend(index, text)"
-          />
-        </template>
-      </div>
-      
-      <!-- 滚动到底部按钮 -->
-      <Transition name="fade">
-        <button
-          v-if="!shouldAutoScroll && messages.length > 0"
-          class="scroll-to-bottom-btn"
-          @click="scrollToBottom(true)"
-          title="滚动到底部"
-        >
-          <Icon icon="lucide:arrow-down" width="16" />
-        </button>
-      </Transition>
-    </div>
-
-    <!-- 输入区域 -->
-    <ChatInput
-      ref="chatInputRef"
-      :adapter="props.adapter"
-      :is-loading="isLoading"
-      :mode="mode"
-      :model="model"
-      :models="models"
-      :web-search-enabled="webSearch"
-      :thinking-enabled="thinking"
-      @send="handleSend"
-      @cancel="cancelRequest"
-      @at-context="handleAtContext"
-      @update:mode="setMode"
-      @update:model="setModel"
-      @update:webSearch="setWebSearch"
-      @update:thinking="setThinking"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, nextTick, onMounted, provide, toRef, type Component } from 'vue';
-import { useChat } from '../composables/useChat';
-import type { ChatAdapter, ImageData } from '../adapter';
-import type { ModelOption, ChatMode } from '../types';
-import type { AutoRunConfig } from '@huyooo/ai-chat-bridge-electron/renderer';
-import { Icon } from '@iconify/vue';
-import ChatHeader from './header/ChatHeader.vue';
-import WelcomeMessage from './message/WelcomeMessage.vue';
-import MessageBubble from './message/MessageBubble.vue';
-import ChatInput from './input/ChatInput.vue';
-import ConfirmDialog from './common/ConfirmDialog.vue';
-import Toast from './common/Toast.vue';
-// ToolApprovalDialog 已移除，工具批准现在内嵌在 ToolCallPart 中
-import SettingsPanel from './common/SettingsPanel.vue';
-import type { ToolCompleteEvent } from '../composables/useChat';
-import type { WelcomeConfig } from './message/welcome-types';
-
-interface Props {
-  /** Adapter 实例 */
-  adapter: ChatAdapter;
-  /** 默认模型 */
-  defaultModel?: string;
-  /** 默认模式 */
-  defaultMode?: ChatMode;
-  /** 可用模型列表 */
-  models?: ModelOption[];
-  /** 隐藏标题栏 */
-  hideHeader?: boolean;
-  /** 关闭回调（有此属性时显示关闭按钮） */
-  onClose?: () => void;
-  /** 自定义类名 */
-  className?: string;
-  /** 欢迎页配置 */
-  welcomeConfig?: Partial<WelcomeConfig>;
-  /** 自定义 Part 渲染器 - 根据 part.type 选择渲染组件（如 weather, stock 等） */
-  partRenderers?: Record<string, Component>;
-  /** 
-   * 执行步骤折叠模式
-   * - 'open': 始终展开
-   * - 'close': 始终折叠
-   * - 'auto': 执行时展开，完成后折叠
-   */
-  stepsExpandedType?: 'open' | 'close' | 'auto';
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  defaultModel: 'anthropic/claude-opus-4.5',
-  defaultMode: 'agent',
-  models: () => [],
-  hideHeader: false,
-  onClose: undefined,
-  className: '',
-  welcomeConfig: undefined,
-  partRenderers: () => ({}),
-  stepsExpandedType: 'auto',
-});
-
-const emit = defineEmits<{
-  close: [];
-  /** 工具执行完成事件 */
-  'tool-complete': [event: ToolCompleteEvent];
-}>();
-
-// 使用 useChat composable
-const chat = useChat({
-  adapter: props.adapter,
-  defaultModel: props.defaultModel,
-  defaultMode: props.defaultMode,
-  onToolComplete: (event) => emit('tool-complete', event),
-});
-
-// 解构状态
-const {
-  sessions,
-  currentSessionId,
-  messages,
-  isLoading,
-  mode,
-  model,
-  webSearch,
-  thinking,
-  // 工具管理
-  allTools,
-  enabledTools,
-  loadSessions,
-  switchSession,
-  createNewSession,
-  deleteSession,
-  hideSession,
-  clearAllSessions,
-  hideOtherSessions,
-  exportCurrentSession,
-  sendMessage,
-  cancelRequest,
-  copyMessage,
-  regenerateMessage,
-  resendFromIndex,
-  setMode,
-  setModel,
-  setWebSearch,
-  setThinking,
-  setWorkingDirectory,
-  autoRunConfig,
-  saveAutoRunConfig,
-  saveEnabledTools,
-} = chat;
-
-function handleCancelToolCall() {
-  cancelRequest()
-}
-
-// 消息容器引用
-const messagesRef = ref<HTMLDivElement | null>(null);
-
-// 是否应该自动滚动（用户在底部附近时才自动滚动）
-const shouldAutoScroll = ref(true);
-// 距离底部多少像素内算"在底部"
-const SCROLL_THRESHOLD = 25;
-// 上次滚动位置（用于检测滚动方向）
-let lastScrollTop = 0;
-// 是否正在程序化滚动（用于区分用户手动滚动）
-let isProgrammaticScroll = false;
-
-// ChatInput 引用
-const chatInputRef = ref<InstanceType<typeof ChatInput> | null>(null);
-
-// 设置面板状态
-const settingsPanelVisible = ref(false);
-
-// 确认弹窗状态
-const confirmDialog = ref({
-  visible: false,
-  title: '确认',
-  message: '',
-  type: 'warning' as 'info' | 'warning' | 'danger',
-  confirmText: '确定',
-  onConfirm: () => {},
-});
-
-// Toast 消息状态
-const toast = ref({
-  visible: false,
-  message: '',
-  type: 'info' as 'info' | 'success' | 'warning' | 'error',
-});
-
-/** 显示 Toast 消息 */
-function showToast(message: string, type: 'info' | 'success' | 'warning' | 'error' = 'info') {
-  toast.value = { visible: true, message, type };
-}
-
-/** 显示确认弹窗 */
-function showConfirm(options: {
-  title?: string;
-  message: string;
-  type?: 'info' | 'warning' | 'danger';
-  confirmText?: string;
-  onConfirm: () => void;
-}) {
-  confirmDialog.value = {
-    visible: true,
-    title: options.title || '确认',
-    message: options.message,
-    type: options.type || 'warning',
-    confirmText: options.confirmText || '确定',
-    onConfirm: options.onConfirm,
-  };
-}
-
-// 可用模型（如果没有传入，从后端获取）
-const models = ref<ModelOption[]>(props.models || []);
-
-// 从后端获取模型列表
-onMounted(async () => {
-  try {
-    models.value = await props.adapter.getModels();
-  } catch (err) {
-    console.warn('获取模型列表失败:', err);
-  }
-});
-
-// 注意：cwd 已解耦，不再通过 prop 传递
-// FileBrowser 会直接通过 adapter.setCwd() 同步到 Agent
-// getCwdTool 会自动从 Agent 的 context.cwd 读取最新值
-// 如果需要 cwd 给子组件使用，可以通过 getCwdTool 获取
-
-// Provide 全局 input 状态给子组件（让 message 中的 input 也能修改）
-provide('chatInputState', {
-  mode,
-  model,
-  webSearch,
-  thinking,
-  models,
-  isLoading,
-  setMode,
-  setModel,
-  setWebSearch,
-  setThinking,
-});
-
-// Provide 自定义 Part 渲染器（用于 PartsRenderer）
-provide('partRenderers', props.partRenderers);
-
-// 初始化
-onMounted(() => {
-  loadSessions();
-});
-
-// 注意：cwd 已解耦，不再需要监听 prop 变化
-
-// 检查是否在底部附近
-function isNearBottom(): boolean {
-  if (!messagesRef.value) return true;
-  const { scrollTop, scrollHeight, clientHeight } = messagesRef.value;
-  return scrollHeight - scrollTop - clientHeight < SCROLL_THRESHOLD;
-}
-
-// 处理滚动事件（优化：检测滚动方向，区分程序化滚动）
-function handleScroll() {
-  if (!messagesRef.value) return;
-  
-  // 忽略程序化滚动触发的事件
-  if (isProgrammaticScroll) return;
-  
-  const { scrollTop } = messagesRef.value;
-  const isScrollingUp = scrollTop < lastScrollTop;
-  lastScrollTop = scrollTop;
-  
-  // 用户向上滚动时，立即停止自动滚动
-  if (isScrollingUp) {
-    shouldAutoScroll.value = false;
-    return;
-  }
-  
-  // 用户向下滚动到底部附近时，恢复自动滚动
-  if (isNearBottom()) {
-    shouldAutoScroll.value = true;
-  }
-}
-
-// 滚动到底部
-async function scrollToBottom(force = false) {
-  await nextTick();
-  if (messagesRef.value && (force || shouldAutoScroll.value)) {
-    // 标记为程序化滚动，避免触发 handleScroll 逻辑
-    isProgrammaticScroll = true;
-    messagesRef.value.scrollTop = messagesRef.value.scrollHeight;
-    lastScrollTop = messagesRef.value.scrollTop;
-    // 强制滚动时才恢复自动滚动
-    if (force) {
-      shouldAutoScroll.value = true;
-    }
-    // 延迟重置标志，确保 scroll 事件已处理
-    requestAnimationFrame(() => {
-      isProgrammaticScroll = false;
-    });
-  }
-}
-
-// 消息变化时滚动（只在用户在底部时）
-watch(
-  messages,
-  () => {
-    scrollToBottom();
-  },
-  { flush: 'post', deep: true }
-);
-
-// 发送新消息时强制滚动到底部
-watch(isLoading, (loading, prevLoading) => {
-  // 开始加载时（发送消息时）强制滚动到底部
-  if (loading && !prevLoading) {
-    scrollToBottom(true);
-  }
-});
-
-// 发送消息
-function handleSend(text: string, images?: ImageData[]) {
-  // 将 ImageData[] 转换为 string[] (data URL)
-  const imageUrls = images?.map(img => `data:${img.mimeType};base64,${img.base64}`)
-  sendMessage(text, imageUrls);
-}
-
-// 快捷操作
-function handleQuickAction(text: string) {
-  sendMessage(text);
-}
-
-// 重新发送（编辑后）
-function handleResend(index: number, text: string) {
-  resendFromIndex(index, text);
-}
-
-// @ 上下文
-function handleAtContext() {
-  // TODO: 实现 @ 上下文
-  console.log('@ 上下文');
-}
-
-// 创建新会话（重置输入框状态）
-async function handleNewSession() {
-  await createNewSession();
-  // 重置输入框状态
-  nextTick(() => {
-    chatInputRef.value?.clear();
-  });
-}
-
-// 关闭
-function handleClose() {
-  if (props.onClose) {
-    props.onClose();
-  }
-  emit('close');
-}
-
-// 清空所有对话
-function handleClearAll() {
-  showConfirm({
-    title: '清空所有对话',
-    message: '确定要清空所有对话吗？此操作不可恢复。',
-    type: 'danger',
-    confirmText: '清空',
-    onConfirm: () => clearAllSessions(),
-  });
-}
-
-// 关闭其他对话
-async function handleCloseOthers() {
-  await hideOtherSessions()
-}
-
-// 导出对话
-function handleExport() {
-  const data = exportCurrentSession()
-  if (!data) {
-    showToast('当前会话没有内容可导出', 'warning')
-    return
-  }
-
-  // 创建下载链接
-  const blob = new Blob([data], { type: 'application/json' })
-  const url = URL.createObjectURL(blob)
-  const a = document.createElement('a')
-  const session = sessions.value.find((s) => s.id === currentSessionId.value)
-  const filename = `chat-${session?.title || 'export'}-${new Date().toISOString().slice(0, 10)}.json`
-  a.href = url
-  a.download = filename
-  document.body.appendChild(a)
-  a.click()
-  document.body.removeChild(a)
-  URL.revokeObjectURL(url)
-}
-
-// 复制会话 ID
-async function handleCopyId() {
-  if (!currentSessionId.value) return
-  try {
-    await navigator.clipboard.writeText(currentSessionId.value)
-    showToast('已复制会话 ID', 'success')
-  } catch (error) {
-    console.error('复制失败:', error)
-  }
-}
-
-// 反馈
-function handleFeedback() {
-  // TODO: 实现反馈
-  console.log('反馈');
-}
-
-// 设置
-function handleSettings() {
-  settingsPanelVisible.value = true;
-}
-
-// 保存设置（静默保存，不显示提示）
-async function handleSaveSettings(config: AutoRunConfig) {
-  try {
-    await saveAutoRunConfig(config);
-  } catch (error) {
-    console.error('保存设置失败:', error);
-    showToast('保存设置失败', 'error');
-  }
-}
-
-function handleUpdateEnabledTools(tools: string[] | undefined) {
-  saveEnabledTools(tools);
-}
-
-// 模式变更现在在 ToolCallPart 中处理，不再需要此函数
-
-// 暴露给外部的方法
-defineExpose({
-  /** 设置输入框内容 */
-  setInputText: (text: string) => {
-    chatInputRef.value?.setText(text);
-  },
-  /** 在光标位置插入文本（用于 @ 上下文） */
-  insertInputText: (text: string) => {
-    chatInputRef.value?.insertText?.(text);
-  },
-  /** 聚焦输入框 */
-  focusInput: () => {
-    chatInputRef.value?.focus();
-  },
-  /** 发送消息 */
-  sendMessage: (text: string) => {
-    sendMessage(text);
-  },
-  /** 当前工作目录 */
-    setCwd: setWorkingDirectory,
-});
-</script>
-
-<style scoped>
-.chat-panel {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  background: var(--chat-bg, #1e1e1e);
-  overflow: hidden;
-}
-
-.messages-wrapper {
-  flex: 1;
-  min-height: 0;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-
-.messages-container {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 12px;
-  scroll-behavior: smooth;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-/* 滚动到底部按钮 */
-.scroll-to-bottom-btn {
-  position: absolute;
-  bottom: 16px;
-  right: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: var(--chat-fab-bg, var(--chat-muted));
-  border: 1px solid var(--chat-border);
-  color: var(--chat-text-muted);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  box-shadow: var(--chat-fab-shadow, 0 2px 8px rgba(0, 0, 0, 0.3));
-  z-index: 10;
-  pointer-events: auto;
-}
-
-.scroll-to-bottom-btn:hover {
-  background: var(--chat-fab-bg-hover, var(--chat-muted-hover));
-  color: var(--chat-text);
-  transform: scale(1.1);
-}
-
-/* 淡入淡出动画 */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>