@lobehub/chat 1.47.17 → 1.47.18

package/src/app/(main)/settings/provider/(detail)/wenxin/page.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { Input } from 'antd';
 import { useTranslation } from 'react-i18next';
 
+import { FormPassword } from '@/components/FormInput';
 import { WenxinProviderCard } from '@/config/modelProviders';
 import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
@@ -26,7 +26,7 @@ const useProviderCard = (): ProviderItem => {
         children: isLoading ? (
           <SkeletonInput />
         ) : (
-          <Input.Password
+          <FormPassword
             autoComplete={'new-password'}
             placeholder={t(`${providerKey}.accessKey.placeholder`)}
           />
@@ -39,7 +39,7 @@ const useProviderCard = (): ProviderItem => {
         children: isLoading ? (
           <SkeletonInput />
         ) : (
-          <Input.Password
+          <FormPassword
             autoComplete={'new-password'}
             placeholder={t(`${providerKey}.secretKey.placeholder`)}
           />

package/src/app/(main)/settings/provider/features/ProviderConfig/index.tsx

@@ -3,7 +3,7 @@
 import { ProviderCombine } from '@lobehub/icons';
 import { Avatar, Form, type FormItemProps, Icon, type ItemGroup, Tooltip } from '@lobehub/ui';
 import { useDebounceFn } from 'ahooks';
-import { Input, Skeleton, Switch } from 'antd';
+import { Skeleton, Switch } from 'antd';
 import { createStyles } from 'antd-style';
 import { Loader2Icon, LockIcon } from 'lucide-react';
 import Link from 'next/link';
@@ -11,7 +11,9 @@ import { ReactNode, memo, useLayoutEffect } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
+import { z } from 'zod';
 
+import { FormInput, FormPassword } from '@/components/FormInput';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { AES_GCM_URL, BASE_PROVIDER_DOC_URL } from '@/const/url';
 import { isServerMode } from '@/const/version';
@@ -24,8 +26,8 @@ import {
 
 import { KeyVaultsConfigKey, LLMProviderApiTokenKey, LLMProviderBaseUrlKey } from '../../const';
 import Checker from './Checker';
-import { SkeletonInput } from './SkeletonInput';
 import EnableSwitch from './EnableSwitch';
+import { SkeletonInput } from './SkeletonInput';
 import UpdateProviderInfo from './UpdateProviderInfo';
 
 const useStyles = createStyles(({ css, prefixCls, responsive, token }) => ({
@@ -170,7 +172,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
             children: isLoading ? (
               <SkeletonInput />
             ) : (
-              <Input.Password
+              <FormPassword
                 autoComplete={'new-password'}
                 placeholder={t(`providerModels.config.apiKey.placeholder`, { name })}
                 suffix={
@@ -210,7 +212,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
           children: isLoading ? (
             <SkeletonInput />
           ) : (
-            <Input
+            <FormInput
               allowClear
               placeholder={
                 (!!proxyUrl && proxyUrl?.placeholder) ||
@@ -226,6 +228,17 @@ const ProviderConfig = memo<ProviderConfigProps>(
           desc: (!!proxyUrl && proxyUrl?.desc) || t('providerModels.config.baseURL.desc'),
           label: (!!proxyUrl && proxyUrl?.title) || t('providerModels.config.baseURL.title'),
           name: [KeyVaultsConfigKey, LLMProviderBaseUrlKey],
+          rules: [
+            {
+              validator: (_: any, value: string) => {
+                if (!value) return;
+
+                return z.string().url().safeParse(value).error
+                  ? Promise.reject(t('providerModels.config.baseURL.invalid'))
+                  : Promise.resolve();
+              },
+            },
+          ],
         }
       : undefined;
 

package/src/components/FormInput/FormInput.tsx

@@ -0,0 +1,42 @@
+import { Input } from 'antd';
+import { InputRef, InputProps as Props } from 'antd/es/input/Input';
+import { memo, useRef, useState } from 'react';
+
+interface FormInputProps extends Omit<Props, 'onChange'> {
+  onChange?: (value: string) => void;
+}
+
+const FormInput = memo<FormInputProps>(({ onChange, value: defaultValue, ...props }) => {
+  const ref = useRef<InputRef>(null);
+  const isChineseInput = useRef(false);
+
+  const [value, setValue] = useState(defaultValue as string);
+
+  return (
+    <Input
+      onBlur={() => {
+        onChange?.(value);
+      }}
+      onChange={(e) => {
+        setValue(e.target.value);
+      }}
+      onCompositionEnd={() => {
+        isChineseInput.current = false;
+      }}
+      onCompositionStart={() => {
+        isChineseInput.current = true;
+      }}
+      onPressEnter={() => {
+        if (isChineseInput.current) return;
+        onChange?.(value);
+      }}
+      ref={ref}
+      {...props}
+      value={value}
+    />
+  );
+});
+
+FormInput.displayName = 'FormInput';
+
+export default FormInput;

package/src/components/FormInput/FormPassword.tsx

@@ -0,0 +1,42 @@
+import { Input } from 'antd';
+import { InputRef, InputProps as Props } from 'antd/es/input/Input';
+import { memo, useRef, useState } from 'react';
+
+interface FormPasswordProps extends Omit<Props, 'onChange'> {
+  onChange?: (value: string) => void;
+}
+
+const FormPassword = memo<FormPasswordProps>(({ onChange, value: defaultValue, ...props }) => {
+  const ref = useRef<InputRef>(null);
+  const isChineseInput = useRef(false);
+
+  const [value, setValue] = useState(defaultValue as string);
+
+  return (
+    <Input.Password
+      onBlur={() => {
+        onChange?.(value);
+      }}
+      onChange={(e) => {
+        setValue(e.target.value);
+      }}
+      onCompositionEnd={() => {
+        isChineseInput.current = false;
+      }}
+      onCompositionStart={() => {
+        isChineseInput.current = true;
+      }}
+      onPressEnter={() => {
+        if (isChineseInput.current) return;
+        onChange?.(value);
+      }}
+      ref={ref}
+      {...props}
+      value={value}
+    />
+  );
+});
+
+FormPassword.displayName = 'FormPassword';
+
+export default FormPassword;

package/src/components/FormInput/index.ts

@@ -0,0 +1,2 @@
+export { default as FormInput } from './FormInput';
+export { default as FormPassword } from './FormPassword';

package/src/config/modelProviders/deepseek.ts

@@ -43,6 +43,9 @@ const DeepSeek: ModelProviderCard = {
   modelsUrl: 'https://platform.deepseek.com/api-docs/zh-cn/quick_start/pricing',
   name: 'DeepSeek',
   settings: {
+    proxyUrl: {
+      placeholder: 'https://api.deepseek.com',
+    },
     sdkType: 'openai',
     showModelFetcher: true,
   },

package/src/locales/default/modelProvider.ts

@@ -201,6 +201,7 @@ export default {
       },
       baseURL: {
         desc: '必须包含 http(s)://',
+        invalid: '请输入合法的 URL',
         placeholder: 'https://your-proxy-url.com/v1',
         title: 'API 代理地址',
       },