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

package/src/components/ChatPanel.vue

@@ -1,5 +1,27 @@
 <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"
+      @save="handleSaveSettings"
+    />
+
     <!-- 顶部标题栏 -->
     <ChatHeader
       v-if="!hideHeader"
@@ -9,6 +31,7 @@
       @new-session="createNewSession"
       @switch-session="switchSession"
       @delete-session="deleteSession"
+      @hide-session="hideSession"
       @close="handleClose"
       @clear-all="handleClearAll"
       @close-others="handleCloseOthers"
@@ -18,36 +41,49 @@
       @settings="handleSettings"
     />
 
-    <!-- 消息列表 -->
-    <div ref="messagesRef" class="messages-container">
-      <WelcomeMessage
-        v-if="messages.length === 0"
-        @quick-action="handleQuickAction"
-      />
-      <template v-else>
-        <MessageBubble
-          v-for="(msg, index) in messages"
-          :key="msg.id"
-          :role="msg.role"
-          :content="msg.content"
-          :images="msg.images"
-          :thinking="msg.thinking"
-          :thinking-complete="msg.thinkingComplete"
-          :search-results="msg.searchResults"
-          :searching="msg.searching"
-          :tool-calls="msg.toolCalls"
-          :copied="msg.copied"
-          :loading="msg.loading"
-          @copy="copyMessage(msg.id)"
-          @regenerate="regenerateMessage(index)"
-          @send="(text) => handleResend(index, text)"
-        />
-      </template>
+    <!-- 消息列表容器 -->
+    <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"
+            @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
-      :selected-images="selectedImages"
+      ref="chatInputRef"
       :is-loading="isLoading"
       :mode="mode"
       :model="model"
@@ -56,8 +92,6 @@
       :thinking-enabled="thinking"
       @send="handleSend"
       @cancel="cancelRequest"
-      @remove-image="handleRemoveImage"
-      @upload-image="handleUploadImage"
       @at-context="handleAtContext"
       @update:mode="setMode"
       @update:model="setModel"
@@ -68,48 +102,67 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, nextTick, onMounted, provide, toRef } from 'vue';
+import { ref, computed, watch, nextTick, onMounted, provide, toRef, type Component } from 'vue';
 import { useChat } from '../composables/useChat';
 import type { ChatAdapter } from '../adapter';
-import type { ModelConfig, ChatMode } from '../types';
-import { DEFAULT_MODELS } from '../types';
-import ChatHeader from './chat/ui/ChatHeader.vue';
-import WelcomeMessage from './chat/ui/WelcomeMessage.vue';
-import MessageBubble from './chat/messages/MessageBubble.vue';
-import ChatInput from './ChatInput.vue';
+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;
-  /** 工作目录 */
-  workingDir?: string;
+  adapter: ChatAdapter;
   /** 默认模型 */
   defaultModel?: string;
   /** 默认模式 */
   defaultMode?: ChatMode;
   /** 可用模型列表 */
-  models?: ModelConfig[];
+  models?: ModelOption[];
   /** 隐藏标题栏 */
   hideHeader?: boolean;
   /** 关闭回调（有此属性时显示关闭按钮） */
   onClose?: () => void;
   /** 自定义类名 */
   className?: string;
+  /** 欢迎页配置 */
+  welcomeConfig?: Partial<WelcomeConfig>;
+  /** 自定义工具结果渲染器 - 根据工具名称选择渲染组件 */
+  toolRenderers?: Record<string, Component>;
+  /** 
+   * 执行步骤折叠模式
+   * - 'open': 始终展开
+   * - 'close': 始终折叠
+   * - 'auto': 执行时展开，完成后折叠
+   */
+  stepsExpandedType?: 'open' | 'close' | 'auto';
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  adapter: undefined,
-  workingDir: undefined,
   defaultModel: 'anthropic/claude-opus-4.5',
   defaultMode: 'agent',
-  models: () => DEFAULT_MODELS,
+  models: () => [],
   hideHeader: false,
   onClose: undefined,
   className: '',
+  welcomeConfig: undefined,
+  toolRenderers: () => ({}),
+  stepsExpandedType: 'auto',
 });
 
 const emit = defineEmits<{
   close: [];
+  /** 工具执行完成事件 */
+  'tool-complete': [event: ToolCompleteEvent];
 }>();
 
 // 使用 useChat composable
@@ -117,6 +170,7 @@ const chat = useChat({
   adapter: props.adapter,
   defaultModel: props.defaultModel,
   defaultMode: props.defaultMode,
+  onToolComplete: (event) => emit('tool-complete', event),
 });
 
 // 解构状态
@@ -133,62 +187,160 @@ const {
   switchSession,
   createNewSession,
   deleteSession,
+  hideSession,
+  clearAllSessions,
+  hideOtherSessions,
+  exportCurrentSession,
   sendMessage,
   cancelRequest,
   copyMessage,
   regenerateMessage,
+  resendFromIndex,
   setMode,
   setModel,
   setWebSearch,
   setThinking,
   setWorkingDirectory,
+  autoRunConfig,
+  saveAutoRunConfig,
 } = chat;
 
-// 选中的图片
-const selectedImages = ref<string[]>([]);
-
 // 消息容器引用
 const messagesRef = ref<HTMLDivElement | null>(null);
 
-// 可用模型
-const models = toRef(props, 'models');
+// 是否应该自动滚动（用户在底部附近时才自动滚动）
+const shouldAutoScroll = ref(true);
+// 距离底部多少像素内算"在底部"
+const SCROLL_THRESHOLD = 100;
+
+// 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);
+  }
+});
 
-// Provide adapter 给子组件使用
-provide('chatAdapter', props.adapter);
+// 注意：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 自定义工具渲染器（用于 ToolResultPart 组件）
+provide('toolRenderers', props.toolRenderers);
 
 // 初始化
 onMounted(() => {
   loadSessions();
 });
 
-// 工作目录变化时更新
-watch(
-  () => props.workingDir,
-  (dir) => {
-    if (dir) {
-      setWorkingDirectory(dir);
-    }
-  },
-  { immediate: true }
-);
+// 注意：cwd 已解耦，不再需要监听 prop 变化
+
+// 检查是否在底部附近
+function isNearBottom(): boolean {
+  if (!messagesRef.value) return true;
+  const { scrollTop, scrollHeight, clientHeight } = messagesRef.value;
+  return scrollHeight - scrollTop - clientHeight < SCROLL_THRESHOLD;
+}
+
+// 处理滚动事件
+function handleScroll() {
+  shouldAutoScroll.value = isNearBottom();
+}
 
 // 滚动到底部
-async function scrollToBottom() {
+async function scrollToBottom(force = false) {
   await nextTick();
-  if (messagesRef.value) {
+  if (messagesRef.value && (force || shouldAutoScroll.value)) {
     messagesRef.value.scrollTop = messagesRef.value.scrollHeight;
+    shouldAutoScroll.value = true;
   }
 }
 
-// 消息变化时滚动
-watch(messages, () => {
-  scrollToBottom();
-}, { flush: 'post' });
+// 消息变化时滚动（只在用户在底部时）
+watch(
+  messages,
+  () => {
+    scrollToBottom();
+  },
+  { flush: 'post', deep: true }
+);
+
+// 发送新消息时强制滚动到底部
+watch(isLoading, (loading, prevLoading) => {
+  // 开始加载时（发送消息时）强制滚动到底部
+  if (loading && !prevLoading) {
+    scrollToBottom(true);
+  }
+});
 
 // 发送消息
 function handleSend(text: string) {
-  sendMessage(text, selectedImages.value.length > 0 ? selectedImages.value : undefined);
-  selectedImages.value = [];
+  sendMessage(text);
 }
 
 // 快捷操作
@@ -198,22 +350,7 @@ function handleQuickAction(text: string) {
 
 // 重新发送（编辑后）
 function handleResend(index: number, text: string) {
-  // 删除当前消息及后续消息，然后重新发送
-  messages.value = messages.value.slice(0, index);
-  sendMessage(text);
-}
-
-// 移除图片
-function handleRemoveImage(index: number) {
-  if (index >= 0 && index < selectedImages.value.length) {
-    selectedImages.value.splice(index, 1);
-  }
-}
-
-// 上传图片
-function handleUploadImage() {
-  // TODO: 实现图片上传
-  console.log('上传图片');
+  resendFromIndex(index, text);
 }
 
 // @ 上下文
@@ -232,27 +369,50 @@ function handleClose() {
 
 // 清空所有对话
 function handleClearAll() {
-  // TODO: 实现清空所有对话
-  console.log('清空所有对话');
+  showConfirm({
+    title: '清空所有对话',
+    message: '确定要清空所有对话吗？此操作不可恢复。',
+    type: 'danger',
+    confirmText: '清空',
+    onConfirm: () => clearAllSessions(),
+  });
 }
 
 // 关闭其他对话
-function handleCloseOthers() {
-  // TODO: 实现关闭其他对话
-  console.log('关闭其他对话');
+async function handleCloseOthers() {
+  await hideOtherSessions()
 }
 
 // 导出对话
 function handleExport() {
-  // TODO: 实现导出对话
-  console.log('导出对话');
+  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
-function handleCopyId() {
-  if (currentSessionId.value) {
-    navigator.clipboard.writeText(currentSessionId.value);
-    console.log('已复制请求 ID:', currentSessionId.value);
+// 复制会话 ID
+async function handleCopyId() {
+  if (!currentSessionId.value) return
+  try {
+    await navigator.clipboard.writeText(currentSessionId.value)
+    showToast('已复制会话 ID', 'success')
+  } catch (error) {
+    console.error('复制失败:', error)
   }
 }
 
@@ -264,23 +424,62 @@ function handleFeedback() {
 
 // 设置
 function handleSettings() {
-  // TODO: 实现设置
-  console.log('Agent 设置');
+  settingsPanelVisible.value = true;
 }
+
+// 保存设置（静默保存，不显示提示）
+async function handleSaveSettings(config: AutoRunConfig) {
+  try {
+    await saveAutoRunConfig(config);
+  } catch (error) {
+    console.error('保存设置失败:', error);
+    showToast('保存设置失败', 'error');
+  }
+}
+
+// 模式变更现在在 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: 420px;
+  width: 100%;
   height: 100%;
   background: var(--chat-bg, #1e1e1e);
-  border-left: 1px solid var(--chat-border, #333);
-  flex-shrink: 0;
   overflow: hidden;
 }
 
+.messages-wrapper {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
 .messages-container {
   flex: 1;
   min-height: 0;
@@ -289,21 +488,41 @@ function handleSettings() {
   scroll-behavior: smooth;
 }
 
-/* 滚动条样式 */
-.messages-container::-webkit-scrollbar {
-  width: 6px;
+/* 滚动到底部按钮 */
+.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-bubble-bg, #2d2d2d);
+  border: 1px solid var(--chat-border, #3d3d3d);
+  color: var(--chat-text-secondary, #888);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  z-index: 10;
+  pointer-events: auto;
 }
 
-.messages-container::-webkit-scrollbar-track {
-  background: transparent;
+.scroll-to-bottom-btn:hover {
+  background: var(--chat-bubble-bg-hover, #3a3a3a);
+  color: var(--chat-text, #e0e0e0);
+  transform: scale(1.1);
 }
 
-.messages-container::-webkit-scrollbar-thumb {
-  background: var(--chat-scrollbar, rgba(255, 255, 255, 0.2));
-  border-radius: 3px;
+/* 淡入淡出动画 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
 }
 
-.messages-container::-webkit-scrollbar-thumb:hover {
-  background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
 }
 </style>