chore: update

src/ai/AIChat.tsx

@@ -2,21 +2,22 @@ import { useState, KeyboardEvent, useEffect, useRef } from 'react'
 import { Button, Card, FloatButton, Input, Select } from 'antd'
 import { CircleArrowLeft, CircleArrowRight } from 'lucide-react'
 import { OpenAIOutlined, ArrowUpOutlined } from '@ant-design/icons'
-import { useAIStore, AIMessage } from './useAIStore'
-import MarkdownRender from '@/components/MarkdownRender'
+import { useAIStore } from './useAIStore'
+// import MarkdownRender from '@/components/MarkdownRender'
+import AIBubble from './AIBubble'
 import './AIChat.scss'
 
-export const MessageItem = ({ message }: { message: AIMessage }) => {
-  return (
-    <div className={`message-item ${message.role}`}>
-      <div className="message-box">
-        <div className="message-content">
-          <MarkdownRender>{message.content}</MarkdownRender>
-        </div>
-      </div>
-    </div>
-  )
-}
+// export const MessageItem = ({ message }: { message: AIMessage }) => {
+//   return (
+//     <div className={`message-item ${message.role}`}>
+//       <div className="message-box">
+//         <div className="message-content">
+//           <MarkdownRender>{message.content}</MarkdownRender>
+//         </div>
+//       </div>
+//     </div>
+//   )
+// }
 
 export default function AIChat() {
   const { ai, setAI, options, post, messages, isLoading, collapsed, toggleCollapsed } = useAIStore()
@@ -51,7 +52,16 @@ export default function AIChat() {
         <div className="ai-chat-container">
           <div className="message-scroll" ref={messageScrollRef}>
             {messages.map((message, index) => {
-              return <MessageItem message={message} key={index}></MessageItem>
+              return (
+                <AIBubble
+                  placement={message.role === 'assistant' ? 'start' : 'end'}
+                  content={message.full_content || message.content}
+                  loading={message.status === 'loading'}
+                  typing={isLoading && index === messages.length - 1}
+                  key={index}
+                  style={{ margin: '10px 0' }}
+                />
+              )
             })}
           </div>
           <div className="input-container">

src/ai/types.ts

@@ -10,7 +10,7 @@ export interface AIMessage {
   reasoning_content?: string
   full_content?: string
   json?: any
-  status?: 'loading' | 'success' | 'error'
+  status?: 'loading' | 'success' | 'error' | 'typing'
 }
 
 export interface AIData {