chore: provider form test

2026-02-03 18:21:08 +08:00
parent d86d061f97
commit e188d788b9
27 changed files with 448 additions and 317 deletions
@@ -0,0 +1,134 @@
+import SealSelect from '@/components/seal-form/seal-select';
+import { categoryOptions } from '@/pages/llmodels/config';
+import {
+  CheckCircleFilled,
+  CloseCircleFilled,
+  LoadingOutlined
+} from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button, Form, Tooltip } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+import { FormData, ProviderModel } from '../config/types';
+import { useTestProviderModel } from '../hooks/use-query-provider-models';
+
+const SelectWrapper = styled.div`
+  width: 100%;
+  display: grid;
+  grid-template-columns: 265px 160px max-content;
+  align-items: center;
+  gap: 8px;
+  .icon-wrapper {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+`;
+
+interface ModelItemProps {
+  onOpenChange: (open: boolean) => void;
+  onChange: (data: ProviderModel) => void;
+  providerModelList: ProviderModel[];
+  item: ProviderModel;
+  loading?: boolean;
+}
+
+const ModelItem: React.FC<ModelItemProps> = ({
+  onOpenChange,
+  onChange,
+  loading,
+  providerModelList,
+  item
+}) => {
+  const intl = useIntl();
+  const form = Form.useFormInstance<FormData>();
+  const { runTestModel, loading: testLoading } = useTestProviderModel();
+
+  const handleTestModel = async () => {
+    const res = await runTestModel({
+      data: {
+        model_name: item.name,
+        api_token: form.getFieldValue('api_tokens')?.[0] || '',
+        config: {
+          type: form.getFieldValue(['config', 'type']) || ''
+        }
+      }
+    });
+    onChange({
+      ...item,
+      accessible: res.accessible
+    });
+  };
+
+  const handleOnChange = (value: string) => {
+    onChange({
+      ...item,
+      accessible: null,
+      name: value
+    });
+  };
+
+  const handleOnCategoryChange = (value: string) => {
+    onChange({
+      ...item,
+      category: value
+    });
+  };
+
+  const renderSuffixIcon = () => {
+    if (testLoading) {
+      return <LoadingOutlined />;
+    }
+    if (item.accessible === true) {
+      return (
+        <CheckCircleFilled
+          style={{ color: 'var(--ant-color-success)', fontSize: 16 }}
+        />
+      );
+    }
+    if (item.accessible === false) {
+      return (
+        <CloseCircleFilled
+          style={{ color: 'var(--ant-color-error)', fontSize: 16 }}
+        />
+      );
+    }
+    return null;
+  };
+
+  return (
+    <SelectWrapper>
+      <SealSelect
+        loading={loading}
+        showSearch
+        onOpenChange={onOpenChange}
+        suffixIcon={renderSuffixIcon()}
+        alwaysFocus={true}
+        value={item.name}
+        onChange={handleOnChange}
+        options={providerModelList}
+      />
+      <SealSelect
+        value={item.category}
+        onChange={handleOnCategoryChange}
+        options={categoryOptions}
+        placeholder={intl.formatMessage({
+          id: 'models.form.categories'
+        })}
+      ></SealSelect>
+      <Tooltip
+        title={intl.formatMessage({ id: 'providers.form.model.test.tips' })}
+      >
+        <Button type="link" size="small" onClick={handleTestModel}>
+          {testLoading ? (
+            <LoadingOutlined />
+          ) : (
+            intl.formatMessage({ id: 'providers.form.model.test' })
+          )}
+        </Button>
+      </Tooltip>
+    </SelectWrapper>
+  );
+};
+
+export default ModelItem;