!264 增加snail-ai集成

* 恢复误修改提交的代码
* 恢复被ai修改误提交代码
* snail-ai测试版本提交
* chore: sync non-ai frontend files to latest
* add 增加流程实例权限
* update 修改vben5前端仓库地址
* add 补充流程定义权限

src/api/ai/agent/index.ts

@@ -0,0 +1,148 @@
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+import { getToken } from '@/utils/auth';
+import type { AgentChatRequest, AgentItem, ConversationMessage, ConversationSummaryList, SnailOpenApiUser } from './types';
+
+export const fetchMyAgents = (): AxiosPromise<AgentItem[]> => {
+  return request({
+    url: '/snail-ai/agents',
+    method: 'get'
+  });
+};
+
+export const fetchAgentDetail = (id: number): AxiosPromise<AgentItem> => {
+  return request({
+    url: `/snail-ai/agent/${id}`,
+    method: 'get'
+  });
+};
+
+export const fetchAgentConversations = (
+  id: number,
+  params: { page?: number; size?: number; start?: string; end?: string }
+): AxiosPromise<ConversationSummaryList> => {
+  return request({
+    url: `/snail-ai/agent/${id}/conversations`,
+    method: 'get',
+    params
+  });
+};
+
+export const fetchConversationMessages = (agentId: number, conversationId: string): AxiosPromise<ConversationMessage[]> => {
+  return request({
+    url: `/snail-ai/agent/${agentId}/conversation/${conversationId}/messages`,
+    method: 'get'
+  });
+};
+
+export const createConversation = (agentId: number, data: { title?: string }): AxiosPromise<{ conversationId: string; title?: string }> => {
+  return request({
+    url: `/snail-ai/agent/${agentId}/conversation`,
+    method: 'post',
+    data
+  });
+};
+
+export const registerCurrentSnailUser = (): AxiosPromise<SnailOpenApiUser> => {
+  return request({
+    url: '/snail-ai/user/register',
+    method: 'post'
+  });
+};
+
+export const fetchChatMode = (): AxiosPromise<{ mode?: 'stream' | 'sync' }> => {
+  return request({
+    url: '/snail-ai/chat/mode',
+    method: 'get'
+  });
+};
+
+export const fetchAgentChat = (
+  agentId: number,
+  data: AgentChatRequest,
+  options: {
+    onMessage: (chunk: string) => void;
+    onThinking?: (chunk: string) => void;
+    onDone: () => void;
+    onError: (error: Error) => void;
+    signal?: AbortSignal;
+  }
+) => {
+  const baseURL = import.meta.env.VITE_APP_BASE_API;
+  const token = getToken();
+  const query = new URLSearchParams({ content: data.content });
+  if (data.conversationId) {
+    query.set('conversationId', data.conversationId);
+  }
+
+  fetch(`${baseURL}/snail-ai/agent/${agentId}/chat/stream?${query.toString()}`, {
+    method: 'GET',
+    headers: {
+      Authorization: token ? `Bearer ${token}` : '',
+      clientid: import.meta.env.VITE_APP_CLIENT_ID
+    },
+    signal: options.signal
+  })
+    .then(async response => {
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+
+      const reader = response.body?.getReader();
+      if (!reader) {
+        throw new Error('ReadableStream not supported');
+      }
+
+      const decoder = new TextDecoder();
+      let buffer = '';
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const eventBlocks = buffer.split('\n\n');
+        buffer = eventBlocks.pop() || '';
+
+        for (const block of eventBlocks) {
+          if (!block.trim()) continue;
+          let eventName = 'message';
+          let payload = '';
+          for (const line of block.split('\n')) {
+            if (line.startsWith('event:')) {
+              eventName = line.slice(6).trim();
+            } else if (line.startsWith('data:')) {
+              payload += line.slice(5).trim();
+            }
+          }
+          if (!payload) continue;
+          if (eventName === 'thinking') {
+            options.onThinking?.(payload);
+          } else if (eventName === 'text') {
+            options.onMessage(payload);
+          } else if (eventName === 'done') {
+            options.onDone();
+            return;
+          } else if (eventName === 'error') {
+            throw new Error(payload || 'SSE stream error');
+          } else {
+            options.onMessage(payload);
+          }
+        }
+      }
+
+      options.onDone();
+    })
+    .catch((error: Error) => {
+      if (error.name !== 'AbortError') {
+        options.onError(error);
+      }
+    });
+};
+
+export const fetchAgentChatSync = (agentId: number, data: AgentChatRequest): AxiosPromise<any> => {
+  return request({
+    url: `/snail-ai/agent/${agentId}/chat/sync`,
+    method: 'post',
+    data
+  });
+};

src/api/ai/agent/types.ts

@@ -0,0 +1,45 @@
+export interface AgentItem {
+  id: number;
+  name: string;
+  description?: string;
+  avatar?: string;
+  greeting?: string;
+  presetQuestions?: string[];
+  webSearchEnabled?: boolean;
+}
+
+export interface ConversationSummaryItem {
+  conversationId: string;
+  title: string;
+  lastMessageDt?: string;
+  createDt?: string;
+}
+
+export interface ConversationSummaryList {
+  data: ConversationSummaryItem[];
+  page?: number;
+  size?: number;
+  total?: number;
+}
+
+export interface ConversationMessage {
+  role?: string;
+  content?: string;
+  thinking?: string;
+}
+
+export interface AgentChatRequest {
+  conversationId?: string;
+  content: string;
+  disabledMcpServerIds?: number[];
+  disabledSkillIds?: number[];
+  deepPlanEnabled?: boolean;
+  webSearchEnabled?: boolean;
+}
+
+export interface SnailOpenApiUser {
+  openId: string;
+  nickname?: string;
+  externalId?: string;
+  created?: boolean;
+}

src/api/ai/index.ts

@@ -0,0 +1,2 @@
+export * from './agent';
+export * from './agent/types';

src/views/ai/chat/index.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { fetchAgentConversations, fetchMyAgents, registerCurrentSnailUser } from '@/api/ai/agent';
+import type { AgentItem, ConversationSummaryItem } from '@/api/ai/agent/types';
+import ChatMain from './modules/chat-main.vue';
+import ChatSidebar from './modules/chat-sidebar.vue';
+
+defineOptions({ name: 'AiChatPage' });
+
+const agents = ref<AgentItem[]>([]);
+const conversations = ref<ConversationSummaryItem[]>([]);
+const currentAgent = ref<AgentItem | null>(null);
+const currentConversationId = ref('');
+const currentNickname = ref('');
+
+function normalizeConversationList(payload: any): ConversationSummaryItem[] {
+  const container = payload?.data ?? payload;
+  const source =
+    (Array.isArray(container) && container) ||
+    (Array.isArray(container?.rows) && container.rows) ||
+    (Array.isArray(container?.list) && container.list) ||
+    (Array.isArray(container?.records) && container.records) ||
+    (Array.isArray(payload?.rows) && payload.rows) ||
+    (Array.isArray(payload?.list) && payload.list) ||
+    (Array.isArray(payload?.records) && payload.records) ||
+    [];
+
+  return source
+    .map((item: any) => ({
+      conversationId: String(item?.conversationId ?? item?.id ?? ''),
+      title: String(item?.title ?? item?.name ?? ''),
+      lastMessageDt: item?.lastMessageDt ?? item?.updateTime ?? item?.updateDt,
+      createDt: item?.createDt ?? item?.createTime
+    }))
+    .filter((item: ConversationSummaryItem) => !!item.conversationId)
+    .sort((a: ConversationSummaryItem, b: ConversationSummaryItem) => {
+      const ta = new Date(a.lastMessageDt || a.createDt || 0).getTime();
+      const tb = new Date(b.lastMessageDt || b.createDt || 0).getTime();
+      return tb - ta;
+    });
+}
+
+async function loadAgents() {
+  const { data: user } = await registerCurrentSnailUser();
+  currentNickname.value = user?.nickname || '';
+  const { data } = await fetchMyAgents();
+  agents.value = Array.isArray(data) ? data : [];
+  currentAgent.value = agents.value[0] || null;
+}
+
+async function loadConversations(agentId: number) {
+  try {
+    const { data } = await fetchAgentConversations(agentId, { page: 1, size: 50 });
+    conversations.value = normalizeConversationList(data);
+  } catch {
+    conversations.value = [];
+  }
+}
+
+async function onSelectAgent(agent: AgentItem) {
+  currentAgent.value = agent;
+  currentConversationId.value = '';
+  await loadConversations(agent.id);
+}
+
+onMounted(() => {
+  loadAgents().then(async () => {
+    if (currentAgent.value) {
+      await loadConversations(currentAgent.value.id);
+    }
+  });
+});
+</script>
+
+<template>
+  <div class="ai-chat-page">
+    <header class="chat-header">
+      <div class="brand">
+        <div class="brand-dot" />
+        <span>Snail AI</span>
+      </div>
+    </header>
+    <div class="chat-body">
+      <ChatSidebar
+        :agents="agents"
+        :conversations="conversations"
+        :current-agent="currentAgent"
+        :current-conversation-id="currentConversationId"
+        :current-nickname="currentNickname"
+        @select-agent="onSelectAgent"
+        @select-conversation="currentConversationId = $event"
+        @new-chat="currentConversationId = ''"
+      />
+      <ChatMain
+        :agent="currentAgent"
+        :conversation-id="currentConversationId"
+        @conversation-created="(id) => { currentConversationId = id; if (currentAgent) loadConversations(currentAgent.id); }"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.ai-chat-page {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 84px);
+  min-height: 0;
+  background: #f5f6f8;
+  overflow: hidden;
+}
+
+.chat-header {
+  height: 46px;
+  padding: 0 14px;
+  border-bottom: 1px solid #e6e8ee;
+  background: #fff;
+  display: flex;
+  align-items: center;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #8b90a0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.brand-dot {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #6f76ff;
+}
+
+.chat-body {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  min-height: 0;
+}
+</style>

src/views/ai/chat/modules/chat-input.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const emit = defineEmits<{
+  send: [content: string];
+}>();
+defineProps<{
+  sending?: boolean;
+}>();
+
+const content = ref('');
+
+function submit() {
+  const val = content.value.trim();
+  if (!val) return;
+  emit('send', val);
+  content.value = '';
+}
+</script>
+
+<template>
+  <div class="chat-input-wrap">
+    <div class="chat-input-box">
+      <div class="input-row">
+        <el-input
+          v-model="content"
+          type="textarea"
+          :autosize="{ minRows: 1, maxRows: 4 }"
+          placeholder="给智能体发消息"
+          @keydown.enter.exact.prevent="submit"
+        />
+        <el-button type="primary" circle :disabled="sending" @click="submit">
+          <el-icon><Promotion /></el-icon>
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.chat-input-wrap {
+  padding: 10px 18px 14px;
+}
+
+.chat-input-box {
+  max-width: 920px;
+  margin: 0 auto;
+  border-radius: 16px;
+  border: 1px solid #dde2eb;
+  background: #fff;
+  padding: 12px;
+}
+
+.input-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 10px;
+}
+
+.input-row :deep(.el-textarea) {
+  flex: 1;
+}
+</style>

src/views/ai/chat/modules/chat-main.vue

@@ -0,0 +1,422 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { createConversation, fetchAgentChat, fetchAgentChatSync, fetchChatMode, fetchConversationMessages } from '@/api/ai/agent';
+import { ElMessage } from 'element-plus';
+import ChatInput from './chat-input.vue';
+
+interface AgentItem {
+  id: number;
+  name: string;
+  description?: string;
+  greeting?: string;
+  presetQuestions?: string[];
+  webSearchEnabled?: boolean;
+}
+
+const props = defineProps<{
+  agent: AgentItem | null;
+  conversationId: string;
+}>();
+const emit = defineEmits<{
+  conversationCreated: [conversationId: string];
+}>();
+
+interface ChatMessage {
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+const messages = ref<ChatMessage[]>([]);
+const sending = ref(false);
+const sendMode = ref<'stream' | 'sync'>('stream');
+let sendingTimer: ReturnType<typeof setTimeout> | null = null;
+
+const showWelcome = computed(() => !!props.agent && !props.conversationId && !messages.value.length);
+const displayQuestions = computed(() => {
+  return (props.agent?.presetQuestions || []).filter(Boolean);
+});
+
+function normalizeMessageList(payload: any): ChatMessage[] {
+  const container = payload?.data ?? payload;
+  const source =
+    (Array.isArray(container) && container) ||
+    (Array.isArray(container?.rows) && container.rows) ||
+    (Array.isArray(container?.list) && container.list) ||
+    (Array.isArray(container?.records) && container.records) ||
+    (Array.isArray(payload?.rows) && payload.rows) ||
+    (Array.isArray(payload?.list) && payload.list) ||
+    (Array.isArray(payload?.records) && payload.records) ||
+    [];
+
+  return source
+    .map((item: any) => {
+      const role = String(item?.role || item?.messageType || item?.senderType || '').toLowerCase();
+      return {
+        role: role === 'user' ? 'user' : 'assistant',
+        content: String(item?.content ?? item?.message ?? item?.text ?? '')
+      } as ChatMessage;
+    })
+    .filter(item => !!item.content);
+}
+
+function normalizeStreamChunk(chunk: string): string {
+  const text = String(chunk ?? '');
+  if (!text.trim()) return '';
+
+  const tryParseJsonContent = (raw: string): string | null => {
+    try {
+      const obj = JSON.parse(raw);
+      if (obj && typeof obj === 'object' && typeof obj.content === 'string') {
+        return obj.content;
+      }
+    } catch {}
+    return null;
+  };
+
+  const single = tryParseJsonContent(text);
+  if (single !== null) return single;
+
+  const normalized = text.replace(/}\s*{/g, '}\n{');
+  const lines = normalized
+    .split('\n')
+    .map(line => line.trim())
+    .filter(Boolean);
+
+  if (!lines.length) return text;
+  let merged = '';
+  for (const line of lines) {
+    const parsed = tryParseJsonContent(line);
+    if (parsed === null) return text;
+    merged += parsed;
+  }
+  return merged;
+}
+
+function extractSyncReply(payload: any): string {
+  const container = payload?.data ?? payload;
+  const normalizeChunkedJsonText = (raw: string): string => {
+    const text = String(raw || '').trim();
+    if (!text) return '';
+    if (!text.includes('\n') && !(text.startsWith('{') && text.endsWith('}'))) {
+      return text;
+    }
+
+    const lines = text.split('\n').map(line => line.trim()).filter(Boolean);
+    if (!lines.length) return text;
+
+    let merged = '';
+    for (const line of lines) {
+      try {
+        const item = JSON.parse(line);
+        if (item?.type === 'text' || typeof item?.content === 'string') {
+          merged += String(item.content ?? '');
+        }
+      } catch {
+        return text;
+      }
+    }
+    return merged || text;
+  };
+
+  const candidates = [
+    container?.content,
+    container?.text,
+    container?.message,
+    container?.answer,
+    container?.reply,
+    container?.outputText,
+    container?.result
+  ];
+  const hit = candidates.find(item => typeof item === 'string' && item.trim());
+  if (hit) return normalizeChunkedJsonText(String(hit));
+  if (Array.isArray(container?.messages)) {
+    const list = normalizeMessageList(container.messages).filter(item => item.role === 'assistant');
+    return list[list.length - 1]?.content || '';
+  }
+  return '';
+}
+
+async function loadSendMode() {
+  try {
+    const { data } = await fetchChatMode();
+    sendMode.value = data?.mode === 'sync' ? 'sync' : 'stream';
+  } catch {
+    sendMode.value = 'stream';
+  }
+}
+
+async function loadMessages() {
+  if (!props.agent || !props.conversationId) {
+    messages.value = [];
+    return;
+  }
+  const { data } = await fetchConversationMessages(props.agent.id, props.conversationId);
+  messages.value = normalizeMessageList(data);
+}
+
+async function onSend(content: string) {
+  if (!props.agent || !content.trim() || sending.value) return;
+  sending.value = true;
+  if (sendingTimer) clearTimeout(sendingTimer);
+  sendingTimer = setTimeout(() => {
+    if (sending.value) {
+      sending.value = false;
+      ElMessage.warning('响应超时，已恢复发送按钮，请重试');
+    }
+  }, 60000);
+  let targetConversationId = props.conversationId;
+  if (!targetConversationId) {
+    messages.value = [];
+    const { data } = await createConversation(props.agent.id, { title: content.slice(0, 20) });
+    if (!data?.conversationId) {
+      sending.value = false;
+      if (sendingTimer) {
+        clearTimeout(sendingTimer);
+        sendingTimer = null;
+      }
+      ElMessage.error('创建会话失败，请稍后重试');
+      return;
+    }
+    targetConversationId = data.conversationId;
+    emit('conversationCreated', targetConversationId);
+  }
+
+  messages.value.push({ role: 'user', content });
+  if (sendMode.value === 'sync') {
+    try {
+      const { data } = await fetchAgentChatSync(props.agent.id, {
+        conversationId: targetConversationId,
+        content,
+        webSearchEnabled: props.agent.webSearchEnabled
+      });
+      const reply = extractSyncReply(data) || '（后端已返回空消息）';
+      messages.value.push({ role: 'assistant', content: reply });
+    } catch (error: any) {
+      ElMessage.error(error?.message || '对话失败，请稍后重试');
+    } finally {
+      sending.value = false;
+      if (sendingTimer) {
+        clearTimeout(sendingTimer);
+        sendingTimer = null;
+      }
+    }
+    return;
+  }
+
+  messages.value.push({ role: 'assistant', content: '' });
+  const assistantIndex = messages.value.length - 1;
+  fetchAgentChat(
+      props.agent.id,
+      {
+        conversationId: targetConversationId,
+        content,
+        webSearchEnabled: props.agent.webSearchEnabled
+      },
+      {
+        onMessage(chunk) {
+          const msg = messages.value[assistantIndex];
+          if (msg) msg.content += normalizeStreamChunk(chunk);
+        },
+        onThinking() {},
+        onDone() {
+          const msg = messages.value[assistantIndex];
+          if (msg && !msg.content.trim()) {
+            msg.content = '（后端已返回空消息）';
+          }
+          sending.value = false;
+          if (sendingTimer) {
+            clearTimeout(sendingTimer);
+            sendingTimer = null;
+          }
+        },
+        onError(error) {
+          messages.value.splice(assistantIndex, 1);
+          sending.value = false;
+          if (sendingTimer) {
+            clearTimeout(sendingTimer);
+            sendingTimer = null;
+          }
+          ElMessage.error(error.message || '对话失败，请稍后重试');
+        }
+      }
+    );
+}
+
+watch(
+  () => [props.agent?.id, props.conversationId] as const,
+  async ([agentId, convId]) => {
+    if (sending.value && convId) {
+      return;
+    }
+    sending.value = false;
+    if (sendingTimer) {
+      clearTimeout(sendingTimer);
+      sendingTimer = null;
+    }
+    if (agentId && convId) {
+      await loadMessages();
+    } else if (agentId && !convId) {
+      messages.value = [];
+    }
+  },
+  { immediate: true }
+);
+
+loadSendMode();
+</script>
+
+<template>
+  <main class="chat-main">
+    <div v-if="!agent" class="empty-state">请先选择一个智能体开始对话</div>
+    <template v-else>
+      <el-scrollbar class="chat-scroll">
+        <div class="chat-content">
+          <div v-if="showWelcome" class="welcome-card">
+            <div class="card-head">
+              <span class="avatar-dot" />
+              <div class="title-block">
+                <div class="agent-name">{{ agent.name }}</div>
+              <div class="agent-desc">{{ agent.description || '暂无描述' }}</div>
+            </div>
+          </div>
+            <div class="greeting">{{ agent.greeting || '你好，我是你的智能助手。' }}</div>
+            <div v-if="displayQuestions.length" class="question-title">推荐问题</div>
+            <div v-if="displayQuestions.length" class="question-list">
+              <button
+                v-for="q in displayQuestions"
+                :key="q"
+                class="question-pill"
+                @click="onSend(q)"
+              >
+                {{ q }}
+              </button>
+            </div>
+          </div>
+
+          <div v-for="(msg, idx) in messages" :key="idx" class="msg-row" :class="{ user: msg.role === 'user' }">
+            <div class="msg-bubble">{{ msg.content }}</div>
+          </div>
+        </div>
+      </el-scrollbar>
+      <ChatInput :sending="sending" @send="onSend" />
+    </template>
+  </main>
+</template>
+
+<style scoped lang="scss">
+.chat-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.empty-state {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #98a0af;
+}
+
+.chat-scroll {
+  flex: 1;
+  padding: 16px 18px 0;
+  min-height: 0;
+}
+
+.chat-content {
+  max-width: 920px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.welcome-card {
+  background: #fff;
+  border: 1px solid #e4e8f0;
+  border-radius: 14px;
+  padding: 16px;
+  margin-bottom: 14px;
+}
+
+.card-head {
+  display: flex;
+  gap: 10px;
+}
+
+.avatar-dot {
+  margin-top: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #3f434b;
+}
+
+.agent-name {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1f2430;
+}
+
+.agent-desc {
+  margin-top: 4px;
+  color: #6f7687;
+  line-height: 1.6;
+}
+
+.greeting {
+  margin-top: 12px;
+  color: #2b3240;
+}
+
+.question-title {
+  margin-top: 14px;
+  padding-top: 10px;
+  border-top: 1px solid #edf0f5;
+  color: #6f7687;
+  font-size: 13px;
+}
+
+.question-list {
+  margin-top: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.question-pill {
+  border: 1px solid #e0e5ef;
+  background: #fff;
+  color: #3a4252;
+  border-radius: 999px;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+
+.msg-row {
+  display: flex;
+  margin-bottom: 12px;
+}
+
+.msg-row.user {
+  justify-content: flex-end;
+}
+
+.msg-bubble {
+  max-width: 80%;
+  white-space: pre-wrap;
+  line-height: 1.7;
+  background: #fff;
+  border: 1px solid #e4e8f0;
+  border-radius: 12px;
+  padding: 10px 12px;
+}
+
+.msg-row.user .msg-bubble {
+  background: #e9ecff;
+  border-color: #d7dcff;
+  color: #4552d9;
+}
+</style>

src/views/ai/chat/modules/chat-sidebar.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface AgentItem {
+  id: number;
+  name: string;
+}
+
+interface ConversationItem {
+  conversationId: string;
+  title: string;
+  lastMessageDt?: string;
+  createDt?: string;
+}
+
+const emit = defineEmits<{
+  selectAgent: [agent: AgentItem];
+  selectConversation: [conversationId: string];
+  newChat: [];
+}>();
+
+const props = defineProps<{
+  agents: AgentItem[];
+  conversations: ConversationItem[];
+  currentAgent: AgentItem | null;
+  currentConversationId: string;
+  currentNickname?: string;
+}>();
+
+const displayNickname = computed(() => props.currentNickname || '已登录用户');
+const avatarText = computed(() => (displayNickname.value ? displayNickname.value.slice(0, 1) : 'U'));
+</script>
+
+<template>
+  <aside class="chat-sidebar">
+    <div class="sidebar-block sidebar-head">
+      <el-button class="new-btn" :disabled="!currentAgent" @click="emit('newChat')">+ 新对话</el-button>
+    </div>
+
+    <el-scrollbar class="sidebar-scroll">
+      <div class="sidebar-block">
+        <div class="block-title">我的智能体</div>
+        <div
+          v-for="agent in agents"
+          :key="agent.id"
+          class="agent-item"
+          :class="{ active: currentAgent?.id === agent.id }"
+          @click="emit('selectAgent', agent)"
+        >
+          <span class="avatar-dot" />
+          <span class="name">{{ agent.name }}</span>
+        </div>
+      </div>
+
+      <div class="sidebar-block">
+        <div class="block-title">对话记录</div>
+        <div
+          v-for="conv in conversations"
+          :key="conv.conversationId"
+          class="conv-item"
+          :class="{ active: currentConversationId === conv.conversationId }"
+          @click="emit('selectConversation', conv.conversationId)"
+        >
+          {{ conv.title || '未命名会话' }}
+        </div>
+      </div>
+    </el-scrollbar>
+
+    <div class="sidebar-foot">
+        <div class="user-avatar">{{ avatarText }}</div>
+      <div>
+        <div class="user-name">{{ displayNickname }}</div>
+        <div class="user-status">已登录</div>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<style scoped lang="scss">
+.chat-sidebar {
+  width: 234px;
+  border-right: 1px solid #e5e8ef;
+  background: #f8f9fc;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-head {
+  padding-bottom: 8px;
+}
+
+.new-btn {
+  width: 100%;
+}
+
+.sidebar-scroll {
+  flex: 1;
+}
+
+.sidebar-block {
+  padding: 12px;
+}
+
+.block-title {
+  margin-bottom: 10px;
+  color: #8a8fa2;
+  font-size: 12px;
+}
+
+.sub-title {
+  margin-bottom: 6px;
+  color: #9399aa;
+  font-size: 13px;
+}
+
+.agent-item,
+.conv-item {
+  height: 36px;
+  border-radius: 8px;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #2a2e38;
+  cursor: pointer;
+}
+
+.agent-item:hover,
+.conv-item:hover {
+  background: #eef1f6;
+}
+
+.agent-item.active,
+.conv-item.active {
+  background: #e9ecff;
+  color: #4d57ea;
+}
+
+.avatar-dot {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #3f434b;
+}
+
+.name {
+  font-size: 14px;
+}
+
+.conv-item {
+  font-size: 13px;
+}
+
+.sidebar-foot {
+  border-top: 1px solid #e5e8ef;
+  padding: 10px 12px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: #fff;
+}
+
+.user-avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: #1dbf73;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+}
+
+.user-name {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.user-status {
+  color: #8f95a3;
+  font-size: 12px;
+}
+</style>