Merge pull request #78 from ant-xuexiao/chore_style

style: optimize the style of intermediate step components

lui/src/Chat/index.md

@@ -10,7 +10,8 @@ export default () => (
       assistantMeta={{
         avatar:
           'https://mdn.alipayobjects.com/huamei_j8gzmo/afts/img/A*R_7BSIzhH9wAAAAAAAAAAAAADrPSAQ/original',
-        title: 'Kate',
+        title: 'Ant Design',
+
       }}
     />
   </div>

lui/src/Chat/index.tsx

@@ -5,6 +5,7 @@ import type {
   ProChatInstance,
 } from '@ant-design/pro-chat';
 import { ProChat } from '@ant-design/pro-chat';
+import { Markdown } from '@ant-design/pro-editor';
 import StopBtn from 'lui/StopBtn';
 import { theme } from 'lui/Theme';
 import ThoughtChain from 'lui/ThoughtChain';
@@ -21,13 +22,14 @@ const globalToken = getDesignToken();
 export interface ChatProps {
   assistantMeta?: MetaData;
   helloMessage?: string;
+  host?: string;
   slot?: {
     componentID: string;
     renderFunc: (data: any) => React.ReactNode;
   }[];
 }
 
-const Chat: FC<ChatProps> = memo(({ helloMessage }) => {
+const Chat: FC<ChatProps> = memo(({ helloMessage, host }) => {
   const proChatRef = useRef<ProChatInstance>();
   const [chats, setChats] = useState<ChatMessage<Record<string, any>>[]>();
   return (
@@ -36,36 +38,14 @@ const Chat: FC<ChatProps> = memo(({ helloMessage }) => {
       style={{ backgroundColor: globalToken.chatBoxBackgroundColor }}
     >
       <ProChat
+        showTitle
         chats={chats}
         onChatsChange={(chats) => {
           setChats(chats);
         }}
         chatRef={proChatRef}
         helloMessage={helloMessage || BOT_INFO.work_info.prologue}
         userMeta={{ title: 'User' }}
-        transformToChatMessage={async (pre) => {
-          if (!pre.startsWith('data:')) {
-            return pre;
-          }
-          const regex = /data:(.*)/;
-          const match = pre.match(regex);
-          if (match && match[1]) {
-            const res = JSON.parse(match[1]);
-            const { content, role, id } = res;
-            if (role === Role.tool && content.status === 'success') {
-              proChatRef?.current?.pushChat({
-                content: content,
-                id,
-                role: 'tool',
-              });
-            }
-          } else {
-            console.error('No valid JSON found in input');
-            return '';
-          }
-
-          return '';
-        }}
         chatItemRenderConfig={{
           avatarRender: (props: ChatItemProps) => {
             if (props.originData?.role === Role.user) {
@@ -79,20 +59,56 @@ const Chat: FC<ChatProps> = memo(({ helloMessage }) => {
             }
           },
           contentRender: (props: ChatItemProps, defaultDom: ReactNode) => {
-            const _originData = props.originData || {};
-            const { role, content } = _originData;
-            const { status, source } = content;
+            const originData = props.originData || {};
+            const message = originData.content;
+
+            if (!message || !message.startsWith('<TOOL>')) {
+              return defaultDom;
+            }
+
+            const [toolStr, answerStr] = message.split('<ANSWER>');
+            const tools = toolStr.split('\n').filter(Boolean);
+            const lastTool = tools[tools.length - 1];
+
+            const regex = /<TOOL>(.*)/;
+            const match = lastTool.match(regex);
+
+            if (!match) {
+              console.error('No valid JSON found in input');
+              return defaultDom;
+            }
+
+            try {
+              const config = JSON.parse(match[1]);
+              const { type, extra } = config;
+
+              if (![Role.knowledge, Role.tool].includes(type)) {
+                return defaultDom;
+              }
+
+              const { status, source } = extra;
 
-            if ([Role.knowledge, Role.tool].includes(role)) {
               return (
-                <ThoughtChain
-                  content={content}
-                  status={status}
-                  source={source}
-                />
+                <div
+                  className="p-2 bg-white rounded-md "
+                  style={{ minWidth: 'calc(375px - 90px)' }}
+                >
+                  <div className="mb-1">
+                    <ThoughtChain
+                      content={extra}
+                      status={status}
+                      source={source}
+                    />
+                  </div>
+                  <Markdown style={{ overflowX: 'hidden', overflowY: 'auto' }}>
+                    {answerStr}
+                  </Markdown>
+                </div>
               );
+            } catch (error) {
+              console.error(`JSON parse error: ${error}`);
+              return defaultDom;
             }
-            return defaultDom;
           },
         }}
         assistantMeta={{
@@ -120,7 +136,7 @@ const Chat: FC<ChatProps> = memo(({ helloMessage }) => {
               content: message.content as string,
             }));
 
-          const response = await streamChat(newMessages);
+          const response = await streamChat(newMessages, host);
           return handleStream(response);
         }}
         inputAreaProps={{ className: 'userInputBox h-24 !important' }}

lui/src/ThoughtChain/index.tsx

@@ -45,6 +45,7 @@ export interface ThoughtChainProps {
 
 const ThoughtChain: React.FC<ThoughtChainProps> = (params) => {
   const { content, status, source } = params;
+
   const [activeKey, setActiveKey] = useState([]);
 
   const items: CollapseProps['items'] = useMemo(() => {

lui/src/mock/bot.mock.ts

@@ -1,7 +1,7 @@
 export const BOT_INFO = {
   space_id: '7339848903757529151',
   resourceId: '7347955826042404903',
-  resourceName: '测试bot',
+  resourceName: 'Ant Design',
   avatar:
     'https://mdn.alipayobjects.com/huamei_j8gzmo/afts/img/A*R_7BSIzhH9wAAAAAAAAAAAAADrPSAQ/original',
   creatorId: '208822222222',
@@ -12,7 +12,7 @@ export const BOT_INFO = {
     tools: '格式待补充', //插件配置内容
     dataset: '格式待补充', //rag知识库
     prologue: '你好 愚蠢的地球人', //开场白
-    suggested_questions: ['汽车人万岁', '霸天虎屎定了', '你还有什么说的'] //预制问题
+    suggested_questions: ['汽车人万岁', '霸天虎屎定了', '你还有什么说的'], //预制问题
   },
   status: 1,
 };

lui/src/services/ChatController.ts

@@ -4,8 +4,11 @@ import { IPrompt } from 'lui/interface';
  * Chat api
  * @param message IPrompt
  */
-export async function streamChat(messages: IPrompt[]): Promise<Response> {
-  return fetch('http://127.0.0.1:8000/api/chat/stream', {
+export async function streamChat(
+  messages: IPrompt[],
+  host = 'http://127.0.0.1:8000',
+): Promise<Response> {
+  return fetch(`${host}/api/chat/stream`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',

server/agent/stream.py

@@ -141,29 +141,29 @@ async def agent_chat(input_data: ChatData, openai_api_key) -> AsyncIterator[str]
             elif kind == "on_tool_start":
                 children_value = event["data"].get("input", {})
                 json_output = json.dumps({
-                    "role": "tool",
+                    "type": "tool",
                     "id": uid,
-                    "content": {
+                    "extra": {
                         "source": f"已调用工具: {event['name']}",
                         "pluginName": "GitHub",
-                        "data": children_value,
+                        "data": json.dumps(children_value, ensure_ascii=False),
                         "status": "loading"
                     }
                 }, ensure_ascii=False)
-                yield f"data:{json_output}\n"
+                yield f"<TOOL>{json_output}\n"
             elif kind == "on_tool_end":
                 children_value = event["data"].get("output", {})
                 json_output = json.dumps({
-                    "role": "tool",
+                    "type": "tool",
                     "id": uid,
-                    "content": {
+                    "extra": {
                         "source": f"已调用工具: {event['name']}",
                         "pluginName": "GitHub",
                         "data": children_value,
                         "status": "success"
                     },
                 }, ensure_ascii=False)
-                yield f"data:{json_output}\n"
+                yield f"<TOOL>{json_output}\n<ANSWER>"
     except Exception as e:
         yield f"data: {str(e)}\n"