Feat: Add ChatBasicSetting component #3221 (#4876)

### What problem does this PR solve?

Feat: Add ChatBasicSetting component #3221

### Type of change


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

web/src/components/knowledge-base-item.tsx

@@ -2,7 +2,12 @@ import { DocumentParserType } from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
 import { UserOutlined } from '@ant-design/icons';
-import { Avatar, Form, Select, Space } from 'antd';
+import { Avatar as AntAvatar, Form, Select, Space } from 'antd';
+import { Book } from 'lucide-react';
+import { useFormContext } from 'react-hook-form';
+import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
+import { FormControl, FormField, FormItem, FormLabel } from './ui/form';
+import { MultiSelect } from './ui/multi-select';
 
 const KnowledgeBaseItem = () => {
   const { t } = useTranslate('chat');
@@ -16,7 +21,7 @@ const KnowledgeBaseItem = () => {
   const knowledgeOptions = filteredKnowledgeList.map((x) => ({
     label: (
       <Space>
-        <Avatar size={20} icon={<UserOutlined />} src={x.avatar} />
+        <AntAvatar size={20} icon={<UserOutlined />} src={x.avatar} />
         {x.name}
       </Space>
     ),
@@ -46,3 +51,49 @@ const KnowledgeBaseItem = () => {
 };
 
 export default KnowledgeBaseItem;
+
+export function KnowledgeBaseFormField() {
+  const form = useFormContext();
+  const { t } = useTranslate('chat');
+
+  const { list: knowledgeList } = useFetchKnowledgeList(true);
+
+  const filteredKnowledgeList = knowledgeList.filter(
+    (x) => x.parser_id !== DocumentParserType.Tag,
+  );
+
+  const knowledgeOptions = filteredKnowledgeList.map((x) => ({
+    label: x.name,
+    value: x.id,
+    icon: () => (
+      <Avatar className="size-4 mr-2">
+        <AvatarImage src={x.avatar} />
+        <AvatarFallback>
+          <Book />
+        </AvatarFallback>
+      </Avatar>
+    ),
+  }));
+
+  return (
+    <FormField
+      control={form.control}
+      name="kb_ids"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{t('knowledgeBases')}</FormLabel>
+          <FormControl>
+            <MultiSelect
+              options={knowledgeOptions}
+              onValueChange={field.onChange}
+              placeholder={t('knowledgeBasesMessage')}
+              variant="inverted"
+              maxCount={100}
+              {...field}
+            />
+          </FormControl>
+        </FormItem>
+      )}
+    />
+  );
+}