(feature)(webapp) add show case and support multiple selection and deletion of filter conditions (#251)

webapp/packages/chat-sdk/src/ShowCase/index.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react';
+import styles from './style.module.less';
+import { ShowCaseMapType } from './type';
+import { queryShowCase } from './service';
+import Text from '../Chat/components/Text';
+import ChatItem from '../components/ChatItem';
+import { HistoryMsgItemType } from '../common/type';
+import { Spin } from 'antd';
+
+type Props = {
+  agentId: number;
+  onSendMsg?: (msg: string) => void;
+};
+
+const ShowCase: React.FC<Props> = ({ agentId, onSendMsg }) => {
+  const [showCaseMap, setShowCaseMap] = useState<ShowCaseMapType>({});
+  const [loading, setLoading] = useState(false);
+
+  const updateData = async (pageNo: number) => {
+    if (pageNo === 1) {
+      setLoading(true);
+    }
+    const res = await queryShowCase(agentId, pageNo, 20);
+    if (pageNo === 1) {
+      setLoading(false);
+    }
+    setShowCaseMap(
+      pageNo === 1 ? res.data.showCaseMap : { ...showCaseMap, ...res.data.showCaseMap }
+    );
+  };
+
+  useEffect(() => {
+    if (agentId) {
+      updateData(1);
+    }
+  }, [agentId]);
+
+  return (
+    <Spin spinning={loading} size="large">
+      <div className={styles.showCase}>
+        {Object.keys(showCaseMap || {}).map(key => {
+          const showCaseItem = showCaseMap?.[key] || [];
+          return (
+            <div key={key} className={styles.showCaseItem}>
+              {showCaseItem
+                .filter((chatItem: HistoryMsgItemType) => !!chatItem.queryResult)
+                .slice(0, 10)
+                .map((chatItem: HistoryMsgItemType) => {
+                  return (
+                    <div className={styles.showCaseChatItem} key={chatItem.questionId}>
+                      <Text position="right" data={chatItem.queryText} anonymousUser />
+                      <ChatItem
+                        msg={chatItem.queryText}
+                        msgData={chatItem.queryResult}
+                        conversationId={chatItem.chatId}
+                        agentId={agentId}
+                        integrateSystem="showcase"
+                        onSendMsg={onSendMsg}
+                      />
+                    </div>
+                  );
+                })}
+            </div>
+          );
+        })}
+      </div>
+    </Spin>
+  );
+};
+
+export default ShowCase;

webapp/packages/chat-sdk/src/ShowCase/service.ts

@@ -0,0 +1,12 @@
+import axios from '../service/axiosInstance';
+import { isMobile } from '../utils/utils';
+import { ShowCaseType } from './type';
+
+const prefix = isMobile ? '/openapi' : '/api';
+
+export function queryShowCase(agentId: number, current: number, pageSize: number) {
+  return axios.post<ShowCaseType>(
+    `${prefix}/chat/manage/queryShowCase?agentId=${agentId}`,
+    { current, pageSize }
+  );
+}

webapp/packages/chat-sdk/src/ShowCase/style.module.less

@@ -0,0 +1,27 @@
+.showCase {
+  column-count: 2;
+  column-gap: 20px;
+  height: 100%;
+  min-height: 400px;
+  overflow-y: auto;
+
+  .showCaseItem {
+    display: flex;
+    flex-direction: column;
+    row-gap: 12px;
+    padding: 12px;
+    margin-bottom: 20px;
+    max-height: 800px;
+    overflow-y: auto;
+    border-radius: 12px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
+    background: linear-gradient(180deg, rgba(23, 74, 228, 0) 29.44%, rgba(23, 74, 228, 0.06) 100%),
+    linear-gradient(90deg, #f3f3f7 0%, #f3f3f7 20%, #ebf0f9 60%, #f3f3f7 80%, #f3f3f7 100%);
+
+    .showCaseChatItem {
+      display: flex;
+      flex-direction: column;
+      row-gap: 12px;
+    }
+  }
+}

webapp/packages/chat-sdk/src/ShowCase/type.ts

@@ -0,0 +1,9 @@
+import { HistoryMsgItemType } from "../common/type";
+
+export type ShowCaseMapType = Record<number, HistoryMsgItemType[]>;
+
+export type ShowCaseType = {
+  showCaseMap: ShowCaseMapType,
+  current: number,
+  pageSize: number,
+}