feat(web): 增加编辑侧边栏关闭时保存节点数据

service-ai/service-ai-web/src/main/java/com/lanyuanxiaoyao/service/ai/web/WebApplication.java

@@ -34,6 +34,10 @@ public class WebApplication implements ApplicationRunner, ApplicationContextAwar
     return context.getBean(clazz);
   }
 
+  public static <T> T getBean(String name, Class<T> clazz) {
+    return context.getBean(name, clazz);
+  }
+
   @Override
   public void run(ApplicationArguments args) {
   }

service-ai/service-ai-web/src/main/java/com/lanyuanxiaoyao/service/ai/web/controller/chat/ChatController.java

@@ -6,10 +6,13 @@ import com.lanyuanxiaoyao.service.ai.web.entity.vo.MessageVO;
 import com.lanyuanxiaoyao.service.ai.web.tools.ChartTool;
 import com.lanyuanxiaoyao.service.ai.web.tools.TableTool;
 import com.lanyuanxiaoyao.service.ai.web.tools.YarnTool;
+import com.lanyuanxiaoyao.service.configuration.ExecutorProvider;
+import jakarta.servlet.http.HttpServletResponse;
 import java.io.IOException;
 import java.time.LocalDateTime;
 import java.time.format.DateTimeFormatter;
 import java.util.Optional;
+import java.util.concurrent.TimeoutException;
 import org.eclipse.collections.api.list.ImmutableList;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
@@ -98,24 +101,34 @@ public class ChatController {
 
   @PostMapping("async")
   public SseEmitter chatAsync(
-      @RequestBody ImmutableList<MessageVO> messages
+      @RequestBody ImmutableList<MessageVO> messages,
+      HttpServletResponse httpResponse
   ) {
-    SseEmitter emitter = new SseEmitter();
-    buildRequest(messages)
-        .stream()
-        .chatResponse()
-        .subscribe(
-            response -> {
-              try {
-                emitter.send(toMessage(response));
-              } catch (IOException e) {
-                emitter.completeWithError(e);
-                throw new RuntimeException(e);
-              }
-            },
-            emitter::completeWithError,
-            emitter::complete
-        );
+    httpResponse.setHeader("X-Accel-Buffering", "no");
+
+    SseEmitter emitter = new SseEmitter(20 * 60 * 1000L);
+    ExecutorProvider.EXECUTORS.submit(() -> {
+      buildRequest(messages)
+          .stream()
+          .chatResponse()
+          .subscribe(
+              response -> {
+                try {
+                  emitter.send(
+                      SseEmitter.event()
+                          .data(toMessage(response))
+                          .reconnectTime(5 * 1000L)
+                          .build()
+                  );
+                } catch (IOException e) {
+                  emitter.completeWithError(e);
+                }
+              },
+              emitter::completeWithError,
+              emitter::complete
+          );
+    });
+    emitter.onTimeout(() -> emitter.completeWithError(new TimeoutException("SseEmitter Timeout")));
     return emitter;
   }
 

service-ai/service-ai-web/src/main/java/com/lanyuanxiaoyao/service/ai/web/service/node/EmbeddingNodes.java

@@ -150,9 +150,11 @@ public class EmbeddingNodes {
   @LiteflowMethod(value = LiteFlowMethodEnum.PROCESS, nodeId = "qa_split", nodeName = "使用Q/A格式分段", nodeType = NodeTypeEnum.COMMON)
   public void qaSplit(NodeComponent node) {
     EmbeddingContext context = node.getContextBean(EmbeddingContext.class);
+    // language=TEXT
     context.getDocuments().addAll(llmSplit(
         """
             对用户输入的文本，生成多组高质量的问答对。请遵循以下指南：
+            
             1. 问题部分：
               为同一个主题创建尽可能多的不同表述的问题，确保问题的多样性。
               每个问题应考虑用户可能的多种问法，例如：
@@ -167,7 +169,7 @@ public class EmbeddingNodes {
               答案应直接基于给定文本，确保准确性和一致性。
               包含相关的细节，如日期、名称、职位等具体信息，必要时提供背景信息以增强理解。
             3. 格式：
-              使用"问："标记问题集合的开始，所有问题应在一个段落内，问题之间用空格分隔。
+              使用"问："标记问题的开始，问题文本应在一个段落内完成。
               使用"答："标记答案的开始，答案应清晰分段，便于阅读。
               问答对之间用“---”分隔，以提高可读性。
             4. 内容要求：
@@ -175,6 +177,8 @@ public class EmbeddingNodes {
               避免添加文本中未提及的信息，确保信息的真实性。
               一个问题搭配一个答案，避免一组问答对中同时涉及多个问题。
               如果文本信息不足以回答某个方面，可以在答案中说明 "根据给定信息无法确定"，并尽量提供相关的上下文。
+              除了问答对本身，避免输出任何与问答对无关的提示性、引导性、解释性的文本。
+            
             格式样例：
             问：苹果通常是什么颜色的？
             答：红色。

service-ai/service-ai-web/src/main/java/com/lanyuanxiaoyao/service/ai/web/tools/ChartTool.java

@@ -44,7 +44,7 @@ public class ChartTool {
           """) String request
   ) {
     log.info("Enter method: mermaid[request]. request:{}", request);
-    ChatClient.Builder builder = WebApplication.getBean(ChatClient.Builder.class);
+    ChatClient.Builder builder = WebApplication.getBean("chat", ChatClient.Builder.class);
     ChatClient client = builder.build();
     return client.prompt()
         // language=TEXT

service-web/client/index.html

@@ -1,3 +1,4 @@
+<!--suppress CssUnknownTarget, HtmlUnknownTarget -->
 <!doctype html>
 <html lang="zh">
 <head>
@@ -13,6 +14,15 @@
             margin: 0;
             padding: 0;
         }
+
+        @font-face {
+            font-family: 'LXGWWenKai';
+            src: url('fonts/LXGWNeoXiHei.ttf') format('truetype');
+        }
+
+        *:not(.fa,.fas) {
+            font-family: LXGWWenKai, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', serif !important;
+        }
     </style>
 </head>
 <body>

service-web/client/package.json

@@ -10,17 +10,18 @@
   },
   "dependencies": {
     "@ant-design/icons": "^6.0.0",
-    "@ant-design/pro-components": "^2.8.7",
+    "@ant-design/pro-components": "^2.8.9",
     "@ant-design/x": "^1.4.0",
     "@echofly/fetch-event-source": "^3.0.2",
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@lightenna/react-mermaid-diagram": "^1.0.20",
-    "@tinyflow-ai/react": "^0.1.10",
+    "@tinyflow-ai/react": "^0.2.1",
+    "@xyflow/react": "^12.7.0",
     "ahooks": "^3.8.5",
     "amis": "^6.12.0",
-    "antd": "^5.25.3",
-    "axios": "^1.9.0",
-    "chart.js": "^4.4.9",
+    "antd": "^5.26.1",
+    "axios": "^1.10.0",
+    "chart.js": "^4.5.0",
     "echarts-for-react": "^3.0.2",
     "licia": "^1.48.0",
     "markdown-it": "^14.1.0",
@@ -29,18 +30,18 @@
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^18.3.1",
     "react-markdown": "^10.1.0",
-    "react-router": "^7.6.1",
-    "styled-components": "^6.1.18"
+    "react-router": "^7.6.2",
+    "styled-components": "^6.1.18",
+    "zustand": "^5.0.5"
   },
   "devDependencies": {
     "@types/markdown-it": "^14.1.2",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
-    "@vitejs/plugin-react-swc": "^3.10.0",
+    "@vitejs/plugin-react-swc": "^3.10.2",
     "globals": "^16.2.0",
-    "sass": "^1.89.0",
+    "sass": "^1.89.2",
     "typescript": "~5.8.3",
-    "typescript-eslint": "^8.33.0",
     "vite": "^6.3.5",
     "vite-plugin-javascript-obfuscator": "^3.1.0"
   }

service-web/client/src/index.scss

@@ -0,0 +1,4 @@
+// 改写一些amis中控制不到的全局CSS
+button.btn-deleted:hover {
+  color: #dc2626 !important;
+}

service-web/client/src/index.tsx

@@ -1,6 +1,6 @@
 import {createRoot} from 'react-dom/client'
 import {createHashRouter, RouterProvider} from 'react-router'
-
+import './index.scss'
 import './components/Registry.ts'
 
 import {routes} from './route.tsx'

service-web/client/src/pages/App.tsx

@@ -2,6 +2,7 @@ import {ProLayout} from '@ant-design/pro-components'
 import React from 'react'
 import {Outlet, useLocation, useNavigate} from 'react-router'
 import {menus} from '../route.tsx'
+import {ConfigProvider} from 'antd'
 
 const App: React.FC = () => {
   const navigate = useNavigate()
@@ -34,7 +35,18 @@ const App: React.FC = () => {
       style={{minHeight: '100vh'}}
       contentStyle={{backgroundColor: 'white', padding: '10px 10px 10px 20px'}}
     >
-      <Outlet/>
+      <ConfigProvider
+      theme={{
+        components: {
+          Card: {
+            bodyPadding: 0,
+            bodyPaddingSM: 0,
+          }
+        }
+      }}
+      >
+        <Outlet/>
+      </ConfigProvider>
     </ProLayout>
   )
 }

service-web/client/src/pages/Test.tsx

@@ -1,128 +1,486 @@
-import MarkdownRender from '../util/Markdown.tsx'
-import {useState} from 'react'
+import {DeleteFilled, EditFilled, PlusCircleFilled, SaveFilled} from '@ant-design/icons'
+import {
+  addEdge,
+  applyEdgeChanges,
+  applyNodeChanges,
+  Background,
+  BackgroundVariant,
+  Controls,
+  type Edge,
+  Handle,
+  MiniMap,
+  type Node,
+  type NodeProps,
+  type OnConnect,
+  type OnEdgesChange,
+  type OnNodesChange,
+  Position,
+  ReactFlow,
+} from '@xyflow/react'
+import {useMount} from 'ahooks'
+import type {Schema} from 'amis'
+import {Button, Card, Drawer, Dropdown, message, Space} from 'antd'
+import {arrToMap, filter, find, findIdx, isEqual, isNil, randomId} from 'licia'
+import {type JSX, useState} from 'react'
+import styled from 'styled-components'
+import '@xyflow/react/dist/style.css'
+import {create} from 'zustand/react'
+import {amisRender, commonInfo} from '../util/amis.tsx'
 
-// language=Markdown
-const markdownText = `### Hello
+const FlowableDiv = styled.div`
+    height: 93vh;
 
-world
-tony
-jenny
+    .toolbar {
+        z-index: 999;
+        position: absolute;
+    }
 
-\`\`\`javascript
-console.log('hello')
-\`\`\`
+    .node-card {
+        cursor: grab;
 
-\`\`\`mermaid
-graph TD
-a-->b;
-\`\`\`
-
-\`\`\`mermaid
-graph TD
-c-->d;
-\`\`\`
-
-\`\`\`chartjs
-{
-    type: 'bar',
-    data: {
-        labels: ['苹果', '香蕉', '橙子', '葡萄', '菠萝'],
-        datasets: [{
-            label: '水果销量',
-            data: [43, 32, 56, 29, 38],
-        }]
-    },
-    options: {
-        plugins: {
-            legend: {
-                position: 'top',
-            },
-            title: {
-                display: true,
-                text: '水果店周销量数据'
-            }
+        .card-container {
+            cursor: default;
         }
     }
-}
-\`\`\`
+`
 
-\`\`\`chartjs
-{
-    type: 'bar',
-    data: {
-        labels: ['苹果', '香蕉', '橙子', '葡萄', '菠萝'],
-        datasets: [{
-            label: '水果销量',
-            data: [43, 32, 56, 29, 38],
-        }]
-    },
-    options: {
-        plugins: {
-            legend: {
-                position: 'top',
+type AmisNodeType = 'normal' | 'start' | 'end'
+
+const AmisNode = (
+  props: NodeProps,
+  type: AmisNodeType,
+  name: String,
+  description?: String,
+  columnSchema?: Schema[],
+) => {
+  const {id, data} = props
+  const {getDataById, removeNode, editNode} = data
+  return (
+    <div className="p-1 w-64">
+      <Card
+        className="node-card"
+        title={name}
+        size="small"
+        hoverable
+      >
+        <Dropdown
+          className="card-container"
+          trigger={['contextMenu']}
+          menu={{
+            items: [
+              {
+                key: 'edit',
+                label: '编辑',
+                icon: <EditFilled className="text-gray-600 hover:text-blue-500"/>,
+              },
+              {
+                key: 'remove',
+                label: '删除',
+                icon: <DeleteFilled className="text-red-500 hover:text-red-500"/>,
+              },
+            ],
+            onClick: menu => {
+              switch (menu.key) {
+                case 'edit':
+                  // @ts-ignore
+                  editNode(id, name, description, columnSchema)
+                  break
+                case 'remove':
+                  // @ts-ignore
+                  removeNode(id)
+                  break
+              }
             },
-            title: {
-                display: true,
-                text: '水果店周销量数据'
-            }
-        }
-    }
+          }}
+        >
+          <div className="card-description p-2 text-secondary text-sm">
+            {description}
+          </div>
+        </Dropdown>
+      </Card>
+      {isEqual(type, 'start') || isEqual(type, 'normal')
+        ? <Handle type="source" position={Position.Right}/> : undefined}
+      {isEqual(type, 'end') || isEqual(type, 'normal')
+        ? <Handle type="target" position={Position.Left}/> : undefined}
+    </div>
+  )
 }
-\`\`\`
 
-\`\`\`echart
-{
-    grid: { top: 8, right: 8, bottom: 24, left: 36 },
-    xAxis: {
-      type: 'category',
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    },
-    yAxis: {
-      type: 'value',
-    },
-    series: [
-      {
-        data: [820, 932, 901, 934, 1290, 1330, 1320],
-        type: 'line',
-        smooth: true,
+const StartAmisNode = (props: NodeProps) => AmisNode(
+  props,
+  'start',
+  '开始节点',
+  '定义输入变量',
+  [
+    {
+      type: 'input-kvs',
+      name: 'fields',
+      addButtonText: '新增入参',
+      draggable: false,
+      keyItem: {
+        label: '参数名称',
       },
-    ],
-    tooltip: {
-      trigger: 'axis',
+      valueItems: [
+        {
+          type: 'input-text',
+          name: 'description',
+          label: '参数描述',
+        },
+        {
+          type: 'select',
+          name: 'type',
+          label: '参数类型',
+          required: true,
+          selectFirst: true,
+          options: [
+            {
+              label: '文本',
+              value: 'text',
+            },
+            {
+              label: '数字',
+              value: 'number',
+            },
+            {
+              label: '文件',
+              value: 'files',
+            },
+          ],
+        },
+      ],
     },
-}
-\`\`\`
+  ],
+)
+const EndAmisNode = (props: NodeProps) => AmisNode(
+  props,
+  'end',
+  '结束节点',
+  '定义输出变量',
+  [
+    {
+      type: 'input-kvs',
+      name: 'fields',
+      addButtonText: '新增输出',
+      draggable: false,
+      keyItem: {
+        label: '参数名称',
+      },
+      valueItems: [
+        {
+          type: 'select',
+          name: 'type',
+          label: '参数',
+          required: true,
+          selectFirst: true,
+          options: [],
+        },
+      ],
+    },
+  ],
+)
+const LlmAmisNode = (props: NodeProps) => AmisNode(
+  props,
+  'normal',
+  '大模型节点',
+  '使用大模型对话',
+  [
+    {
+      type: 'select',
+      name: 'model',
+      label: '大模型',
+      required: true,
+      selectFirst: true,
+      options: [
+        {
+          label: 'Qwen3',
+          value: 'qwen3',
+        },
+        {
+          label: 'Deepseek',
+          value: 'deepseek',
+        },
+      ],
+    },
+    {
+      type: 'textarea',
+      name: 'systemPrompt',
+      label: '系统提示词',
+      required: true,
+    },
+  ],
+)
 
-\`\`\`echart
-{
-    grid: { top: 8, right: 8, bottom: 24, left: 36 },
-    xAxis: {
-      type: 'category',
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    },
-    yAxis: {
-      type: 'value',
-    },
-    series: [
-      {
-        data: [820, 932, 901, 934, 1290, 1330, 1320],
-        type: 'line',
-        smooth: true,
-      },
-    ],
-    tooltip: {
-      trigger: 'axis',
-    },
-}
-\`\`\``
+const initialNodes: Node[] = [
+  {
+    id: 'BMFP3Eov94',
+    type: 'start-amis-node',
+    position: {x: 10, y: 100},
+    data: {},
+  },
+  {
+    id: 'PYK8LjduQ1',
+    type: 'end-amis-node',
+    position: {x: 500, y: 100},
+    data: {},
+  },
+]
+const initialEdges: Edge[] = []
+
+const useStore = create<{
+  data: Record<string, any>,
+  getData: () => Record<string, any>,
+  setData: (data: Record<string, any>) => void,
+  getDataById: (id: string) => any,
+  setDataById: (id: string, data: any) => void,
+}>((set, get) => ({
+  data: {},
+  getData: () => get().data,
+  setData: (data) => set(data),
+  getDataById: id => get().data[id],
+  setDataById: (id, data) => {
+    let updateData = get().data
+    updateData[id] = data
+    set({
+      data: updateData,
+    })
+  },
+}))
+
+const useFlowStore = create<{
+  nodes: Node[],
+  onNodesChange: OnNodesChange,
+  addNode: (node: Node) => void,
+  removeNode: (id: string) => void,
+  setNodes: (nodes: Node[]) => void,
+
+  edges: Edge[],
+  onEdgesChange: OnEdgesChange,
+  setEdges: (edges: Edge[]) => void,
+
+  onConnect: OnConnect,
+}>((set, get) => ({
+  nodes: [],
+  onNodesChange: changes => {
+    set({
+      nodes: applyNodeChanges(changes, get().nodes),
+    })
+  },
+  addNode: node => set({nodes: get().nodes.concat(node)}),
+  removeNode: id => {
+    set({
+      nodes: filter(get().nodes, node => !isEqual(node.id, id)),
+    })
+  },
+  setNodes: nodes => set({nodes}),
+
+  edges: [],
+  onEdgesChange: changes => {
+    set({
+      edges: applyEdgeChanges(changes, get().edges),
+    })
+  },
+  setEdges: edges => set({edges}),
+
+  onConnect: connection => {
+    set({
+      edges: addEdge(connection, get().edges),
+    })
+  },
+}))
 
 function Test() {
-  const [value, setValue] = useState<string>(markdownText)
+  const [messageApi, contextHolder] = message.useMessage()
+  const [nodeDef] = useState<{
+    key: string,
+    name: string,
+    component: (props: NodeProps) => JSX.Element
+  }[]>([
+    {
+      key: 'start-amis-node',
+      name: '开始',
+      component: StartAmisNode,
+    },
+    {
+      key: 'end-amis-node',
+      name: '结束',
+      component: EndAmisNode,
+    },
+    {
+      key: 'llm-amis-node',
+      name: '大模型',
+      component: LlmAmisNode,
+    },
+  ])
+  const [open, setOpen] = useState(false)
+
+  const {getData, getDataById, setDataById} = useStore()
+  const {
+    nodes,
+    addNode,
+    removeNode,
+    setNodes,
+    onNodesChange,
+    edges,
+    setEdges,
+    onEdgesChange,
+    onConnect,
+  } = useFlowStore()
+
+  const [currentNodeForm, setCurrentNodeForm] = useState<JSX.Element>()
+  const editNode = (id: string, name: string, description: string, columnSchema?: Schema[]) => {
+    if (!isNil(columnSchema)) {
+      setCurrentNodeForm(
+        amisRender(
+          {
+            type: 'wrapper',
+            size: 'none',
+            body: [
+              {
+                type: 'tpl',
+                className: 'text-secondary',
+                tpl: description,
+              },
+              {
+                debug: commonInfo.debug,
+                title: name,
+                type: 'form',
+                wrapWithPanel: false,
+                onEvent: {
+                  submitSucc: {
+                    actions: [
+                      {
+                        actionType: 'custom',
+                        // @ts-ignore
+                        script: (context, action, event) => {
+                          setDataById(id, context.props.data)
+                          setOpen(false)
+                        },
+                      },
+                    ],
+                  },
+                },
+                body: [
+                  ...(columnSchema ?? []),
+                  {
+                    type: 'wrapper',
+                    size: 'none',
+                    className: 'space-x-1 float-right',
+                    body: [
+                      {
+                        type: 'action',
+                        label: '取消',
+                        onEvent: {
+                          click: {
+                            actions: [
+                              {
+                                actionType: 'custom',
+                                // @ts-ignore
+                                script: (context, action, event) => {
+                                  setOpen(false)
+                                },
+                              },
+                            ],
+                          },
+                        },
+                      },
+                      {
+                        type: 'submit',
+                        label: '保存',
+                        level: 'primary',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ]
+          },
+          getDataById(id),
+        ),
+      )
+      setOpen(true)
+    }
+  }
+
+  useMount(() => {
+    for (let node of initialNodes) {
+      node.data = {
+        getDataById,
+        setDataById,
+        removeNode,
+        editNode,
+      }
+    }
+    setNodes(initialNodes)
+    setEdges(initialEdges)
+  })
+
   return (
-    <>
-      <button onClick={() => setValue('hahaha\n' + markdownText)}>Button</button>
-      <MarkdownRender content={value}/>
-    </>
+    <FlowableDiv>
+      {contextHolder}
+      <Space className="toolbar">
+        <Button type="primary" onClick={() => console.log(JSON.stringify(getData()))}>
+          <SaveFilled/>
+          保存
+        </Button>
+        <Dropdown
+          menu={{
+            items: nodeDef.map(def => ({key: def.key, label: def.name})),
+            onClick: ({key}) => {
+              if (isEqual(key, 'start-amis-node') && findIdx(nodes, (node: Node) => isEqual(key, node.type)) > -1) {
+                messageApi.error('只能存在1个开始节点')
+                return
+              }
+              if (isEqual(key, 'end-amis-node') && findIdx(nodes, (node: Node) => isEqual(key, node.type)) > -1) {
+                messageApi.error('只能存在1个结束节点')
+                return
+              }
+
+              addNode({
+                id: randomId(10),
+                type: key,
+                position: {x: 100, y: 100},
+                data: {
+                  getDataById,
+                  setDataById,
+                  removeNode,
+                  editNode,
+                },
+              })
+            },
+          }}
+        >
+          <Button type="dashed">
+            <PlusCircleFilled/>
+            新增节点
+          </Button>
+        </Dropdown>
+      </Space>
+      <Drawer
+        title="节点编辑"
+        open={open}
+        closeIcon={false}
+        maskClosable={false}
+        destroyOnHidden
+      >
+        {currentNodeForm}
+      </Drawer>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        // @ts-ignore
+        nodeTypes={arrToMap(
+          nodeDef.map(def => def.key),
+          key => find(nodeDef, def => isEqual(key, def.key))!.component)
+        }
+      >
+        <Controls/>
+        <MiniMap/>
+        <Background variant={BackgroundVariant.Cross} gap={20} size={3}/>
+      </ReactFlow>
+    </FlowableDiv>
   )
 }
 

service-web/client/src/pages/ai/Conversation.tsx

@@ -1,6 +1,7 @@
 import {ClearOutlined, UserOutlined} from '@ant-design/icons'
 import {Bubble, Sender, useXAgent, useXChat, Welcome} from '@ant-design/x'
 import {fetchEventSource} from '@echofly/fetch-event-source'
+import {useUnmount} from 'ahooks'
 import {Button, Collapse, Flex, Typography} from 'antd'
 import {isStrBlank, trim} from 'licia'
 import {useRef, useState} from 'react'
@@ -40,6 +41,11 @@ function Conversation() {
   const abortController = useRef<AbortController | null>(null)
   const [input, setInput] = useState<string>('')
 
+  useUnmount(() => {
+    console.log('Page Unmount')
+    abortController.current?.abort()
+  })
+
   const [agent] = useXAgent<ChatMessage>({
     request: async (info, callbacks) => {
       await fetchEventSource(`${commonInfo.baseAiUrl}/chat/async`, {
@@ -55,6 +61,7 @@ function Conversation() {
           })
         },
         onclose: () => callbacks.onSuccess([]),
+        onerror: error => callbacks.onError(error),
       })
     },
   })

service-web/client/src/pages/ai/feedback/Feedback.tsx

@@ -217,7 +217,7 @@ const Feedback: React.FC = () => {
                       disabledOn: '${status === \'ANALYSIS_PROCESSING\'}',
                       type: 'action',
                       label: '删除',
-                      className: 'text-danger hover:text-red-600',
+                      className: 'text-danger btn-deleted',
                       level: 'link',
                       size: 'sm',
                       actionType: 'ajax',

service-web/client/src/pages/ai/knowledge/DataDetail.tsx

@@ -142,7 +142,7 @@ const DataDetail: React.FC = () => {
                     {
                       type: 'action',
                       label: '删除',
-                      className: 'text-danger hover:text-red-600',
+                      className: 'text-danger btn-deleted',
                       level: 'link',
                       size: 'sm',
                       actionType: 'ajax',

service-web/client/src/pages/ai/knowledge/DataSegment.tsx

@@ -87,7 +87,7 @@ const DataDetail: React.FC = () => {
                     {
                       type: 'action',
                       label: '删除',
-                      className: 'text-danger hover:text-red-600',
+                      className: 'text-danger btn-deleted',
                       level: 'link',
                       size: 'sm',
                       actionType: 'ajax',

service-web/client/src/pages/ai/knowledge/Knowledge.tsx

@@ -188,7 +188,7 @@ const Knowledge: React.FC = () => {
                     {
                       type: 'action',
                       label: '删除',
-                      className: 'text-danger hover:text-red-600',
+                      className: 'text-danger btn-deleted',
                       level: 'link',
                       size: 'sm',
                       actionType: 'ajax',

service-web/client/src/pages/overview/Overview.tsx

@@ -169,7 +169,7 @@ const tableDetailDialog = (variable: string, targetList: any) => {
 
 const overviewYarnJob = (cluster: string, search: string, queue: string | undefined, yarnQueue: string) => {
   return {
-    className: 'text-base leading-none',
+    className: 'text-sm leading-none',
     type: 'table-view',
     border: false,
     padding: '0 10px 0 15px',

service-web/client/src/pages/overview/Table.tsx

@@ -91,7 +91,7 @@ function Table() {
                   columns: [
                     {
                       label: 'Flink job id',
-                      width: 195,
+                      width: 200,
                       fixed: 'left',
                       type: 'wrapper',
                       size: 'none',

service-web/client/src/pages/overview/Version.tsx

@@ -99,7 +99,7 @@ function Version() {
               columns: [
                 {
                   label: 'Flink job id',
-                  width: 195,
+                  width: 200,
                   fixed: 'left',
                   type: 'wrapper',
                   size: 'none',