[feature](webapp) upgrade chat version

2026-01-06 17:28:15 +08:00 · 2023-06-30 17:42:03 +08:00
parent 8639c23dc4
commit 805a59dddd
69 changed files with 1570 additions and 842 deletions
--- a/webapp/packages/supersonic-fe/.gitignore
+++ b/webapp/packages/supersonic-fe/.gitignore
@@ -18,8 +18,8 @@ yarn-error.log

 /coverage
 .idea
-package-lock.json
 yarn.lock
+package-lock.json
 *bak
 .vscode

--- a/webapp/packages/supersonic-fe/coding_build/build_prd.sh
+++ b/webapp/packages/supersonic-fe/coding_build/build_prd.sh
@@ -6,7 +6,7 @@ if [ $? -ne 0 ]; then
    exit 1
 fi

-npm run build
+npm run build:inner
 if [ $? -ne 0 ]; then
  echo "build failed"
  exit 1
--- a/webapp/packages/supersonic-fe/config/config.ts
+++ b/webapp/packages/supersonic-fe/config/config.ts
@@ -5,6 +5,7 @@ import themeSettings from './themeSettings';
 import proxy from './proxy';
 import routes from './routes';
 import moment from 'moment';
+import ENV_CONFIG from './envConfig';

 const { REACT_APP_ENV, RUN_TYPE } = process.env;

@@ -19,6 +20,7 @@ export default defineConfig({
      API_BASE_URL: '/api/semantic/', // 直接在define中挂载裸露的全局变量还需要配置eslint，ts相关配置才能导致在使用中不会飘红，冗余较高，这里挂在进程环境下
      CHAT_API_BASE_URL: '/api/chat/',
      AUTH_API_BASE_URL: '/api/auth/',
+      ...ENV_CONFIG,
    },
  },
  metas: [
--- a/webapp/packages/supersonic-fe/config/defaultSettings.ts
+++ b/webapp/packages/supersonic-fe/config/defaultSettings.ts
@@ -13,8 +13,7 @@ const Settings: LayoutSettings & {
  colorWeak: false,
  title: '',
  pwa: false,
-  // logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
-  iconfontUrl: '//at.alicdn.com/t/c/font_3201979_rncj6jun6k.js',
+  iconfontUrl: '//at.alicdn.com/t/c/font_3201979_drwu4z3kkbi.js',
  splitMenus: true,
  menu: {
    defaultOpenAll: true,
--- a/webapp/packages/supersonic-fe/config/envConfig.ts
+++ b/webapp/packages/supersonic-fe/config/envConfig.ts
@@ -0,0 +1,2 @@
+const ENV_CONFIG = {};
+export default ENV_CONFIG;
--- a/webapp/packages/supersonic-fe/package.json
+++ b/webapp/packages/supersonic-fe/package.json
@@ -65,7 +65,7 @@
    "@antv/layout": "^0.3.20",
    "@antv/xflow": "^1.0.55",
    "@babel/runtime": "^7.22.5",
-    "supersonic-chat-sdk": "^0.1.0",
+    "supersonic-chat-sdk": "^0.0.0",
    "@types/numeral": "^2.0.2",
    "@types/react-draft-wysiwyg": "^1.13.2",
    "@types/react-syntax-highlighter": "^13.5.0",
@@ -144,4 +144,4 @@
    "@types/react": "17.0.0"
  },
  "__npminstall_done": false
-}
+}
--- a/webapp/packages/supersonic-fe/src/app.tsx
+++ b/webapp/packages/supersonic-fe/src/app.tsx
@@ -5,18 +5,12 @@ import { history } from 'umi';
 import type { RunTimeLayoutConfig } from 'umi';
 import RightContent from '@/components/RightContent';
 import S2Icon, { ICON } from '@/components/S2Icon';
-import qs from 'qs';
 import { queryCurrentUser } from './services/user';
-import { queryToken } from './services/login';
 import defaultSettings from '../config/defaultSettings';
 import settings from '../config/themeSettings';
-import { deleteUrlQuery } from './utils/utils';
-import { AUTH_TOKEN_KEY, FROM_URL_KEY } from '@/common/constants';
 export { request } from './services/request';
 import { ROUTE_AUTH_CODES } from '../config/routes';

-const TOKEN_KEY = AUTH_TOKEN_KEY;
-
 const replaceRoute = '/';

 const getRuningEnv = async () => {
@@ -40,25 +34,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 = () => {
  const { RUN_TYPE, APP_TARGET } = process.env;
  if (RUN_TYPE === 'local') {
@@ -89,12 +64,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();
-  }

  const currentUser = await fetchUserInfo();

--- a/webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/index.tsx
@@ -1,6 +1,6 @@
 import IconFont from '@/components/IconFont';
-import { getTextWidth, groupByColumn, isMobile } from '@/utils/utils';
-import { AutoComplete, Select, Tag } from 'antd';
+import { getTextWidth, groupByColumn } from '@/utils/utils';
+import { AutoComplete, Select, Tag, Tooltip } from 'antd';
 import classNames from 'classnames';
 import { debounce } from 'lodash';
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
@@ -8,13 +8,18 @@ import type { ForwardRefRenderFunction } from 'react';
 import { searchRecommend } from 'supersonic-chat-sdk';
 import { SemanticTypeEnum, SEMANTIC_TYPE_MAP } from '../constants';
 import styles from './style.less';
-import { PLACE_HOLDER } from '@/common/constants';
+import { PLACE_HOLDER } from '../constants';
+import { DomainType } from '../type';

 type Props = {
  inputMsg: string;
  chatId?: number;
+  currentDomain?: DomainType;
+  domains: DomainType[];
+  isMobileMode?: boolean;
  onInputMsgChange: (value: string) => void;
  onSendMsg: (msg: string, domainId?: number) => void;
+  onAddConversation: () => void;
 };

 const { OptGroup, Option } = Select;
@@ -30,9 +35,19 @@ const compositionEndEvent = () => {
 };

 const ChatFooter: ForwardRefRenderFunction<any, Props> = (
-  { inputMsg, chatId, onInputMsgChange, onSendMsg },
+  {
+    inputMsg,
+    chatId,
+    currentDomain,
+    domains,
+    isMobileMode,
+    onInputMsgChange,
+    onSendMsg,
+    onAddConversation,
+  },
  ref,
 ) => {
+  const [domainOptions, setDomainOptions] = useState<DomainType[]>([]);
  const [stepOptions, setStepOptions] = useState<Record<string, any[]>>({});
  const [open, setOpen] = useState(false);
  const [focused, setFocused] = useState(false);
@@ -73,39 +88,61 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
    };
  }, []);

+  const getStepOptions = (recommends: any[]) => {
+    const data = groupByColumn(recommends, 'domainName');
+    return isMobileMode && recommends.length > 6
+      ? Object.keys(data)
+          .slice(0, 4)
+          .reduce((result, key) => {
+            result[key] = data[key].slice(
+              0,
+              Object.keys(data).length > 2 ? 2 : Object.keys(data).length > 1 ? 3 : 6,
+            );
+            return result;
+          }, {})
+      : data;
+  };
+
+  const processMsg = (msg: string, domains: DomainType[]) => {
+    let msgValue = msg;
+    let domainId: number | undefined;
+    if (msg?.[0] === '@') {
+      const domain = domains.find((item) => msg.includes(`@${item.name}`));
+      msgValue = domain ? msg.replace(`@${domain.name}`, '') : msg;
+      domainId = domain?.id;
+    }
+    return { msgValue, domainId };
+  };
+
  const debounceGetWordsFunc = useCallback(() => {
-    const getAssociateWords = async (msg: string, chatId?: number) => {
+    const getAssociateWords = async (
+      msg: string,
+      domains: DomainType[],
+      chatId?: number,
+      domain?: DomainType,
+    ) => {
      if (isPinyin) {
        return;
      }
+      if (msg === '' || (msg.length === 1 && msg[0] === '@')) {
+        return;
+      }
      fetchRef.current += 1;
      const fetchId = fetchRef.current;
-      const res = await searchRecommend(msg, chatId);
+      const { msgValue, domainId } = processMsg(msg, domains);
+      const res = await searchRecommend(msgValue.trim(), chatId, domainId || domain?.id);
      if (fetchId !== fetchRef.current) {
        return;
      }
-      const recommends = msg ? res.data.data || [] : [];
+
+      const recommends = msgValue ? res.data.data || [] : [];
      const stepOptionList = recommends.map((item: any) => item.subRecommend);

      if (stepOptionList.length > 0 && stepOptionList.every((item: any) => item !== null)) {
-        const data = groupByColumn(recommends, 'domainName');
-        const optionsData =
-          isMobile && recommends.length > 6
-            ? Object.keys(data)
-              .slice(0, 4)
-              .reduce((result, key) => {
-                result[key] = data[key].slice(
-                  0,
-                  Object.keys(data).length > 2 ? 2 : Object.keys(data).length > 1 ? 3 : 6,
-                );
-                return result;
-              }, {})
-            : data;
-        setStepOptions(optionsData);
+        setStepOptions(getStepOptions(recommends));
      } else {
        setStepOptions({});
      }
-
      setOpen(recommends.length > 0);
    };
    return debounce(getAssociateWords, 20);
@@ -114,13 +151,27 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
  const [debounceGetWords] = useState<any>(debounceGetWordsFunc);

  useEffect(() => {
+    if (inputMsg.length === 1 && inputMsg[0] === '@') {
+      setOpen(true);
+      setDomainOptions(domains);
+      setStepOptions({});
+      return;
+    } else {
+      setOpen(false);
+      if (domainOptions.length > 0) {
+        setTimeout(() => {
+          setDomainOptions([]);
+        }, 500);
+      }
+    }
    if (!isSelect) {
-      debounceGetWords(inputMsg, chatId);
+      debounceGetWords(inputMsg, domains, chatId, currentDomain);
    } else {
      isSelect = false;
    }
    if (!inputMsg) {
      setStepOptions({});
+      fetchRef.current = 0;
    }
  }, [inputMsg]);

@@ -140,6 +191,10 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
    const textWidth = getTextWidth(inputMsg);
    if (Object.keys(stepOptions).length > 0) {
      autoCompleteDropdown.style.marginLeft = `${textWidth}px`;
+    } else {
+      setTimeout(() => {
+        autoCompleteDropdown.style.marginLeft = `0px`;
+      }, 200);
    }
  }, [stepOptions]);

@@ -157,18 +212,20 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
    if (option && isSelect) {
      onSendMsg(option.recommend, option.domainId);
    } else {
-      onSendMsg(value);
+      onSendMsg(value.trim());
    }
  };

  const autoCompleteDropdownClass = classNames(styles.autoCompleteDropdown, {
-    [styles.external]: true,
-    [styles.mobile]: isMobile,
+    [styles.mobile]: isMobileMode,
+    [styles.domainOptions]: domainOptions.length > 0,
  });

  const onSelect = (value: string) => {
    isSelect = true;
-    sendMsg(value);
+    if (domainOptions.length === 0) {
+      sendMsg(value);
+    }
    setOpen(false);
    setTimeout(() => {
      isSelect = false;
@@ -176,20 +233,31 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
  };

  const chatFooterClass = classNames(styles.chatFooter, {
-    [styles.mobile]: isMobile,
+    [styles.mobile]: isMobileMode,
  });

  return (
    <div className={chatFooterClass}>
      <div className={styles.composer}>
+        <Tooltip title="新建对话">
+          <IconFont
+            type="icon-icon-add-conversation-line"
+            className={styles.addConversation}
+            onClick={onAddConversation}
+          />
+        </Tooltip>
        <div className={styles.composerInputWrapper}>
          <AutoComplete
            className={styles.composerInput}
-            placeholder={PLACE_HOLDER}
+            placeholder={
+              currentDomain
+                ? `请输入【${currentDomain.name}】主题的问题，可使用@切换到其他主题`
+                : PLACE_HOLDER
+            }
            value={inputMsg}
            onChange={onInputMsgChange}
            onSelect={onSelect}
-            autoFocus={!isMobile}
+            autoFocus={!isMobileMode}
            backfill
            ref={inputRef}
            id="chatInput"
@@ -210,46 +278,68 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
            listHeight={500}
            allowClear
            open={open}
-            getPopupContainer={isMobile ? (triggerNode) => triggerNode.parentNode : undefined}
+            getPopupContainer={(triggerNode) => triggerNode.parentNode}
          >
-            {Object.keys(stepOptions).map((key) => {
-              return (
-                <OptGroup key={key} label={key}>
-                  {stepOptions[key].map((option) => (
+            {domainOptions.length > 0
+              ? domainOptions.map((domain) => {
+                  return (
                    <Option
-                      key={`${option.recommend}${option.domainName ? `_${option.domainName}` : ''}`}
-                      value={
-                        Object.keys(stepOptions).length === 1
-                          ? option.recommend
-                          : `${option.domainName || ''}${option.recommend}`
-                      }
+                      key={domain.id}
+                      value={`@${domain.name} `}
                      className={styles.searchOption}
                    >
-                      <div className={styles.optionContent}>
-                        {option.schemaElementType && (
-                          <Tag
-                            className={styles.semanticType}
-                            color={
-                              option.schemaElementType === SemanticTypeEnum.DIMENSION ||
-                              option.schemaElementType === SemanticTypeEnum.DOMAIN
-                                ? 'blue'
-                                : option.schemaElementType === SemanticTypeEnum.VALUE
-                                  ? 'geekblue'
-                                  : 'orange'
-                            }
-                          >
-                            {SEMANTIC_TYPE_MAP[option.schemaElementType] ||
-                              option.schemaElementType ||
-                              '维度'}
-                          </Tag>
-                        )}
-                        {option.subRecommend}
-                      </div>
+                      {domain.name}
                    </Option>
-                  ))}
-                </OptGroup>
-              );
-            })}
+                  );
+                })
+              : Object.keys(stepOptions).map((key) => {
+                  return (
+                    <OptGroup key={key} label={key}>
+                      {stepOptions[key].map((option) => {
+                        let optionValue =
+                          Object.keys(stepOptions).length === 1
+                            ? option.recommend
+                            : `${option.domainName || ''}${option.recommend}`;
+                        if (inputMsg[0] === '@') {
+                          const domain = domains.find((item) => inputMsg.includes(item.name));
+                          optionValue = domain
+                            ? `@${domain.name} ${option.recommend}`
+                            : optionValue;
+                        }
+                        return (
+                          <Option
+                            key={`${option.recommend}${
+                              option.domainName ? `_${option.domainName}` : ''
+                            }`}
+                            value={optionValue}
+                            className={styles.searchOption}
+                          >
+                            <div className={styles.optionContent}>
+                              {option.schemaElementType && (
+                                <Tag
+                                  className={styles.semanticType}
+                                  color={
+                                    option.schemaElementType === SemanticTypeEnum.DIMENSION ||
+                                    option.schemaElementType === SemanticTypeEnum.DOMAIN
+                                      ? 'blue'
+                                      : option.schemaElementType === SemanticTypeEnum.VALUE
+                                      ? 'geekblue'
+                                      : 'orange'
+                                  }
+                                >
+                                  {SEMANTIC_TYPE_MAP[option.schemaElementType] ||
+                                    option.schemaElementType ||
+                                    '维度'}
+                                </Tag>
+                              )}
+                              {option.subRecommend}
+                            </div>
+                          </Option>
+                        );
+                      })}
+                    </OptGroup>
+                  );
+                })}
          </AutoComplete>
          <div
            className={classNames(styles.sendBtn, {
--- a/webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/style.less
@@ -11,6 +11,32 @@
    display: flex;
    height: 46px;

+    .collapseBtn {
+      height: 46px;
+      margin: 0 10px;
+      color: var(--text-color-third);
+      font-size: 20px;
+      line-height: 46px;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--chat-blue);
+      }
+    }
+
+    .addConversation {
+      height: 46px;
+      margin: 0 20px 0 10px;
+      color: var(--text-color-fourth);
+      font-size: 26px;
+      line-height: 54px;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--chat-blue);
+      }
+    }
+
    .composerInputWrapper {
      flex: 1;

@@ -28,7 +54,7 @@
            background: #fff;
            border: 0;
            border-radius: 24px;
-            box-shadow: rgba(0, 0, 0, 0.07) 0 -0.5px 0, rgba(0, 0, 0, 0.1) 0 0 18px;
+            box-shadow: rgba(0, 0, 0, 0.07) 0px -0.5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 18px;
            transition: border-color 0.15s ease-in-out;
            resize: none;

@@ -62,7 +88,7 @@
      :global {
        .ant-select-focused {
          .ant-select-selector {
-            box-shadow: rgb(74, 114, 245) 0 0 3px !important;
+            box-shadow: rgb(74, 114, 245) 0px 0px 3px !important;
          }
        }
      }
@@ -96,6 +122,11 @@
    margin: 12px;
    margin-bottom: 20px;

+    .addConversation {
+      height: 40px;
+      margin: 0 12px 0 4px;
+    }
+
    .composer {
      height: 40px;

@@ -134,17 +165,26 @@
 }

 .autoCompleteDropdown {
-  left: 285px !important;
+  left: 20px !important;
  width: fit-content !important;
-  min-width: 50px !important;
+  min-width: 100px !important;
  border-radius: 6px;

-  &.external {
-    left: 226px !important;
-  }
+  &.domainOptions {
+    width: 150px !important;

-  &.mobile {
-    left: 20px !important;
+    .searchOption {
+      padding: 0 10px;
+      color: var(--text-color-secondary);
+      font-size: 14px;
+    }
+
+    :global {
+      .ant-select-item {
+        height: 30px !important;
+        line-height: 30px !important;
+      }
+    }
  }
 }

--- a/webapp/packages/supersonic-fe/src/pages/Chat/MessageContainer.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/MessageContainer.tsx
@@ -1,20 +1,23 @@
 import Text from './components/Text';
-import { memo, useCallback, useEffect } from 'react';
+import { memo, useCallback, useEffect, useState } from 'react';
 import { isEqual } from 'lodash';
-import styles from './style.less';
-import { connect, Dispatch } from 'umi';
 import { ChatItem } from 'supersonic-chat-sdk';
 import type { MsgDataType } from 'supersonic-chat-sdk';
 import { MessageItem, MessageTypeEnum } from './type';
+import classNames from 'classnames';
+import { Skeleton } from 'antd';
+import styles from './style.less';

 type Props = {
  id: string;
  chatId: number;
  messageList: MessageItem[];
-  dispatch: Dispatch;
+  miniProgramLoading: boolean;
+  isMobileMode?: boolean;
  onClickMessageContainer: () => void;
-  onMsgDataLoaded: (data: MsgDataType) => void;
+  onMsgDataLoaded: (data: MsgDataType, questionId: string | number) => void;
  onSelectSuggestion: (value: string) => void;
+  onCheckMore: (data: MsgDataType) => void;
  onUpdateMessageScroll: () => void;
 };

@@ -22,52 +25,92 @@ const MessageContainer: React.FC<Props> = ({
  id,
  chatId,
  messageList,
-  dispatch,
+  miniProgramLoading,
+  isMobileMode,
  onClickMessageContainer,
  onMsgDataLoaded,
  onSelectSuggestion,
  onUpdateMessageScroll,
 }) => {
-  const onWindowResize = useCallback(() => {
-    dispatch({
-      type: 'windowResize/setTriggerResize',
-      payload: true,
-    });
+  const [triggerResize, setTriggerResize] = useState(false);
+
+  const onResize = useCallback(() => {
+    setTriggerResize(true);
    setTimeout(() => {
-      dispatch({
-        type: 'windowResize/setTriggerResize',
-        payload: false,
-      });
+      setTriggerResize(false);
    }, 0);
  }, []);

  useEffect(() => {
-    window.addEventListener('resize', onWindowResize);
+    window.addEventListener('resize', onResize);
    return () => {
-      window.removeEventListener('resize', onWindowResize);
+      window.removeEventListener('resize', onResize);
    };
  }, []);

+  const messageListClass = classNames(styles.messageList, {
+    [styles.miniProgramLoading]: miniProgramLoading,
+  });
+
+  const getFollowQuestions = (index: number) => {
+    const followQuestions: string[] = [];
+    const currentMsg = messageList[index];
+    const currentMsgData = currentMsg.msgData;
+    const msgs = messageList.slice(0, index).reverse();
+
+    for (let i = 0; i < msgs.length; i++) {
+      const msg = msgs[i];
+      const msgDomainId = msg.msgData?.chatContext?.domainId;
+      const msgEntityId = msg.msgData?.entityInfo?.entityId;
+      const currentMsgDomainId = currentMsgData?.chatContext?.domainId;
+      const currentMsgEntityId = currentMsgData?.entityInfo?.entityId;
+
+      if (
+        (msg.type === MessageTypeEnum.QUESTION || msg.type === MessageTypeEnum.INSTRUCTION) &&
+        !!currentMsgDomainId &&
+        !!currentMsgEntityId &&
+        msgDomainId === currentMsgDomainId &&
+        msgEntityId === currentMsgEntityId &&
+        msg.msg
+      ) {
+        followQuestions.push(msg.msg);
+      } else {
+        break;
+      }
+    }
+    return followQuestions;
+  };
+
  return (
    <div id={id} className={styles.messageContainer} onClick={onClickMessageContainer}>
-      <div className={styles.messageList}>
+      {miniProgramLoading && <Skeleton className={styles.messageLoading} paragraph={{ rows: 5 }} />}
+      <div className={messageListClass}>
        {messageList.map((msgItem: MessageItem, index: number) => {
+          const { id: msgId, domainId, type, msg, msgValue, identityMsg, msgData } = msgItem;
+
+          const followQuestions = getFollowQuestions(index);
+
          return (
-            <div key={`${msgItem.id}`} id={`${msgItem.id}`} className={styles.messageItem}>
-              {msgItem.type === MessageTypeEnum.TEXT && <Text position="left" data={msgItem.msg} />}
-              {msgItem.type === MessageTypeEnum.QUESTION && (
+            <div key={msgId} id={`${msgId}`} className={styles.messageItem}>
+              {type === MessageTypeEnum.TEXT && <Text position="left" data={msg} />}
+              {type === MessageTypeEnum.QUESTION && (
                <>
-                  <Text position="right" data={msgItem.msg} quote={msgItem.quote} />
+                  <Text position="right" data={msg} />
+                  {identityMsg && <Text position="left" data={identityMsg} />}
                  <ChatItem
-                    msg={msgItem.msg || ''}
-                    msgData={msgItem.msgData}
+                    msg={msgValue || msg || ''}
+                    followQuestions={followQuestions}
+                    msgData={msgData}
                    conversationId={chatId}
-                    classId={msgItem.domainId}
+                    domainId={domainId}
                    isLastMessage={index === messageList.length - 1}
-                    onLastMsgDataLoaded={onMsgDataLoaded}
+                    isMobileMode={isMobileMode}
+                    triggerResize={triggerResize}
+                    onMsgDataLoaded={(data: MsgDataType) => {
+                      onMsgDataLoaded(data, msgId);
+                    }}
                    onSelectSuggestion={onSelectSuggestion}
                    onUpdateMessageScroll={onUpdateMessageScroll}
-                    suggestionEnable
                  />
                </>
              )}
@@ -80,10 +123,14 @@ const MessageContainer: React.FC<Props> = ({
 };

 function areEqual(prevProps: Props, nextProps: Props) {
-  if (prevProps.id === nextProps.id && isEqual(prevProps.messageList, nextProps.messageList)) {
+  if (
+    prevProps.id === nextProps.id &&
+    isEqual(prevProps.messageList, nextProps.messageList) &&
+    prevProps.miniProgramLoading === nextProps.miniProgramLoading
+  ) {
    return true;
  }
  return false;
 }

-export default connect()(memo(MessageContainer, areEqual));
+export default memo(MessageContainer, areEqual);
--- a/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Context/DomainInfo.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Context/DomainInfo.tsx
@@ -0,0 +1,22 @@
+import { DomainType } from '../../type';
+import styles from './style.less';
+
+type Props = {
+  domain: DomainType;
+};
+
+const DomainInfo: React.FC<Props> = ({ domain }) => {
+  return (
+    <div className={styles.context}>
+      <div className={styles.title}>相关信息</div>
+      <div className={styles.content}>
+        <div className={styles.field}>
+          <span className={styles.fieldName}>主题域：</span>
+          <span className={styles.fieldValue}>{domain.name}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DomainInfo;
--- a/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Context/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Context/index.tsx
@@ -1,13 +1,14 @@
 import moment from 'moment';
 import styles from './style.less';
-import type { ChatContextType } from 'supersonic-chat-sdk';
+import type { ChatContextType, EntityInfoType } from 'supersonic-chat-sdk';

 type Props = {
  chatContext: ChatContextType;
+  entityInfo?: EntityInfoType;
 };

-const Context: React.FC<Props> = ({ chatContext }) => {
-  const { domainName, metrics, dateInfo, filters } = chatContext;
+const Context: React.FC<Props> = ({ chatContext, entityInfo }) => {
+  const { domainName, metrics, dateInfo, dimensionFilters } = chatContext;

  return (
    <div className={styles.context}>
@@ -17,17 +18,15 @@ const Context: React.FC<Props> = ({ chatContext }) => {
          <span className={styles.fieldName}>主题域：</span>
          <span className={styles.fieldValue}>{domainName}</span>
        </div>
-        {
-          dateInfo && (
-            <div className={styles.field}>
-              <span className={styles.fieldName}>时间范围：</span>
-              <span className={styles.fieldValue}>
-                {dateInfo.text ||
-                  `近${moment(dateInfo.endDate).diff(moment(dateInfo.startDate), 'days') + 1}天`}
-              </span>
-            </div>
-          )
-        }
+        {dateInfo && (
+          <div className={styles.field}>
+            <span className={styles.fieldName}>时间范围：</span>
+            <span className={styles.fieldValue}>
+              {dateInfo.text ||
+                `近${moment(dateInfo.endDate).diff(moment(dateInfo.startDate), 'days') + 1}天`}
+            </span>
+          </div>
+        )}
        {metrics && metrics.length > 0 && (
          <div className={styles.field}>
            <span className={styles.fieldName}>指标：</span>
@@ -36,20 +35,22 @@ const Context: React.FC<Props> = ({ chatContext }) => {
            </span>
          </div>
        )}
-        {filters && filters.length > 0 && (
-          <div className={styles.filterSection}>
-            <div className={styles.fieldName}>筛选条件：</div>
-            <div className={styles.filterValues}>
-              {filters.map((filter) => {
-                return (
-                  <div className={styles.filterItem} key={filter.name}>
-                    {filter.name}：{filter.value}
-                  </div>
-                );
-              })}
+        {dimensionFilters &&
+          dimensionFilters.length > 0 &&
+          !(entityInfo?.dimensions && entityInfo.dimensions.length > 0) && (
+            <div className={styles.filterSection}>
+              <div className={styles.fieldName}>筛选条件：</div>
+              <div className={styles.filterValues}>
+                {dimensionFilters.map((filter) => {
+                  return (
+                    <div className={styles.filterItem} key={filter.name}>
+                      {filter.name}：{filter.value}
+                    </div>
+                  );
+                })}
+              </div>
            </div>
-          </div>
-        )}
+          )}
      </div>
    </div>
  );
--- a/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Context/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Context/style.less
@@ -1,6 +1,8 @@
 .context {
  display: flex;
  flex-direction: column;
+  padding: 20px 10px 0;
+  border-top: 1px solid #ccc;

  .title {
    margin-bottom: 22px;
@@ -45,11 +47,11 @@
  }

  .fieldValue {
+    max-width: 150px;
+    overflow: hidden;
    color: var(--text-color);
-
-    &.switchField {
-      cursor: pointer;
-    }
+    white-space: nowrap;
+    text-overflow: ellipsis;
  }

  .filterValues {
--- a/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Conversation/ConversationHistory/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Conversation/ConversationHistory/index.tsx
@@ -1,6 +1,6 @@
 import { CloseOutlined } from '@ant-design/icons';
 import moment from 'moment';
-import type { ConversationDetailType } from '../../type';
+import type { ConversationDetailType } from '../../../type';
 import styles from './style.less';

 type Props = {
--- a/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Conversation/ConversationHistory/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Conversation/ConversationHistory/style.less
@@ -5,8 +5,8 @@
  z-index: 10;
  display: flex;
  flex-direction: column;
-  width: 215px;
-  height: calc(100vh - 48px);
+  width: 100%;
+  height: calc(100vh - 78px);
  overflow: hidden;
  background: #f3f3f7;
  border-right: 1px solid var(--border-color-base);
--- a/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Conversation/ConversationModal/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Conversation/ConversationModal/index.tsx
@@ -1,7 +1,8 @@
 import { Form, Input, Modal } from 'antd';
 import { useEffect, useRef, useState } from 'react';
-import { updateConversationName } from '../../service';
-import type { ConversationDetailType } from '../../type';
+import { updateConversationName } from '../../../service';
+import type { ConversationDetailType } from '../../../type';
+import { CHAT_TITLE } from '../../../constants';

 const FormItem = Form.Item;

@@ -43,7 +44,7 @@ const ConversationModal: React.FC<Props> = ({ visible, editConversation, onClose

  return (
    <Modal
-      title="修改问答对话名称"
+      title={`修改${CHAT_TITLE}问答名称`}
      visible={visible}
      onCancel={onClose}
      onOk={onConfirm}
@@ -52,7 +53,7 @@ const ConversationModal: React.FC<Props> = ({ visible, editConversation, onClose
      <Form {...layout} form={form}>
        <FormItem name="conversationName" label="名称" rules={[{ required: true }]}>
          <Input
-            placeholder="请输入问答对话名称"
+            placeholder={`请输入${CHAT_TITLE}问答名称`}
            ref={conversationNameInputRef}
            onPressEnter={onConfirm}
          />
--- a/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Conversation/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Conversation/index.tsx
@@ -1,5 +1,5 @@
 import IconFont from '@/components/IconFont';
-import { Dropdown, Menu, message } from 'antd';
+import { Dropdown, Menu } from 'antd';
 import classNames from 'classnames';
 import {
  useEffect,
@@ -9,11 +9,12 @@ import {
  useImperativeHandle,
 } from 'react';
 import { useLocation } from 'umi';
-import ConversationHistory from './components/ConversationHistory';
-import ConversationModal from './components/ConversationModal';
-import { deleteConversation, getAllConversations, saveConversation } from './service';
+import ConversationHistory from './ConversationHistory';
+import ConversationModal from './ConversationModal';
+import { deleteConversation, getAllConversations, saveConversation } from '../../service';
 import styles from './style.less';
-import { ConversationDetailType } from './type';
+import { ConversationDetailType } from '../../type';
+import { DEFAULT_CONVERSATION_NAME } from '../../constants';

 type Props = {
  currentConversation?: ConversationDetailType;
@@ -65,7 +66,7 @@ const Conversation: ForwardRefRenderFunction<any, Props> = (
  };

  useEffect(() => {
-    if (q && cid === undefined) {
+    if (q && cid === undefined && location.pathname === '/workbench/chat') {
      onAddConversation(q);
    } else {
      initData();
@@ -73,7 +74,7 @@ const Conversation: ForwardRefRenderFunction<any, Props> = (
  }, [q]);

  const addConversation = async (name?: string) => {
-    await saveConversation(name || '新问答对话');
+    await saveConversation(name || DEFAULT_CONVERSATION_NAME);
    return updateData();
  };

@@ -96,21 +97,14 @@ const Conversation: ForwardRefRenderFunction<any, Props> = (
    }
  };

-  const onNewChat = () => {
-    onAddConversation('新问答对话');
-  };
-
  const onShowHistory = () => {
    setHistoryVisible(true);
  };

-  const onShare = () => {
-    message.info('正在开发中，敬请期待');
-  };
-
  return (
    <div className={styles.conversation}>
-      <div className={styles.leftSection}>
+      <div className={styles.conversationSection}>
+        <div className={styles.sectionTitle}>对话管理</div>
        <div className={styles.conversationList}>
          {conversations.map((item) => {
            const conversationItemClass = classNames(styles.conversationItem, {
@@ -133,7 +127,6 @@ const Conversation: ForwardRefRenderFunction<any, Props> = (
                trigger={['contextMenu']}
              >
                <div
-                  key={item.chatId}
                  className={conversationItemClass}
                  onClick={() => {
                    onSelectConversation(item);
@@ -159,19 +152,6 @@ const Conversation: ForwardRefRenderFunction<any, Props> = (
            </div>
          </div>
        </div>
-        <div className={styles.operateSection}>
-          <div className={styles.operateItem} onClick={onNewChat}>
-            <IconFont type="icon-add" className={`${styles.operateIcon} ${styles.addIcon}`} />
-            <div className={styles.operateLabel}>新建对话</div>
-          </div>
-          <div className={styles.operateItem} onClick={onShare}>
-            <IconFont
-              type="icon-fenxiang2"
-              className={`${styles.operateIcon} ${styles.shareIcon}`}
-            />
-            <div className={styles.operateLabel}>分享</div>
-          </div>
-        </div>
      </div>
      {historyVisible && (
        <ConversationHistory
--- a/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Conversation/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Conversation/style.less
@@ -0,0 +1,50 @@
+.conversation {
+  position: relative;
+  margin-top: 30px;
+  padding: 0 10px;
+
+  .conversationSection {
+    width: 100%;
+    height: 100%;
+
+    .sectionTitle {
+      margin-bottom: 12px;
+      color: var(--text-color);
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    .conversationList {
+      .conversationItem {
+        cursor: pointer;
+        .conversationItemContent {
+          display: flex;
+          align-items: center;
+          padding: 10px 0;
+          color: var(--text-color-third);
+
+          .conversationIcon {
+            margin-right: 10px;
+            color: var(--text-color-fourth);
+            font-size: 20px;
+          }
+
+          .conversationContent {
+            width: 160px;
+            overflow: hidden;
+            color: var(--text-color-third);
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+        }
+
+        &.activeConversationItem,
+        &:hover {
+          .conversationContent {
+            color: var(--chat-blue);
+          }
+        }
+      }
+    }
+  }
+}
--- a/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Domains/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Domains/index.tsx
@@ -0,0 +1,44 @@
+import classNames from 'classnames';
+import { DomainType } from '../../type';
+import styles from './style.less';
+
+type Props = {
+  domains: DomainType[];
+  currentDomain?: DomainType;
+  onSelectDomain: (domain: DomainType) => void;
+};
+
+const Domains: React.FC<Props> = ({ domains, currentDomain, onSelectDomain }) => {
+  return (
+    <div className={styles.domains}>
+      <div className={styles.titleBar}>
+        <div className={styles.title}>主题列表</div>
+        <div className={styles.subTitle}>(可在输入框@)</div>
+      </div>
+      <div className={styles.domainList}>
+        {domains
+          .filter((domain) => domain.id !== -1)
+          .map((domain) => {
+            const domainItemClass = classNames(styles.domainItem, {
+              [styles.activeDomainItem]: currentDomain?.id === domain.id,
+            });
+            return (
+              <div key={domain.id}>
+                <div
+                  className={domainItemClass}
+                  onClick={() => {
+                    onSelectDomain(domain);
+                  }}
+                >
+                  {/* <IconFont type="icon-yinleku" className={styles.domainIcon} /> */}
+                  <div className={styles.domainName}>{domain.name}</div>
+                </div>
+              </div>
+            );
+          })}
+      </div>
+    </div>
+  );
+};
+
+export default Domains;
--- a/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Domains/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Domains/style.less
@@ -0,0 +1,70 @@
+.domains {
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid #ccc;
+
+  .titleBar {
+    display: flex;
+    align-items: center;
+    column-gap: 4px;
+    margin-bottom: 12px;
+
+    .title {
+      padding-left: 10px;
+      color: var(--text-color);
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    .subTitle {
+      font-size: 13px;
+      color: var(--text-color-third);
+    }
+  }
+
+  .domainList {
+    display: flex;
+    flex-direction: column;
+
+    .domainItem {
+      display: flex;
+      align-items: center;
+      padding: 4px 10px;
+      font-size: 14px;
+      cursor: pointer;
+
+      .loadingIcon {
+        margin-right: 6px;
+        color: var(--text-color-fifth);
+        font-size: 12px;
+      }
+
+      .arrowIcon {
+        margin-right: 6px;
+        color: var(--text-color-fifth);
+        font-size: 12px;
+      }
+
+      .domainIcon {
+        margin-right: 6px;
+        color: var(--blue);
+      }
+
+      .domainName {
+        width: 150px;
+        overflow: hidden;
+        color: var(--text-color-secondary);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      &:hover {
+        background-color: var(--link-hover-bg-color);
+      }
+
+      &.activeDomainItem {
+        background-color: var(--link-hover-bg-color);
+      }
+    }
+  }
+}
--- a/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Introduction/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Introduction/index.tsx
@@ -20,11 +20,15 @@ const Introduction: React.FC<Props> = ({ currentEntity }) => {
          return (
            <div className={styles.field} key={dimension.name}>
              <span className={styles.fieldName}>{dimension.name}：</span>
-              <span className={styles.fieldValue}>
-                {dimension.bizName.includes('publish_time')
-                  ? moment(dimension.value).format('YYYY-MM-DD')
-                  : dimension.value}
-              </span>
+              {dimension.bizName.includes('photo') ? (
+                <img width={40} height={40} src={dimension.value} alt="" />
+              ) : (
+                <span className={styles.fieldValue}>
+                  {dimension.bizName.includes('publish_time')
+                    ? moment(dimension.value).format('YYYY-MM-DD')
+                    : dimension.value}
+                </span>
+              )}
            </div>
          );
        })}
--- a/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Introduction/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Introduction/style.less
@@ -1,7 +1,7 @@
 .introduction {
  display: flex;
  flex-direction: column;
-  padding-bottom: 4px;
+  padding: 0 10px 4px;

  .title {
    margin-bottom: 22px;
--- a/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/index.tsx
@@ -3,24 +3,55 @@ import Context from './Context';
 import Introduction from './Introduction';
 import styles from './style.less';
 import type { MsgDataType } from 'supersonic-chat-sdk';
+import Domains from './Domains';
+import { ConversationDetailType, DomainType } from '../type';
+import DomainInfo from './Context/DomainInfo';
+import Conversation from './Conversation';

 type Props = {
+  domains: DomainType[];
  currentEntity?: MsgDataType;
+  currentConversation?: ConversationDetailType;
+  currentDomain?: DomainType;
+  conversationRef: any;
+  onSelectConversation: (conversation: ConversationDetailType, name?: string) => void;
+  onSelectDomain: (domain: DomainType) => void;
 };

-const RightSection: React.FC<Props> = ({ currentEntity }) => {
+const RightSection: React.FC<Props> = ({
+  domains,
+  currentEntity,
+  currentDomain,
+  currentConversation,
+  conversationRef,
+  onSelectConversation,
+  onSelectDomain,
+}) => {
  const rightSectionClass = classNames(styles.rightSection, {
-    [styles.external]: true,
+    [styles.external]: false,
  });

  return (
    <div className={rightSectionClass}>
-      {currentEntity && (
+      <Conversation
+        currentConversation={currentConversation}
+        onSelectConversation={onSelectConversation}
+        ref={conversationRef}
+      />
+      {currentDomain && !currentEntity && (
        <div className={styles.entityInfo}>
-          {currentEntity?.chatContext && <Context chatContext={currentEntity.chatContext} />}
+          <DomainInfo domain={currentDomain} />
+        </div>
+      )}
+      {!!currentEntity?.chatContext?.domainId && (
+        <div className={styles.entityInfo}>
+          <Context chatContext={currentEntity.chatContext} entityInfo={currentEntity.entityInfo} />
          <Introduction currentEntity={currentEntity} />
        </div>
      )}
+      {domains && domains.length > 0 && (
+        <Domains domains={domains} currentDomain={currentDomain} onSelectDomain={onSelectDomain} />
+      )}
    </div>
  );
 };
--- a/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/style.less
@@ -1,13 +1,12 @@
 .rightSection {
  width: 225px;
  height: calc(100vh - 48px);
-  padding-right: 10px;
+  margin-right: 12px;
  padding-bottom: 10px;
-  padding-left: 20px;
  overflow-y: auto;

  .entityInfo {
-    margin-top: 30px;
+    margin-top: 20px;

    .topInfo {
      margin-bottom: 20px;
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/LeftAvatar/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/components/LeftAvatar/index.tsx
@@ -0,0 +1,8 @@
+import IconFont from '@/components/IconFont';
+import styles from './style.less';
+
+const LeftAvatar = () => {
+  return <IconFont type="icon-zhinengsuanfa" className={styles.leftAvatar} />;
+};
+
+export default LeftAvatar;
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/LeftAvatar/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/components/LeftAvatar/style.less
@@ -0,0 +1,13 @@
+.leftAvatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-right: 6px;
+  margin-right: 6px;
+  color: var(--chat-blue);
+  font-size: 40px;
+  background-color: #fff;
+  border-radius: 50%;
+}
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/Message.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/components/Message.tsx
@@ -3,27 +3,52 @@ import styles from './style.less';

 type Props = {
  position: 'left' | 'right';
+  width?: number | string;
+  height?: number | string;
  bubbleClassName?: string;
-  aggregator?: string;
-  noTime?: boolean;
+  domainName?: string;
+  question?: string;
+  followQuestions?: string[];
 };

-const Message: React.FC<Props> = ({ position, children, bubbleClassName }) => {
+const Message: React.FC<Props> = ({
+  position,
+  width,
+  height,
+  children,
+  bubbleClassName,
+  domainName,
+  question,
+  followQuestions,
+}) => {
  const messageClass = classNames(styles.message, {
    [styles.left]: position === 'left',
    [styles.right]: position === 'right',
  });

+  const leftTitle = question
+    ? followQuestions && followQuestions.length > 0
+      ? `多轮对话：${[question, ...followQuestions].join(' ← ')}`
+      : `单轮对话：${question}`
+    : '';
+
  return (
-    <div className={messageClass}>
+    <div className={messageClass} style={{ width }}>
+      {!!domainName && <div className={styles.domainName}>{domainName}</div>}
      <div className={styles.messageContent}>
        <div className={styles.messageBody}>
          <div
            className={`${styles.bubble}${bubbleClassName ? ` ${bubbleClassName}` : ''}`}
+            style={{ height }}
            onClick={(e) => {
              e.stopPropagation();
            }}
          >
+            {position === 'left' && question && (
+              <div className={styles.messageTopBar} title={leftTitle}>
+                {leftTitle}
+              </div>
+            )}
            {children}
          </div>
        </div>
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/Text.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/components/Text.tsx
@@ -1,3 +1,5 @@
+import classNames from 'classnames';
+import LeftAvatar from './LeftAvatar';
 import Message from './Message';
 import styles from './style.less';

@@ -8,11 +10,17 @@ type Props = {
 };

 const Text: React.FC<Props> = ({ position, data, quote }) => {
+  const textWrapperClass = classNames(styles.textWrapper, {
+    [styles.rightTextWrapper]: position === 'right',
+  });
  return (
-    <Message position={position} bubbleClassName={styles.textBubble}>
-      {position === 'right' && quote && <div className={styles.quote}>{quote}</div>}
-      <div className={styles.text}>{data}</div>
-    </Message>
+    <div className={textWrapperClass}>
+      {position === 'left' && <LeftAvatar />}
+      <Message position={position} bubbleClassName={styles.textBubble}>
+        {position === 'right' && quote && <div className={styles.quote}>{quote}</div>}
+        <div className={styles.text}>{data}</div>
+      </Message>
+    </div>
  );
 };

--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/components/style.less
@@ -1,10 +1,28 @@
 .message {
+  .domainName {
+    margin-bottom: 2px;
+    margin-left: 4px;
+    color: var(--text-color);
+    font-weight: 500;
+  }
  .messageContent {
    display: flex;
    align-items: flex-start;

    .messageBody {
      width: 100%;
+
+      .messageTopBar {
+        max-width: 90%;
+        margin: 0 16px;
+        padding: 12px 0 8px;
+        overflow: hidden;
+        color: var(--text-color-third);
+        font-size: 13px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        background-color: #fff;
+      }
    }

    .avatar {
@@ -73,7 +91,6 @@
        font-size: 16px;
        background: linear-gradient(81.62deg, #2870ea 8.72%, var(--chat-blue) 85.01%);
        border: 1px solid transparent;
-        border-radius: 12px 4px 12px 12px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);

        .text {
@@ -275,3 +292,16 @@
    }
  }
 }
+
+.textWrapper {
+  display: flex;
+  align-items: center;
+
+  &.rightTextWrapper {
+    justify-content: flex-end;
+  }
+
+  .rightAvatar {
+    margin-left: 6px;
+  }
+}
--- a/webapp/packages/supersonic-fe/src/pages/Chat/constants.ts
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/constants.ts
@@ -26,3 +26,11 @@ export const SEMANTIC_TYPE_MAP = {
  [SemanticTypeEnum.METRIC]: '指标',
  [SemanticTypeEnum.VALUE]: '维度值',
 };
+
+export const DEFAULT_CONVERSATION_NAME = '新问答对话'
+
+export const WEB_TITLE = '问答对话'
+
+export const CHAT_TITLE = '问答'
+
+export const PLACE_HOLDER = '请输入您的问题'
--- a/webapp/packages/supersonic-fe/src/pages/Chat/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/index.tsx
@@ -1,27 +1,28 @@
-import { updateMessageContainerScroll, isMobile, uuid } from '@/utils/utils';
+import { updateMessageContainerScroll, isMobile, uuid, getLeafList } from '@/utils/utils';
 import { useEffect, useRef, useState } from 'react';
 import { Helmet } from 'umi';
 import MessageContainer from './MessageContainer';
 import styles from './style.less';
-import { ConversationDetailType, MessageItem, MessageTypeEnum } from './type';
-import { updateConversationName } from './service';
+import { ConversationDetailType, DomainType, MessageItem, MessageTypeEnum } from './type';
+import { getDomainList, updateConversationName } from './service';
 import { useThrottleFn } from 'ahooks';
-import Conversation from './Conversation';
 import RightSection from './RightSection';
 import ChatFooter from './ChatFooter';
 import classNames from 'classnames';
-import { AUTH_TOKEN_KEY, DEFAULT_CONVERSATION_NAME, WEB_TITLE } from '@/common/constants';
-import {
-  HistoryMsgItemType,
-  MsgDataType,
-  getHistoryMsg,
-  queryContext,
-  setToken as setChatSdkToken,
-} from 'supersonic-chat-sdk';
-import { getConversationContext } from './utils';
+import { CHAT_TITLE, DEFAULT_CONVERSATION_NAME, WEB_TITLE } from './constants';
+import { cloneDeep } from 'lodash';
+import { HistoryMsgItemType, MsgDataType, getHistoryMsg } from 'supersonic-chat-sdk';
 import 'supersonic-chat-sdk/dist/index.css';
+import { setToken as setChatSdkToken } from 'supersonic-chat-sdk';
+import { TOKEN_KEY } from '@/services/request';
+
+type Props = {
+  isCopilotMode?: boolean;
+};
+
+const Chat: React.FC<Props> = ({ isCopilotMode }) => {
+  const isMobileMode = (isMobile || isCopilotMode) as boolean;

-const Chat = () => {
  const [messageList, setMessageList] = useState<MessageItem[]>([]);
  const [inputMsg, setInputMsg] = useState('');
  const [pageNo, setPageNo] = useState(1);
@@ -29,15 +30,14 @@ const Chat = () => {
  const [historyInited, setHistoryInited] = useState(false);
  const [currentConversation, setCurrentConversation] = useState<
    ConversationDetailType | undefined
-  >(isMobile ? { chatId: 0, chatName: '问答对话' } : undefined);
+  >(isMobile ? { chatId: 0, chatName: `${CHAT_TITLE}问答` } : undefined);
  const [currentEntity, setCurrentEntity] = useState<MsgDataType>();
+  const [miniProgramLoading, setMiniProgramLoading] = useState(false);
+  const [domains, setDomains] = useState<DomainType[]>([]);
+  const [currentDomain, setCurrentDomain] = useState<DomainType>();
  const conversationRef = useRef<any>();
  const chatFooterRef = useRef<any>();

-  useEffect(() => {
-    setChatSdkToken(localStorage.getItem(AUTH_TOKEN_KEY) || '');
-  }, []);
-
  const sendHelloRsp = () => {
    setMessageList([
      {
@@ -48,15 +48,35 @@ const Chat = () => {
    ]);
  };

+  const existInstuctionMsg = (list: HistoryMsgItemType[]) => {
+    return list.some((msg) => msg.queryResponse.queryMode === MessageTypeEnum.INSTRUCTION);
+  };
+
+  const updateScroll = (list: HistoryMsgItemType[]) => {
+    if (existInstuctionMsg(list)) {
+      setMiniProgramLoading(true);
+      setTimeout(() => {
+        setMiniProgramLoading(false);
+        updateMessageContainerScroll();
+      }, 3000);
+    } else {
+      updateMessageContainerScroll();
+    }
+  };
+
  const updateHistoryMsg = async (page: number) => {
-    const res = await getHistoryMsg(page, currentConversation!.chatId);
-    const { hasNextPage, list } = res.data.data;
+    const res = await getHistoryMsg(page, currentConversation!.chatId, 3);
+    const { hasNextPage, list } = res.data?.data || { hasNextPage: false, list: [] };
    setMessageList([
      ...list.map((item: HistoryMsgItemType) => ({
        id: item.questionId,
-        type: MessageTypeEnum.QUESTION,
+        type:
+          item.queryResponse?.queryMode === MessageTypeEnum.INSTRUCTION
+            ? MessageTypeEnum.INSTRUCTION
+            : MessageTypeEnum.QUESTION,
        msg: item.queryText,
        msgData: item.queryResponse,
+        isHistory: true,
      })),
      ...(page === 1 ? [] : messageList),
    ]);
@@ -67,8 +87,9 @@ const Chat = () => {
      } else {
        setCurrentEntity(list[list.length - 1].queryResponse);
      }
-      updateMessageContainerScroll();
+      updateScroll(list);
      setHistoryInited(true);
+      inputFocus();
    }
    if (page > 1) {
      const msgEle = document.getElementById(`${messageList[0]?.id}`);
@@ -90,6 +111,21 @@ const Chat = () => {
    },
  );

+  const initDomains = async () => {
+    try {
+      const res = await getDomainList();
+      const domainList = getLeafList(res.data);
+      setDomains(
+        [{ id: -1, name: '全部', bizName: 'all', parentId: 0 }, ...domainList].slice(0, 11),
+      );
+    } catch (e) {}
+  };
+
+  useEffect(() => {
+    setChatSdkToken(localStorage.getItem(TOKEN_KEY) || '');
+    initDomains();
+  }, []);
+
  useEffect(() => {
    if (historyInited) {
      const messageContainerEle = document.getElementById('messageContainer');
@@ -123,7 +159,7 @@ const Chat = () => {
        sendHelloRsp();
        return;
      }
-      onSendMsg(currentConversation.initMsg, [], domainId, true);
+      onSendMsg(currentConversation.initMsg, [], domainId);
      return;
    }
    updateHistoryMsg(1);
@@ -132,32 +168,36 @@ const Chat = () => {

  const modifyConversationName = async (name: string) => {
    await updateConversationName(name, currentConversation!.chatId);
-    conversationRef?.current?.updateData();
-    window.history.replaceState('', '', `?q=${name}&cid=${currentConversation!.chatId}`);
+    if (!isMobileMode) {
+      conversationRef?.current?.updateData();
+      window.history.replaceState('', '', `?q=${name}&cid=${currentConversation!.chatId}`);
+    }
  };

-  const onSendMsg = async (
-    msg?: string,
-    list?: MessageItem[],
-    domainId?: number,
-    firstMsg?: boolean,
-  ) => {
+  const onSendMsg = async (msg?: string, list?: MessageItem[], domainId?: number) => {
    const currentMsg = msg || inputMsg;
    if (currentMsg.trim() === '') {
      setInputMsg('');
      return;
    }
-    let quote = '';
-    if (currentEntity && !firstMsg) {
-      const { data } = await queryContext(currentMsg, currentConversation!.chatId);
-      if (data.code === 200 && data.data.domainId === currentEntity.chatContext?.domainId) {
-        quote = getConversationContext(data.data);
-      }
+    const msgDomain = domains.find((item) => currentMsg.includes(item.name));
+    const certainDomain = currentMsg[0] === '@' && msgDomain;
+    if (certainDomain) {
+      setCurrentDomain(msgDomain.id === -1 ? undefined : msgDomain);
    }
-    setMessageList([
+    const domainIdValue = domainId || msgDomain?.id || currentDomain?.id;
+    const msgs = [
      ...(list || messageList),
-      { id: uuid(), msg: currentMsg, domainId, type: MessageTypeEnum.QUESTION, quote },
-    ]);
+      {
+        id: uuid(),
+        msg: currentMsg,
+        msgValue: certainDomain ? currentMsg.replace(`@${msgDomain.name}`, '').trim() : currentMsg,
+        domainId: domainIdValue === -1 ? undefined : domainIdValue,
+        identityMsg: certainDomain ? getIdentityMsgText(msgDomain) : undefined,
+        type: MessageTypeEnum.QUESTION,
+      },
+    ];
+    setMessageList(msgs);
    updateMessageContainerScroll();
    setInputMsg('');
    modifyConversationName(currentMsg);
@@ -179,36 +219,89 @@ const Chat = () => {
  };

  const onSelectConversation = (conversation: ConversationDetailType, name?: string) => {
-    window.history.replaceState('', '', `?q=${conversation.chatName}&cid=${conversation.chatId}`);
+    if (!isMobileMode) {
+      window.history.replaceState('', '', `?q=${conversation.chatName}&cid=${conversation.chatId}`);
+    }
    setCurrentConversation({
      ...conversation,
      initMsg: name,
    });
    saveConversationToLocal(conversation);
+    setCurrentDomain(undefined);
  };

-  const onMsgDataLoaded = (data: MsgDataType) => {
+  const onMsgDataLoaded = (data: MsgDataType, questionId: string | number) => {
+    if (!data) {
+      return;
+    }
+    if (data.queryMode === 'INSTRUCTION') {
+      setMessageList([
+        ...messageList.slice(0, messageList.length - 1),
+        {
+          id: uuid(),
+          msg: data.response.name || messageList[messageList.length - 1]?.msg,
+          type: MessageTypeEnum.INSTRUCTION,
+          msgData: data,
+        },
+      ]);
+    } else {
+      const msgs = cloneDeep(messageList);
+      const msg = msgs.find((item) => item.id === questionId);
+      if (msg) {
+        msg.msgData = data;
+        setMessageList(msgs);
+      }
+      updateMessageContainerScroll();
+    }
    setCurrentEntity(data);
+  };
+
+  const onCheckMore = (data: MsgDataType) => {
+    setMessageList([
+      ...messageList,
+      {
+        id: uuid(),
+        msg: data.response.name,
+        type: MessageTypeEnum.INSTRUCTION,
+        msgData: data,
+      },
+    ]);
    updateMessageContainerScroll();
  };

+  const getIdentityMsgText = (domain?: DomainType) => {
+    return domain
+      ? `您好，我当前身份是【${domain.name}】主题专家，我将尽力帮您解答相关问题～`
+      : '您好，我将尽力帮您解答所有主题相关问题～';
+  };
+
+  const getIdentityMsg = (domain?: DomainType) => {
+    return {
+      id: uuid(),
+      type: MessageTypeEnum.TEXT,
+      msg: getIdentityMsgText(domain),
+    };
+  };
+
+  const onSelectDomain = (domain: DomainType) => {
+    const domainValue = currentDomain?.id === domain.id ? undefined : domain;
+    setCurrentDomain(domainValue);
+    setCurrentEntity(undefined);
+    setMessageList([...messageList, getIdentityMsg(domainValue)]);
+    updateMessageContainerScroll();
+    inputFocus();
+  };
+
  const chatClass = classNames(styles.chat, {
-    [styles.external]: true,
-    [styles.mobile]: isMobile,
+    [styles.mobile]: isMobileMode,
+    [styles.copilot]: isCopilotMode,
  });

  return (
    <div className={chatClass}>
-      <Helmet title={WEB_TITLE} />
+      {!isMobileMode && <Helmet title={WEB_TITLE} />}
      <div className={styles.topSection} />
      <div className={styles.chatSection}>
-        {!isMobile && (
-          <Conversation
-            currentConversation={currentConversation}
-            onSelectConversation={onSelectConversation}
-            ref={conversationRef}
-          />
-        )}
        <div className={styles.chatApp}>
          {currentConversation && (
            <div className={styles.chatBody}>
@@ -217,16 +310,22 @@ const Chat = () => {
                  id="messageContainer"
                  messageList={messageList}
                  chatId={currentConversation?.chatId}
+                  miniProgramLoading={miniProgramLoading}
+                  isMobileMode={isMobileMode}
                  onClickMessageContainer={() => {
                    inputFocus();
                  }}
                  onMsgDataLoaded={onMsgDataLoaded}
                  onSelectSuggestion={onSendMsg}
+                  onCheckMore={onCheckMore}
                  onUpdateMessageScroll={updateMessageContainerScroll}
                />
                <ChatFooter
                  inputMsg={inputMsg}
                  chatId={currentConversation?.chatId}
+                  domains={domains}
+                  currentDomain={currentDomain}
+                  isMobileMode={isMobileMode}
                  onInputMsgChange={onInputMsgChange}
                  onSendMsg={(msg: string, domainId?: number) => {
                    onSendMsg(msg, messageList, domainId);
@@ -234,13 +333,27 @@ const Chat = () => {
                      inputBlur();
                    }
                  }}
+                  onAddConversation={() => {
+                    conversationRef.current?.onAddConversation();
+                    inputFocus();
+                  }}
                  ref={chatFooterRef}
                />
              </div>
            </div>
          )}
        </div>
-        {!isMobile && <RightSection currentEntity={currentEntity} />}
+        {!isMobileMode && (
+          <RightSection
+            domains={domains}
+            currentEntity={currentEntity}
+            currentDomain={currentDomain}
+            currentConversation={currentConversation}
+            onSelectDomain={onSelectDomain}
+            onSelectConversation={onSelectConversation}
+            conversationRef={conversationRef}
+          />
+        )}
      </div>
    </div>
  );
--- a/webapp/packages/supersonic-fe/src/pages/Chat/service.ts
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/service.ts
@@ -1,9 +1,12 @@
 import { request } from 'umi';
+import { DomainType } from './type';

 const prefix = '/api';

 export function saveConversation(chatName: string) {
-  return request<Result<any>>(`${prefix}/chat/manage/save?chatName=${chatName}`, { method: 'POST' });
+  return request<Result<any>>(`${prefix}/chat/manage/save?chatName=${chatName}`, {
+    method: 'POST',
+  });
 }

 export function updateConversationName(chatName: string, chatId: number = 0) {
@@ -20,3 +23,17 @@ export function deleteConversation(chatId: number) {
 export function getAllConversations() {
  return request<Result<any>>(`${prefix}/chat/manage/getAll`);
 }
+
+export function getMiniProgramList(id: string, type: string) {
+  return request<Result<any>>(`/openapi/bd-bi/api/polaris/sql/getInterpretList/${id}/${type}`, {
+    method: 'GET',
+    skipErrorHandler: true,
+  });
+}
+
+export function getDomainList() {
+  return request<Result<DomainType[]>>(`${prefix}/semantic/domain/getDomainList`, {
+    method: 'GET',
+    skipErrorHandler: true,
+  });
+}
--- a/webapp/packages/supersonic-fe/src/pages/Chat/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/style.less
@@ -1,167 +1,258 @@
+@import '~antd/es/style/themes/default.less';
+
 .chat {
  height: calc(100vh - 48px) !important;
-  overflow-y: hidden;
+  overflow: hidden;
  background: linear-gradient(180deg, rgba(23, 74, 228, 0) 29.44%, rgba(23, 74, 228, 0.06) 100%),
    linear-gradient(90deg, #f3f3f7 0%, #f3f3f7 20%, #ebf0f9 60%, #f3f3f7 80%, #f3f3f7 100%);

-  &.external {
-    .chatApp {
-      width: calc(100vw - 450px) !important;
-      height: calc(100vh - 58px) !important;
+  .chatSection {
+    display: flex;
+    width: 100vw !important;
+    height: calc(100vh - 48px) !important;
+    overflow: hidden;
+  }
+
+  .chatApp {
+    display: flex;
+    flex-direction: column;
+    width: calc(100vw - 225px);
+    height: calc(100vh - 48px);
+    padding-left: 20px;
+    color: rgba(0, 0, 0, 0.87);
+
+    .emptyHolder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    .navBar {
+      position: relative;
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      height: 40px;
+      padding: 0 10px;
+      background: rgb(243 243 243);
+      border-bottom: 1px solid rgb(228, 228, 228);
+
+      .conversationNameWrapper {
+        display: flex;
+        align-items: center;
+
+        .conversationName {
+          padding: 4px 12px;
+          color: var(--text-color-third) !important;
+          font-size: 14px !important;
+          border-radius: 4px;
+          cursor: pointer;
+
+          .editIcon {
+            margin-left: 10px;
+            color: var(--text-color-fourth);
+            font-size: 14px;
+          }
+
+          &:hover {
+            background-color: rgba(0, 0, 0, 0.03);
+          }
+        }
+
+        .divider {
+          width: 1px;
+          height: 16px;
+          margin-right: 4px;
+          margin-left: 12px;
+          background-color: var(--text-color-fourth);
+        }
+      }
+
+      .conversationInput {
+        width: 300px;
+        color: var(--text-color-third) !important;
+        font-size: 14px !important;
+        cursor: default !important;
+      }
+    }
+
+    .chatBody {
+      display: flex;
+      flex: 1;
+      height: 100%;
+
+      .chatContent {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+
+        .messageContainer {
+          position: relative;
+          display: flex;
+          flex: 1;
+          flex-direction: column;
+          min-height: 0;
+          overflow-x: hidden;
+          overflow-y: scroll;
+
+          .messageList {
+            display: flex;
+            flex-direction: column;
+            padding: 20px 20px 90px 4px;
+            row-gap: 10px;
+
+            .messageItem {
+              display: flex;
+              flex-direction: column;
+              row-gap: 10px;
+
+              :global {
+                .ant-table-row {
+                  background-color: #fff;
+                }
+
+                .ant-table-tbody > tr > td {
+                  border-bottom: 1px solid #f0f0f0;
+                  transition: background 0.2s, border-color 0.2s;
+                }
+
+                .ss-chat-table-even-row {
+                  background-color: #fbfbfb;
+                }
+
+                .ant-table-wrapper .ant-table-pagination {
+                  display: flex;
+                  flex-wrap: wrap;
+                  justify-content: center;
+                  margin: 16px 0;
+                  row-gap: 8px;
+                }
+
+                .ant-pagination .ant-pagination-prev,
+                .ant-pagination .ant-pagination-next {
+                  display: inline-block;
+                  min-width: 32px;
+                  height: 32px;
+                  color: rgba(0, 0, 0, 0.88);
+                  line-height: 32px;
+                  text-align: center;
+                  vertical-align: middle;
+                  list-style: none;
+                  border-radius: 6px;
+                  cursor: pointer;
+                  transition: all 0.2s;
+
+                  .ant-pagination-item-link {
+                    display: block;
+                    width: 100%;
+                    height: 100%;
+                    padding: 0;
+                    font-size: 12px;
+                    text-align: center;
+                    background-color: transparent;
+                    border: 1px solid transparent;
+                    border-radius: 6px;
+                    outline: none;
+                    transition: border 0.2s;
+                  }
+                }
+
+                .ant-pagination-jump-prev,
+                .ant-pagination-jump-next {
+                  .ant-pagination-item-link {
+                    display: inline-block;
+                    min-width: 32px;
+                    height: 32px;
+                    color: rgba(0, 0, 0, 0.25);
+                    line-height: 32px;
+                    text-align: center;
+                    vertical-align: middle;
+                    list-style: none;
+                    border-radius: 6px;
+                    cursor: pointer;
+                    transition: all 0.2s;
+                  }
+                }
+
+                .ant-pagination-options {
+                  display: inline-block;
+                  margin-left: 16px;
+                  vertical-align: middle;
+                }
+
+                .ant-pagination .ant-pagination-item {
+                  display: inline-block;
+                  min-width: 32px;
+                  height: 32px;
+                  line-height: 30px;
+                  text-align: center;
+                  vertical-align: middle;
+                  list-style: none;
+                  background-color: transparent;
+                  border: 1px solid transparent;
+                  border-radius: 6px;
+                  outline: 0;
+                  cursor: pointer;
+                  user-select: none;
+                  margin-inline-end: 8px;
+                }
+
+                .ant-pagination .ant-pagination-item-active {
+                  font-weight: 600;
+                  background-color: #ffffff;
+                  border-color: var(--primary-color);
+                }
+
+                .ant-pagination {
+                  box-sizing: border-box;
+                  margin: 0;
+                  padding: 0;
+                  color: #606266;
+                  font-size: 14px;
+                  font-variant: tabular-nums;
+                  line-height: 1.5715;
+                  list-style: none;
+                  font-feature-settings: 'tnum', 'tnum';
+                }
+              }
+            }
+
+            &.miniProgramLoading {
+              position: absolute;
+              bottom: 10000px;
+              width: 100%;
+            }
+          }
+        }
+      }
    }
  }

  &.mobile {
-    height: 100vh !important;
+    height: 100% !important;

    .chatSection {
-      // height: 100vh !important;
+      width: 100% !important;
      height: 100% !important;
    }

    .conversation {
-      // height: 100vh !important;
      height: 100% !important;
    }

    .chatApp {
-      width: 100vw !important;
-      // height: 100vh !important;
+      width: calc(100% - 225px) !important;
      height: 100% !important;
-    }
-  }
-}
-
-.chatSection {
-  display: flex;
-  height: calc(100vh - 48px) !important;
-  overflow-y: hidden;
-}
-
-.chatBody {
-  height: 100%;
-}
-
-.conversation {
-  position: relative;
-  width: 225px;
-  height: calc(100vh - 48px);
-
-  .leftSection {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.chatApp {
-  display: flex;
-  flex-direction: column;
-  width: calc(100vw - 510px);
-  height: calc(100vh - 58px) !important;
-  margin-top: 10px;
-  color: rgba(0, 0, 0, 0.87);
-
-  .emptyHolder {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-  }
-
-  .navBar {
-    position: relative;
-    z-index: 10;
-    display: flex;
-    align-items: center;
-    height: 40px;
-    padding: 0 10px;
-    background: rgb(243 243 243);
-    border-bottom: 1px solid rgb(228, 228, 228);
-
-    .conversationNameWrapper {
-      display: flex;
-      align-items: center;
-
-      .conversationName {
-        padding: 4px 12px;
-        color: var(--text-color-third) !important;
-        font-size: 14px !important;
-        border-radius: 4px;
-        cursor: pointer;
-
-        .editIcon {
-          margin-left: 10px;
-          color: var(--text-color-fourth);
-          font-size: 14px;
-        }
-
-        &:hover {
-          background-color: rgba(0, 0, 0, 0.03);
-        }
-      }
-
-      .divider {
-        width: 1px;
-        height: 16px;
-        margin-right: 4px;
-        margin-left: 12px;
-        background-color: var(--text-color-fourth);
-      }
-    }
-
-    .conversationInput {
-      width: 300px;
-      color: var(--text-color-third) !important;
-      font-size: 14px !important;
-      cursor: default !important;
-    }
-  }
-
-  .chatBody {
-    display: flex;
-    flex: 1;
-
-    .chatContent {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-
-      .messageContainer {
-        position: relative;
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        min-height: 0;
-        overflow-x: hidden;
-        overflow-y: scroll;
-
-        .messageList {
-          display: flex;
-          flex-direction: column;
-          padding: 0 20px 90px 4px;
-          row-gap: 20px;
-
-          .messageItem {
-            display: flex;
-            flex-direction: column;
-            row-gap: 20px;
-          }
-
-          &.reportLoading {
-            position: absolute;
-            bottom: 10000px;
-            width: 100%;
-          }
-        }
-      }
+      margin-top: 0 !important;
    }
  }
 }

 .mobile {
  .messageList {
-    padding: 0 12px 20px !important;
+    padding: 20px 12px 20px !important;
  }
 }

@@ -235,7 +326,7 @@
  }

  :global {
-    button[ant-click-animating-without-extra-node]::after {
+    button[ant-click-animating-without-extra-node]:after {
      border: 0 none;
      opacity: 0;
      animation: none 0 ease 0 1 normal;
@@ -358,42 +449,6 @@
  }
 }

-.conversationList {
-  padding-top: 20px;
-  .conversationItem {
-    padding-left: 16px;
-    cursor: pointer;
-
-    .conversationItemContent {
-      display: flex;
-      align-items: center;
-      padding: 12px 0;
-      color: var(--text-color-third);
-
-      .conversationIcon {
-        margin-right: 10px;
-        color: var(--text-color-fourth);
-        font-size: 20px;
-      }
-
-      .conversationContent {
-        width: 160px;
-        overflow: hidden;
-        color: var(--text-color-third);
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-    }
-
-    &.activeConversationItem,
-    &:hover {
-      .conversationContent {
-        color: var(--chat-blue);
-      }
-    }
-  }
-}
-
 .addConversation {
  display: flex;
  align-items: center;
@@ -437,17 +492,6 @@
  }
 }

-.collapseBtn {
-  margin: 0 10px;
-  color: var(--text-color-third);
-  font-size: 16px;
-  cursor: pointer;
-
-  &:hover {
-    color: var(--primary-color);
-  }
-}
-
 .autoCompleteDropdown {
  width: 650px !important;
  min-width: 650px !important;
@@ -462,10 +506,6 @@
        background: #f5f5f5 !important;
      }
    }
-
-    // .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
-    //   background-color: #fff;
-    // }
  }
 }

@@ -545,35 +585,20 @@
  font-size: 12px;
 }

-.operateSection {
-  margin-top: 20px;
-  padding-left: 15px;
+.messageLoading {
+  margin-top: 30px;
+  padding: 0 20px;
 }

-.operateItem {
-  display: flex;
-  align-items: center;
-  padding: 10px 0;
-  cursor: pointer;
+:global {
+  .ss-chat-recommend-options {
+    .ant-table-thead .ant-table-cell {
+      padding: 8px !important;
+    }

-  .operateIcon {
-    margin-right: 10px;
-    color: var(--text-color-fourth);
-    font-size: 20px;
-  }
-
-  .operateLabel {
-    color: var(--text-color-third);
-    font-size: 14px;
-  }
-
-  &:hover {
-    .operateLabel {
-      color: var(--chat-blue);
+    .ant-table-tbody .ant-table-cell {
+      padding: 8px !important;
+      border-bottom: 1px solid #f0f0f0;
    }
  }
 }
-
-.messageLoading {
-  margin-top: 30px;
-}
--- a/webapp/packages/supersonic-fe/src/pages/Chat/type.ts
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/type.ts
@@ -3,19 +3,21 @@ import { MsgDataType } from 'supersonic-chat-sdk';
 export enum MessageTypeEnum {
  TEXT = 'text', // 指标文本
  QUESTION = 'question',
-  TAG = 'tag', // 标签
-  SUGGESTION = 'suggestion', // 建议
  NO_PERMISSION = 'no_permission', // 无权限
  SEMANTIC_DETAIL = 'semantic_detail', // 语义指标/维度等信息详情
+  INSTRUCTION = 'INSTRUCTION', // 插件
 }

 export type MessageItem = {
  id: string | number;
  type?: MessageTypeEnum;
  msg?: string;
+  msgValue?: string;
+  identityMsg?: string;
  domainId?: number;
  msgData?: MsgDataType;
  quote?: string;
+  isHistory?: boolean;
 };

 export type ConversationDetailType = {
@@ -32,3 +34,10 @@ export type ConversationDetailType = {
 export enum MessageModeEnum {
  INTERPRET = 'interpret',
 }
+
+export type DomainType = {
+  id: number;
+  parentId: number;
+  name: string;
+  bizName: string;
+};
--- a/webapp/packages/supersonic-fe/src/pages/Chat/utils.ts
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/utils.ts
@@ -1,16 +0,0 @@
-import { ChatContextType } from 'supersonic-chat-sdk';
-import moment from 'moment';
-
-export function getConversationContext(chatContext: ChatContextType) {
-  if (!chatContext) return '';
-  const { domainName, metrics, dateInfo } = chatContext;
-  // const dimensionStr =
-  //   dimensions?.length > 0 ? dimensions.map((dimension) => dimension.name).join('、') : '';
-  const timeStr =
-    dateInfo?.text ||
-    `近${moment(dateInfo?.endDate).diff(moment(dateInfo?.startDate), 'days') + 1}天`;
-
-  return `${domainName}${
-    metrics?.length > 0 ? `${timeStr}${metrics.map((metric) => metric.name).join('、')}` : ''
-  }`;
-}
--- a/webapp/packages/supersonic-fe/src/services/request.ts
+++ b/webapp/packages/supersonic-fe/src/services/request.ts
@@ -1,4 +1,3 @@
-import { FROM_URL_KEY } from '@/common/constants';
 import type {
  RequestOptionsInit,
  RequestOptionsWithoutResponse,
--- a/webapp/packages/supersonic-fe/src/utils/utils.ts
+++ b/webapp/packages/supersonic-fe/src/utils/utils.ts
@@ -343,3 +343,48 @@ export const getFormattedValueData = (value: number | string, remainZero?: boole
  }
  return `${formattedValue}${unit === NumericUnit.None ? '' : unit}`;
 };
+
+function getLeafNodes(treeNodes: any[]): any[] {
+  const leafNodes: any[] = [];
+
+  function traverse(node: any) {
+    if (!node.children || node.children.length === 0) {
+      leafNodes.push(node);
+    } else {
+      node.children.forEach((child: any) => traverse(child));
+    }
+  }
+
+  treeNodes.forEach((node) => traverse(node));
+
+  return leafNodes;
+}
+
+function buildTree(nodes: any[]): any[] {
+  const map: Record<number, any> = {};
+  const roots: any[] = [];
+
+  nodes.forEach((node) => {
+    map[node.id] = node;
+    node.children = [];
+  });
+
+  nodes.forEach((node) => {
+    if (node.parentId) {
+      const parent = map[node.parentId];
+      if (parent) {
+        parent.children.push(node);
+      }
+    } else {
+      roots.push(node);
+    }
+  });
+
+  return roots;
+}
+
+export function getLeafList(flatNodes: any[]): any[] {
+  const treeNodes = buildTree(flatNodes);
+  const leafNodes = getLeafNodes(treeNodes);
+  return leafNodes;
+}