Merge pull request #31 from williamhliu/master

[feature](webapp) add copilot and modify domain to model
2025-12-10 11:07:06 +00:00 · 2023-08-15 20:11:12 +08:00
parent 2732d8fee1 86b93876c7
commit 3cb8f53aec
43 changed files with 738 additions and 431 deletions
--- a/webapp/packages/chat-sdk/config/webpackDevServer.config.js
+++ b/webapp/packages/chat-sdk/config/webpackDevServer.config.js
@@ -22,7 +22,7 @@ module.exports = function (proxy, allowedHost) {
    // https://github.com/webpack/webpack-dev-server/issues/887
    // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
    // However, it made several existing use cases such as development in cloud
-    // environment or subdomains in development significantly more complicated:
+    // environment or submodels in development significantly more complicated:
    // https://github.com/facebook/create-react-app/issues/2271
    // https://github.com/facebook/create-react-app/issues/2233
    // While we're investigating better solutions, for now we will take a
@@ -33,7 +33,7 @@ module.exports = function (proxy, allowedHost) {
    // So we will disable the host check normally, but enable it if you have
    // specified the `proxy` setting. Finally, we let you override it if you
    // really know what you're doing with a special environment variable.
-    // Note: ["localhost", ".localhost"] will support subdomains - but we might
+    // Note: ["localhost", ".localhost"] will support submodels - but we might
    // want to allow setting the allowedHosts manually for more complex setups
    allowedHosts: disableFirewall ? 'all' : [allowedHost],
    headers: {
--- a/webapp/packages/chat-sdk/src/common/type.ts
+++ b/webapp/packages/chat-sdk/src/common/type.ts
@@ -1,7 +1,7 @@
 export type SearchRecommendItem = {
  complete: boolean;
-  domainId: number;
-  domainName: string;
+  modelId: number;
+  modelName: string;
  recommend: string;
  subRecommend: string;
  schemaElementType: string;
@@ -12,12 +12,12 @@ export type FieldType = {
  id: number;
  name: string;
  status: number;
-  domain: number;
+  model: number;
  type: string;
  value: string;
 };

-export type DomainInfoType = {
+export type ModelInfoType = {
  bizName: string;
  itemId: number;
  name: string;
@@ -27,7 +27,7 @@ export type DomainInfoType = {
 };

 export type EntityInfoType = {
-  domainInfo: DomainInfoType;
+  modelInfo: ModelInfoType;
  dimensions: FieldType[];
  metrics: FieldType[];
  entityId: number;
@@ -53,8 +53,8 @@ export type FilterItemType = {

 export type ChatContextType = {
  aggType: string;
-  domainId: number;
-  domainName: string;
+  modelId: number;
+  modelName: string;
  dateInfo: DateInfoType;
  dimensions: FieldType[];
  metrics: FieldType[];
@@ -104,6 +104,7 @@ export type MsgDataType = {
  queryMode: string;
  queryState: string;
  response: PluginResonseType;
+  parseOptions?: ChatContextType[];
 };

 export enum ParseStateEnum {
@@ -121,6 +122,7 @@ export type ParseDataType = {
 }

 export type QueryDataType = {
+  aggregateInfo: AggregateInfoType;
  queryColumns: ColumnType[];
  queryResults: any[];
 };
@@ -153,7 +155,7 @@ export const SEMANTIC_TYPE_MAP = {
 };

 export type SuggestionItemType = {
-  domain: number;
+  model: number;
  name: string;
  bizName: string
 };
@@ -187,7 +189,7 @@ export type HistoryType = {

 export type DrillDownDimensionType = {
  id: number;
-  domain: number;
+  model: number;
  name: string;
  bizName: string;
 }
--- a/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx
@@ -10,6 +10,7 @@ type Props = {
  parseInfoOptions: ChatContextType[];
  parseTip: string;
  currentParseInfo?: ChatContextType;
+  optionMode?: boolean;
  onSelectParseInfo: (parseInfo: ChatContextType) => void;
 };

@@ -20,6 +21,7 @@ const ParseTip: React.FC<Props> = ({
  parseInfoOptions,
  parseTip,
  currentParseInfo,
+  optionMode,
  onSelectParseInfo,
 }) => {
  const prefixCls = `${PREFIX_CLS}-item`;
@@ -38,7 +40,7 @@ const ParseTip: React.FC<Props> = ({

  const getTipNode = (parseInfo: ChatContextType, isOptions?: boolean, index?: number) => {
    const {
-      domainName,
+      modelName,
      dateInfo,
      dimensionFilters,
      dimensions,
@@ -70,6 +72,7 @@ const ParseTip: React.FC<Props> = ({
      [`${prefixCls}-tip-item-option`]: isOptions,
    });

+    const entityId = dimensionFilters?.length > 0 ? dimensionFilters[0].value : undefined;
    const entityAlias = entity?.alias?.[0]?.split('.')?.[0];
    const entityName = elementMatches?.find(item => item.element?.type === 'ID')?.element.name;

@@ -106,7 +109,10 @@ const ParseTip: React.FC<Props> = ({
          </div>
        ) : (
          <>
-            {queryMode === 'METRIC_ENTITY' || queryMode === 'ENTITY_DETAIL' ? (
+            {queryMode.includes('ENTITY') &&
+            typeof entityId === 'string' &&
+            !!entityAlias &&
+            !!entityName ? (
              <div className={`${prefixCls}-tip-item`}>
                <div className={`${prefixCls}-tip-item-name`}>{entityAlias}：</div>
                <div className={itemValueClass}>{entityName}</div>
@@ -114,7 +120,7 @@ const ParseTip: React.FC<Props> = ({
            ) : (
              <div className={`${prefixCls}-tip-item`}>
                <div className={`${prefixCls}-tip-item-name`}>主题域：</div>
-                <div className={itemValueClass}>{domainName}</div>
+                <div className={itemValueClass}>{modelName}</div>
              </div>
            )}
            {modeName === '算指标' && metric && (
@@ -180,10 +186,12 @@ const ParseTip: React.FC<Props> = ({

  let tipNode: ReactNode;

-  if (parseInfoOptions.length > 1) {
+  if (parseInfoOptions.length > 1 || optionMode) {
    tipNode = (
      <div className={`${prefixCls}-multi-options`}>
-        <div>您的问题解析为以下几项，请您点击确认</div>
+        <div>
+          还有以下的相关问题，<strong>请您点击提交</strong>
+        </div>
        <div className={`${prefixCls}-options`}>
          {parseInfoOptions.map((item, index) => getTipNode(item, true, index))}
        </div>
--- a/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx
@@ -9,12 +9,13 @@ import ExecuteItem from './ExecuteItem';
 type Props = {
  msg: string;
  conversationId?: number;
-  domainId?: number;
+  modelId?: number;
  filter?: any[];
  isLastMessage?: boolean;
  msgData?: MsgDataType;
  isMobileMode?: boolean;
  triggerResize?: boolean;
+  parseOptions?: ChatContextType[];
  onMsgDataLoaded?: (data: MsgDataType, valid: boolean) => void;
  onUpdateMessageScroll?: () => void;
 };
@@ -22,19 +23,20 @@ type Props = {
 const ChatItem: React.FC<Props> = ({
  msg,
  conversationId,
-  domainId,
+  modelId,
  filter,
  isLastMessage,
  isMobileMode,
  triggerResize,
  msgData,
+  parseOptions,
  onMsgDataLoaded,
  onUpdateMessageScroll,
 }) => {
  const [data, setData] = useState<MsgDataType>();
  const [parseLoading, setParseLoading] = useState(false);
  const [parseInfo, setParseInfo] = useState<ChatContextType>();
-  const [parseInfoOptions, setParseInfoOptions] = useState<ChatContextType[]>([]);
+  const [parseInfoOptions, setParseInfoOptions] = useState<ChatContextType[]>(parseOptions || []);
  const [parseTip, setParseTip] = useState('');
  const [executeLoading, setExecuteLoading] = useState(false);
  const [executeTip, setExecuteTip] = useState('');
@@ -68,20 +70,43 @@ const ChatItem: React.FC<Props> = ({
    return true;
  };

-  const onExecute = async (parseInfoValue: ChatContextType, isSwitch?: boolean) => {
+  const onExecute = async (
+    parseInfoValue: ChatContextType,
+    parseInfoOptions?: ChatContextType[]
+  ) => {
    setExecuteMode(true);
    setExecuteLoading(true);
    const { data } = await chatExecute(msg, conversationId!, parseInfoValue);
    setExecuteLoading(false);
    const valid = updateData(data);
-    if (onMsgDataLoaded && !isSwitch) {
-      onMsgDataLoaded({ ...data.data, chatContext: parseInfoValue }, valid);
+    if (onMsgDataLoaded) {
+      let parseOptions: ChatContextType[] = parseInfoOptions || [];
+      if (
+        parseInfoOptions &&
+        parseInfoOptions.length > 1 &&
+        (parseInfoOptions[0].queryMode.includes('METRIC') ||
+          parseInfoOptions[0].queryMode.includes('ENTITY'))
+      ) {
+        parseOptions = parseInfoOptions.filter(
+          (item, index) =>
+            index === 0 ||
+            (!item.queryMode.includes('METRIC') && !item.queryMode.includes('ENTITY'))
+        );
+      }
+      onMsgDataLoaded(
+        {
+          ...data.data,
+          chatContext: parseInfoValue,
+          parseOptions: parseOptions.length > 1 ? parseOptions.slice(1) : undefined,
+        },
+        valid
+      );
    }
  };

  const onSendMsg = async () => {
    setParseLoading(true);
-    const { data: parseData } = await chatParse(msg, conversationId, domainId, filter);
+    const { data: parseData } = await chatParse(msg, conversationId, modelId, filter);
    setParseLoading(false);
    const { code, data } = parseData || {};
    const { state, selectedParses } = data || {};
@@ -91,7 +116,7 @@ const ChatItem: React.FC<Props> = ({
      selectedParses == null ||
      selectedParses.length === 0 ||
      (selectedParses.length === 1 &&
-        !selectedParses[0]?.domainName &&
+        !selectedParses[0]?.modelName &&
        !selectedParses[0]?.properties?.CONTEXT?.plugin?.name &&
        selectedParses[0]?.queryMode !== 'WEB_PAGE')
    ) {
@@ -102,15 +127,13 @@ const ChatItem: React.FC<Props> = ({
      onUpdateMessageScroll();
    }
    setParseInfoOptions(selectedParses || []);
-    if (selectedParses.length === 1) {
-      const parseInfoValue = selectedParses[0];
-      setParseInfo(parseInfoValue);
-      onExecute(parseInfoValue);
-    }
+    const parseInfoValue = selectedParses[0];
+    setParseInfo(parseInfoValue);
+    onExecute(parseInfoValue, selectedParses);
  };

  useEffect(() => {
-    if (data !== undefined) {
+    if (data !== undefined || parseOptions !== undefined || executeTip !== '') {
      return;
    }
    if (msgData) {
@@ -124,7 +147,7 @@ const ChatItem: React.FC<Props> = ({

  const onSwitchEntity = async (entityId: string) => {
    setEntitySwitching(true);
-    const res = await switchEntity(entityId, data?.chatContext?.domainId, conversationId || 0);
+    const res = await switchEntity(entityId, data?.chatContext?.modelId, conversationId || 0);
    setEntitySwitching(false);
    setData(res.data.data);
  };
@@ -135,7 +158,7 @@ const ChatItem: React.FC<Props> = ({

  const onSelectParseInfo = async (parseInfoValue: ChatContextType) => {
    setParseInfo(parseInfoValue);
-    onExecute(parseInfoValue, parseInfo !== undefined);
+    onExecute(parseInfoValue);
    if (onUpdateMessageScroll) {
      onUpdateMessageScroll();
    }
@@ -148,9 +171,10 @@ const ChatItem: React.FC<Props> = ({
        <div className={`${prefixCls}-content`}>
          <ParseTip
            parseLoading={parseLoading}
-            parseInfoOptions={parseInfoOptions}
+            parseInfoOptions={parseOptions || parseInfoOptions.slice(0, 1)}
            parseTip={parseTip}
            currentParseInfo={parseInfo}
+            optionMode={parseOptions !== undefined}
            onSelectParseInfo={onSelectParseInfo}
          />
        </div>
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/ApplyAuth/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/ApplyAuth/index.tsx
@@ -1,11 +1,11 @@
 import { PREFIX_CLS } from '../../../common/constants';

 type Props = {
-  domain: string;
-  onApplyAuth?: (domain: string) => void;
+  model: string;
+  onApplyAuth?: (model: string) => void;
 };

-const ApplyAuth: React.FC<Props> = ({ domain, onApplyAuth }) => {
+const ApplyAuth: React.FC<Props> = ({ model, onApplyAuth }) => {
  const prefixCls = `${PREFIX_CLS}-apply-auth`;

  return (
@@ -15,7 +15,7 @@ const ApplyAuth: React.FC<Props> = ({ domain, onApplyAuth }) => {
        <span
          className={`${prefixCls}-apply`}
          onClick={() => {
-            onApplyAuth(domain);
+            onApplyAuth(model);
          }}
        >
          点击申请
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/Bar/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/Bar/index.tsx
@@ -15,7 +15,7 @@ type Props = {
  drillDownDimension?: DrillDownDimensionType;
  loading: boolean;
  onSelectDimension: (dimension?: DrillDownDimensionType) => void;
-  onApplyAuth?: (domain: string) => void;
+  onApplyAuth?: (model: string) => void;
 };

 const BarChart: React.FC<Props> = ({
@@ -152,7 +152,7 @@ const BarChart: React.FC<Props> = ({
  if (metricColumn && !metricColumn?.authorized) {
    return (
      <NoPermissionChart
-        domain={entityInfo?.domainInfo.name || ''}
+        model={entityInfo?.modelInfo.name || ''}
        chartType="barChart"
        onApplyAuth={onApplyAuth}
      />
@@ -193,11 +193,9 @@ const BarChart: React.FC<Props> = ({
      <Spin spinning={loading}>
        <div className={`${prefixCls}-chart`} ref={chartRef} />
      </Spin>
-      {(queryMode === 'METRIC_DOMAIN' ||
-        queryMode === 'METRIC_FILTER' ||
-        queryMode === 'METRIC_GROUPBY') && (
+      {queryMode.includes('METRIC') && (
        <DrillDownDimensions
-          domainId={chatContext.domainId}
+          modelId={chatContext.modelId}
          drillDownDimension={drillDownDimension}
          dimensionFilters={chatContext.dimensionFilters}
          onSelectDimension={onSelectDimension}
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/Message/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/Message/index.tsx
@@ -26,7 +26,7 @@ const Message: React.FC<Props> = ({
 }) => {
  const prefixCls = `${PREFIX_CLS}-message`;

-  const { domainName, dateInfo, dimensionFilters } = chatContext || {};
+  const { modelName, dateInfo, dimensionFilters } = chatContext || {};
  const { startDate, endDate } = dateInfo || {};

  const entityInfoList =
@@ -67,7 +67,7 @@ const Message: React.FC<Props> = ({
                <div className={`${prefixCls}-main-entity-info`}>
                  <div className={`${prefixCls}-info-item`}>
                    <div className={`${prefixCls}-info-name`}>主题域：</div>
-                    <div className={`${prefixCls}-info-value`}>{domainName}</div>
+                    <div className={`${prefixCls}-info-value`}>{modelName}</div>
                  </div>
                  <div className={`${prefixCls}-info-item`}>
                    <div className={`${prefixCls}-info-name`}>时间：</div>
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/Message/style.less
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/Message/style.less
@@ -10,7 +10,7 @@
    margin-bottom: 6px;
  }

-  &-domain-name {
+  &-model-name {
    color: var(--text-color);
    margin-left: 4px;
    font-weight: 500;
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricCard/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricCard/index.tsx
@@ -13,7 +13,7 @@ type Props = {
  drillDownDimension?: DrillDownDimensionType;
  loading: boolean;
  onSelectDimension: (dimension?: DrillDownDimensionType) => void;
-  onApplyAuth?: (domain: string) => void;
+  onApplyAuth?: (model: string) => void;
 };

 const MetricCard: React.FC<Props> = ({
@@ -64,7 +64,7 @@ const MetricCard: React.FC<Props> = ({
        <div className={indicatorClass}>
          <div className={`${prefixCls}-date-range`}>{startDate}</div>
          {indicatorColumn && !indicatorColumn?.authorized ? (
-            <ApplyAuth domain={entityInfo?.domainInfo.name || ''} onApplyAuth={onApplyAuth} />
+            <ApplyAuth model={entityInfo?.modelInfo.name || ''} onApplyAuth={onApplyAuth} />
          ) : (
            <div className={`${prefixCls}-indicator-value`}>
              {formatMetric(queryResults?.[0]?.[indicatorColumnName]) || '-'}
@@ -79,10 +79,10 @@ const MetricCard: React.FC<Props> = ({
          )}
        </div>
      </Spin>
-      {(queryMode === 'METRIC_DOMAIN' || queryMode === 'METRIC_FILTER') && (
+      {queryMode.includes('METRIC') && (
        <div className={`${prefixCls}-drill-down-dimensions`}>
          <DrillDownDimensions
-            domainId={chatContext.domainId}
+            modelId={chatContext.modelId}
            dimensionFilters={chatContext.dimensionFilters}
            drillDownDimension={drillDownDimension}
            onSelectDimension={onSelectDimension}
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricCard/style.less
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricCard/style.less
@@ -109,7 +109,7 @@

  &-drill-down-dimensions {
    position: absolute;
-    bottom: -44px;
-    left: -16;
+    bottom: -38px;
+    left: 0;
  }
 }
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricTrendChart.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricTrendChart.tsx
@@ -14,17 +14,17 @@ import { ColumnType } from '../../../common/type';
 import NoPermissionChart from '../NoPermissionChart';

 type Props = {
-  domain?: string;
+  model?: string;
  dateColumnName: string;
  categoryColumnName: string;
  metricField: ColumnType;
  resultList: any[];
  triggerResize?: boolean;
-  onApplyAuth?: (domain: string) => void;
+  onApplyAuth?: (model: string) => void;
 };

 const MetricTrendChart: React.FC<Props> = ({
-  domain,
+  model,
  dateColumnName,
  categoryColumnName,
  metricField,
@@ -204,7 +204,7 @@ const MetricTrendChart: React.FC<Props> = ({
  return (
    <div>
      {!metricField.authorized ? (
-        <NoPermissionChart domain={domain || ''} onApplyAuth={onApplyAuth} />
+        <NoPermissionChart model={model || ''} onApplyAuth={onApplyAuth} />
      ) : (
        <div className={`${prefixCls}-flow-trend-chart`} ref={chartRef} />
      )}
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/index.tsx
@@ -15,7 +15,7 @@ type Props = {
  data: MsgDataType;
  chartIndex: number;
  triggerResize?: boolean;
-  onApplyAuth?: (domain: string) => void;
+  onApplyAuth?: (model: string) => void;
 };

 const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApplyAuth }) => {
@@ -36,6 +36,7 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
  const [currentDateOption, setCurrentDateOption] = useState<number>(initialDateOption);
  const [dimensions, setDimensions] = useState<FieldType[]>(chatContext?.dimensions);
  const [drillDownDimension, setDrillDownDimension] = useState<DrillDownDimensionType>();
+  const [aggregateInfoValue, setAggregateInfoValue] = useState<any>(aggregateInfo);
  const [dateModeValue, setDateModeValue] = useState(dateMode);
  const [loading, setLoading] = useState(false);

@@ -72,6 +73,7 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
    if (data.code === 200) {
      setColumns(data.data?.queryColumns || []);
      setDataSource(data.data?.queryResults || []);
+      setAggregateInfoValue(data.data?.aggregateInfo);
    }
  };

@@ -172,7 +174,9 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
            </div>
          )}
        </div>
-        {aggregateInfo?.metricInfos?.length > 0 && <MetricInfo aggregateInfo={aggregateInfo} />}
+        {aggregateInfoValue?.metricInfos?.length > 0 && (
+          <MetricInfo aggregateInfo={aggregateInfoValue} />
+        )}
        <div className={`${prefixCls}-date-options`}>
          {dateOptions.map((dateOption: { label: string; value: number }, index: number) => {
            const dateOptionClass = classNames(`${prefixCls}-date-option`, {
@@ -205,7 +209,7 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
            <Table data={{ ...data, queryResults: dataSource }} onApplyAuth={onApplyAuth} />
          ) : (
            <MetricTrendChart
-              domain={entityInfo?.domainInfo.name}
+              model={entityInfo?.modelInfo.name}
              dateColumnName={dateColumnName}
              categoryColumnName={categoryColumnName}
              metricField={currentMetricField}
@@ -215,11 +219,9 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
            />
          )}
        </Spin>
-        {(queryMode === 'METRIC_DOMAIN' ||
-          queryMode === 'METRIC_FILTER' ||
-          queryMode === 'METRIC_GROUPBY') && (
+        {queryMode.includes('METRIC') && (
          <DrillDownDimensions
-            domainId={chatContext.domainId}
+            modelId={chatContext.modelId}
            drillDownDimension={drillDownDimension}
            dimensionFilters={chatContext.dimensionFilters}
            onSelectDimension={onSelectDimension}
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/NoPermissionChart/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/NoPermissionChart/index.tsx
@@ -3,12 +3,12 @@ import { CLS_PREFIX } from '../../../common/constants';
 import ApplyAuth from '../ApplyAuth';

 type Props = {
-  domain: string;
+  model: string;
  chartType?: string;
-  onApplyAuth?: (domain: string) => void;
+  onApplyAuth?: (model: string) => void;
 };

-const NoPermissionChart: React.FC<Props> = ({ domain, chartType, onApplyAuth }) => {
+const NoPermissionChart: React.FC<Props> = ({ model, chartType, onApplyAuth }) => {
  const prefixCls = `${CLS_PREFIX}-no-permission-chart`;

  const chartHolderClass = classNames(`${prefixCls}-holder`, {
@@ -19,7 +19,7 @@ const NoPermissionChart: React.FC<Props> = ({ domain, chartType, onApplyAuth })
    <div className={prefixCls}>
      <div className={chartHolderClass} />
      <div className={`${prefixCls}-no-permission`}>
-        <ApplyAuth domain={domain} onApplyAuth={onApplyAuth} />
+        <ApplyAuth model={model} onApplyAuth={onApplyAuth} />
      </div>
    </div>
  );
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/Table/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/Table/index.tsx
@@ -8,7 +8,7 @@ import { SizeType } from 'antd/es/config-provider/SizeContext';
 type Props = {
  data: MsgDataType;
  size?: SizeType;
-  onApplyAuth?: (domain: string) => void;
+  onApplyAuth?: (model: string) => void;
 };

 const Table: React.FC<Props> = ({ data, size, onApplyAuth }) => {
@@ -24,9 +24,7 @@ const Table: React.FC<Props> = ({ data, size, onApplyAuth }) => {
        title: name || nameEn,
        render: (value: string | number) => {
          if (!authorized) {
-            return (
-              <ApplyAuth domain={entityInfo?.domainInfo.name || ''} onApplyAuth={onApplyAuth} />
-            );
+            return <ApplyAuth model={entityInfo?.modelInfo.name || ''} onApplyAuth={onApplyAuth} />;
          }
          if (dataFormatType === 'percent') {
            return (
@@ -71,7 +69,7 @@ const Table: React.FC<Props> = ({ data, size, onApplyAuth }) => {
        columns={tableColumns}
        dataSource={queryResults}
        style={{ width: '100%' }}
-        scroll={{ x: 'max-content' }}
+        // scroll={{ x: 'max-content' }}
        rowClassName={getRowClassName}
        size={size}
      />
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/Table/style.less
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/Table/style.less
@@ -3,7 +3,7 @@
@table-prefix-cls: ~'@{supersonic-chat-prefix}-table';

 .@{table-prefix-cls} {
-  margin-top: 20px;
+  margin-top: 16px;
  margin-bottom: 20px;

  &-photo {
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx
@@ -35,10 +35,15 @@ const ChatMsg: React.FC<Props> = ({ question, data, chartIndex, isMobileMode, tr
  const metricFields = columns.filter(item => item.showType === 'NUMBER');

  const isMetricCard =
-    (queryMode === 'METRIC_DOMAIN' || queryMode === 'METRIC_FILTER') &&
+    queryMode.includes('METRIC') &&
    (singleData || chatContext?.dateInfo?.startDate === chatContext?.dateInfo?.endDate);

-  const isText = columns.length === 1 && columns[0].showType === 'CATEGORY' && singleData;
+  const isText =
+    columns.length === 1 &&
+    columns[0].showType === 'CATEGORY' &&
+    !queryMode.includes('METRIC') &&
+    !queryMode.includes('ENTITY') &&
+    singleData;

  const onLoadData = async (value: any) => {
    setLoading(true);
--- a/webapp/packages/chat-sdk/src/components/DrillDownDimensions/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/DrillDownDimensions/index.tsx
@@ -7,7 +7,7 @@ import { DownOutlined } from '@ant-design/icons';
 import classNames from 'classnames';

 type Props = {
-  domainId: number;
+  modelId: number;
  drillDownDimension?: DrillDownDimensionType;
  isMetricCard?: boolean;
  dimensionFilters?: FilterItemType[];
@@ -17,7 +17,7 @@ type Props = {
 const MAX_DIMENSION_COUNT = 20;

 const DrillDownDimensions: React.FC<Props> = ({
-  domainId,
+  modelId,
  drillDownDimension,
  isMetricCard,
  dimensionFilters,
@@ -30,7 +30,7 @@ const DrillDownDimensions: React.FC<Props> = ({
  const prefixCls = `${CLS_PREFIX}-drill-down-dimensions`;

  const initData = async () => {
-    const res = await queryDrillDownDimensions(domainId);
+    const res = await queryDrillDownDimensions(modelId);
    setDimensions(
      res.data.data.dimensions
        .filter(dimension => !dimensionFilters?.some(filter => filter.name === dimension.name))
--- a/webapp/packages/chat-sdk/src/components/RecommendOptions/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/RecommendOptions/index.tsx
@@ -10,16 +10,16 @@ import classNames from 'classnames';

 type Props = {
  entityId: string | number;
-  domainId: number;
-  domainName: string;
+  modelId: number;
+  modelName: string;
  isMobileMode?: boolean;
  onSelect: (option: string) => void;
 };

 const RecommendOptions: React.FC<Props> = ({
  entityId,
-  domainId,
-  domainName,
+  modelId,
+  modelName,
  isMobileMode,
  onSelect,
 }) => {
@@ -30,7 +30,7 @@ const RecommendOptions: React.FC<Props> = ({

  const initData = async () => {
    setLoading(true);
-    const res = await queryEntities(entityId, domainId);
+    const res = await queryEntities(entityId, modelId);
    setLoading(false);
    setData(res.data.data);
  };
@@ -51,7 +51,7 @@ const RecommendOptions: React.FC<Props> = ({
          <div className={`${prefixCls}-item-name-column`}>
            <Avatar
              shape="square"
-              icon={<IconFont type={domainName === '艺人库' ? 'icon-geshou' : 'icon-zhuanji'} />}
+              icon={<IconFont type={modelName === '艺人库' ? 'icon-geshou' : 'icon-zhuanji'} />}
              src={record.url}
            />
            <div className={`${prefixCls}-entity-name`}>
@@ -64,7 +64,7 @@ const RecommendOptions: React.FC<Props> = ({
      },
    };

-    const playCntColumnIdex = domainName.includes('歌曲')
+    const playCntColumnIdex = modelName.includes('歌曲')
      ? 'tme3platAvgLogYyPlayCnt'
      : 'tme3platJsPlayCnt';

@@ -72,7 +72,7 @@ const RecommendOptions: React.FC<Props> = ({
      ? [basicColumn]
      : [
          basicColumn,
-          domainName.includes('艺人')
+          modelName.includes('艺人')
            ? {
                dataIndex: 'onlineSongCnt',
                key: 'onlineSongCnt',
@@ -95,7 +95,7 @@ const RecommendOptions: React.FC<Props> = ({
            dataIndex: playCntColumnIdex,
            key: playCntColumnIdex,
            align: 'center',
-            title: domainName.includes('歌曲') ? '近7天日均运营播放量' : '昨日结算播放量',
+            title: modelName.includes('歌曲') ? '近7天日均运营播放量' : '昨日结算播放量',
            render: (value: string) => {
              return value ? getFormattedValue(+value) : '-';
            },
--- a/webapp/packages/chat-sdk/src/components/Tools/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/Tools/index.tsx
@@ -26,21 +26,22 @@ const Tools: React.FC<Props> = ({
  onChangeChart,
 }) => {
  const [recommendOptionsOpen, setRecommendOptionsOpen] = useState(false);
-  const { queryColumns, queryResults, queryId, chatContext, queryMode } = data || {};
+  const { queryColumns, queryResults, queryId, chatContext, queryMode, entityInfo } = data || {};
  const [score, setScore] = useState(scoreValue || 0);

  const prefixCls = `${CLS_PREFIX}-tools`;

+  const singleData = queryResults.length === 1;
+  const isMetricCard =
+    queryMode.includes('METRIC') &&
+    (singleData || chatContext?.dateInfo?.startDate === chatContext?.dateInfo?.endDate);
+
  const noDashboard =
    (queryColumns?.length === 1 &&
      queryColumns[0].showType === 'CATEGORY' &&
      queryResults?.length === 1) ||
-    (!queryMode.includes('METRIC') && !queryMode.includes('ENTITY'));
-
-  console.log(
-    'chatContext?.properties?.CONTEXT?.plugin?.name',
-    chatContext?.properties?.CONTEXT?.plugin?.name
-  );
+    (!queryMode.includes('METRIC') && !queryMode.includes('ENTITY')) ||
+    isMetricCard;

  const changeChart = () => {
    onChangeChart();
@@ -74,13 +75,13 @@ const Tools: React.FC<Props> = ({

  return (
    <div className={prefixCls}>
-      {/* {isLastMessage && chatContext?.domainId && entityInfo?.entityId && (
+      {/* {isLastMessage && chatContext?.modelId && entityInfo?.entityId && (
        <Popover
          content={
            <RecommendOptions
              entityId={entityInfo.entityId}
-              domainId={chatContext.domainId}
-              domainName={chatContext.domainName}
+              modelId={chatContext.modelId}
+              modelName={chatContext.modelName}
              isMobileMode={isMobileMode}
              onSelect={switchEntity}
            />
@@ -105,7 +106,7 @@ const Tools: React.FC<Props> = ({
              加入看板
            </Button>
          )}
-          {isLastMessage && (
+          {isLastMessage && !isMetricCard && (
            <div className={`${prefixCls}-feedback`}>
              <div>这个回答正确吗？</div>
              <LikeOutlined className={likeClass} onClick={like} />
--- a/webapp/packages/chat-sdk/src/demo/Chat.tsx
+++ b/webapp/packages/chat-sdk/src/demo/Chat.tsx
@@ -56,7 +56,6 @@ const Chat = () => {
          msg={msg}
          // msgData={data}
          onMsgDataLoaded={onMsgDataLoaded}
-          domainId={37}
          isLastMessage
          isMobileMode
          triggerResize={triggerResize}
--- a/webapp/packages/chat-sdk/src/index.tsx
+++ b/webapp/packages/chat-sdk/src/index.tsx
@@ -19,7 +19,7 @@ export { default as ChatItem } from './components/ChatItem';
 export type {
  SearchRecommendItem,
  FieldType,
-  DomainInfoType,
+  ModelInfoType,
  EntityInfoType,
  DateInfoType,
  ChatContextType,
--- a/webapp/packages/chat-sdk/src/service/index.ts
+++ b/webapp/packages/chat-sdk/src/service/index.ts
@@ -6,30 +6,30 @@ const DEFAULT_CHAT_ID = 0;

 const prefix = '/api';

-export function searchRecommend(queryText: string, chatId?: number, domainId?: number) {
+export function searchRecommend(queryText: string, chatId?: number, modelId?: number) {
  return axios.post<Result<SearchRecommendItem[]>>(`${prefix}/chat/query/search`, {
    queryText,
    chatId: chatId || DEFAULT_CHAT_ID,
-    domainId,
+    modelId,
  });
 }

-export function chatQuery(queryText: string, chatId?: number, domainId?: number, filters?: any[]) {
+export function chatQuery(queryText: string, chatId?: number, modelId?: number, filters?: any[]) {
  return axios.post<Result<MsgDataType>>(`${prefix}/chat/query/query`, {
    queryText,
    chatId: chatId || DEFAULT_CHAT_ID,
-    domainId,
+    modelId,
    queryFilters: filters ? {
      filters
    } : undefined,
  });
 }

-export function chatParse(queryText: string, chatId?: number, domainId?: number, filters?: any[]) {
+export function chatParse(queryText: string, chatId?: number, modelId?: number, filters?: any[]) {
  return axios.post<Result<ParseDataType>>(`${prefix}/chat/query/parse`, {
    queryText,
    chatId: chatId || DEFAULT_CHAT_ID,
-    domainId,
+    modelId,
    queryFilters: filters ? {
      filters
    } : undefined,
@@ -44,10 +44,10 @@ export function chatExecute(queryText: string,  chatId: number, parseInfo: ChatC
  });
 }

-export function switchEntity(entityId: string, domainId?: number, chatId?: number) {
+export function switchEntity(entityId: string, modelId?: number, chatId?: number) {
  return axios.post<Result<any>>(`${prefix}/chat/query/switchQuery`, {
    queryText: entityId,
-    domainId,
+    modelId,
    chatId: chatId || DEFAULT_CHAT_ID,
  });
 }
@@ -63,8 +63,8 @@ export function queryContext(queryText: string, chatId?: number) {
  });
 }

-export function querySuggestionInfo(domainId: number) {
-  return axios.get<Result<any>>(`${prefix}/chat/recommend/${domainId}`);
+export function querySuggestionInfo(modelId: number) {
+  return axios.get<Result<any>>(`${prefix}/chat/recommend/${modelId}`);
 }

 export function getHistoryMsg(current: number, chatId: number = DEFAULT_CHAT_ID, pageSize: number = 10) {
@@ -98,10 +98,10 @@ export function getAllConversations() {
  return axios.get<Result<any>>(`${prefix}/chat/manage/getAll`);
 }

-export function queryEntities(entityId: string | number, domainId: number) {
+export function queryEntities(entityId: string | number, modelId: number) {
  return axios.post<Result<any>>(`${prefix}/chat/query/choice`, {
    entityId,
-    domainId,
+    modelId,
  });
 }

@@ -109,6 +109,6 @@ export function updateQAFeedback(questionId: number, score: number) {
  return axios.post<Result<any>>(`${prefix}/chat/manage/updateQAFeedback?id=${questionId}&score=${score}&feedback=`);
 }

-export function queryDrillDownDimensions(domainId: number) {
-  return axios.get<Result<{ dimensions: DrillDownDimensionType[] }>>(`${prefix}/chat/recommend/metric/${domainId}`);
+export function queryDrillDownDimensions(modelId: number) {
+  return axios.get<Result<{ dimensions: DrillDownDimensionType[] }>>(`${prefix}/chat/recommend/metric/${modelId}`);
 }
--- a/webapp/packages/supersonic-fe/src/app.tsx
+++ b/webapp/packages/supersonic-fe/src/app.tsx
@@ -13,6 +13,7 @@ import { queryToken } from './services/login';
 import { queryCurrentUser } from './services/user';
 import { traverseRoutes, deleteUrlQuery } from './utils/utils';
 import { publicPath } from '../config/defaultSettings';
+import Copilot from './pages/Copilot';
 export { request } from './services/request';

 const TOKEN_KEY = AUTH_TOKEN_KEY;
@@ -148,7 +149,12 @@ export const layout: RunTimeLayoutConfig = (params) => {
    disableContentMargin: true,
    menuHeaderRender: undefined,
    childrenRender: (dom) => {
-      return dom;
+      return (
+        <>
+          {dom}
+          {history.location.pathname !== '/chat' && <Copilot />}
+        </>
+      );
    },
    openKeys: false,
    ...initialState?.settings,
--- a/webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/index.tsx
@@ -9,21 +9,21 @@ import { searchRecommend } from 'supersonic-chat-sdk';
 import { SemanticTypeEnum, SEMANTIC_TYPE_MAP } from '../constants';
 import styles from './style.less';
 import { PLACE_HOLDER } from '../constants';
-import { DefaultEntityType, DomainType } from '../type';
+import { DefaultEntityType, ModelType } from '../type';
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';

 type Props = {
  inputMsg: string;
  chatId?: number;
-  currentDomain?: DomainType;
+  currentModel?: ModelType;
  defaultEntity?: DefaultEntityType;
  isCopilotMode?: boolean;
  copilotFullscreen?: boolean;
-  domains: DomainType[];
+  models: ModelType[];
  collapsed: boolean;
  onToggleCollapseBtn: () => void;
  onInputMsgChange: (value: string) => void;
-  onSendMsg: (msg: string, domainId?: number) => void;
+  onSendMsg: (msg: string, modelId?: number) => void;
  onAddConversation: () => void;
  onCancelDefaultFilter: () => void;
 };
@@ -44,9 +44,9 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
  {
    inputMsg,
    chatId,
-    currentDomain,
+    currentModel,
    defaultEntity,
-    domains,
+    models,
    collapsed,
    isCopilotMode,
    copilotFullscreen,
@@ -58,7 +58,7 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
  },
  ref,
 ) => {
-  const [domainOptions, setDomainOptions] = useState<DomainType[]>([]);
+  const [modelOptions, setModelOptions] = useState<ModelType[]>([]);
  const [stepOptions, setStepOptions] = useState<Record<string, any[]>>({});
  const [open, setOpen] = useState(false);
  const [focused, setFocused] = useState(false);
@@ -100,7 +100,7 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
  }, []);

  const getStepOptions = (recommends: any[]) => {
-    const data = groupByColumn(recommends, 'domainName');
+    const data = groupByColumn(recommends, 'modelName');
    return isMobile && recommends.length > 6
      ? Object.keys(data)
          .slice(0, 4)
@@ -114,23 +114,23 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
      : data;
  };

-  const processMsg = (msg: string, domains: DomainType[]) => {
+  const processMsg = (msg: string, models: ModelType[]) => {
    let msgValue = msg;
-    let domainId: number | undefined;
+    let modelId: number | undefined;
    if (msg?.[0] === '@') {
-      const domain = domains.find((item) => msg.includes(`@${item.name}`));
-      msgValue = domain ? msg.replace(`@${domain.name}`, '') : msg;
-      domainId = domain?.id;
+      const model = models.find((item) => msg.includes(`@${item.name}`));
+      msgValue = model ? msg.replace(`@${model.name}`, '') : msg;
+      modelId = model?.id;
    }
-    return { msgValue, domainId };
+    return { msgValue, modelId };
  };

  const debounceGetWordsFunc = useCallback(() => {
    const getAssociateWords = async (
      msg: string,
-      domains: DomainType[],
+      models: ModelType[],
      chatId?: number,
-      domain?: DomainType,
+      model?: ModelType,
    ) => {
      if (isPinyin) {
        return;
@@ -140,9 +140,9 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
      }
      fetchRef.current += 1;
      const fetchId = fetchRef.current;
-      const { msgValue, domainId } = processMsg(msg, domains);
-      const domainIdValue = domainId || domain?.id;
-      const res = await searchRecommend(msgValue.trim(), chatId, domainIdValue);
+      const { msgValue, modelId } = processMsg(msg, models);
+      const modelIdValue = modelId || model?.id;
+      const res = await searchRecommend(msgValue.trim(), chatId, modelIdValue);
      if (fetchId !== fetchRef.current) {
        return;
      }
@@ -165,19 +165,19 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
  useEffect(() => {
    if (inputMsg.length === 1 && inputMsg[0] === '@') {
      setOpen(true);
-      setDomainOptions(domains);
+      setModelOptions(models);
      setStepOptions({});
      return;
    } else {
      setOpen(false);
-      if (domainOptions.length > 0) {
+      if (modelOptions.length > 0) {
        setTimeout(() => {
-          setDomainOptions([]);
+          setModelOptions([]);
        }, 500);
      }
    }
    if (!isSelect) {
-      debounceGetWords(inputMsg, domains, chatId, currentDomain);
+      debounceGetWords(inputMsg, models, chatId, currentModel);
    } else {
      isSelect = false;
    }
@@ -219,10 +219,10 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
      .find((item) =>
        Object.keys(stepOptions).length === 1
          ? item.recommend === value
-          : `${item.domainName || ''}${item.recommend}` === value,
+          : `${item.modelName || ''}${item.recommend}` === value,
      );
    if (option && isSelect) {
-      onSendMsg(option.recommend, option.domainId);
+      onSendMsg(option.recommend, option.modelId);
    } else {
      onSendMsg(value.trim());
    }
@@ -230,12 +230,12 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (

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

  const onSelect = (value: string) => {
    isSelect = true;
-    if (domainOptions.length === 0) {
+    if (modelOptions.length === 0) {
      sendMsg(value);
    }
    setOpen(false);
@@ -263,19 +263,16 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
          />
        </Tooltip>
        <div className={styles.composerInputWrapper}>
-          {currentDomain && (
-            <div className={styles.currentDomain}>
-              <div className={styles.currentDomainName}>
+          {currentModel && (
+            <div className={styles.currentModel}>
+              <div className={styles.currentModelName}>
                输入联想与问题回复将限定于：“
                <span className={styles.quoteText}>
-                  主题域【{currentDomain.name}】
+                  主题域【{currentModel.name}】
                  {defaultEntity && (
                    <>
                      <span>，</span>
-                      <span>{`${currentDomain.name.slice(
-                        0,
-                        currentDomain.name.length - 1,
-                      )}【`}</span>
+                      <span>{`${currentModel.name.slice(0, currentModel.name.length - 1)}【`}</span>
                      <span className={styles.entityName} title={defaultEntity.entityName}>
                        {defaultEntity.entityName}
                      </span>
@@ -285,7 +282,7 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
                </span>
                ”
              </div>
-              <div className={styles.cancelDomain} onClick={onCancelDefaultFilter}>
+              <div className={styles.cancelModel} onClick={onCancelDefaultFilter}>
                取消限定
              </div>
            </div>
@@ -293,8 +290,8 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
          <AutoComplete
            className={styles.composerInput}
            placeholder={
-              currentDomain
-                ? `请输入【${currentDomain.name}】主题的问题，可使用@切换到其他主题`
+              currentModel
+                ? `请输入【${currentModel.name}】主题的问题，可使用@切换到其他主题`
                : PLACE_HOLDER
            }
            value={inputMsg}
@@ -323,15 +320,15 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
            open={open}
            getPopupContainer={(triggerNode) => triggerNode.parentNode}
          >
-            {domainOptions.length > 0
-              ? domainOptions.map((domain) => {
+            {modelOptions.length > 0
+              ? modelOptions.map((model) => {
                  return (
                    <Option
-                      key={domain.id}
-                      value={`@${domain.name} `}
+                      key={model.id}
+                      value={`@${model.name} `}
                      className={styles.searchOption}
                    >
-                      {domain.name}
+                      {model.name}
                    </Option>
                  );
                })
@@ -342,17 +339,15 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
                        let optionValue =
                          Object.keys(stepOptions).length === 1
                            ? option.recommend
-                            : `${option.domainName || ''}${option.recommend}`;
+                            : `${option.modelName || ''}${option.recommend}`;
                        if (inputMsg[0] === '@') {
-                          const domain = domains.find((item) => inputMsg.includes(item.name));
-                          optionValue = domain
-                            ? `@${domain.name} ${option.recommend}`
-                            : optionValue;
+                          const model = models.find((item) => inputMsg.includes(item.name));
+                          optionValue = model ? `@${model.name} ${option.recommend}` : optionValue;
                        }
                        return (
                          <Option
                            key={`${option.recommend}${
-                              option.domainName ? `_${option.domainName}` : ''
+                              option.modelName ? `_${option.modelName}` : ''
                            }`}
                            value={optionValue}
                            className={styles.searchOption}
@@ -363,7 +358,7 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
                                  className={styles.semanticType}
                                  color={
                                    option.schemaElementType === SemanticTypeEnum.DIMENSION ||
-                                    option.schemaElementType === SemanticTypeEnum.DOMAIN
+                                    option.schemaElementType === SemanticTypeEnum.MODEL
                                      ? 'blue'
                                      : option.schemaElementType === SemanticTypeEnum.VALUE
                                      ? 'geekblue'
--- a/webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/style.less
@@ -45,7 +45,7 @@
      position: relative;
      flex: 1;

-      .currentDomain {
+      .currentModel {
        position: absolute;
        top: -30px;
        left: 15px;
@@ -61,7 +61,7 @@
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;

-        .currentDomainName {
+        .currentModelName {
          margin-right: 12px;
          font-size: 14px;

@@ -75,7 +75,7 @@
          }
        }

-        .cancelDomain {
+        .cancelModel {
          padding: 0 6px;
          font-size: 13px;
          border: 1px solid var(--text-color-fourth);
@@ -206,7 +206,7 @@
  }
 }

-.domain {
+.model {
  margin-top: 2px;
  color: var(--text-color-fourth);
  font-size: 13px;
@@ -219,7 +219,7 @@
  min-width: 100px !important;
  border-radius: 6px;

-  &.domainOptions {
+  &.modelOptions {
    width: 150px !important;

    .searchOption {
--- a/webapp/packages/supersonic-fe/src/pages/Chat/Conversation.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/Conversation.tsx
@@ -21,14 +21,14 @@ type Props = {
  currentConversation?: ConversationDetailType;
  collapsed?: boolean;
  isCopilotMode?: boolean;
-  defaultDomainName?: string;
+  defaultModelName?: string;
  defaultEntityFilter?: DefaultEntityType;
  triggerNewConversation?: boolean;
  onNewConversationTriggered?: () => void;
  onSelectConversation: (
    conversation: ConversationDetailType,
    name?: string,
-    domainId?: number,
+    modelId?: number,
    entityId?: string,
  ) => void;
 };
@@ -38,7 +38,7 @@ const Conversation: ForwardRefRenderFunction<any, Props> = (
    currentConversation,
    collapsed,
    isCopilotMode,
-    defaultDomainName,
+    defaultModelName,
    defaultEntityFilter,
    triggerNewConversation,
    onNewConversationTriggered,
@@ -47,7 +47,7 @@ const Conversation: ForwardRefRenderFunction<any, Props> = (
  ref,
 ) => {
  const location = useLocation();
-  const { q, cid, domainId, entityId } = (location as any).query;
+  const { q, cid, modelId, entityId } = (location as any).query;
  const [conversations, setConversations] = useState<ConversationDetailType[]>([]);
  const [editModalVisible, setEditModalVisible] = useState(false);
  const [editConversation, setEditConversation] = useState<ConversationDetailType>();
@@ -89,7 +89,7 @@ const Conversation: ForwardRefRenderFunction<any, Props> = (
      const conversationName =
        defaultEntityFilter?.entityName && window.location.pathname.includes('detail')
          ? defaultEntityFilter.entityName
-          : defaultDomainName;
+          : defaultModelName;
      onAddConversation({ name: conversationName, type: 'CUSTOMIZE' });
      onNewConversationTriggered?.();
    }
@@ -100,7 +100,7 @@ const Conversation: ForwardRefRenderFunction<any, Props> = (
      return;
    }
    if (q && cid === undefined && window.location.href.includes('/workbench/chat')) {
-      onAddConversation({ name: q, domainId: domainId ? +domainId : undefined, entityId });
+      onAddConversation({ name: q, modelId: modelId ? +modelId : undefined, entityId });
    } else {
      initData();
    }
@@ -118,17 +118,17 @@ const Conversation: ForwardRefRenderFunction<any, Props> = (

  const onAddConversation = async ({
    name,
-    domainId,
+    modelId,
    entityId,
    type,
  }: {
    name?: string;
-    domainId?: number;
+    modelId?: number;
    entityId?: string;
    type?: string;
  } = {}) => {
    const data = await addConversation(name);
-    onSelectConversation(data[0], type || name, domainId, entityId);
+    onSelectConversation(data[0], type || name, modelId, entityId);
  };

  const onOperate = (key: string, conversation: ConversationDetailType) => {
--- a/webapp/packages/supersonic-fe/src/pages/Chat/MessageContainer.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/MessageContainer.tsx
@@ -23,7 +23,7 @@ type Props = {
    valid: boolean,
  ) => void;
  onCheckMore: (data: MsgDataType) => void;
-  onApplyAuth: (domain: string) => void;
+  onApplyAuth: (model: string) => void;
 };

 const MessageContainer: React.FC<Props> = ({
@@ -71,15 +71,15 @@ const MessageContainer: React.FC<Props> = ({

    for (let i = 0; i < msgs.length; i++) {
      const msg = msgs[i];
-      const msgDomainId = msg.msgData?.chatContext?.domainId;
+      const msgModelId = msg.msgData?.chatContext?.modelId;
      const msgEntityId = msg.msgData?.entityInfo?.entityId;
-      const currentMsgDomainId = currentMsgData?.chatContext?.domainId;
+      const currentMsgModelId = currentMsgData?.chatContext?.modelId;
      const currentMsgEntityId = currentMsgData?.entityInfo?.entityId;

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

-  const getFilters = (domainId?: number, entityId?: string) => {
-    if (!domainId || !entityId) {
+  const getFilters = (modelId?: number, entityId?: string) => {
+    if (!modelId || !entityId) {
      return undefined;
    }
    return [
@@ -108,7 +108,7 @@ const MessageContainer: React.FC<Props> = ({
        {messageList.map((msgItem: MessageItem, index: number) => {
          const {
            id: msgId,
-            domainId,
+            modelId,
            entityId,
            type,
            msg,
@@ -117,6 +117,7 @@ const MessageContainer: React.FC<Props> = ({
            msgData,
            score,
            isHistory,
+            parseOptions,
          } = msgItem;

          const followQuestions = getFollowQuestions(index);
@@ -132,8 +133,8 @@ const MessageContainer: React.FC<Props> = ({
                    msg={msgValue || msg || ''}
                    msgData={msgData}
                    conversationId={chatId}
-                    domainId={domainId}
-                    filter={getFilters(domainId, entityId)}
+                    modelId={modelId}
+                    filter={getFilters(modelId, entityId)}
                    isLastMessage={index === messageList.length - 1}
                    isMobileMode={isMobileMode}
                    triggerResize={triggerResize}
@@ -144,6 +145,22 @@ const MessageContainer: React.FC<Props> = ({
                  />
                </>
              )}
+              {type === MessageTypeEnum.PARSE_OPTIONS && (
+                <ChatItem
+                  msg={msgValue || msg || ''}
+                  conversationId={chatId}
+                  modelId={modelId}
+                  filter={getFilters(modelId, entityId)}
+                  isLastMessage={index === messageList.length - 1}
+                  isMobileMode={isMobileMode}
+                  triggerResize={triggerResize}
+                  parseOptions={parseOptions}
+                  onMsgDataLoaded={(data: MsgDataType, valid: boolean) => {
+                    onMsgDataLoaded(data, msgId, msgValue || msg || '', valid);
+                  }}
+                  onUpdateMessageScroll={updateMessageContainerScroll}
+                />
+              )}
              {type === MessageTypeEnum.PLUGIN && (
                <>
                  <Plugin
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/Message.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/components/Message.tsx
@@ -6,42 +6,16 @@ type Props = {
  width?: number | string;
  height?: number | string;
  bubbleClassName?: string;
-  domainName?: string;
-  question?: string;
-  followQuestions?: string[];
 };

-const Message: React.FC<Props> = ({
-  position,
-  width,
-  height,
-  children,
-  bubbleClassName,
-  domainName,
-  question,
-  followQuestions,
-}) => {
+const Message: React.FC<Props> = ({ position, width, height, children, bubbleClassName }) => {
  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} style={{ width }}>
-      {/* <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
@@ -51,11 +25,6 @@ const Message: React.FC<Props> = ({
              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/Plugin/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/components/Plugin/index.tsx
@@ -161,15 +161,7 @@ const Plugin: React.FC<Props> = ({
    <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}
-        >
+        <Message position="left" width="100%" height={height} bubbleClassName={styles.reportBubble}>
          <iframe
            id={`reportIframe_${id}`}
            src={pluginUrl}
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/components/style.less
@@ -5,7 +5,7 @@
    margin-bottom: 6px;
    column-gap: 10px;

-    .domainName {
+    .modelName {
      margin-left: 4px;
      color: var(--text-color);
      font-weight: 500;
--- a/webapp/packages/supersonic-fe/src/pages/Chat/constants.ts
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/constants.ts
@@ -14,14 +14,14 @@ export const THEME_COLOR_LIST = [
 ];

 export enum SemanticTypeEnum {
-  DOMAIN = 'DOMAIN',
+  MODEL = 'MODEL',
  DIMENSION = 'DIMENSION',
  METRIC = 'METRIC',
  VALUE = 'VALUE',
 }

 export const SEMANTIC_TYPE_MAP = {
-  [SemanticTypeEnum.DOMAIN]: '主题域',
+  [SemanticTypeEnum.MODEL]: '主题域',
  [SemanticTypeEnum.DIMENSION]: '维度',
  [SemanticTypeEnum.METRIC]: '指标',
  [SemanticTypeEnum.VALUE]: '维度值',
--- a/webapp/packages/supersonic-fe/src/pages/Chat/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/index.tsx
@@ -6,11 +6,11 @@ import styles from './style.less';
 import {
  ConversationDetailType,
  DefaultEntityType,
-  DomainType,
+  ModelType,
  MessageItem,
  MessageTypeEnum,
 } from './type';
-import { getDomainList } from './service';
+import { getModelList } from './service';
 import { useThrottleFn } from 'ahooks';
 import Conversation from './Conversation';
 import ChatFooter from './ChatFooter';
@@ -25,12 +25,12 @@ import { AUTH_TOKEN_KEY } from '@/common/constants';
 type Props = {
  isCopilotMode?: boolean;
  copilotFullscreen?: boolean;
-  defaultDomainName?: string;
+  defaultModelName?: string;
  defaultEntityFilter?: DefaultEntityType;
  copilotSendMsg?: string;
  triggerNewConversation?: boolean;
  onNewConversationTriggered?: () => void;
-  onCurrentDomainChange?: (domain?: DomainType) => void;
+  onCurrentModelChange?: (model?: ModelType) => void;
  onCancelCopilotFilter?: () => void;
  onCheckMoreDetail?: () => void;
 };
@@ -38,17 +38,16 @@ type Props = {
 const Chat: React.FC<Props> = ({
  isCopilotMode,
  copilotFullscreen,
-  defaultDomainName,
+  defaultModelName,
  defaultEntityFilter,
  copilotSendMsg,
  triggerNewConversation,
  onNewConversationTriggered,
-  onCurrentDomainChange,
+  onCurrentModelChange,
  onCancelCopilotFilter,
  onCheckMoreDetail,
 }) => {
  const isMobileMode = isMobile || isCopilotMode;
-  const localConversationCollapsed = localStorage.getItem('CONVERSATION_COLLAPSED');

  const [messageList, setMessageList] = useState<MessageItem[]>([]);
  const [inputMsg, setInputMsg] = useState('');
@@ -58,54 +57,52 @@ const Chat: React.FC<Props> = ({
  const [currentConversation, setCurrentConversation] = useState<
    ConversationDetailType | undefined
  >(isMobile ? { chatId: 0, chatName: `${CHAT_TITLE}问答` } : undefined);
-  const [conversationCollapsed, setConversationCollapsed] = useState(
-    !localConversationCollapsed ? true : localConversationCollapsed === 'true',
-  );
-  const [domains, setDomains] = useState<DomainType[]>([]);
-  const [currentDomain, setCurrentDomain] = useState<DomainType>();
+  const [conversationCollapsed, setConversationCollapsed] = useState(isCopilotMode);
+  const [models, setModels] = useState<ModelType[]>([]);
+  const [currentModel, setCurrentModel] = useState<ModelType>();
  const [defaultEntity, setDefaultEntity] = useState<DefaultEntityType>();
  const [applyAuthVisible, setApplyAuthVisible] = useState(false);
-  const [applyAuthDomain, setApplyAuthDomain] = useState('');
-  const [initialDomainName, setInitialDomainName] = useState('');
+  const [applyAuthModel, setApplyAuthModel] = useState('');
+  const [initialModelName, setInitialModelName] = useState('');
  const location = useLocation();
  const dispatch = useDispatch();
-  const { domainName } = (location as any).query;
+  const { modelName } = (location as any).query;

  const conversationRef = useRef<any>();
  const chatFooterRef = useRef<any>();

  useEffect(() => {
    setChatSdkToken(localStorage.getItem(AUTH_TOKEN_KEY) || '');
-    initDomains();
+    initModels();
  }, []);

  useEffect(() => {
-    if (domains.length > 0 && initialDomainName && !currentDomain) {
-      changeDomain(domains.find((domain) => domain.name === initialDomainName));
+    if (models.length > 0 && initialModelName && !currentModel) {
+      changeModel(models.find((model) => model.name === initialModelName));
    }
-  }, [domains]);
+  }, [models]);

  useEffect(() => {
-    if (domainName) {
-      setInitialDomainName(domainName);
+    if (modelName) {
+      setInitialModelName(modelName);
    }
-  }, [domainName]);
+  }, [modelName]);

  useEffect(() => {
-    if (defaultDomainName !== undefined && domains.length > 0) {
-      changeDomain(domains.find((domain) => domain.name === defaultDomainName));
+    if (defaultModelName !== undefined && models.length > 0) {
+      changeModel(models.find((model) => model.name === defaultModelName));
    }
-  }, [defaultDomainName]);
+  }, [defaultModelName]);

  useEffect(() => {
    if (!currentConversation) {
      return;
    }
-    const { initMsg, domainId, entityId } = currentConversation;
+    const { initMsg, modelId, entityId } = currentConversation;
    if (initMsg) {
      inputFocus();
      if (initMsg === 'CUSTOMIZE' && copilotSendMsg) {
-        onSendMsg(copilotSendMsg, [], domainId, entityId);
+        onSendMsg(copilotSendMsg, [], modelId, entityId);
        dispatch({
          type: 'globalState/setCopilotSendMsg',
          payload: '',
@@ -116,7 +113,7 @@ const Chat: React.FC<Props> = ({
        sendHelloRsp();
        return;
      }
-      onSendMsg(initMsg, [], domainId, entityId);
+      onSendMsg(initMsg, [], modelId, entityId);
      return;
    }
    updateHistoryMsg(1);
@@ -147,13 +144,13 @@ const Chat: React.FC<Props> = ({
      {
        id: uuid(),
        type: MessageTypeEnum.TEXT,
-        msg: defaultDomainName
+        msg: defaultModelName
          ? `您好，请输入关于${
              defaultEntityFilter?.entityName
-                ? `${defaultDomainName?.slice(0, defaultDomainName?.length - 1)}【${
+                ? `${defaultModelName?.slice(0, defaultModelName?.length - 1)}【${
                    defaultEntityFilter?.entityName
                  }】`
-                : `【${defaultDomainName}】`
+                : `【${defaultModelName}】`
            }的问题`
          : '您好，请问有什么我能帮您吗？',
      },
@@ -208,19 +205,19 @@ const Chat: React.FC<Props> = ({
    },
  );

-  const changeDomain = (domain?: DomainType) => {
-    setCurrentDomain(domain);
-    if (onCurrentDomainChange) {
-      onCurrentDomainChange(domain);
+  const changeModel = (model?: ModelType) => {
+    setCurrentModel(model);
+    if (onCurrentModelChange) {
+      onCurrentModelChange(model);
    }
  };

-  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));
+  const initModels = async () => {
+    const res = await getModelList();
+    const modelList = getLeafList(res.data);
+    setModels([{ id: -1, name: '全部', bizName: 'all', parentId: 0 }, ...modelList].slice(0, 11));
+    if (defaultModelName !== undefined) {
+      changeModel(modelList.find((model) => model.name === defaultModelName));
    }
  };

@@ -237,7 +234,7 @@ const Chat: React.FC<Props> = ({
  const onSendMsg = async (
    msg?: string,
    list?: MessageItem[],
-    domainId?: number,
+    modelId?: number,
    entityId?: string,
  ) => {
    const currentMsg = msg || inputMsg;
@@ -245,25 +242,25 @@ const Chat: React.FC<Props> = ({
      setInputMsg('');
      return;
    }
-    const msgDomain = domains.find((item) => currentMsg.includes(item.name));
-    const certainDomain = currentMsg[0] === '@' && msgDomain;
-    let domainChanged = false;
+    const msgModel = models.find((item) => currentMsg.includes(item.name));
+    const certainModel = currentMsg[0] === '@' && msgModel;
+    let modelChanged = false;

-    if (certainDomain) {
-      const toDomain = msgDomain.id === -1 ? undefined : msgDomain;
-      changeDomain(toDomain);
-      domainChanged = currentDomain?.id !== toDomain?.id;
+    if (certainModel) {
+      const toModel = msgModel.id === -1 ? undefined : msgModel;
+      changeModel(toModel);
+      modelChanged = currentModel?.id !== toModel?.id;
    }
-    const domainIdValue = domainId || msgDomain?.id || currentDomain?.id;
+    const modelIdValue = modelId || msgModel?.id || currentModel?.id;
    const msgs = [
      ...(list || messageList),
      {
        id: uuid(),
        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,
+        msgValue: certainModel ? currentMsg.replace(`@${msgModel.name}`, '').trim() : currentMsg,
+        modelId: modelIdValue === -1 ? undefined : modelIdValue,
+        entityId: entityId || (modelChanged ? undefined : defaultEntity?.entityId),
+        identityMsg: certainModel ? getIdentityMsgText(msgModel) : undefined,
        type: MessageTypeEnum.QUESTION,
      },
    ];
@@ -290,7 +287,7 @@ const Chat: React.FC<Props> = ({
  const onSelectConversation = (
    conversation: ConversationDetailType,
    name?: string,
-    domainId?: number,
+    modelId?: number,
    entityId?: string,
  ) => {
    if (!isMobileMode) {
@@ -299,12 +296,31 @@ const Chat: React.FC<Props> = ({
    setCurrentConversation({
      ...conversation,
      initMsg: name,
-      domainId,
+      modelId,
      entityId,
    });
    saveConversationToLocal(conversation);
  };

+  const updateChatFilter = (data: MsgDataType) => {
+    const { queryMode, dimensionFilters, elementMatches, modelName, model } = data.chatContext;
+    if (queryMode !== 'ENTITY_LIST_FILTER') {
+      return;
+    }
+    const entityId = dimensionFilters?.length > 0 ? dimensionFilters[0].value : undefined;
+    const entityName = elementMatches?.find((item: any) => item.element?.type === 'ID')?.element
+      ?.name;
+
+    if (typeof entityId === 'string' && entityName) {
+      setCurrentModel(model);
+      setDefaultEntity({
+        entityId,
+        entityName,
+        modelName,
+      });
+    }
+  };
+
  const onMsgDataLoaded = (data: MsgDataType, questionId: string | number) => {
    if (!isMobile) {
      conversationRef?.current?.updateData();
@@ -312,6 +328,15 @@ const Chat: React.FC<Props> = ({
    if (!data) {
      return;
    }
+    let parseOptionsItem: any;
+    if (data.parseOptions && data.parseOptions.length > 0) {
+      parseOptionsItem = {
+        id: uuid(),
+        msg: messageList[messageList.length - 1]?.msg,
+        type: MessageTypeEnum.PARSE_OPTIONS,
+        parseOptions: data.parseOptions,
+      };
+    }
    if (data.queryMode === 'WEB_PAGE') {
      setMessageList([
        ...messageList,
@@ -321,16 +346,19 @@ const Chat: React.FC<Props> = ({
          type: MessageTypeEnum.PLUGIN,
          msgData: data,
        },
+        ...(parseOptionsItem ? [parseOptionsItem] : []),
      ]);
    } else {
      const msgs = cloneDeep(messageList);
      const msg = msgs.find((item) => item.id === questionId);
      if (msg) {
        msg.msgData = data;
-        setMessageList(msgs);
+        setMessageList([...msgs, ...(parseOptionsItem ? [parseOptionsItem] : [])]);
      }
      updateMessageContainerScroll();
    }
+
+    updateChatFilter(data);
  };

  const onCheckMore = (data: MsgDataType) => {
@@ -354,14 +382,14 @@ const Chat: React.FC<Props> = ({
    localStorage.setItem('CONVERSATION_COLLAPSED', `${!conversationCollapsed}`);
  };

-  const getIdentityMsgText = (domain?: DomainType) => {
-    return domain
-      ? `您好，我当前身份是【${domain.name}】主题专家，我将尽力帮您解答相关问题～`
+  const getIdentityMsgText = (model?: ModelType) => {
+    return model
+      ? `您好，我当前身份是【${model.name}】主题专家，我将尽力帮您解答相关问题～`
      : '您好，我将尽力帮您解答所有主题相关问题～';
  };

-  const onApplyAuth = (domain: string) => {
-    setApplyAuthDomain(domain);
+  const onApplyAuth = (model: string) => {
+    setApplyAuthModel(model);
    setApplyAuthVisible(true);
  };

@@ -385,7 +413,7 @@ const Chat: React.FC<Props> = ({
          currentConversation={currentConversation}
          collapsed={conversationCollapsed}
          isCopilotMode={isCopilotMode}
-          defaultDomainName={defaultDomainName}
+          defaultModelName={defaultModelName}
          defaultEntityFilter={defaultEntityFilter}
          triggerNewConversation={triggerNewConversation}
          onNewConversationTriggered={onNewConversationTriggered}
@@ -411,23 +439,24 @@ const Chat: React.FC<Props> = ({
                <ChatFooter
                  inputMsg={inputMsg}
                  chatId={currentConversation?.chatId}
-                  domains={domains}
-                  currentDomain={currentDomain}
+                  models={models}
+                  currentModel={currentModel}
                  defaultEntity={defaultEntity}
                  collapsed={conversationCollapsed}
                  isCopilotMode={isCopilotMode}
                  copilotFullscreen={copilotFullscreen}
                  onToggleCollapseBtn={onToggleCollapseBtn}
                  onInputMsgChange={onInputMsgChange}
-                  onSendMsg={(msg: string, domainId?: number) => {
-                    onSendMsg(msg, messageList, domainId);
+                  onSendMsg={(msg: string, modelId?: number) => {
+                    onSendMsg(msg, messageList, modelId);
                    if (isMobile) {
                      inputBlur();
                    }
                  }}
                  onAddConversation={onAddConversation}
                  onCancelDefaultFilter={() => {
-                    changeDomain(undefined);
+                    changeModel(undefined);
+                    setDefaultEntity(undefined);
                    if (onCancelCopilotFilter) {
                      onCancelCopilotFilter();
                    }
--- a/webapp/packages/supersonic-fe/src/pages/Chat/service.ts
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/service.ts
@@ -1,5 +1,5 @@
 import { request } from 'umi';
-import { DomainType } from './type';
+import { ModelType } from './type';

 const prefix = '/api';

@@ -24,9 +24,9 @@ export function getAllConversations() {
  return request<Result<any>>(`${prefix}/chat/manage/getAll`);
 }

-export function getMiniProgramList(entityId: string, domainId: number) {
+export function getMiniProgramList(entityId: string, modelId: number) {
  return request<Result<any>>(
-    `${prefix}/chat/plugin/extend/getAvailablePlugin/${entityId}/${domainId}`,
+    `${prefix}/chat/plugin/extend/getAvailablePlugin/${entityId}/${modelId}`,
    {
      method: 'GET',
      skipErrorHandler: true,
@@ -34,8 +34,8 @@ export function getMiniProgramList(entityId: string, domainId: number) {
  );
 }

-export function getDomainList() {
-  return request<Result<DomainType[]>>(`${prefix}/chat/conf/domainList/view`, {
+export function getModelList() {
+  return request<Result<ModelType[]>>(`${prefix}/chat/conf/modelList/view`, {
    method: 'GET',
  });
 }
@@ -49,14 +49,14 @@ export function updateQAFeedback(questionId: number, score: number) {
  );
 }

-export function queryMetricSuggestion(domainId: number) {
-  return request<Result<any>>(`${prefix}/chat/recommend/metric/${domainId}`, {
+export function queryMetricSuggestion(modelId: number) {
+  return request<Result<any>>(`${prefix}/chat/recommend/metric/${modelId}`, {
    method: 'GET',
  });
 }

-export function querySuggestion(domainId: number) {
-  return request<Result<any>>(`${prefix}/chat/recommend/${domainId}`, {
+export function querySuggestion(modelId: number) {
+  return request<Result<any>>(`${prefix}/chat/recommend/${modelId}`, {
    method: 'GET',
  });
 }
--- a/webapp/packages/supersonic-fe/src/pages/Chat/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/style.less
@@ -444,9 +444,9 @@
  color: var(--primary-color);
 }

-.messageItem {
-  margin-top: 12px;
-}
+// .messageItem {
+//   margin-top: 12px;
+// }

 .messageTime {
  display: flex;
--- a/webapp/packages/supersonic-fe/src/pages/Chat/type.ts
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/type.ts
@@ -1,4 +1,4 @@
-import { MsgDataType } from 'supersonic-chat-sdk';
+import { ChatContextType, MsgDataType } from 'supersonic-chat-sdk';

 export enum MessageTypeEnum {
  TEXT = 'text', // 指标文本
@@ -10,6 +10,7 @@ export enum MessageTypeEnum {
  PLUGIN = 'PLUGIN', // 插件
  WEB_PAGE = 'WEB_PAGE', // 插件
  RECOMMEND_QUESTIONS = 'recommend_questions', // 推荐问题
+  PARSE_OPTIONS = 'parse_options', // 解析选项
 }

 export type MessageItem = {
@@ -18,13 +19,14 @@ export type MessageItem = {
  msg?: string;
  msgValue?: string;
  identityMsg?: string;
-  domainId?: number;
+  modelId?: number;
  entityId?: string;
  msgData?: MsgDataType;
  quote?: string;
  score?: number;
  feedback?: string;
  isHistory?: boolean;
+  parseOptions?: ChatContextType[];
 };

 export type ConversationDetailType = {
@@ -35,7 +37,7 @@ export type ConversationDetailType = {
  lastQuestion?: string;
  lastTime?: string;
  initMsg?: string;
-  domainId?: number;
+  modelId?: number;
  entityId?: string;
 };

@@ -43,7 +45,7 @@ export enum MessageModeEnum {
  INTERPRET = 'interpret',
 }

-export type DomainType = {
+export type ModelType = {
  id: number;
  parentId: number;
  name: string;
@@ -66,12 +68,12 @@ export type PluginType = {
 export type DefaultEntityType = {
  entityId: string;
  entityName: string;
-  domainName?: string;
+  modelName?: string;
 };

 export type SuggestionItemType = {
  id: number;
-  domain: number;
+  model: number;
  name: string;
  bizName: string;
 };
--- a/webapp/packages/supersonic-fe/src/pages/ChatPlugin/DetailModal.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/ChatPlugin/DetailModal.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { Modal, Select, Form, Input, InputNumber, message, Button, Radio } from 'antd';
-import { getDimensionList, getDomainList, savePlugin } from './service';
+import { getDimensionList, getModelList, savePlugin } from './service';
 import {
  DimensionType,
-  DomainType,
+  ModelType,
  ParamTypeEnum,
  ParseModeEnum,
  PluginType,
@@ -26,10 +26,8 @@ type Props = {
 };

 const DetailModal: React.FC<Props> = ({ detail, onSubmit, onCancel }) => {
-  const [domainList, setDomainList] = useState<DomainType[]>([]);
-  const [domainDimensionList, setDomainDimensionList] = useState<Record<number, DimensionType[]>>(
-    {},
-  );
+  const [modelList, setModelList] = useState<ModelType[]>([]);
+  const [modelDimensionList, setModelDimensionList] = useState<Record<number, DimensionType[]>>({});
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [pluginType, setPluginType] = useState<PluginTypeEnum>();
  const [functionName, setFunctionName] = useState<string>();
@@ -38,28 +36,25 @@ const DetailModal: React.FC<Props> = ({ detail, onSubmit, onCancel }) => {
  const [filters, setFilters] = useState<any[]>([]);
  const [form] = Form.useForm();

-  const initDomainList = async () => {
-    const res = await getDomainList();
-    setDomainList([{ id: -1, name: '全部' }, ...getLeafList(res.data)]);
+  const initModelList = async () => {
+    const res = await getModelList();
+    setModelList([{ id: -1, name: '默认' }, ...getLeafList(res.data)]);
  };

  useEffect(() => {
-    initDomainList();
+    initModelList();
  }, []);

-  const initDomainDimensions = async (params: any) => {
-    const domainIds = params
-      .filter((param: any) => !!param.domainId)
-      .map((param: any) => param.domainId);
-    const res = await Promise.all(domainIds.map((domainId: number) => getDimensionList(domainId)));
-    setDomainDimensionList(
-      domainIds.reduce(
-        (result: Record<number, DimensionType[]>, domainId: number, index: number) => {
-          result[domainId] = res[index].data.list;
-          return result;
-        },
-        {},
-      ),
+  const initModelDimensions = async (params: any) => {
+    const modelIds = params
+      .filter((param: any) => !!param.modelId)
+      .map((param: any) => param.modelId);
+    const res = await Promise.all(modelIds.map((modelId: number) => getDimensionList(modelId)));
+    setModelDimensionList(
+      modelIds.reduce((result: Record<number, DimensionType[]>, modelId: number, index: number) => {
+        result[modelId] = res[index].data.list;
+        return result;
+      }, {}),
    );
  };

@@ -79,7 +74,7 @@ const DetailModal: React.FC<Props> = ({ detail, onSubmit, onCancel }) => {
          (option: any) => option.paramType !== ParamTypeEnum.FORWARD,
        );
        setFilters(params);
-        initDomainDimensions(params);
+        initModelDimensions(params);
      }
      setPluginType(detail.type);
      const parseModeObj = JSON.parse(detail.parseModeConfig || '{}');
@@ -159,7 +154,7 @@ const DetailModal: React.FC<Props> = ({ detail, onSubmit, onCancel }) => {
    await savePlugin({
      ...values,
      id: detail?.id,
-      domainList: isArray(values.domainList) ? values.domainList : [values.domainList],
+      modelList: isArray(values.modelList) ? values.modelList : [values.modelList],
      config: JSON.stringify(config),
      parseModeConfig: JSON.stringify(getFunctionParam(values.pattern)),
    });
@@ -169,11 +164,11 @@ const DetailModal: React.FC<Props> = ({ detail, onSubmit, onCancel }) => {
  };

  const updateDimensionList = async (value: number) => {
-    if (domainDimensionList[value]) {
+    if (modelDimensionList[value]) {
      return;
    }
    const res = await getDimensionList(value);
-    setDomainDimensionList({ ...domainDimensionList, [value]: res.data.list });
+    setModelDimensionList({ ...modelDimensionList, [value]: res.data.list });
  };

  return (
@@ -186,12 +181,12 @@ const DetailModal: React.FC<Props> = ({ detail, onSubmit, onCancel }) => {
      onCancel={onCancel}
    >
      <Form {...layout} form={form} style={{ maxWidth: 820 }}>
-        <FormItem name="domainList" label="主题域">
+        <FormItem name="modelList" label="主题域">
          <Select
            placeholder="请选择主题域"
-            options={domainList.map((domain) => ({
-              label: domain.name,
-              value: domain.id,
+            options={modelList.map((model) => ({
+              label: model.name,
+              value: model.id,
            }))}
            showSearch
            filterOption={(input, option) =>
@@ -223,7 +218,6 @@ const DetailModal: React.FC<Props> = ({ detail, onSubmit, onCancel }) => {
              setPluginType(value);
              if (value === PluginTypeEnum.DSL) {
                form.setFieldsValue({ parseMode: ParseModeEnum.FUNCTION_CALL });
-                // setFunctionName('DSL');
                setFunctionParams([
                  {
                    id: uuid(),
@@ -236,47 +230,6 @@ const DetailModal: React.FC<Props> = ({ detail, onSubmit, onCancel }) => {
            }}
          />
        </FormItem>
-        <FormItem
-          name="pattern"
-          label="插件描述"
-          rules={[{ required: true, message: '请输入插件描述' }]}
-        >
-          <TextArea placeholder="请输入插件描述，多个描述换行分隔" allowClear />
-        </FormItem>
-        <FormItem name="exampleQuestions" label="示例问题">
-          <div className={styles.paramsSection}>
-            {examples.map((example) => {
-              const { id, question } = example;
-              return (
-                <div className={styles.filterRow} key={id}>
-                  <Input
-                    placeholder="示例问题"
-                    value={question}
-                    className={styles.questionExample}
-                    onChange={(e) => {
-                      example.question = e.target.value;
-                      setExamples([...examples]);
-                    }}
-                    allowClear
-                  />
-                  <DeleteOutlined
-                    onClick={() => {
-                      setExamples(examples.filter((item) => item.id !== id));
-                    }}
-                  />
-                </div>
-              );
-            })}
-            <Button
-              onClick={() => {
-                setExamples([...examples, { id: uuid() }]);
-              }}
-            >
-              <PlusOutlined />
-              新增示例问题
-            </Button>
-          </div>
-        </FormItem>
        <FormItem label="函数名称">
          <Input
            value={functionName}
@@ -287,6 +240,9 @@ const DetailModal: React.FC<Props> = ({ detail, onSubmit, onCancel }) => {
            allowClear
          />
        </FormItem>
+        <FormItem name="pattern" label="函数描述">
+          <TextArea placeholder="请输入函数描述，多个描述换行分隔" allowClear />
+        </FormItem>
        <FormItem name="params" label="函数参数" hidden={pluginType === PluginTypeEnum.DSL}>
          <div className={styles.paramsSection}>
            {functionParams.map((functionParam: FunctionParamFormItemType) => {
@@ -345,6 +301,40 @@ const DetailModal: React.FC<Props> = ({ detail, onSubmit, onCancel }) => {
            </Button>
          </div>
        </FormItem>
+        <FormItem name="exampleQuestions" label="示例问题">
+          <div className={styles.paramsSection}>
+            {examples.map((example) => {
+              const { id, question } = example;
+              return (
+                <div className={styles.filterRow} key={id}>
+                  <Input
+                    placeholder="示例问题"
+                    value={question}
+                    className={styles.questionExample}
+                    onChange={(e) => {
+                      example.question = e.target.value;
+                      setExamples([...examples]);
+                    }}
+                    allowClear
+                  />
+                  <DeleteOutlined
+                    onClick={() => {
+                      setExamples(examples.filter((item) => item.id !== id));
+                    }}
+                  />
+                </div>
+              );
+            })}
+            <Button
+              onClick={() => {
+                setExamples([...examples, { id: uuid() }]);
+              }}
+            >
+              <PlusOutlined />
+              新增示例问题
+            </Button>
+          </div>
+        </FormItem>
        {(pluginType === PluginTypeEnum.WEB_PAGE || pluginType === PluginTypeEnum.WEB_SERVICE) && (
          <>
            <FormItem name="url" label="地址" rules={[{ required: true, message: '请输入地址' }]}>
@@ -391,9 +381,9 @@ const DetailModal: React.FC<Props> = ({ detail, onSubmit, onCancel }) => {
                        <>
                          <Select
                            placeholder="主题域"
-                            options={domainList.map((domain) => ({
-                              label: domain.name,
-                              value: domain.id,
+                            options={modelList.map((model) => ({
+                              label: model.name,
+                              value: model.id,
                            }))}
                            showSearch
                            filterOption={(input, option) =>
@@ -403,16 +393,16 @@ const DetailModal: React.FC<Props> = ({ detail, onSubmit, onCancel }) => {
                            }
                            className={styles.filterParamName}
                            allowClear
-                            value={filter.domainId}
+                            value={filter.modelId}
                            onChange={(value) => {
-                              filter.domainId = value;
+                              filter.modelId = value;
                              setFilters([...filters]);
                              updateDimensionList(value);
                            }}
                          />
                          <Select
                            placeholder="请选择维度，需先选择主题域"
-                            options={(domainDimensionList[filter.domainId] || []).map(
+                            options={(modelDimensionList[filter.modelId] || []).map(
                              (dimension) => ({
                                label: dimension.name,
                                value: `${dimension.id}`,
--- a/webapp/packages/supersonic-fe/src/pages/ChatPlugin/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/ChatPlugin/index.tsx
@@ -5,9 +5,9 @@ import moment from 'moment';
 import { useEffect, useState } from 'react';
 import { PARSE_MODE_MAP, PLUGIN_TYPE_MAP } from './constants';
 import DetailModal from './DetailModal';
-import { deletePlugin, getDomainList, getPluginList } from './service';
+import { deletePlugin, getModelList, getPluginList } from './service';
 import styles from './style.less';
-import { DomainType, ParseModeEnum, PluginType, PluginTypeEnum } from './type';
+import { ModelType, ParseModeEnum, PluginType, PluginTypeEnum } from './type';

 const { Search } = Input;

@@ -15,27 +15,27 @@ const PluginManage = () => {
  const [name, setName] = useState<string>();
  const [type, setType] = useState<PluginTypeEnum>();
  const [pattern, setPattern] = useState<string>();
-  const [domain, setDomain] = useState<string>();
+  const [model, setModel] = useState<string>();
  const [data, setData] = useState<PluginType[]>([]);
-  const [domainList, setDomainList] = useState<DomainType[]>([]);
+  const [modelList, setModelList] = useState<ModelType[]>([]);
  const [loading, setLoading] = useState(false);
  const [currentPluginDetail, setCurrentPluginDetail] = useState<PluginType>();
  const [detailModalVisible, setDetailModalVisible] = useState(false);

-  const initDomainList = async () => {
-    const res = await getDomainList();
-    setDomainList(getLeafList(res.data));
+  const initModelList = async () => {
+    const res = await getModelList();
+    setModelList(getLeafList(res.data));
  };

  const updateData = async (filters?: any) => {
    setLoading(true);
-    const res = await getPluginList({ name, type, pattern, domain, ...(filters || {}) });
+    const res = await getPluginList({ name, type, pattern, model, ...(filters || {}) });
    setLoading(false);
-    setData(res.data.map((item) => ({ ...item, config: JSON.parse(item.config || '{}') })));
+    setData(res.data?.map((item) => ({ ...item, config: JSON.parse(item.config || '{}') })) || []);
  };

  useEffect(() => {
-    initDomainList();
+    initModelList();
    updateData();
  }, []);

@@ -58,17 +58,17 @@ const PluginManage = () => {
    },
    {
      title: '主题域',
-      dataIndex: 'domainList',
-      key: 'domainList',
+      dataIndex: 'modelList',
+      key: 'modelList',
      width: 200,
      render: (value: number[]) => {
        if (value?.includes(-1)) {
-          return '全部';
+          return '默认';
        }
        return value ? (
-          <div className={styles.domainColumn}>
+          <div className={styles.modelColumn}>
            {value.map((id, index) => {
-              const name = domainList.find((domain) => domain.id === +id)?.name;
+              const name = modelList.find((model) => model.id === +id)?.name;
              return name ? <Tag key={id}>{name}</Tag> : null;
            })}
          </div>
@@ -90,7 +90,7 @@ const PluginManage = () => {
      },
    },
    {
-      title: '插件描述',
+      title: '函数描述',
      dataIndex: 'pattern',
      key: 'pattern',
      width: 450,
@@ -139,9 +139,9 @@ const PluginManage = () => {
    },
  ];

-  const onDomainChange = (value: string) => {
-    setDomain(value);
-    updateData({ domain: value });
+  const onModelChange = (value: string) => {
+    setModel(value);
+    updateData({ model: value });
  };

  const onTypeChange = (value: PluginTypeEnum) => {
@@ -171,10 +171,10 @@ const PluginManage = () => {
          <Select
            className={styles.filterItemControl}
            placeholder="请选择主题域"
-            options={domainList.map((domain) => ({ label: domain.name, value: domain.id }))}
-            value={domain}
+            options={modelList.map((model) => ({ label: model.name, value: model.id }))}
+            value={model}
            allowClear
-            onChange={onDomainChange}
+            onChange={onModelChange}
          />
        </div>
        <div className={styles.filterItem}>
@@ -190,10 +190,10 @@ const PluginManage = () => {
          />
        </div>
        <div className={styles.filterItem}>
-          <div className={styles.filterItemTitle}>插件描述</div>
+          <div className={styles.filterItemTitle}>函数描述</div>
          <Search
            className={styles.filterItemControl}
-            placeholder="请输入插件描述"
+            placeholder="请输入函数描述"
            value={pattern}
            onChange={(e) => {
              setPattern(e.target.value);
--- a/webapp/packages/supersonic-fe/src/pages/ChatPlugin/service.ts
+++ b/webapp/packages/supersonic-fe/src/pages/ChatPlugin/service.ts
@@ -1,5 +1,5 @@
 import { request } from "umi";
-import { DimensionType, DomainType, PluginType } from "./type";
+import { DimensionType, ModelType, PluginType } from "./type";

 export function savePlugin(params: Partial<PluginType>) {
  return request<Result<any>>('/api/chat/plugin', {
@@ -21,17 +21,17 @@ export function deletePlugin(id: number) {
  });
 }

-export function getDomainList() {
-  return request<Result<DomainType[]>>('/api/chat/conf/domainList', {
+export function getModelList() {
+  return request<Result<ModelType[]>>('/api/chat/conf/modelList', {
    method: 'GET',
  });
 }

-export function getDimensionList(domainId: number) {
+export function getDimensionList(modelId: number) {
  return request<Result<{list: DimensionType[]}>>('/api/semantic/dimension/queryDimension', {
    method: 'POST',
    data: {
-      domainIds: [domainId],
+      modelIds: [modelId],
      current: 1,
      pageSize: 2000
    }
--- a/webapp/packages/supersonic-fe/src/pages/ChatPlugin/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/ChatPlugin/style.less
@@ -47,7 +47,7 @@
      }
    }

-    .domainColumn {
+    .modelColumn {
      display: flex;
      align-items: center;
      column-gap: 2px;
--- a/webapp/packages/supersonic-fe/src/pages/ChatPlugin/type.ts
+++ b/webapp/packages/supersonic-fe/src/pages/ChatPlugin/type.ts
@@ -26,7 +26,7 @@ export enum ParamTypeEnum {
 export type PluginType = {
  id: number;
  type: PluginTypeEnum;
-  domainList: number[];
+  modelList: number[];
  pattern: string;
  parseMode: ParseModeEnum;
  parseModeConfig: string;
@@ -34,7 +34,7 @@ export type PluginType = {
  config: PluginConfigType;
 }

-export type DomainType = {
+export type ModelType = {
  id: number | string;
  parentId: number;
  name: string;
--- a/webapp/packages/supersonic-fe/src/pages/Copilot/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Copilot/index.tsx
@@ -0,0 +1,160 @@
+import IconFont from '@/components/IconFont';
+import {
+  CaretRightOutlined,
+  CloseOutlined,
+  FullscreenExitOutlined,
+  FullscreenOutlined,
+} from '@ant-design/icons';
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+import Chat from '../Chat';
+import { ModelType } from '../Chat/type';
+import styles from './style.less';
+import { useDispatch } from 'umi';
+
+type Props = {
+  copilotSendMsg: string;
+};
+
+const Copilot: React.FC<Props> = ({ copilotSendMsg }) => {
+  const [chatVisible, setChatVisible] = useState(false);
+  const [defaultModelName, setDefaultModelName] = useState('');
+  const [fullscreen, setFullscreen] = useState(false);
+  const [triggerNewConversation, setTriggerNewConversation] = useState(false);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const chatVisibleValue = localStorage.getItem('CHAT_VISIBLE') === 'true';
+    if (chatVisibleValue) {
+      setTimeout(() => {
+        setChatVisible(true);
+      }, 500);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (copilotSendMsg) {
+      updateChatVisible(true);
+      setTriggerNewConversation(true);
+    }
+  }, [copilotSendMsg]);
+
+  const updateChatVisible = (visible: boolean) => {
+    setChatVisible(visible);
+    localStorage.setItem('CHAT_VISIBLE', visible ? 'true' : 'false');
+  };
+
+  const onToggleChatVisible = () => {
+    const chatVisibleValue = !chatVisible;
+    updateChatVisible(chatVisibleValue);
+    if (!chatVisibleValue) {
+      document.body.style.overflow = 'auto';
+    } else {
+      if (fullscreen) {
+        document.body.style.overflow = 'hidden';
+      } else {
+        document.body.style.overflow = 'auto';
+      }
+    }
+  };
+
+  const onCloseChat = () => {
+    updateChatVisible(false);
+    document.body.style.overflow = 'auto';
+  };
+
+  const onTransferChat = () => {
+    window.open(
+      `${window.location.href.includes('webapp') ? '/webapp' : ''}/chat?cid=${localStorage.getItem(
+        'CONVERSATION_ID',
+      )}${defaultModelName ? `&modelName=${defaultModelName}` : ''}`,
+    );
+  };
+
+  const onCurrentModelChange = (model?: ModelType) => {
+    setDefaultModelName(model?.name || '');
+    if (model?.name !== defaultModelName) {
+      onCancelCopilotFilter();
+    }
+  };
+
+  const onEnterFullscreen = () => {
+    setFullscreen(true);
+    document.body.style.overflow = 'hidden';
+  };
+
+  const onExitFullscreen = () => {
+    setFullscreen(false);
+    document.body.style.overflow = 'auto';
+  };
+
+  const onCheckMoreDetail = () => {
+    if (!fullscreen) {
+      onEnterFullscreen();
+    }
+  };
+
+  const onCancelCopilotFilter = () => {
+    dispatch({
+      type: 'globalState/setGlobalCopilotFilter',
+      payload: undefined,
+    });
+  };
+
+  const onNewConversationTriggered = () => {
+    setTriggerNewConversation(false);
+  };
+
+  const chatPopoverClass = classNames(styles.chatPopover, {
+    [styles.fullscreen]: fullscreen,
+  });
+
+  return (
+    <>
+      <div className={styles.copilot} onClick={onToggleChatVisible}>
+        <IconFont type="icon-copilot-fill" />
+      </div>
+      {chatVisible && (
+        <div className={styles.copilotContent}>
+          <div className={chatPopoverClass}>
+            <div className={styles.header}>
+              <div className={styles.leftSection}>
+                <CloseOutlined className={styles.close} onClick={onCloseChat} />
+                {fullscreen ? (
+                  <FullscreenExitOutlined
+                    className={styles.fullscreen}
+                    onClick={onExitFullscreen}
+                  />
+                ) : (
+                  <FullscreenOutlined className={styles.fullscreen} onClick={onEnterFullscreen} />
+                )}
+                <IconFont
+                  type="icon-weibiaoti-"
+                  className={styles.transfer}
+                  onClick={onTransferChat}
+                />
+              </div>
+              <div className={styles.title}>Copilot</div>
+            </div>
+            <div className={styles.chat}>
+              <Chat
+                defaultModelName={defaultModelName}
+                copilotSendMsg={copilotSendMsg}
+                isCopilotMode
+                copilotFullscreen={fullscreen}
+                triggerNewConversation={triggerNewConversation}
+                onNewConversationTriggered={onNewConversationTriggered}
+                onCurrentModelChange={onCurrentModelChange}
+                onCancelCopilotFilter={onCancelCopilotFilter}
+                onCheckMoreDetail={onCheckMoreDetail}
+              />
+            </div>
+          </div>
+          <CaretRightOutlined className={styles.rightArrow} />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Copilot;
--- a/webapp/packages/supersonic-fe/src/pages/Copilot/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Copilot/style.less
@@ -0,0 +1,110 @@
+.copilot {
+  position: fixed;
+  right: 8px;
+  bottom: 220px;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 54px;
+  height: 54px;
+  overflow: hidden;
+  color: #fff;
+  font-size: 26px;
+  background-color: var(--chat-blue);
+  background-clip: padding-box;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  box-shadow: 8px 8px 20px 0 rgba(55, 99, 170, 0.1);
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+
+  &:hover {
+    text-decoration: none;
+    box-shadow: 8px 8px 20px rgba(55, 99, 170, 0.3);
+  }
+}
+
+.chatPopover {
+  position: fixed;
+  right: 90px;
+  bottom: 5vh;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  width: 50vw;
+  height: 90vh;
+  overflow: hidden;
+  box-shadow: 8px 8px 20px rgba(55, 99, 170, 0.1), -2px -2px 16px rgba(55, 99, 170, 0.1);
+  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out,
+    -webkit-transform 0.3s ease-in-out;
+
+  .header {
+    position: relative;
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+    padding-right: 16px;
+    padding-left: 16px;
+    background: linear-gradient(90deg, #4692ff 0%, #1877ff 98%);
+    box-shadow: 1px 1px 8px #1b4aef5c;
+
+    .title {
+      color: #fff;
+      font-weight: 700;
+      font-size: 18px;
+    }
+
+    .leftSection {
+      position: absolute;
+      left: 16px;
+      display: flex;
+      align-items: center;
+      color: #fff;
+      font-size: 16px;
+      column-gap: 20px;
+
+      .close {
+        font-size: 18px;
+        cursor: pointer;
+      }
+
+      .transfer {
+        cursor: pointer;
+      }
+
+      .fullscreen {
+        font-size: 20px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .chat {
+    height: calc(90vh - 50px);
+  }
+
+  &.fullscreen {
+    bottom: 0;
+    left: 0;
+    width: calc(100vw - 90px);
+    height: 100vh;
+
+    .chat {
+      height: calc(100vh - 50px);
+    }
+  }
+}
+
+.rightArrow {
+  position: fixed;
+  right: 69px;
+  bottom: 232px;
+  z-index: 999;
+  color: var(--chat-blue);
+  font-size: 30px;
+}
--- a/webapp/packages/supersonic-fe/tsconfig.json
+++ b/webapp/packages/supersonic-fe/tsconfig.json
@@ -16,7 +16,7 @@
    "allowJs": true,
    "skipLibCheck": true,
    "experimentalDecorators": true,
-    "suppressImplicitAnyIndexErrors": true,
+    "ignoreDeprecations": "5.0",
    "strict": true,
    "paths": {
      "@/*": ["./src/*"],