work-agent 0.1.0

package/app/h5/mobile-chat-page.tsx

@@ -0,0 +1,951 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { Send, Bot, User, Plus, X, Loader2, BookOpen, ChevronDown, Brain, Check, Share2, MessageSquare, Trash2, ChevronRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import {
+  ChainOfThought,
+  ChainOfThoughtContent,
+  ChainOfThoughtHeader,
+  ChainOfThoughtStep,
+} from '@/components/ai-elements/chain-of-thought';
+import { SkillSwitcher } from '@/components/chat/SkillSwitcher';
+import { MentionInput } from '@/components/chat/MentionInput';
+import { KnowledgePickerDialog } from '@/components/chat/KnowledgePickerDialog';
+import { TicketActionButtons } from './ticket-action-buttons';
+
+function generateUUID(): string {
+  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+
+type Message = {
+  id: string;
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+  timestamp: Date;
+  isStreaming?: boolean;
+  ticket?: {
+    id: string;
+    title: string;
+    type: string;
+    status: string;
+    priority: string;
+    description?: string;
+  };
+};
+
+type SessionInfo = {
+  sessionId: string;
+  userId?: string;
+  createdAt: string;
+  lastAccessedAt: string;
+  messageCount: number;
+  title?: string;
+  recentSummary?: string;
+};
+
+type ToolExecution = {
+  toolName: string;
+  startTime: Date;
+  endTime?: Date;
+  input?: any;
+  output?: any;
+  isError?: boolean;
+};
+
+type MessageChainOfThought = {
+  isStreaming: boolean;
+  thinking: string;
+  toolExecutions: ToolExecution[];
+};
+
+type PIEvent = {
+  type: 'session_start' | 'session_restored' | 'text' | 'thinking' | 'tool_start' | 'tool_output' | 'tool_end' | 'turn_start' | 'turn_end' | 'message_end' | 'agent_end' | 'error';
+  content?: string;
+  toolName?: string;
+  args?: any;
+  sessionId?: string;
+  isError?: boolean;
+  message?: any;
+  messages?: any[];
+  toolResults?: any[];
+  error?: string;
+};
+
+export default function MobileChatPage() {
+  const [sessionId, setSessionId] = useState<string | null>(null);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [messageChainOfThought, setMessageChainOfThought] = useState<Record<string, MessageChainOfThought>>({});
+  const [loading, setLoading] = useState(false);
+  const [currentTool, setCurrentTool] = useState<string | null>(null);
+  const [userId, setUserId] = useState<string>('');
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [skillNameMap, setSkillNameMap] = useState<Record<string, string>>({});
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const lastMessageCountRef = useRef(0);
+  const [showScrollButton, setShowScrollButton] = useState(false);
+  const [scrollMode, setScrollMode] = useState<'auto' | 'follow'>('auto');
+  const [availableSkills, setAvailableSkills] = useState<{ name: string; displayName?: string; description?: string }[]>([]);
+  const [selectedSkills, setSelectedSkills] = useState<string[]>([]);
+  const [knowledgePickerOpen, setKnowledgePickerOpen] = useState(false);
+  const [skillSwitcherOpen, setSkillSwitcherOpen] = useState(false);
+  const [shareCopied, setShareCopied] = useState(false);
+  const [isConfigured, setIsConfigured] = useState(true);
+  const [configChecked, setConfigChecked] = useState(false);
+  
+  // 会话列表相关状态
+  const [sessions, setSessions] = useState<SessionInfo[]>([]);
+  const [sessionDrawerOpen, setSessionDrawerOpen] = useState(false);
+
+  const loadSkillNameMap = async (uid: string) => {
+    try {
+      const response = await fetch(`/api/skills?userId=${uid}`);
+      if (response.ok) {
+        const skills = await response.json();
+        const map: Record<string, string> = {};
+        for (const skill of skills) {
+          if (skill.name && skill.displayName) {
+            map[skill.name] = skill.displayName;
+          }
+        }
+        setSkillNameMap(map);
+      }
+    } catch (error) {
+      console.error('Failed to load skill name map:', error);
+    }
+  };
+
+  useEffect(() => {
+    const checkLoginStatus = () => {
+      const userId = localStorage.getItem('userId');
+      setIsLoggedIn(!!userId);
+      if (userId) {
+        setUserId(userId);
+        loadSkillNameMap(userId);
+      }
+    };
+    checkLoginStatus();
+    const handleStorageChange = () => checkLoginStatus();
+    window.addEventListener('storage', handleStorageChange);
+    return () => window.removeEventListener('storage', handleStorageChange);
+  }, []);
+
+  useEffect(() => {
+    async function checkConfig() {
+      try {
+        const response = await fetch('/api/config/status');
+        if (response.ok) {
+          const data = await response.json();
+          setIsConfigured(data.isConfigured);
+        }
+      } catch (e) {
+        console.error('Failed to check config:', e);
+      } finally {
+        setConfigChecked(true);
+      }
+    }
+    checkConfig();
+  }, []);
+
+  useEffect(() => {
+    async function loadSkills() {
+      const uid = localStorage.getItem('userId');
+      if (!uid) return;
+      try {
+        const response = await fetch(`/api/user/skills?userId=${uid}`);
+        if (response.ok) {
+          const data = await response.json();
+          const userSkills = data.skills || [];
+          setAvailableSkills(userSkills.map((s: any) => ({
+            name: s.skillName,
+            displayName: s.skillName,
+            description: s.isBuiltin ? '内置Skill' : (s.source === 'personal' ? '个人Skill' : '已安装'),
+          })));
+        }
+      } catch (error) {
+        console.error('Failed to load user skills:', error);
+      }
+    }
+    loadSkills();
+  }, []);
+
+  useEffect(() => {
+    const initSession = async () => {
+      const savedSessionId = localStorage.getItem('assistant-session-id');
+      if (savedSessionId) {
+        setSessionId(savedSessionId);
+        try {
+          const response = await fetch(`/api/sessions/${savedSessionId}/messages`);
+          if (response.ok) {
+            const data = await response.json();
+            const backendMessages = data.messages || [];
+            if (backendMessages.length > 0) {
+              const converted: Message[] = [];
+              const cotData: Record<string, MessageChainOfThought> = {};
+              backendMessages.forEach((m: any) => {
+                converted.push({
+                  id: m.id,
+                  role: m.role as 'user' | 'assistant',
+                  content: m.content,
+                  timestamp: new Date(m.timestamp),
+                });
+                if (m.chainOfThought) {
+                  cotData[m.id] = {
+                    isStreaming: false,
+                    thinking: m.chainOfThought.thinking || '',
+                    toolExecutions: (m.chainOfThought.toolExecutions || []).map((t: any) => ({
+                      ...t,
+                      startTime: new Date(t.startTime),
+                      endTime: t.endTime ? new Date(t.endTime) : undefined,
+                    }))
+                  };
+                }
+              });
+              setMessages(converted);
+              setMessageChainOfThought(cotData);
+            }
+          }
+        } catch (error) {
+          console.error('Failed to load messages:', error);
+        }
+      } else {
+        const newSessionId = generateUUID();
+        setSessionId(newSessionId);
+        localStorage.setItem('assistant-session-id', newSessionId);
+      }
+    };
+    initSession();
+  }, []);
+
+  useEffect(() => {
+    if (sessionId) {
+      localStorage.setItem('assistant-session-id', sessionId);
+    }
+  }, [sessionId]);
+
+  // 加载会话列表
+  const loadSessions = async () => {
+    try {
+      const currentUserId = localStorage.getItem('userId');
+      const url = currentUserId ? `/api/sessions?userId=${encodeURIComponent(currentUserId)}` : '/api/sessions';
+      const response = await fetch(url);
+      const backendSessions: SessionInfo[] = response.ok ? (await response.json()).sessions || [] : [];
+      
+      const localSessions: SessionInfo[] = JSON.parse(localStorage.getItem('assistant-local-sessions') || '[]');
+      const filteredLocalSessions = currentUserId
+        ? localSessions.filter(s => s.userId === currentUserId)
+        : localSessions;
+      
+      const backendIds = new Set(backendSessions.map(s => s.sessionId));
+      const mergedSessions = [
+        ...backendSessions,
+        ...filteredLocalSessions.filter(s => !backendIds.has(s.sessionId))
+      ];
+      
+      mergedSessions.sort((a, b) =>
+        new Date(b.lastAccessedAt).getTime() - new Date(a.lastAccessedAt).getTime()
+      );
+      
+      setSessions(mergedSessions);
+    } catch (error) {
+      console.error('Failed to load sessions:', error);
+    }
+  };
+
+  // 创建新会话
+  const createNewSession = () => {
+    const newSessionId = generateUUID();
+    const now = new Date().toISOString();
+    const currentUserId = localStorage.getItem('userId') || undefined;
+    
+    setSessionId(newSessionId);
+    setMessages([]);
+    setMessageChainOfThought({});
+    localStorage.setItem('assistant-session-id', newSessionId);
+    setSessionDrawerOpen(false);
+    
+    const localSessions: SessionInfo[] = JSON.parse(localStorage.getItem('assistant-local-sessions') || '[]');
+    const newSession: SessionInfo = {
+      sessionId: newSessionId,
+      userId: currentUserId,
+      createdAt: now,
+      lastAccessedAt: now,
+      messageCount: 0,
+    };
+    
+    if (!localSessions.find(s => s.sessionId === newSessionId)) {
+      localSessions.unshift(newSession);
+      localStorage.setItem('assistant-local-sessions', JSON.stringify(localSessions));
+    }
+    
+    loadSessions();
+  };
+
+  // 切换会话
+  const switchSession = async (targetSessionId: string) => {
+    if (targetSessionId === sessionId) {
+      setSessionDrawerOpen(false);
+      return;
+    }
+    
+    setSessionId(targetSessionId);
+    localStorage.setItem('assistant-session-id', targetSessionId);
+    setSessionDrawerOpen(false);
+    setMessages([]);
+    setMessageChainOfThought({});
+    
+    try {
+      const response = await fetch(`/api/sessions/${targetSessionId}/messages`);
+      if (response.ok) {
+        const data = await response.json();
+        const backendMessages = data.messages || [];
+        if (backendMessages.length > 0) {
+          const converted: Message[] = [];
+          const cotData: Record<string, MessageChainOfThought> = {};
+          backendMessages.forEach((m: any) => {
+            converted.push({
+              id: m.id,
+              role: m.role as 'user' | 'assistant',
+              content: m.content,
+              timestamp: new Date(m.timestamp),
+            });
+            if (m.chainOfThought) {
+              cotData[m.id] = {
+                isStreaming: false,
+                thinking: m.chainOfThought.thinking || '',
+                toolExecutions: (m.chainOfThought.toolExecutions || []).map((t: any) => ({
+                  ...t,
+                  startTime: new Date(t.startTime),
+                  endTime: t.endTime ? new Date(t.endTime) : undefined,
+                }))
+              };
+            }
+          });
+          setMessages(converted);
+          setMessageChainOfThought(cotData);
+        }
+      }
+    } catch (error) {
+      console.error('Failed to load messages:', error);
+    }
+  };
+
+  // 删除会话
+  const deleteSession = async (targetSessionId: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      await fetch(`/api/sessions?sessionId=${targetSessionId}`, { method: 'DELETE' });
+    } catch (error) {
+      console.error('Failed to delete session:', error);
+    }
+    
+    const localSessions = JSON.parse(localStorage.getItem('assistant-local-sessions') || '[]');
+    const updatedLocalSessions = localSessions.filter((s: SessionInfo) => s.sessionId !== targetSessionId);
+    localStorage.setItem('assistant-local-sessions', JSON.stringify(updatedLocalSessions));
+    
+    if (targetSessionId === sessionId) {
+      createNewSession();
+    } else {
+      loadSessions();
+    }
+  };
+
+  // 获取会话标题
+  const getSessionTitle = (session: SessionInfo) => {
+    if (session.title) return session.title;
+    if (session.recentSummary) return session.recentSummary.slice(0, 20) + (session.recentSummary.length > 20 ? '...' : '');
+    return `会话 ${new Date(session.createdAt).toLocaleDateString('zh-CN')}`;
+  };
+
+  // 获取当前会话标题
+  const currentSessionTitle = sessions.find(s => s.sessionId === sessionId)
+    ? getSessionTitle(sessions.find(s => s.sessionId === sessionId)!)
+    : '';
+
+  // 初始化时加载会话列表
+  useEffect(() => {
+    loadSessions();
+  }, []);
+
+  const scrollToBottom = (smooth: boolean = false) => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTo({
+        top: scrollContainerRef.current.scrollHeight,
+        behavior: smooth ? 'smooth' : 'auto'
+      });
+    }
+  };
+
+  // Optimized scroll trigger - only scroll on new message append
+  useEffect(() => {
+    if (scrollMode !== 'auto') return;
+    
+    if (messages.length > lastMessageCountRef.current) {
+      scrollToBottom(false);
+    }
+    lastMessageCountRef.current = messages.length;
+  }, [messages, scrollMode]);
+
+  // Scroll on thinking process update (streaming) with debounce
+  useEffect(() => {
+    if (scrollMode !== 'auto' || !loading) return;
+    
+    const timer = setTimeout(() => {
+      scrollToBottom(false);
+    }, 100);
+    
+    return () => clearTimeout(timer);
+  }, [messageChainOfThought, scrollMode, loading]);
+
+  // Enhanced scroll detection with scroll mode support
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    const handleScroll = () => {
+      const scrollTop = container.scrollTop;
+      const scrollHeight = container.scrollHeight;
+      const clientHeight = container.clientHeight;
+      const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+      
+      // Switch to follow mode when > 100px from bottom
+      if (distanceFromBottom > 100) {
+        setScrollMode('follow');
+      } else if (distanceFromBottom < 50) {
+        setScrollMode('auto');
+      }
+      
+      setShowScrollButton(distanceFromBottom > 100);
+    };
+    container.addEventListener('scroll', handleScroll, { passive: true });
+    return () => container.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const parseSSELine = (line: string): PIEvent | null => {
+    if (!line.startsWith('data: ')) return null;
+    try {
+      return JSON.parse(line.slice(6));
+    } catch {
+      return null;
+    }
+  };
+
+  const handleSend = async () => {
+    if (!input.trim() || loading) return;
+
+    const userMessage: Message = {
+      id: generateUUID(),
+      role: 'user',
+      content: input.trim(),
+      timestamp: new Date(),
+    };
+
+    setMessages((prev) => [...prev, userMessage]);
+    const messageToSend = input;
+    setInput('');
+    setLoading(true);
+    setCurrentTool(null);
+
+    abortControllerRef.current = new AbortController();
+
+    let assistantContent = '';
+    let assistantMessageId = generateUUID();
+    let createdTicket: Message['ticket'] | null = null;
+
+    const mentionedInMessage = (input.match(/@([\w\u4e00-\u9fa5]+)/g) || []).map(m => m.slice(1));
+    const combinedSkills = Array.from(new Set([...selectedSkills, ...mentionedInMessage]));
+
+    try {
+      const uid = localStorage.getItem('userId');
+      const response = await fetch('/api/pi-chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          message: messageToSend,
+          sessionId: sessionId || undefined,
+          userId: uid || undefined,
+          skills: combinedSkills,
+          abort: true,
+        }),
+        signal: abortControllerRef.current.signal,
+      });
+
+      if (!response.ok) throw new Error(`请求失败: ${response.status}`);
+
+      const reader = response.body?.getReader();
+      const decoder = new TextDecoder();
+      if (!reader) throw new Error('No response body');
+
+      let buffer = '';
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\n');
+        buffer = lines.pop() || '';
+
+        for (const line of lines) {
+          const event = parseSSELine(line);
+          if (!event) continue;
+
+          switch (event.type) {
+            case 'session_start':
+            case 'session_restored':
+              if (event.sessionId) setSessionId(event.sessionId);
+              break;
+            case 'text':
+              assistantContent += event.content || '';
+              setMessages((prev) => {
+                const existing = prev.find((m) => m.id === assistantMessageId);
+                if (existing) {
+                  return prev.map((m) =>
+                    m.id === assistantMessageId ? { ...m, content: assistantContent, isStreaming: true } : m
+                  );
+                }
+                return [...prev, { id: assistantMessageId, role: 'assistant', content: assistantContent, timestamp: new Date(), isStreaming: true }];
+              });
+              break;
+            case 'thinking':
+              setMessageChainOfThought((prev) => ({
+                ...prev,
+                [assistantMessageId]: { ...prev[assistantMessageId], isStreaming: true, thinking: (prev[assistantMessageId]?.thinking || '') + (event.content || '') },
+              }));
+              break;
+            case 'tool_start':
+              setCurrentTool(event.toolName || null);
+              setMessageChainOfThought((prev) => {
+                const current = prev[assistantMessageId] || { isStreaming: true, thinking: '', toolExecutions: [] };
+                return { ...prev, [assistantMessageId]: { ...current, toolExecutions: [...current.toolExecutions, { toolName: event.toolName || '', startTime: new Date(), input: event.args }] } };
+              });
+              break;
+            case 'tool_end':
+              setCurrentTool(null);
+              break;
+            case 'tool_output':
+              if (event.content) {
+                try {
+                  let result = JSON.parse(event.content);
+                  if (typeof result === 'string' && (result.startsWith('{') || result.startsWith('['))) {
+                    try { result = JSON.parse(result); } catch {}
+                  }
+                  setMessageChainOfThought((prev) => {
+                    const current = prev[assistantMessageId] || { isStreaming: true, thinking: '', toolExecutions: [] };
+                    const tools = [...current.toolExecutions];
+                    const lastTool = tools[tools.length - 1];
+                    if (lastTool && !lastTool.output) {
+                      lastTool.output = result;
+                      lastTool.isError = event.isError;
+                      lastTool.endTime = new Date();
+                    }
+                    return { ...prev, [assistantMessageId]: { ...current, toolExecutions: tools } };
+                  });
+                  if (event.toolName === 'create_ticket' && result.details?.success && result.details.ticket) {
+                    const ticket = result.details.ticket;
+                    createdTicket = { id: ticket.id, title: ticket.title, type: ticket.type, status: ticket.status, priority: ticket.priority, description: ticket.description };
+                  }
+                } catch (e) {
+                  console.error('Failed to parse tool output:', e);
+                }
+              }
+              break;
+            case 'turn_end':
+              setMessageChainOfThought((prev) => {
+                if (prev[assistantMessageId]) return { ...prev, [assistantMessageId]: { ...prev[assistantMessageId], isStreaming: false } };
+                return prev;
+              });
+              if (!createdTicket && event.toolResults && Array.isArray(event.toolResults)) {
+                for (const result of event.toolResults) {
+                  if (result.toolName === 'create_ticket' && result.details?.ticket) {
+                    const ticket = result.details.ticket;
+                    createdTicket = { id: ticket.id, title: ticket.title, type: ticket.type, status: ticket.status, priority: ticket.priority, description: ticket.description };
+                    break;
+                  }
+                }
+              }
+              break;
+            case 'error':
+              setMessages((prev) => [...prev, { id: generateUUID(), role: 'system', content: `❌ 错误: ${event.error || '未知错误'}`, timestamp: new Date() }]);
+              break;
+          }
+        }
+      }
+
+      setMessages((prev) => prev.map((m) => m.id === assistantMessageId ? { ...m, isStreaming: false, ticket: createdTicket || undefined } : m));
+
+    } catch (error: unknown) {
+      if ((error as Error).name === 'AbortError') {
+        setMessages((prev) => [...prev, { id: generateUUID(), role: 'system', content: '\n⏸️ 已停止', timestamp: new Date() }]);
+      } else {
+        console.error('Stream error:', error);
+        setMessages((prev) => [...prev, { id: generateUUID(), role: 'system', content: `\n❌ 错误: ${error instanceof Error ? error.message : '未知错误'}`, timestamp: new Date() }]);
+      }
+    } finally {
+      setLoading(false);
+      setCurrentTool(null);
+      abortControllerRef.current = null;
+    }
+  };
+
+  const handleStop = () => {
+    if (abortControllerRef.current) abortControllerRef.current.abort();
+    setLoading(false);
+    setCurrentTool(null);
+  };
+
+  const convertSkillNamesForDisplay = (content: string): string => {
+    if (!skillNameMap || Object.keys(skillNameMap).length === 0) return content;
+    return content.replace(/@(\w+)/g, (match, dirName) => skillNameMap[dirName] ? `@${skillNameMap[dirName]}` : match);
+  };
+
+  const handleTicketAction = async (ticketId: string, action: 'approve' | 'reject' | 'execute') => {
+    try {
+      if (action === 'execute') {
+        await fetch(`/api/tickets/${ticketId}/execute`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ticketId }) });
+      } else {
+        await fetch(`/api/tickets/${ticketId}/approve`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action, approver: 'user', comment: '' }) });
+      }
+    } catch (error) {
+      console.error('Ticket action failed:', error);
+    }
+  };
+
+  if (!configChecked) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (!isConfigured || !isLoggedIn) {
+    return (
+      <div className="flex-1 flex items-center justify-center p-4">
+        <div className="bg-muted/50 border rounded-xl px-6 py-5 max-w-md text-center">
+          <Bot className="h-10 w-10 mx-auto mb-3 text-primary" />
+          <p className="font-medium mb-2">请先在桌面端完成配置</p>
+          <p className="text-sm text-muted-foreground">使用电脑访问以完成初始设置</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden">
+      {/* 工具栏 */}
+      <div className="px-2 py-2 border-b flex items-center gap-2 flex-shrink-0 overflow-x-auto">
+        {/* 会话列表按钮 */}
+        <Button 
+          variant="outline" 
+          size="sm" 
+          onClick={() => setSessionDrawerOpen(true)} 
+          className="h-8 flex-shrink-0"
+        >
+          <MessageSquare className="h-4 w-4 mr-1" />
+          切换会话
+        </Button>
+        
+        <Button variant="outline" size="sm" onClick={() => setSkillSwitcherOpen(true)} className="h-8 flex-shrink-0">
+          <Bot className="h-4 w-4 mr-1" />
+          技能
+        </Button>
+        <Button variant="outline" size="sm" onClick={() => setKnowledgePickerOpen(true)} className="h-8 flex-shrink-0">
+          <BookOpen className="h-4 w-4 mr-1" />
+          知识库
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={async () => {
+            if (!sessionId) return;
+            const shareUrl = `${window.location.origin}/h5/share/${sessionId}`;
+            await navigator.clipboard?.writeText(shareUrl);
+            setShareCopied(true);
+            setTimeout(() => setShareCopied(false), 2000);
+          }}
+          disabled={!sessionId}
+          className="h-8 flex-shrink-0"
+        >
+          {shareCopied ? <Check className="h-4 w-4" /> : <Share2 className="h-4 w-4" />}
+        </Button>
+      </div>
+
+      {/* 会话列表抽屉 */}
+      {sessionDrawerOpen && (
+        <>
+          <div className="fixed inset-0 bg-black/50 z-40" onClick={() => setSessionDrawerOpen(false)} />
+          <div className="fixed left-0 top-0 bottom-0 w-72 bg-card border-r z-50 flex flex-col">
+            <div className="p-3 border-b flex items-center justify-between">
+              <h3 className="font-medium">会话列表</h3>
+              <Button variant="ghost" size="sm" onClick={() => setSessionDrawerOpen(false)}>
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+            
+            {/* 新建会话按钮 */}
+            <div className="p-3 border-b">
+              <Button variant="outline" className="w-full justify-start gap-2" onClick={createNewSession}>
+                <Plus className="h-4 w-4" />
+                新建会话
+              </Button>
+            </div>
+            
+            {/* 会话列表 */}
+            <div className="flex-1 overflow-y-auto p-2">
+              {sessions.length === 0 ? (
+                <div className="text-center text-muted-foreground text-sm py-8">暂无会话记录</div>
+              ) : (
+                <div className="space-y-1">
+                  {sessions.map((session) => (
+                    <div
+                      key={session.sessionId}
+                      onClick={() => switchSession(session.sessionId)}
+                      className={cn(
+                        "p-2 rounded-lg cursor-pointer group flex items-start gap-2",
+                        session.sessionId === sessionId
+                          ? "bg-primary/10 text-primary"
+                          : "hover:bg-muted"
+                      )}
+                    >
+                      <MessageSquare className="h-4 w-4 mt-0.5 flex-shrink-0" />
+                      <div className="flex-1 min-w-0">
+                        <div className="text-sm truncate">{getSessionTitle(session)}</div>
+                        <div className="text-xs text-muted-foreground">
+                          {new Date(session.lastAccessedAt).toLocaleDateString('zh-CN')}
+                        </div>
+                      </div>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-6 w-6 opacity-0 group-hover:opacity-100"
+                        onClick={(e) => deleteSession(session.sessionId, e)}
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* 技能选择器弹窗 */}
+      {skillSwitcherOpen && (
+        <>
+          <div className="fixed inset-0 bg-black/50 z-40" onClick={() => setSkillSwitcherOpen(false)} />
+          <div className="fixed inset-x-0 bottom-20 bg-card border-t rounded-t-2xl z-50 max-h-[60vh] overflow-y-auto p-4">
+            <div className="flex items-center justify-between mb-3">
+              <h3 className="font-medium">选择技能</h3>
+              <Button variant="ghost" size="sm" onClick={() => setSkillSwitcherOpen(false)}><X className="h-4 w-4" /></Button>
+            </div>
+            <div className="space-y-2">
+              {availableSkills.length === 0 ? (
+                <p className="text-sm text-muted-foreground text-center py-4">暂无技能</p>
+              ) : (
+                availableSkills.map((skill) => (
+                  <button
+                    key={skill.name}
+                    onClick={() => {
+                      setSelectedSkills(prev => prev.includes(skill.name) ? prev.filter(s => s !== skill.name) : [...prev, skill.name]);
+                      setSkillSwitcherOpen(false);
+                    }}
+                    className={cn(
+                      "w-full p-3 rounded-lg border text-left",
+                      selectedSkills.includes(skill.name) ? "border-primary bg-primary/10" : "hover:bg-muted"
+                    )}
+                  >
+                    <div className="font-medium">{skill.displayName}</div>
+                    <div className="text-xs text-muted-foreground">{skill.description}</div>
+                  </button>
+                ))
+              )}
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* 消息区域 */}
+      <div ref={scrollContainerRef} className="flex-1 overflow-y-auto p-3">
+        {messages.length === 0 && (
+          <div className="flex justify-center items-center h-full">
+            <div className="bg-muted/50 border rounded-xl px-4 py-5 max-w-xs text-center">
+              <Bot className="h-8 w-8 mx-auto mb-2 text-primary" />
+              <p className="font-medium text-sm mb-1">智能助手</p>
+              <p className="text-xs text-muted-foreground">执行命令、创建工单、定时任务</p>
+            </div>
+          </div>
+        )}
+
+        {messages.map((message) => (
+          <div key={message.id} className={cn('flex gap-2 mb-4', message.role === 'user' && 'flex-row-reverse')}>
+            {message.role !== 'system' && (
+              <>
+                <div className="flex-shrink-0">
+                  {message.role === 'assistant' ? (
+                    <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
+                      <Bot className="h-5 w-5 text-primary" />
+                    </div>
+                  ) : (
+                    <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center">
+                      <User className="h-5 w-5 text-primary-foreground" />
+                    </div>
+                  )}
+                </div>
+                <div className={cn('flex flex-col flex-1', message.role === 'user' && 'items-end')}>
+                  {message.role === 'assistant' && messageChainOfThought[message.id] && messageChainOfThought[message.id].toolExecutions.length > 0 && (
+                    <details className="mb-2">
+                      <summary className="text-xs text-muted-foreground cursor-pointer hover:text-foreground">查看思考过程</summary>
+                      <ChainOfThought defaultOpen={false}>
+                        <ChainOfThoughtContent>
+                          {messageChainOfThought[message.id].thinking.trim().length > 0 && (
+                            <ChainOfThoughtStep icon={Brain} label="思考" status={messageChainOfThought[message.id].isStreaming ? 'active' : 'complete'}>
+                              <div className="text-xs text-muted-foreground whitespace-pre-wrap">{messageChainOfThought[message.id].thinking}</div>
+                            </ChainOfThoughtStep>
+                          )}
+                          {messageChainOfThought[message.id].toolExecutions.map((tool, idx) => (
+                            <ChainOfThoughtStep key={idx} label={tool.toolName} status={!tool.endTime ? 'active' : tool.isError ? 'pending' : 'complete'}>
+                              {tool.input && <pre className="text-xs mt-1 p-1 bg-muted rounded overflow-x-auto">{typeof tool.input === 'string' ? tool.input : JSON.stringify(tool.input)}</pre>}
+                              {tool.output && <pre className="text-xs mt-1 p-1 bg-muted rounded overflow-x-auto">{typeof tool.output === 'string' ? tool.output : JSON.stringify(tool.output)}</pre>}
+                            </ChainOfThoughtStep>
+                          ))}
+                        </ChainOfThoughtContent>
+                      </ChainOfThought>
+                    </details>
+                  )}
+                  <div className={cn('rounded-2xl px-3 py-2 max-w-[85%]', message.role === 'user' ? 'bg-primary text-primary-foreground' : 'bg-muted')}>
+                    <p className="text-sm whitespace-pre-wrap">{convertSkillNamesForDisplay(message.content)}</p>
+                  </div>
+                  {message.role === 'assistant' && message.ticket && !message.isStreaming && (
+                    <div className="mt-2">
+                      <div className="text-xs bg-orange-100 text-orange-800 px-2 py-1 rounded inline-block mb-1">
+                        工单: {message.ticket.title}
+                      </div>
+                      <div className="flex gap-1">
+                        <Button size="sm" variant="outline" className="h-6 text-xs" onClick={() => handleTicketAction(message.ticket!.id, 'approve')}>批准</Button>
+                        <Button size="sm" variant="outline" className="h-6 text-xs" onClick={() => handleTicketAction(message.ticket!.id, 'reject')}>拒绝</Button>
+                        {message.ticket.status === 'approved' && (
+                          <Button size="sm" className="h-6 text-xs" onClick={() => handleTicketAction(message.ticket!.id, 'execute')}>执行</Button>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                  {message.isStreaming && (
+                    <span className="text-xs text-primary mt-1 flex items-center gap-1">
+                      <span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse"></span>
+                      输入中...
+                    </span>
+                  )}
+                </div>
+              </>
+            )}
+            {message.role === 'system' && (
+              <div className="w-full">
+                <div className="bg-destructive/10 border border-destructive/20 rounded-lg px-3 py-2 text-sm text-destructive">
+                  {message.content}
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+
+        {currentTool && (
+          <div className="flex justify-center mb-4">
+            <div className="bg-primary/10 border border-primary/20 rounded-lg px-3 py-1.5 text-xs text-primary flex items-center gap-2">
+              <span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse"></span>
+              执行: {currentTool}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 滚动模式切换按钮 */}
+      <div className="fixed bottom-20 right-4 z-30 flex flex-col gap-2">
+        {/* 滚动模式切换 */}
+        <Button
+          onClick={() => {
+            const newMode = scrollMode === 'auto' ? 'follow' : 'auto';
+            setScrollMode(newMode);
+            if (newMode === 'auto') {
+              scrollToBottom(true);
+            }
+          }}
+          className={cn(
+            "rounded-full shadow-lg h-9",
+            scrollMode === 'auto' 
+              ? "bg-muted-foreground/80 hover:bg-muted-foreground/90" 
+              : "bg-secondary hover:bg-secondary/80"
+          )}
+          size="sm"
+        >
+          {scrollMode === 'auto' ? (
+            <><ChevronDown className="h-3 w-3 mr-1" /><span className="text-xs">自动</span></>
+          ) : (
+            <span className="text-xs px-1">跟随</span>
+          )}
+        </Button>
+        
+        {/* 滚动到底部按钮 */}
+        {showScrollButton && (
+          <Button
+            onClick={() => {
+              setScrollMode('auto');
+              scrollToBottom(true);
+            }}
+            className="rounded-full shadow-lg h-10"
+            size="sm"
+          >
+            <ChevronDown className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+
+      {/* 输入区域 */}
+      <div className="p-3 border-t bg-card flex-shrink-0">
+        {loading && (
+          <div className="flex items-center justify-between mb-2">
+            <div className="flex items-center gap-2">
+              <span className="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
+              <span className="text-xs text-muted-foreground">{currentTool ? `执行: ${currentTool}` : 'AI 思考中...'}</span>
+            </div>
+            <Button variant="destructive" size="sm" onClick={handleStop} className="h-7 text-xs">停止</Button>
+          </div>
+        )}
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey && !loading) { e.preventDefault(); handleSend(); } }}
+            placeholder="输入消息..."
+            className="flex-1 px-3 py-2 border rounded-lg bg-background text-sm"
+            disabled={loading}
+          />
+          <Button onClick={handleSend} disabled={loading || !input.trim()} size="icon" className="flex-shrink-0">
+            <Send className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* 知识库选择弹窗 */}
+      <KnowledgePickerDialog
+        open={knowledgePickerOpen}
+        onOpenChange={setKnowledgePickerOpen}
+        onSelect={(knowledge) => {
+          setInput(prev => prev + `@doc:${knowledge.title}`);
+        }}
+      />
+    </div>
+  );
+}