(feature)(webapp) add filter modify and similar questions (#213)

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

@@ -1,24 +1,44 @@
-import { CheckCircleFilled, DownOutlined, UpOutlined } from '@ant-design/icons';
+import { CheckCircleFilled, DownOutlined, LoadingOutlined, UpOutlined } from '@ant-design/icons';
 import { PREFIX_CLS } from '../../common/constants';
 import { SimilarQuestionType } from '../../common/type';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { querySimilarQuestions } from '../../service';
 
 type Props = {
-  similarQuestions: SimilarQuestionType[];
+  // similarQuestions: SimilarQuestionType[];
+  queryText: string;
+  agentId?: number;
   defaultExpanded?: boolean;
   onSelectQuestion: (question: SimilarQuestionType) => void;
 };
 
 const SimilarQuestions: React.FC<Props> = ({
-  similarQuestions,
+  // similarQuestions,
+  queryText,
+  agentId,
   defaultExpanded,
   onSelectQuestion,
 }) => {
+  const [similarQuestions, setSimilarQuestions] = useState<SimilarQuestionType[]>([]);
   const [expanded, setExpanded] = useState(defaultExpanded || false);
+  const [loading, setLoading] = useState(false);
 
   const tipPrefixCls = `${PREFIX_CLS}-item`;
   const prefixCls = `${PREFIX_CLS}-similar-questions`;
 
+  const initData = async () => {
+    setLoading(true);
+    const res = await querySimilarQuestions(queryText, agentId);
+    setLoading(false);
+    setSimilarQuestions(res.data || []);
+  };
+
+  useEffect(() => {
+    if (expanded && similarQuestions?.length === 0) {
+      initData();
+    }
+  }, [expanded]);
+
   const onToggleExpanded = () => {
     setExpanded(!expanded);
   };
@@ -30,14 +50,14 @@ const SimilarQuestions: React.FC<Props> = ({
         <div className={`${tipPrefixCls}-step-title`}>
           推荐相似问题
           <span className={`${prefixCls}-toggle-expand-btn`} onClick={onToggleExpanded}>
-            {expanded ? <UpOutlined /> : <DownOutlined />}
+            {loading ? <LoadingOutlined /> : expanded ? <UpOutlined /> : <DownOutlined />}
           </span>
         </div>
       </div>
       <div className={prefixCls}>
         {expanded && (
           <div className={`${prefixCls}-content`}>
-            {similarQuestions.slice(0, 5).map((question, index) => {
+            {similarQuestions?.slice(0, 5).map((question, index) => {
               return (
                 <div
                   className={`${prefixCls}-question`}