feat: knowledge query var

web/app/components/workflow/nodes/knowledge-retrieval/mock.ts

@@ -1,8 +1,9 @@
+import { BlockEnum } from '../../types'
 import type { KnowledgeRetrievalNodeType } from './types'
 import { RETRIEVE_TYPE } from '@/types/app'
 
 export const mockData: KnowledgeRetrievalNodeType = {
-  type: 'KnowledgeRetrieval',
+  type: BlockEnum.KnowledgeRetrieval,
   desc: 'xxx',
   title: 'KnowledgeRetrieval',
   query_variable_selector: ['aaa', 'name'],

web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx

@@ -1,8 +1,36 @@
 import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import VarReferencePicker from '../_base/components/variable/var-reference-picker'
+import useConfig from './use-config'
+import { mockData } from './mock'
+import Field from '@/app/components/workflow/nodes/_base/components/field'
+
+const i18nPrefix = 'workflow.nodes.knowledgeRetrieval'
 
 const Panel: FC = () => {
+  const { t } = useTranslation()
+  const readOnly = false
+
+  const {
+    inputs,
+    handleQueryVarChange,
+  } = useConfig(mockData)
+
   return (
-    <div>start panel inputs</div>
+    <div className='mt-2'>
+      <div className='px-4 pb-4 space-y-4'>
+        <Field
+          title={t(`${i18nPrefix}.queryVariable`)}
+        >
+          <VarReferencePicker
+            readonly={readOnly}
+            isShowNodeName
+            value={inputs.query_variable_selector}
+            onChange={handleQueryVarChange}
+          />
+        </Field>
+      </div>
+    </div>
   )
 }
 

web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts

@@ -0,0 +1,22 @@
+import { useCallback, useState } from 'react'
+import produce from 'immer'
+import type { ValueSelector } from '../../types'
+import type { KnowledgeRetrievalNodeType } from './types'
+
+const useConfig = (initInputs: KnowledgeRetrievalNodeType) => {
+  const [inputs, setInputs] = useState<KnowledgeRetrievalNodeType>(initInputs)
+
+  const handleQueryVarChange = useCallback((newVar: ValueSelector) => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.query_variable_selector = newVar
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  return {
+    inputs,
+    handleQueryVarChange,
+  }
+}
+
+export default useConfig