feat: add llm Select to KeywordExtractForm #918 (#1492)

### What problem does this PR solve?

feat: add llm Select to KeywordExtractForm #918

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/top-n-item.tsx

@@ -5,14 +5,18 @@ type FieldType = {
   top_n?: number;
 };
 
-const TopNItem = () => {
+interface IProps {
+  initialValue?: number;
+}
+
+const TopNItem = ({ initialValue = 8 }: IProps) => {
   const { t } = useTranslate('chat');
 
   return (
     <Form.Item<FieldType>
       label={t('topN')}
       name={'top_n'}
-      initialValue={8}
+      initialValue={initialValue}
       tooltip={t('topNTip')}
     >
       <Slider max={30} />

web/src/pages/flow/baidu-form/index.tsx

@@ -12,7 +12,7 @@ const BaiduForm = ({ onValuesChange, form }: IOperatorForm) => {
       form={form}
       onValuesChange={onValuesChange}
     >
-      <TopNItem></TopNItem>
+      <TopNItem initialValue={10}></TopNItem>
     </Form>
   );
 };

web/src/pages/flow/canvas/node/index.less

@@ -57,3 +57,10 @@
   text-align: center;
   // align-items: center;
 }
+
+.jsonView {
+  word-wrap: break-word;
+  overflow: auto;
+  max-width: 300px;
+  max-height: 500px;
+}

web/src/pages/flow/canvas/node/popover.tsx

@@ -7,6 +7,8 @@ import 'react18-json-view/src/style.css';
 import { Operator } from '../../constant';
 import { useReplaceIdWithText } from '../../hooks';
 
+import styles from './index.less';
+
 interface IProps extends React.PropsWithChildren {
   nodeId: string;
 }
@@ -32,7 +34,7 @@ const NodePopover = ({ children, nodeId }: IProps) => {
         <JsonView
           src={replacedOutput}
           displaySize={30}
-          style={{ maxWidth: 300, maxHeight: 500 }}
+          className={styles.jsonView}
         />
       </div>
     ) : undefined;

web/src/pages/flow/constant.tsx

@@ -188,6 +188,11 @@ export const initialMessageValues = {
   messages: [],
 };
 
+export const initialKeywordExtractValues = {
+  ...initialLlmBaseValues,
+  top_n: 1,
+};
+
 export const initialFormValuesMap = {
   [Operator.Begin]: initialBeginValues,
   [Operator.Retrieval]: initialRetrievalValues,
@@ -197,6 +202,7 @@ export const initialFormValuesMap = {
   [Operator.Relevant]: initialRelevantValues,
   [Operator.RewriteQuestion]: initialRewriteQuestionValues,
   [Operator.Message]: initialMessageValues,
+  [Operator.KeywordExtract]: initialKeywordExtractValues,
 };
 
 export const CategorizeAnchorPointPositions = [

web/src/pages/flow/duckduckgo-form/index.tsx

@@ -15,7 +15,7 @@ const DuckDuckGoForm = ({ onValuesChange, form }: IOperatorForm) => {
       form={form}
       onValuesChange={onValuesChange}
     >
-      <TopNItem></TopNItem>
+      <TopNItem initialValue={10}></TopNItem>
       <Form.Item
         label={t('channel')}
         name={'channel'}

web/src/pages/flow/hooks.ts

@@ -365,6 +365,7 @@ export const useSaveGraphBeforeOpeningDebugDrawer = (show: () => void) => {
   const { id } = useParams();
   const { saveGraph } = useSaveGraph();
   const { resetFlow } = useResetFlow();
+  const { refetch } = useFetchFlow();
   const { send } = useSendMessageWithSse(api.runCanvas);
   const handleRun = useCallback(async () => {
     const saveRet = await saveGraph();
@@ -373,6 +374,7 @@ export const useSaveGraphBeforeOpeningDebugDrawer = (show: () => void) => {
       const resetRet = await resetFlow();
       // After resetting, all previous messages will be cleared.
       if (resetRet?.retcode === 0) {
+        refetch();
         // fetch prologue
         const sendRet = await send({ id });
         if (receiveMessageError(sendRet)) {
@@ -382,7 +384,7 @@ export const useSaveGraphBeforeOpeningDebugDrawer = (show: () => void) => {
         }
       }
     }
-  }, [saveGraph, resetFlow, id, send, show]);
+  }, [saveGraph, resetFlow, id, send, show, refetch]);
 
   return handleRun;
 };

web/src/pages/flow/keyword-extract-form/index.tsx

@@ -1,8 +1,15 @@
+import LLMSelect from '@/components/llm-select';
 import TopNItem from '@/components/top-n-item';
+import { useTranslate } from '@/hooks/commonHooks';
 import { Form } from 'antd';
+import { useSetLlmSetting } from '../hooks';
 import { IOperatorForm } from '../interface';
 
 const KeywordExtractForm = ({ onValuesChange, form }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+
+  useSetLlmSetting(form);
+
   return (
     <Form
       name="basic"
@@ -12,7 +19,14 @@ const KeywordExtractForm = ({ onValuesChange, form }: IOperatorForm) => {
       form={form}
       onValuesChange={onValuesChange}
     >
-      <TopNItem></TopNItem>
+      <Form.Item
+        name={'llm_id'}
+        label={t('model', { keyPrefix: 'chat' })}
+        tooltip={t('modelTip', { keyPrefix: 'chat' })}
+      >
+        <LLMSelect></LLMSelect>
+      </Form.Item>
+      <TopNItem initialValue={1}></TopNItem>
     </Form>
   );
 };