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 fc44b0a37..000000000
Binary files a/webapp/packages/chat-sdk/public/logo192.png and /dev/null differ
diff --git a/webapp/packages/chat-sdk/public/logo512.png b/webapp/packages/chat-sdk/public/logo512.png
deleted file mode 100644
index a4e47a654..000000000
Binary files a/webapp/packages/chat-sdk/public/logo512.png and /dev/null differ
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
