[feature](webapp) merge query steps to one card

webapp/packages/chat-sdk/src/components/ChatItem/SwitchEntity.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { ChatContextType } from '../../common/type';
+import { Popover } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
+import RecommendOptions from '../RecommendOptions';
+import { PREFIX_CLS } from '../../common/constants';
+
+type Props = {
+  entityName: string;
+  chatContext: ChatContextType;
+  onSwitchEntity: (entityId: string) => void;
+};
+
+const SwicthEntity: React.FC<Props> = ({ entityName, chatContext, onSwitchEntity }) => {
+  const [recommendOptionsOpen, setRecommendOptionsOpen] = useState(false);
+  const { modelId, modelName, dimensionFilters } = chatContext || {};
+
+  const prefixCls = `${PREFIX_CLS}-item`;
+
+  const switchEntity = (option: string) => {
+    setRecommendOptionsOpen(false);
+    onSwitchEntity(option);
+  };
+
+  const entityId = dimensionFilters?.find(
+    filter => filter?.bizName === 'zyqk_song_id' || filter?.bizName === 'singer_id'
+  )?.value;
+
+  return (
+    <Popover
+      content={
+        <RecommendOptions
+          entityId={entityId!}
+          modelId={modelId}
+          modelName={modelName}
+          onSelect={switchEntity}
+        />
+      }
+      placement="bottomLeft"
+      trigger="click"
+      open={recommendOptionsOpen}
+      onOpenChange={open => setRecommendOptionsOpen(open)}
+    >
+      <div className={`${prefixCls}-tip-item-value ${prefixCls}-switch-entity`}>
+        {entityName}
+        <DownOutlined className={`${prefixCls}-down-icon`} />
+      </div>
+    </Popover>
+  );
+};
+
+export default SwicthEntity;