From 71cb20eb4fb6ed8b8435b581aebdc62f90eb1d48 Mon Sep 17 00:00:00 2001
From: williamhliu <137068196+williamhliu@users.noreply.github.com>
Date: Mon, 2 Oct 2023 18:05:12 +0800
Subject: [PATCH] Integrate Chat and Copilot into chat-sdk, and add SQL parse
 display (#166)

---
 webapp/packages/chat-sdk/package.json         |   8 +-
 webapp/packages/chat-sdk/public/index.html    |   2 +-
 webapp/packages/chat-sdk/public/logo192.png   | Bin 5347 -> 0 bytes
 webapp/packages/chat-sdk/public/logo512.png   | Bin 9664 -> 0 bytes
 webapp/packages/chat-sdk/public/manifest.json |  12 +-
 .../chat-sdk/rollup/rollup.config.mjs         |   8 +-
 .../chat-sdk/rollup/rollup.esm.config.mjs     |   2 +
 .../src}/Chat/AgentList/index.tsx             |   4 +-
 .../src/Chat/AgentList/style.module.less}     |   0
 .../src}/Chat/ChatFooter/index.tsx            | 101 +++---
 .../src/Chat/ChatFooter/style.module.less}    |   4 +-
 .../src}/Chat/Conversation/index.tsx          | 122 +++-----
 .../src/Chat/Conversation/style.module.less}  |   7 +-
 .../src}/Chat/MessageContainer/index.tsx      |  40 +--
 .../Chat/MessageContainer/style.module.less}  |   0
 .../src}/Chat/MobileAgents/index.tsx          |   4 +-
 .../src/Chat/MobileAgents/style.module.less}  |   0
 .../src}/Chat/components/AgentTip/index.tsx   |   6 +-
 .../components/AgentTip/style.module.less}    |   0
 .../components/ConversationModal/index.tsx    |   2 +-
 .../Chat/components/CopilotAvatar/index.tsx   |   4 +-
 .../CopilotAvatar/style.module.less}          |   0
 .../src}/Chat/components/Message.tsx          |   6 +-
 .../components/RecommendQuestions/index.tsx   |   9 +-
 .../RecommendQuestions/style.module.less}     |  14 +-
 .../src}/Chat/components/Text.tsx             |   6 +-
 .../src/Chat/components/style.module.less}    |   0
 .../pages => chat-sdk/src}/Chat/constants.ts  |  10 +-
 .../src/pages => chat-sdk/src}/Chat/index.tsx | 294 +++++++++---------
 webapp/packages/chat-sdk/src/Chat/service.ts  |  51 +++
 .../src/Chat/style.module.less}               |   4 +-
 .../src/pages => chat-sdk/src}/Chat/type.ts   |  18 +-
 .../src}/Copilot/constants.ts                 |   0
 .../packages/chat-sdk/src/Copilot/index.tsx   | 148 +++++++++
 .../src/Copilot/style.module.less}            |  20 +-
 webapp/packages/chat-sdk/src/common/type.ts   |  29 +-
 .../src/components/ChatItem/ExecuteItem.tsx   |   9 +-
 .../src/components/ChatItem/FilterItem.tsx    |   8 +-
 .../src/components/ChatItem/ParseTip.tsx      | 155 +++++----
 .../ChatItem/SimilarQuestionItem.tsx          |  60 ++++
 .../src/components/ChatItem/SqlItem.tsx       | 116 +++++++
 .../src/components/ChatItem/index.tsx         | 101 ++++--
 .../src/components/ChatItem/style.less        | 102 +++++-
 .../src/components/ChatMsg/Message/index.tsx  |   2 +-
 .../src/components/ChatMsg/Text/index.tsx     |  28 +-
 .../src/components/ChatMsg/WebPage/index.tsx  |   9 +-
 .../chat-sdk/src/components/ChatMsg/index.tsx |  15 +-
 .../components/DrillDownDimensions/index.tsx  |   2 +-
 .../src/components/IconFont/index.tsx         |   2 +-
 .../src/components/RecommendOptions/index.tsx |   2 +-
 .../packages/chat-sdk/src/demo/ChatDemo.tsx   |  14 +
 .../chat-sdk/src/demo/CopilotDemo.tsx         |  50 +++
 .../chat-sdk/src/demo/style.module.less       |   6 +-
 webapp/packages/chat-sdk/src/index.tsx        |  14 +-
 .../chat-sdk/src/service/axiosInstance.ts     |  10 +-
 webapp/packages/chat-sdk/src/service/index.ts |  30 +-
 webapp/packages/chat-sdk/src/typings.d.ts     |  19 +-
 webapp/packages/chat-sdk/src/utils/utils.ts   |  71 ++++-
 webapp/packages/chat-sdk/tsconfig.build.json  |   2 +-
 .../supersonic-fe/config/envConfig.ts         |   2 +-
 .../packages/supersonic-fe/config/routes.ts   |   4 +-
 webapp/packages/supersonic-fe/src/app.tsx     |  38 +--
 .../src/pages/Chat/components/Typing.tsx      |  19 --
 .../supersonic-fe/src/pages/Chat/service.ts   |  78 -----
 .../src/pages/ChatPage/index.tsx              |  14 +
 .../supersonic-fe/src/pages/Copilot/index.tsx | 119 -------
 .../supersonic-fe/src/services/login.ts       |   8 -
 webapp/pnpm-lock.yaml                         | 191 +++++++++---
 68 files changed, 1353 insertions(+), 882 deletions(-)
 delete mode 100644 webapp/packages/chat-sdk/public/logo192.png
 delete mode 100644 webapp/packages/chat-sdk/public/logo512.png
 rename webapp/packages/{supersonic-fe/src/pages => chat-sdk/src}/Chat/AgentList/index.tsx (94%)
 rename webapp/packages/{supersonic-fe/src/pages/Chat/AgentList/style.less => chat-sdk/src/Chat/AgentList/style.module.less} (100%)
 rename webapp/packages/{supersonic-fe/src/pages => chat-sdk/src}/Chat/ChatFooter/index.tsx (82%)
 rename webapp/packages/{supersonic-fe/src/pages/Chat/ChatFooter/style.less => chat-sdk/src/Chat/ChatFooter/style.module.less} (98%)
 rename webapp/packages/{supersonic-fe/src/pages => chat-sdk/src}/Chat/Conversation/index.tsx (72%)
 rename webapp/packages/{supersonic-fe/src/pages/Chat/Conversation/style.less => chat-sdk/src/Chat/Conversation/style.module.less} (98%)
 rename webapp/packages/{supersonic-fe/src/pages => chat-sdk/src}/Chat/MessageContainer/index.tsx (85%)
 rename webapp/packages/{supersonic-fe/src/pages/Chat/MessageContainer/style.less => chat-sdk/src/Chat/MessageContainer/style.module.less} (100%)
 rename webapp/packages/{supersonic-fe/src/pages => chat-sdk/src}/Chat/MobileAgents/index.tsx (94%)
 rename webapp/packages/{supersonic-fe/src/pages/Chat/MobileAgents/style.less => chat-sdk/src/Chat/MobileAgents/style.module.less} (100%)
 rename webapp/packages/{supersonic-fe/src/pages => chat-sdk/src}/Chat/components/AgentTip/index.tsx (89%)
 rename webapp/packages/{supersonic-fe/src/pages/Chat/components/AgentTip/style.less => chat-sdk/src/Chat/components/AgentTip/style.module.less} (100%)
 rename webapp/packages/{supersonic-fe/src/pages => chat-sdk/src}/Chat/components/ConversationModal/index.tsx (98%)
 rename webapp/packages/{supersonic-fe/src/pages => chat-sdk/src}/Chat/components/CopilotAvatar/index.tsx (60%)
 rename webapp/packages/{supersonic-fe/src/pages/Chat/components/CopilotAvatar/style.less => chat-sdk/src/Chat/components/CopilotAvatar/style.module.less} (100%)
 rename webapp/packages/{supersonic-fe/src/pages => chat-sdk/src}/Chat/components/Message.tsx (87%)
 rename webapp/packages/{supersonic-fe/src/pages => chat-sdk/src}/Chat/components/RecommendQuestions/index.tsx (92%)
 rename webapp/packages/{supersonic-fe/src/pages/Chat/components/RecommendQuestions/style.less => chat-sdk/src/Chat/components/RecommendQuestions/style.module.less} (95%)
 rename webapp/packages/{supersonic-fe/src/pages => chat-sdk/src}/Chat/components/Text.tsx (79%)
 rename webapp/packages/{supersonic-fe/src/pages/Chat/components/style.less => chat-sdk/src/Chat/components/style.module.less} (100%)
 rename webapp/packages/{supersonic-fe/src/pages => chat-sdk/src}/Chat/constants.ts (77%)
 rename webapp/packages/{supersonic-fe/src/pages => chat-sdk/src}/Chat/index.tsx (62%)
 create mode 100644 webapp/packages/chat-sdk/src/Chat/service.ts
 rename webapp/packages/{supersonic-fe/src/pages/Chat/style.less => chat-sdk/src/Chat/style.module.less} (96%)
 rename webapp/packages/{supersonic-fe/src/pages => chat-sdk/src}/Chat/type.ts (84%)
 rename webapp/packages/{supersonic-fe/src/pages => chat-sdk/src}/Copilot/constants.ts (100%)
 create mode 100644 webapp/packages/chat-sdk/src/Copilot/index.tsx
 rename webapp/packages/{supersonic-fe/src/pages/Copilot/style.less => chat-sdk/src/Copilot/style.module.less} (98%)
 create mode 100644 webapp/packages/chat-sdk/src/components/ChatItem/SimilarQuestionItem.tsx
 create mode 100644 webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx
 create mode 100644 webapp/packages/chat-sdk/src/demo/ChatDemo.tsx
 create mode 100644 webapp/packages/chat-sdk/src/demo/CopilotDemo.tsx
 delete mode 100644 webapp/packages/supersonic-fe/src/pages/Chat/components/Typing.tsx
 delete mode 100644 webapp/packages/supersonic-fe/src/pages/Chat/service.ts
 create mode 100644 webapp/packages/supersonic-fe/src/pages/ChatPage/index.tsx
 delete mode 100644 webapp/packages/supersonic-fe/src/pages/Copilot/index.tsx

diff --git a/webapp/packages/chat-sdk/package.json b/webapp/packages/chat-sdk/package.json
index 1504b02d2..e1bd15bff 100644
--- a/webapp/packages/chat-sdk/package.json
+++ b/webapp/packages/chat-sdk/package.json
@@ -8,13 +8,17 @@
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
     "@uiw/react-watermark": "^0.0.5",
+    "ahooks": "^3.7.8",
     "antd": "^5.5.2",
-    "axios": "^1.4.0",
+    "axios": "^0.21.1",
     "classnames": "^2.3.2",
     "echarts": "^5.4.2",
     "lodash": "^4.17.11",
     "moment": "^2.29.4",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-spinners": "^0.13.8",
+    "react-syntax-highlighter": "^15.5.0",
+    "sql-formatter": "^2.3.3",
     "tslib": "^2.5.2"
   },
   "peerDependencies": {
@@ -72,6 +76,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
+    "@types/lodash": "^4.14.198",
     "@types/node": "^16.18.31",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
@@ -122,6 +127,7 @@
     "rollup-plugin-exclude-dependencies-from-bundle": "^1.1.23",
     "rollup-plugin-less": "^1.1.3",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-styles": "^4.0.0",
     "rollup-plugin-typescript2": "^0.34.1",
     "sass-loader": "^12.3.0",
     "semver": "^7.3.5",
diff --git a/webapp/packages/chat-sdk/public/index.html b/webapp/packages/chat-sdk/public/index.html
index c582212e6..5c07d0e4b 100644
--- a/webapp/packages/chat-sdk/public/index.html
+++ b/webapp/packages/chat-sdk/public/index.html
@@ -28,7 +28,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root" style="height: 100vh;"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/webapp/packages/chat-sdk/public/logo192.png b/webapp/packages/chat-sdk/public/logo192.png
deleted file mode 100644
index fc44b0a3796c0e0a64c3d858ca038bd4570465d9..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5347
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
X@eDJUQo;Ye2mwlRs<JiGX2Jghdw)}T

diff --git a/webapp/packages/chat-sdk/public/logo512.png b/webapp/packages/chat-sdk/public/logo512.png
deleted file mode 100644
index a4e47a6545bc15971f8f63fba70e4013df88a664..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 9664
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
b{|{}U^kRn2wo}j7|0ATu<;8xA7zX}7|B6mN

diff --git a/webapp/packages/chat-sdk/public/manifest.json b/webapp/packages/chat-sdk/public/manifest.json
index 080d6c77a..c4e4f94bc 100644
--- a/webapp/packages/chat-sdk/public/manifest.json
+++ b/webapp/packages/chat-sdk/public/manifest.json
@@ -6,20 +6,10 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",
   "background_color": "#ffffff"
-}
+}
\ No newline at end of file
diff --git a/webapp/packages/chat-sdk/rollup/rollup.config.mjs b/webapp/packages/chat-sdk/rollup/rollup.config.mjs
index 39a52c81f..f04ce1587 100644
--- a/webapp/packages/chat-sdk/rollup/rollup.config.mjs
+++ b/webapp/packages/chat-sdk/rollup/rollup.config.mjs
@@ -3,6 +3,7 @@ import { nodeResolve } from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import json from '@rollup/plugin-json'
 import less from 'rollup-plugin-less'
+import styles from "rollup-plugin-styles";
 import postcss from 'rollup-plugin-postcss'
 import cssnano from 'cssnano'
 
@@ -18,7 +19,12 @@ const config = {
     commonjs(),
     json(),
     typescript({ tsconfigOverride: overrides }),
-    less({ output: 'dist/index.css' }),
+    styles({
+      // mode: ["extract"],
+      // modules: true,
+      autoModules: id => id.includes(".module."),
+    }),
+    // less({ output: 'dist/index.css' }),
     // postcss({
     //   plugins: [  
     //     cssnano()  
diff --git a/webapp/packages/chat-sdk/rollup/rollup.esm.config.mjs b/webapp/packages/chat-sdk/rollup/rollup.esm.config.mjs
index 0beef788a..89dc051da 100644
--- a/webapp/packages/chat-sdk/rollup/rollup.esm.config.mjs
+++ b/webapp/packages/chat-sdk/rollup/rollup.esm.config.mjs
@@ -1,5 +1,6 @@
 import basicConfig from './rollup.config.mjs'
 import excludeDependenciesFromBundle from "rollup-plugin-exclude-dependencies-from-bundle"
+import terser from '@rollup/plugin-terser'
 
 const config = {
   ...basicConfig,
@@ -12,6 +13,7 @@ const config = {
   plugins: [
     ...basicConfig.plugins,
     excludeDependenciesFromBundle(),
+    terser()
   ]
 }
 
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/AgentList/index.tsx b/webapp/packages/chat-sdk/src/Chat/AgentList/index.tsx
similarity index 94%
rename from webapp/packages/supersonic-fe/src/pages/Chat/AgentList/index.tsx
rename to webapp/packages/chat-sdk/src/Chat/AgentList/index.tsx
index 8aca8a3f8..29c6da6ba 100644
--- a/webapp/packages/supersonic-fe/src/pages/Chat/AgentList/index.tsx
+++ b/webapp/packages/chat-sdk/src/Chat/AgentList/index.tsx
@@ -1,9 +1,9 @@
 import { PlusCircleOutlined } from '@ant-design/icons';
 import { AgentType } from '../type';
-import styles from './style.less';
+import styles from './style.module.less';
 import classNames from 'classnames';
 import { message } from 'antd';
-import IconFont from '@/components/IconFont';
+import IconFont from '../../components/IconFont';
 import { AGENT_ICONS } from '../constants';
 
 type Props = {
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/AgentList/style.less b/webapp/packages/chat-sdk/src/Chat/AgentList/style.module.less
similarity index 100%
rename from webapp/packages/supersonic-fe/src/pages/Chat/AgentList/style.less
rename to webapp/packages/chat-sdk/src/Chat/AgentList/style.module.less
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/index.tsx b/webapp/packages/chat-sdk/src/Chat/ChatFooter/index.tsx
similarity index 82%
rename from webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/index.tsx
rename to webapp/packages/chat-sdk/src/Chat/ChatFooter/index.tsx
index fba0188c2..51aa35f65 100644
--- a/webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/index.tsx
+++ b/webapp/packages/chat-sdk/src/Chat/ChatFooter/index.tsx
@@ -1,14 +1,14 @@
-import IconFont from '@/components/IconFont';
-import { getTextWidth, groupByColumn, isMobile } from '@/utils/utils';
+import IconFont from '../../components/IconFont';
+import { getTextWidth, groupByColumn, isMobile } from '../../utils/utils';
 import { AutoComplete, Select, Tag } from 'antd';
 import classNames from 'classnames';
 import { debounce } from 'lodash';
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import type { ForwardRefRenderFunction } from 'react';
-import { searchRecommend } from 'supersonic-chat-sdk';
-import { SemanticTypeEnum, SEMANTIC_TYPE_MAP } from '../constants';
-import styles from './style.less';
+import { SemanticTypeEnum, SEMANTIC_TYPE_MAP, HOLDER_TAG } from '../constants';
 import { AgentType, ModelType } from '../type';
+import { searchRecommend } from '../../service';
+import styles from './style.module.less';
 
 type Props = {
   inputMsg: string;
@@ -16,7 +16,7 @@ type Props = {
   currentAgent?: AgentType;
   agentList: AgentType[];
   onToggleHistoryVisible: () => void;
-  onOpenMobileAgents: () => void;
+  onOpenAgents: () => void;
   onInputMsgChange: (value: string) => void;
   onSendMsg: (msg: string, modelId?: number) => void;
   onAddConversation: (agent?: AgentType) => void;
@@ -42,13 +42,13 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
     currentAgent,
     agentList,
     onToggleHistoryVisible,
-    onOpenMobileAgents,
+    onOpenAgents,
     onInputMsgChange,
     onSendMsg,
     onAddConversation,
     onSelectAgent,
   },
-  ref,
+  ref
 ) => {
   const [modelOptions, setModelOptions] = useState<(ModelType | AgentType)[]>([]);
   const [stepOptions, setStepOptions] = useState<Record<string, any[]>>({});
@@ -99,7 +99,7 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
           .reduce((result, key) => {
             result[key] = data[key].slice(
               0,
-              Object.keys(data).length > 2 ? 2 : Object.keys(data).length > 1 ? 3 : 6,
+              Object.keys(data).length > 2 ? 2 : Object.keys(data).length > 1 ? 3 : 6
             );
             return result;
           }, {})
@@ -110,7 +110,7 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
     let msgValue = msg;
     let modelId: number | undefined;
     if (msg?.[0] === '/') {
-      const agent = agentList.find((item) => msg.includes(`/${item.name}`));
+      const agent = agentList.find(item => msg.includes(`/${item.name}`));
       msgValue = agent ? msg.replace(`/${agent.name}`, '') : msg;
     }
     return { msgValue, modelId };
@@ -131,8 +131,7 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
       if (fetchId !== fetchRef.current) {
         return;
       }
-
-      const recommends = msgValue ? res.data.data || [] : [];
+      const recommends = msgValue ? res.data || [] : [];
       const stepOptionList = recommends.map((item: any) => item.subRecommend);
 
       if (stepOptionList.length > 0 && stepOptionList.every((item: any) => item !== null)) {
@@ -153,13 +152,11 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
       setModelOptions(agentList);
       setStepOptions({});
       return;
-    } else {
-      setOpen(false);
-      if (modelOptions.length > 0) {
-        setTimeout(() => {
-          setModelOptions([]);
-        }, 50);
-      }
+    }
+    if (modelOptions.length > 0) {
+      setTimeout(() => {
+        setModelOptions([]);
+      }, 50);
     }
     if (!isSelect) {
       debounceGetWords(inputMsg, chatId, currentAgent);
@@ -180,7 +177,7 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
 
   useEffect(() => {
     const autoCompleteDropdown = document.querySelector(
-      `.${styles.autoCompleteDropdown}`,
+      `.${styles.autoCompleteDropdown}`
     ) as HTMLElement;
     if (!autoCompleteDropdown) {
       return;
@@ -201,10 +198,10 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
         result = result.concat(stepOptions[item]);
         return result;
       }, [])
-      .find((item) =>
+      .find(item =>
         Object.keys(stepOptions).length === 1
           ? item.recommend === value
-          : `${item.modelName || ''}${item.recommend}` === value,
+          : `${item.modelName || ''}${item.recommend}` === value
       );
     if (option && isSelect) {
       onSendMsg(option.recommend, Object.keys(stepOptions).length > 1 ? option.modelId : undefined);
@@ -220,16 +217,16 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
 
   const onSelect = (value: string) => {
     isSelect = true;
-    if (modelOptions.length === 0) {
-      sendMsg(value);
-    } else {
-      const agent = agentList.find((item) => value.includes(item.name));
+    if (modelOptions.length > 0) {
+      const agent = agentList.find(item => value.includes(item.name));
       if (agent) {
         if (agent.id !== currentAgent?.id) {
           onSelectAgent(agent);
         }
         onInputMsgChange('');
       }
+    } else {
+      onInputMsgChange(value.replace(HOLDER_TAG, ''));
     }
     setOpen(false);
     setTimeout(() => {
@@ -241,7 +238,7 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
     [styles.mobile]: isMobile,
   });
 
-  const modelOptionNodes = modelOptions.map((model) => {
+  const modelOptionNodes = modelOptions.map(model => {
     return (
       <Option key={model.id} value={`/${model.name} `} className={styles.searchOption}>
         {model.name}
@@ -249,22 +246,22 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
     );
   });
 
-  const associateOptionNodes = Object.keys(stepOptions).map((key) => {
+  const associateOptionNodes = Object.keys(stepOptions).map(key => {
     return (
       <OptGroup key={key} label={key}>
-        {stepOptions[key].map((option) => {
+        {stepOptions[key].map(option => {
           let optionValue =
             Object.keys(stepOptions).length === 1
               ? option.recommend
               : `${option.modelName || ''}${option.recommend}`;
           if (inputMsg[0] === '/') {
-            const agent = agentList.find((item) => inputMsg.includes(item.name));
+            const agent = agentList.find(item => inputMsg.includes(item.name));
             optionValue = agent ? `/${agent.name} ${option.recommend}` : optionValue;
           }
           return (
             <Option
               key={`${option.recommend}${option.modelName ? `_${option.modelName}` : ''}`}
-              value={optionValue}
+              value={`${optionValue}${HOLDER_TAG}`}
               className={styles.searchOption}
             >
               <div className={styles.optionContent}>
@@ -312,12 +309,10 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
             <div>历史对话</div>
           </div>
         )}
-        {isMobile && (
-          <div className={styles.toolItem} onClick={onOpenMobileAgents}>
-            <IconFont type="icon-zhinengzhuli" className={styles.toolIcon} />
-            <div>智能助理</div>
-          </div>
-        )}
+        <div className={styles.toolItem} onClick={onOpenAgents}>
+          <IconFont type="icon-zhinengzhuli" className={styles.toolIcon} />
+          <div>智能助理</div>
+        </div>
       </div>
       <div className={styles.composer}>
         <div className={styles.composerInputWrapper}>
@@ -332,25 +327,24 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
             }}
             onSelect={onSelect}
             autoFocus={!isMobile}
-            backfill
             ref={inputRef}
             id="chatInput"
-            onKeyDown={(e) => {
+            onKeyDown={e => {
               if (e.code === 'Enter' || e.code === 'NumpadEnter') {
-                {
-                  const chatInputEl: any = document.getElementById('chatInput');
-                  if (!isSelect) {
-                    sendMsg(chatInputEl.value);
-                    setOpen(false);
-                  } else {
-                    const agent = agentList.find((item) => chatInputEl.value.includes(item.name));
-                    if (agent) {
-                      if (agent.id !== currentAgent?.id) {
-                        onSelectAgent(agent);
-                      }
-                      onInputMsgChange('');
-                    }
+                const chatInputEl: any = document.getElementById('chatInput');
+                const agent = agentList.find(
+                  item => chatInputEl.value[0] === '/' && chatInputEl.value.includes(item.name)
+                );
+                if (agent) {
+                  if (agent.id !== currentAgent?.id) {
+                    onSelectAgent(agent);
                   }
+                  onInputMsgChange('');
+                  return;
+                }
+                if (!isSelect) {
+                  sendMsg(chatInputEl.value);
+                  setOpen(false);
                 }
               }
             }}
@@ -364,7 +358,8 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
             listHeight={500}
             allowClear
             open={open}
-            getPopupContainer={(triggerNode) => triggerNode.parentNode}
+            defaultActiveFirstOption={false}
+            getPopupContainer={triggerNode => triggerNode.parentNode}
           >
             {modelOptions.length > 0 ? modelOptionNodes : associateOptionNodes}
           </AutoComplete>
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/style.less b/webapp/packages/chat-sdk/src/Chat/ChatFooter/style.module.less
similarity index 98%
rename from webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/style.less
rename to webapp/packages/chat-sdk/src/Chat/ChatFooter/style.module.less
index 8fde53180..1d2eca902 100644
--- a/webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/style.less
+++ b/webapp/packages/chat-sdk/src/Chat/ChatFooter/style.module.less
@@ -81,7 +81,7 @@
 
             .ant-select-selection-search-input {
               height: 40px !important;
-              padding: 0 16px;
+              padding: 0 12px;
             }
 
             .ant-select-selection-search {
@@ -90,7 +90,7 @@
             }
 
             .ant-select-selection-placeholder {
-              padding-left: 6px;
+              padding-left: 2px;
               line-height: 40px;
             }
           }
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/Conversation/index.tsx b/webapp/packages/chat-sdk/src/Chat/Conversation/index.tsx
similarity index 72%
rename from webapp/packages/supersonic-fe/src/pages/Chat/Conversation/index.tsx
rename to webapp/packages/chat-sdk/src/Chat/Conversation/index.tsx
index 20e88d1c5..cc42f18e3 100644
--- a/webapp/packages/supersonic-fe/src/pages/Chat/Conversation/index.tsx
+++ b/webapp/packages/chat-sdk/src/Chat/Conversation/index.tsx
@@ -6,52 +6,32 @@ import {
   forwardRef,
   ForwardRefRenderFunction,
   useImperativeHandle,
+  memo,
 } from 'react';
-import { useLocation } from 'umi';
 import ConversationModal from '../components/ConversationModal';
 import { deleteConversation, getAllConversations, saveConversation } from '../service';
-import styles from './style.less';
-import { AgentType, ConversationDetailType, DefaultEntityType } from '../type';
+import styles from './style.module.less';
+import { AgentType, ConversationDetailType } from '../type';
 import { DEFAULT_CONVERSATION_NAME } from '../constants';
 import moment from 'moment';
 import { CloseOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
 
 type Props = {
-  agentList?: AgentType[];
   currentAgent?: AgentType;
   currentConversation?: ConversationDetailType;
   historyVisible?: boolean;
-  isCopilotMode?: boolean;
-  defaultEntityFilter?: DefaultEntityType;
-  triggerNewConversation?: boolean;
-  onNewConversationTriggered?: () => void;
   onSelectConversation: (
     conversation: ConversationDetailType,
-    name?: string,
-    modelId?: number,
-    entityId?: string,
-    agent?: AgentType,
+    sendMsgParams?: any,
+    isAdd?: boolean
   ) => void;
   onCloseConversation: () => void;
 };
 
 const Conversation: ForwardRefRenderFunction<any, Props> = (
-  {
-    agentList,
-    currentAgent,
-    currentConversation,
-    historyVisible,
-    isCopilotMode,
-    defaultEntityFilter,
-    triggerNewConversation,
-    onNewConversationTriggered,
-    onSelectConversation,
-    onCloseConversation,
-  },
-  ref,
+  { currentAgent, currentConversation, historyVisible, onSelectConversation, onCloseConversation },
+  ref
 ) => {
-  const location = useLocation();
-  const { q, cid, modelId, entityId } = (location as any).query;
   const [conversations, setConversations] = useState<ConversationDetailType[]>([]);
   const [editModalVisible, setEditModalVisible] = useState(false);
   const [editConversation, setEditConversation] = useState<ConversationDetailType>();
@@ -62,8 +42,8 @@ const Conversation: ForwardRefRenderFunction<any, Props> = (
     onAddConversation,
   }));
 
-  const updateData = async (agent?: AgentType) => {
-    const { data } = await getAllConversations(agent?.id || currentAgent?.id);
+  const updateData = async (agentId?: number) => {
+    const { data } = await getAllConversations(agentId || currentAgent!.id);
     const conversationList = data || [];
     setConversations(conversationList.slice(0, 200));
     return conversationList;
@@ -72,42 +52,26 @@ const Conversation: ForwardRefRenderFunction<any, Props> = (
   const initData = async () => {
     const data = await updateData();
     if (data.length > 0) {
-      const chatId = cid;
-      if (chatId) {
-        const conversation = data.find((item: any) => item.chatId === +chatId);
-        onSelectConversation(conversation || data[0]);
-      } else {
-        onSelectConversation(data[0]);
-      }
+      onSelectConversation(data[0]);
     } else {
       onAddConversation();
     }
   };
 
-  // useEffect(() => {
-  //   if (triggerNewConversation) {
-  //     return;
-  //   }
-  //   if (q && cid === undefined && window.location.href.includes('/chat')) {
-  //     onAddConversation({
-  //       name: q,
-  //       modelId: modelId ? +modelId : undefined,
-  //       entityId,
-  //     });
-  //   } else {
-  //     initData();
-  //   }
-  // }, [q]);
-
   useEffect(() => {
-    if (currentAgent && !triggerNewConversation) {
-      initData();
+    if (currentAgent) {
+      if (currentAgent.initialSendMsgParams) {
+        onAddConversation(currentAgent.initialSendMsgParams);
+      } else {
+        initData();
+      }
     }
   }, [currentAgent]);
 
-  const addConversation = async (name?: string, agent?: AgentType) => {
-    await saveConversation(name || DEFAULT_CONVERSATION_NAME, agent?.id || currentAgent!.id);
-    return updateData(agent);
+  const addConversation = async (sendMsgParams?: any) => {
+    const agentId = sendMsgParams?.agentId || currentAgent!.id;
+    await saveConversation(DEFAULT_CONVERSATION_NAME, agentId);
+    return updateData(agentId);
   };
 
   const onDeleteConversation = async (id: number) => {
@@ -115,28 +79,10 @@ const Conversation: ForwardRefRenderFunction<any, Props> = (
     initData();
   };
 
-  const onAddConversation = async ({
-    name,
-    modelId,
-    entityId,
-    type,
-    agent,
-  }: {
-    name?: string;
-    modelId?: number;
-    entityId?: string;
-    type?: string;
-    agent?: AgentType;
-  } = {}) => {
-    const data = await addConversation(name, agent);
+  const onAddConversation = async (sendMsgParams?: any) => {
+    const data = await addConversation(sendMsgParams);
     if (data.length > 0) {
-      onSelectConversation(
-        data[0],
-        type || name || DEFAULT_CONVERSATION_NAME,
-        modelId,
-        entityId,
-        agent,
-      );
+      onSelectConversation(data[0], sendMsgParams, true);
     }
   };
 
@@ -151,7 +97,6 @@ const Conversation: ForwardRefRenderFunction<any, Props> = (
 
   const conversationClass = classNames(styles.conversation, {
     [styles.historyVisible]: historyVisible,
-    [styles.copilotMode]: isCopilotMode,
   });
 
   const convertTime = (date: string) => {
@@ -203,11 +148,11 @@ const Conversation: ForwardRefRenderFunction<any, Props> = (
         <div className={styles.conversationList}>
           {conversations
             .filter(
-              (conversation) =>
+              conversation =>
                 searchValue === '' ||
-                conversation.chatName.toLowerCase().includes(searchValue.toLowerCase()),
+                conversation.chatName.toLowerCase().includes(searchValue.toLowerCase())
             )
-            .map((item) => {
+            .map(item => {
               const conversationItemClass = classNames(styles.conversationItem, {
                 [styles.activeConversationItem]: currentConversation?.chatId === item.chatId,
               });
@@ -249,7 +194,7 @@ const Conversation: ForwardRefRenderFunction<any, Props> = (
                         <div className={styles.subTitle}>{item.lastQuestion}</div>
                         <DeleteOutlined
                           className={styles.deleteIcon}
-                          onClick={(e) => {
+                          onClick={e => {
                             e.stopPropagation();
                             onDeleteConversation(item.chatId);
                           }}
@@ -277,4 +222,15 @@ const Conversation: ForwardRefRenderFunction<any, Props> = (
   );
 };
 
-export default forwardRef(Conversation);
+function areEqual(prevProps: Props, nextProps: Props) {
+  if (
+    prevProps.currentAgent?.id === nextProps.currentAgent?.id &&
+    prevProps.currentConversation?.chatId === nextProps.currentConversation?.chatId &&
+    prevProps.historyVisible === nextProps.historyVisible
+  ) {
+    return true;
+  }
+  return false;
+}
+
+export default memo(forwardRef(Conversation), areEqual);
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/Conversation/style.less b/webapp/packages/chat-sdk/src/Chat/Conversation/style.module.less
similarity index 98%
rename from webapp/packages/supersonic-fe/src/pages/Chat/Conversation/style.less
rename to webapp/packages/chat-sdk/src/Chat/Conversation/style.module.less
index 90c7a267e..80305b657 100644
--- a/webapp/packages/supersonic-fe/src/pages/Chat/Conversation/style.less
+++ b/webapp/packages/chat-sdk/src/Chat/Conversation/style.module.less
@@ -166,11 +166,6 @@
     width: 400px;
     padding: 10px 16px;
     border-left: 1px solid #f1f1f1;
-  }
-
-  &.copilotMode {
-    &.collapsed {
-      width: 0 !important;
-    }
+    z-index: 99;
   }
 }
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/MessageContainer/index.tsx b/webapp/packages/chat-sdk/src/Chat/MessageContainer/index.tsx
similarity index 85%
rename from webapp/packages/supersonic-fe/src/pages/Chat/MessageContainer/index.tsx
rename to webapp/packages/chat-sdk/src/Chat/MessageContainer/index.tsx
index 8042b460e..3a74944a2 100644
--- a/webapp/packages/supersonic-fe/src/pages/Chat/MessageContainer/index.tsx
+++ b/webapp/packages/chat-sdk/src/Chat/MessageContainer/index.tsx
@@ -1,13 +1,13 @@
 import Text from '../components/Text';
 import { memo, useCallback, useEffect, useState } from 'react';
 import { isEqual } from 'lodash';
-import { ChatItem } from 'supersonic-chat-sdk';
-import type { MsgDataType } from 'supersonic-chat-sdk';
 import { AgentType, MessageItem, MessageTypeEnum } from '../type';
-import { isMobile, updateMessageContainerScroll } from '@/utils/utils';
-import styles from './style.less';
+import { isMobile, updateMessageContainerScroll } from '../../utils/utils';
+import styles from './style.module.less';
 import AgentTip from '../components/AgentTip';
 import classNames from 'classnames';
+import { MsgDataType } from '../../common/type';
+import ChatItem from '../../components/ChatItem';
 
 type Props = {
   id: string;
@@ -16,13 +16,14 @@ type Props = {
   historyVisible: boolean;
   currentAgent?: AgentType;
   chatVisible?: boolean;
+  isDeveloper?: boolean;
+  integrateSystem?: string;
   onMsgDataLoaded: (
     data: MsgDataType,
     questionId: string | number,
     question: string,
-    valid: boolean,
+    valid: boolean
   ) => void;
-  onApplyAuth: (model: string) => void;
   onSendMsg: (value: string) => void;
 };
 
@@ -33,6 +34,8 @@ const MessageContainer: React.FC<Props> = ({
   historyVisible,
   currentAgent,
   chatVisible,
+  isDeveloper,
+  integrateSystem,
   onMsgDataLoaded,
   onSendMsg,
 }) => {
@@ -56,17 +59,6 @@ const MessageContainer: React.FC<Props> = ({
     onResize();
   }, [historyVisible, chatVisible]);
 
-  const getFilters = (modelId?: number, entityId?: string) => {
-    if (!modelId || !entityId) {
-      return undefined;
-    }
-    return [
-      {
-        value: entityId,
-      },
-    ];
-  };
-
   const messageContainerClass = classNames(styles.messageContainer, { [styles.mobile]: isMobile });
 
   return (
@@ -77,15 +69,14 @@ const MessageContainer: React.FC<Props> = ({
             id: msgId,
             modelId,
             agentId,
-            entityId,
             type,
             msg,
             msgValue,
             identityMsg,
             msgData,
             score,
-            isHistory,
             parseOptions,
+            filters,
           } = msgItem;
 
           return (
@@ -104,14 +95,16 @@ const MessageContainer: React.FC<Props> = ({
                     conversationId={chatId}
                     modelId={modelId}
                     agentId={agentId}
-                    filter={getFilters(modelId, entityId)}
+                    filter={filters}
                     isLastMessage={index === messageList.length - 1}
-                    isHistory={isHistory}
                     triggerResize={triggerResize}
+                    isDeveloper={isDeveloper}
+                    integrateSystem={integrateSystem}
                     onMsgDataLoaded={(data: MsgDataType, valid: boolean) => {
                       onMsgDataLoaded(data, msgId, msgValue || msg || '', valid);
                     }}
                     onUpdateMessageScroll={updateMessageContainerScroll}
+                    onSendMsg={onSendMsg}
                   />
                 </>
               )}
@@ -121,15 +114,16 @@ const MessageContainer: React.FC<Props> = ({
                   conversationId={chatId}
                   modelId={modelId}
                   agentId={agentId}
-                  filter={getFilters(modelId, entityId)}
+                  filter={filters}
                   isLastMessage={index === messageList.length - 1}
-                  isHistory={isHistory}
                   triggerResize={triggerResize}
                   parseOptions={parseOptions}
+                  integrateSystem={integrateSystem}
                   onMsgDataLoaded={(data: MsgDataType, valid: boolean) => {
                     onMsgDataLoaded(data, msgId, msgValue || msg || '', valid);
                   }}
                   onUpdateMessageScroll={updateMessageContainerScroll}
+                  onSendMsg={onSendMsg}
                 />
               )}
             </div>
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/MessageContainer/style.less b/webapp/packages/chat-sdk/src/Chat/MessageContainer/style.module.less
similarity index 100%
rename from webapp/packages/supersonic-fe/src/pages/Chat/MessageContainer/style.less
rename to webapp/packages/chat-sdk/src/Chat/MessageContainer/style.module.less
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/MobileAgents/index.tsx b/webapp/packages/chat-sdk/src/Chat/MobileAgents/index.tsx
similarity index 94%
rename from webapp/packages/supersonic-fe/src/pages/Chat/MobileAgents/index.tsx
rename to webapp/packages/chat-sdk/src/Chat/MobileAgents/index.tsx
index bf21c3737..a873be846 100644
--- a/webapp/packages/supersonic-fe/src/pages/Chat/MobileAgents/index.tsx
+++ b/webapp/packages/chat-sdk/src/Chat/MobileAgents/index.tsx
@@ -1,9 +1,9 @@
-import IconFont from '@/components/IconFont';
+import IconFont from '../../components/IconFont';
 import { Drawer } from 'antd';
 import classNames from 'classnames';
 import { AGENT_ICONS } from '../constants';
 import { AgentType } from '../type';
-import styles from './style.less';
+import styles from './style.module.less';
 
 type Props = {
   open: boolean;
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/MobileAgents/style.less b/webapp/packages/chat-sdk/src/Chat/MobileAgents/style.module.less
similarity index 100%
rename from webapp/packages/supersonic-fe/src/pages/Chat/MobileAgents/style.less
rename to webapp/packages/chat-sdk/src/Chat/MobileAgents/style.module.less
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/components/AgentTip/index.tsx b/webapp/packages/chat-sdk/src/Chat/components/AgentTip/index.tsx
similarity index 89%
rename from webapp/packages/supersonic-fe/src/pages/Chat/components/AgentTip/index.tsx
rename to webapp/packages/chat-sdk/src/Chat/components/AgentTip/index.tsx
index 3bd59eda4..2237266fb 100644
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/AgentTip/index.tsx
+++ b/webapp/packages/chat-sdk/src/Chat/components/AgentTip/index.tsx
@@ -1,8 +1,8 @@
 import LeftAvatar from '../CopilotAvatar';
 import Message from '../Message';
-import styles from './style.less';
+import styles from './style.module.less';
 import { AgentType } from '../../type';
-import { isMobile } from '@/utils/utils';
+import { isMobile } from '../../../utils/utils';
 
 type Props = {
   currentAgent?: AgentType;
@@ -24,7 +24,7 @@ const AgentTip: React.FC<Props> = ({ currentAgent, onSendMsg }) => {
         <div className={styles.content}>
           <div className={styles.examples}>
             {currentAgent.examples?.length > 0 ? (
-              currentAgent.examples.map((example) => (
+              currentAgent.examples.map(example => (
                 <div
                   key={example}
                   className={styles.example}
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/components/AgentTip/style.less b/webapp/packages/chat-sdk/src/Chat/components/AgentTip/style.module.less
similarity index 100%
rename from webapp/packages/supersonic-fe/src/pages/Chat/components/AgentTip/style.less
rename to webapp/packages/chat-sdk/src/Chat/components/AgentTip/style.module.less
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/components/ConversationModal/index.tsx b/webapp/packages/chat-sdk/src/Chat/components/ConversationModal/index.tsx
similarity index 98%
rename from webapp/packages/supersonic-fe/src/pages/Chat/components/ConversationModal/index.tsx
rename to webapp/packages/chat-sdk/src/Chat/components/ConversationModal/index.tsx
index e5d0b33fd..c69dcc2cf 100644
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/ConversationModal/index.tsx
+++ b/webapp/packages/chat-sdk/src/Chat/components/ConversationModal/index.tsx
@@ -45,7 +45,7 @@ const ConversationModal: React.FC<Props> = ({ visible, editConversation, onClose
   return (
     <Modal
       title={`修改${CHAT_TITLE}问答名称`}
-      visible={visible}
+      open={visible}
       onCancel={onClose}
       onOk={onConfirm}
       confirmLoading={loading}
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/components/CopilotAvatar/index.tsx b/webapp/packages/chat-sdk/src/Chat/components/CopilotAvatar/index.tsx
similarity index 60%
rename from webapp/packages/supersonic-fe/src/pages/Chat/components/CopilotAvatar/index.tsx
rename to webapp/packages/chat-sdk/src/Chat/components/CopilotAvatar/index.tsx
index 27429e928..207a4ff5a 100644
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/CopilotAvatar/index.tsx
+++ b/webapp/packages/chat-sdk/src/Chat/components/CopilotAvatar/index.tsx
@@ -1,5 +1,5 @@
-import IconFont from '@/components/IconFont';
-import styles from './style.less';
+import IconFont from '../../../components/IconFont';
+import styles from './style.module.less';
 
 const CopilotAvatar = () => {
   return <IconFont type="icon-zhinengsuanfa" className={styles.leftAvatar} />;
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/components/CopilotAvatar/style.less b/webapp/packages/chat-sdk/src/Chat/components/CopilotAvatar/style.module.less
similarity index 100%
rename from webapp/packages/supersonic-fe/src/pages/Chat/components/CopilotAvatar/style.less
rename to webapp/packages/chat-sdk/src/Chat/components/CopilotAvatar/style.module.less
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/components/Message.tsx b/webapp/packages/chat-sdk/src/Chat/components/Message.tsx
similarity index 87%
rename from webapp/packages/supersonic-fe/src/pages/Chat/components/Message.tsx
rename to webapp/packages/chat-sdk/src/Chat/components/Message.tsx
index ed1720310..8039f8acb 100644
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/Message.tsx
+++ b/webapp/packages/chat-sdk/src/Chat/components/Message.tsx
@@ -1,11 +1,13 @@
 import classNames from 'classnames';
-import styles from './style.less';
+import styles from './style.module.less';
+import { ReactNode } from 'react';
 
 type Props = {
   position: 'left' | 'right';
   width?: number | string;
   height?: number | string;
   bubbleClassName?: string;
+  children?: ReactNode;
 };
 
 const Message: React.FC<Props> = ({ position, width, height, children, bubbleClassName }) => {
@@ -21,7 +23,7 @@ const Message: React.FC<Props> = ({ position, width, height, children, bubbleCla
           <div
             className={`${styles.bubble}${bubbleClassName ? ` ${bubbleClassName}` : ''}`}
             style={{ height }}
-            onClick={(e) => {
+            onClick={e => {
               e.stopPropagation();
             }}
           >
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/components/RecommendQuestions/index.tsx b/webapp/packages/chat-sdk/src/Chat/components/RecommendQuestions/index.tsx
similarity index 92%
rename from webapp/packages/supersonic-fe/src/pages/Chat/components/RecommendQuestions/index.tsx
rename to webapp/packages/chat-sdk/src/Chat/components/RecommendQuestions/index.tsx
index a5f50dec7..68212c47d 100644
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/RecommendQuestions/index.tsx
+++ b/webapp/packages/chat-sdk/src/Chat/components/RecommendQuestions/index.tsx
@@ -1,10 +1,9 @@
 import { useEffect, useState } from 'react';
 import LeftAvatar from '../CopilotAvatar';
 import Message from '../Message';
-import styles from './style.less';
+import styles from './style.module.less';
 import { queryRecommendQuestions } from '../../service';
-import Typing from '../Typing';
-import { isMobile } from '@/utils/utils';
+import { isMobile } from '../../../utils/utils';
 
 type Props = {
   onSelectQuestion: (value: string) => void;
@@ -25,7 +24,7 @@ const RecommendQuestions: React.FC<Props> = ({ onSelectQuestion }) => {
           ...item.recommendedQuestions.slice(0, 20).map((item: any) => item.question),
         ];
         return result;
-      }, []) || [],
+      }, []) || []
     );
   };
 
@@ -37,7 +36,7 @@ const RecommendQuestions: React.FC<Props> = ({ onSelectQuestion }) => {
     <div className={styles.recommendQuestions}>
       {!isMobile && <LeftAvatar />}
       {loading ? (
-        <Typing />
+        <></>
       ) : questions.length > 0 ? (
         <Message position="left" bubbleClassName={styles.recommendQuestionsMsg}>
           <div className={styles.title}>推荐问题：</div>
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/components/RecommendQuestions/style.less b/webapp/packages/chat-sdk/src/Chat/components/RecommendQuestions/style.module.less
similarity index 95%
rename from webapp/packages/supersonic-fe/src/pages/Chat/components/RecommendQuestions/style.less
rename to webapp/packages/chat-sdk/src/Chat/components/RecommendQuestions/style.module.less
index e2b3f4628..275c68654 100644
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/RecommendQuestions/style.less
+++ b/webapp/packages/chat-sdk/src/Chat/components/RecommendQuestions/style.module.less
@@ -5,26 +5,26 @@
     padding: 12px 20px 20px !important;
 
     .title {
-      font-size: 14px;
-      font-weight: 500;
       margin-bottom: 12px;
+      font-weight: 500;
+      font-size: 14px;
     }
 
     .content {
       display: flex;
-      align-items: center;
       flex-wrap: wrap;
+      align-items: center;
       column-gap: 16px;
       row-gap: 20px;
 
       .question {
-        padding: 0 6px;
         height: 22px;
-        line-height: 22px;
-        font-size: 12px;
+        padding: 0 6px;
         color: var(--text-color);
-        border-radius:11px;
+        font-size: 12px;
+        line-height: 22px;
         background-color: #f4f4f4;
+        border-radius: 11px;
         cursor: pointer;
 
         &:hover {
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/components/Text.tsx b/webapp/packages/chat-sdk/src/Chat/components/Text.tsx
similarity index 79%
rename from webapp/packages/supersonic-fe/src/pages/Chat/components/Text.tsx
rename to webapp/packages/chat-sdk/src/Chat/components/Text.tsx
index e22fd75c8..68423debc 100644
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/Text.tsx
+++ b/webapp/packages/chat-sdk/src/Chat/components/Text.tsx
@@ -1,7 +1,9 @@
+import { isMobile } from '../../utils/utils';
+import { Avatar } from 'antd';
 import classNames from 'classnames';
 import LeftAvatar from './CopilotAvatar';
 import Message from './Message';
-import styles from './style.less';
+import styles from './style.module.less';
 
 type Props = {
   position: 'left' | 'right';
@@ -15,7 +17,7 @@ const Text: React.FC<Props> = ({ position, data, quote }) => {
   });
   return (
     <div className={textWrapperClass}>
-      {position === 'left' && <LeftAvatar />}
+      {!isMobile && position === 'left' && <LeftAvatar />}
       <Message position={position} bubbleClassName={styles.textBubble}>
         {position === 'right' && quote && <div className={styles.quote}>{quote}</div>}
         <div className={styles.text}>{data}</div>
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/components/style.less b/webapp/packages/chat-sdk/src/Chat/components/style.module.less
similarity index 100%
rename from webapp/packages/supersonic-fe/src/pages/Chat/components/style.less
rename to webapp/packages/chat-sdk/src/Chat/components/style.module.less
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/constants.ts b/webapp/packages/chat-sdk/src/Chat/constants.ts
similarity index 77%
rename from webapp/packages/supersonic-fe/src/pages/Chat/constants.ts
rename to webapp/packages/chat-sdk/src/Chat/constants.ts
index e3f71a70f..1c30a9317 100644
--- a/webapp/packages/supersonic-fe/src/pages/Chat/constants.ts
+++ b/webapp/packages/chat-sdk/src/Chat/constants.ts
@@ -21,7 +21,7 @@ export enum SemanticTypeEnum {
 }
 
 export const SEMANTIC_TYPE_MAP = {
-  [SemanticTypeEnum.MODEL]: '主题域',
+  [SemanticTypeEnum.MODEL]: '数据来源',
   [SemanticTypeEnum.DIMENSION]: '维度',
   [SemanticTypeEnum.METRIC]: '指标',
   [SemanticTypeEnum.VALUE]: '维度值',
@@ -41,6 +41,8 @@ export const AGENT_ICONS = [
   'icon-mendiankanban',
 ];
 
+export const HOLDER_TAG = '@_supersonic_@';
+
 export const CHAT_TITLE = '';
 
 export const DEFAULT_CONVERSATION_NAME = '新问答对话';
@@ -49,4 +51,8 @@ export const PAGE_TITLE = '问答对话';
 
 export const WEB_TITLE = '问答对话';
 
-export const PLACE_HOLDER = '请输入您的问题';
+export const MOBILE_TITLE = '问答对话';
+
+export const PLACE_HOLDER = '请输入您的问题，或输入“/”切换助理';
+
+export const SIMPLE_PLACE_HOLDER = '请输入您的问题';
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/index.tsx b/webapp/packages/chat-sdk/src/Chat/index.tsx
similarity index 62%
rename from webapp/packages/supersonic-fe/src/pages/Chat/index.tsx
rename to webapp/packages/chat-sdk/src/Chat/index.tsx
index 9343bc648..60ed5b7aa 100644
--- a/webapp/packages/supersonic-fe/src/pages/Chat/index.tsx
+++ b/webapp/packages/chat-sdk/src/Chat/index.tsx
@@ -1,52 +1,57 @@
-import { updateMessageContainerScroll, isMobile, uuid } from '@/utils/utils';
-import { useEffect, useRef, useState } from 'react';
-import { Helmet, useDispatch } from 'umi';
-import MessageContainer from './MessageContainer';
-import styles from './style.less';
+import { updateMessageContainerScroll, isMobile, uuid, setToken } from '../utils/utils';
 import {
-  ConversationDetailType,
-  DefaultEntityType,
-  ModelType,
-  MessageItem,
-  MessageTypeEnum,
-  AgentType,
-} from './type';
+  ForwardRefRenderFunction,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import MessageContainer from './MessageContainer';
+import styles from './style.module.less';
+import { ConversationDetailType, MessageItem, MessageTypeEnum, AgentType } from './type';
 import { queryAgentList } from './service';
 import { useThrottleFn } from 'ahooks';
 import Conversation from './Conversation';
 import ChatFooter from './ChatFooter';
 import classNames from 'classnames';
-import { CHAT_TITLE, DEFAULT_CONVERSATION_NAME, WEB_TITLE } from './constants';
-import { HistoryMsgItemType, MsgDataType, getHistoryMsg } from 'supersonic-chat-sdk';
+import { CHAT_TITLE } from './constants';
 import { cloneDeep } from 'lodash';
-import 'supersonic-chat-sdk/dist/index.css';
-import { setToken as setChatSdkToken } from 'supersonic-chat-sdk';
 import AgentList from './AgentList';
-import { AUTH_TOKEN_KEY } from '@/common/constants';
 import MobileAgents from './MobileAgents';
+import { HistoryMsgItemType, MsgDataType, SendMsgParamsType } from '../common/type';
+import { getHistoryMsg } from '../service';
 
 type Props = {
-  isCopilotMode?: boolean;
-  defaultModelName?: string;
-  defaultEntityFilter?: DefaultEntityType;
-  copilotSendMsg?: string;
-  triggerNewConversation?: boolean;
+  token?: string;
+  agentIds?: number[];
+  initialAgentId?: number;
   chatVisible?: boolean;
-  onNewConversationTriggered?: () => void;
-  onCurrentModelChange?: (model?: ModelType) => void;
+  noInput?: boolean;
+  isDeveloper?: boolean;
+  integrateSystem?: string;
+  isCopilot?: boolean;
+  apiUrl?: string;
+  onCurrentAgentChange?: (agent?: AgentType) => void;
+  onReportMsgEvent?: (msg: string, valid: boolean) => void;
 };
 
-const Chat: React.FC<Props> = ({
-  isCopilotMode,
-  defaultModelName,
-  defaultEntityFilter,
-  copilotSendMsg,
-  triggerNewConversation,
-  chatVisible,
-  onNewConversationTriggered,
-}) => {
-  const isMobileMode = isMobile || isCopilotMode;
-
+const Chat: ForwardRefRenderFunction<any, Props> = (
+  {
+    token,
+    agentIds,
+    initialAgentId,
+    chatVisible,
+    noInput,
+    isDeveloper,
+    integrateSystem,
+    isCopilot,
+    apiUrl,
+    onCurrentAgentChange,
+    onReportMsgEvent,
+  },
+  ref
+) => {
   const [messageList, setMessageList] = useState<MessageItem[]>([]);
   const [inputMsg, setInputMsg] = useState('');
   const [pageNo, setPageNo] = useState(1);
@@ -56,95 +61,97 @@ const Chat: React.FC<Props> = ({
     ConversationDetailType | undefined
   >(isMobile ? { chatId: 0, chatName: `${CHAT_TITLE}问答` } : undefined);
   const [historyVisible, setHistoryVisible] = useState(false);
-  const [defaultEntity, setDefaultEntity] = useState<DefaultEntityType>();
   const [agentList, setAgentList] = useState<AgentType[]>([]);
   const [currentAgent, setCurrentAgent] = useState<AgentType>();
   const [mobileAgentsVisible, setMobileAgentsVisible] = useState(false);
-  const dispatch = useDispatch();
+  const [agentListVisible, setAgentListVisible] = useState(true);
 
   const conversationRef = useRef<any>();
   const chatFooterRef = useRef<any>();
 
+  useImperativeHandle(ref, () => ({
+    sendCopilotMsg,
+  }));
+
+  const sendCopilotMsg = (params: SendMsgParamsType) => {
+    setAgentListVisible(false);
+    const { agentId, msg, modelId } = params;
+    if (currentAgent?.id !== agentId) {
+      setMessageList([]);
+      const agent = agentList.find(item => item.id === agentId) || ({} as AgentType);
+      updateCurrentAgent({ ...agent, initialSendMsgParams: params });
+    } else {
+      onSendMsg(msg, messageList, modelId, params);
+    }
+  };
+
+  const updateCurrentAgent = (agent?: AgentType) => {
+    setCurrentAgent(agent);
+    onCurrentAgentChange?.(agent);
+    localStorage.setItem('AGENT_ID', `${agent?.id}`);
+    if (!isCopilot) {
+      window.history.replaceState({}, '', `${window.location.pathname}?agentId=${agent?.id}`);
+    }
+  };
+
   const initAgentList = async () => {
     const res = await queryAgentList();
-    const agentListValue = (res.data || []).filter((item) => item.status === 1);
+    const agentListValue = (res.data || []).filter(
+      item => item.status === 1 && (agentIds === undefined || agentIds.includes(item.id))
+    );
     setAgentList(agentListValue);
     if (agentListValue.length > 0) {
-      setCurrentAgent(agentListValue[0]);
+      const agentId = initialAgentId || localStorage.getItem('AGENT_ID');
+      if (agentId) {
+        const agent = agentListValue.find(item => item.id === +agentId);
+        updateCurrentAgent(agent || agentListValue[0]);
+      } else {
+        updateCurrentAgent(agentListValue[0]);
+      }
     }
   };
 
   useEffect(() => {
-    setChatSdkToken(localStorage.getItem(AUTH_TOKEN_KEY) || '');
     initAgentList();
   }, []);
 
+  useEffect(() => {
+    if (token) {
+      setToken(token);
+    }
+  }, [token]);
+
+  useEffect(() => {
+    if (apiUrl) {
+      localStorage.setItem('SUPERSONIC_CHAT_API_URL', apiUrl);
+    }
+  }, [apiUrl]);
+
   useEffect(() => {
     if (chatVisible) {
+      inputFocus();
       updateMessageContainerScroll();
     }
   }, [chatVisible]);
 
-  useEffect(() => {
-    if (triggerNewConversation) {
-      setCurrentAgent(agentList?.find((item) => item.name === '做分析'));
-      conversationRef.current?.onAddConversation({
-        type: 'CUSTOMIZE',
-        modelId: defaultEntityFilter?.modelId,
-        entityId: defaultEntityFilter?.entityId,
-        agent: agentList?.find((item) => item.name === '做分析'),
-      });
-      setTimeout(() => {
-        onNewConversationTriggered?.();
-      }, 200);
-    }
-  }, [triggerNewConversation]);
-
   useEffect(() => {
     if (!currentConversation) {
       return;
     }
-    const { initMsg, modelId, entityId, agent } = currentConversation;
-    if (initMsg) {
+    const { initialMsgParams, isAdd } = currentConversation;
+    if (isAdd) {
       inputFocus();
-      if (initMsg === 'CUSTOMIZE' && copilotSendMsg) {
-        onSendMsg(
-          copilotSendMsg,
-          [],
-          modelId,
-          entityId,
-          agentList.find((item) => item.name === '做分析'),
-        );
-        dispatch({
-          type: 'globalState/setCopilotSendMsg',
-          payload: '',
-        });
+      if (initialMsgParams) {
+        onSendMsg(initialMsgParams.msg, [], initialMsgParams.modelId, initialMsgParams);
         return;
       }
-      if (initMsg === DEFAULT_CONVERSATION_NAME || initMsg.includes('CUSTOMIZE')) {
-        if (agent) {
-          setCurrentAgent(agent);
-        }
-        sendHelloRsp(agent);
-        return;
-      }
-      onSendMsg(
-        initMsg,
-        [],
-        modelId,
-        entityId,
-        initMsg.includes('商业线索') ? agentList.find((item) => item.name === '做分析') : undefined,
-      );
+      sendHelloRsp();
       return;
     }
     updateHistoryMsg(1);
     setPageNo(1);
   }, [currentConversation]);
 
-  useEffect(() => {
-    setDefaultEntity(defaultEntityFilter);
-  }, [defaultEntityFilter]);
-
   useEffect(() => {
     if (historyInited) {
       const messageContainerEle = document.getElementById('messageContainer');
@@ -157,11 +164,14 @@ const Chat: React.FC<Props> = ({
   }, [historyInited]);
 
   const sendHelloRsp = (agent?: AgentType) => {
+    if (noInput) {
+      return;
+    }
     setMessageList([
       {
         id: uuid(),
         type: MessageTypeEnum.AGENT_LIST,
-        msg: agent?.name || currentAgent?.name || '查信息',
+        msg: agent?.name || currentAgent?.name || agentList?.[0].name,
       },
     ]);
   };
@@ -173,13 +183,12 @@ const Chat: React.FC<Props> = ({
       msg: item.queryText,
       msgData: item.queryResult,
       score: item.score,
-      isHistory: true,
     }));
   };
 
   const updateHistoryMsg = async (page: number) => {
     const res = await getHistoryMsg(page, currentConversation!.chatId, 3);
-    const { hasNextPage, list } = res.data?.data || { hasNextPage: false, list: [] };
+    const { hasNextPage, list } = res?.data || { hasNextPage: false, list: [] };
     const msgList = [...convertHistoryMsg(list), ...(page === 1 ? [] : messageList)];
     setMessageList(msgList);
     setHasNextPage(hasNextPage);
@@ -197,7 +206,7 @@ const Chat: React.FC<Props> = ({
   };
 
   const { run: handleScroll } = useThrottleFn(
-    (e) => {
+    e => {
       if (e.target.scrollTop === 0 && hasNextPage) {
         updateHistoryMsg(pageNo + 1);
         setPageNo(pageNo + 1);
@@ -207,7 +216,7 @@ const Chat: React.FC<Props> = ({
       leading: true,
       trailing: true,
       wait: 200,
-    },
+    }
   );
 
   const inputFocus = () => {
@@ -224,8 +233,7 @@ const Chat: React.FC<Props> = ({
     msg?: string,
     list?: MessageItem[],
     modelId?: number,
-    entityId?: string,
-    agent?: AgentType,
+    sendMsgParams?: SendMsgParamsType
   ) => {
     const currentMsg = msg || inputMsg;
     if (currentMsg.trim() === '') {
@@ -233,13 +241,14 @@ const Chat: React.FC<Props> = ({
       return;
     }
 
-    const msgAgent = agentList.find((item) => currentMsg.indexOf(item.name) === 1);
+    const msgAgent = agentList.find(item => currentMsg.indexOf(item.name) === 1);
     const certainAgent = currentMsg[0] === '/' && msgAgent;
     const agentIdValue = certainAgent ? msgAgent.id : undefined;
-    if (agent || certainAgent) {
-      setCurrentAgent(agent || msgAgent);
-    }
+    const agent = agentList.find(item => item.id === sendMsgParams?.agentId);
 
+    if (agent || certainAgent) {
+      updateCurrentAgent(agent || msgAgent);
+    }
     const msgs = [
       ...(list || messageList),
       {
@@ -250,8 +259,8 @@ const Chat: React.FC<Props> = ({
           : currentMsg,
         modelId: modelId === -1 ? undefined : modelId,
         agentId: agent?.id || agentIdValue || currentAgent?.id,
-        entityId: entityId || defaultEntity?.entityId,
         type: MessageTypeEnum.QUESTION,
+        filters: sendMsgParams?.filters,
       },
     ];
     setMessageList(msgs);
@@ -276,35 +285,26 @@ const Chat: React.FC<Props> = ({
 
   const onSelectConversation = (
     conversation: ConversationDetailType,
-    name?: string,
-    modelId?: number,
-    entityId?: string,
-    agent?: AgentType,
+    sendMsgParams?: SendMsgParamsType,
+    isAdd?: boolean
   ) => {
-    if (!isMobileMode) {
-      window.history.replaceState('', '', `?q=${conversation.chatName}&cid=${conversation.chatId}`);
-    }
     setCurrentConversation({
       ...conversation,
-      initMsg: name,
-      modelId,
-      entityId,
-      agent,
+      initialMsgParams: sendMsgParams,
+      isAdd,
     });
     saveConversationToLocal(conversation);
   };
 
-  const reportMsgEvent = (msg: string, valid: boolean) => {};
-
   const onMsgDataLoaded = (
     data: MsgDataType,
     questionId: string | number,
     question: string,
-    valid: boolean,
+    valid: boolean
   ) => {
-    reportMsgEvent(question, valid);
+    onReportMsgEvent?.(question, valid);
     if (!isMobile) {
-      conversationRef?.current?.updateData();
+      conversationRef?.current?.updateData(currentAgent?.id);
     }
     if (!data) {
       return;
@@ -319,7 +319,7 @@ const Chat: React.FC<Props> = ({
       };
     }
     const msgs = cloneDeep(messageList);
-    const msg = msgs.find((item) => item.id === questionId);
+    const msg = msgs.find(item => item.id === questionId);
     if (msg) {
       msg.msgData = data;
       const msgList = [...msgs, ...(parseOptionsItem ? [parseOptionsItem] : [])];
@@ -332,10 +332,8 @@ const Chat: React.FC<Props> = ({
     setHistoryVisible(!historyVisible);
   };
 
-  const onApplyAuth = (model: string) => {};
-
-  const onAddConversation = (agent?: AgentType) => {
-    conversationRef.current?.onAddConversation({ agent });
+  const onAddConversation = () => {
+    conversationRef.current?.onAddConversation();
     inputFocus();
   };
 
@@ -343,7 +341,10 @@ const Chat: React.FC<Props> = ({
     if (agent.id === currentAgent?.id) {
       return;
     }
-    setCurrentAgent(agent);
+    if (messageList.length === 1 && messageList[0].type === MessageTypeEnum.AGENT_LIST) {
+      setMessageList([]);
+    }
+    updateCurrentAgent(agent);
     updateMessageContainerScroll();
   };
 
@@ -365,9 +366,8 @@ const Chat: React.FC<Props> = ({
 
   return (
     <div className={chatClass}>
-      {!isMobileMode && <Helmet title={WEB_TITLE} />}
       <div className={styles.chatSection}>
-        {!isMobile && (
+        {!isMobile && agentList.length > 1 && agentListVisible && (
           <AgentList
             agentList={agentList}
             currentAgent={currentAgent}
@@ -378,7 +378,7 @@ const Chat: React.FC<Props> = ({
           {currentConversation && (
             <div className={styles.chatBody}>
               <div className={styles.chatContent}>
-                {currentAgent && !isMobile && (
+                {currentAgent && !isMobile && !noInput && (
                   <div className={styles.chatHeader}>
                     <div className={styles.chatHeaderTitle}>{currentAgent.name}</div>
                     <div className={styles.chatHeaderTip}>{currentAgent.description}</div>
@@ -391,38 +391,40 @@ const Chat: React.FC<Props> = ({
                   historyVisible={historyVisible}
                   currentAgent={currentAgent}
                   chatVisible={chatVisible}
+                  isDeveloper={isDeveloper}
+                  integrateSystem={integrateSystem}
                   onMsgDataLoaded={onMsgDataLoaded}
-                  onApplyAuth={onApplyAuth}
                   onSendMsg={onSendMsg}
                 />
-                <ChatFooter
-                  inputMsg={inputMsg}
-                  chatId={currentConversation?.chatId}
-                  agentList={agentList}
-                  currentAgent={currentAgent}
-                  onToggleHistoryVisible={onToggleHistoryVisible}
-                  onInputMsgChange={onInputMsgChange}
-                  onSendMsg={sendMsg}
-                  onAddConversation={onAddConversation}
-                  onSelectAgent={onSelectAgent}
-                  onOpenMobileAgents={() => {
-                    setMobileAgentsVisible(true);
-                  }}
-                  ref={chatFooterRef}
-                />
+                {!noInput && (
+                  <ChatFooter
+                    inputMsg={inputMsg}
+                    chatId={currentConversation?.chatId}
+                    agentList={agentList}
+                    currentAgent={currentAgent}
+                    onToggleHistoryVisible={onToggleHistoryVisible}
+                    onInputMsgChange={onInputMsgChange}
+                    onSendMsg={sendMsg}
+                    onAddConversation={onAddConversation}
+                    onSelectAgent={onSelectAgent}
+                    onOpenAgents={() => {
+                      if (isMobile) {
+                        setMobileAgentsVisible(true);
+                      } else {
+                        setAgentListVisible(!agentListVisible);
+                      }
+                    }}
+                    ref={chatFooterRef}
+                  />
+                )}
               </div>
             </div>
           )}
         </div>
         <Conversation
-          agentList={agentList}
           currentAgent={currentAgent}
           currentConversation={currentConversation}
           historyVisible={historyVisible}
-          isCopilotMode={isCopilotMode}
-          defaultEntityFilter={defaultEntityFilter}
-          triggerNewConversation={triggerNewConversation}
-          onNewConversationTriggered={onNewConversationTriggered}
           onSelectConversation={onSelectConversation}
           onCloseConversation={onCloseConversation}
           ref={conversationRef}
@@ -441,4 +443,4 @@ const Chat: React.FC<Props> = ({
   );
 };
 
-export default Chat;
+export default forwardRef(Chat);
diff --git a/webapp/packages/chat-sdk/src/Chat/service.ts b/webapp/packages/chat-sdk/src/Chat/service.ts
new file mode 100644
index 000000000..f8cb402d3
--- /dev/null
+++ b/webapp/packages/chat-sdk/src/Chat/service.ts
@@ -0,0 +1,51 @@
+import axios from '../service/axiosInstance';
+import { isMobile } from '../utils/utils';
+import { AgentType, ModelType } from './type';
+
+const prefix = isMobile ? '/openapi' : '/api';
+
+export function saveConversation(chatName: string, agentId: number) {
+  return axios.post<any>(
+    `${prefix}/chat/manage/save?chatName=${chatName}&agentId=${agentId}`
+  );
+}
+
+export function updateConversationName(chatName: string, chatId: number = 0) {
+  return axios.post<any>(
+    `${prefix}/chat/manage/updateChatName?chatName=${chatName}&chatId=${chatId}`,
+  );
+}
+
+export function deleteConversation(chatId: number) {
+  return axios.post<any>(`${prefix}/chat/manage/delete?chatId=${chatId}`);
+}
+
+export function getAllConversations(agentId?: number) {
+  return axios.get<any>(`${prefix}/chat/manage/getAll`, { params: { agentId } });
+}
+
+export function getModelList() {
+  return axios.get<ModelType[]>(`${prefix}/chat/conf/modelList/view`);
+}
+
+export function updateQAFeedback(questionId: number, score: number) {
+  return axios.post<any>(
+    `${prefix}/chat/manage/updateQAFeedback?id=${questionId}&score=${score}&feedback=`,
+  );
+}
+
+export function queryMetricSuggestion(modelId: number) {
+  return axios.get<any>(`${prefix}/chat/recommend/metric/${modelId}`);
+}
+
+export function querySuggestion(modelId: number) {
+  return axios.get<any>(`${prefix}/chat/recommend/${modelId}`);
+}
+
+export function queryRecommendQuestions() {
+  return axios.get<any>(`${prefix}/chat/recommend/question`);
+}
+
+export function queryAgentList() {
+  return axios.get<AgentType[]>(`${prefix}/chat/agent/getAgentList`);
+}
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/style.less b/webapp/packages/chat-sdk/src/Chat/style.module.less
similarity index 96%
rename from webapp/packages/supersonic-fe/src/pages/Chat/style.less
rename to webapp/packages/chat-sdk/src/Chat/style.module.less
index 542e2a295..9ef4f17c5 100644
--- a/webapp/packages/supersonic-fe/src/pages/Chat/style.less
+++ b/webapp/packages/chat-sdk/src/Chat/style.module.less
@@ -1,5 +1,3 @@
-@import '~antd/es/style/themes/default.less';
-
 .chat {
   height: 100%;
   overflow: hidden;
@@ -33,7 +31,7 @@
           .chatHeader {
             position: absolute;
             top: 0;
-            z-index: 999;
+            z-index: 9;
             display: flex;
             align-items: baseline;
             width: 100%;
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/type.ts b/webapp/packages/chat-sdk/src/Chat/type.ts
similarity index 84%
rename from webapp/packages/supersonic-fe/src/pages/Chat/type.ts
rename to webapp/packages/chat-sdk/src/Chat/type.ts
index 62497bca2..1208e70ca 100644
--- a/webapp/packages/supersonic-fe/src/pages/Chat/type.ts
+++ b/webapp/packages/chat-sdk/src/Chat/type.ts
@@ -1,4 +1,4 @@
-import { ChatContextType, MsgDataType } from 'supersonic-chat-sdk';
+import { ChatContextType, MsgDataType, SendMsgParamsType } from "../common/type";
 
 export enum MessageTypeEnum {
   TEXT = 'text', // 指标文本
@@ -27,8 +27,8 @@ export type MessageItem = {
   quote?: string;
   score?: number;
   feedback?: string;
-  isHistory?: boolean;
   parseOptions?: ChatContextType[];
+  filters?: any;
 };
 
 export type ConversationDetailType = {
@@ -38,10 +38,8 @@ export type ConversationDetailType = {
   creator?: string;
   lastQuestion?: string;
   lastTime?: string;
-  initMsg?: string;
-  modelId?: number;
-  entityId?: string;
-  agent?: AgentType;
+  initialMsgParams?: SendMsgParamsType;
+  isAdd?: boolean;
 };
 
 export enum MessageModeEnum {
@@ -67,13 +65,6 @@ export type PluginType = {
   comment: string;
 };
 
-export type DefaultEntityType = {
-  entityId: string;
-  entityName: string;
-  modelName?: string;
-  modelId?: number;
-};
-
 export type SuggestionItemType = {
   id: number;
   model: number;
@@ -92,4 +83,5 @@ export type AgentType = {
   description: string;
   examples: string[];
   status: 0 | 1;
+  initialSendMsgParams?: SendMsgParamsType;
 };
diff --git a/webapp/packages/supersonic-fe/src/pages/Copilot/constants.ts b/webapp/packages/chat-sdk/src/Copilot/constants.ts
similarity index 100%
rename from webapp/packages/supersonic-fe/src/pages/Copilot/constants.ts
rename to webapp/packages/chat-sdk/src/Copilot/constants.ts
diff --git a/webapp/packages/chat-sdk/src/Copilot/index.tsx b/webapp/packages/chat-sdk/src/Copilot/index.tsx
new file mode 100644
index 000000000..fada860a8
--- /dev/null
+++ b/webapp/packages/chat-sdk/src/Copilot/index.tsx
@@ -0,0 +1,148 @@
+import IconFont from '../components/IconFont';
+import { CaretRightOutlined, CloseOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import {
+  ForwardRefRenderFunction,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import Chat from '../Chat';
+import { AgentType } from '../Chat/type';
+import { setToken } from '../utils/utils';
+import { SendMsgParamsType } from '../common/type';
+import styles from './style.module.less';
+
+type Props = {
+  token?: string;
+  agentIds?: number[];
+  noInput?: boolean;
+  isDeveloper?: boolean;
+  integrateSystem?: string;
+  apiUrl?: string;
+  onReportMsgEvent?: (msg: string, valid: boolean) => void;
+  onOpenChatPage?: (agentId?: number) => void;
+};
+
+const Copilot: ForwardRefRenderFunction<any, Props> = (
+  {
+    token,
+    agentIds,
+    noInput,
+    isDeveloper,
+    integrateSystem,
+    apiUrl,
+    onReportMsgEvent,
+    onOpenChatPage,
+  },
+  ref
+) => {
+  const [chatVisible, setChatVisible] = useState(false);
+  const [copilotMinimized, setCopilotMinimized] = useState(false);
+  const [currentAgent, setCurrentAgent] = useState<AgentType>();
+
+  const chatRef = useRef<any>();
+
+  useImperativeHandle(ref, () => ({
+    sendCopilotMsg,
+  }));
+
+  useEffect(() => {
+    if (token) {
+      setToken(token);
+    }
+  }, [token]);
+
+  useEffect(() => {
+    if (apiUrl) {
+      localStorage.setItem('SUPERSONIC_CHAT_API_URL', apiUrl);
+    }
+  }, [apiUrl]);
+
+  const sendCopilotMsg = (params: SendMsgParamsType) => {
+    chatRef?.current?.sendCopilotMsg(params);
+    updateChatVisible(true);
+  };
+
+  const updateChatVisible = (visible: boolean) => {
+    setChatVisible(visible);
+  };
+
+  const onToggleChatVisible = () => {
+    updateChatVisible(!chatVisible);
+  };
+
+  const onCloseChat = () => {
+    updateChatVisible(false);
+  };
+
+  const onTransferChat = () => {
+    onOpenChatPage?.(currentAgent?.id);
+  };
+
+  const onMinimizeCopilot = (e: any) => {
+    e.stopPropagation();
+    updateChatVisible(false);
+    setCopilotMinimized(true);
+  };
+
+  const copilotClass = classNames(styles.copilot, {
+    [styles.copilotMinimized]: copilotMinimized,
+  });
+
+  const chatPopoverClass = classNames(styles.chatPopover, {
+    [styles.c2System]: integrateSystem === 'c2',
+  });
+
+  return (
+    <>
+      <div
+        className={copilotClass}
+        onMouseEnter={() => {
+          setCopilotMinimized(false);
+        }}
+        onClick={onToggleChatVisible}
+      >
+        <IconFont type="icon-copilot-fill" />
+        <div className={styles.minimizeWrapper} onClick={onMinimizeCopilot}>
+          <div className={styles.minimize}>-</div>
+        </div>
+      </div>
+      <div className={styles.copilotContent} style={{ display: chatVisible ? 'block' : 'none' }}>
+        <div className={chatPopoverClass}>
+          <div className={styles.header}>
+            <div className={styles.leftSection}>
+              <CloseOutlined className={styles.close} onClick={onCloseChat} />
+              {onOpenChatPage && (
+                <IconFont
+                  type="icon-weibiaoti-"
+                  className={styles.transfer}
+                  onClick={onTransferChat}
+                />
+              )}
+            </div>
+            <div className={styles.title}>内容库问答</div>
+          </div>
+          <div className={styles.chat}>
+            <Chat
+              chatVisible={chatVisible}
+              agentIds={agentIds}
+              noInput={noInput}
+              isDeveloper={isDeveloper}
+              integrateSystem={integrateSystem}
+              isCopilot
+              onCurrentAgentChange={setCurrentAgent}
+              onReportMsgEvent={onReportMsgEvent}
+              ref={chatRef}
+            />
+          </div>
+        </div>
+        <CaretRightOutlined className={styles.rightArrow} />
+      </div>
+    </>
+  );
+};
+
+export default forwardRef(Copilot);
diff --git a/webapp/packages/supersonic-fe/src/pages/Copilot/style.less b/webapp/packages/chat-sdk/src/Copilot/style.module.less
similarity index 98%
rename from webapp/packages/supersonic-fe/src/pages/Copilot/style.less
rename to webapp/packages/chat-sdk/src/Copilot/style.module.less
index dcd6f264a..588f548db 100644
--- a/webapp/packages/supersonic-fe/src/pages/Copilot/style.less
+++ b/webapp/packages/chat-sdk/src/Copilot/style.module.less
@@ -25,24 +25,24 @@
   }
 
   .minimizeWrapper {
+    position: absolute;
+    top: -18px;
+    right: -6px;
     display: none;
-    cursor: pointer;
     width: 22px;
     height: 22px;
-    position: absolute;
-    right: -6px;
-    top: -18px;
     padding: 4px;
+    cursor: pointer;
 
     .minimize {
-      width: 100%;
-      height: 100%;
-      padding-bottom: 5px;
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 50%;
+      width: 100%;
+      height: 100%;
+      padding-bottom: 5px;
       background-color: var(--text-color-fifth-4);
+      border-radius: 50%;
       transition: all 0.1s ease-in-out;
     }
 
@@ -78,6 +78,10 @@
   transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out,
     -webkit-transform 0.3s ease-in-out;
 
+  &.c2System {
+    width: calc(100vw - 180px);
+  }
+
   .header {
     position: relative;
     z-index: 99;
diff --git a/webapp/packages/chat-sdk/src/common/type.ts b/webapp/packages/chat-sdk/src/common/type.ts
index 84c7c5b1f..bcf40d4fb 100644
--- a/webapp/packages/chat-sdk/src/common/type.ts
+++ b/webapp/packages/chat-sdk/src/common/type.ts
@@ -47,8 +47,8 @@ export type FilterItemType = {
   elementID: number;
   name: string;
   bizName: string;
-  operator: string;
-  type: string;
+  operator?: string;
+  type?: string;
   value: any;
 };
 
@@ -69,6 +69,12 @@ export type EntityDimensionType = {
   value: string;
 }
 
+export type SqlInfoType = {
+  llmParseSql: string;
+  logicSql: string;
+  querySql: string;
+}
+
 export type ChatContextType = {
   id: number;
   queryId: number;
@@ -86,6 +92,7 @@ export type ChatContextType = {
   queryMode: string;
   dimensionFilters: FilterItemType[];
   properties: any;
+  sqlInfo: SqlInfoType;
 };
 
 export enum MsgValidTypeEnum {
@@ -143,6 +150,7 @@ export type ParseDataType = {
   state: ParseStateEnum;
   selectedParses: ChatContextType[];
   candidateParses: ChatContextType[];
+  similarSolvedQuery: SimilarQuestionType[];
 }
 
 export type QueryDataType = {
@@ -173,7 +181,7 @@ export enum SemanticTypeEnum {
 };
 
 export const SEMANTIC_TYPE_MAP = {
-  [SemanticTypeEnum.DOMAIN]: '数据模型',
+  [SemanticTypeEnum.DOMAIN]: '数据来源',
   [SemanticTypeEnum.DIMENSION]: '维度',
   [SemanticTypeEnum.METRIC]: '指标',
   [SemanticTypeEnum.VALUE]: '维度值',
@@ -217,4 +225,17 @@ export type DrillDownDimensionType = {
   model: number;
   name: string;
   bizName: string;
-}
\ No newline at end of file
+}
+
+export type SendMsgParamsType = {
+  msg: string;
+  agentId: number;
+  modelId: number;
+  filters?: FilterItemType[];
+}
+
+export type SimilarQuestionType = {
+  // queryId: number;
+  // parseId: number;
+  queryText: string;
+}
diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/ExecuteItem.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/ExecuteItem.tsx
index 9851bbbf9..aa4e783da 100644
--- a/webapp/packages/chat-sdk/src/components/ChatItem/ExecuteItem.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/ExecuteItem.tsx
@@ -58,7 +58,7 @@ const ExecuteItem: React.FC<Props> = ({
     <>
       <div className={`${prefixCls}-title-bar`}>
         <CheckCircleFilled className={`${prefixCls}-step-icon`} />
-        <div className={`${prefixCls}-step-title`}>数据查询结果</div>
+        <div className={`${prefixCls}-step-title`}>数据查询</div>
       </div>
       <div className={`${prefixCls}-content-container ${prefixCls}-last-node`}>
         <Spin spinning={entitySwitchLoading}>
@@ -68,7 +68,12 @@ const ExecuteItem: React.FC<Props> = ({
           {data?.queryMode === 'WEB_PAGE' ? (
             <WebPage id={queryId!} data={data} />
           ) : (
-            <ChatMsg data={data} chartIndex={chartIndex} triggerResize={triggerResize} />
+            <ChatMsg
+              queryId={queryId}
+              data={data}
+              chartIndex={chartIndex}
+              triggerResize={triggerResize}
+            />
           )}
         </Spin>
       </div>
diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/FilterItem.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/FilterItem.tsx
index fb02f03f5..f2e5cca0f 100644
--- a/webapp/packages/chat-sdk/src/components/ChatItem/FilterItem.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/FilterItem.tsx
@@ -23,7 +23,7 @@ const FilterItem: React.FC<Props> = ({ modelId, filters, filter, onFiltersChange
   const initData = async () => {
     const { data } = await queryDimensionValues(modelId, filter.bizName, '');
     setOptions(
-      data?.data?.resultList.map((item: any) => ({
+      data?.resultList.map((item: any) => ({
         label: item[filter.bizName],
         value: item[filter.bizName],
       })) || []
@@ -47,9 +47,8 @@ const FilterItem: React.FC<Props> = ({ modelId, filters, filter, onFiltersChange
         if (fetchId !== fetchRef.current) {
           return;
         }
-
         setOptions(
-          newOptions.data?.data?.resultList.map((item: any) => ({
+          newOptions.data?.resultList.map((item: any) => ({
             label: item[filter.bizName],
             value: item[filter.bizName],
           })) || []
@@ -76,7 +75,8 @@ const FilterItem: React.FC<Props> = ({ modelId, filters, filter, onFiltersChange
 
   return (
     <span className={prefixCls}>
-      {typeof filter.value === 'string' || isArray(filter.value) ? (
+      {(typeof filter.value === 'string' || isArray(filter.value)) &&
+      (filter.operator === '=' || filter.operator === 'IN') ? (
         <Select
           bordered={false}
           value={filter.value}
diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx
index c7ff53137..7c5192561 100644
--- a/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { AGG_TYPE_MAP, PREFIX_CLS } from '../../common/constants';
 import { ChatContextType, FilterItemType } from '../../common/type';
-import { CheckCircleFilled, InfoCircleOutlined } from '@ant-design/icons';
+import { CheckCircleFilled } from '@ant-design/icons';
 import classNames from 'classnames';
 import SwicthEntity from './SwitchEntity';
 import Loading from './Loading';
@@ -30,7 +30,7 @@ const ParseTip: React.FC<Props> = ({
 }) => {
   const prefixCls = `${PREFIX_CLS}-item`;
 
-  const getNode = (tipTitle: string, tipNode?: ReactNode, parseSucceed?: boolean) => {
+  const getNode = (tipTitle: ReactNode, tipNode?: ReactNode, parseSucceed?: boolean) => {
     const contentContainerClass = classNames(`${prefixCls}-content-container`, {
       [`${prefixCls}-content-container-succeed`]: parseSucceed,
     });
@@ -62,7 +62,6 @@ const ParseTip: React.FC<Props> = ({
 
   const getTipNode = (parseInfo: ChatContextType, isOptions?: boolean, index?: number) => {
     const {
-      modelId,
       modelName,
       dateInfo,
       dimensionFilters,
@@ -76,8 +75,6 @@ const ParseTip: React.FC<Props> = ({
       nativeQuery,
     } = parseInfo || {};
 
-    const maxOptionCount = queryMode === 'DSL' ? 10 : MAX_OPTION_VALUES_COUNT;
-
     const { startDate, endDate } = dateInfo || {};
     const dimensionItems = dimensions?.filter(item => item.type === 'DIMENSION');
     const metric = metrics?.[0];
@@ -92,44 +89,6 @@ const ParseTip: React.FC<Props> = ({
     const fields =
       queryMode === 'ENTITY_DETAIL' ? dimensionItems?.concat(metrics || []) : dimensionItems;
 
-    const getFilterContent = (filters: any) => {
-      return (
-        <div className={`${prefixCls}-tip-item-filter-content`}>
-          {filters.map((filter: any) => (
-            <div className={`${prefixCls}-tip-item-option`}>
-              <span>
-                <span className={`${prefixCls}-tip-item-filter-name`}>{filter.name}</span>
-                {filter.operator !== '=' && filter.operator !== 'IN'
-                  ? ` ${filter.operator} `
-                  : '：'}
-              </span>
-              {queryMode !== 'DSL' && !filter.bizName?.includes('_id') ? (
-                <FilterItem
-                  modelId={modelId}
-                  filters={dimensionFilters}
-                  filter={filter}
-                  onFiltersChange={onFiltersChange}
-                />
-              ) : (
-                <span className={itemValueClass}>{filter.value}</span>
-              )}
-            </div>
-          ))}
-        </div>
-      );
-    };
-
-    const getFiltersNode = () => {
-      return (
-        <div className={`${prefixCls}-tip-item`}>
-          <div className={`${prefixCls}-tip-item-name`}>筛选条件：</div>
-          <div className={`${prefixCls}-tip-item-content`}>
-            {getFilterContent(dimensionFilters)}
-          </div>
-        </div>
-      );
-    };
-
     return (
       <div
         className={`${prefixCls}-tip-content`}
@@ -147,7 +106,7 @@ const ParseTip: React.FC<Props> = ({
           </div>
         ) : (
           <>
-            {(queryMode.includes('ENTITY') || queryMode === 'DSL') &&
+            {(queryMode?.includes('ENTITY') || queryMode === 'DSL') &&
             typeof entityId === 'string' &&
             !!entityAlias &&
             !!entityName ? (
@@ -165,11 +124,11 @@ const ParseTip: React.FC<Props> = ({
               </div>
             ) : (
               <div className={`${prefixCls}-tip-item`}>
-                <div className={`${prefixCls}-tip-item-name`}>数据模型：</div>
+                <div className={`${prefixCls}-tip-item-name`}>数据来源：</div>
                 <div className={itemValueClass}>{modelName}</div>
               </div>
             )}
-            {!queryMode.includes('ENTITY') && metric && (
+            {!queryMode?.includes('ENTITY') && metric && (
               <div className={`${prefixCls}-tip-item`}>
                 <div className={`${prefixCls}-tip-item-name`}>指标：</div>
                 <div className={itemValueClass}>{metric.name}</div>
@@ -199,24 +158,21 @@ const ParseTip: React.FC<Props> = ({
                   </div>
                   <div className={itemValueClass}>
                     {fields
-                      .slice(0, maxOptionCount)
+                      .slice(0, MAX_OPTION_VALUES_COUNT)
                       .map(field => field.name)
                       .join('、')}
-                    {fields.length > maxOptionCount && '...'}
+                    {fields.length > MAX_OPTION_VALUES_COUNT && '...'}
                   </div>
                 </div>
               )}
-            {[
-              'METRIC_FILTER',
-              'METRIC_ENTITY',
-              'ENTITY_DETAIL',
-              'ENTITY_LIST_FILTER',
-              'ENTITY_ID',
-              'DSL',
-            ].includes(queryMode) &&
-              dimensionFilters &&
-              dimensionFilters?.length > 0 &&
-              getFiltersNode()}
+            {queryMode !== 'ENTITY_ID' &&
+              entityDimensions?.length > 0 &&
+              entityDimensions.map(dimension => (
+                <div className={`${prefixCls}-tip-item`} key={dimension.itemId}>
+                  <div className={`${prefixCls}-tip-item-name`}>{dimension.name}：</div>
+                  <div className={itemValueClass}>{dimension.value}</div>
+                </div>
+              ))}
             {queryMode === 'METRIC_ORDERBY' && aggType && aggType !== 'NONE' && (
               <div className={`${prefixCls}-tip-item`}>
                 <div className={`${prefixCls}-tip-item-name`}>聚合方式：</div>
@@ -230,7 +186,8 @@ const ParseTip: React.FC<Props> = ({
   };
 
   const parseInfo = parseInfoOptions[0] || {};
-  const { properties, entity, entityInfo, elementMatches, queryMode } = parseInfo || {};
+  const { modelId, properties, entity, entityInfo, elementMatches, queryMode, dimensionFilters } =
+    parseInfo || {};
 
   const { type } = properties || {};
   const entityAlias = entity?.alias?.[0]?.split('.')?.[0];
@@ -249,31 +206,71 @@ const ParseTip: React.FC<Props> = ({
       )
   );
 
+  const getFilterContent = (filters: any) => {
+    const itemValueClass = `${prefixCls}-tip-item-value`;
+    return (
+      <div className={`${prefixCls}-tip-item-filter-content`}>
+        {filters.map((filter: any) => (
+          <div className={`${prefixCls}-tip-item-option`} key={filter.name}>
+            <span>
+              <span className={`${prefixCls}-tip-item-filter-name`}>{filter.name}</span>
+              {filter.operator !== '=' && filter.operator !== 'IN' ? ` ${filter.operator} ` : '：'}
+            </span>
+            {/* {queryMode !== 'DSL' && !filter.bizName?.includes('_id') ? ( */}
+            {!filter.bizName?.includes('_id') ? (
+              <FilterItem
+                modelId={modelId}
+                filters={dimensionFilters}
+                filter={filter}
+                onFiltersChange={onFiltersChange}
+              />
+            ) : (
+              <span className={itemValueClass}>{filter.value}</span>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const getFiltersNode = () => {
+    return (
+      <div className={`${prefixCls}-tip-item`}>
+        <div className={`${prefixCls}-tip-item-name`}>筛选条件：</div>
+        <div className={`${prefixCls}-tip-item-content`}>{getFilterContent(dimensionFilters)}</div>
+      </div>
+    );
+  };
+
   const tipNode = (
     <div className={`${prefixCls}-tip`}>
       {getTipNode(parseInfo)}
-      {queryMode !== 'ENTITY_ID' && entityDimensions?.length > 0 && (
-        <div className={`${prefixCls}-entity-info`}>
-          {entityDimensions.map(dimension => (
-            <div className={`${prefixCls}-dimension-item`} key={dimension.itemId}>
-              <div className={`${prefixCls}-dimension-name`}>{dimension.name}：</div>
-              <div className={`${prefixCls}-dimension-value`}>{dimension.value}</div>
-            </div>
-          ))}
-        </div>
-      )}
-      {(!type || queryMode === 'DSL') && entityAlias && entityName && (
-        <div className={`${prefixCls}-switch-entity-tip`}>
-          <InfoCircleOutlined />
-          <div>
-            如果未匹配到您查询的{entityAlias}，可点击上面的{entityAlias}名切换
-          </div>
-        </div>
-      )}
+      {[
+        'METRIC_FILTER',
+        'METRIC_ENTITY',
+        'ENTITY_DETAIL',
+        'ENTITY_LIST_FILTER',
+        'ENTITY_ID',
+        'DSL',
+      ].includes(queryMode) &&
+        dimensionFilters &&
+        dimensionFilters?.length > 0 &&
+        getFiltersNode()}
     </div>
   );
 
-  return getNode('意图解析结果', tipNode, true);
+  return getNode(
+    <div className={`${prefixCls}-title-bar`}>
+      意图解析
+      {(!type || queryMode === 'DSL') && entityAlias && entityAlias !== '厂牌' && entityName && (
+        <div className={`${prefixCls}-switch-entity-tip`}>
+          (如果未匹配到您查询的{entityAlias}，可点击{entityAlias}名切换)
+        </div>
+      )}
+    </div>,
+    tipNode,
+    true
+  );
 };
 
 export default ParseTip;
diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/SimilarQuestionItem.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/SimilarQuestionItem.tsx
new file mode 100644
index 000000000..cecd7de56
--- /dev/null
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/SimilarQuestionItem.tsx
@@ -0,0 +1,60 @@
+import { CheckCircleFilled, DownOutlined, UpOutlined } from '@ant-design/icons';
+import { PREFIX_CLS } from '../../common/constants';
+import { SimilarQuestionType } from '../../common/type';
+import { useState } from 'react';
+
+type Props = {
+  similarQuestions: SimilarQuestionType[];
+  defaultExpanded?: boolean;
+  onSelectQuestion: (question: SimilarQuestionType) => void;
+};
+
+const SimilarQuestions: React.FC<Props> = ({
+  similarQuestions,
+  defaultExpanded,
+  onSelectQuestion,
+}) => {
+  const [expanded, setExpanded] = useState(defaultExpanded || false);
+
+  const tipPrefixCls = `${PREFIX_CLS}-item`;
+  const prefixCls = `${PREFIX_CLS}-similar-questions`;
+
+  const onToggleExpanded = () => {
+    setExpanded(!expanded);
+  };
+
+  return (
+    <div className={`${tipPrefixCls}-parse-tip`}>
+      <div className={`${tipPrefixCls}-title-bar`}>
+        <CheckCircleFilled className={`${tipPrefixCls}-step-icon`} />
+        <div className={`${tipPrefixCls}-step-title`}>
+          推荐相似问题
+          <span className={`${prefixCls}-toggle-expand-btn`} onClick={onToggleExpanded}>
+            {expanded ? <UpOutlined /> : <DownOutlined />}
+          </span>
+        </div>
+      </div>
+      <div className={prefixCls}>
+        {expanded && (
+          <div className={`${prefixCls}-content`}>
+            {similarQuestions.slice(0, 5).map((question, index) => {
+              return (
+                <div
+                  className={`${prefixCls}-question`}
+                  key={question.queryText}
+                  onClick={() => {
+                    onSelectQuestion(question);
+                  }}
+                >
+                  {index + 1}. {question.queryText}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SimilarQuestions;
diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx
new file mode 100644
index 000000000..09e1df09e
--- /dev/null
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx
@@ -0,0 +1,116 @@
+import React, { useState } from 'react';
+import { format } from 'sql-formatter';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { solarizedlight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { message } from 'antd';
+import { PREFIX_CLS } from '../../common/constants';
+import { CheckCircleFilled, UpOutlined } from '@ant-design/icons';
+import { SqlInfoType } from '../../common/type';
+
+type Props = {
+  integrateSystem?: string;
+  sqlInfo: SqlInfoType;
+};
+
+const SqlItem: React.FC<Props> = ({ integrateSystem, sqlInfo }) => {
+  const [sqlType, setSqlType] = useState('');
+
+  const tipPrefixCls = `${PREFIX_CLS}-item`;
+  const prefixCls = `${PREFIX_CLS}-sql-item`;
+
+  const handleCopy = (text, result) => {
+    result ? message.success('复制SQL成功', 1) : message.error('复制SQL失败', 1);
+  };
+
+  const onCollapse = () => {
+    setSqlType('');
+  };
+
+  if (!sqlInfo.llmParseSql && !sqlInfo.logicSql && !sqlInfo.querySql) {
+    return null;
+  }
+
+  return (
+    <div className={`${tipPrefixCls}-parse-tip`}>
+      <div className={`${tipPrefixCls}-title-bar`}>
+        <CheckCircleFilled className={`${tipPrefixCls}-step-icon`} />
+        <div className={`${tipPrefixCls}-step-title`}>
+          SQL生成
+          {sqlType && (
+            <span className={`${prefixCls}-toggle-expand-btn`} onClick={onCollapse}>
+              <UpOutlined />
+            </span>
+          )}
+        </div>
+        <div className={`${prefixCls}-sql-options`}>
+          {sqlInfo.llmParseSql && (
+            <div
+              className={`${prefixCls}-sql-option ${
+                sqlType === 'llmParseSql' ? `${prefixCls}-sql-option-active` : ''
+              }`}
+              onClick={() => {
+                setSqlType(sqlType === 'llmParseSql' ? '' : 'llmParseSql');
+              }}
+            >
+              LLM解析SQL
+            </div>
+          )}
+          {sqlInfo.logicSql && (
+            <div
+              className={`${prefixCls}-sql-option ${
+                sqlType === 'logicSql' ? `${prefixCls}-sql-option-active` : ''
+              }`}
+              onClick={() => {
+                setSqlType(sqlType === 'logicSql' ? '' : 'logicSql');
+              }}
+            >
+              逻辑SQL
+            </div>
+          )}
+          {sqlInfo.querySql && (
+            <div
+              className={`${prefixCls}-sql-option ${
+                sqlType === 'querySql' ? `${prefixCls}-sql-option-active` : ''
+              }`}
+              onClick={() => {
+                setSqlType(sqlType === 'querySql' ? '' : 'querySql');
+              }}
+            >
+              物理SQL
+            </div>
+          )}
+        </div>
+      </div>
+      <div
+        className={`${prefixCls} ${
+          !window.location.pathname.includes('/chat') &&
+          integrateSystem &&
+          integrateSystem !== 'wiki'
+            ? `${prefixCls}-copilot`
+            : ''
+        }`}
+      >
+        {sqlType && (
+          <>
+            <SyntaxHighlighter
+              className={`${prefixCls}-code`}
+              language="sql"
+              style={solarizedlight}
+            >
+              {format(sqlInfo[sqlType])}
+            </SyntaxHighlighter>
+            <CopyToClipboard
+              text={format(sqlInfo[sqlType])}
+              onCopy={(text, result) => handleCopy(text, result)}
+            >
+              <button className={`${prefixCls}-copy-btn`}>复制代码</button>
+            </CopyToClipboard>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SqlItem;
diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx
index 254bff4d4..b8a7c59ec 100644
--- a/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx
@@ -1,4 +1,10 @@
-import { ChatContextType, FilterItemType, MsgDataType, ParseStateEnum } from '../../common/type';
+import {
+  ChatContextType,
+  FilterItemType,
+  MsgDataType,
+  ParseStateEnum,
+  SimilarQuestionType,
+} from '../../common/type';
 import { useEffect, useState } from 'react';
 import { chatExecute, chatParse, queryData, switchEntity } from '../../service';
 import { PARSE_ERROR_TIP, PREFIX_CLS, SEARCH_EXCEPTION_TIP } from '../../common/constants';
@@ -8,6 +14,8 @@ import ExecuteItem from './ExecuteItem';
 import { isMobile } from '../../utils/utils';
 import classNames from 'classnames';
 import Tools from '../Tools';
+import SqlItem from './SqlItem';
+import SimilarQuestionItem from './SimilarQuestionItem';
 
 type Props = {
   msg: string;
@@ -17,11 +25,13 @@ type Props = {
   filter?: any[];
   isLastMessage?: boolean;
   msgData?: MsgDataType;
-  isHistory?: boolean;
   triggerResize?: boolean;
   parseOptions?: ChatContextType[];
+  isDeveloper?: boolean;
+  integrateSystem?: string;
   onMsgDataLoaded?: (data: MsgDataType, valid: boolean) => void;
   onUpdateMessageScroll?: () => void;
+  onSendMsg?: (msg: string) => void;
 };
 
 const ChatItem: React.FC<Props> = ({
@@ -31,12 +41,14 @@ const ChatItem: React.FC<Props> = ({
   agentId,
   filter,
   isLastMessage,
-  isHistory,
   triggerResize,
   msgData,
   parseOptions,
+  isDeveloper,
+  integrateSystem,
   onMsgDataLoaded,
   onUpdateMessageScroll,
+  onSendMsg,
 }) => {
   const [data, setData] = useState<MsgDataType>();
   const [parseLoading, setParseLoading] = useState(false);
@@ -47,6 +59,7 @@ const ChatItem: React.FC<Props> = ({
   const [executeTip, setExecuteTip] = useState('');
   const [executeMode, setExecuteMode] = useState(false);
   const [entitySwitchLoading, setEntitySwitchLoading] = useState(false);
+  const [similarQuestions, setSimilarQuestions] = useState<SimilarQuestionType[]>([]);
 
   const [chartIndex, setChartIndex] = useState(0);
 
@@ -79,13 +92,13 @@ const ChatItem: React.FC<Props> = ({
     setExecuteMode(true);
     setExecuteLoading(true);
     try {
-      const { data } = await chatExecute(msg, conversationId!, parseInfoValue);
+      const res: any = await chatExecute(msg, conversationId!, parseInfoValue);
       setExecuteLoading(false);
-      const valid = updateData(data);
+      const valid = updateData(res);
       if (onMsgDataLoaded) {
         onMsgDataLoaded(
           {
-            ...data.data,
+            ...res.data,
             chatContext: parseInfoValue,
           },
           valid
@@ -97,12 +110,13 @@ const ChatItem: React.FC<Props> = ({
     }
   };
 
-  const onSendMsg = async () => {
+  const sendMsg = async () => {
     setParseLoading(true);
-    const { data: parseData } = await chatParse(msg, conversationId, modelId, agentId, filter);
+    const parseData: any = await chatParse(msg, conversationId, modelId, agentId, filter);
     setParseLoading(false);
     const { code, data } = parseData || {};
-    const { state, selectedParses, queryId } = data || {};
+    const { state, selectedParses, queryId, similarSolvedQuery } = data || {};
+    setSimilarQuestions(similarSolvedQuery || []);
     if (
       code !== 200 ||
       state === ParseStateEnum.FAILED ||
@@ -115,7 +129,7 @@ const ChatItem: React.FC<Props> = ({
     if (onUpdateMessageScroll) {
       onUpdateMessageScroll();
     }
-    const parseInfos = selectedParses.map(item => ({
+    const parseInfos = selectedParses.map((item: any) => ({
       ...item,
       queryId,
     }));
@@ -126,15 +140,17 @@ const ChatItem: React.FC<Props> = ({
   };
 
   useEffect(() => {
-    if (data !== undefined || parseOptions !== undefined || executeTip !== '') {
+    if (data !== undefined || parseOptions !== undefined || executeTip !== '' || parseLoading) {
       return;
     }
     if (msgData) {
-      setParseInfoOptions([msgData.chatContext]);
+      const parseInfoValue = { ...msgData.chatContext, queryId: msgData.queryId };
+      setParseInfoOptions([parseInfoValue]);
+      setParseInfo(parseInfoValue);
       setExecuteMode(true);
       updateData({ code: 200, data: msgData, msg: 'success' });
     } else if (msg) {
-      onSendMsg();
+      sendMsg();
     }
   }, [msg, msgData]);
 
@@ -142,19 +158,27 @@ const ChatItem: React.FC<Props> = ({
     setEntitySwitchLoading(true);
     const res = await switchEntity(entityId, data?.chatContext?.modelId, conversationId || 0);
     setEntitySwitchLoading(false);
-    setData(res.data.data);
-    const { chatContext } = res.data.data;
+    setData(res.data);
+    const { chatContext } = res.data;
     setParseInfo(chatContext);
     setParseInfoOptions([chatContext]);
   };
 
   const onFiltersChange = async (dimensionFilters: FilterItemType[]) => {
     setEntitySwitchLoading(true);
-    const chatContextValue = { ...(parseInfoOptions[0] || {}), dimensionFilters };
+    const { dimensions, metrics, dateInfo, id, queryId } = parseInfoOptions[0] || {};
+    const chatContextValue = {
+      dimensions,
+      metrics,
+      dateInfo,
+      dimensionFilters,
+      parseId: id,
+      queryId,
+    };
     const res: any = await queryData(chatContextValue);
     setEntitySwitchLoading(false);
-    const resChatContext = res.data?.data?.chatContext;
-    setData({ ...(res.data?.data || {}), chatContext: resChatContext || chatContextValue });
+    const resChatContext = res.data?.chatContext;
+    setData({ ...(res.data || {}), chatContext: resChatContext || chatContextValue });
     setParseInfo(resChatContext || chatContextValue);
     setParseInfoOptions([resChatContext || chatContextValue]);
   };
@@ -167,6 +191,10 @@ const ChatItem: React.FC<Props> = ({
     }
   };
 
+  const onSelectQuestion = (question: SimilarQuestionType) => {
+    onSendMsg?.(question.queryText);
+  };
+
   const contentClass = classNames(`${prefixCls}-content`, {
     [`${prefixCls}-content-mobile`]: isMobile,
   });
@@ -189,17 +217,36 @@ const ChatItem: React.FC<Props> = ({
             onSwitchEntity={onSwitchEntity}
             onFiltersChange={onFiltersChange}
           />
-          {executeMode && (
-            <ExecuteItem
-              queryId={parseInfo?.queryId}
-              executeLoading={executeLoading}
-              entitySwitchLoading={entitySwitchLoading}
-              executeTip={executeTip}
-              chartIndex={chartIndex}
-              data={data}
-              triggerResize={triggerResize}
+          {parseTip && similarQuestions.length > 0 && (
+            <SimilarQuestionItem
+              similarQuestions={similarQuestions}
+              defaultExpanded
+              onSelectQuestion={onSelectQuestion}
             />
           )}
+          {executeMode && (
+            <>
+              {parseInfoOptions?.[0]?.sqlInfo && isDeveloper && integrateSystem !== 'c2' && (
+                <SqlItem integrateSystem={integrateSystem} sqlInfo={parseInfoOptions[0].sqlInfo} />
+              )}
+              {similarQuestions.length > 0 && (
+                <SimilarQuestionItem
+                  similarQuestions={similarQuestions}
+                  defaultExpanded={executeTip !== ''}
+                  onSelectQuestion={onSelectQuestion}
+                />
+              )}
+              <ExecuteItem
+                queryId={parseInfo?.queryId}
+                executeLoading={executeLoading}
+                entitySwitchLoading={entitySwitchLoading}
+                executeTip={executeTip}
+                chartIndex={chartIndex}
+                data={data}
+                triggerResize={triggerResize}
+              />
+            </>
+          )}
         </div>
         {!isMetricCard && data && (
           <Tools data={data} scoreValue={undefined} isLastMessage={isLastMessage} />
diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/style.less b/webapp/packages/chat-sdk/src/components/ChatItem/style.less
index 9051b7805..375cd5157 100644
--- a/webapp/packages/chat-sdk/src/components/ChatItem/style.less
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/style.less
@@ -2,6 +2,8 @@
 
 @chat-item-prefix-cls: ~'@{supersonic-chat-prefix}-item';
 @filter-item-prefix-cls: ~'@{supersonic-chat-prefix}-filter-item';
+@sql-item-prefix-cls: ~'@{supersonic-chat-prefix}-sql-item';
+@similar-questions-prefix-cls: ~'@{supersonic-chat-prefix}-similar-questions';
 
 .@{chat-item-prefix-cls} {
   display: flex;
@@ -17,7 +19,6 @@
     display: inline-block;
     width: 4px;
     height: 4px;
-    // border-radius: 50%;
     background-color: var(--text-color);
     margin: 0 2px;
     opacity: 0;
@@ -124,8 +125,7 @@
     display: flex;
     align-items: center;
     column-gap: 6px;
-    margin-top: 4px;
-    color: var(--text-color-third);
+    color: var(--text-color-fourth);
     font-size: 13px;
   }
 
@@ -169,7 +169,7 @@
   &-tip {
     display: flex;
     flex-direction: column;
-    row-gap: 6px;
+    row-gap: 10px;
     flex-wrap: wrap;
     color: var(--text-color-third);
   }
@@ -178,7 +178,7 @@
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    row-gap: 6px;
+    row-gap: 10px;
     column-gap: 12px;
     color: var(--text-color-third);
   }
@@ -251,7 +251,6 @@
     flex-wrap: wrap;
     row-gap: 6px;
     column-gap: 12px;
-    margin-top: 4px;
     color: var(--text-color-third);
     font-size: 14px;
   }
@@ -325,4 +324,93 @@
     color: var(--chat-blue);
     font-weight: 500;
   }
-}
\ No newline at end of file
+}
+
+.@{sql-item-prefix-cls} {
+  position: relative;
+  margin: 2px 0 2px 7px;
+  padding: 2px 0 8px 18px;
+  border-left: 1px solid var(--green);
+  overflow: auto;
+
+  &-toggle-expand-btn {
+    margin-left: 4px;
+    color: var(--text-color-fourth);
+    font-size: 12px;
+    cursor: pointer;
+  }
+
+  &-sql-options {
+    margin-left: 4px;
+    display: flex;
+    align-items: center;
+    column-gap: 13px;
+    color: var(--text-color-third);
+  }
+
+  &-sql-option {
+    border-radius: 4px;
+    padding: 1px 4px;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--chat-blue);
+    }
+  }
+
+  &-sql-option-active {
+    color: #fff !important;
+    background-color: var(--chat-blue);
+  }
+  
+  &-code {
+    margin-top: 10px !important;
+    padding: 6px 14px 8px !important;
+    border: 1px solid var(--border-color-base) !important;
+    border-radius: 4px !important;
+    background: #f5f8fb !important;
+  }
+  
+  &-copy-btn {
+    position: absolute;
+    top: 30px;
+    right: 20px;
+    background: transparent !important;
+    border: 0 !important;
+    color: var(--chat-blue);
+    cursor: pointer;
+  }
+}
+
+.@{sql-item-prefix-cls}-copilot {
+  width: 700px;
+}
+
+.@{similar-questions-prefix-cls} {
+  position: relative;
+  margin: 2px 0 2px 7px;
+  padding: 2px 0 8px 18px;
+  border-left: 1px solid var(--green);
+  overflow: auto;
+
+  &-toggle-expand-btn {
+    margin-left: 4px;
+    color: var(--text-color-fourth);
+    font-size: 12px;
+    cursor: pointer;
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    row-gap: 12px;
+    margin-top: 6px;
+    margin-bottom: 2px;
+  }
+
+  &-question {
+    width: fit-content;
+    color: var(--chat-blue);
+    cursor: pointer;
+  }
+}
diff --git a/webapp/packages/chat-sdk/src/components/ChatMsg/Message/index.tsx b/webapp/packages/chat-sdk/src/components/ChatMsg/Message/index.tsx
index bfaeb7116..67a04c9bd 100644
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/Message/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/Message/index.tsx
@@ -68,7 +68,7 @@ const Message: React.FC<Props> = ({
               <div className={`${prefixCls}-info-bar`}>
                 <div className={`${prefixCls}-main-entity-info`}>
                   <div className={`${prefixCls}-info-item`}>
-                    <div className={`${prefixCls}-info-name`}>数据模型：</div>
+                    <div className={`${prefixCls}-info-name`}>数据来源：</div>
                     <div className={`${prefixCls}-info-value`}>{modelName}</div>
                   </div>
                   <div className={`${prefixCls}-info-item`}>
diff --git a/webapp/packages/chat-sdk/src/components/ChatMsg/Text/index.tsx b/webapp/packages/chat-sdk/src/components/ChatMsg/Text/index.tsx
index bd3f184b6..991a4de6e 100644
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/Text/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/Text/index.tsx
@@ -19,33 +19,7 @@ const Text: React.FC<Props> = ({ columns, referenceColumn, dataSource }) => {
 
   const initData = () => {
     let textValue = dataSource[0][columns[0].nameEn];
-    let htmlCodeValue: string;
-    const match = textValue.match(/```html([\s\S]*?)```/);
-    htmlCodeValue = match && match[1].trim();
-    if (htmlCodeValue) {
-      textValue = textValue.replace(/```html([\s\S]*?)```/, '');
-    }
-    let scriptCode: string;
-    let scriptSrc: string;
-    if (htmlCodeValue) {
-      scriptSrc = htmlCodeValue.match(/<script src="([\s\S]*?)"><\/script>/)?.[1] || '';
-      scriptCode =
-        htmlCodeValue.match(/<script type="text\/javascript">([\s\S]*?)<\/script>/)?.[1] || '';
-      if (scriptSrc) {
-        const script = document.createElement('script');
-        script.src = scriptSrc;
-        document.body.appendChild(script);
-      }
-      if (scriptCode) {
-        const script = document.createElement('script');
-        script.innerHTML = scriptCode;
-        setTimeout(() => {
-          document.body.appendChild(script);
-        }, 1500);
-      }
-    }
-    setText(textValue);
-    setHtmlCode(htmlCodeValue);
+    setText(textValue === undefined ? '暂无数据，如有疑问请联系管理员' : textValue);
     if (referenceColumn) {
       const referenceDataValue = dataSource[0][referenceColumn.nameEn];
       setReferenceData(referenceDataValue || []);
diff --git a/webapp/packages/chat-sdk/src/components/ChatMsg/WebPage/index.tsx b/webapp/packages/chat-sdk/src/components/ChatMsg/WebPage/index.tsx
index b53563733..d8c69feb7 100644
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/WebPage/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/WebPage/index.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { CLS_PREFIX } from '../../../common/constants';
 import { MsgDataType } from '../../../common/type';
-import { isProd } from '../../../utils/utils';
+import { getToken, isProd } from '../../../utils/utils';
 
 type Props = {
   id: string | number;
@@ -89,10 +89,8 @@ const WebPage: React.FC<Props> = ({ id, data }) => {
       );
       urlValue = urlValue.replace(
         '?',
-        `?miniProgram=true&reportName=${name}&filterData=${filterData}&`
+        `?token=${getToken()}&miniProgram=true&reportName=${name}&filterData=${filterData}&`
       );
-      urlValue =
-        !isProd() && !urlValue.includes('http') ? `http://s2.tmeoa.com${urlValue}` : urlValue;
     } else {
       const params = Object.keys(valueParams || {}).map(key => `${key}=${valueParams[key]}`);
       if (params.length > 0) {
@@ -103,7 +101,6 @@ const WebPage: React.FC<Props> = ({ id, data }) => {
         }
       }
     }
-    // onReportLoaded(heightValue + 190);
     setPluginUrl(urlValue);
   };
 
@@ -112,7 +109,6 @@ const WebPage: React.FC<Props> = ({ id, data }) => {
   }, []);
 
   return (
-    // <div className={prefixCls} style={{ height }}>
     <iframe
       id={`reportIframe_${id}`}
       name={`reportIframe_${id}`}
@@ -121,7 +117,6 @@ const WebPage: React.FC<Props> = ({ id, data }) => {
       title="reportIframe"
       allowFullScreen
     />
-    // </div>
   );
 };
 
diff --git a/webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx b/webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx
index 17d768f14..db08ec0e1 100644
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx
@@ -12,12 +12,13 @@ import DrillDownDimensions from '../DrillDownDimensions';
 import MetricOptions from '../MetricOptions';
 
 type Props = {
+  queryId?: number;
   data: MsgDataType;
   chartIndex: number;
   triggerResize?: boolean;
 };
 
-const ChatMsg: React.FC<Props> = ({ data, chartIndex, triggerResize }) => {
+const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize }) => {
   const { queryColumns, queryResults, chatContext, queryMode } = data || {};
   const { dimensionFilters, elementMatches } = chatContext || {};
 
@@ -127,14 +128,16 @@ const ChatMsg: React.FC<Props> = ({ data, chartIndex, triggerResize }) => {
 
   const onLoadData = async (value: any) => {
     setLoading(true);
-    const { data } = await queryData({
-      ...chatContext,
+    const res: any = await queryData({
+      // ...chatContext,
+      queryId,
+      parseId: chatContext.id,
       ...value,
     });
     setLoading(false);
-    if (data.code === 200) {
-      updateColummns(data.data?.queryColumns || []);
-      setDataSource(data.data?.queryResults || []);
+    if (res.code === 200) {
+      updateColummns(res.data?.queryColumns || []);
+      setDataSource(res.data?.queryResults || []);
     }
   };
 
diff --git a/webapp/packages/chat-sdk/src/components/DrillDownDimensions/index.tsx b/webapp/packages/chat-sdk/src/components/DrillDownDimensions/index.tsx
index 7a8539ff5..5441f4130 100644
--- a/webapp/packages/chat-sdk/src/components/DrillDownDimensions/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/DrillDownDimensions/index.tsx
@@ -34,7 +34,7 @@ const DrillDownDimensions: React.FC<Props> = ({
   const initData = async () => {
     const res = await queryDrillDownDimensions(modelId);
     setDimensions(
-      res.data.data.dimensions
+      res.data.dimensions
         .filter(
           dimension =>
             !dimensionFilters?.some(filter => filter.name === dimension.name) &&
diff --git a/webapp/packages/chat-sdk/src/components/IconFont/index.tsx b/webapp/packages/chat-sdk/src/components/IconFont/index.tsx
index 1890dd48b..97fc9e303 100644
--- a/webapp/packages/chat-sdk/src/components/IconFont/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/IconFont/index.tsx
@@ -1,7 +1,7 @@
 import { createFromIconfontCN } from '@ant-design/icons';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4120566_x5c4www9bqm.js',
+  scriptUrl: '//at.alicdn.com/t/c/font_4120566_46xw04fpzii.js',
 });
 
 export default IconFont;
diff --git a/webapp/packages/chat-sdk/src/components/RecommendOptions/index.tsx b/webapp/packages/chat-sdk/src/components/RecommendOptions/index.tsx
index d54bd0903..440236ddd 100644
--- a/webapp/packages/chat-sdk/src/components/RecommendOptions/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/RecommendOptions/index.tsx
@@ -25,7 +25,7 @@ const RecommendOptions: React.FC<Props> = ({ entityId, modelId, modelName, onSel
     setLoading(true);
     const res = await queryEntities(entityId, modelId);
     setLoading(false);
-    setData(res.data.data);
+    setData(res.data);
   };
 
   useEffect(() => {
diff --git a/webapp/packages/chat-sdk/src/demo/ChatDemo.tsx b/webapp/packages/chat-sdk/src/demo/ChatDemo.tsx
new file mode 100644
index 000000000..e52da4475
--- /dev/null
+++ b/webapp/packages/chat-sdk/src/demo/ChatDemo.tsx
@@ -0,0 +1,14 @@
+import Chat from '../Chat';
+import styles from './style.module.less';
+
+type Props = {};
+
+const ChatDemo: React.FC<Props> = ({}) => {
+  return (
+    <div className={styles.chatDemo}>
+      <Chat isDeveloper />
+    </div>
+  );
+};
+
+export default ChatDemo;
diff --git a/webapp/packages/chat-sdk/src/demo/CopilotDemo.tsx b/webapp/packages/chat-sdk/src/demo/CopilotDemo.tsx
new file mode 100644
index 000000000..c2fcb7b01
--- /dev/null
+++ b/webapp/packages/chat-sdk/src/demo/CopilotDemo.tsx
@@ -0,0 +1,50 @@
+import { Button, Space } from 'antd';
+import styles from './style.module.less';
+import Copilot from '../Copilot';
+import { useRef } from 'react';
+
+const buttonParams = [
+  {
+    msg: '周杰伦 艺人趋势解读',
+    agentId: 8,
+    modelId: 23,
+    filters: [{ bizName: 'singer_id', elementID: 283, value: 4558 }],
+  },
+  {
+    msg: '林俊杰 艺人趋势解读',
+    agentId: 8,
+    modelId: 23,
+    filters: [{ bizName: 'singer_id', elementID: 283, value: 4286 }],
+  },
+];
+
+const CopilotDemo = () => {
+  const copilotRef = useRef<any>();
+
+  return (
+    <div className={styles.copilotDemo}>
+      <Space>
+        {buttonParams.map(params => (
+          <Button
+            key={params.msg}
+            onClick={() => {
+              copilotRef?.current?.sendCopilotMsg(params);
+            }}
+          >
+            {params.msg}
+          </Button>
+        ))}
+      </Space>
+      <Copilot
+        // token={localStorage.getItem('SUPERSONIC_TOKEN') || ''}
+        // agentIds={[8]}
+        isDeveloper
+        // integrateSystem="c2"
+        ref={copilotRef}
+        // noInput
+      />
+    </div>
+  );
+};
+
+export default CopilotDemo;
diff --git a/webapp/packages/chat-sdk/src/demo/style.module.less b/webapp/packages/chat-sdk/src/demo/style.module.less
index e6c0ff84c..f818325c6 100644
--- a/webapp/packages/chat-sdk/src/demo/style.module.less
+++ b/webapp/packages/chat-sdk/src/demo/style.module.less
@@ -8,4 +8,8 @@
   height: 100vh;
   overflow: auto;
   box-sizing: border-box;
-}
\ No newline at end of file
+}
+
+.chatDemo {
+  height: 100%;
+}
diff --git a/webapp/packages/chat-sdk/src/index.tsx b/webapp/packages/chat-sdk/src/index.tsx
index 428529e52..36ea0194d 100644
--- a/webapp/packages/chat-sdk/src/index.tsx
+++ b/webapp/packages/chat-sdk/src/index.tsx
@@ -1,16 +1,15 @@
 import './styles/index.less';
 
-// import React from 'react';
 // import ReactDOM from 'react-dom/client';
 // import Chat from './demo/Chat';
-
+// import ChatDemo from './demo/ChatDemo';
+// import CopilotDemo from './demo/CopilotDemo';
 // const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+// root.render(<ChatDemo />);
 
-// root.render(
-//   <React.StrictMode>
-//     <Chat />
-//   </React.StrictMode>
-// );
+export { default as Chat } from './Chat';
+
+export { default as Copilot } from './Copilot';
 
 export { default as ChatMsg } from './components/ChatMsg';
 
@@ -33,6 +32,7 @@ export type {
   FilterItemType,
   HistoryType,
   HistoryMsgItemType,
+  SendMsgParamsType,
 } from './common/type';
 
 export { getHistoryMsg, searchRecommend, queryContext } from './service';
diff --git a/webapp/packages/chat-sdk/src/service/axiosInstance.ts b/webapp/packages/chat-sdk/src/service/axiosInstance.ts
index baca6ce9e..4cc350452 100644
--- a/webapp/packages/chat-sdk/src/service/axiosInstance.ts
+++ b/webapp/packages/chat-sdk/src/service/axiosInstance.ts
@@ -5,7 +5,7 @@ import { getToken } from '../utils/utils';
 // 创建axios实例
 const axiosInstance: AxiosInstance = axios.create({
   // 设置基本URL，所有请求都会使用这个URL作为前缀
-  baseURL: '',
+  baseURL: localStorage.getItem('SUPERSONIC_CHAT_API_URL') || '',
   // 设置请求超时时间（毫秒）
   timeout: 120000,
   // 设置请求头
@@ -19,7 +19,7 @@ axiosInstance.interceptors.request.use(
   (config: any) => {
     const token = getToken();
     if (token && config?.headers) {
-      config.headers.Auth = `Bearer ${token}`;
+      // config.headers.Auth = `Bearer ${token}`;
       config.headers.Authorization = `Bearer ${token}`;
     }
     return config;
@@ -33,18 +33,18 @@ axiosInstance.interceptors.request.use(
 // 响应拦截器
 axiosInstance.interceptors.response.use(
   (response: any) => {
-    const redirect = response.headers.get('redirect');
+    const redirect = response.headers['redirect'];
     if (redirect === 'REDIRECT') {
       let win: any = window;
       while (win !== win.top) {
         win = win.top;
       }
-      const contextpath = response.headers.get('contextpath');
+      const contextpath = response.headers['contextpath'];
       win.location.href =
         contextpath?.substring(0, contextpath?.indexOf('&')) +
         `&redirect_uri=${encodeURIComponent(`http://${win.location.host}`)}`;
     }
-    return response;
+    return response.data;
   },
   (error) => {
     // 对响应错误进行处理
diff --git a/webapp/packages/chat-sdk/src/service/index.ts b/webapp/packages/chat-sdk/src/service/index.ts
index 9c66ff95f..d418ac962 100644
--- a/webapp/packages/chat-sdk/src/service/index.ts
+++ b/webapp/packages/chat-sdk/src/service/index.ts
@@ -1,12 +1,12 @@
 import axios from './axiosInstance';
 import { ChatContextType, DrillDownDimensionType, HistoryType, MsgDataType, ParseDataType, SearchRecommendItem } from '../common/type';
 
-const DEFAULT_CHAT_ID = 12009993;
+const DEFAULT_CHAT_ID = 0;
 
 const prefix = '/api';
 
 export function searchRecommend(queryText: string, chatId?: number, modelId?: number, agentId?: number) {
-  return axios.post<Result<SearchRecommendItem[]>>(`${prefix}/chat/query/search`, {
+  return axios.post<SearchRecommendItem[]>(`${prefix}/chat/query/search`, {
     queryText,
     chatId: chatId || DEFAULT_CHAT_ID,
     modelId,
@@ -15,7 +15,7 @@ export function searchRecommend(queryText: string, chatId?: number, modelId?: nu
 }
 
 export function chatQuery(queryText: string, chatId?: number, modelId?: number, filters?: any[]) {
-  return axios.post<Result<MsgDataType>>(`${prefix}/chat/query/query`, {
+  return axios.post<MsgDataType>(`${prefix}/chat/query/query`, {
     queryText,
     chatId: chatId || DEFAULT_CHAT_ID,
     modelId,
@@ -26,7 +26,7 @@ export function chatQuery(queryText: string, chatId?: number, modelId?: number,
 }
 
 export function chatParse(queryText: string, chatId?: number, modelId?: number, agentId?: number, filters?: any[]) {
-  return axios.post<Result<ParseDataType>>(`${prefix}/chat/query/parse`, {
+  return axios.post<ParseDataType>(`${prefix}/chat/query/parse`, {
     queryText,
     chatId: chatId || DEFAULT_CHAT_ID,
     modelId,
@@ -38,7 +38,7 @@ export function chatParse(queryText: string, chatId?: number, modelId?: number,
 }
 
 export function chatExecute(queryText: string,  chatId: number, parseInfo: ChatContextType ) {
-  return axios.post<Result<MsgDataType>>(`${prefix}/chat/query/execute`, {
+  return axios.post<MsgDataType>(`${prefix}/chat/query/execute`, {
     queryText,
     chatId: chatId || DEFAULT_CHAT_ID,
     queryId: parseInfo.queryId,
@@ -47,7 +47,7 @@ export function chatExecute(queryText: string,  chatId: number, parseInfo: ChatC
 }
 
 export function switchEntity(entityId: string, modelId?: number, chatId?: number) {
-  return axios.post<Result<any>>(`${prefix}/chat/query/switchQuery`, {
+  return axios.post<any>(`${prefix}/chat/query/switchQuery`, {
     queryText: entityId,
     modelId,
     chatId: chatId || DEFAULT_CHAT_ID,
@@ -55,46 +55,46 @@ export function switchEntity(entityId: string, modelId?: number, chatId?: number
 }
 
 export function queryData(chatContext: Partial<ChatContextType>) {
-  return axios.post<Result<MsgDataType>>(`${prefix}/chat/query/queryData`, chatContext);
+  return axios.post<MsgDataType>(`${prefix}/chat/query/queryData`, chatContext);
 }
 
 export function queryContext(queryText: string, chatId?: number) {
-  return axios.post<Result<ChatContextType>>(`${prefix}/chat/query/queryContext`, {
+  return axios.post<ChatContextType>(`${prefix}/chat/query/queryContext`, {
     queryText,
     chatId: chatId || DEFAULT_CHAT_ID,
   });
 }
 
 export function getHistoryMsg(current: number, chatId: number = DEFAULT_CHAT_ID, pageSize: number = 10) {
-  return axios.post<Result<HistoryType>>(`${prefix}/chat/manage/pageQueryInfo?chatId=${chatId}`, {
+  return axios.post<HistoryType>(`${prefix}/chat/manage/pageQueryInfo?chatId=${chatId}`, {
     current,
     pageSize,
   });
 }
 
 export function saveConversation(chatName: string) {
-  return axios.post<Result<any>>(`${prefix}/chat/manage/save?chatName=${chatName}`);
+  return axios.post<any>(`${prefix}/chat/manage/save?chatName=${chatName}`);
 }
 
 export function getAllConversations() {
-  return axios.get<Result<any>>(`${prefix}/chat/manage/getAll`);
+  return axios.get<any>(`${prefix}/chat/manage/getAll`);
 }
 
 export function queryEntities(entityId: string | number, modelId: number) {
-  return axios.post<Result<any>>(`${prefix}/chat/query/choice`, {
+  return axios.post<any>(`${prefix}/chat/query/choice`, {
     entityId,
     modelId,
   });
 }
 
 export function updateQAFeedback(questionId: number, score: number) {
-  return axios.post<Result<any>>(`${prefix}/chat/manage/updateQAFeedback?id=${questionId}&score=${score}&feedback=`);
+  return axios.post<any>(`${prefix}/chat/manage/updateQAFeedback?id=${questionId}&score=${score}&feedback=`);
 }
 
 export function queryDrillDownDimensions(modelId: number) {
-  return axios.get<Result<{ dimensions: DrillDownDimensionType[] }>>(`${prefix}/chat/recommend/metric/${modelId}`);
+  return axios.get<{ dimensions: DrillDownDimensionType[] }>(`${prefix}/chat/recommend/metric/${modelId}`);
 }
 
 export function queryDimensionValues(modelId: number, bizName: string, value: string) {
-  return axios.post<Result<any>>(`${prefix}/chat/query/queryDimensionValue`, { modelId, bizName, value});
+  return axios.post<any>(`${prefix}/chat/query/queryDimensionValue`, { modelId, bizName, value});
 }
diff --git a/webapp/packages/chat-sdk/src/typings.d.ts b/webapp/packages/chat-sdk/src/typings.d.ts
index a3435717c..42eb3f30f 100644
--- a/webapp/packages/chat-sdk/src/typings.d.ts
+++ b/webapp/packages/chat-sdk/src/typings.d.ts
@@ -1,6 +1,7 @@
 declare module 'slash2';
 declare module '*.css';
 declare module '*.less';
+declare module '*.module.less';
 declare module '*.scss';
 declare module '*.sass';
 declare module '*.svg';
@@ -18,12 +19,22 @@ declare module 'react-fittext';
 declare module 'bizcharts-plugin-slider';
 declare module 'react-split-pane/lib/Pane';
 
-// preview.pro.ant.design only do not use in your production ;
-// preview.pro.ant.design Dedicated environment variable, please do not use it in your project.
-declare let ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: 'site' | undefined;
-
 declare const REACT_APP_ENV: 'test' | 'dev' | 'pre' | false;
 
+declare module '*.module.less' {
+  const classes: {
+    readonly [key: string]: string
+  }
+  export default classes
+  declare module '*.less'
+}
+
+interface AxiosResponse<T = any> extends Promise<T> {
+  code: number;
+  data: T;
+  msg: string;  
+}
+
 type Result<T> = {
   code: number;
   data: T;
diff --git a/webapp/packages/chat-sdk/src/utils/utils.ts b/webapp/packages/chat-sdk/src/utils/utils.ts
index cf040a976..6bb924f22 100644
--- a/webapp/packages/chat-sdk/src/utils/utils.ts
+++ b/webapp/packages/chat-sdk/src/utils/utils.ts
@@ -178,9 +178,76 @@ export function isProd() {
 }
 
 export function setToken(token: string) {
-  localStorage.setItem('SUPERSONIC_CHAT_TOKEN', token);
+  localStorage.setItem('SUPERSONIC_TOKEN', token);
 }
 
 export function getToken() {
-  return localStorage.getItem('SUPERSONIC_CHAT_TOKEN');
+  return localStorage.getItem('SUPERSONIC_TOKEN');
 }
+
+export const updateMessageContainerScroll = (nodeId?: string) => {
+  setTimeout(() => {
+    const ele: any = document.getElementById('messageContainer');
+    if (ele && ele.scrollHeight > ele.clientHeight) {
+      if (nodeId) {
+        const node = document.getElementById(nodeId);
+        if (node) {
+          ele.scrollTop = ele.scrollHeight - node.clientHeight - 130;
+        }
+      } else {
+        ele.scrollTop = ele.scrollHeight;
+      }
+    }
+  }, 100);
+};
+
+/**
+ * UUID生成器
+ * @param len 长度 number
+ * @param radix 随机数基数 number
+ * @returns {string}
+ */
+export const uuid = (len: number = 8, radix: number = 62) => {
+  const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
+  const uuid: string[] = [];
+  let i;
+
+  if (len) {
+    // Compact form
+    for (i = 0; i < len; i++) {
+      uuid[i] = chars[Math.floor(Math.random() * radix)];
+    }
+  } else {
+    // rfc4122, version 4 form
+    let r;
+
+    // rfc4122 requires these characters
+    uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
+    uuid[14] = '4';
+
+    // Fill in random data.  At i==19 set the high bits of clock sequence as
+    // per rfc4122, sec. 4.1.5
+    for (i = 0; i < 36; i++) {
+      if (!uuid[i]) {
+        r = Math.floor(Math.random() * 16);
+        uuid[i] = chars[i === 19 ? ((r % 4) % 8) + 8 : r];
+      }
+    }
+  }
+  return uuid.join('');
+};
+
+let utilCanvas: any = null;
+
+export const getTextWidth = (
+  text: string,
+  fontSize: string = '16px',
+  fontWeight: string = 'normal',
+  fontFamily: string = 'DINPro Medium',
+): number => {
+  const canvas = utilCanvas || (utilCanvas = document.createElement('canvas'));
+  const context = canvas.getContext('2d');
+  context.font = `${fontWeight} ${fontSize} ${fontFamily}`;
+  const metrics = context.measureText(text);
+  return Math.ceil(metrics.width);
+};
diff --git a/webapp/packages/chat-sdk/tsconfig.build.json b/webapp/packages/chat-sdk/tsconfig.build.json
index c82e4891f..fb586b5a4 100644
--- a/webapp/packages/chat-sdk/tsconfig.build.json
+++ b/webapp/packages/chat-sdk/tsconfig.build.json
@@ -7,7 +7,7 @@
     "jsx": "react-jsx",
     "moduleResolution":"Node",
     "allowSyntheticDefaultImports": true,
-    "importHelpers": true,
+    "importHelpers": true
   },
   "include": [
     "src"
diff --git a/webapp/packages/supersonic-fe/config/envConfig.ts b/webapp/packages/supersonic-fe/config/envConfig.ts
index 3ef1ecb6b..10cd310d5 100644
--- a/webapp/packages/supersonic-fe/config/envConfig.ts
+++ b/webapp/packages/supersonic-fe/config/envConfig.ts
@@ -1,4 +1,4 @@
 const ENV_CONFIG = {
-  tmeAvatarUrl: 'http://tpp.tmeoa.com/photo/48/',
+  tmeAvatarUrl: '',
 };
 export default ENV_CONFIG;
diff --git a/webapp/packages/supersonic-fe/config/routes.ts b/webapp/packages/supersonic-fe/config/routes.ts
index c9bb6a33e..c7f5c4058 100644
--- a/webapp/packages/supersonic-fe/config/routes.ts
+++ b/webapp/packages/supersonic-fe/config/routes.ts
@@ -11,7 +11,7 @@ const ROUTES = [
   {
     path: '/chat/mobile',
     name: 'chat',
-    component: './Chat',
+    component: './ChatPage',
     hideInMenu: true,
     layout: false,
     envEnableList: [ENV_KEY.CHAT],
@@ -19,7 +19,7 @@ const ROUTES = [
   {
     path: '/chat',
     name: 'chat',
-    component: './Chat',
+    component: './ChatPage',
     envEnableList: [ENV_KEY.CHAT],
   },
   {
diff --git a/webapp/packages/supersonic-fe/src/app.tsx b/webapp/packages/supersonic-fe/src/app.tsx
index b6aa63662..76775a606 100644
--- a/webapp/packages/supersonic-fe/src/app.tsx
+++ b/webapp/packages/supersonic-fe/src/app.tsx
@@ -1,23 +1,18 @@
-import { AUTH_TOKEN_KEY, FROM_URL_KEY } from '@/common/constants';
 import RightContent from '@/components/RightContent';
 import S2Icon, { ICON } from '@/components/S2Icon';
 import type { Settings as LayoutSettings } from '@ant-design/pro-layout';
 import { Space, Spin } from 'antd';
-import qs from 'qs';
 import ScaleLoader from 'react-spinners/ScaleLoader';
 import type { RunTimeLayoutConfig } from 'umi';
 import { history } from 'umi';
 import defaultSettings from '../config/defaultSettings';
 import settings from '../config/themeSettings';
-import { queryToken } from './services/login';
 import { queryCurrentUser } from './services/user';
-import { traverseRoutes, deleteUrlQuery, isMobile } from './utils/utils';
+import { traverseRoutes, isMobile, getToken } from './utils/utils';
 import { publicPath } from '../config/defaultSettings';
-import Copilot from './pages/Copilot';
+import { Copilot } from 'supersonic-chat-sdk';
 export { request } from './services/request';
 
-const TOKEN_KEY = AUTH_TOKEN_KEY;
-
 const replaceRoute = '/';
 
 const getRunningEnv = async () => {
@@ -42,25 +37,6 @@ export const initialStateConfig = {
   ),
 };
 
-const getToken = async () => {
-  let { search } = window.location;
-  if (search.length > 0) {
-    search = search.slice(1);
-  }
-  const data = qs.parse(search);
-  if (data.code) {
-    try {
-      const fromUrl = localStorage.getItem(FROM_URL_KEY);
-      const res = await queryToken(data.code as string);
-      localStorage.setItem(TOKEN_KEY, res.payload);
-      const newUrl = deleteUrlQuery(window.location.href, 'code');
-      window.location.href = fromUrl || newUrl;
-    } catch (err) {
-      console.log(err);
-    }
-  }
-};
-
 const getAuthCodes = () => {
   return [];
 };
@@ -81,12 +57,6 @@ export async function getInitialState(): Promise<{
     } catch (error) {}
     return undefined;
   };
-  const { query } = history.location as any;
-  const currentToken = query[TOKEN_KEY] || localStorage.getItem(TOKEN_KEY);
-
-  if (window.location.host.includes('tmeoa') && !currentToken) {
-    await getToken();
-  }
 
   let currentUser: any;
   if (!window.location.pathname.includes('login')) {
@@ -162,7 +132,9 @@ export const layout: RunTimeLayoutConfig = (params) => {
           style={{ height: location.pathname.includes('chat') ? 'calc(100vh - 48px)' : undefined }}
         >
           {dom}
-          {history.location.pathname !== '/chat' && !isMobile && <Copilot />}
+          {history.location.pathname !== '/chat' && !isMobile && (
+            <Copilot token={getToken() || ''} isDeveloper />
+          )}
         </div>
       );
     },
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/components/Typing.tsx b/webapp/packages/supersonic-fe/src/pages/Chat/components/Typing.tsx
deleted file mode 100644
index e1b3a8166..000000000
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/Typing.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { CHAT_BLUE } from '@/common/constants';
-import { Spin } from 'antd';
-import BeatLoader from 'react-spinners/BeatLoader';
-import Message from './Message';
-import styles from './style.less';
-
-const Typing = () => {
-  return (
-    <Message position="left" bubbleClassName={styles.typingBubble}>
-      <Spin
-        spinning={true}
-        indicator={<BeatLoader color={CHAT_BLUE} size={10} />}
-        className={styles.typing}
-      />
-    </Message>
-  );
-};
-
-export default Typing;
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/service.ts b/webapp/packages/supersonic-fe/src/pages/Chat/service.ts
deleted file mode 100644
index a98f0d769..000000000
--- a/webapp/packages/supersonic-fe/src/pages/Chat/service.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { isMobile } from '@/utils/utils';
-import { request } from 'umi';
-import { AgentType, ModelType } from './type';
-
-const prefix = isMobile ? '/openapi' : '/api';
-
-export function saveConversation(chatName: string, agentId: number) {
-  return request<Result<any>>(
-    `${prefix}/chat/manage/save?chatName=${chatName}&agentId=${agentId}`,
-    {
-      method: 'POST',
-    },
-  );
-}
-
-export function updateConversationName(chatName: string, chatId: number = 0) {
-  return request<Result<any>>(
-    `${prefix}/chat/manage/updateChatName?chatName=${chatName}&chatId=${chatId}`,
-    { method: 'POST' },
-  );
-}
-
-export function deleteConversation(chatId: number) {
-  return request<Result<any>>(`${prefix}/chat/manage/delete?chatId=${chatId}`, { method: 'POST' });
-}
-
-export function getAllConversations(agentId?: number) {
-  return request<Result<any>>(`${prefix}/chat/manage/getAll`, { params: { agentId } });
-}
-
-export function getMiniProgramList(entityId: string, modelId: number) {
-  return request<Result<any>>(
-    `${prefix}/chat/plugin/extend/getAvailablePlugin/${entityId}/${modelId}`,
-    {
-      method: 'GET',
-      skipErrorHandler: true,
-    },
-  );
-}
-
-export function getModelList() {
-  return request<Result<ModelType[]>>(`${prefix}/chat/conf/modelList/view`, {
-    method: 'GET',
-  });
-}
-
-export function updateQAFeedback(questionId: number, score: number) {
-  return request<Result<any>>(
-    `${prefix}/chat/manage/updateQAFeedback?id=${questionId}&score=${score}&feedback=`,
-    {
-      method: 'POST',
-    },
-  );
-}
-
-export function queryMetricSuggestion(modelId: number) {
-  return request<Result<any>>(`${prefix}/chat/recommend/metric/${modelId}`, {
-    method: 'GET',
-  });
-}
-
-export function querySuggestion(modelId: number) {
-  return request<Result<any>>(`${prefix}/chat/recommend/${modelId}`, {
-    method: 'GET',
-  });
-}
-
-export function queryRecommendQuestions() {
-  return request<Result<any>>(`${prefix}/chat/recommend/question`, {
-    method: 'GET',
-  });
-}
-
-export function queryAgentList() {
-  return request<Result<AgentType[]>>(`${prefix}/chat/agent/getAgentList`, {
-    method: 'GET',
-  });
-}
diff --git a/webapp/packages/supersonic-fe/src/pages/ChatPage/index.tsx b/webapp/packages/supersonic-fe/src/pages/ChatPage/index.tsx
new file mode 100644
index 000000000..5248c4ba5
--- /dev/null
+++ b/webapp/packages/supersonic-fe/src/pages/ChatPage/index.tsx
@@ -0,0 +1,14 @@
+import { useLocation } from 'umi';
+import { getToken } from '@/utils/utils';
+import { Chat } from 'supersonic-chat-sdk';
+
+const ChatPage = () => {
+  const location = useLocation();
+  const { agentId } = (location as any).query;
+
+  return (
+    <Chat initialAgentId={agentId ? +agentId : undefined} token={getToken() || ''} isDeveloper />
+  );
+};
+
+export default ChatPage;
diff --git a/webapp/packages/supersonic-fe/src/pages/Copilot/index.tsx b/webapp/packages/supersonic-fe/src/pages/Copilot/index.tsx
deleted file mode 100644
index 799cf71d3..000000000
--- a/webapp/packages/supersonic-fe/src/pages/Copilot/index.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import IconFont from '@/components/IconFont';
-import { CaretRightOutlined, CloseOutlined } from '@ant-design/icons';
-import classNames from 'classnames';
-import { useEffect, useState } from 'react';
-import Chat from '../Chat';
-import { DefaultEntityType, ModelType } from '../Chat/type';
-import styles from './style.less';
-
-type Props = {
-  globalCopilotFilter: DefaultEntityType;
-  copilotSendMsg: string;
-};
-
-const Copilot: React.FC<Props> = ({ globalCopilotFilter, copilotSendMsg }) => {
-  const [chatVisible, setChatVisible] = useState(false);
-  const [defaultModelName, setDefaultModelName] = useState('');
-  const [defaultEntityFilter, setDefaultEntityFilter] = useState<DefaultEntityType>();
-  const [triggerNewConversation, setTriggerNewConversation] = useState(false);
-  const [copilotMinimized, setCopilotMinimized] = useState(false);
-
-  useEffect(() => {
-    if (globalCopilotFilter && globalCopilotFilter.entityId !== defaultEntityFilter?.entityId) {
-      setTriggerNewConversation(true);
-    }
-    setDefaultEntityFilter(globalCopilotFilter);
-    if (globalCopilotFilter?.modelName) {
-      setDefaultModelName(globalCopilotFilter.modelName);
-    }
-  }, [globalCopilotFilter]);
-
-  useEffect(() => {
-    if (copilotSendMsg) {
-      updateChatVisible(true);
-      setTriggerNewConversation(true);
-    }
-  }, [copilotSendMsg]);
-
-  const updateChatVisible = (visible: boolean) => {
-    setChatVisible(visible);
-  };
-
-  const onToggleChatVisible = () => {
-    const chatVisibleValue = !chatVisible;
-    updateChatVisible(chatVisibleValue);
-  };
-
-  const onCloseChat = () => {
-    updateChatVisible(false);
-  };
-
-  const onTransferChat = () => {
-    window.open('/chat');
-  };
-
-  const onCurrentModelChange = (model?: ModelType) => {
-    setDefaultModelName(model?.name || '');
-  };
-
-  const onNewConversationTriggered = () => {
-    setTriggerNewConversation(false);
-  };
-
-  const onMinimizeCopilot = (e: any) => {
-    e.stopPropagation();
-    updateChatVisible(false);
-    setCopilotMinimized(true);
-  };
-
-  const copilotClass = classNames(styles.copilot, {
-    [styles.copilotMinimized]: copilotMinimized,
-  });
-
-  return (
-    <>
-      <div
-        className={copilotClass}
-        onMouseEnter={() => {
-          setCopilotMinimized(false);
-        }}
-        onClick={onToggleChatVisible}
-      >
-        <IconFont type="icon-copilot-fill" />
-        <div className={styles.minimizeWrapper} onClick={onMinimizeCopilot}>
-          <div className={styles.minimize}>-</div>
-        </div>
-      </div>
-      <div className={styles.copilotContent} style={{ display: chatVisible ? 'block' : 'none' }}>
-        <div className={styles.chatPopover}>
-          <div className={styles.header}>
-            <div className={styles.leftSection}>
-              <CloseOutlined className={styles.close} onClick={onCloseChat} />
-              <IconFont
-                type="icon-weibiaoti-"
-                className={styles.transfer}
-                onClick={onTransferChat}
-              />
-            </div>
-            <div className={styles.title}>Copilot</div>
-          </div>
-          <div className={styles.chat}>
-            <Chat
-              copilotSendMsg={copilotSendMsg}
-              defaultModelName={defaultModelName}
-              defaultEntityFilter={defaultEntityFilter}
-              triggerNewConversation={triggerNewConversation}
-              chatVisible={chatVisible}
-              isCopilotMode
-              onNewConversationTriggered={onNewConversationTriggered}
-              onCurrentModelChange={onCurrentModelChange}
-            />
-          </div>
-        </div>
-        <CaretRightOutlined className={styles.rightArrow} />
-      </div>
-    </>
-  );
-};
-
-export default Copilot;
diff --git a/webapp/packages/supersonic-fe/src/services/login.ts b/webapp/packages/supersonic-fe/src/services/login.ts
index 2035aa497..f09e7e8e9 100644
--- a/webapp/packages/supersonic-fe/src/services/login.ts
+++ b/webapp/packages/supersonic-fe/src/services/login.ts
@@ -1,5 +1,3 @@
-import { request } from 'umi';
-
 export type LoginParamsType = {
   username: string;
   password: string;
@@ -7,9 +5,3 @@ export type LoginParamsType = {
   captcha: string;
   type: string;
 };
-
-export async function queryToken(code: string) {
-  return request(`/davinciapi/login/tmeloginCallback`, {
-    params: { code },
-  });
-}
diff --git a/webapp/pnpm-lock.yaml b/webapp/pnpm-lock.yaml
index 4cc108d68..d9d9c38b6 100644
--- a/webapp/pnpm-lock.yaml
+++ b/webapp/pnpm-lock.yaml
@@ -14,12 +14,15 @@ importers:
       '@uiw/react-watermark':
         specifier: ^0.0.5
         version: 0.0.5(react-dom@18.2.0)(react@18.2.0)
+      ahooks:
+        specifier: ^3.7.8
+        version: 3.7.8(react@18.2.0)
       antd:
         specifier: ^5.5.2
         version: 5.9.0(moment@2.29.4)(react-dom@18.2.0)(react@18.2.0)
       axios:
-        specifier: ^1.4.0
-        version: 1.4.0
+        specifier: ^0.21.1
+        version: 0.21.4
       classnames:
         specifier: ^2.3.2
         version: 2.3.2
@@ -32,9 +35,18 @@ importers:
       moment:
         specifier: ^2.29.4
         version: 2.29.4
+      react-copy-to-clipboard:
+        specifier: ^5.1.0
+        version: 5.1.0(react@18.2.0)
       react-spinners:
         specifier: ^0.13.8
         version: 0.13.8(react-dom@18.2.0)(react@18.2.0)
+      react-syntax-highlighter:
+        specifier: ^15.5.0
+        version: 15.5.0(react@18.2.0)
+      sql-formatter:
+        specifier: ^2.3.3
+        version: 2.3.4
       tslib:
         specifier: ^2.5.2
         version: 2.6.2
@@ -75,6 +87,9 @@ importers:
       '@types/jest':
         specifier: ^27.5.2
         version: 27.5.2
+      '@types/lodash':
+        specifier: ^4.14.198
+        version: 4.14.198
       '@types/node':
         specifier: ^16.18.31
         version: 16.18.50
@@ -225,6 +240,9 @@ importers:
       rollup-plugin-postcss:
         specifier: ^4.0.2
         version: 4.0.2(postcss@8.4.29)
+      rollup-plugin-styles:
+        specifier: ^4.0.0
+        version: 4.0.0(rollup@3.29.1)
       rollup-plugin-typescript2:
         specifier: ^0.34.1
         version: 0.34.1(rollup@3.29.1)(typescript@4.9.5)
@@ -5502,6 +5520,15 @@ packages:
     resolution: {integrity: sha512-t33RNmTu5ufG/sorROIafiCVJMx3jz95bXUMoPAZcUD14fxMXnuTzqzXZoxpR0tNx2xpw11Dlmem9vGCsrSOfA==}
     dev: true
 
+  /@types/cssnano@5.1.0(postcss@8.4.29):
+    resolution: {integrity: sha512-ikR+18UpFGgvaWSur4og6SJYF/6QEYHXvrIt36dp81p1MG3cAPTYDMBJGeyWa3LCnqEbgNMHKRb+FP0NrXtoWQ==}
+    deprecated: This is a stub types definition. cssnano provides its own type definitions, so you do not need this installed.
+    dependencies:
+      cssnano: 6.0.1(postcss@8.4.29)
+    transitivePeerDependencies:
+      - postcss
+    dev: true
+
   /@types/d3-timer@2.0.1:
     resolution: {integrity: sha512-TF8aoF5cHcLO7W7403blM7L1T+6NF3XMyN3fxyUolq2uOcFeicG/khQg/dGxiCJWoAcmYulYN7LYSRKO54IXaA==}
     dev: false
@@ -7329,6 +7356,25 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /ahooks@3.7.8(react@18.2.0):
+    resolution: {integrity: sha512-e/NMlQWoCjaUtncNFIZk3FG1ImSkV/JhScQSkTqnftakRwdfZWSw6zzoWSG9OMYqPNs2MguDYBUFFC6THelWXA==}
+    engines: {node: '>=8.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@babel/runtime': 7.22.15
+      '@types/js-cookie': 2.2.7
+      ahooks-v3-count: 1.0.0
+      dayjs: 1.11.9
+      intersection-observer: 0.12.2
+      js-cookie: 2.2.1
+      lodash: 4.17.21
+      react: 18.2.0
+      resize-observer-polyfill: 1.5.1
+      screenfull: 5.2.0
+      tslib: 2.6.2
+    dev: false
+
   /ajv-errors@1.0.1(ajv@6.12.6):
     resolution: {integrity: sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==}
     peerDependencies:
@@ -7887,6 +7933,7 @@ packages:
 
   /asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+    dev: true
 
   /at-least-node@1.0.0:
     resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
@@ -7953,12 +8000,10 @@ packages:
       - supports-color
     dev: true
 
-  /axios@1.4.0:
-    resolution: {integrity: sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==}
+  /axios@0.21.4:
+    resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
     dependencies:
       follow-redirects: 1.15.2
-      form-data: 4.0.0
-      proxy-from-env: 1.1.0
     transitivePeerDependencies:
       - debug
     dev: false
@@ -9146,6 +9191,7 @@ packages:
     engines: {node: '>= 0.8'}
     dependencies:
       delayed-stream: 1.0.0
+    dev: true
 
   /comma-separated-tokens@1.0.8:
     resolution: {integrity: sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==}
@@ -9555,7 +9601,7 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
 
   /css-blank-pseudo@3.0.3(postcss@8.4.29):
     resolution: {integrity: sha512-VS90XWtsHGqoM0t4KpH053c4ehxZ2E6HtGI7x68YFV0pTo/QmkV/YFA+NnlvK8guxZVNWGQhVNJGC39Q8XF4OQ==}
@@ -9587,7 +9633,7 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
       postcss-selector-parser: 5.0.0
 
   /css-has-pseudo@3.0.4(postcss@8.4.29):
@@ -9664,7 +9710,7 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
 
   /css-prefers-color-scheme@6.0.3(postcss@8.4.29):
     resolution: {integrity: sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==}
@@ -10312,6 +10358,7 @@ packages:
   /delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
+    dev: true
 
   /depd@1.1.2:
     resolution: {integrity: sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==}
@@ -12452,6 +12499,7 @@ packages:
       asynckit: 0.4.0
       combined-stream: 1.0.8
       mime-types: 2.1.35
+    dev: true
 
   /format@0.2.2:
     resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
@@ -17920,7 +17968,7 @@ packages:
   /postcss-attribute-case-insensitive@4.0.2:
     resolution: {integrity: sha512-clkFxk/9pcdb4Vkn0hAHq3YnxBQ2p0CGD1dy24jN+reBck+EWxMbxSUqN4Yj7t0w8csl87K6p0gxBe1utkJsYA==}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
       postcss-selector-parser: 6.0.13
 
   /postcss-attribute-case-insensitive@5.0.2(postcss@8.4.29):
@@ -17979,7 +18027,7 @@ packages:
     resolution: {integrity: sha512-ZBARCypjEDofW4P6IdPVTLhDNXPRn8T2s1zHbZidW6rPaaZvcnCS2soYFIQJrMZSxiePJ2XIYTlcb2ztr/eT2g==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
       postcss-values-parser: 2.0.1
 
   /postcss-color-functional-notation@4.2.4(postcss@8.4.29):
@@ -17997,14 +18045,14 @@ packages:
     engines: {node: '>=6.0.0'}
     dependencies:
       '@csstools/convert-colors': 1.4.0
-      postcss: 7.0.32
+      postcss: 7.0.39
       postcss-values-parser: 2.0.1
 
   /postcss-color-hex-alpha@5.0.3:
     resolution: {integrity: sha512-PF4GDel8q3kkreVXKLAGNpHKilXsZ6xuu+mOQMHWHLPNyjiUBOr75sp5ZKJfmv1MCus5/DWUGcK9hm6qHEnXYw==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
       postcss-values-parser: 2.0.1
 
   /postcss-color-hex-alpha@8.0.4(postcss@8.4.29):
@@ -18022,14 +18070,14 @@ packages:
     engines: {node: '>=6.0.0'}
     dependencies:
       '@csstools/convert-colors': 1.4.0
-      postcss: 7.0.32
+      postcss: 7.0.39
       postcss-values-parser: 2.0.1
 
   /postcss-color-rebeccapurple@4.0.1:
     resolution: {integrity: sha512-aAe3OhkS6qJXBbqzvZth2Au4V3KieR5sRQ4ptb2b2O8wgvB3SJBsdG+jsn2BZbbwekDG8nTfcCNKcSfe/lEy8g==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
       postcss-values-parser: 2.0.1
 
   /postcss-color-rebeccapurple@7.1.1(postcss@8.4.29):
@@ -18094,7 +18142,7 @@ packages:
     resolution: {integrity: sha512-c9s5iX0Ge15o00HKbuRuTqNndsJUbaXdiNsksnVH8H4gdc+zbLzr/UasOwNG6CTDpLFekVY4672eWdiiWu2GUg==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
 
   /postcss-custom-media@8.0.2(postcss@8.4.29):
     resolution: {integrity: sha512-7yi25vDAoHAkbhAzX9dHx2yc6ntS4jQvejrNcC+csQJAXjj15e7VcWfMgLqBNAbOvqi5uIa9huOVwdHbf+sKqg==}
@@ -18120,14 +18168,14 @@ packages:
     resolution: {integrity: sha512-nm+o0eLdYqdnJ5abAJeXp4CEU1c1k+eB2yMCvhgzsds/e0umabFrN6HoTy/8Q4K5ilxERdl/JD1LO5ANoYBeMA==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
       postcss-values-parser: 2.0.1
 
   /postcss-custom-selectors@5.1.2:
     resolution: {integrity: sha512-DSGDhqinCqXqlS4R7KGxL1OSycd1lydugJ1ky4iRXPHdBRiozyMHrdu0H3o7qNOCiZwySZTUI5MV0T8QhCLu+w==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
       postcss-selector-parser: 5.0.0
 
   /postcss-custom-selectors@6.0.3(postcss@8.4.29):
@@ -18144,7 +18192,7 @@ packages:
     resolution: {integrity: sha512-3pm4oq8HYWMZePJY+5ANriPs3P07q+LW6FAdTlkFH2XqDdP4HeeJYMOzn0HYLhRSjBO3fhiqSwwU9xEULSrPgw==}
     engines: {node: '>=4.0.0'}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
       postcss-selector-parser: 5.0.0
 
   /postcss-dir-pseudo-class@6.0.5(postcss@8.4.29):
@@ -18233,7 +18281,7 @@ packages:
     resolution: {integrity: sha512-G+nV8EnQq25fOI8CH/B6krEohGWnF5+3A6H/+JEpOncu5dCnkS1QQ6+ct3Jkaepw1NGVqqOZH6lqrm244mCftA==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
       postcss-values-parser: 2.0.1
 
   /postcss-double-position-gradients@3.1.2(postcss@8.4.29):
@@ -18251,7 +18299,7 @@ packages:
     resolution: {integrity: sha512-rwac4BuZlITeUbiBq60h/xbLzXY43qOsIErngWa4l7Mt+RaSkT7QBjXVGTcBHupykkblHMDrBFh30zchYPaOUw==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
       postcss-values-parser: 2.0.1
 
   /postcss-env-function@4.0.6(postcss@8.4.29):
@@ -18267,7 +18315,7 @@ packages:
   /postcss-flexbugs-fixes@4.2.1:
     resolution: {integrity: sha512-9SiofaZ9CWpQWxOwRh1b/r85KD5y7GgvsNt1056k6OYLvWUun0czCvogfJgylC22uJTwW1KzY3Gz65NZRlvoiQ==}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
 
   /postcss-flexbugs-fixes@5.0.2(postcss@8.4.29):
     resolution: {integrity: sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==}
@@ -18281,7 +18329,7 @@ packages:
     resolution: {integrity: sha512-Z5CkWBw0+idJHSV6+Bgf2peDOFf/x4o+vX/pwcNYrWpXFrSfTkQ3JQ1ojrq9yS+upnAlNRHeg8uEwFTgorjI8g==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
 
   /postcss-focus-visible@6.0.4(postcss@8.4.29):
     resolution: {integrity: sha512-QcKuUU/dgNsstIK6HELFRT5Y3lbrMLEOwG+A4s5cA+fx3A3y/JTq3X9LaOj3OC3ALH0XqyrgQIgey/MIZ8Wczw==}
@@ -18297,7 +18345,7 @@ packages:
     resolution: {integrity: sha512-W0APui8jQeBKbCGZudW37EeMCjDeVxKgiYfIIEo8Bdh5SpB9sxds/Iq8SEuzS0Q4YFOlG7EPFulbbxujpkrV2w==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
 
   /postcss-focus-within@5.0.4(postcss@8.4.29):
     resolution: {integrity: sha512-vvjDN++C0mu8jz4af5d52CB184ogg/sSxAFS+oUJQq2SuCe7T5U2iIsVJtsCp2d6R4j0jr5+q3rPkBVZkXD9fQ==}
@@ -18312,7 +18360,7 @@ packages:
   /postcss-font-variant@4.0.1:
     resolution: {integrity: sha512-I3ADQSTNtLTTd8uxZhtSOrTCQ9G4qUVKPjHiDk0bV75QSxXjVWiJVJ2VLdspGUi9fbW9BcjKJoRvxAH1pckqmA==}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
 
   /postcss-font-variant@5.0.0(postcss@8.4.29):
     resolution: {integrity: sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==}
@@ -18326,7 +18374,7 @@ packages:
     resolution: {integrity: sha512-QZSqDaMgXCHuHTEzMsS2KfVDOq7ZFiknSpkrPJY6jmxbugUPTuSzs/vuE5I3zv0WAS+3vhrlqhijiprnuQfzmg==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
 
   /postcss-gap-properties@3.0.5(postcss@8.4.29):
     resolution: {integrity: sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==}
@@ -18352,7 +18400,7 @@ packages:
     resolution: {integrity: sha512-oPTcFFip5LZy8Y/whto91L9xdRHCWEMs3e1MdJxhgt4jy2WYXfhkng59fH5qLXSCPN8k4n94p1Czrfe5IOkKUw==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
       postcss-values-parser: 2.0.1
 
   /postcss-image-set-function@4.0.7(postcss@8.4.29):
@@ -18380,7 +18428,7 @@ packages:
   /postcss-initial@3.0.4:
     resolution: {integrity: sha512-3RLn6DIpMsK1l5UUy9jxQvoDeUN4gP939tDcKUHD/kM8SGSKbFAnvkpFpj3Bhtz3HGk1jWY5ZNWX6mPta5M9fg==}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
 
   /postcss-initial@4.0.1(postcss@8.4.29):
     resolution: {integrity: sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==}
@@ -18412,7 +18460,7 @@ packages:
     engines: {node: '>=6.0.0'}
     dependencies:
       '@csstools/convert-colors': 1.4.0
-      postcss: 7.0.32
+      postcss: 7.0.39
       postcss-values-parser: 2.0.1
 
   /postcss-lab-function@4.2.1(postcss@8.4.29):
@@ -18486,7 +18534,7 @@ packages:
     engines: {node: '>= 6'}
     dependencies:
       loader-utils: 1.4.2
-      postcss: 7.0.32
+      postcss: 7.0.39
       postcss-load-config: 2.1.2
       schema-utils: 1.0.0
 
@@ -18508,7 +18556,7 @@ packages:
     resolution: {integrity: sha512-1SUKdJc2vuMOmeItqGuNaC+N8MzBWFWEkAnRnLpFYj1tGGa7NqyVBujfRtgNa2gXR+6RkGUiB2O5Vmh7E2RmiA==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
 
   /postcss-logical@5.0.4(postcss@8.4.29):
     resolution: {integrity: sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==}
@@ -18523,7 +18571,7 @@ packages:
     resolution: {integrity: sha512-fo9moya6qyxsjbFAYl97qKO9gyre3qvbMnkOZeZwlsW6XYFsvs2DMGDlchVLfAd8LHPZDxivu/+qW2SMQeTHBw==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
 
   /postcss-media-minmax@5.0.0(postcss@8.4.29):
     resolution: {integrity: sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==}
@@ -18772,7 +18820,7 @@ packages:
     resolution: {integrity: sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
 
   /postcss-normalize-charset@5.1.0(postcss@8.4.29):
     resolution: {integrity: sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==}
@@ -19004,7 +19052,7 @@ packages:
     resolution: {integrity: sha512-aK0fHc9CBNx8jbzMYhshZcEv8LtYnBIRYQD5i7w/K/wS9c2+0NSR6B3OVMu5y0hBHYLcMGjfU+dmWYNKH0I85g==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
 
   /postcss-overflow-shorthand@3.0.4(postcss@8.4.29):
     resolution: {integrity: sha512-otYl/ylHK8Y9bcBnPLo3foYFLL6a6Ak+3EQBPOTR7luMYCOsiVTUk1iLvNf6tVPNGXcoL9Hoz37kpfriRIFb4A==}
@@ -19019,7 +19067,7 @@ packages:
   /postcss-page-break@2.0.0:
     resolution: {integrity: sha512-tkpTSrLpfLfD9HvgOlJuigLuk39wVTbbd8RKcy8/ugV2bNBUW3xU+AIqyxhDrQr1VUj1RmyJrBn1YWrqUm9zAQ==}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
 
   /postcss-page-break@3.0.4(postcss@8.4.29):
     resolution: {integrity: sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==}
@@ -19033,7 +19081,7 @@ packages:
     resolution: {integrity: sha512-Zb6byCSLkgRKLODj/5mQugyuj9bvAAw9LqJJjgwz5cYryGeXfFZfSXoP1UfveccFmeq0b/2xxwcTEVScnqGxBg==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
       postcss-values-parser: 2.0.1
 
   /postcss-place@7.0.5(postcss@8.4.29):
@@ -19057,7 +19105,7 @@ packages:
       css-has-pseudo: 0.10.0
       css-prefers-color-scheme: 3.1.1
       cssdb: 4.4.0
-      postcss: 7.0.32
+      postcss: 7.0.39
       postcss-attribute-case-insensitive: 4.0.2
       postcss-color-functional-notation: 2.0.1
       postcss-color-gray: 5.0.0
@@ -19150,7 +19198,7 @@ packages:
     resolution: {integrity: sha512-lgXW9sYJdLqtmw23otOzrtbDXofUdfYzNm4PIpNE322/swES3VU9XlXHeJS46zT2onFO7V1QFdD4Q9LiZj8mew==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
       postcss-selector-parser: 5.0.0
 
   /postcss-pseudo-class-any-link@7.1.6(postcss@8.4.29):
@@ -19208,7 +19256,7 @@ packages:
   /postcss-replace-overflow-wrap@3.0.0:
     resolution: {integrity: sha512-2T5hcEHArDT6X9+9dVSPQdo7QHzG4XKclFT8rU5TzJPDN7RIRTbO9c4drUISOVemLj03aezStHCR2AIcr8XLpw==}
     dependencies:
-      postcss: 7.0.32
+      postcss: 7.0.39
 
   /postcss-replace-overflow-wrap@4.0.0(postcss@8.4.29):
     resolution: {integrity: sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==}
@@ -19246,13 +19294,13 @@ packages:
     resolution: {integrity: sha512-LgsHwQR/EsRYSqlwdGzeaPKVT0Ml7LAT6E75T8W8xLJY62CE4S/l03BWIt3jT8Taq22kXP08s2SfTSzaraoPww==}
     dependencies:
       balanced-match: 1.0.2
-      postcss: 7.0.32
+      postcss: 7.0.39
 
   /postcss-selector-not@4.0.1:
     resolution: {integrity: sha512-YolvBgInEK5/79C+bdFMyzqTg6pkYqDbzZIST/PDMqa/o3qtXenD05apBG2jLgT0/BQ77d4U2UK12jWpilqMAQ==}
     dependencies:
       balanced-match: 1.0.2
-      postcss: 7.0.32
+      postcss: 7.0.39
 
   /postcss-selector-not@6.0.1(postcss@8.4.29):
     resolution: {integrity: sha512-1i9affjAe9xu/y9uqWH+tD4r6/hDaXJruk8xn2x1vzxC2U3J3LKO3zJW4CyxlNhA56pADJ/djpEwpH1RClI2rQ==}
@@ -19644,6 +19692,7 @@ packages:
 
   /proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+    dev: true
 
   /prr@1.0.1:
     resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
@@ -19792,6 +19841,16 @@ packages:
       split-on-first: 1.1.0
       strict-uri-encode: 2.0.0
 
+  /query-string@7.1.3:
+    resolution: {integrity: sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==}
+    engines: {node: '>=6'}
+    dependencies:
+      decode-uri-component: 0.2.2
+      filter-obj: 1.1.0
+      split-on-first: 1.1.0
+      strict-uri-encode: 2.0.0
+    dev: true
+
   /querystring-es3@0.2.1:
     resolution: {integrity: sha512-773xhDQnZBMFobEiztv8LIl70ch5MSF/jUQVlhwFyBILqq96anmoctVIYz+ZRp0qbCKATTn6ev02M3r7Ga5vqA==}
     engines: {node: '>=0.4.x'}
@@ -21140,6 +21199,16 @@ packages:
       react: 17.0.2
     dev: false
 
+  /react-copy-to-clipboard@5.1.0(react@18.2.0):
+    resolution: {integrity: sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==}
+    peerDependencies:
+      react: ^15.3.0 || 16 || 17 || 18
+    dependencies:
+      copy-to-clipboard: 3.3.3
+      prop-types: 15.8.1
+      react: 18.2.0
+    dev: false
+
   /react-dev-inspector@1.9.0(eslint@7.32.0)(react@17.0.2)(typescript@4.9.5)(webpack@5.88.2):
     resolution: {integrity: sha512-1ZlraWRrDz+NgjHwOmTAn/wWoP+6gZt46DS1mRRILlST0iKg4FO2Zj9dDcG5XPaeIIr3OGKwsX5vM6vakmaftA==}
     peerDependencies:
@@ -21623,6 +21692,19 @@ packages:
       refractor: 3.6.0
     dev: false
 
+  /react-syntax-highlighter@15.5.0(react@18.2.0):
+    resolution: {integrity: sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==}
+    peerDependencies:
+      react: '>= 0.14.0'
+    dependencies:
+      '@babel/runtime': 7.22.15
+      highlight.js: 10.7.3
+      lowlight: 1.20.0
+      prismjs: 1.29.0
+      react: 18.2.0
+      refractor: 3.6.0
+    dev: false
+
   /react-tween-state@0.1.5:
     resolution: {integrity: sha512-sJQpjsdn0wjlDIUpfpb7jQGnOG8hAEW2e8k0KPA+xmf5KFa6Xat2JldbmxBhaqP0S/uIXhVE5ymKyH/b9X8nYA==}
     dependencies:
@@ -22478,6 +22560,33 @@ packages:
       - ts-node
     dev: true
 
+  /rollup-plugin-styles@4.0.0(rollup@3.29.1):
+    resolution: {integrity: sha512-A2K2sao84OsTmDxXG83JTCdXWrmgvQkkI38XDat46rdtpGMRm9tSYqeCdlwwGDJF4kKIafhV1mUidqu8MxUGig==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    peerDependencies:
+      rollup: ^2.63.0
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@types/cssnano': 5.1.0(postcss@8.4.29)
+      cosmiconfig: 7.1.0
+      cssnano: 5.1.15(postcss@8.4.29)
+      fs-extra: 10.1.0
+      icss-utils: 5.1.0(postcss@8.4.29)
+      mime-types: 2.1.35
+      p-queue: 6.6.2
+      postcss: 8.4.29
+      postcss-modules-extract-imports: 3.0.0(postcss@8.4.29)
+      postcss-modules-local-by-default: 4.0.3(postcss@8.4.29)
+      postcss-modules-scope: 3.0.0(postcss@8.4.29)
+      postcss-modules-values: 4.0.0(postcss@8.4.29)
+      postcss-value-parser: 4.2.0
+      query-string: 7.1.3
+      resolve: 1.22.4
+      rollup: 3.29.1
+      source-map-js: 1.0.2
+      tslib: 2.6.2
+    dev: true
+
   /rollup-plugin-terser@7.0.2(rollup@2.79.1):
     resolution: {integrity: sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==}
     deprecated: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser