From d2b90ffdd808c4b394f6350dae170744afe3c535 Mon Sep 17 00:00:00 2001
From: brokun <yukun.wyk@antgroup.com>
Date: Wed, 7 Aug 2024 00:50:10 +0800
Subject: [PATCH 1/5] feat(ui): chat & session management

---
 .../chat-message/chat-message-model.ts        | 59 +++++++++++++++++--
 web/ui/src/modules/chat-message/protocol.ts   | 10 ++--
 web/ui/src/modules/session/session-manager.ts | 14 ++++-
 web/ui/src/modules/session/session-model.ts   | 17 +++++-
 .../views/chat/components/message/index.less  |  1 +
 .../views/chat/components/message/message.tsx |  4 +-
 web/ui/src/views/sessions/view.tsx            | 27 ++++++++-
 7 files changed, 117 insertions(+), 15 deletions(-)

diff --git a/web/ui/src/modules/chat-message/chat-message-model.ts b/web/ui/src/modules/chat-message/chat-message-model.ts
index b1cf104..ce4cf75 100644
--- a/web/ui/src/modules/chat-message/chat-message-model.ts
+++ b/web/ui/src/modules/chat-message/chat-message-model.ts
@@ -1,20 +1,29 @@
+import type { Disposable, Event } from '@difizen/mana-app';
+import { Emitter } from '@difizen/mana-app';
 import { inject, prop, transient } from '@difizen/mana-app';
 import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
 
 import { AxiosClient } from '../axios-client/index.js';
 
-import type { MessageCreate, MessageItem, MessageOption } from './protocol.js';
+import type {
+  APIMessage,
+  MessageCreate,
+  MessageItem,
+  MessageOption,
+} from './protocol.js';
 import { ChatMessageType } from './protocol.js';
 import { ChatMessageOption } from './protocol.js';
 
 @transient()
-export class ChatMessageModel {
+export class ChatMessageModel implements Disposable {
   protected axios: AxiosClient;
   option: ChatMessageOption;
 
-  id: number;
+  id?: number;
   agentId: string;
   sessionId: string;
+
   @prop()
   messages: MessageItem[] = [];
   @prop()
@@ -22,12 +31,17 @@ export class ChatMessageModel {
 
   @prop()
   modified?: Dayjs;
+
   @prop()
   complete?: boolean = true;
 
   @prop()
   sending?: boolean = false;
 
+  disposed = false;
+  onDispose: Event<void>;
+  protected onDisposeEmitter = new Emitter<void>();
+
   constructor(
     @inject(ChatMessageOption) option: ChatMessageOption,
     @inject(AxiosClient) axios: AxiosClient,
@@ -42,16 +56,40 @@ export class ChatMessageModel {
     }
   }
 
+  dispose = (): void => {
+    this.disposed = true;
+    this.onDisposeEmitter.fire();
+  };
+
   updateMeta = (option: MessageOption) => {
     this.id = option.id;
     this.agentId = option.agentId;
     this.sessionId = option.sessionId;
     this.messages = option.messages;
+    if (option.created) {
+      this.created = dayjs(option.created);
+    }
+    if (option.modified) {
+      this.modified = dayjs(option.modified);
+    }
   };
 
   send = async (option: MessageCreate) => {
     this.sending = true;
-    const res = await this.axios.post<MessageOption>(
+
+    const opt: MessageOption = {
+      ...option,
+      messages: [
+        {
+          senderType: 'HUMAN',
+          content: option.input,
+        },
+      ],
+    };
+
+    this.updateMeta(opt);
+
+    const res = await this.axios.post<APIMessage>(
       `/api/v1/agents/${option.agentId}/chat`,
       {
         agent_id: option.agentId,
@@ -59,8 +97,17 @@ export class ChatMessageModel {
         input: option.input,
       },
     );
-    if (res.data.id) {
-      this.updateMeta(res.data);
+    if (res.status === 200) {
+      const data = res.data;
+      this.id = data.message_id;
+      this.created = dayjs(data.gmt_created);
+      this.modified = dayjs(data.gmt_modified);
+      if (res.data.output) {
+        this.messages.push({
+          senderType: 'AI',
+          content: res.data.output,
+        });
+      }
     }
     this.sending = false;
   };
diff --git a/web/ui/src/modules/chat-message/protocol.ts b/web/ui/src/modules/chat-message/protocol.ts
index 68b27aa..d46bb12 100644
--- a/web/ui/src/modules/chat-message/protocol.ts
+++ b/web/ui/src/modules/chat-message/protocol.ts
@@ -20,12 +20,12 @@ export interface MessageItem {
 }
 
 export interface MessageOption {
-  id: number;
+  id?: number;
   sessionId: string;
   agentId: string;
   messages: MessageItem[];
-  created: string;
-  modified: string;
+  created?: string;
+  modified?: string;
 }
 
 export const ChatMessageType = {
@@ -56,6 +56,8 @@ export interface APIContentItem {
   content: string;
 }
 export interface APIMessage {
+  message_id: number;
+  output?: string;
   content: string;
   gmt_created: string;
   gmt_modified: string;
@@ -75,7 +77,7 @@ export const toMessageOption = (msg: APIMessage, agentId: string): MessageOption
     items = JSON.parse(msg.content);
   }
   return {
-    id: msg.id,
+    id: msg.message_id,
     sessionId: msg.session_id,
     agentId,
     messages: items.map(toMessageItem),
diff --git a/web/ui/src/modules/session/session-manager.ts b/web/ui/src/modules/session/session-manager.ts
index cfba96f..92b2a6b 100644
--- a/web/ui/src/modules/session/session-manager.ts
+++ b/web/ui/src/modules/session/session-manager.ts
@@ -33,12 +33,21 @@ export class SessionManager {
     const res = await this.axios.post<APISession>(`/api/v1/sessions`, {
       agent_id: option.agentId,
     });
-    if (!res.data.id) {
+    if (res.status !== 200) {
       throw new Error('Create session failed');
     }
     return toSessionOption(res.data);
   };
 
+  deleteSession = async (session: SessionModel): Promise<boolean> => {
+    const res = await this.axios.delete<APISession>(`/api/v1/sessions/${session.id}`);
+    if (res.status !== 200) {
+      return false;
+    }
+    session.dispose();
+    return true;
+  };
+
   getOrCreateSession = (option: SessionOption): SessionModel => {
     const currentOption = option;
     if (!currentOption.id) {
@@ -49,6 +58,9 @@ export class SessionManager {
       return exist;
     }
     const session = this.factory(currentOption);
+    session.onDispose(() => {
+      this.cache.delete(currentOption.id);
+    });
     this.cache.set(currentOption.id, session);
     return session;
   };
diff --git a/web/ui/src/modules/session/session-model.ts b/web/ui/src/modules/session/session-model.ts
index 6a9e7ec..ce436c0 100644
--- a/web/ui/src/modules/session/session-model.ts
+++ b/web/ui/src/modules/session/session-model.ts
@@ -1,3 +1,5 @@
+import type { Disposable, Event } from '@difizen/mana-app';
+import { Emitter } from '@difizen/mana-app';
 import { inject, prop, transient } from '@difizen/mana-app';
 
 import { AsyncModel } from '../../common/async-model.js';
@@ -9,7 +11,10 @@ import type { APISession } from './protocol.js';
 import { SessionOption, SessionOptionType, toSessionOption } from './protocol.js';
 
 @transient()
-export class SessionModel extends AsyncModel<SessionModel, SessionOption> {
+export class SessionModel
+  extends AsyncModel<SessionModel, SessionOption>
+  implements Disposable
+{
   chatMessage: ChatMessageManager;
   axios: AxiosClient;
   id?: string;
@@ -18,6 +23,10 @@ export class SessionModel extends AsyncModel<SessionModel, SessionOption> {
   protected modified?: string;
   option: SessionOption;
 
+  disposed = false;
+  onDispose: Event<void>;
+  protected onDisposeEmitter = new Emitter<void>();
+
   @prop()
   messages: ChatMessageModel[] = [];
 
@@ -27,12 +36,18 @@ export class SessionModel extends AsyncModel<SessionModel, SessionOption> {
     @inject(ChatMessageManager) chatMessage: ChatMessageManager,
   ) {
     super();
+    this.onDispose = this.onDisposeEmitter.event;
     this.option = option;
     this.axios = axios;
     this.chatMessage = chatMessage;
     this.initialize(option);
   }
 
+  dispose = (): void => {
+    this.disposed = true;
+    this.onDisposeEmitter.fire();
+  };
+
   shouldInitFromMeta(option: SessionOption): boolean {
     return SessionOptionType.isFullOption(option);
   }
diff --git a/web/ui/src/views/chat/components/message/index.less b/web/ui/src/views/chat/components/message/index.less
index adb9df7..b6facfe 100644
--- a/web/ui/src/views/chat/components/message/index.less
+++ b/web/ui/src/views/chat/components/message/index.less
@@ -18,6 +18,7 @@
     &-header {
       display: flex;
       align-items: center;
+      height: 28px;
 
       &-nickname {
         color: rgba(29, 28, 35, 60%);
diff --git a/web/ui/src/views/chat/components/message/message.tsx b/web/ui/src/views/chat/components/message/message.tsx
index b82dd80..9cae4e3 100644
--- a/web/ui/src/views/chat/components/message/message.tsx
+++ b/web/ui/src/views/chat/components/message/message.tsx
@@ -64,7 +64,9 @@ export const Message = (props: MessageProps) => {
         </div>
         <div className="chat-message-container">
           <div className="chat-message-container-header">
-            <div className="chat-message-container-header-nickname">{nickName}</div>
+            <div className="chat-message-container-header-nickname">
+              {nickName || '我'}
+            </div>
             {contentHover && exchange.created && (
               <span className="chat-message-container-header-created-time">
                 {exchange.created?.toString()}
diff --git a/web/ui/src/views/sessions/view.tsx b/web/ui/src/views/sessions/view.tsx
index da789eb..0a98433 100644
--- a/web/ui/src/views/sessions/view.tsx
+++ b/web/ui/src/views/sessions/view.tsx
@@ -1,3 +1,4 @@
+import { CloseOutlined } from '@ant-design/icons';
 import {
   BaseView,
   ViewInstance,
@@ -26,6 +27,7 @@ const SessionsViewComponent = forwardRef<HTMLDivElement>(
         {instance.sessions.map((session) => (
           <div onClick={() => instance.selectSession(session)} key={session.id}>
             {session.id}
+            <CloseOutlined onClick={() => instance.deleteSession(session)} />
           </div>
         ))}
         <Button onClick={instance.createSession}>开启新会话</Button>
@@ -49,7 +51,7 @@ export class SessionsView extends BaseView {
   sessions: SessionModel[] = [];
 
   @prop()
-  active: SessionModel;
+  active?: SessionModel;
 
   override view = SessionsViewComponent;
 
@@ -65,7 +67,11 @@ export class SessionsView extends BaseView {
   override async onViewMount(): Promise<void> {
     this.loadig = true;
     const sessions = await this.sessionManager.getSessions(this.agentId);
-    this.sessions = sessions.map(this.sessionManager.getOrCreateSession);
+    this.sessions = sessions.map((opt) => {
+      const session = this.sessionManager.getOrCreateSession(opt);
+      session.onDispose(() => this.disposeSession(session));
+      return session;
+    });
     if (!this.active) {
       this.active = this.sessions[0];
     }
@@ -79,7 +85,24 @@ export class SessionsView extends BaseView {
   createSession = async () => {
     const opt = await this.sessionManager.createSession({ agentId: this.agentId });
     const session = this.sessionManager.getOrCreateSession(opt);
+    session.onDispose(() => this.disposeSession(session));
     this.sessions.unshift(session);
     this.active = session;
   };
+
+  protected disposeSession = (session: SessionModel) => {
+    const sessions = this.sessions.filter((i) => i.id !== session.id);
+    if (this.active.id === session.id) {
+      if (sessions.length > 0) {
+        this.active = sessions[0];
+      } else {
+        this.active = undefined;
+      }
+    }
+    this.sessions = sessions;
+  };
+
+  deleteSession = async (session: SessionModel) => {
+    await this.sessionManager.deleteSession(session);
+  };
 }

From 40188e5f61ee5defc72b42b9113dc682ecaf2626 Mon Sep 17 00:00:00 2001
From: brokun <yukun.wyk@antgroup.com>
Date: Wed, 7 Aug 2024 03:57:39 +0800
Subject: [PATCH 2/5] feat(ui): stream chat api

---
 .../src/magent_ui/routers/agents/router.py    | 73 ++++++++++++++++++-
 1 file changed, 72 insertions(+), 1 deletion(-)

diff --git a/packages/magent_ui/src/magent_ui/routers/agents/router.py b/packages/magent_ui/src/magent_ui/routers/agents/router.py
index 46a1614..b5fddb5 100644
--- a/packages/magent_ui/src/magent_ui/routers/agents/router.py
+++ b/packages/magent_ui/src/magent_ui/routers/agents/router.py
@@ -1,9 +1,12 @@
+import asyncio
 import enum
-from typing import List
+import json
+from typing import AsyncIterable, List
 from fastapi import APIRouter
 from agentuniverse_product.service.agent_service.agent_service import AgentService
 from agentuniverse_product.service.model.agent_dto import AgentDTO
 from pydantic import BaseModel
+from sse_starlette import EventSourceResponse, ServerSentEvent
 
 router = APIRouter()
 agents_router = router
@@ -51,3 +54,71 @@ async def chat(agent_id, model: MessageCreate):
         model.agent_id, model.session_id, model.input)
     print(output_dict)
     return MessageOutput.model_validate(output_dict)
+
+
+class SSEType(enum.Enum):
+    MESSAGE = "message"
+    STEPS = "steps"
+    BLANK_MESSAGE = "blank_message"
+    CHUNK = "chunk"
+    ERROR = "error"
+    EOF = "EOF"
+    RESULT = "result"
+
+
+# class AgentStep(BaseModel):
+#     input: str
+#     output: str
+
+
+# class AgentIntermediateSteps(BaseModel):
+#     type: str
+#     output: List[str | AgentStep] = []
+#     agent_id: str
+
+
+# class TokenUsage(BaseModel):
+#     completion_tokens: int
+#     prompt_tokens: int
+#     total_tokens: int
+
+
+# class InvocationSource(BaseModel):
+#     source: str
+#     type: str
+
+
+# class AgentOutput(BaseModel):
+#     message_id: int
+#     session_id: str
+#     response_time: float
+#     output: str
+#     start_time: str
+#     end_time: str
+#     type: str
+#     agent_id: str
+#     invocation_chain: List[InvocationSource] = []
+#     token_usage: TokenUsage
+
+async def iterator_to_async_iterable(sync_iter) -> AsyncIterable:
+    for item in sync_iter:
+        await asyncio.sleep(0)  # 允许其他异步任务运行
+        yield item
+
+
+async def send_message(model: MessageCreate) -> AsyncIterable[ServerSentEvent]:
+    msg_iterator = iterator_to_async_iterable(AgentService.stream_chat(
+        model.agent_id, model.session_id, model.input))
+    async for msg_chunk in msg_iterator:
+        type = msg_chunk.get("type", None)
+        if type == "token":
+            yield ServerSentEvent(event=SSEType.CHUNK.value, id=model.session_id, data=json.dumps(msg_chunk, ensure_ascii=False))
+        if type == "intermediate_steps":
+            yield ServerSentEvent(event=SSEType.STEPS.value, id=model.session_id, data=json.dumps(msg_chunk, ensure_ascii=False))
+        if type == "final_result":
+            yield ServerSentEvent(event=SSEType.RESULT.value, id=model.session_id, data=json.dumps(msg_chunk, ensure_ascii=False))
+
+
+@router.post("/agents/{agent_id}/stream-chat")
+async def stream_chat(agent_id, model: MessageCreate):
+    return EventSourceResponse(send_message(model), media_type="text/event-stream")

From 328ef1933a57b15aa0f32c8f29e828fbc1ee4746 Mon Sep 17 00:00:00 2001
From: brokun <yukun.wyk@antgroup.com>
Date: Wed, 7 Aug 2024 03:58:01 +0800
Subject: [PATCH 3/5] feat(ui): stream chat

---
 package.json                                  |   8 -
 web/platform/package.json                     |   8 +
 .../modules/chat/components/Avatar/index.less |   6 -
 .../modules/chat/components/Avatar/index.tsx  |  13 --
 .../components/message/Markdown/index.tsx     |   2 +-
 .../message/markdown-message/index.tsx        |   2 +-
 .../chat/components/message/message.tsx       |   2 +-
 web/ui/package.json                           |   8 +
 .../modules/chat-message/chat-message-item.ts |  67 ++++++
 .../chat-message/chat-message-model.ts        | 154 +++++++++++---
 web/ui/src/modules/chat-message/module.ts     |  24 ++-
 web/ui/src/modules/chat-message/protocol.ts   |  33 ++-
 web/ui/src/modules/session/session-model.ts   |  20 ++
 .../src/views/chat/components/input/icon.tsx  | 197 ++++++++++++++++++
 .../views/chat/components/input/index.less    |  67 +++++-
 .../src/views/chat/components/input/index.tsx |  74 ++++---
 .../chat/components/message/exchange.tsx      |   4 +-
 .../views/chat/components/message/index.less  | 149 +++++++------
 .../message/markdown-message/index.less       |  64 ++++++
 .../message/markdown-message/index.tsx        |  19 ++
 .../components/message/markdown/index.less    |  82 ++++++++
 .../components/message/markdown/index.tsx     | 131 ++++++++++++
 .../markdown/modules/CodeBlock/index.less     |  42 ++++
 .../markdown/modules/CodeBlock/index.tsx      |  38 ++++
 .../views/chat/components/message/message.tsx | 158 ++++++++------
 .../chat/components/message/text/index.less   |  17 ++
 .../chat/components/message/text/index.tsx    |   9 +
 web/ui/src/views/chat/index.less              |   4 +-
 web/ui/src/views/chat/view.tsx                |   6 +-
 29 files changed, 1187 insertions(+), 221 deletions(-)
 delete mode 100644 web/platform/src/modules/chat/components/Avatar/index.less
 delete mode 100644 web/platform/src/modules/chat/components/Avatar/index.tsx
 create mode 100644 web/ui/src/modules/chat-message/chat-message-item.ts
 create mode 100644 web/ui/src/views/chat/components/input/icon.tsx
 create mode 100644 web/ui/src/views/chat/components/message/markdown-message/index.less
 create mode 100644 web/ui/src/views/chat/components/message/markdown-message/index.tsx
 create mode 100644 web/ui/src/views/chat/components/message/markdown/index.less
 create mode 100644 web/ui/src/views/chat/components/message/markdown/index.tsx
 create mode 100644 web/ui/src/views/chat/components/message/markdown/modules/CodeBlock/index.less
 create mode 100644 web/ui/src/views/chat/components/message/markdown/modules/CodeBlock/index.tsx
 create mode 100644 web/ui/src/views/chat/components/message/text/index.less
 create mode 100644 web/ui/src/views/chat/components/message/text/index.tsx

diff --git a/package.json b/package.json
index dc08491..2ad3232 100644
--- a/package.json
+++ b/package.json
@@ -47,14 +47,12 @@
     "@swc/jest": "^0.2.36",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.11.19",
-    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/react-test-renderer": "^18.0.7",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@umijs/lint": "^4.1.1",
     "babel-jest": "^29.7.0",
     "babel-plugin-parameter-decorator": "^1.0.16",
-    "copy-to-clipboard": "^3.3.3",
     "dotenv-cli": "^7.3.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^8.10.0",
@@ -71,16 +69,10 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-less-loader": "^0.2.0",
     "lint-staged": "^13.3.0",
-    "lodash": "^4.17.21",
     "nx": "^16.10.0",
     "postcss-less": "^6.0.0",
     "prettier": "^3.2.5",
-    "react-markdown": "^9.0.1",
-    "react-syntax-highlighter": "^15.5.0",
     "react-test-renderer": "^18.2.0",
-    "react-zoom-pan-pinch": "^3.6.1",
-    "remark-breaks": "^4.0.0",
-    "remark-gfm": "^4.0.0",
     "stylelint": "^14.16.1",
     "typescript": "^4.9.5"
   },
diff --git a/web/platform/package.json b/web/platform/package.json
index 1f536e4..a3b767f 100644
--- a/web/platform/package.json
+++ b/web/platform/package.json
@@ -36,6 +36,13 @@
     "eventsource-parser": "^1.1.2",
     "lodash.debounce": "^4.0.8",
     "query-string": "^9.0.0",
+    "copy-to-clipboard": "^3.3.3",
+    "lodash": "^4.17.21",
+    "react-markdown": "^9.0.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "react-zoom-pan-pinch": "^3.6.1",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.0",
     "umi": "^4.1.1"
   },
   "devDependencies": {
@@ -44,6 +51,7 @@
     "@babel/plugin-transform-flow-strip-types": "^7.23.3",
     "@babel/plugin-transform-private-methods": "^7.23.3",
     "@babel/plugin-transform-private-property-in-object": "^7.23.4",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
diff --git a/web/platform/src/modules/chat/components/Avatar/index.less b/web/platform/src/modules/chat/components/Avatar/index.less
deleted file mode 100644
index 7bceb24..0000000
--- a/web/platform/src/modules/chat/components/Avatar/index.less
+++ /dev/null
@@ -1,6 +0,0 @@
-.chat-user-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 16px;
-  object-fit: cover;
-}
diff --git a/web/platform/src/modules/chat/components/Avatar/index.tsx b/web/platform/src/modules/chat/components/Avatar/index.tsx
deleted file mode 100644
index 4b3e491..0000000
--- a/web/platform/src/modules/chat/components/Avatar/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import './index.less';
-
-interface AvatarProps {
-  workNo?: string;
-  url?: string;
-}
-export const Avatar = (props: AvatarProps) => {
-  const src =
-    props.url ||
-    `https://antwork.antgroup-inc.cn/photo/${props.workNo}.${64}x${64}.jpg`;
-
-  return <img className={'chat-user-avatar'} src={src} />;
-};
diff --git a/web/platform/src/modules/chat/components/message/Markdown/index.tsx b/web/platform/src/modules/chat/components/message/Markdown/index.tsx
index 0378efd..e798db8 100644
--- a/web/platform/src/modules/chat/components/message/Markdown/index.tsx
+++ b/web/platform/src/modules/chat/components/message/Markdown/index.tsx
@@ -6,8 +6,8 @@ import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
 import breaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
 
-import './index.less';
 import { CodeBlock } from './modules/CodeBlock/index.js';
+import './index.less';
 
 // const PreBlock = (...args:any) => {
 //   console.log(args)
diff --git a/web/platform/src/modules/chat/components/message/markdown-message/index.tsx b/web/platform/src/modules/chat/components/message/markdown-message/index.tsx
index 0b34115..0312c78 100644
--- a/web/platform/src/modules/chat/components/message/markdown-message/index.tsx
+++ b/web/platform/src/modules/chat/components/message/markdown-message/index.tsx
@@ -1,6 +1,6 @@
 import { useRef } from 'react';
 
-import { Markdown } from '../Markdown/index.js';
+import { Markdown } from '../markdown/index.js';
 
 import './index.less';
 
diff --git a/web/platform/src/modules/chat/components/message/message.tsx b/web/platform/src/modules/chat/components/message/message.tsx
index 48b5dbd..fdf0440 100644
--- a/web/platform/src/modules/chat/components/message/message.tsx
+++ b/web/platform/src/modules/chat/components/message/message.tsx
@@ -19,7 +19,7 @@ import Typing from '../typing/index.js';
 import './index.less';
 
 import { MarkdownMessage } from './markdown-message/index.js';
-import { TextMessage } from './Text/index.js';
+import { TextMessage } from './text/index.js';
 
 interface MessageProps {
   message: ChatMessage;
diff --git a/web/ui/package.json b/web/ui/package.json
index 47db2cf..a002c21 100644
--- a/web/ui/package.json
+++ b/web/ui/package.json
@@ -37,6 +37,13 @@
     "eventsource-parser": "^1.1.2",
     "lodash.debounce": "^4.0.8",
     "query-string": "^9.0.0",
+    "copy-to-clipboard": "^3.3.3",
+    "lodash": "^4.17.21",
+    "react-markdown": "^9.0.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "react-zoom-pan-pinch": "^3.6.1",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.0",
     "umi": "^4.1.1"
   },
   "devDependencies": {
@@ -45,6 +52,7 @@
     "@babel/plugin-transform-flow-strip-types": "^7.23.3",
     "@babel/plugin-transform-private-methods": "^7.23.3",
     "@babel/plugin-transform-private-property-in-object": "^7.23.4",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
diff --git a/web/ui/src/modules/chat-message/chat-message-item.ts b/web/ui/src/modules/chat-message/chat-message-item.ts
new file mode 100644
index 0000000..f1e521b
--- /dev/null
+++ b/web/ui/src/modules/chat-message/chat-message-item.ts
@@ -0,0 +1,67 @@
+import { inject, prop, transient } from '@difizen/mana-app';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+
+import { AxiosClient } from '../axios-client/index.js';
+
+import { ChatMessageItemOption, AnswerState } from './protocol.js';
+import type { ChatEventChunk, QuestionState, MessageSender } from './protocol.js';
+
+@transient()
+export class ChatMessageItem {
+  protected axios: AxiosClient;
+  option: ChatMessageItemOption;
+
+  senderType?: MessageSender;
+
+  @prop()
+  content: string;
+  id: number;
+
+  created?: Dayjs;
+
+  @prop()
+  state: QuestionState | AnswerState;
+
+  constructor(
+    @inject(ChatMessageItemOption) option: ChatMessageItemOption,
+    @inject(AxiosClient) axios: AxiosClient,
+  ) {
+    this.option = option;
+    this.axios = axios;
+    const { senderType = 'HUMAN', content } = option;
+    this.senderType = senderType;
+    this.content = content;
+    if (option.created) {
+      this.created = dayjs(option.created);
+    }
+  }
+}
+
+@transient()
+export class HumanChatMessageItem extends ChatMessageItem {
+  @prop()
+  declare state: QuestionState;
+}
+
+@transient()
+export class AIChatMessageItem extends ChatMessageItem {
+  @prop()
+  declare state: AnswerState;
+
+  constructor(
+    @inject(ChatMessageItemOption) option: ChatMessageItemOption,
+    @inject(AxiosClient) axios: AxiosClient,
+  ) {
+    super(option, axios);
+    if (option.content) {
+      this.state = AnswerState.SUCCESS;
+    } else {
+      this.state = AnswerState.WAITING;
+    }
+  }
+
+  appendChunk(e: ChatEventChunk) {
+    this.content = `${this.content}${e.output}`;
+  }
+}
diff --git a/web/ui/src/modules/chat-message/chat-message-model.ts b/web/ui/src/modules/chat-message/chat-message-model.ts
index ce4cf75..6227b95 100644
--- a/web/ui/src/modules/chat-message/chat-message-model.ts
+++ b/web/ui/src/modules/chat-message/chat-message-model.ts
@@ -3,20 +3,22 @@ import { Emitter } from '@difizen/mana-app';
 import { inject, prop, transient } from '@difizen/mana-app';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
+import { EventSourceParserStream } from 'eventsource-parser/stream';
+import type { ParsedEvent } from 'eventsource-parser/stream';
 
 import { AxiosClient } from '../axios-client/index.js';
 
-import type {
-  APIMessage,
-  MessageCreate,
-  MessageItem,
-  MessageOption,
-} from './protocol.js';
+import type { ChatMessageItem } from './chat-message-item.js';
+import { AIChatMessageItem } from './chat-message-item.js';
+import type { APIMessage, MessageCreate, MessageOption } from './protocol.js';
+import { AnswerState } from './protocol.js';
+import { ChatMessageItemFactory } from './protocol.js';
 import { ChatMessageType } from './protocol.js';
 import { ChatMessageOption } from './protocol.js';
 
 @transient()
 export class ChatMessageModel implements Disposable {
+  protected chatMessageItemFactory: ChatMessageItemFactory;
   protected axios: AxiosClient;
   option: ChatMessageOption;
 
@@ -25,7 +27,7 @@ export class ChatMessageModel implements Disposable {
   sessionId: string;
 
   @prop()
-  messages: MessageItem[] = [];
+  messages: ChatMessageItem[] = [];
   @prop()
   created?: Dayjs;
 
@@ -42,12 +44,19 @@ export class ChatMessageModel implements Disposable {
   onDispose: Event<void>;
   protected onDisposeEmitter = new Emitter<void>();
 
+  onMessageItem: Event<ChatMessageItem>;
+  protected onMessageItemEmitter = new Emitter<ChatMessageItem>();
+
   constructor(
     @inject(ChatMessageOption) option: ChatMessageOption,
     @inject(AxiosClient) axios: AxiosClient,
+    @inject(ChatMessageItemFactory) chatMessageItemFactory: ChatMessageItemFactory,
   ) {
     this.option = option;
     this.axios = axios;
+    this.onDispose = this.onDisposeEmitter.event;
+    this.onMessageItem = this.onMessageItemEmitter.event;
+    this.chatMessageItemFactory = chatMessageItemFactory;
     if (ChatMessageType.isCreate(option)) {
       this.send(option);
     }
@@ -65,7 +74,16 @@ export class ChatMessageModel implements Disposable {
     this.id = option.id;
     this.agentId = option.agentId;
     this.sessionId = option.sessionId;
-    this.messages = option.messages;
+    if (option.messages && option.messages.length > 0) {
+      const messages = option.messages.map((item) =>
+        this.chatMessageItemFactory({
+          ...item,
+          created: item.senderType === 'AI' ? option.modified : option.created,
+        }),
+      );
+      this.messages = messages;
+      this.onMessageItemEmitter.fire(messages[messages.length - 1]);
+    }
     if (option.created) {
       this.created = dayjs(option.created);
     }
@@ -73,41 +91,121 @@ export class ChatMessageModel implements Disposable {
       this.modified = dayjs(option.modified);
     }
   };
-
-  send = async (option: MessageCreate) => {
-    this.sending = true;
-
-    const opt: MessageOption = {
-      ...option,
-      messages: [
-        {
-          senderType: 'HUMAN',
-          content: option.input,
-        },
-      ],
-    };
-
-    this.updateMeta(opt);
-
+  doChat = async (option: MessageCreate) => {
+    const { agentId, sessionId, input } = option;
     const res = await this.axios.post<APIMessage>(
       `/api/v1/agents/${option.agentId}/chat`,
       {
-        agent_id: option.agentId,
-        session_id: option.sessionId,
-        input: option.input,
+        agent_id: agentId,
+        session_id: sessionId,
+        input: input,
       },
     );
+
     if (res.status === 200) {
       const data = res.data;
       this.id = data.message_id;
       this.created = dayjs(data.gmt_created);
       this.modified = dayjs(data.gmt_modified);
       if (res.data.output) {
-        this.messages.push({
+        const ai = this.chatMessageItemFactory({
           senderType: 'AI',
           content: res.data.output,
         });
+        this.messages.push(ai);
+        this.onMessageItemEmitter.fire(ai);
+      }
+    }
+  };
+
+  protected handleChatEvent = (e: ParsedEvent | undefined, ai: AIChatMessageItem) => {
+    if (!e) {
+      return;
+    }
+    try {
+      // if (e.event === 'message') {
+      //   const newMessageModel: ChatMessageModel = JSON.parse(e.data);
+      //   const message = this.getOrCreateMessage(newMessageModel);
+      //   this.messages = [...this.messages, message];
+      //   setImmediate(() => this.scrollToBottom(true, false));
+      // }
+
+      if (e.event === 'chunk') {
+        const chunk = JSON.parse(e.data);
+        ai.appendChunk(chunk);
+        this.onMessageItemEmitter.fire(ai);
+      }
+    } catch (e) {
+      console.warn('[chat] recerved server send event', event);
+      console.error(e);
+    }
+  };
+
+  doStreamChat = async (option: MessageCreate) => {
+    const { agentId, sessionId, input } = option;
+
+    const url = `/api/v1/agents/${option.agentId}/stream-chat`;
+    const msg = {
+      agent_id: agentId,
+      session_id: sessionId,
+      input: input,
+    };
+    const res = await this.axios.post<ReadableStream<Uint8Array>>(url, msg, {
+      headers: {
+        Accept: 'text/event-stream',
+      },
+      responseType: 'stream',
+      adapter: 'fetch',
+    });
+    if (res.status === 200) {
+      const stream = res.data;
+      const reader = stream
+        .pipeThrough(new TextDecoderStream())
+        .pipeThrough(new EventSourceParserStream())
+        .getReader();
+
+      let alreayDone = false;
+      const ai = this.chatMessageItemFactory({
+        senderType: 'AI',
+        content: '',
+      });
+      ai.state = AnswerState.RECEIVING;
+      this.messages.push(ai);
+      this.onMessageItemEmitter.fire(ai);
+      if (ai instanceof AIChatMessageItem) {
+        while (!alreayDone) {
+          const { value, done } = await reader.read();
+          if (done) {
+            alreayDone = true;
+            break;
+          }
+          this.handleChatEvent(value, ai);
+        }
       }
+      ai.state = AnswerState.SUCCESS;
+      return;
+    }
+  };
+
+  send = async (option: MessageCreate) => {
+    const { input, stream = true } = option;
+    this.sending = true;
+
+    const human = this.chatMessageItemFactory({
+      senderType: 'HUMAN',
+      content: input,
+    });
+    const opt: MessageOption = {
+      ...option,
+      messages: [human],
+    };
+
+    this.updateMeta(opt);
+
+    if (!stream) {
+      await this.doChat(option);
+    } else {
+      await this.doStreamChat(option);
     }
     this.sending = false;
   };
diff --git a/web/ui/src/modules/chat-message/module.ts b/web/ui/src/modules/chat-message/module.ts
index b4b48ce..eb4d804 100644
--- a/web/ui/src/modules/chat-message/module.ts
+++ b/web/ui/src/modules/chat-message/module.ts
@@ -1,8 +1,14 @@
 import { ManaModule } from '@difizen/mana-app';
 
+import {
+  AIChatMessageItem,
+  ChatMessageItem,
+  HumanChatMessageItem,
+} from './chat-message-item.js';
 import { ChatMessageManager } from './chat-message-manager.js';
 import { ChatMessageModel } from './chat-message-model.js';
-import { ChatMessageOption } from './protocol.js';
+import { ChatMessageItemOption } from './protocol.js';
+import { ChatMessageItemFactory, ChatMessageOption } from './protocol.js';
 import { ChatMessageFactory } from './protocol.js';
 
 export const ChatMessageModule = ManaModule.create().register(
@@ -18,4 +24,20 @@ export const ChatMessageModule = ManaModule.create().register(
       };
     },
   },
+  ChatMessageItem,
+  HumanChatMessageItem,
+  AIChatMessageItem,
+  {
+    token: ChatMessageItemFactory,
+    useFactory: (ctx) => {
+      return (option: ChatMessageItemOption) => {
+        const child = ctx.container.createChild();
+        child.register({ token: ChatMessageItemOption, useValue: option });
+        if (option.senderType === 'AI') {
+          return child.get(AIChatMessageItem);
+        }
+        return child.get(HumanChatMessageItem);
+      };
+    },
+  },
 );
diff --git a/web/ui/src/modules/chat-message/protocol.ts b/web/ui/src/modules/chat-message/protocol.ts
index d46bb12..67db9d9 100644
--- a/web/ui/src/modules/chat-message/protocol.ts
+++ b/web/ui/src/modules/chat-message/protocol.ts
@@ -1,5 +1,6 @@
 import { Syringe } from '@difizen/mana-app';
 
+import type { ChatMessageItem } from './chat-message-item.js';
 import type { ChatMessageModel } from './chat-message-model.js';
 
 export type { ChatMessageModel } from './chat-message-model.js';
@@ -47,8 +48,9 @@ export const ChatMessageFactory = Syringe.defineToken('ChatMessageFactory', {
 });
 
 export interface ChatEventChunk {
-  message_id: number;
-  chunk: string;
+  agent_id: string;
+  output: string;
+  type: 'token';
 }
 
 export interface APIContentItem {
@@ -85,3 +87,30 @@ export const toMessageOption = (msg: APIMessage, agentId: string): MessageOption
     modified: msg.gmt_modified,
   };
 };
+
+export enum QuestionState {
+  SENDING = 'sending', // 发送中
+  VALIDATING = 'validating', // 验证中
+  FAIL = 'fail', // 发送失败
+  SUCCESS = 'success', // 发送完成
+}
+
+// 接收消息状态
+export enum AnswerState {
+  WAITING = 'waiting', // 等待
+  RECEIVING = 'receiving', // 接收中
+  FAIL = 'fail', // 发送失败
+  SUCCESS = 'success', // 发送完成
+}
+
+export interface ChatMessageItemOption extends MessageItem {
+  created?: string;
+}
+export const ChatMessageItemOption = Syringe.defineToken('ChatMessageItemOption', {
+  multiple: false,
+});
+
+export type ChatMessageItemFactory = (option: ChatMessageItemOption) => ChatMessageItem;
+export const ChatMessageItemFactory = Syringe.defineToken('ChatMessageItemFactory', {
+  multiple: false,
+});
diff --git a/web/ui/src/modules/session/session-model.ts b/web/ui/src/modules/session/session-model.ts
index ce436c0..9fa5c4c 100644
--- a/web/ui/src/modules/session/session-model.ts
+++ b/web/ui/src/modules/session/session-model.ts
@@ -1,9 +1,12 @@
 import type { Disposable, Event } from '@difizen/mana-app';
+import { DisposableCollection } from '@difizen/mana-app';
+import { equals } from '@difizen/mana-app';
 import { Emitter } from '@difizen/mana-app';
 import { inject, prop, transient } from '@difizen/mana-app';
 
 import { AsyncModel } from '../../common/async-model.js';
 import { AxiosClient } from '../axios-client/index.js';
+import type { ChatMessageItem } from '../chat-message/chat-message-item.js';
 import { ChatMessageManager } from '../chat-message/chat-message-manager.js';
 import type { ChatMessageModel, MessageCreate } from '../chat-message/protocol.js';
 
@@ -23,10 +26,14 @@ export class SessionModel
   protected modified?: string;
   option: SessionOption;
 
+  protected toDispose = new DisposableCollection();
   disposed = false;
   onDispose: Event<void>;
   protected onDisposeEmitter = new Emitter<void>();
 
+  onMessage: Event<ChatMessageItem>;
+  protected onMessageEmitter = new Emitter<ChatMessageItem>();
+
   @prop()
   messages: ChatMessageModel[] = [];
 
@@ -37,6 +44,7 @@ export class SessionModel
   ) {
     super();
     this.onDispose = this.onDisposeEmitter.event;
+    this.onMessage = this.onMessageEmitter.event;
     this.option = option;
     this.axios = axios;
     this.chatMessage = chatMessage;
@@ -46,6 +54,7 @@ export class SessionModel
   dispose = (): void => {
     this.disposed = true;
     this.onDisposeEmitter.fire();
+    this.toDispose.dispose();
   };
 
   shouldInitFromMeta(option: SessionOption): boolean {
@@ -70,8 +79,19 @@ export class SessionModel
     super.fromMeta(option);
   }
 
+  protected disposeMessage = (msg: ChatMessageModel) => {
+    this.messages = this.messages.filter((item) => !equals(item, msg));
+  };
   chat(msg: MessageCreate) {
     const message = this.chatMessage.createMessage(msg);
+    const toDispose = message.onMessageItem((e) => {
+      this.onMessageEmitter.fire(e);
+    });
+    this.toDispose.push(toDispose);
+    message.onDispose(() => {
+      toDispose.dispose();
+      this.disposeMessage(message);
+    });
     this.messages.push(message);
   }
 }
diff --git a/web/ui/src/views/chat/components/input/icon.tsx b/web/ui/src/views/chat/components/input/icon.tsx
new file mode 100644
index 0000000..0778c36
--- /dev/null
+++ b/web/ui/src/views/chat/components/input/icon.tsx
@@ -0,0 +1,197 @@
+import React from 'react';
+
+export const SendIcon: React.FC = () => (
+  <svg
+    width="30px"
+    height="30px"
+    viewBox="0 0 30 30"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <title>发送-实色备份 2</title>
+    <g id="techplay" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g
+        id="2.2开源大模型"
+        transform="translate(-992.000000, -788.000000)"
+        fill="#FFFFFF"
+        fillRule="nonzero"
+      >
+        <g id="编组-5" transform="translate(294.000000, 744.000000)">
+          <g id="编组-7" transform="translate(677.000000, 40.000000)">
+            <g id="发送-实色备份-2" transform="translate(21.000000, 4.000000)">
+              <rect id="矩形" opacity="0" x="0" y="0" width="30" height="30"></rect>
+              <path
+                d="M25.35,5.93399414 C24.8490234,5.48701172 24.1470117,5.35801758 23.5170117,5.595 L5.20798828,12.5129883 C4.52701172,12.7710059 4.08,13.3829883 4.04701172,14.1120117 C4.01399414,14.8410059 4.39798828,15.4920117 5.055,15.8129883 L7.91399414,17.2110059 C7.97100586,17.2379883 8.02201172,17.2770117 8.06701172,17.3189941 C8.36399414,18.0839941 9.53701172,21.0810059 10.0589941,22.1639941 C10.3229883,22.7160059 10.8089941,23.1029883 11.2589941,23.2710059 C11.2289941,23.2679883 11.1960059,23.2620117 11.16,23.2560059 C11.2470117,23.2889941 11.3370117,23.3160059 11.43,23.3339941 C12.0239941,23.4539941 12.6329883,23.2710059 13.0589941,22.8420117 L14.1239941,21.7770117 C14.3129883,21.5879883 14.61,21.5460059 14.8439941,21.6779883 L19.4310059,24.2820117 C19.7069824,24.4379883 20.0129883,24.5190234 20.3189941,24.5190234 C20.5589941,24.5190234 20.8020117,24.4709766 21.03,24.3720117 C21.5520117,24.1470117 21.93,23.7029883 22.0679883,23.1510059 L25.8990234,7.70701172 C26.0640234,7.05899414 25.8510352,6.37798828 25.3500293,5.93399414 L25.35,5.93399414 Z M9.20701172,16.95 L19.0229883,11.3339941 L13.4820117,17.01 C13.3920117,17.1029883 13.3260059,17.2079883 13.2810059,17.3310059 C13.2779883,17.3370117 13.2779883,17.34 13.275,17.3460059 C13.2629883,17.3820117 12.1679883,20.6129883 11.52,22.0739941 C11.3879883,21.9869824 11.2289941,21.8460059 11.1360059,21.6510059 C10.6560059,20.6429883 9.53698242,17.79 9.20701172,16.95 L9.20701172,16.95 Z"
+                id="形状"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export const ImgIcon: React.FC = () => (
+  <svg
+    width="18px"
+    height="14px"
+    viewBox="0 0 18 14"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    transform="translate(0, 3)"
+  >
+    <title>Icon/01-Line/1-example</title>
+    <defs>
+      <path
+        d="M16.875,0 L0.625,0 C0.279296875,0 0,0.279296875 0,0.625 L0,13.125 C0,13.4707031 0.279296875,13.75 0.625,13.75 L16.875,13.75 C17.2207031,13.75 17.5,13.4707031 17.5,13.125 L17.5,0.625 C17.5,0.279296875 17.2207031,0 16.875,0 Z M16.09375,12.34375 L1.40625,12.34375 L1.40625,11.5644531 L4.11132812,8.35546875 L7.04296875,11.8320312 L11.6035156,6.42578125 L16.09375,11.75 L16.09375,12.34375 Z M16.09375,9.80859375 L11.7226563,4.625 C11.6601562,4.55078125 11.546875,4.55078125 11.484375,4.625 L7.04296875,9.890625 L4.23046875,6.55664062 C4.16796875,6.48242188 4.0546875,6.48242188 3.9921875,6.55664062 L1.40625,9.62304688 L1.40625,1.40625 L16.09375,1.40625 L16.09375,9.80859375 Z M4.6875,5.78125 C5.63671875,5.78125 6.40625,5.01171875 6.40625,4.0625 C6.40625,3.11328125 5.63671875,2.34375 4.6875,2.34375 C3.73828125,2.34375 2.96875,3.11328125 2.96875,4.0625 C2.96875,5.01171875 3.73828125,5.78125 4.6875,5.78125 Z M4.70703125,3.45703125 C5.02057757,3.45703125 5.2734375,3.71425084 5.2734375,4.03320312 C5.2734375,4.35215541 5.02057757,4.609375 4.70703125,4.609375 C4.39348493,4.609375 4.140625,4.35215541 4.140625,4.03320312 C4.140625,3.71425084 4.39348493,3.45703125 4.70703125,3.45703125 Z"
+        id="path-1"
+      ></path>
+    </defs>
+    <g id="techplay" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="2.2开源大模型" transform="translate(-319.000000, -763.000000)">
+        <g id="编组-5" transform="translate(294.000000, 744.000000)">
+          <g id="编组-2" transform="translate(24.000000, 16.000000)">
+            <g id="Icon/01-Line/1-example" transform="translate(1.250000, 3.125000)">
+              <mask id="mask-2" fill="white">
+                <use xlinkHref="#path-1"></use>
+              </mask>
+              <use
+                id="Shape"
+                fillOpacity="0.35"
+                fill="#000000"
+                xlinkHref="#path-1"
+              ></use>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export const AudioIcon: React.FC = () => (
+  <svg
+    width="20px"
+    height="20px"
+    viewBox="0 0 20 20"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <title>5J音波,音频</title>
+    <g
+      id="techplay"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+      fillOpacity="0.35"
+    >
+      <g
+        id="2.2开源大模型"
+        transform="translate(-390.000000, -760.000000)"
+        fill="#000000"
+        fillRule="nonzero"
+      >
+        <g id="编组-5" transform="translate(294.000000, 744.000000)">
+          <g id="编组-2" transform="translate(24.000000, 16.000000)">
+            <g id="5J音波,音频" transform="translate(72.000000, 0.000000)">
+              <rect id="矩形" opacity="0" x="0" y="0" width="20" height="20"></rect>
+              <path
+                d="M7.08339844,6.11113281 L7.08339844,13.8888672 C7.08339844,14.4258347 6.64810029,14.8611328 6.11113281,14.8611328 C5.57416534,14.8611328 5.13886719,14.4258347 5.13886719,13.8888672 L5.13886719,6.11113281 C5.13886719,5.57416534 5.57416534,5.13886719 6.11113281,5.13886719 C6.64810029,5.13886719 7.08339844,5.57416534 7.08339844,6.11113281 Z M14.5833984,6.11113281 L14.5833984,13.8888672 C14.5833984,14.4258347 14.1481003,14.8611328 13.6111328,14.8611328 C13.0741653,14.8611328 12.6388672,14.4258347 12.6388672,13.8888672 L12.6388672,6.11113281 C12.6388672,5.57416534 13.0741653,5.13886719 13.6111328,5.13886719 C14.1481003,5.13886719 14.5833984,5.57416534 14.5833984,6.11113281 Z M3.19453125,9.02773438 L3.19453125,10.9720703 C3.19453125,11.5090378 2.7592331,11.9443359 2.22226562,11.9443359 C1.68529815,11.9443359 1.25,11.5090378 1.25,10.9720703 L1.25,9.02773438 C1.25,8.4907669 1.68529815,8.05546875 2.22226562,8.05546875 C2.7592331,8.05546875 3.19453125,8.4907669 3.19453125,9.02773438 Z M18.75,9.02773438 L18.75,10.9720703 C18.75,11.5090378 18.3147019,11.9443359 17.7777344,11.9443359 C17.2407669,11.9443359 16.8054687,11.5090378 16.8054687,10.9720703 L16.8054687,9.02773438 C16.8054687,8.4907669 17.2407669,8.05546875 17.7777344,8.05546875 C18.3147019,8.05546875 18.75,8.4907669 18.75,9.02773438 Z M10.9722656,3.19453125 L10.9722656,16.8054688 C10.9722656,17.3424362 10.5369675,17.7777344 10,17.7777344 C9.46303252,17.7777344 9.02773437,17.3424362 9.02773437,16.8054688 L9.02773437,3.19453125 C9.02773437,2.65756377 9.46303252,2.22226563 10,2.22226563 C10.5369675,2.22226563 10.9722656,2.65756377 10.9722656,3.19453125 Z"
+                id="形状"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export const VideoIcon: React.FC = () => (
+  <svg
+    width="20px"
+    height="20px"
+    viewBox="0 0 20 20"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <title>符号-视频</title>
+    <g
+      id="techplay"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+      fillOpacity="0.35"
+    >
+      <g
+        id="2.2开源大模型"
+        transform="translate(-354.000000, -760.000000)"
+        fill="#000000"
+        fillRule="nonzero"
+      >
+        <g id="编组-5" transform="translate(294.000000, 744.000000)">
+          <g id="编组-2" transform="translate(24.000000, 16.000000)">
+            <g id="符号-视频" transform="translate(36.000000, 0.000000)">
+              <rect id="矩形" opacity="0" x="0" y="0" width="20" height="20"></rect>
+              <path
+                d="M17.4375,2.5 L2.5625,2.5 C2.1875,2.5 1.875,2.61666667 1.625,2.90833333 C1.375,3.14166667 1.25,3.49166667 1.25,3.9 L1.25,15.0416667 C1.25,15.8583333 1.8125,16.5 2.5625,16.5 L17.4375,16.5 C17.8125,16.5 18.125,16.3833333 18.375,16.0916667 C18.625,15.8 18.75,15.45 18.75,15.1 L18.75,3.9 C18.75,3.14166667 18.125,2.5 17.4375,2.5 Z M4.375,15.3333333 L3.375,15.3333333 L2.5,15.3333333 L2.5,11.8333333 L4.375,11.8333333 L4.375,15.3333333 Z M4.375,10.6666667 L2.5,10.6666667 L2.5,8.33333333 L4.375,8.33333333 L4.375,10.6666667 Z M4.375,7.16666667 L2.5,7.16666667 L2.5,3.66666667 L3.375,3.66666667 L4.375,3.66666667 L4.375,7.16666667 Z M14.375,7.75 L14.375,15.3333333 L5.625,15.3333333 L5.625,3.66666667 L14.375,3.66666667 L14.375,7.75 Z M17.5,15.3333333 L16.625,15.3333333 L15.625,15.3333333 L15.625,11.8333333 L17.5,11.8333333 L17.5,15.3333333 Z M17.5,10.6666667 L15.625,10.6666667 L15.625,8.33333333 L17.5,8.33333333 L17.5,10.6666667 Z M17.5,7.16666667 L15.625,7.16666667 L15.625,3.66666667 L17.5,3.66666667 L17.5,4.6 L17.5,7.16666667 Z"
+                id="形状"
+              ></path>
+              <path
+                d="M8.6875,12.25 L11.5,10.8125 L12,10.5625 C12.625,10.25 12.625,9.75 12,9.4375 L8.6875,7.75 C8.375,7.625 8.125,7.75 8.125,8.0625 L8.125,11.8125 C8.125,12.25 8.375,12.375 8.6875,12.25 L8.6875,12.25 Z"
+                id="路径"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export const FolderIcon: React.FC = () => (
+  <svg
+    width="20px"
+    height="20px"
+    viewBox="0 0 20 20"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <title>folder</title>
+    <g
+      id="techplay"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+      fillOpacity="0.349999994"
+    >
+      <g
+        id="2.2开源大模型"
+        transform="translate(-426.000000, -760.000000)"
+        fill="#000000"
+        fillRule="nonzero"
+      >
+        <g id="编组-5" transform="translate(294.000000, 744.000000)">
+          <g id="编组-2" transform="translate(24.000000, 16.000000)">
+            <g id="folder" transform="translate(108.000000, 0.000000)">
+              <rect id="矩形" opacity="0" x="0" y="0" width="20" height="20"></rect>
+              <path
+                d="M17.1875,5.828125 L10.1757812,5.828125 L7.88476562,3.63671875 C7.85546875,3.609375 7.81640625,3.59375 7.77734375,3.59375 L2.8125,3.59375 C2.46679688,3.59375 2.1875,3.87304688 2.1875,4.21875 L2.1875,15.78125 C2.1875,16.1269531 2.46679688,16.40625 2.8125,16.40625 L17.1875,16.40625 C17.5332031,16.40625 17.8125,16.1269531 17.8125,15.78125 L17.8125,6.453125 C17.8125,6.10742188 17.5332031,5.828125 17.1875,5.828125 Z M16.40625,15 L3.59375,15 L3.59375,5 L7.27539062,5 L9.61132812,7.234375 L16.40625,7.234375 L16.40625,15 Z"
+                id="形状"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
diff --git a/web/ui/src/views/chat/components/input/index.less b/web/ui/src/views/chat/components/input/index.less
index d3fd1f3..0f56bdd 100644
--- a/web/ui/src/views/chat/components/input/index.less
+++ b/web/ui/src/views/chat/components/input/index.less
@@ -1,9 +1,9 @@
 .chat-input {
   display: flex;
-  flex-wrap: nowrap;
-  justify-content: center;
-  align-items: center;
-  width: 90%;
+  position: relative;
+  width: 100%;
+  z-index: 1;
+  background: #fff;
 
   &-content {
     width: 100%;
@@ -23,4 +23,63 @@
     align-self: center;
     margin-right: 4px;
   }
+
+  &-iconBottom {
+    width: 104px;
+    position: relative;
+    display: flex;
+  }
+
+  &-sendButton {
+    height: 38px;
+    width: 72px;
+    margin: auto auto 16px;
+    background-color: #0958d9;
+    border-radius: 6px;
+    display: flex;
+    cursor: pointer;
+
+    & > :first-child {
+      margin: auto;
+    }
+
+    &:hover {
+      background-color: #1677ff;
+      opacity: 0.65;
+    }
+  }
+
+  &-searchInput {
+    flex: 1;
+    display: flex;
+    border: 2px solid rgba(0, 0, 0, 15%);
+    border-radius: 8px;
+    background: #fff;
+    min-height: 94px;
+
+    &:focus-within {
+      border-color: #1677ff;
+    }
+
+    position: relative;
+  }
+
+  &-textArea {
+    padding: 11px 0;
+    flex: 1;
+    background: #fff;
+    border-radius: 8px;
+  }
+
+  &-upload {
+    height: 20px;
+    display: flex;
+    margin-left: 20px;
+    gap: 10px;
+    margin-bottom: 10px;
+
+    & > {
+      cursor: pointer;
+    }
+  }
 }
diff --git a/web/ui/src/views/chat/components/input/index.tsx b/web/ui/src/views/chat/components/input/index.tsx
index 955fd36..56da3f8 100644
--- a/web/ui/src/views/chat/components/input/index.tsx
+++ b/web/ui/src/views/chat/components/input/index.tsx
@@ -1,10 +1,11 @@
-import { SendOutlined } from '@ant-design/icons';
-import { Button, Input as AntdInput } from 'antd';
+import { Input as AntdInput, Tooltip } from 'antd';
 import type { TextAreaRef } from 'antd/es/input/TextArea.js';
 import classnames from 'classnames';
 import type { ChangeEvent, ReactNode, KeyboardEvent, FC } from 'react';
 import { forwardRef, useCallback, useMemo, useState } from 'react';
+
 import './index.less';
+import { AudioIcon, FolderIcon, ImgIcon, SendIcon, VideoIcon } from './icon.js';
 
 function insertAtCaret(e: ChangeEvent<HTMLTextAreaElement>, valueToInsert?: string) {
   const target = e.target;
@@ -126,31 +127,52 @@ export const Input = forwardRef<TextAreaRef, InputProps>(function Input(
 
   return (
     <div className={classnames(prefixCls, wrapperClassName)}>
-      <div className={`${prefixCls}-content`}>
-        <div
-          className={`${prefixCls}-textarea`}
-          style={{ display: 'flex', alignItems: 'center', minHeight: '46px' }}
-        >
-          <AntdInput.TextArea
-            placeholder="写消息..."
-            ref={ref}
-            value={value}
-            onChange={onInputChange}
-            onKeyDown={onInputKeyDown}
-            bordered={false}
-            autoSize={{ minRows: 1, maxRows: 8 }}
-          />
+      <div className={`${prefixCls}-searchInput`}>
+        <div className={`${prefixCls}-textArea`}>
+          <div className={`${prefixCls}-upload`}>
+            <Tooltip placement="top" title={'不支持上传图片'}>
+              <div>
+                <ImgIcon />
+              </div>
+            </Tooltip>
+
+            <Tooltip placement="top" title={'不支持上传音频'}>
+              <div>
+                <AudioIcon />
+              </div>
+            </Tooltip>
+
+            <Tooltip placement="top" title={'不支持上传视频'}>
+              <div>
+                <VideoIcon />
+              </div>
+            </Tooltip>
+            <Tooltip placement="top" title={'不支持上传文件'}>
+              <div>
+                <FolderIcon />
+              </div>
+            </Tooltip>
+          </div>
+          <div className={`${prefixCls}-input`}>
+            <AntdInput.TextArea
+              ref={ref}
+              value={value}
+              placeholder={'输入聊天内容'}
+              bordered={false}
+              autoSize={{ minRows: 1 }}
+              style={{ resize: 'none', padding: '0px 16px', maxHeight: 80 }}
+              onChange={onInputChange}
+              onKeyDown={onInputKeyDown}
+              className={`${prefixCls}-textArea`}
+            />
+          </div>
         </div>
-        <div className={`${prefixCls}-operation`}>
-          <div className={`${prefixCls}-operation-send`}>
-            <Button
-              className={`${prefixCls}-textarea-btn`}
-              type="primary"
-              icon={<SendOutlined />}
-              onClick={() => {
-                onSubmit(value || v);
-              }}
-            ></Button>
+        <div className={`${prefixCls}-iconBottom`}>
+          <div
+            className={`${prefixCls}-sendButton`}
+            onClick={() => onSubmit(value || v)}
+          >
+            <SendIcon />
           </div>
         </div>
       </div>
diff --git a/web/ui/src/views/chat/components/message/exchange.tsx b/web/ui/src/views/chat/components/message/exchange.tsx
index 4543fbc..594fa6f 100644
--- a/web/ui/src/views/chat/components/message/exchange.tsx
+++ b/web/ui/src/views/chat/components/message/exchange.tsx
@@ -11,8 +11,8 @@ export const MessageExchange = (props: MessageGroupProps) => {
 
   return (
     <div className="chat-message-exchange">
-      {humanMsg && <Message exchange={exchange} message={humanMsg} type="HUMAN" />}
-      {aiMsg && <Message exchange={exchange} message={aiMsg} type="AI" />}
+      {humanMsg && <Message exchange={exchange} message={humanMsg} />}
+      {aiMsg && <Message exchange={exchange} message={aiMsg} />}
     </div>
   );
 };
diff --git a/web/ui/src/views/chat/components/message/index.less b/web/ui/src/views/chat/components/message/index.less
index b6facfe..47fb870 100644
--- a/web/ui/src/views/chat/components/message/index.less
+++ b/web/ui/src/views/chat/components/message/index.less
@@ -1,77 +1,102 @@
-.chat-message {
-  display: flex;
+.chat-message-main {
   width: 100%;
+  // padding: 16px 24px 16px 112px;
+  flex-direction: row-reverse;
+  // padding: 16px ${props.isModel ? 112 : 24}px 16px
+  //   ${props.isModel ? 24 : 112}px;
+  display: flex;
+  // flex-direction: ${props.isModel ? 'row' : 'row-reverse'};
+  gap: 16px;
 
-  &-box {
-    display: flex;
-    width: 100%;
-    padding: 0 24px 24px;
-  }
-
-  &-avatar {
-    margin-right: 12px;
+  > :nth-child(2) {
+    > :first-child {
+      margin: auto 0 auto auto;
+    }
   }
 
-  &-container {
-    flex: 1 1;
-
-    &-header {
-      display: flex;
-      align-items: center;
-      height: 28px;
-
-      &-nickname {
-        color: rgba(29, 28, 35, 60%);
-        display: flex;
-        font-size: 12px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 28px;
-      }
-
-      &-created-time {
-        font-size: 12px;
-        margin-left: 18px;
-        line-height: 28px;
-        color: var(--mana-text-tertiary);
-      }
+  &:hover {
+    .anticon {
+      visibility: visible;
     }
   }
 
-  &-content {
-    display: flex;
+  &-ai {
+    padding: 16px 0;
     flex-direction: row;
-    max-width: 100%;
-    position: relative;
-    width: fit-content;
-
-    &-user {
-      background: #4d53e8;
-      border: 1px solid #e7e7e9;
-      color: #fff;
-      padding: 12px;
-    }
+  }
+}
 
-    &-bot {
-      background: #f7f7fa;
-      border: 1px solid #e7e7e9;
-      color: #2e3238;
-      padding: 12px;
-    }
+.chat-message-human-sending {
+  margin-right: 8px;
+}
+
+.chat-message-container {
+  & > :first-child {
+    width: 100%;
 
-    &-inner {
-      border-radius: 16px;
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 20px;
-      max-width: 100%;
-      overflow: hidden;
-      width: fit-content;
-      display: inline-block;
+    & > :first-child {
+      width: calc(100% - 32px);
     }
   }
+}
+
+.chat-message-action-desc {
+  margin-left: 7px;
+  max-width: 200px;
+  font-size: 10px;
+  color: rgba(0, 10, 26, 36%);
+  display: inline-block;
+  word-wrap: break-word;
+}
+
+.chat-message-retry {
+  cursor: pointer;
+  color: #1677ff;
+  font-size: 12px;
+  display: flex;
+
+  & > {
+    margin: auto 0;
+  }
+}
+
+.chat-message-actions {
+  margin: auto 0 auto auto;
+  font-size: 16px;
+  display: inline-block;
+  // visibility: hidden;
+  .anticon {
+    cursor: pointer;
+    // color: rgb(0 10 26 / 47%);
+  }
+
+  .anticon + .anticon {
+    margin-left: 4px;
+  }
+}
+
+.feedbackUp {
+  color: #1890ff !important;
+}
+
+.feedbackDown {
+  color: #ff4d4f !important;
+}
+
+.space {
+  width: 28px;
+  flex-shrink: 9;
+}
+
+.chat-message-action-tag {
+  display: inline-block;
+  margin-right: 10px;
+  border-radius: 8px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 45%);
+  cursor: pointer;
 
-  &-footer {
-    overflow: visible;
+  &:hover {
+    color: rgba(0, 0, 0, 88%);
   }
 }
diff --git a/web/ui/src/views/chat/components/message/markdown-message/index.less b/web/ui/src/views/chat/components/message/markdown-message/index.less
new file mode 100644
index 0000000..78ccf36
--- /dev/null
+++ b/web/ui/src/views/chat/components/message/markdown-message/index.less
@@ -0,0 +1,64 @@
+@keyframes blink {
+  from {
+    opacity: 1;
+  }
+
+  40% {
+    opacity: 1;
+  }
+
+  60% {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.markdown-message-md {
+  min-height: 40px;
+  max-width: 420px;
+  display: flex;
+  align-items: center;
+  flex: 1 1;
+  overflow: hidden;
+
+  .tp-md > *:last-child {
+    // 这里应根据 props.mdSelector 动态处理
+    position: relative;
+
+    &::after {
+      content: '';
+      display: none; // 默认状态为不显示，实际使用时根据 props.state 处理
+      height: 16px;
+      width: 6px;
+      margin: 0 2px;
+      vertical-align: text-bottom;
+      animation-duration: 1s;
+      animation-name: blink;
+      animation-iteration-count: infinite;
+      background: rgb(0 0 0, 89%); // 默认背景色
+
+      // 动态处理显示逻辑
+      // 这里的 props.state 应该在实际使用时处理
+      // 例如：
+      // & when (props.state === AnswerState.Receiving) {
+      //   display: inline-block;
+      // }
+    }
+  }
+}
+
+.markdown-message-mdPop {
+  display: inline-block;
+  background-color: #f8f8fb;
+  border-radius: 8px;
+  padding: 12px 16px;
+  margin: auto 0;
+
+  img {
+    max-height: 100%;
+    max-width: 100%;
+  }
+}
diff --git a/web/ui/src/views/chat/components/message/markdown-message/index.tsx b/web/ui/src/views/chat/components/message/markdown-message/index.tsx
new file mode 100644
index 0000000..046ddc7
--- /dev/null
+++ b/web/ui/src/views/chat/components/message/markdown-message/index.tsx
@@ -0,0 +1,19 @@
+import { useRef } from 'react';
+
+import { Markdown } from '../markdown/index.js';
+
+import './index.less';
+
+export const MarkdownMessage = ({ message }: any) => {
+  const mdRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div ref={mdRef} className={`markdown-message-md`}>
+      <span className={`markdown-message-mdPop`}>
+        <Markdown message={message} type="message">
+          {message.content}
+        </Markdown>
+      </span>
+    </div>
+  );
+};
diff --git a/web/ui/src/views/chat/components/message/markdown/index.less b/web/ui/src/views/chat/components/message/markdown/index.less
new file mode 100644
index 0000000..5c54106
--- /dev/null
+++ b/web/ui/src/views/chat/components/message/markdown/index.less
@@ -0,0 +1,82 @@
+.chat-msg-md {
+  max-width: 100%;
+
+  p {
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  li {
+    line-height: 22px;
+  }
+
+  a {
+    text-decoration: none;
+    color: #1677ff;
+  }
+
+  & > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.chat-msg-md-content {
+  color: #878c93;
+}
+
+.chat-msg-md-message {
+  .chat-msg-md-code-pre code {
+    padding: 0;
+    font-size: unset;
+    // width: 646px;
+    display: inline-block;
+  }
+
+  code {
+    padding: 0.2em 0.4em;
+    margin: 0;
+    font-size: 85%;
+    background-color: rgba(27, 31, 35, 5%);
+    border-radius: 3px;
+  }
+
+  table {
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+
+  td,
+  th {
+    padding: 0;
+  }
+
+  // table {
+  //   margin-top: 0;
+  //   margin-bottom: 16px;
+  // }
+
+  .chat-msg-md-markdown-body table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+  }
+
+  table th {
+    font-weight: 600;
+  }
+
+  table td,
+  table th {
+    padding: 6px 13px;
+    border: 1px solid #dfe2e5;
+  }
+
+  table tr {
+    background-color: #fff;
+    border-top: 1px solid #c6cbd1;
+  }
+
+  table tr:nth-child(2n) {
+    background-color: #f6f8fa;
+  }
+}
diff --git a/web/ui/src/views/chat/components/message/markdown/index.tsx b/web/ui/src/views/chat/components/message/markdown/index.tsx
new file mode 100644
index 0000000..8d62af1
--- /dev/null
+++ b/web/ui/src/views/chat/components/message/markdown/index.tsx
@@ -0,0 +1,131 @@
+import { Modal } from 'antd';
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
+import breaks from 'remark-breaks';
+import remarkGfm from 'remark-gfm';
+
+import type { AIChatMessageItem } from '../../../../../modules/chat-message/chat-message-item.js';
+
+import { CodeBlock } from './modules/CodeBlock/index.js';
+import './index.less';
+
+// const PreBlock = (...args:any) => {
+//   console.log(args)
+//   return <div>pre</div>
+// }
+
+interface MarkdownProps {
+  children: any;
+  className?: string;
+  type?: 'message' | 'content';
+  message: AIChatMessageItem;
+}
+
+function ImageModal({ src, alt }: any) {
+  const [visible, setVisible] = useState(false);
+  const [imageDimensions, setImageDimensions] = useState({
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    const img = new Image();
+    img.src = src;
+    img.onload = () => {
+      setImageDimensions({
+        width: img.width,
+        height: img.height,
+      });
+    };
+  }, [src]);
+
+  const maxModalWidth = window.innerWidth * 0.8; // 80% of the viewport width
+  const maxModalHeight = window.innerHeight * 0.8; // 80% of the viewport height
+
+  let adjustedWidth, adjustedHeight;
+
+  const aspectRatio = imageDimensions.width / imageDimensions.height;
+
+  if (imageDimensions.width > maxModalWidth) {
+    adjustedWidth = maxModalWidth;
+    adjustedHeight = adjustedWidth / aspectRatio;
+  } else if (imageDimensions.height > maxModalHeight) {
+    adjustedHeight = maxModalHeight;
+    adjustedWidth = adjustedHeight * aspectRatio;
+  } else {
+    adjustedWidth = imageDimensions.width;
+    adjustedHeight = imageDimensions.height;
+  }
+
+  return (
+    <div>
+      <img
+        src={src}
+        alt={alt}
+        style={{ cursor: 'pointer' }}
+        onClick={() => setVisible(true)}
+        onLoad={() => {
+          // 解决生成图片没有滚动到最下方的问题。
+          document.getElementById('chat-main-scroll')?.scrollIntoView(false);
+        }}
+      />
+      <Modal
+        open={visible}
+        closeIcon={false}
+        footer={null}
+        width={adjustedWidth + 30}
+        onCancel={() => setVisible(false)}
+        bodyStyle={{
+          padding: 0,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: adjustedHeight,
+        }}
+      >
+        <TransformWrapper initialScale={1} initialPositionX={0} initialPositionY={0}>
+          <TransformComponent>
+            <img
+              src={src}
+              alt={alt}
+              style={{
+                width: '100%',
+                height: '100%',
+              }}
+            />
+          </TransformComponent>
+        </TransformWrapper>
+      </Modal>
+    </div>
+  );
+}
+
+export const Markdown = (props: MarkdownProps) => {
+  const { type = 'message', className, message } = props;
+
+  useEffect(() => {
+    const links = document.querySelectorAll('a');
+    for (let i = 0, length = links.length; i < length; i++) {
+      if (links[i].hostname !== window.location.hostname) {
+        links[i].target = '_blank';
+      }
+    }
+  }, [props.children]);
+
+  return (
+    <ReactMarkdown
+      className={classNames(
+        `chat-msg-md`,
+        type === 'content' && `chat-msg-md-content`,
+        type === 'message' && `chat-msg-md-message`,
+        className,
+      )}
+      components={{ code: CodeBlock, img: ImageModal }}
+      remarkPlugins={[remarkGfm, breaks]}
+    >
+      {props.children}
+    </ReactMarkdown>
+  );
+};
diff --git a/web/ui/src/views/chat/components/message/markdown/modules/CodeBlock/index.less b/web/ui/src/views/chat/components/message/markdown/modules/CodeBlock/index.less
new file mode 100644
index 0000000..7ae4ba6
--- /dev/null
+++ b/web/ui/src/views/chat/components/message/markdown/modules/CodeBlock/index.less
@@ -0,0 +1,42 @@
+.chat-msg-md-code-pre {
+  :global {
+    .md-code-pre {
+      margin: 0 !important;
+      padding: 1.5em !important;
+    }
+  }
+}
+
+.chat-msg-md-code-wrap {
+  border-radius: 4px;
+  position: relative;
+  margin: 0;
+}
+
+.chat-msg-md-code-lang {
+  position: absolute;
+  top: 9px;
+  right: 28px;
+  color: #fff;
+  opacity: 0.8;
+  font-size: 14px;
+  line-height: 16px;
+}
+
+.chat-msg-md-code-copy {
+  font-size: 16px;
+  cursor: pointer;
+  position: absolute;
+  top: 9px;
+  right: 4px;
+  color: #fff;
+  opacity: 0.8;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.chat-msg-md-code-code {
+  display: block;
+}
diff --git a/web/ui/src/views/chat/components/message/markdown/modules/CodeBlock/index.tsx b/web/ui/src/views/chat/components/message/markdown/modules/CodeBlock/index.tsx
new file mode 100644
index 0000000..0c1aa13
--- /dev/null
+++ b/web/ui/src/views/chat/components/message/markdown/modules/CodeBlock/index.tsx
@@ -0,0 +1,38 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { CopyOutlined } from '@ant-design/icons';
+import { message } from 'antd';
+import copy from 'copy-to-clipboard';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+import './index.less';
+
+export const CodeBlock = (props: any) => {
+  const { className, children } = props;
+
+  if (!props.inline) {
+    const [, lang] = /language-(\w+)/.exec(className || '') || [];
+
+    return (
+      <pre className={`chat-msg-md-code-wrap`}>
+        {lang && <div className={`chat-msg-md-code-lang`}>{lang}</div>}
+        <CopyOutlined
+          onClick={() => {
+            copy(children);
+            message.success('代码已复制');
+          }}
+          className={`chat-msg-md-code-copy`}
+        />
+        <SyntaxHighlighter
+          className={`chat-msg-md-code-pre`}
+          language={lang}
+          style={oneDark}
+        >
+          {typeof children === 'string' ? children.trim() : children}
+        </SyntaxHighlighter>
+      </pre>
+    );
+  }
+
+  return <code className={`chat-msg-md-code-code`}>{children}</code>;
+};
diff --git a/web/ui/src/views/chat/components/message/message.tsx b/web/ui/src/views/chat/components/message/message.tsx
index 9cae4e3..3bd8f6d 100644
--- a/web/ui/src/views/chat/components/message/message.tsx
+++ b/web/ui/src/views/chat/components/message/message.tsx
@@ -1,95 +1,129 @@
-import { LoadingOutlined } from '@ant-design/icons';
+import {
+  CopyOutlined,
+  DislikeOutlined,
+  LikeOutlined,
+  LoadingOutlined,
+  ReloadOutlined,
+} from '@ant-design/icons';
 import { useInject, useObserve, ViewInstance } from '@difizen/mana-app';
-import { Avatar } from 'antd';
+import { Avatar, Space } from 'antd';
 import classNames from 'classnames';
+import copy from 'copy-to-clipboard';
 import type { ReactNode } from 'react';
-import { useState } from 'react';
 
 import { MagentLOGO } from '../../../../modules/base-layout/brand/logo.js';
-import type {
-  ChatMessageModel,
-  MessageItem,
-  MessageSender,
-} from '../../../../modules/chat-message/protocol.js';
+import type { ChatMessageItem } from '../../../../modules/chat-message/chat-message-item.js';
+import { AIChatMessageItem } from '../../../../modules/chat-message/chat-message-item.js';
+import { HumanChatMessageItem } from '../../../../modules/chat-message/chat-message-item.js';
+import type { ChatMessageModel } from '../../../../modules/chat-message/chat-message-model.js';
 import type { ChatView } from '../../view.js';
-import Typing from '../typing/index.js';
 
+import { MarkdownMessage } from './markdown-message/index.js';
+import { TextMessage } from './text/index.js';
 import './index.less';
 
 interface MessageProps {
+  message: ChatMessageItem;
   exchange: ChatMessageModel;
-  message: MessageItem;
-  type: MessageSender;
 }
-export const Message = (props: MessageProps) => {
+
+export const HumanMessage = (props: MessageProps) => {
   const exchange = useObserve(props.exchange);
   const message = useObserve(props.message);
   const instance = useInject<ChatView>(ViewInstance);
   const session = instance.session;
-  const agent = instance.agent;
-  const [contentHover, setContentHover] = useState<boolean>(false);
   if (!session) {
     return null;
   }
 
-  let avatarSrc: ReactNode = <MagentLOGO />;
-  let nickName = 'user';
-  if (message.senderType === 'AI') {
-    avatarSrc = agent?.avatar || avatarSrc;
-    nickName = agent?.name || '';
-  }
-  if (message.senderType === 'HUMAN') {
-    avatarSrc = 'https://api.dicebear.com/7.x/miniavs/svg?seed=1';
-    nickName = '';
+  const avatarSrc = 'https://api.dicebear.com/7.x/miniavs/svg?seed=1';
+  const nickName = '';
+
+  const content: ReactNode = (
+    <>
+      {exchange.sending && <LoadingOutlined className="chat-message-human-sending" />}
+      <Space />
+      {message.content}
+    </>
+  );
+
+  return (
+    <div className={classNames('chat-message-main')}>
+      <Avatar src={avatarSrc} />
+      <TextMessage content={content} />
+    </div>
+  );
+};
+export const AIMessage = (props: MessageProps) => {
+  const message = useObserve(props.message);
+  const instance = useInject<ChatView>(ViewInstance);
+  const session = instance.session;
+  const agent = instance.agent;
+  if (!session) {
+    return null;
   }
 
+  // const [contentHover, setContentHover] = useState<boolean>(false);
+  const avatarSrc: ReactNode = agent?.avatar || <MagentLOGO />;
+  const nickName = agent?.name || '';
+
   let content: ReactNode = message.content;
-  if (exchange.sending) {
-    if (!content) {
-      content = <LoadingOutlined />;
-    } else {
-      content = (
-        <>
-          {message.content}
-          <Typing />
-        </>
-      );
-    }
+  if (!content) {
+    content = <LoadingOutlined />;
+  } else {
+    content = (
+      <>
+        <MarkdownMessage message={message} />
+      </>
+    );
   }
+
+  const actions = [
+    <span key="action-tag-3" className={`chat-message-action-tag`}>
+      <LikeOutlined />
+    </span>,
+    <span key="action-tag-2" className={`chat-message-action-tag`}>
+      <DislikeOutlined />
+    </span>,
+    <span
+      key="action-tag-1"
+      className={`chat-message-action-tag`}
+      onClick={() => {
+        copy(message.content);
+      }}
+    >
+      <CopyOutlined />
+    </span>,
+  ];
+
   return (
-    <div className="chat-message">
-      <div className="chat-message-box">
-        <div className="chat-message-avatar">
-          <Avatar src={avatarSrc} />
-        </div>
-        <div className="chat-message-container">
-          <div className="chat-message-container-header">
-            <div className="chat-message-container-header-nickname">
-              {nickName || '我'}
-            </div>
-            {contentHover && exchange.created && (
-              <span className="chat-message-container-header-created-time">
-                {exchange.created?.toString()}
-              </span>
-            )}
-          </div>
+    <div className={classNames('chat-message-main', 'chat-message-main-ai')}>
+      <Avatar src={avatarSrc} />
+      <div className={`chat-message-container`}>
+        {content}
+        <div style={{ paddingTop: 8, display: 'flex' }}>
           <div
-            className="chat-message-content"
-            onMouseEnter={() => setContentHover(true)}
-            onMouseLeave={() => setContentHover(false)}
+            className={'chat-message-retry'}
+            onClick={() => {
+              // TODO:
+            }}
           >
-            <div
-              className={classNames('chat-message-content-inner', {
-                'chat-message-content-bot': message.senderType === 'AI',
-                'chat-message-content-user': message.senderType === 'HUMAN',
-              })}
-            >
-              {content}
-            </div>
+            <ReloadOutlined style={{ marginRight: '5px' }} />
+            重新生成
           </div>
-          <div className="chat-message-footer"></div>
+          <div className={'chat-message-actions'}>{actions.filter(Boolean)}</div>
         </div>
       </div>
     </div>
   );
 };
+export const Message = (props: MessageProps) => {
+  const message = useObserve(props.message);
+  if (message instanceof HumanChatMessageItem) {
+    return <HumanMessage {...props} />;
+  }
+  if (message instanceof AIChatMessageItem) {
+    return <AIMessage {...props} />;
+  }
+  return null;
+};
diff --git a/web/ui/src/views/chat/components/message/text/index.less b/web/ui/src/views/chat/components/message/text/index.less
new file mode 100644
index 0000000..7c41d71
--- /dev/null
+++ b/web/ui/src/views/chat/components/message/text/index.less
@@ -0,0 +1,17 @@
+.text-message-text {
+  min-height: 40px;
+  line-height: 22px;
+  // display: flex;
+  // align-items: center;
+  white-space: pre-wrap;
+  // flex: 1 1;
+  overflow: hidden;
+  max-width: 420px;
+}
+
+.text-message-textPop {
+  display: inline-block;
+  background-color: #e6f4ff;
+  border-radius: 8px;
+  padding: 12px 16px;
+}
diff --git a/web/ui/src/views/chat/components/message/text/index.tsx b/web/ui/src/views/chat/components/message/text/index.tsx
new file mode 100644
index 0000000..a432283
--- /dev/null
+++ b/web/ui/src/views/chat/components/message/text/index.tsx
@@ -0,0 +1,9 @@
+import './index.less';
+
+export const TextMessage = ({ content }: any) => {
+  return (
+    <div className={`text-message-text`}>
+      <span className={`text-message-textPop`}>{content}</span>
+    </div>
+  );
+};
diff --git a/web/ui/src/views/chat/index.less b/web/ui/src/views/chat/index.less
index aaca612..0f2e357 100644
--- a/web/ui/src/views/chat/index.less
+++ b/web/ui/src/views/chat/index.less
@@ -16,14 +16,14 @@
     &-list {
       overflow-y: auto;
       height: calc(100% - 84px);
-      padding: 12px 0 48px;
+      padding: 12px 24px 48px;
       scrollbar-width: none; /* Firefox */
       ::-webkit-scrollbar {
         display: none; /* Chrome Safari */
       }
 
       &-to-bottom {
-        bottom: 120px;
+        bottom: 160px;
       }
     }
 
diff --git a/web/ui/src/views/chat/view.tsx b/web/ui/src/views/chat/view.tsx
index 960abd4..56b7ab9 100644
--- a/web/ui/src/views/chat/view.tsx
+++ b/web/ui/src/views/chat/view.tsx
@@ -58,11 +58,11 @@ export function ChatComponent(props: ChatProps) {
         <div className="chat-content-input">
           <div className="chat-content-input-mask"></div>
           <div className="chat-content-input-main">
-            <Button
+            {/* <Button
               className="chat-content-input-main-clear"
               icon={<ClearOutlined />}
               onClick={() => instance.clear()}
-            ></Button>
+            ></Button> */}
             {/* <Input onSubmit={(v) => chat.sendMessageStream(v)} /> */}
             <Input onSubmit={(v) => instance.sendMessage(v)} />
           </div>
@@ -142,6 +142,8 @@ export class ChatView extends BaseView {
       id,
       agentId: this.agentId,
     });
+    const toDispose = this.session.onMessage(() => setImmediate(this.scrollToBottom));
+    this.toDispose.push(toDispose);
     this.sessionDeferred.resolve(this.session);
   };
 

From a2c855f1c4b1d29ca762444be5aa9c4b3c317481 Mon Sep 17 00:00:00 2001
From: brokun <yukun.wyk@antgroup.com>
Date: Wed, 7 Aug 2024 11:03:15 +0800
Subject: [PATCH 4/5] fix(ui): unexpected file name, fix step1

---
 .../components/message/Markdown/index.less    |  82 -----------
 .../components/message/Markdown/index.tsx     | 128 ------------------
 .../Markdown/modules/CodeBlock/index.less     |  42 ------
 .../Markdown/modules/CodeBlock/index.tsx      |  38 ------
 .../chat/components/message/Text/index.less   |  17 ---
 .../chat/components/message/Text/index.tsx    |   9 --
 6 files changed, 316 deletions(-)
 delete mode 100644 web/platform/src/modules/chat/components/message/Markdown/index.less
 delete mode 100644 web/platform/src/modules/chat/components/message/Markdown/index.tsx
 delete mode 100644 web/platform/src/modules/chat/components/message/Markdown/modules/CodeBlock/index.less
 delete mode 100644 web/platform/src/modules/chat/components/message/Markdown/modules/CodeBlock/index.tsx
 delete mode 100644 web/platform/src/modules/chat/components/message/Text/index.less
 delete mode 100644 web/platform/src/modules/chat/components/message/Text/index.tsx

diff --git a/web/platform/src/modules/chat/components/message/Markdown/index.less b/web/platform/src/modules/chat/components/message/Markdown/index.less
deleted file mode 100644
index 5c54106..0000000
--- a/web/platform/src/modules/chat/components/message/Markdown/index.less
+++ /dev/null
@@ -1,82 +0,0 @@
-.chat-msg-md {
-  max-width: 100%;
-
-  p {
-    font-size: 14px;
-    line-height: 22px;
-  }
-
-  li {
-    line-height: 22px;
-  }
-
-  a {
-    text-decoration: none;
-    color: #1677ff;
-  }
-
-  & > *:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.chat-msg-md-content {
-  color: #878c93;
-}
-
-.chat-msg-md-message {
-  .chat-msg-md-code-pre code {
-    padding: 0;
-    font-size: unset;
-    // width: 646px;
-    display: inline-block;
-  }
-
-  code {
-    padding: 0.2em 0.4em;
-    margin: 0;
-    font-size: 85%;
-    background-color: rgba(27, 31, 35, 5%);
-    border-radius: 3px;
-  }
-
-  table {
-    border-spacing: 0;
-    border-collapse: collapse;
-  }
-
-  td,
-  th {
-    padding: 0;
-  }
-
-  // table {
-  //   margin-top: 0;
-  //   margin-bottom: 16px;
-  // }
-
-  .chat-msg-md-markdown-body table {
-    display: block;
-    width: 100%;
-    overflow: auto;
-  }
-
-  table th {
-    font-weight: 600;
-  }
-
-  table td,
-  table th {
-    padding: 6px 13px;
-    border: 1px solid #dfe2e5;
-  }
-
-  table tr {
-    background-color: #fff;
-    border-top: 1px solid #c6cbd1;
-  }
-
-  table tr:nth-child(2n) {
-    background-color: #f6f8fa;
-  }
-}
diff --git a/web/platform/src/modules/chat/components/message/Markdown/index.tsx b/web/platform/src/modules/chat/components/message/Markdown/index.tsx
deleted file mode 100644
index e798db8..0000000
--- a/web/platform/src/modules/chat/components/message/Markdown/index.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import { Modal } from 'antd';
-import classNames from 'classnames';
-import { useEffect, useState } from 'react';
-import ReactMarkdown from 'react-markdown';
-import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
-import breaks from 'remark-breaks';
-import remarkGfm from 'remark-gfm';
-
-import { CodeBlock } from './modules/CodeBlock/index.js';
-import './index.less';
-
-// const PreBlock = (...args:any) => {
-//   console.log(args)
-//   return <div>pre</div>
-// }
-
-interface MarkdownProps {
-  children: any;
-  className?: string;
-  type?: 'message' | 'content';
-}
-
-function ImageModal({ src, alt }: any) {
-  const [visible, setVisible] = useState(false);
-  const [imageDimensions, setImageDimensions] = useState({
-    width: 0,
-    height: 0,
-  });
-
-  useEffect(() => {
-    const img = new Image();
-    img.src = src;
-    img.onload = () => {
-      setImageDimensions({
-        width: img.width,
-        height: img.height,
-      });
-    };
-  }, [src]);
-
-  const maxModalWidth = window.innerWidth * 0.8; // 80% of the viewport width
-  const maxModalHeight = window.innerHeight * 0.8; // 80% of the viewport height
-
-  let adjustedWidth, adjustedHeight;
-
-  const aspectRatio = imageDimensions.width / imageDimensions.height;
-
-  if (imageDimensions.width > maxModalWidth) {
-    adjustedWidth = maxModalWidth;
-    adjustedHeight = adjustedWidth / aspectRatio;
-  } else if (imageDimensions.height > maxModalHeight) {
-    adjustedHeight = maxModalHeight;
-    adjustedWidth = adjustedHeight * aspectRatio;
-  } else {
-    adjustedWidth = imageDimensions.width;
-    adjustedHeight = imageDimensions.height;
-  }
-
-  return (
-    <div>
-      <img
-        src={src}
-        alt={alt}
-        style={{ cursor: 'pointer' }}
-        onClick={() => setVisible(true)}
-        onLoad={() => {
-          // 解决生成图片没有滚动到最下方的问题。
-          document.getElementById('chat-main-scroll')?.scrollIntoView(false);
-        }}
-      />
-      <Modal
-        open={visible}
-        closeIcon={false}
-        footer={null}
-        width={adjustedWidth + 30}
-        onCancel={() => setVisible(false)}
-        bodyStyle={{
-          padding: 0,
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          height: adjustedHeight,
-        }}
-      >
-        <TransformWrapper initialScale={1} initialPositionX={0} initialPositionY={0}>
-          <TransformComponent>
-            <img
-              src={src}
-              alt={alt}
-              style={{
-                width: '100%',
-                height: '100%',
-              }}
-            />
-          </TransformComponent>
-        </TransformWrapper>
-      </Modal>
-    </div>
-  );
-}
-
-export const Markdown = (props: MarkdownProps) => {
-  const { type = 'message', className } = props;
-
-  useEffect(() => {
-    const links = document.querySelectorAll('a');
-    for (let i = 0, length = links.length; i < length; i++) {
-      if (links[i].hostname !== window.location.hostname) {
-        links[i].target = '_blank';
-      }
-    }
-  }, [props.children]);
-
-  return (
-    <ReactMarkdown
-      className={classNames(
-        `chat-msg-md`,
-        type === 'content' && `chat-msg-md-content`,
-        type === 'message' && `chat-msg-md-message`,
-        className,
-      )}
-      components={{ code: CodeBlock, img: ImageModal }}
-      remarkPlugins={[remarkGfm, breaks]}
-    >
-      {props.children}
-    </ReactMarkdown>
-  );
-};
diff --git a/web/platform/src/modules/chat/components/message/Markdown/modules/CodeBlock/index.less b/web/platform/src/modules/chat/components/message/Markdown/modules/CodeBlock/index.less
deleted file mode 100644
index 7ae4ba6..0000000
--- a/web/platform/src/modules/chat/components/message/Markdown/modules/CodeBlock/index.less
+++ /dev/null
@@ -1,42 +0,0 @@
-.chat-msg-md-code-pre {
-  :global {
-    .md-code-pre {
-      margin: 0 !important;
-      padding: 1.5em !important;
-    }
-  }
-}
-
-.chat-msg-md-code-wrap {
-  border-radius: 4px;
-  position: relative;
-  margin: 0;
-}
-
-.chat-msg-md-code-lang {
-  position: absolute;
-  top: 9px;
-  right: 28px;
-  color: #fff;
-  opacity: 0.8;
-  font-size: 14px;
-  line-height: 16px;
-}
-
-.chat-msg-md-code-copy {
-  font-size: 16px;
-  cursor: pointer;
-  position: absolute;
-  top: 9px;
-  right: 4px;
-  color: #fff;
-  opacity: 0.8;
-
-  &:hover {
-    opacity: 1;
-  }
-}
-
-.chat-msg-md-code-code {
-  display: block;
-}
diff --git a/web/platform/src/modules/chat/components/message/Markdown/modules/CodeBlock/index.tsx b/web/platform/src/modules/chat/components/message/Markdown/modules/CodeBlock/index.tsx
deleted file mode 100644
index 0c1aa13..0000000
--- a/web/platform/src/modules/chat/components/message/Markdown/modules/CodeBlock/index.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import { CopyOutlined } from '@ant-design/icons';
-import { message } from 'antd';
-import copy from 'copy-to-clipboard';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
-
-import './index.less';
-
-export const CodeBlock = (props: any) => {
-  const { className, children } = props;
-
-  if (!props.inline) {
-    const [, lang] = /language-(\w+)/.exec(className || '') || [];
-
-    return (
-      <pre className={`chat-msg-md-code-wrap`}>
-        {lang && <div className={`chat-msg-md-code-lang`}>{lang}</div>}
-        <CopyOutlined
-          onClick={() => {
-            copy(children);
-            message.success('代码已复制');
-          }}
-          className={`chat-msg-md-code-copy`}
-        />
-        <SyntaxHighlighter
-          className={`chat-msg-md-code-pre`}
-          language={lang}
-          style={oneDark}
-        >
-          {typeof children === 'string' ? children.trim() : children}
-        </SyntaxHighlighter>
-      </pre>
-    );
-  }
-
-  return <code className={`chat-msg-md-code-code`}>{children}</code>;
-};
diff --git a/web/platform/src/modules/chat/components/message/Text/index.less b/web/platform/src/modules/chat/components/message/Text/index.less
deleted file mode 100644
index 7c41d71..0000000
--- a/web/platform/src/modules/chat/components/message/Text/index.less
+++ /dev/null
@@ -1,17 +0,0 @@
-.text-message-text {
-  min-height: 40px;
-  line-height: 22px;
-  // display: flex;
-  // align-items: center;
-  white-space: pre-wrap;
-  // flex: 1 1;
-  overflow: hidden;
-  max-width: 420px;
-}
-
-.text-message-textPop {
-  display: inline-block;
-  background-color: #e6f4ff;
-  border-radius: 8px;
-  padding: 12px 16px;
-}
diff --git a/web/platform/src/modules/chat/components/message/Text/index.tsx b/web/platform/src/modules/chat/components/message/Text/index.tsx
deleted file mode 100644
index a432283..0000000
--- a/web/platform/src/modules/chat/components/message/Text/index.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import './index.less';
-
-export const TextMessage = ({ content }: any) => {
-  return (
-    <div className={`text-message-text`}>
-      <span className={`text-message-textPop`}>{content}</span>
-    </div>
-  );
-};

From 91f3a1dbb38f95a73f9993b6d110d65ba56e35b5 Mon Sep 17 00:00:00 2001
From: brokun <yukun.wyk@antgroup.com>
Date: Wed, 7 Aug 2024 11:05:19 +0800
Subject: [PATCH 5/5] fix(ui): unexpected file name, fix step2

---
 .../components/message/markdown/index.less    |  82 +++++++++++
 .../components/message/markdown/index.tsx     | 128 ++++++++++++++++++
 .../markdown/modules/CodeBlock/index.less     |  42 ++++++
 .../markdown/modules/CodeBlock/index.tsx      |  38 ++++++
 .../chat/components/message/text/index.less   |  17 +++
 .../chat/components/message/text/index.tsx    |   9 ++
 6 files changed, 316 insertions(+)
 create mode 100644 web/platform/src/modules/chat/components/message/markdown/index.less
 create mode 100644 web/platform/src/modules/chat/components/message/markdown/index.tsx
 create mode 100644 web/platform/src/modules/chat/components/message/markdown/modules/CodeBlock/index.less
 create mode 100644 web/platform/src/modules/chat/components/message/markdown/modules/CodeBlock/index.tsx
 create mode 100644 web/platform/src/modules/chat/components/message/text/index.less
 create mode 100644 web/platform/src/modules/chat/components/message/text/index.tsx

diff --git a/web/platform/src/modules/chat/components/message/markdown/index.less b/web/platform/src/modules/chat/components/message/markdown/index.less
new file mode 100644
index 0000000..5c54106
--- /dev/null
+++ b/web/platform/src/modules/chat/components/message/markdown/index.less
@@ -0,0 +1,82 @@
+.chat-msg-md {
+  max-width: 100%;
+
+  p {
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  li {
+    line-height: 22px;
+  }
+
+  a {
+    text-decoration: none;
+    color: #1677ff;
+  }
+
+  & > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.chat-msg-md-content {
+  color: #878c93;
+}
+
+.chat-msg-md-message {
+  .chat-msg-md-code-pre code {
+    padding: 0;
+    font-size: unset;
+    // width: 646px;
+    display: inline-block;
+  }
+
+  code {
+    padding: 0.2em 0.4em;
+    margin: 0;
+    font-size: 85%;
+    background-color: rgba(27, 31, 35, 5%);
+    border-radius: 3px;
+  }
+
+  table {
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+
+  td,
+  th {
+    padding: 0;
+  }
+
+  // table {
+  //   margin-top: 0;
+  //   margin-bottom: 16px;
+  // }
+
+  .chat-msg-md-markdown-body table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+  }
+
+  table th {
+    font-weight: 600;
+  }
+
+  table td,
+  table th {
+    padding: 6px 13px;
+    border: 1px solid #dfe2e5;
+  }
+
+  table tr {
+    background-color: #fff;
+    border-top: 1px solid #c6cbd1;
+  }
+
+  table tr:nth-child(2n) {
+    background-color: #f6f8fa;
+  }
+}
diff --git a/web/platform/src/modules/chat/components/message/markdown/index.tsx b/web/platform/src/modules/chat/components/message/markdown/index.tsx
new file mode 100644
index 0000000..e798db8
--- /dev/null
+++ b/web/platform/src/modules/chat/components/message/markdown/index.tsx
@@ -0,0 +1,128 @@
+import { Modal } from 'antd';
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
+import breaks from 'remark-breaks';
+import remarkGfm from 'remark-gfm';
+
+import { CodeBlock } from './modules/CodeBlock/index.js';
+import './index.less';
+
+// const PreBlock = (...args:any) => {
+//   console.log(args)
+//   return <div>pre</div>
+// }
+
+interface MarkdownProps {
+  children: any;
+  className?: string;
+  type?: 'message' | 'content';
+}
+
+function ImageModal({ src, alt }: any) {
+  const [visible, setVisible] = useState(false);
+  const [imageDimensions, setImageDimensions] = useState({
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    const img = new Image();
+    img.src = src;
+    img.onload = () => {
+      setImageDimensions({
+        width: img.width,
+        height: img.height,
+      });
+    };
+  }, [src]);
+
+  const maxModalWidth = window.innerWidth * 0.8; // 80% of the viewport width
+  const maxModalHeight = window.innerHeight * 0.8; // 80% of the viewport height
+
+  let adjustedWidth, adjustedHeight;
+
+  const aspectRatio = imageDimensions.width / imageDimensions.height;
+
+  if (imageDimensions.width > maxModalWidth) {
+    adjustedWidth = maxModalWidth;
+    adjustedHeight = adjustedWidth / aspectRatio;
+  } else if (imageDimensions.height > maxModalHeight) {
+    adjustedHeight = maxModalHeight;
+    adjustedWidth = adjustedHeight * aspectRatio;
+  } else {
+    adjustedWidth = imageDimensions.width;
+    adjustedHeight = imageDimensions.height;
+  }
+
+  return (
+    <div>
+      <img
+        src={src}
+        alt={alt}
+        style={{ cursor: 'pointer' }}
+        onClick={() => setVisible(true)}
+        onLoad={() => {
+          // 解决生成图片没有滚动到最下方的问题。
+          document.getElementById('chat-main-scroll')?.scrollIntoView(false);
+        }}
+      />
+      <Modal
+        open={visible}
+        closeIcon={false}
+        footer={null}
+        width={adjustedWidth + 30}
+        onCancel={() => setVisible(false)}
+        bodyStyle={{
+          padding: 0,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: adjustedHeight,
+        }}
+      >
+        <TransformWrapper initialScale={1} initialPositionX={0} initialPositionY={0}>
+          <TransformComponent>
+            <img
+              src={src}
+              alt={alt}
+              style={{
+                width: '100%',
+                height: '100%',
+              }}
+            />
+          </TransformComponent>
+        </TransformWrapper>
+      </Modal>
+    </div>
+  );
+}
+
+export const Markdown = (props: MarkdownProps) => {
+  const { type = 'message', className } = props;
+
+  useEffect(() => {
+    const links = document.querySelectorAll('a');
+    for (let i = 0, length = links.length; i < length; i++) {
+      if (links[i].hostname !== window.location.hostname) {
+        links[i].target = '_blank';
+      }
+    }
+  }, [props.children]);
+
+  return (
+    <ReactMarkdown
+      className={classNames(
+        `chat-msg-md`,
+        type === 'content' && `chat-msg-md-content`,
+        type === 'message' && `chat-msg-md-message`,
+        className,
+      )}
+      components={{ code: CodeBlock, img: ImageModal }}
+      remarkPlugins={[remarkGfm, breaks]}
+    >
+      {props.children}
+    </ReactMarkdown>
+  );
+};
diff --git a/web/platform/src/modules/chat/components/message/markdown/modules/CodeBlock/index.less b/web/platform/src/modules/chat/components/message/markdown/modules/CodeBlock/index.less
new file mode 100644
index 0000000..7ae4ba6
--- /dev/null
+++ b/web/platform/src/modules/chat/components/message/markdown/modules/CodeBlock/index.less
@@ -0,0 +1,42 @@
+.chat-msg-md-code-pre {
+  :global {
+    .md-code-pre {
+      margin: 0 !important;
+      padding: 1.5em !important;
+    }
+  }
+}
+
+.chat-msg-md-code-wrap {
+  border-radius: 4px;
+  position: relative;
+  margin: 0;
+}
+
+.chat-msg-md-code-lang {
+  position: absolute;
+  top: 9px;
+  right: 28px;
+  color: #fff;
+  opacity: 0.8;
+  font-size: 14px;
+  line-height: 16px;
+}
+
+.chat-msg-md-code-copy {
+  font-size: 16px;
+  cursor: pointer;
+  position: absolute;
+  top: 9px;
+  right: 4px;
+  color: #fff;
+  opacity: 0.8;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.chat-msg-md-code-code {
+  display: block;
+}
diff --git a/web/platform/src/modules/chat/components/message/markdown/modules/CodeBlock/index.tsx b/web/platform/src/modules/chat/components/message/markdown/modules/CodeBlock/index.tsx
new file mode 100644
index 0000000..0c1aa13
--- /dev/null
+++ b/web/platform/src/modules/chat/components/message/markdown/modules/CodeBlock/index.tsx
@@ -0,0 +1,38 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { CopyOutlined } from '@ant-design/icons';
+import { message } from 'antd';
+import copy from 'copy-to-clipboard';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+import './index.less';
+
+export const CodeBlock = (props: any) => {
+  const { className, children } = props;
+
+  if (!props.inline) {
+    const [, lang] = /language-(\w+)/.exec(className || '') || [];
+
+    return (
+      <pre className={`chat-msg-md-code-wrap`}>
+        {lang && <div className={`chat-msg-md-code-lang`}>{lang}</div>}
+        <CopyOutlined
+          onClick={() => {
+            copy(children);
+            message.success('代码已复制');
+          }}
+          className={`chat-msg-md-code-copy`}
+        />
+        <SyntaxHighlighter
+          className={`chat-msg-md-code-pre`}
+          language={lang}
+          style={oneDark}
+        >
+          {typeof children === 'string' ? children.trim() : children}
+        </SyntaxHighlighter>
+      </pre>
+    );
+  }
+
+  return <code className={`chat-msg-md-code-code`}>{children}</code>;
+};
diff --git a/web/platform/src/modules/chat/components/message/text/index.less b/web/platform/src/modules/chat/components/message/text/index.less
new file mode 100644
index 0000000..7c41d71
--- /dev/null
+++ b/web/platform/src/modules/chat/components/message/text/index.less
@@ -0,0 +1,17 @@
+.text-message-text {
+  min-height: 40px;
+  line-height: 22px;
+  // display: flex;
+  // align-items: center;
+  white-space: pre-wrap;
+  // flex: 1 1;
+  overflow: hidden;
+  max-width: 420px;
+}
+
+.text-message-textPop {
+  display: inline-block;
+  background-color: #e6f4ff;
+  border-radius: 8px;
+  padding: 12px 16px;
+}
diff --git a/web/platform/src/modules/chat/components/message/text/index.tsx b/web/platform/src/modules/chat/components/message/text/index.tsx
new file mode 100644
index 0000000..a432283
--- /dev/null
+++ b/web/platform/src/modules/chat/components/message/text/index.tsx
@@ -0,0 +1,9 @@
+import './index.less';
+
+export const TextMessage = ({ content }: any) => {
+  return (
+    <div className={`text-message-text`}>
+      <span className={`text-message-textPop`}>{content}</span>
+    </div>
+  );
+};