@huyooo/ai-chat-frontend-vue 0.1.2

package/src/components/ChatPanel.vue

@@ -0,0 +1,309 @@
+<template>
+  <div class="chat-panel">
+    <!-- 顶部标题栏 -->
+    <ChatHeader
+      v-if="!hideHeader"
+      :sessions="sessions"
+      :current-session-id="currentSessionId"
+      :show-close="!!onClose"
+      @new-session="createNewSession"
+      @switch-session="switchSession"
+      @delete-session="deleteSession"
+      @close="handleClose"
+      @clear-all="handleClearAll"
+      @close-others="handleCloseOthers"
+      @export="handleExport"
+      @copy-id="handleCopyId"
+      @feedback="handleFeedback"
+      @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>
+
+    <!-- 输入区域 -->
+    <ChatInput
+      :selected-images="selectedImages"
+      :is-loading="isLoading"
+      :mode="mode"
+      :model="model"
+      :models="models"
+      :web-search-enabled="webSearch"
+      :thinking-enabled="thinking"
+      @send="handleSend"
+      @cancel="cancelRequest"
+      @remove-image="handleRemoveImage"
+      @upload-image="handleUploadImage"
+      @at-context="handleAtContext"
+      @update:mode="setMode"
+      @update:model="setModel"
+      @update:webSearch="setWebSearch"
+      @update:thinking="setThinking"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick, onMounted, provide, toRef } 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';
+
+interface Props {
+  /** Adapter 实例 */
+  adapter?: ChatAdapter;
+  /** 工作目录 */
+  workingDir?: string;
+  /** 默认模型 */
+  defaultModel?: string;
+  /** 默认模式 */
+  defaultMode?: ChatMode;
+  /** 可用模型列表 */
+  models?: ModelConfig[];
+  /** 隐藏标题栏 */
+  hideHeader?: boolean;
+  /** 关闭回调（有此属性时显示关闭按钮） */
+  onClose?: () => void;
+  /** 自定义类名 */
+  className?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  adapter: undefined,
+  workingDir: undefined,
+  defaultModel: 'anthropic/claude-opus-4.5',
+  defaultMode: 'agent',
+  models: () => DEFAULT_MODELS,
+  hideHeader: false,
+  onClose: undefined,
+  className: '',
+});
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+// 使用 useChat composable
+const chat = useChat({
+  adapter: props.adapter,
+  defaultModel: props.defaultModel,
+  defaultMode: props.defaultMode,
+});
+
+// 解构状态
+const {
+  sessions,
+  currentSessionId,
+  messages,
+  isLoading,
+  mode,
+  model,
+  webSearch,
+  thinking,
+  loadSessions,
+  switchSession,
+  createNewSession,
+  deleteSession,
+  sendMessage,
+  cancelRequest,
+  copyMessage,
+  regenerateMessage,
+  setMode,
+  setModel,
+  setWebSearch,
+  setThinking,
+  setWorkingDirectory,
+} = chat;
+
+// 选中的图片
+const selectedImages = ref<string[]>([]);
+
+// 消息容器引用
+const messagesRef = ref<HTMLDivElement | null>(null);
+
+// 可用模型
+const models = toRef(props, 'models');
+
+// Provide adapter 给子组件使用
+provide('chatAdapter', props.adapter);
+
+// 初始化
+onMounted(() => {
+  loadSessions();
+});
+
+// 工作目录变化时更新
+watch(
+  () => props.workingDir,
+  (dir) => {
+    if (dir) {
+      setWorkingDirectory(dir);
+    }
+  },
+  { immediate: true }
+);
+
+// 滚动到底部
+async function scrollToBottom() {
+  await nextTick();
+  if (messagesRef.value) {
+    messagesRef.value.scrollTop = messagesRef.value.scrollHeight;
+  }
+}
+
+// 消息变化时滚动
+watch(messages, () => {
+  scrollToBottom();
+}, { flush: 'post' });
+
+// 发送消息
+function handleSend(text: string) {
+  sendMessage(text, selectedImages.value.length > 0 ? selectedImages.value : undefined);
+  selectedImages.value = [];
+}
+
+// 快捷操作
+function handleQuickAction(text: string) {
+  sendMessage(text);
+}
+
+// 重新发送（编辑后）
+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('上传图片');
+}
+
+// @ 上下文
+function handleAtContext() {
+  // TODO: 实现 @ 上下文
+  console.log('@ 上下文');
+}
+
+// 关闭
+function handleClose() {
+  if (props.onClose) {
+    props.onClose();
+  }
+  emit('close');
+}
+
+// 清空所有对话
+function handleClearAll() {
+  // TODO: 实现清空所有对话
+  console.log('清空所有对话');
+}
+
+// 关闭其他对话
+function handleCloseOthers() {
+  // TODO: 实现关闭其他对话
+  console.log('关闭其他对话');
+}
+
+// 导出对话
+function handleExport() {
+  // TODO: 实现导出对话
+  console.log('导出对话');
+}
+
+// 复制请求 ID
+function handleCopyId() {
+  if (currentSessionId.value) {
+    navigator.clipboard.writeText(currentSessionId.value);
+    console.log('已复制请求 ID:', currentSessionId.value);
+  }
+}
+
+// 反馈
+function handleFeedback() {
+  // TODO: 实现反馈
+  console.log('反馈');
+}
+
+// 设置
+function handleSettings() {
+  // TODO: 实现设置
+  console.log('Agent 设置');
+}
+</script>
+
+<style scoped>
+.chat-panel {
+  display: flex;
+  flex-direction: column;
+  width: 420px;
+  height: 100%;
+  background: var(--chat-bg, #1e1e1e);
+  border-left: 1px solid var(--chat-border, #333);
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.messages-container {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 12px;
+  scroll-behavior: smooth;
+}
+
+/* 滚动条样式 */
+.messages-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.messages-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.messages-container::-webkit-scrollbar-thumb {
+  background: var(--chat-scrollbar, rgba(255, 255, 255, 0.2));
+  border-radius: 3px;
+}
+
+.messages-container::-webkit-scrollbar-thumb:hover {
+  background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
+}
+</style>

package/src/components/chat/SearchResultBlock.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="search-block">
+    <div class="search-header" @click="expanded = !expanded">
+      <div class="search-icon">
+        <Loader2 v-if="searching" :size="14" class="spinning" />
+        <Globe v-else :size="14" />
+      </div>
+      <span class="search-title">
+        {{ searching ? '正在搜索...' : `找到 ${results.length} 条结果` }}
+      </span>
+      <ChevronDown
+        v-if="!searching && results.length > 0"
+        :size="14"
+        :class="['chevron', { rotated: expanded }]"
+      />
+    </div>
+
+    <!-- 搜索结果列表 -->
+    <div v-if="!searching && expanded && results.length > 0" class="search-results">
+      <a
+        v-for="(item, index) in results.slice(0, 5)"
+        :key="index"
+        :href="item.url"
+        target="_blank"
+        class="result-item"
+      >
+        <span class="result-title">{{ item.title }}</span>
+        <span class="result-url">{{ formatUrl(item.url) }}</span>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Globe, Loader2, ChevronDown } from 'lucide-vue-next';
+import type { SearchResult } from '../../types';
+
+defineProps<{
+  results: SearchResult[];
+  searching: boolean;
+}>();
+
+const expanded = ref(true);
+
+function formatUrl(url: string): string {
+  try {
+    return new URL(url).hostname;
+  } catch {
+    return url;
+  }
+}
+</script>
+
+<style scoped>
+.search-block {
+  margin: 8px 0;
+  background: var(--chat-muted, #2d2d2d);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.search-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.search-header:hover {
+  background: var(--chat-muted-hover, #3a3a3a);
+}
+
+.search-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  color: var(--chat-text, #ccc);
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.search-title {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--chat-text, #ccc);
+}
+
+.chevron {
+  color: var(--chat-text-muted, #666);
+  transition: transform 0.2s;
+}
+
+.chevron.rotated {
+  transform: rotate(180deg);
+}
+
+.search-results {
+  border-top: 1px solid var(--chat-border, #333);
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.result-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px;
+  background: var(--chat-bg, #1e1e1e);
+  border-radius: 6px;
+  text-decoration: none;
+  transition: background 0.15s;
+}
+
+.result-item:hover {
+  background: var(--chat-muted-hover, #333);
+}
+
+.result-title {
+  font-size: 13px;
+  color: var(--chat-text, #ccc);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.result-item:hover .result-title {
+  color: var(--chat-text, #fff);
+}
+
+.result-url {
+  font-size: 11px;
+  color: var(--chat-text-muted, #666);
+}
+</style>

package/src/components/chat/ThinkingBlock.vue

@@ -0,0 +1,109 @@
+<template>
+  <div :class="['thinking-block', { expanded }]">
+    <button class="thinking-header" @click="expanded = !expanded">
+      <div class="thinking-icon">
+        <Loader2 v-if="!isComplete" :size="14" class="spinning" />
+        <Lightbulb v-else :size="14" />
+      </div>
+      <span class="thinking-title">{{ isComplete ? '思考完成' : '正在思考...' }}</span>
+      <ChevronDown :size="14" :class="['chevron', { rotated: expanded }]" />
+    </button>
+
+    <div v-if="expanded && content" class="thinking-content">
+      <div class="thinking-text">{{ content }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Loader2, Lightbulb, ChevronDown } from 'lucide-vue-next';
+
+defineProps<{
+  content: string;
+  isComplete: boolean;
+}>();
+
+const expanded = ref(false);
+</script>
+
+<style scoped>
+.thinking-block {
+  margin: 8px 0;
+  background: var(--chat-muted, #2d2d2d);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.thinking-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 10px 12px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.thinking-header:hover {
+  background: var(--chat-muted-hover, #3a3a3a);
+}
+
+.thinking-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  color: var(--chat-text, #ccc);
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.thinking-title {
+  flex: 1;
+  text-align: left;
+  font-size: 13px;
+  color: var(--chat-text, #ccc);
+  font-weight: 500;
+}
+
+.chevron {
+  color: var(--chat-text-muted, #666);
+  transition: transform 0.2s;
+}
+
+.chevron.rotated {
+  transform: rotate(180deg);
+}
+
+.thinking-content {
+  padding: 0 12px 12px;
+  border-top: 1px solid var(--chat-border, #333);
+  margin-top: 4px;
+  padding-top: 8px;
+}
+
+.thinking-text {
+  font-size: 13px;
+  color: var(--chat-text-muted, #999);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+</style>