Merge pull request #66 from jianyi-gronk/main

前端优化

Author: yuluo-yx

spring-ai-alibaba-integration-example/frontend/src/App.tsx

@@ -9,7 +9,6 @@ import {
   useXAgent,
   useXChat
 } from "@ant-design/x";
-import { createStyles } from "antd-style";
 import React, { useEffect } from "react";
 import {
   CloudUploadOutlined,
@@ -25,9 +24,23 @@ import {
   EditOutlined,
   ShareAltOutlined
 } from "@ant-design/icons";
-import { Flex, App, Badge, Button, type GetProp, Space, theme } from "antd";
+import {
+  Flex,
+  App,
+  Badge,
+  Button,
+  Space,
+  Typography,
+  Tag,
+  type GetProp,
+  Tooltip,
+  Select
+} from "antd";
 import ReactMarkdown from "react-markdown";
-import { getChat } from "./request";
+import { getChat, getModels } from "./request";
+import { useStyle } from "./style";
+
+const DEFAULT_MODEL = "qwen-plus";
 
 const decoder = new TextDecoder("utf-8");
 
@@ -38,9 +51,7 @@ const renderTitle = (icon: React.ReactElement, title: string) => (
   </Space>
 );
 
-// 用于临时保存会话记录
-const messagesMap = {} as Record<string, Array<any>>;
-
+// 新会话默认展示
 const placeholderPromptsItems: GetProp<typeof Prompts, "items"> = [
   {
     key: "1",
@@ -88,92 +99,24 @@ const placeholderPromptsItems: GetProp<typeof Prompts, "items"> = [
   }
 ];
 
+// 默认会话
 const defaultKey = Date.now().toString();
-
 const defaultConversationsItems = [
   {
     key: defaultKey,
-    label: "What is Spring Ai Alibaba?"
+    label: (
+      <span>
+        Conversation 1
+        <Tag style={{ marginLeft: 8 }} color="green">
+          {DEFAULT_MODEL}
+        </Tag>
+      </span>
+    )
   }
 ];
 
-const useStyle = createStyles(({ token, css }) => {
-  return {
-    layout: css`
-      width: 100%;
-      min-width: 1000px;
-      height: 722px;
-      border-radius: ${token.borderRadius}px;
-      display: flex;
-      background: ${token.colorBgContainer};
-      font-family: AlibabaPuHuiTi, ${token.fontFamily}, sans-serif;
-
-      .ant-prompts {
-        color: ${token.colorText};
-      }
-    `,
-    menu: css`
-      background: ${token.colorBgLayout}80;
-      width: 280px;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-    `,
-    conversations: css`
-      padding: 0 12px;
-      flex: 1;
-      overflow-y: auto;
-    `,
-    chat: css`
-      height: 100%;
-      width: 100%;
-      max-width: 700px;
-      margin: 0 auto;
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: column;
-      padding: ${token.paddingLG}px;
-      gap: 16px;
-    `,
-    messages: css`
-      flex: 1;
-    `,
-    placeholder: css`
-      padding-top: 32px;
-    `,
-    sender: css`
-      box-shadow: ${token.boxShadow};
-    `,
-    logo: css`
-      display: flex;
-      height: 72px;
-      align-items: center;
-      justify-content: start;
-      padding: 0 24px;
-      box-sizing: border-box;
-
-      img {
-        width: 24px;
-        height: 24px;
-        display: inline-block;
-      }
-
-      span {
-        display: inline-block;
-        margin: 0 8px;
-        font-weight: bold;
-        color: ${token.colorText};
-        font-size: 16px;
-      }
-    `,
-    addBtn: css`
-      background: #1677ff0f;
-      border: 1px solid #1677ff34;
-      width: calc(100% - 24px);
-      margin: 0 12px 24px 12px;
-    `
-  };
-});
+// 用于临时保存会话记录
+const messagesMap = {} as Record<string, { model: string; messages: any[] }>;
 
 const senderPromptsItems: GetProp<typeof Prompts, "items"> = [
   {
@@ -188,6 +131,7 @@ const senderPromptsItems: GetProp<typeof Prompts, "items"> = [
   }
 ];
 
+// 会话中角色列表
 const roles: GetProp<typeof Bubble.List, "roles"> = {
   ai: {
     placement: "start",
@@ -196,7 +140,25 @@ const roles: GetProp<typeof Bubble.List, "roles"> = {
       content: {
         borderRadius: 16
       }
-    }
+    },
+    messageRender: (content) => (
+      <Typography>
+        <ReactMarkdown>{content}</ReactMarkdown>
+      </Typography>
+    )
+  },
+  aiHistory: {
+    placement: "start",
+    styles: {
+      content: {
+        borderRadius: 16
+      }
+    },
+    messageRender: (content) => (
+      <Typography>
+        <ReactMarkdown>{content}</ReactMarkdown>
+      </Typography>
+    )
   },
   local: {
     placement: "end",
@@ -237,13 +199,17 @@ const Independent: React.FC = () => {
   >([]);
 
   const { message } = App.useApp();
-  const [recording, setRecording] = React.useState(false);
-  const { token } = theme.useToken();
+
+  // 当前会话的模型
+  const [model, setModel] = React.useState(DEFAULT_MODEL);
+  // 将要新增会话的模型
+  const [nextModel, setNextModel] = React.useState(DEFAULT_MODEL);
 
   // ==================== Runtime ====================
   const [agent] = useXAgent({
-    request: async ({ message }, { onSuccess }) => {
+    request: async ({ message }, { onSuccess, onUpdate }) => {
       let buffer = "";
+      onUpdate(JSON.stringify({ role: "ai", value: "" }));
 
       const res = await getChat(
         JSON.parse(message || "{}")?.value || "",
@@ -257,13 +223,15 @@ const Independent: React.FC = () => {
             res.forEach((item) => {
               if (item?.message === "success") {
                 buffer = buffer + item?.data;
+                onUpdate(JSON.stringify({ role: "ai", value: buffer }));
               }
             });
           }
         },
         {
           image: attachedFiles?.[0]?.originFileObj,
-          chatId: activeKey
+          chatId: activeKey,
+          model
         }
       );
 
@@ -274,11 +242,29 @@ const Independent: React.FC = () => {
         value =
           "Request failed." + (res?.statusText ? " " + res?.statusText : "");
       }
+
       onSuccess(JSON.stringify({ role: "ai", value }));
     },
     customParams: [attachedFiles]
   });
 
+  // 获取模型列表
+  const [modelItems, setModelItems] = React.useState([]);
+  useEffect(() => {
+    getModels().then((res) => {
+      setModelItems(
+        res.map(({ model, desc }) => ({
+          value: model,
+          label: (
+            <Tooltip title={desc} placement="right">
+              {model}
+            </Tooltip>
+          )
+        }))
+      );
+    });
+  }, []);
+
   const [items, setItems] = React.useState<
     GetProp<typeof Bubble.List, "items">
   >([]);
@@ -322,30 +308,61 @@ const Independent: React.FC = () => {
     onRequest(info.data.description as string);
   };
 
+  // 将模型返回的消息的 role 转换成历史记录，避免切换会话触发渲染动效
+  const getMessageHistory = () => {
+    return messages.map((item) => {
+      const value = JSON.parse(item.message);
+      if (value.role === "ai") {
+        value.role = "aiHistory";
+        item.message = JSON.stringify(value);
+        return item;
+      } else {
+        return item;
+      }
+    });
+  };
+
+  // 新增会话
   const onAddConversation = async () => {
     const newKey = Date.now().toString();
     setConversationsItems([
       ...conversationsItems,
       {
         key: newKey,
-        label: `New Conversation ${conversationsItems.length}`
+        label: (
+          <span>
+            {`Conversation ${conversationsItems.length + 1}`}
+            <Tag style={{ marginLeft: 8 }} color="green">
+              {nextModel}
+            </Tag>
+          </span>
+        )
       }
     ]);
-    messagesMap[activeKey] = messages;
+    messagesMap[activeKey] = {
+      model,
+      messages: getMessageHistory()
+    };
     setHeaderOpen(false);
     setAttachedFiles([]);
-    setMessages([]);
     setActiveKey(newKey);
+    setMessages([]);
+    setModel(nextModel);
   };
 
+  // 切换会话
   const onConversationClick: GetProp<typeof Conversations, "onActiveChange"> = (
     key
   ) => {
-    messagesMap[activeKey] = messages;
+    messagesMap[activeKey] = {
+      model,
+      messages: getMessageHistory()
+    };
     setHeaderOpen(false);
     setAttachedFiles([]);
-    setMessages(messagesMap[key] || []);
     setActiveKey(key);
+    setMessages(messagesMap[key].messages || []);
+    setModel(messagesMap[key].model || DEFAULT_MODEL);
   };
 
   const handleFileChange: GetProp<typeof Attachments, "onChange"> = (info) => {
@@ -402,6 +419,7 @@ const Independent: React.FC = () => {
     </Space>
   );
 
+  // messages 转 items
   useEffect(() => {
     setItems(
       messages.map(({ id, message, status }) => {
@@ -410,8 +428,8 @@ const Independent: React.FC = () => {
           const value = item?.value;
           return {
             key: id,
-            loading: status === "loading",
-            role: "file",
+            role: item?.role,
+            loading: !value,
             content: [
               {
                 uid: value?.uid,
@@ -421,11 +439,12 @@ const Independent: React.FC = () => {
             ]
           };
         } else {
+          const value = item?.value;
           return {
             key: id,
-            loading: status === "loading",
-            role: status === "local" ? "local" : "ai",
-            content: <ReactMarkdown>{item.value}</ReactMarkdown>
+            role: item?.role,
+            loading: !value,
+            content: value
           };
         }
       })
@@ -488,6 +507,16 @@ const Independent: React.FC = () => {
       <div className={styles.menu}>
         {/* 🌟 Logo */}
         {logoNode}
+        {/* 🌟 模型选择 */}
+        <div className={styles.chooseModel}>
+          选择模型类型
+          <Select
+            onChange={setNextModel}
+            options={modelItems}
+            style={{ width: 120 }}
+            value={nextModel}
+          />
+        </div>
         {/* 🌟 添加会话 */}
         <Button
           onClick={onAddConversation}
@@ -524,14 +553,7 @@ const Independent: React.FC = () => {
           value={content}
           header={senderHeader}
           onSubmit={onSubmit}
-          allowSpeech={{
-            // When setting `recording`, the built-in speech recognition feature will be disabled
-            recording,
-            onRecordingChange: (nextRecording) => {
-              message.info(`Mock Customize Recording: ${nextRecording}`);
-              setRecording(nextRecording);
-            }
-          }}
+          allowSpeech
           onChange={setContent}
           prefix={attachmentsNode}
           loading={agent.isRequesting()}