chat & session

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"
   },

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")

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",

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';
 

web/platform/src/modules/chat/components/message/Markdown/index.tsx → 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)

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;

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",

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}`;
+  }
+}