add chat plugin and split query to parse and execute (#25)

* [feature](webapp) add drill down dimensions and metric period compare and modify layout * [feature](webapp) add drill down dimensions and metric period compare and modify layout * [feature](webapp) gitignore add supersonic-webapp * [feature](webapp) gitignore add supersonic-webapp * [feature](webapp) add chat plugin and split query to parse and execute * [feature](webapp) add chat plugin and split query to parse and execute * [feature](webapp) add chat plugin and split query to parse and execute --------- Co-authored-by: williamhliu <williamhliu@tencent.com>
2026-04-25 00:54:21 +08:00 · 2023-08-05 22:17:42 +08:00
parent c9baed6c4e
commit 6951eada9d
86 changed files with 3193 additions and 1595 deletions
--- a/webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/index.tsx
@@ -1,5 +1,5 @@
 import IconFont from '@/components/IconFont';
-import { getTextWidth, groupByColumn } from '@/utils/utils';
+import { getTextWidth, groupByColumn, isMobile } from '@/utils/utils';
 import { AutoComplete, Select, Tag, Tooltip } from 'antd';
 import classNames from 'classnames';
 import { debounce } from 'lodash';
@@ -9,20 +9,23 @@ import { searchRecommend } from 'supersonic-chat-sdk';
 import { SemanticTypeEnum, SEMANTIC_TYPE_MAP } from '../constants';
 import styles from './style.less';
 import { PLACE_HOLDER } from '../constants';
-import { DomainType } from '../type';
+import { DefaultEntityType, DomainType } from '../type';
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';

 type Props = {
  inputMsg: string;
  chatId?: number;
  currentDomain?: DomainType;
+  defaultEntity?: DefaultEntityType;
+  isCopilotMode?: boolean;
+  copilotFullscreen?: boolean;
  domains: DomainType[];
-  isMobileMode?: boolean;
  collapsed: boolean;
  onToggleCollapseBtn: () => void;
  onInputMsgChange: (value: string) => void;
  onSendMsg: (msg: string, domainId?: number) => void;
  onAddConversation: () => void;
+  onCancelDefaultFilter: () => void;
 };

 const { OptGroup, Option } = Select;
@@ -42,13 +45,16 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
    inputMsg,
    chatId,
    currentDomain,
+    defaultEntity,
    domains,
-    isMobileMode,
    collapsed,
+    isCopilotMode,
+    copilotFullscreen,
    onToggleCollapseBtn,
    onInputMsgChange,
    onSendMsg,
    onAddConversation,
+    onCancelDefaultFilter,
  },
  ref,
 ) => {
@@ -95,7 +101,7 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (

  const getStepOptions = (recommends: any[]) => {
    const data = groupByColumn(recommends, 'domainName');
-    return isMobileMode && recommends.length > 6
+    return isMobile && recommends.length > 6
      ? Object.keys(data)
          .slice(0, 4)
          .reduce((result, key) => {
@@ -135,7 +141,8 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
      fetchRef.current += 1;
      const fetchId = fetchRef.current;
      const { msgValue, domainId } = processMsg(msg, domains);
-      const res = await searchRecommend(msgValue.trim(), chatId, domainId || domain?.id);
+      const domainIdValue = domainId || domain?.id;
+      const res = await searchRecommend(msgValue.trim(), chatId, domainIdValue);
      if (fetchId !== fetchRef.current) {
        return;
      }
@@ -150,7 +157,7 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
      }
      setOpen(recommends.length > 0);
    };
-    return debounce(getAssociateWords, 20);
+    return debounce(getAssociateWords, 200);
  }, []);

  const [debounceGetWords] = useState<any>(debounceGetWordsFunc);
@@ -222,7 +229,7 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
  };

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

@@ -238,7 +245,8 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
  };

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

  return (
@@ -255,6 +263,33 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
          />
        </Tooltip>
        <div className={styles.composerInputWrapper}>
+          {currentDomain && (
+            <div className={styles.currentDomain}>
+              <div className={styles.currentDomainName}>
+                输入联想与问题回复将限定于：“
+                <span className={styles.quoteText}>
+                  主题域【{currentDomain.name}】
+                  {defaultEntity && (
+                    <>
+                      <span>，</span>
+                      <span>{`${currentDomain.name.slice(
+                        0,
+                        currentDomain.name.length - 1,
+                      )}【`}</span>
+                      <span className={styles.entityName} title={defaultEntity.entityName}>
+                        {defaultEntity.entityName}
+                      </span>
+                      <span>】</span>
+                    </>
+                  )}
+                </span>
+                ”
+              </div>
+              <div className={styles.cancelDomain} onClick={onCancelDefaultFilter}>
+                取消限定
+              </div>
+            </div>
+          )}
          <AutoComplete
            className={styles.composerInput}
            placeholder={
@@ -265,7 +300,7 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
            value={inputMsg}
            onChange={onInputMsgChange}
            onSelect={onSelect}
-            autoFocus={!isMobileMode}
+            autoFocus={!isMobile}
            backfill
            ref={inputRef}
            id="chatInput"
@@ -332,7 +367,7 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
                                      ? 'blue'
                                      : option.schemaElementType === SemanticTypeEnum.VALUE
                                      ? 'geekblue'
-                                      : 'orange'
+                                      : 'cyan'
                                  }
                                >
                                  {SEMANTIC_TYPE_MAP[option.schemaElementType] ||
--- a/webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/style.less
@@ -7,6 +7,10 @@
  margin-right: 20px;
  margin-bottom: 40px;

+  &.defaultCopilotMode {
+    margin-bottom: 30px;
+  }
+
  .composer {
    display: flex;
    height: 46px;
@@ -38,8 +42,53 @@
    }

    .composerInputWrapper {
+      position: relative;
      flex: 1;

+      .currentDomain {
+        position: absolute;
+        top: -30px;
+        left: 15px;
+        display: flex;
+        align-items: center;
+        width: calc(100% - 30px);
+        height: 30px;
+        padding: 0 12px;
+        overflow-x: auto;
+        color: var(--text-color-third);
+        white-space: nowrap;
+        background: #f4f6f5;
+        border-top-left-radius: 6px;
+        border-top-right-radius: 6px;
+
+        .currentDomainName {
+          margin-right: 12px;
+          font-size: 14px;
+
+          .entityName {
+            display: inline-block;
+            max-width: 100px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            vertical-align: top;
+          }
+        }
+
+        .cancelDomain {
+          padding: 0 6px;
+          font-size: 13px;
+          border: 1px solid var(--text-color-fourth);
+          border-radius: 4px;
+          cursor: pointer;
+
+          &:hover {
+            color: var(--text-color-fourth);
+            border-color: var(--text-color-fifth);
+          }
+        }
+      }
+
      .composerInput {
        width: 100%;
        height: 100%;
@@ -191,3 +240,7 @@
 .semanticType {
  margin-right: 10px;
 }
+
+.quoteText {
+  color: var(--chat-blue);
+}
--- a/webapp/packages/supersonic-fe/src/pages/Chat/Conversation/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/Conversation/index.tsx
@@ -9,17 +9,22 @@ import {
  useImperativeHandle,
 } from 'react';
 import { useLocation } from 'umi';
-import ConversationModal from './ConversationModal';
-import { deleteConversation, getAllConversations, saveConversation } from '../service';
+import ConversationModal from './components/ConversationModal';
+import { deleteConversation, getAllConversations, saveConversation } from './service';
 import styles from './style.less';
-import { ConversationDetailType } from '../type';
+import { ConversationDetailType, DefaultEntityType } from './type';
+import { DEFAULT_CONVERSATION_NAME } from './constants';
 import moment from 'moment';
 import { SearchOutlined } from '@ant-design/icons';
-import { DEFAULT_CONVERSATION_NAME } from '@/common/constants';

 type Props = {
  currentConversation?: ConversationDetailType;
  collapsed?: boolean;
+  isCopilotMode?: boolean;
+  defaultDomainName?: string;
+  defaultEntityFilter?: DefaultEntityType;
+  triggerNewConversation?: boolean;
+  onNewConversationTriggered?: () => void;
  onSelectConversation: (
    conversation: ConversationDetailType,
    name?: string,
@@ -29,7 +34,16 @@ type Props = {
 };

 const Conversation: ForwardRefRenderFunction<any, Props> = (
-  { currentConversation, collapsed, onSelectConversation },
+  {
+    currentConversation,
+    collapsed,
+    isCopilotMode,
+    defaultDomainName,
+    defaultEntityFilter,
+    triggerNewConversation,
+    onNewConversationTriggered,
+    onSelectConversation,
+  },
  ref,
 ) => {
  const location = useLocation();
@@ -47,7 +61,7 @@ const Conversation: ForwardRefRenderFunction<any, Props> = (
  const updateData = async () => {
    const { data } = await getAllConversations();
    const conversationList = data || [];
-    setConversations(conversationList);
+    setConversations(conversationList.slice(0, 500));
    return conversationList;
  };

@@ -71,6 +85,20 @@ const Conversation: ForwardRefRenderFunction<any, Props> = (
  };

  useEffect(() => {
+    if (triggerNewConversation) {
+      const conversationName =
+        defaultEntityFilter?.entityName && window.location.pathname.includes('detail')
+          ? defaultEntityFilter.entityName
+          : defaultDomainName;
+      onAddConversation({ name: conversationName, type: 'CUSTOMIZE' });
+      onNewConversationTriggered?.();
+    }
+  }, [triggerNewConversation]);
+
+  useEffect(() => {
+    if (triggerNewConversation) {
+      return;
+    }
    if (q && cid === undefined && window.location.href.includes('/workbench/chat')) {
      onAddConversation({ name: q, domainId: domainId ? +domainId : undefined, entityId });
    } else {
@@ -114,6 +142,7 @@ const Conversation: ForwardRefRenderFunction<any, Props> = (

  const conversationClass = classNames(styles.conversation, {
    [styles.collapsed]: collapsed,
+    [styles.copilotMode]: isCopilotMode,
  });

  const convertTime = (date: string) => {
--- a/webapp/packages/supersonic-fe/src/pages/Chat/Conversation/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/Conversation/style.less
@@ -1,149 +0,0 @@
-.conversation {
-  position: relative;
-  width: 260px;
-  height: 100vh !important;
-  background-color: #fff;
-  border-right: 1px solid var(--border-color-base);
-
-  .leftSection {
-    width: 100%;
-    height: 100%;
-
-    .searchConversation {
-      display: flex;
-      align-items: center;
-      padding: 12px 9px 10px;
-
-      .searchIcon {
-        color: #999 !important;
-      }
-
-      .searchTask {
-        font-size: 13px;
-        background-color: #f5f5f5;
-        border: 0;
-        border-radius: 4px;
-        box-shadow: none !important;
-
-        :global {
-          .ant-input {
-            font-size: 13px !important;
-            background-color: transparent !important;
-          }
-        }
-      }
-    }
-
-    .conversationList {
-      height: calc(100vh - 50px);
-      padding: 2px 8px 0;
-      overflow-y: auto;
-      .conversationItem {
-        display: flex;
-        align-items: center;
-        margin-top: 2px;
-        padding: 6px 8px;
-        border-radius: 8px;
-        cursor: pointer;
-
-        .conversationIcon {
-          margin-right: 10px;
-          color: var(--text-color-fourth);
-          font-size: 20px;
-        }
-
-        .conversationContent {
-          width: 100%;
-
-          .topTitleBar {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            width: 100%;
-
-            .conversationName {
-              width: 150px;
-              margin-right: 2px;
-              overflow: hidden;
-              color: var(--text-color);
-              font-size: 14px;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-            }
-
-            .conversationTime {
-              color: var(--text-color-six);
-              font-size: 12px;
-            }
-          }
-
-          .subTitle {
-            width: 180px;
-            overflow: hidden;
-            color: var(--text-color-six);
-            font-size: 12px;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-          }
-        }
-
-        &.activeConversationItem {
-          background-color: var(--light-blue-background);
-        }
-
-        &:hover {
-          background-color: var(--light-background);
-        }
-      }
-    }
-
-    .operateSection {
-      margin-top: 20px;
-      padding-left: 15px;
-    }
-
-    .operateItem {
-      display: flex;
-      align-items: center;
-      padding: 10px 0;
-      cursor: pointer;
-
-      .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);
-        }
-      }
-    }
-  }
-
-  &.collapsed {
-    width: 0;
-    padding: 0;
-    border-right: 0;
-
-    .leftSection {
-      .searchConversation {
-        display: none;
-      }
-
-      .conversationList {
-        display: none;
-      }
-
-      .operateSection {
-        display: none;
-      }
-    }
-  }
-}
--- a/webapp/packages/supersonic-fe/src/pages/Chat/MessageContainer.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/MessageContainer.tsx
@@ -4,8 +4,9 @@ import { isEqual } from 'lodash';
 import { ChatItem } from 'supersonic-chat-sdk';
 import type { MsgDataType } from 'supersonic-chat-sdk';
 import { MessageItem, MessageTypeEnum } from './type';
+import Plugin from './components/Plugin';
+import { updateMessageContainerScroll } from '@/utils/utils';
 import styles from './style.less';
-import RecommendQuestions from './components/RecommendQuestions';

 type Props = {
  id: string;
@@ -13,10 +14,16 @@ type Props = {
  messageList: MessageItem[];
  isMobileMode?: boolean;
  conversationCollapsed: boolean;
+  copilotFullscreen?: boolean;
  onClickMessageContainer: () => void;
-  onMsgDataLoaded: (data: MsgDataType, questionId: string | number) => void;
-  onSelectSuggestion: (value: string) => void;
+  onMsgDataLoaded: (
+    data: MsgDataType,
+    questionId: string | number,
+    question: string,
+    valid: boolean,
+  ) => void;
  onCheckMore: (data: MsgDataType) => void;
+  onApplyAuth: (domain: string) => void;
 };

 const MessageContainer: React.FC<Props> = ({
@@ -25,9 +32,11 @@ const MessageContainer: React.FC<Props> = ({
  messageList,
  isMobileMode,
  conversationCollapsed,
+  copilotFullscreen,
  onClickMessageContainer,
  onMsgDataLoaded,
-  onSelectSuggestion,
+  onCheckMore,
+  onApplyAuth,
 }) => {
  const [triggerResize, setTriggerResize] = useState(false);

@@ -38,10 +47,6 @@ const MessageContainer: React.FC<Props> = ({
    }, 0);
  }, []);

-  useEffect(() => {
-    onResize();
-  }, [conversationCollapsed]);
-
  useEffect(() => {
    window.addEventListener('resize', onResize);
    return () => {
@@ -49,6 +54,15 @@ const MessageContainer: React.FC<Props> = ({
    };
  }, []);

+  useEffect(() => {
+    onResize();
+  }, [conversationCollapsed]);
+
+  useEffect(() => {
+    onResize();
+    updateMessageContainerScroll();
+  }, [copilotFullscreen]);
+
  const getFollowQuestions = (index: number) => {
    const followQuestions: string[] = [];
    const currentMsg = messageList[index];
@@ -63,7 +77,7 @@ const MessageContainer: React.FC<Props> = ({
      const currentMsgEntityId = currentMsgData?.entityInfo?.entityId;

      if (
-        (msg.type === MessageTypeEnum.QUESTION || msg.type === MessageTypeEnum.INSTRUCTION) &&
+        (msg.type === MessageTypeEnum.QUESTION || msg.type === MessageTypeEnum.PLUGIN) &&
        !!currentMsgDomainId &&
        msgDomainId === currentMsgDomainId &&
        msgEntityId === currentMsgEntityId &&
@@ -77,19 +91,38 @@ const MessageContainer: React.FC<Props> = ({
    return followQuestions;
  };

+  const getFilters = (domainId?: number, entityId?: string) => {
+    if (!domainId || !entityId) {
+      return undefined;
+    }
+    return [
+      {
+        value: entityId,
+      },
+    ];
+  };
+
  return (
    <div id={id} className={styles.messageContainer} onClick={onClickMessageContainer}>
      <div className={styles.messageList}>
        {messageList.map((msgItem: MessageItem, index: number) => {
-          const { id: msgId, domainId, type, msg, msgValue, identityMsg, msgData } = msgItem;
+          const {
+            id: msgId,
+            domainId,
+            entityId,
+            type,
+            msg,
+            msgValue,
+            identityMsg,
+            msgData,
+            score,
+            isHistory,
+          } = msgItem;

          const followQuestions = getFollowQuestions(index);

          return (
            <div key={msgId} id={`${msgId}`} className={styles.messageItem}>
-              {type === MessageTypeEnum.RECOMMEND_QUESTIONS && (
-                <RecommendQuestions onSelectQuestion={onSelectSuggestion} />
-              )}
              {type === MessageTypeEnum.TEXT && <Text position="left" data={msg} />}
              {type === MessageTypeEnum.QUESTION && (
                <>
@@ -97,16 +130,35 @@ const MessageContainer: React.FC<Props> = ({
                  {identityMsg && <Text position="left" data={identityMsg} />}
                  <ChatItem
                    msg={msgValue || msg || ''}
-                    followQuestions={followQuestions}
                    msgData={msgData}
                    conversationId={chatId}
                    domainId={domainId}
+                    filter={getFilters(domainId, entityId)}
                    isLastMessage={index === messageList.length - 1}
                    isMobileMode={isMobileMode}
                    triggerResize={triggerResize}
-                    onMsgDataLoaded={(data: MsgDataType) => {
-                      onMsgDataLoaded(data, msgId);
+                    onMsgDataLoaded={(data: MsgDataType, valid: boolean) => {
+                      onMsgDataLoaded(data, msgId, msgValue || msg || '', valid);
                    }}
+                    onUpdateMessageScroll={updateMessageContainerScroll}
+                  />
+                </>
+              )}
+              {type === MessageTypeEnum.PLUGIN && (
+                <>
+                  <Plugin
+                    id={msgId}
+                    followQuestions={followQuestions}
+                    data={msgData!}
+                    scoreValue={score}
+                    msg={msgValue || msg || ''}
+                    isHistory={isHistory}
+                    isLastMessage={index === messageList.length - 1}
+                    isMobileMode={isMobileMode}
+                    onReportLoaded={(height: number) => {
+                      updateMessageContainerScroll(true, height);
+                    }}
+                    onCheckMore={onCheckMore}
                  />
                </>
              )}
@@ -122,7 +174,8 @@ function areEqual(prevProps: Props, nextProps: Props) {
  if (
    prevProps.id === nextProps.id &&
    isEqual(prevProps.messageList, nextProps.messageList) &&
-    prevProps.conversationCollapsed === nextProps.conversationCollapsed
+    prevProps.conversationCollapsed === nextProps.conversationCollapsed &&
+    prevProps.copilotFullscreen === nextProps.copilotFullscreen
  ) {
    return true;
  }
--- a/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Context/DomainInfo.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Context/DomainInfo.tsx
@@ -1,22 +0,0 @@
-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,59 +0,0 @@
-import moment from 'moment';
-import styles from './style.less';
-import type { ChatContextType, EntityInfoType } from 'supersonic-chat-sdk';
-
-type Props = {
-  chatContext: ChatContextType;
-  entityInfo?: EntityInfoType;
-};
-
-const Context: React.FC<Props> = ({ chatContext, entityInfo }) => {
-  const { domainName, metrics, dateInfo, dimensionFilters } = chatContext;
-
-  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}>{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>
-        )}
-        {metrics && metrics.length > 0 && (
-          <div className={styles.field}>
-            <span className={styles.fieldName}>指标：</span>
-            <span className={styles.fieldValue}>
-              {metrics.map((metric) => metric.name).join('、')}
-            </span>
-          </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>
-  );
-};
-
-export default Context;
--- 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,72 +0,0 @@
-.context {
-  display: flex;
-  flex-direction: column;
-  padding: 20px 10px 0;
-  border-top: 1px solid #ccc;
-
-  .title {
-    margin-bottom: 22px;
-    color: var(--text-color);
-    font-size: 16px;
-    line-height: 24px;
-  }
-
-  .desc {
-    max-height: 350px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    overflow-y: auto;
-    color: var(--text-color-third);
-    font-size: 13px;
-    line-height: 22px;
-  }
-
-  .field {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    margin-bottom: 10px;
-
-    &.columnLayout {
-      flex-direction: column;
-    }
-
-    .avatar {
-      margin-right: 8px;
-    }
-  }
-
-  .filterSection {
-    margin-bottom: 12px;
-  }
-
-  .fieldName {
-    margin-right: 6px;
-    color: var(--text-color);
-    font-weight: 500;
-  }
-
-  .fieldValue {
-    max-width: 150px;
-    overflow: hidden;
-    color: var(--text-color);
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .filterValues {
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: 10px;
-    font-size: 13px;
-    column-gap: 4px;
-    row-gap: 4px;
-
-    .filterItem {
-      padding: 2px 12px;
-      color: var(--text-color-secondary);
-      background-color: var(--body-background);
-      border-radius: 13px;
-    }
-  }
-}
--- a/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Domains/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/Domains/index.tsx
@@ -1,44 +0,0 @@
-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
@@ -1,70 +0,0 @@
-.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
@@ -1,45 +0,0 @@
-import { getFormattedValueData } from '@/utils/utils';
-import moment from 'moment';
-import React from 'react';
-import styles from './style.less';
-import type { EntityInfoType, MsgDataType } from 'supersonic-chat-sdk';
-
-type Props = {
-  currentEntity: MsgDataType;
-};
-
-const Introduction: React.FC<Props> = ({ currentEntity }) => {
-  const { entityInfo } = currentEntity;
-  const { dimensions, metrics } = entityInfo || ({} as EntityInfoType);
-
-  return (
-    <div className={styles.introduction}>
-      {dimensions
-        ?.filter((dimension) => !dimension.bizName.includes('photo'))
-        .map((dimension) => {
-          return (
-            <div className={styles.field} key={dimension.name}>
-              <span className={styles.fieldName}>{dimension.name}：</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>
-          );
-        })}
-      {metrics?.map((metric) => (
-        <div className={styles.field} key={metric.name}>
-          <span className={styles.fieldName}>{metric.name}：</span>
-          <span className={styles.fieldValue}>{getFormattedValueData(metric.value)}</span>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default Introduction;
--- 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,63 +0,0 @@
-.introduction {
-  display: flex;
-  flex-direction: column;
-  padding: 0 10px 4px;
-
-  .title {
-    margin-bottom: 22px;
-    color: var(--text-color);
-    font-size: 16px;
-    line-height: 24px;
-  }
-
-  .desc {
-    max-height: 350px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    overflow-y: auto;
-    color: var(--text-color-third);
-    font-size: 13px;
-    line-height: 22px;
-  }
-
-  .field {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    margin-bottom: 10px;
-
-    &.columnLayout {
-      flex-direction: column;
-    }
-
-    .avatar {
-      margin-right: 8px;
-    }
-  }
-
-  .fieldName {
-    margin-right: 6px;
-    color: var(--text-color);
-    font-weight: 500;
-  }
-
-  .fieldValue {
-    color: var(--text-color);
-
-    &.switchField {
-      cursor: pointer;
-    }
-
-    &.dimensionFieldValue {
-      max-width: 90px;
-      // white-space: nowrap;
-    }
-
-    &.mainNameFieldValue {
-      max-width: 90px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-}
--- a/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/index.tsx
@@ -1,59 +0,0 @@
-import classNames from 'classnames';
-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> = ({
-  domains,
-  currentEntity,
-  currentDomain,
-  currentConversation,
-  conversationRef,
-  onSelectConversation,
-  onSelectDomain,
-}) => {
-  const rightSectionClass = classNames(styles.rightSection, {
-    [styles.external]: false,
-  });
-
-  return (
-    <div className={rightSectionClass}>
-      <Conversation
-        currentConversation={currentConversation}
-        onSelectConversation={onSelectConversation}
-        ref={conversationRef}
-      />
-      {currentDomain && !currentEntity && (
-        <div className={styles.entityInfo}>
-          <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>
-  );
-};
-
-export default RightSection;
--- a/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/RightSection/style.less
@@ -1,18 +0,0 @@
-.rightSection {
-  width: 225px;
-  height: calc(100vh - 48px);
-  margin-right: 12px;
-  padding-bottom: 10px;
-  overflow-y: auto;
-
-  .entityInfo {
-    margin-top: 20px;
-
-    .topInfo {
-      margin-bottom: 20px;
-      color: var(--text-color-third);
-      font-weight: 500;
-      font-size: 14px;
-    }
-  }
-}
--- a/webapp/packages/supersonic-fe/src/pages/Chat/Conversation/ConversationModal/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/Conversation/ConversationModal/index.tsx
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/CopilotAvatar/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/components/CopilotAvatar/index.tsx
@@ -1,8 +1,8 @@
 import IconFont from '@/components/IconFont';
 import styles from './style.less';

-const LeftAvatar = () => {
+const CopilotAvatar = () => {
  return <IconFont type="icon-zhinengsuanfa" className={styles.leftAvatar} />;
 };

-export default LeftAvatar;
+export default CopilotAvatar;
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/CopilotAvatar/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/components/CopilotAvatar/style.less
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/Message.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/components/Message.tsx
@@ -34,7 +34,14 @@ const Message: React.FC<Props> = ({

  return (
    <div className={messageClass} style={{ width }}>
-      {!!domainName && <div className={styles.domainName}>{domainName}</div>}
+      {/* <div className={styles.messageTitleBar}>
+        {!!domainName && <div className={styles.domainName}>{domainName}</div>}
+        {position === 'left' && leftTitle && (
+          <div className={styles.messageTopBar} title={leftTitle}>
+            ({leftTitle})
+          </div>
+        )}
+      </div> */}
      <div className={styles.messageContent}>
        <div className={styles.messageBody}>
          <div
@@ -44,11 +51,11 @@ const Message: React.FC<Props> = ({
              e.stopPropagation();
            }}
          >
-            {position === 'left' && question && (
+            {/* {position === 'left' && question && (
              <div className={styles.messageTopBar} title={leftTitle}>
                {leftTitle}
              </div>
-            )}
+            )} */}
            {children}
          </div>
        </div>
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/Plugin/constants.ts
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/components/Plugin/constants.ts
@@ -0,0 +1,6 @@
+export const TRANS_30_REPORT_DASHBOARD_ID = '1165';
+
+export const HEAT_COMPARE_REPORT_DASHBOARD_ID = '1148';
+
+export const INSIGHTS_DETAIL_ID = 'DETAIL';
+export const INSIGHTS_ID = 'INSIGHT';
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/Plugin/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/components/Plugin/index.tsx
@@ -0,0 +1,195 @@
+import { isProd } from '@/utils/utils';
+import { MsgDataType } from 'supersonic-chat-sdk';
+import classNames from 'classnames';
+import { useEffect, useState, useCallback } from 'react';
+import Message from '../Message';
+import { updateMessageContainerScroll } from '@/utils/utils';
+import styles from './style.less';
+import LeftAvatar from '../CopilotAvatar';
+import { DislikeOutlined, LikeOutlined } from '@ant-design/icons';
+import { updateQAFeedback } from '../../service';
+
+type Props = {
+  id: string | number;
+  followQuestions?: string[];
+  data: MsgDataType;
+  scoreValue?: number;
+  msg: string;
+  isHistory?: boolean;
+  isLastMessage: boolean;
+  isMobileMode?: boolean;
+  onReportLoaded: (height: number) => void;
+  onCheckMore: (data: MsgDataType) => void;
+};
+
+const DEFAULT_HEIGHT = 800;
+
+const Plugin: React.FC<Props> = ({
+  id,
+  followQuestions,
+  data,
+  scoreValue,
+  msg,
+  isHistory,
+  isLastMessage,
+  isMobileMode,
+  onReportLoaded,
+  onCheckMore,
+}) => {
+  const {
+    name,
+    webPage: { url, params },
+  } = data.response || {};
+
+  const [pluginUrl, setPluginUrl] = useState('');
+  const [height, setHeight] = useState(DEFAULT_HEIGHT);
+  const [score, setScore] = useState(scoreValue || 0);
+
+  const handleMessage = useCallback((event: MessageEvent) => {
+    const messageData = event.data;
+    const { type, payload } = messageData;
+    if (type === 'changeMiniProgramContainerSize') {
+      const { msgId, height } = payload;
+      if (`${msgId}` === `${id}`) {
+        setHeight(height);
+        updateMessageContainerScroll();
+      }
+      return;
+    }
+    if (messageData === 'storyResize') {
+      const ifr: any = document.getElementById(`reportIframe_${id}`);
+      const iDoc = ifr.contentDocument || ifr.document || ifr.contentWindow;
+      setTimeout(() => {
+        setHeight(isProd() ? calcPageHeight(iDoc) : DEFAULT_HEIGHT);
+      }, 200);
+      return;
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('message', handleMessage);
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [handleMessage]);
+
+  function calcPageHeight(doc: any) {
+    const titleAreaEl = doc.getElementById('titleArea');
+    const titleAreaHeight = Math.max(
+      titleAreaEl?.clientHeight || 0,
+      titleAreaEl?.scrollHeight || 0,
+    );
+    const dashboardGridEl = doc.getElementsByClassName('dashboardGrid')?.[0];
+    const dashboardGridHeight = Math.max(
+      dashboardGridEl?.clientHeight || 0,
+      dashboardGridEl?.scrollHeight || 0,
+    );
+    return Math.max(titleAreaHeight + dashboardGridHeight + 10, DEFAULT_HEIGHT);
+  }
+
+  const initData = () => {
+    const heightValue =
+      params?.find((option: any) => option.paramType === 'FORWARD' && option.key === 'height')
+        ?.value || DEFAULT_HEIGHT;
+    setHeight(heightValue);
+    let urlValue = url;
+    const valueParams = (params || [])
+      .filter((option: any) => option.paramType !== 'FORWARD')
+      .reduce((result: any, item: any) => {
+        result[item.key] = item.value;
+        return result;
+      }, {});
+    if (urlValue.includes('?type=dashboard') || urlValue.includes('?type=widget')) {
+      const filterData = encodeURIComponent(
+        JSON.stringify(
+          urlValue.includes('dashboard')
+            ? {
+                global: valueParams,
+              }
+            : {
+                local: valueParams,
+              },
+        ),
+      );
+      urlValue = urlValue.replace(
+        '?',
+        `?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) {
+        if (url.includes('?')) {
+          urlValue = urlValue.replace('?', `?${params.join('&')}&`);
+        } else {
+          urlValue = `${urlValue}?${params.join('&')}`;
+        }
+      }
+    }
+    onReportLoaded(heightValue + 190);
+    setPluginUrl(urlValue);
+  };
+
+  useEffect(() => {
+    initData();
+  }, []);
+
+  const reportClass = classNames(styles.report, {
+    [styles.mobileMode]: isMobileMode,
+  });
+
+  const like = () => {
+    setScore(5);
+    updateQAFeedback(data.queryId, 5);
+  };
+
+  const dislike = () => {
+    setScore(1);
+    updateQAFeedback(data.queryId, 1);
+  };
+
+  const likeClass = classNames(styles.like, {
+    [styles.feedbackActive]: score === 5,
+  });
+
+  const dislikeClass = classNames(styles.dislike, {
+    [styles.feedbackActive]: score === 1,
+  });
+
+  return (
+    <div className={reportClass}>
+      <LeftAvatar />
+      <div className={styles.msgContent}>
+        <Message
+          position="left"
+          width="100%"
+          height={height}
+          bubbleClassName={styles.reportBubble}
+          domainName={data.chatContext?.domainName}
+          question={msg}
+          followQuestions={followQuestions}
+        >
+          <iframe
+            id={`reportIframe_${id}`}
+            src={pluginUrl}
+            className={styles.reportContent}
+            style={{ height }}
+            allowFullScreen
+          />
+        </Message>
+        {isLastMessage && (
+          <div className={styles.tools}>
+            <div className={styles.feedback}>
+              <div>这个回答正确吗？</div>
+              <LikeOutlined className={likeClass} onClick={like} />
+              <DislikeOutlined className={dislikeClass} onClick={dislike} />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Plugin;
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/Plugin/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/components/Plugin/style.less
@@ -0,0 +1,69 @@
+.report {
+  display: flex;
+  width: 100%;
+
+  &.reportLoading {
+    position: absolute;
+    bottom: 10000px;
+  }
+
+  .msgContent {
+    width: 100%;
+
+    .tools {
+      display: flex;
+      align-items: center;
+      margin-top: 12px;
+      column-gap: 4px;
+
+      .feedback {
+        display: flex;
+        align-items: center;
+        color: var(--text-color-third);
+        column-gap: 6px;
+
+        .like {
+          margin-right: 4px;
+        }
+
+        .feedbackActive {
+          color: rgb(234, 197, 79);
+        }
+      }
+    }
+  }
+
+  &.mobileMode {
+    .msgContent {
+      width: calc(100% - 50px);
+    }
+  }
+
+  .reportBubble {
+    width: 100%;
+    padding: 0 !important;
+    overflow: hidden;
+    background-color: #fff !important;
+    border: 0 !important;
+  }
+
+  .reportContent {
+    width: 100%;
+    border: none;
+  }
+
+  .saveReport {
+    width: fit-content;
+    margin-top: 12px;
+    padding: 4px 16px;
+    color: var(--text-color);
+    background-color: #fff;
+    border: 1px solid var(--border-color-base);
+    border-radius: 16px;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--chat-blue);
+    }
+  }
+}
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/RecommendQuestions/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/components/RecommendQuestions/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import LeftAvatar from '../LeftAvatar';
+import LeftAvatar from '../CopilotAvatar';
 import Message from '../Message';
 import styles from './style.less';
 import { queryRecommendQuestions } from '../../service';
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/Suggestion/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/components/Suggestion/index.tsx
@@ -1,58 +0,0 @@
-import { updateMessageContainerScroll } from '@/utils/utils';
-import { useEffect, useState } from 'react';
-import { querySuggestion } from '../../service';
-import { SuggestionType } from '../../type';
-import Message from '../Message';
-import styles from './style.less';
-
-type Props = {
-  domainId: number;
-  onSelectSuggestion: (value: string) => void;
-};
-
-const Suggestion: React.FC<Props> = ({ domainId, onSelectSuggestion }) => {
-  const [data, setData] = useState<SuggestionType>({ dimensions: [], metrics: [] });
-  const { metrics } = data;
-
-  const initData = async () => {
-    const res = await querySuggestion(domainId);
-    setData({
-      dimensions: res.data.dimensions.slice(0, 5),
-      metrics: res.data.metrics.slice(0, 5),
-    });
-    updateMessageContainerScroll();
-  };
-
-  useEffect(() => {
-    initData();
-  }, []);
-
-  return (
-    <div className={styles.suggestion}>
-      <Message position="left" bubbleClassName={styles.suggestionMsg}>
-        <div className={styles.row}>
-          <div className={styles.rowTitle}>您可能还想问以下指标：</div>
-          <div className={styles.rowContent}>
-            {metrics.map((metric, index) => {
-              return (
-                <>
-                  <span
-                    className={styles.contentItemName}
-                    onClick={() => {
-                      onSelectSuggestion(metric.name);
-                    }}
-                  >
-                    {metric.name}
-                  </span>
-                  {index !== metrics.length - 1 && <span>、</span>}
-                </>
-              );
-            })}
-          </div>
-        </div>
-      </Message>
-    </div>
-  );
-};
-
-export default Suggestion;
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/Suggestion/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/components/Suggestion/style.less
@@ -1,37 +0,0 @@
-.suggestion {
-  margin-left: 46px;
-
-  .suggestionMsg {
-    display: flex;
-    flex-direction: column;
-    padding: 16px !important;
-    row-gap: 12px;
-
-    .row {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      column-gap: 4px;
-      row-gap: 12px;
-
-      .rowTitle {
-        color: var(--text-color-third);
-      }
-
-      .rowContent {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        color: var(--text-color);
-        row-gap: 12px;
-
-        .contentItemName {
-          color: var(--chat-blue);
-          font-weight: 500;
-          border-bottom: 1px solid var(--chat-blue);
-          cursor: pointer;
-        }
-      }
-    }
-  }
-}
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/Text.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/components/Text.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import LeftAvatar from './LeftAvatar';
+import LeftAvatar from './CopilotAvatar';
 import Message from './Message';
 import styles from './style.less';

--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/components/style.less
@@ -1,9 +1,25 @@
 .message {
-  .domainName {
-    margin-bottom: 2px;
-    margin-left: 4px;
-    color: var(--text-color);
-    font-weight: 500;
+  .messageTitleBar {
+    display: flex;
+    align-items: baseline;
+    margin-bottom: 6px;
+    column-gap: 10px;
+
+    .domainName {
+      margin-left: 4px;
+      color: var(--text-color);
+      font-weight: 500;
+    }
+
+    .messageTopBar {
+      position: relative;
+      max-width: 80%;
+      overflow: hidden;
+      color: var(--text-color-third);
+      font-size: 13px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
  }
  .messageContent {
    display: flex;
@@ -11,18 +27,6 @@

    .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 {
@@ -88,7 +92,7 @@
        box-sizing: border-box;
        padding: 8px 16px;
        color: #fff;
-        font-size: 16px;
+        font-size: 14px;
        background: linear-gradient(81.62deg, #2870ea 8.72%, var(--chat-blue) 85.01%);
        border: 1px solid transparent;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
@@ -229,7 +233,6 @@

 .typingBubble {
  width: fit-content;
-  padding: 16px !important;
 }

 .quote {
--- a/webapp/packages/supersonic-fe/src/pages/Chat/constants.ts
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/constants.ts
@@ -27,10 +27,12 @@ export const SEMANTIC_TYPE_MAP = {
  [SemanticTypeEnum.VALUE]: '维度值',
 };

-export const DEFAULT_CONVERSATION_NAME = '新问答对话'
+export const CHAT_TITLE = '';

-export const WEB_TITLE = '问答对话'
+export const DEFAULT_CONVERSATION_NAME = '新问答对话';

-export const CHAT_TITLE = '问答'
+export const PAGE_TITLE = '问答对话';

-export const PLACE_HOLDER = '请输入您的问题'
+export const WEB_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,28 +1,54 @@
 import { updateMessageContainerScroll, isMobile, uuid, getLeafList } from '@/utils/utils';
 import { useEffect, useRef, useState } from 'react';
-import { Helmet } from 'umi';
+import { Helmet, useDispatch, useLocation } from 'umi';
 import MessageContainer from './MessageContainer';
 import styles from './style.less';
-import { ConversationDetailType, DomainType, MessageItem, MessageTypeEnum } from './type';
-import { getDomainList, updateConversationName } from './service';
+import {
+  ConversationDetailType,
+  DefaultEntityType,
+  DomainType,
+  MessageItem,
+  MessageTypeEnum,
+} from './type';
+import { getDomainList } from './service';
 import { useThrottleFn } from 'ahooks';
-import RightSection from './RightSection';
+import Conversation from './Conversation';
 import ChatFooter from './ChatFooter';
 import classNames from 'classnames';
 import { CHAT_TITLE, DEFAULT_CONVERSATION_NAME, WEB_TITLE } from './constants';
-import { cloneDeep } from 'lodash';
 import { HistoryMsgItemType, MsgDataType, getHistoryMsg } from 'supersonic-chat-sdk';
+import { cloneDeep } from 'lodash';
 import 'supersonic-chat-sdk/dist/index.css';
 import { setToken as setChatSdkToken } from 'supersonic-chat-sdk';
-import { TOKEN_KEY } from '@/services/request';
-import Conversation from './Conversation';
+import { AUTH_TOKEN_KEY } from '@/common/constants';

 type Props = {
  isCopilotMode?: boolean;
+  copilotFullscreen?: boolean;
+  defaultDomainName?: string;
+  defaultEntityFilter?: DefaultEntityType;
+  copilotSendMsg?: string;
+  triggerNewConversation?: boolean;
+  onNewConversationTriggered?: () => void;
+  onCurrentDomainChange?: (domain?: DomainType) => void;
+  onCancelCopilotFilter?: () => void;
+  onCheckMoreDetail?: () => void;
 };

-const Chat: React.FC<Props> = ({ isCopilotMode }) => {
-  const isMobileMode = (isMobile || isCopilotMode) as boolean;
+const Chat: React.FC<Props> = ({
+  isCopilotMode,
+  copilotFullscreen,
+  defaultDomainName,
+  defaultEntityFilter,
+  copilotSendMsg,
+  triggerNewConversation,
+  onNewConversationTriggered,
+  onCurrentDomainChange,
+  onCancelCopilotFilter,
+  onCheckMoreDetail,
+}) => {
+  const isMobileMode = isMobile || isCopilotMode;
+  const localConversationCollapsed = localStorage.getItem('CONVERSATION_COLLAPSED');

  const [messageList, setMessageList] = useState<MessageItem[]>([]);
  const [inputMsg, setInputMsg] = useState('');
@@ -32,68 +58,137 @@ const Chat: React.FC<Props> = ({ isCopilotMode }) => {
  const [currentConversation, setCurrentConversation] = useState<
    ConversationDetailType | undefined
  >(isMobile ? { chatId: 0, chatName: `${CHAT_TITLE}问答` } : undefined);
-  const [currentEntity, setCurrentEntity] = useState<MsgDataType>();
-  const [miniProgramLoading, setMiniProgramLoading] = useState(false);
+  const [conversationCollapsed, setConversationCollapsed] = useState(
+    !localConversationCollapsed ? true : localConversationCollapsed === 'true',
+  );
  const [domains, setDomains] = useState<DomainType[]>([]);
  const [currentDomain, setCurrentDomain] = useState<DomainType>();
-  const [conversationCollapsed, setConversationCollapsed] = useState(false);
+  const [defaultEntity, setDefaultEntity] = useState<DefaultEntityType>();
+  const [applyAuthVisible, setApplyAuthVisible] = useState(false);
+  const [applyAuthDomain, setApplyAuthDomain] = useState('');
+  const [initialDomainName, setInitialDomainName] = useState('');
+  const location = useLocation();
+  const dispatch = useDispatch();
+  const { domainName } = (location as any).query;
+
  const conversationRef = useRef<any>();
  const chatFooterRef = useRef<any>();

+  useEffect(() => {
+    setChatSdkToken(localStorage.getItem(AUTH_TOKEN_KEY) || '');
+    initDomains();
+  }, []);
+
+  useEffect(() => {
+    if (domains.length > 0 && initialDomainName && !currentDomain) {
+      changeDomain(domains.find((domain) => domain.name === initialDomainName));
+    }
+  }, [domains]);
+
+  useEffect(() => {
+    if (domainName) {
+      setInitialDomainName(domainName);
+    }
+  }, [domainName]);
+
+  useEffect(() => {
+    if (defaultDomainName !== undefined && domains.length > 0) {
+      changeDomain(domains.find((domain) => domain.name === defaultDomainName));
+    }
+  }, [defaultDomainName]);
+
+  useEffect(() => {
+    if (!currentConversation) {
+      return;
+    }
+    const { initMsg, domainId, entityId } = currentConversation;
+    if (initMsg) {
+      inputFocus();
+      if (initMsg === 'CUSTOMIZE' && copilotSendMsg) {
+        onSendMsg(copilotSendMsg, [], domainId, entityId);
+        dispatch({
+          type: 'globalState/setCopilotSendMsg',
+          payload: '',
+        });
+        return;
+      }
+      if (initMsg === DEFAULT_CONVERSATION_NAME || initMsg.includes('CUSTOMIZE')) {
+        sendHelloRsp();
+        return;
+      }
+      onSendMsg(initMsg, [], domainId, entityId);
+      return;
+    }
+    updateHistoryMsg(1);
+    setPageNo(1);
+  }, [currentConversation]);
+
+  useEffect(() => {
+    setDefaultEntity(defaultEntityFilter);
+  }, [defaultEntityFilter]);
+
+  useEffect(() => {
+    if (historyInited) {
+      const messageContainerEle = document.getElementById('messageContainer');
+      messageContainerEle?.addEventListener('scroll', handleScroll);
+    }
+    return () => {
+      const messageContainerEle = document.getElementById('messageContainer');
+      messageContainerEle?.removeEventListener('scroll', handleScroll);
+    };
+  }, [historyInited]);
+
+  useEffect(() => {
+    inputFocus();
+  }, [copilotFullscreen]);
+
  const sendHelloRsp = () => {
    setMessageList([
      {
        id: uuid(),
-        type: MessageTypeEnum.RECOMMEND_QUESTIONS,
-        // msg: '您好，请问有什么我能帮您吗？',
+        type: MessageTypeEnum.TEXT,
+        msg: defaultDomainName
+          ? `您好，请输入关于${
+              defaultEntityFilter?.entityName
+                ? `${defaultDomainName?.slice(0, defaultDomainName?.length - 1)}【${
+                    defaultEntityFilter?.entityName
+                  }】`
+                : `【${defaultDomainName}】`
+            }的问题`
+          : '您好，请问有什么我能帮您吗？',
      },
    ]);
  };

-  const existInstuctionMsg = (list: HistoryMsgItemType[]) => {
-    return list.some((msg) => msg.queryResult?.queryMode === MessageTypeEnum.INSTRUCTION);
-  };
-
-  const updateScroll = (list: HistoryMsgItemType[]) => {
-    if (existInstuctionMsg(list)) {
-      setMiniProgramLoading(true);
-      setTimeout(() => {
-        setMiniProgramLoading(false);
-        updateMessageContainerScroll();
-      }, 3000);
-    } else {
-      updateMessageContainerScroll();
-    }
+  const convertHistoryMsg = (list: HistoryMsgItemType[]) => {
+    return list.map((item: HistoryMsgItemType) => ({
+      id: item.questionId,
+      type:
+        item.queryResult?.queryMode === MessageTypeEnum.PLUGIN ||
+        item.queryResult?.queryMode === MessageTypeEnum.WEB_PAGE
+          ? MessageTypeEnum.PLUGIN
+          : MessageTypeEnum.QUESTION,
+      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: [] };
-    setMessageList([
-      ...list.map((item: HistoryMsgItemType) => ({
-        id: item.questionId,
-        type:
-          item.queryResult?.queryMode === MessageTypeEnum.INSTRUCTION
-            ? MessageTypeEnum.INSTRUCTION
-            : MessageTypeEnum.QUESTION,
-        msg: item.queryText,
-        msgData: item.queryResult,
-        isHistory: true,
-      })),
-      ...(page === 1 ? [] : messageList),
-    ]);
+    const msgList = [...convertHistoryMsg(list), ...(page === 1 ? [] : messageList)];
+    setMessageList(msgList);
    setHasNextPage(hasNextPage);
    if (page === 1) {
      if (list.length === 0) {
        sendHelloRsp();
-      } else {
-        setCurrentEntity(list[list.length - 1].queryResult);
      }
-      updateScroll(list);
+      updateMessageContainerScroll();
      setHistoryInited(true);
      inputFocus();
-    }
-    if (page > 1) {
+    } else {
      const msgEle = document.getElementById(`${messageList[0]?.id}`);
      msgEle?.scrollIntoView();
    }
@@ -113,31 +208,21 @@ const Chat: React.FC<Props> = ({ isCopilotMode }) => {
    },
  );

-  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) {}
+  const changeDomain = (domain?: DomainType) => {
+    setCurrentDomain(domain);
+    if (onCurrentDomainChange) {
+      onCurrentDomainChange(domain);
+    }
  };

-  useEffect(() => {
-    setChatSdkToken(localStorage.getItem(TOKEN_KEY) || '');
-    initDomains();
-  }, []);
-
-  useEffect(() => {
-    if (historyInited) {
-      const messageContainerEle = document.getElementById('messageContainer');
-      messageContainerEle?.addEventListener('scroll', handleScroll);
+  const initDomains = async () => {
+    const res = await getDomainList();
+    const domainList = getLeafList(res.data);
+    setDomains([{ id: -1, name: '全部', bizName: 'all', parentId: 0 }, ...domainList].slice(0, 11));
+    if (defaultDomainName !== undefined) {
+      changeDomain(domainList.find((domain) => domain.name === defaultDomainName));
    }
-    return () => {
-      const messageContainerEle = document.getElementById('messageContainer');
-      messageContainerEle?.removeEventListener('scroll', handleScroll);
-    };
-  }, [historyInited]);
+  };

  const inputFocus = () => {
    if (!isMobile) {
@@ -149,34 +234,12 @@ const Chat: React.FC<Props> = ({ isCopilotMode }) => {
    chatFooterRef.current?.inputBlur();
  };

-  useEffect(() => {
-    if (!currentConversation) {
-      return;
-    }
-    setCurrentEntity(undefined);
-    const { initMsg, domainId } = currentConversation;
-    if (initMsg) {
-      inputFocus();
-      if (initMsg === DEFAULT_CONVERSATION_NAME) {
-        sendHelloRsp();
-        return;
-      }
-      onSendMsg(currentConversation.initMsg, [], domainId);
-      return;
-    }
-    updateHistoryMsg(1);
-    setPageNo(1);
-  }, [currentConversation]);
-
-  const modifyConversationName = async (name: string) => {
-    await updateConversationName(name, currentConversation!.chatId);
-    if (!isMobileMode) {
-      conversationRef?.current?.updateData();
-      window.history.replaceState('', '', `?q=${name}&cid=${currentConversation!.chatId}`);
-    }
-  };
-
-  const onSendMsg = async (msg?: string, list?: MessageItem[], domainId?: number) => {
+  const onSendMsg = async (
+    msg?: string,
+    list?: MessageItem[],
+    domainId?: number,
+    entityId?: string,
+  ) => {
    const currentMsg = msg || inputMsg;
    if (currentMsg.trim() === '') {
      setInputMsg('');
@@ -184,8 +247,12 @@ const Chat: React.FC<Props> = ({ isCopilotMode }) => {
    }
    const msgDomain = domains.find((item) => currentMsg.includes(item.name));
    const certainDomain = currentMsg[0] === '@' && msgDomain;
+    let domainChanged = false;
+
    if (certainDomain) {
-      setCurrentDomain(msgDomain.id === -1 ? undefined : msgDomain);
+      const toDomain = msgDomain.id === -1 ? undefined : msgDomain;
+      changeDomain(toDomain);
+      domainChanged = currentDomain?.id !== toDomain?.id;
    }
    const domainIdValue = domainId || msgDomain?.id || currentDomain?.id;
    const msgs = [
@@ -195,6 +262,7 @@ const Chat: React.FC<Props> = ({ isCopilotMode }) => {
        msg: currentMsg,
        msgValue: certainDomain ? currentMsg.replace(`@${msgDomain.name}`, '').trim() : currentMsg,
        domainId: domainIdValue === -1 ? undefined : domainIdValue,
+        entityId: entityId || (domainChanged ? undefined : defaultEntity?.entityId),
        identityMsg: certainDomain ? getIdentityMsgText(msgDomain) : undefined,
        type: MessageTypeEnum.QUESTION,
      },
@@ -202,11 +270,6 @@ const Chat: React.FC<Props> = ({ isCopilotMode }) => {
    setMessageList(msgs);
    updateMessageContainerScroll();
    setInputMsg('');
-    modifyConversationName(currentMsg);
-  };
-
-  const onToggleCollapseBtn = () => {
-    setConversationCollapsed(!conversationCollapsed);
  };

  const onInputMsgChange = (value: string) => {
@@ -224,29 +287,38 @@ const Chat: React.FC<Props> = ({ isCopilotMode }) => {
    }
  };

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

  const onMsgDataLoaded = (data: MsgDataType, questionId: string | number) => {
+    if (!isMobile) {
+      conversationRef?.current?.updateData();
+    }
    if (!data) {
      return;
    }
-    if (data.queryMode === 'INSTRUCTION') {
+    if (data.queryMode === 'WEB_PAGE') {
      setMessageList([
-        ...messageList.slice(0, messageList.length - 1),
+        ...messageList,
        {
          id: uuid(),
-          msg: data.response.name || messageList[messageList.length - 1]?.msg,
-          type: MessageTypeEnum.INSTRUCTION,
+          msg: messageList[messageList.length - 1]?.msg,
+          type: MessageTypeEnum.PLUGIN,
          msgData: data,
        },
      ]);
@@ -259,7 +331,6 @@ const Chat: React.FC<Props> = ({ isCopilotMode }) => {
      }
      updateMessageContainerScroll();
    }
-    setCurrentEntity(data);
  };

  const onCheckMore = (data: MsgDataType) => {
@@ -268,11 +339,19 @@ const Chat: React.FC<Props> = ({ isCopilotMode }) => {
      {
        id: uuid(),
        msg: data.response.name,
-        type: MessageTypeEnum.INSTRUCTION,
+        type: MessageTypeEnum.PLUGIN,
        msgData: data,
      },
    ]);
    updateMessageContainerScroll();
+    if (onCheckMoreDetail) {
+      onCheckMoreDetail();
+    }
+  };
+
+  const onToggleCollapseBtn = () => {
+    setConversationCollapsed(!conversationCollapsed);
+    localStorage.setItem('CONVERSATION_COLLAPSED', `${!conversationCollapsed}`);
  };

  const getIdentityMsgText = (domain?: DomainType) => {
@@ -281,26 +360,19 @@ const Chat: React.FC<Props> = ({ isCopilotMode }) => {
      : '您好，我将尽力帮您解答所有主题相关问题～';
  };

-  const getIdentityMsg = (domain?: DomainType) => {
-    return {
-      id: uuid(),
-      type: MessageTypeEnum.TEXT,
-      msg: getIdentityMsgText(domain),
-    };
+  const onApplyAuth = (domain: string) => {
+    setApplyAuthDomain(domain);
+    setApplyAuthVisible(true);
  };

-  const onSelectDomain = (domain: DomainType) => {
-    const domainValue = currentDomain?.id === domain.id ? undefined : domain;
-    setCurrentDomain(domainValue);
-    setCurrentEntity(undefined);
-    setMessageList([...messageList, getIdentityMsg(domainValue)]);
-    updateMessageContainerScroll();
+  const onAddConversation = () => {
+    conversationRef.current?.onAddConversation();
    inputFocus();
  };

  const chatClass = classNames(styles.chat, {
    [styles.mobile]: isMobileMode,
-    [styles.copilot]: isCopilotMode,
+    [styles.copilotFullscreen]: copilotFullscreen,
    [styles.conversationCollapsed]: conversationCollapsed,
  });

@@ -312,6 +384,11 @@ const Chat: React.FC<Props> = ({ isCopilotMode }) => {
        <Conversation
          currentConversation={currentConversation}
          collapsed={conversationCollapsed}
+          isCopilotMode={isCopilotMode}
+          defaultDomainName={defaultDomainName}
+          defaultEntityFilter={defaultEntityFilter}
+          triggerNewConversation={triggerNewConversation}
+          onNewConversationTriggered={onNewConversationTriggered}
          onSelectConversation={onSelectConversation}
          ref={conversationRef}
        />
@@ -325,20 +402,21 @@ const Chat: React.FC<Props> = ({ isCopilotMode }) => {
                  chatId={currentConversation?.chatId}
                  isMobileMode={isMobileMode}
                  conversationCollapsed={conversationCollapsed}
-                  onClickMessageContainer={() => {
-                    inputFocus();
-                  }}
+                  copilotFullscreen={copilotFullscreen}
+                  onClickMessageContainer={inputFocus}
                  onMsgDataLoaded={onMsgDataLoaded}
-                  onSelectSuggestion={onSendMsg}
                  onCheckMore={onCheckMore}
+                  onApplyAuth={onApplyAuth}
                />
                <ChatFooter
                  inputMsg={inputMsg}
                  chatId={currentConversation?.chatId}
                  domains={domains}
                  currentDomain={currentDomain}
+                  defaultEntity={defaultEntity}
                  collapsed={conversationCollapsed}
-                  isMobileMode={isMobileMode}
+                  isCopilotMode={isCopilotMode}
+                  copilotFullscreen={copilotFullscreen}
                  onToggleCollapseBtn={onToggleCollapseBtn}
                  onInputMsgChange={onInputMsgChange}
                  onSendMsg={(msg: string, domainId?: number) => {
@@ -347,9 +425,12 @@ const Chat: React.FC<Props> = ({ isCopilotMode }) => {
                      inputBlur();
                    }
                  }}
-                  onAddConversation={() => {
-                    conversationRef.current?.onAddConversation();
-                    inputFocus();
+                  onAddConversation={onAddConversation}
+                  onCancelDefaultFilter={() => {
+                    changeDomain(undefined);
+                    if (onCancelCopilotFilter) {
+                      onCancelCopilotFilter();
+                    }
                  }}
                  ref={chatFooterRef}
                />
@@ -357,17 +438,6 @@ const Chat: React.FC<Props> = ({ isCopilotMode }) => {
            </div>
          )}
        </div>
-        {/* {!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
@@ -24,10 +24,19 @@ export function getAllConversations() {
  return request<Result<any>>(`${prefix}/chat/manage/getAll`);
 }

+export function getMiniProgramList(entityId: string, domainId: number) {
+  return request<Result<any>>(
+    `${prefix}/chat/plugin/extend/getAvailablePlugin/${entityId}/${domainId}`,
+    {
+      method: 'GET',
+      skipErrorHandler: true,
+    },
+  );
+}
+
 export function getDomainList() {
  return request<Result<DomainType[]>>(`${prefix}/chat/conf/domainList/view`, {
    method: 'GET',
-    skipErrorHandler: true,
  });
 }

@@ -40,6 +49,12 @@ export function updateQAFeedback(questionId: number, score: number) {
  );
 }

+export function queryMetricSuggestion(domainId: number) {
+  return request<Result<any>>(`${prefix}/chat/recommend/metric/${domainId}`, {
+    method: 'GET',
+  });
+}
+
 export function querySuggestion(domainId: number) {
  return request<Result<any>>(`${prefix}/chat/recommend/${domainId}`, {
    method: 'GET',
--- a/webapp/packages/supersonic-fe/src/pages/Chat/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/style.less
@@ -17,8 +17,8 @@
    display: flex;
    flex-direction: column;
    width: calc(100vw - 260px);
-    height: calc(100vh - 48px);
-    padding-left: 10px;
+    height: calc(100vh - 48px) !important;
+    padding-left: 6px;
    color: rgba(0, 0, 0, 0.87);

    .emptyHolder {
@@ -100,7 +100,7 @@
          .messageList {
            display: flex;
            flex-direction: column;
-            padding: 20px 20px 90px 4px;
+            padding: 20px 20px 60px 4px;
            row-gap: 10px;

            .messageItem {
@@ -109,6 +109,16 @@
              row-gap: 10px;

              :global {
+                .ant-table-small {
+                  .ant-table-tbody {
+                    .ant-table-cell {
+                      padding: 6px 0 !important;
+                    }
+                  }
+                  .ss-chat-table-formatted-value {
+                    font-size: 15px !important;
+                  }
+                }
                .ant-table-row {
                  background-color: #fff;
                }
@@ -218,12 +228,6 @@
                }
              }
            }
-
-            &.miniProgramLoading {
-              position: absolute;
-              bottom: 10000px;
-              width: 100%;
-            }
          }
        }
      }
@@ -232,7 +236,7 @@

  &.conversationCollapsed {
    .chatApp {
-      width: 100% !important;
+      width: 100vw !important;
    }
  }

@@ -246,19 +250,193 @@

    .conversation {
      height: 100% !important;
+
+      .conversationList {
+        height: calc(100% - 50px) !important;
+      }
    }

    .chatApp {
-      width: 100% !important;
+      width: calc(100% - 260px) !important;
+      width: 100%;
      height: 100% !important;
      margin-top: 0 !important;
+      padding-left: 0 !important;
+    }
+
+    &.copilotFullscreen {
+      .chatApp {
+        width: calc(100% - 260px) !important;
+      }
+    }
+
+    &.conversationCollapsed {
+      .chatApp {
+        width: 100% !important;
+      }
+    }
+  }
+}
+
+.conversation {
+  position: relative;
+  width: 260px;
+  height: calc(100vh - 48px) !important;
+  background-color: #fff;
+  border-right: 1px solid var(--border-color-base);
+
+  .leftSection {
+    width: 100%;
+    height: 100%;
+
+    .searchConversation {
+      display: flex;
+      align-items: center;
+      padding: 12px 9px 10px;
+
+      .searchIcon {
+        color: #999 !important;
+      }
+
+      .searchTask {
+        font-size: 13px;
+        background-color: #f5f5f5;
+        border: 0;
+        border-radius: 4px;
+        box-shadow: none !important;
+
+        :global {
+          .ant-input {
+            font-size: 13px !important;
+            background-color: transparent !important;
+          }
+        }
+      }
+    }
+
+    .conversationList {
+      height: calc(calc(100vh - 48px) - 50px);
+      padding: 2px 8px 0;
+      overflow-y: auto;
+      .conversationItem {
+        display: flex;
+        align-items: center;
+        margin-top: 2px;
+        padding: 6px 8px;
+        border-radius: 8px;
+        cursor: pointer;
+
+        .conversationIcon {
+          margin-right: 10px;
+          color: var(--text-color-fourth);
+          font-size: 20px;
+        }
+
+        .conversationContent {
+          width: 100%;
+
+          .topTitleBar {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+
+            .conversationName {
+              width: 150px;
+              margin-right: 2px;
+              overflow: hidden;
+              color: var(--text-color);
+              font-size: 14px;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+
+            .conversationTime {
+              color: var(--text-color-six);
+              font-size: 12px;
+            }
+          }
+
+          .subTitle {
+            width: 180px;
+            overflow: hidden;
+            color: var(--text-color-six);
+            font-size: 12px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+        }
+
+        &.activeConversationItem {
+          background-color: var(--light-blue-background);
+        }
+
+        &:hover {
+          background-color: var(--light-background);
+        }
+      }
+    }
+
+    .operateSection {
+      margin-top: 20px;
+      padding-left: 15px;
+    }
+
+    .operateItem {
+      display: flex;
+      align-items: center;
+      padding: 10px 0;
+      cursor: pointer;
+
+      .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);
+        }
+      }
+    }
+  }
+
+  &.collapsed {
+    width: 0;
+    padding: 0;
+    border-right: 0;
+
+    .leftSection {
+      .searchConversation {
+        display: none;
+      }
+
+      .conversationList {
+        display: none;
+      }
+
+      .operateSection {
+        display: none;
+      }
+    }
+  }
+
+  &.copilotMode {
+    &.collapsed {
+      width: 0 !important;
    }
  }
 }

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

@@ -326,7 +504,6 @@

  .example {
    margin-right: 4px;
-    // margin-left: 16px;
    color: var(--text-color-secondary);
    font-size: 13px;
  }
@@ -409,7 +586,6 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
-  // width: 530px;

  &.recentSearchBar {
    padding-top: 2px;
@@ -607,4 +783,14 @@
      border-bottom: 1px solid #f0f0f0;
    }
  }
+
+  .ss-chat-item-typing-bubble {
+    padding: 16px !important;
+  }
+
+  ss-chat-metric-card-drill-down-dimensions {
+    bottom: -38px !important;
+    left: 0 !important;
+  }
 }
+
--- a/webapp/packages/supersonic-fe/src/pages/Chat/type.ts
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/type.ts
@@ -3,11 +3,13 @@ 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', // 插件
-  SUGGESTION = 'SUGGESTION',
-  RECOMMEND_QUESTIONS = 'RECOMMEND_QUESTIONS' // 推荐问题
+  PLUGIN = 'PLUGIN', // 插件
+  WEB_PAGE = 'WEB_PAGE', // 插件
+  RECOMMEND_QUESTIONS = 'recommend_questions', // 推荐问题
 }

 export type MessageItem = {
@@ -17,8 +19,11 @@ export type MessageItem = {
  msgValue?: string;
  identityMsg?: string;
  domainId?: number;
+  entityId?: string;
  msgData?: MsgDataType;
  quote?: string;
+  score?: number;
+  feedback?: string;
  isHistory?: boolean;
 };

@@ -31,6 +36,7 @@ export type ConversationDetailType = {
  lastTime?: string;
  initMsg?: string;
  domainId?: number;
+  entityId?: string;
 };

 export enum MessageModeEnum {
@@ -44,6 +50,25 @@ export type DomainType = {
  bizName: string;
 };

+export enum PluginShowTypeEnum {
+  DASHBOARD = 'DASHBOARD',
+  WIDGET = 'WIDGET',
+  URL = 'URL',
+  TAG = 'TAG',
+}
+
+export type PluginType = {
+  id: number;
+  name: string;
+  comment: string;
+};
+
+export type DefaultEntityType = {
+  entityId: string;
+  entityName: string;
+  domainName?: string;
+};
+
 export type SuggestionItemType = {
  id: number;
  domain: number;