fix(ui): 修复 React key 警告和 forwardRef 问题

- ChatMessage/SessionItem 使用 forwardRef 支持 AnimatePresence
- useChat 为 message_received/done 事件生成唯一消息 ID
- sessions API 为历史消息添加 ID 字段
- cli 添加 @types/inquirer 依赖

packages/ui/src/components/ChatMessage.tsx

@@ -4,7 +4,7 @@
 
 import { User, Bot, Copy, Check } from 'lucide-react';
 import { motion } from 'framer-motion';
-import { useState } from 'react';
+import { useState, forwardRef } from 'react';
 import { cn } from '../utils/cn';
 import { fadeInUp, smoothTransition } from '../utils/animations';
 import { Markdown } from './Markdown';
@@ -14,62 +14,65 @@ interface ChatMessageProps {
   message: Message;
 }
 
-export function ChatMessage({ message }: ChatMessageProps) {
-  const isUser = message.role === 'user';
-  const [copied, setCopied] = useState(false);
+export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
+  ({ message }, ref) => {
+    const isUser = message.role === 'user';
+    const [copied, setCopied] = useState(false);
 
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(message.content);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
+    const handleCopy = async () => {
+      await navigator.clipboard.writeText(message.content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    };
 
-  return (
-    <motion.div
-      variants={fadeInUp}
-      initial="initial"
-      animate="animate"
-      exit="exit"
-      transition={smoothTransition}
-      className={cn(
-        'group flex gap-4 p-4 rounded-lg',
-        isUser ? 'bg-gray-800' : 'bg-gray-800/50'
-      )}
-    >
-      <div
+    return (
+      <motion.div
+        ref={ref}
+        variants={fadeInUp}
+        initial="initial"
+        animate="animate"
+        exit="exit"
+        transition={smoothTransition}
         className={cn(
-          'w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0',
-          isUser ? 'bg-primary-600' : 'bg-green-600'
+          'group flex gap-4 p-4 rounded-lg',
+          isUser ? 'bg-gray-800' : 'bg-gray-800/50'
         )}
       >
-        {isUser ? <User size={18} /> : <Bot size={18} />}
-      </div>
-      <div className="flex-1 min-w-0 overflow-hidden">
-        <div className="flex items-center justify-between mb-1">
-          <span className="text-sm text-gray-400">
-            {isUser ? 'You' : 'AI Assistant'}
-          </span>
-          <button
-            onClick={handleCopy}
-            className="opacity-0 group-hover:opacity-100 p-1 rounded text-gray-500 hover:text-gray-300 hover:bg-gray-700 transition-all"
-            title="Copy message"
-          >
-            {copied ? <Check size={14} className="text-green-500" /> : <Copy size={14} />}
-          </button>
-        </div>
-        <div className="message-content text-gray-200">
-          {isUser ? (
-            // 用户消息：保持原样显示
-            <div className="whitespace-pre-wrap break-words">{message.content}</div>
-          ) : (
-            // AI 消息：Markdown 渲染
-            <Markdown content={message.content} />
+        <div
+          className={cn(
+            'w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0',
+            isUser ? 'bg-primary-600' : 'bg-green-600'
           )}
+        >
+          {isUser ? <User size={18} /> : <Bot size={18} />}
         </div>
-      </div>
-    </motion.div>
-  );
-}
+        <div className="flex-1 min-w-0 overflow-hidden">
+          <div className="flex items-center justify-between mb-1">
+            <span className="text-sm text-gray-400">
+              {isUser ? 'You' : 'AI Assistant'}
+            </span>
+            <button
+              onClick={handleCopy}
+              className="opacity-0 group-hover:opacity-100 p-1 rounded text-gray-500 hover:text-gray-300 hover:bg-gray-700 transition-all"
+              title="Copy message"
+            >
+              {copied ? <Check size={14} className="text-green-500" /> : <Copy size={14} />}
+            </button>
+          </div>
+          <div className="message-content text-gray-200">
+            {isUser ? (
+              // 用户消息：保持原样显示
+              <div className="whitespace-pre-wrap break-words">{message.content}</div>
+            ) : (
+              // AI 消息：Markdown 渲染
+              <Markdown content={message.content} />
+            )}
+          </div>
+        </div>
+      </motion.div>
+    );
+  }
+);
 
 interface StreamingMessageProps {
   content: string;