add support for XunFei Spark (#2017)

### What problem does this PR solve?

#1853  add support for XunFei Spark

### Type of change

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

Co-authored-by: Zhedong Cen <cenzhedong2@126.com>

web/src/pages/user-setting/setting-model/constant.ts

@@ -33,6 +33,7 @@ export const IconMap = {
   '01.AI': 'yi',
   Replicate: 'replicate',
   'Tencent Hunyuan': 'hunyuan',
+  'XunFei Spark': 'spark',
 };
 
 export const BedrockRegionList = [

web/src/pages/user-setting/setting-model/hooks.ts

@@ -190,6 +190,33 @@ export const useSubmitHunyuan = () => {
   };
 };
 
+export const useSubmitSpark = () => {
+  const { addLlm, loading } = useAddLlm();
+  const {
+    visible: SparkAddingVisible,
+    hideModal: hideSparkAddingModal,
+    showModal: showSparkAddingModal,
+  } = useSetModalState();
+
+  const onSparkAddingOk = useCallback(
+    async (payload: IAddLlmRequestBody) => {
+      const ret = await addLlm(payload);
+      if (ret === 0) {
+        hideSparkAddingModal();
+      }
+    },
+    [hideSparkAddingModal, addLlm],
+  );
+
+  return {
+    SparkAddingLoading: loading,
+    onSparkAddingOk,
+    SparkAddingVisible,
+    hideSparkAddingModal,
+    showSparkAddingModal,
+  };
+};
+
 export const useSubmitBedrock = () => {
   const { addLlm, loading } = useAddLlm();
   const {

web/src/pages/user-setting/setting-model/index.tsx

@@ -36,12 +36,14 @@ import {
   useSubmitBedrock,
   useSubmitHunyuan,
   useSubmitOllama,
+  useSubmitSpark,
   useSubmitSystemModelSetting,
   useSubmitVolcEngine,
 } from './hooks';
 import HunyuanModal from './hunyuan-modal';
 import styles from './index.less';
 import OllamaModal from './ollama-modal';
+import SparkModal from './spark-modal';
 import SystemModelSettingModal from './system-model-setting-modal';
 import VolcEngineModal from './volcengine-modal';
 
@@ -92,7 +94,8 @@ const ModelCard = ({ item, clickApiKey }: IModelCardProps) => {
               <Button onClick={handleApiKeyClick}>
                 {isLocalLlmFactory(item.name) ||
                 item.name === 'VolcEngine' ||
-                item.name === 'Tencent Hunyuan'
+                item.name === 'Tencent Hunyuan' ||
+                item.name === 'XunFei Spark'
                   ? t('addTheModel')
                   : 'API-Key'}
                 <SettingOutlined />
@@ -174,6 +177,14 @@ const UserSettingModel = () => {
     HunyuanAddingLoading,
   } = useSubmitHunyuan();
 
+  const {
+    SparkAddingVisible,
+    hideSparkAddingModal,
+    showSparkAddingModal,
+    onSparkAddingOk,
+    SparkAddingLoading,
+  } = useSubmitSpark();
+
   const {
     bedrockAddingLoading,
     onBedrockAddingOk,
@@ -187,8 +198,14 @@ const UserSettingModel = () => {
       Bedrock: showBedrockAddingModal,
       VolcEngine: showVolcAddingModal,
       'Tencent Hunyuan': showHunyuanAddingModal,
+      'XunFei Spark': showSparkAddingModal,
     }),
-    [showBedrockAddingModal, showVolcAddingModal, showHunyuanAddingModal],
+    [
+      showBedrockAddingModal,
+      showVolcAddingModal,
+      showHunyuanAddingModal,
+      showSparkAddingModal,
+    ],
   );
 
   const handleAddModel = useCallback(
@@ -306,6 +323,13 @@ const UserSettingModel = () => {
         loading={HunyuanAddingLoading}
         llmFactory={'Tencent Hunyuan'}
       ></HunyuanModal>
+      <SparkModal
+        visible={SparkAddingVisible}
+        hideModal={hideSparkAddingModal}
+        onOk={onSparkAddingOk}
+        loading={SparkAddingLoading}
+        llmFactory={'XunFei Spark'}
+      ></SparkModal>
       <BedrockModal
         visible={bedrockAddingVisible}
         hideModal={hideBedrockAddingModal}

web/src/pages/user-setting/setting-model/spark-modal/index.tsx

@@ -0,0 +1,94 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { IModalProps } from '@/interfaces/common';
+import { IAddLlmRequestBody } from '@/interfaces/request/llm';
+import { Form, Input, Modal, Select } from 'antd';
+import omit from 'lodash/omit';
+
+type FieldType = IAddLlmRequestBody & {
+  vision: boolean;
+  spark_api_password: string;
+};
+
+const { Option } = Select;
+
+const SparkModal = ({
+  visible,
+  hideModal,
+  onOk,
+  loading,
+  llmFactory,
+}: IModalProps<IAddLlmRequestBody> & { llmFactory: string }) => {
+  const [form] = Form.useForm<FieldType>();
+
+  const { t } = useTranslate('setting');
+
+  const handleOk = async () => {
+    const values = await form.validateFields();
+    const modelType =
+      values.model_type === 'chat' && values.vision
+        ? 'image2text'
+        : values.model_type;
+
+    const data = {
+      ...omit(values, ['vision']),
+      model_type: modelType,
+      llm_factory: llmFactory,
+    };
+    console.info(data);
+
+    onOk?.(data);
+  };
+
+  return (
+    <Modal
+      title={t('addLlmTitle', { name: llmFactory })}
+      open={visible}
+      onOk={handleOk}
+      onCancel={hideModal}
+      okButtonProps={{ loading }}
+      confirmLoading={loading}
+    >
+      <Form
+        name="basic"
+        style={{ maxWidth: 600 }}
+        autoComplete="off"
+        layout={'vertical'}
+        form={form}
+      >
+        <Form.Item<FieldType>
+          label={t('modelType')}
+          name="model_type"
+          initialValue={'chat'}
+          rules={[{ required: true, message: t('modelTypeMessage') }]}
+        >
+          <Select placeholder={t('modelTypeMessage')}>
+            <Option value="chat">chat</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item<FieldType>
+          label={t('modelName')}
+          name="llm_name"
+          initialValue={'Spark-Max'}
+          rules={[{ required: true, message: t('SparkModelNameMessage') }]}
+        >
+          <Select placeholder={t('modelTypeMessage')}>
+            <Option value="Spark-Max">Spark-Max</Option>
+            <Option value="Spark-Lite">Spark-Lite</Option>
+            <Option value="Spark-Pro">Spark-Pro</Option>
+            <Option value="Spark-Pro-128K">Spark-Pro-128K</Option>
+            <Option value="Spark-4.0-Ultra">Spark-4.0-Ultra</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item<FieldType>
+          label={t('addSparkAPIPassword')}
+          name="spark_api_password"
+          rules={[{ required: true, message: t('SparkPasswordMessage') }]}
+        >
+          <Input placeholder={t('SparkSIDMessage')} />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default SparkModal;