From 0184bc76d0ba18b7893063cbadeaf3f1dab6d625 Mon Sep 17 00:00:00 2001 From: arvinxx Date: Thu, 13 Feb 2025 23:07:59 +0800 Subject: [PATCH 1/2] fix api key input issue --- .../Error/APIKeyForm/LoadingContext.ts | 11 +++ .../Error/APIKeyForm/ProviderApiKeyForm.tsx | 25 ++++--- .../Conversation/Error/APIKeyForm/index.tsx | 71 ++++++++++--------- .../Error/APIKeyForm/useApiKey.ts | 14 ++-- 4 files changed, 72 insertions(+), 49 deletions(-) create mode 100644 src/features/Conversation/Error/APIKeyForm/LoadingContext.ts diff --git a/src/features/Conversation/Error/APIKeyForm/LoadingContext.ts b/src/features/Conversation/Error/APIKeyForm/LoadingContext.ts new file mode 100644 index 0000000000000..43fbff5eb8e05 --- /dev/null +++ b/src/features/Conversation/Error/APIKeyForm/LoadingContext.ts @@ -0,0 +1,11 @@ +import { createContext } from 'react'; + +interface LoadingContextValue { + loading: boolean; + setLoading: (loading: boolean) => void; +} + +export const LoadingContext = createContext({ + loading: false, + setLoading: () => {}, +}); diff --git a/src/features/Conversation/Error/APIKeyForm/ProviderApiKeyForm.tsx b/src/features/Conversation/Error/APIKeyForm/ProviderApiKeyForm.tsx index ad38774fc10d0..7acf971d7276d 100644 --- a/src/features/Conversation/Error/APIKeyForm/ProviderApiKeyForm.tsx +++ b/src/features/Conversation/Error/APIKeyForm/ProviderApiKeyForm.tsx @@ -1,9 +1,11 @@ import { Icon } from '@lobehub/ui'; -import { Button, Input } from 'antd'; -import { Network } from 'lucide-react'; -import { ReactNode, memo, useState } from 'react'; +import { Button } from 'antd'; +import { Loader2Icon, Network } from 'lucide-react'; +import { ReactNode, memo, useContext, useState } from 'react'; import { useTranslation } from 'react-i18next'; +import { FormInput, FormPassword } from '@/components/FormInput'; +import { LoadingContext } from '@/features/Conversation/Error/APIKeyForm/LoadingContext'; import { useProviderName } from '@/hooks/useProviderName'; import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig'; import { GlobalLLMProviderKey } from '@/types/user/settings'; @@ -27,6 +29,7 @@ const ProviderApiKeyForm = memo( const { apiKey, baseURL, setConfig } = useApiKey(provider); const { showOpenAIProxyUrl } = useServerConfigStore(featureFlagsSelectors); const providerName = useProviderName(provider); + const { loading } = useContext(LoadingContext); return ( ( description={t(`unlock.apiKey.description`, { name: providerName, ns: 'error' })} title={t(`unlock.apiKey.title`, { name: providerName, ns: 'error' })} > - { - setConfig(provider, { apiKey: e.target.value }); + onChange={(value) => { + setConfig(provider, { apiKey: value }); }} placeholder={apiKeyPlaceholder || 'sk-***********************'} - type={'block'} + suffix={
{loading && }
} value={apiKey} /> {showEndpoint && showOpenAIProxyUrl && (showProxy ? ( - { - setConfig(provider, { baseURL: e.target.value }); + { + setConfig(provider, { baseURL: value }); }} placeholder={'https://api.openai.com/v1'} - type={'block'} + suffix={
{loading && }
} value={baseURL} /> ) : ( diff --git a/src/features/Conversation/Error/APIKeyForm/index.tsx b/src/features/Conversation/Error/APIKeyForm/index.tsx index 703b079948f35..40c3caac8cc68 100644 --- a/src/features/Conversation/Error/APIKeyForm/index.tsx +++ b/src/features/Conversation/Error/APIKeyForm/index.tsx @@ -1,6 +1,6 @@ import { ProviderIcon } from '@lobehub/icons'; import { Button } from 'antd'; -import { memo, useMemo } from 'react'; +import { memo, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Center, Flexbox } from 'react-layout-kit'; @@ -9,6 +9,7 @@ import { useChatStore } from '@/store/chat'; import { GlobalLLMProviderKey } from '@/types/user/settings'; import BedrockForm from './Bedrock'; +import { LoadingContext } from './LoadingContext'; import ProviderApiKeyForm from './ProviderApiKeyForm'; interface APIKeyFormProps { @@ -18,6 +19,7 @@ interface APIKeyFormProps { const APIKeyForm = memo(({ id, provider }) => { const { t } = useTranslation('error'); + const [loading, setLoading] = useState(false); const [resend, deleteMessage] = useChatStore((s) => [s.regenerateMessage, s.deleteMessage]); @@ -62,38 +64,41 @@ const APIKeyForm = memo(({ id, provider }) => { }, [provider]); return ( -
- {provider === ModelProvider.Bedrock ? ( - - ) : ( - } - provider={provider as GlobalLLMProviderKey} - showEndpoint={provider === ModelProvider.OpenAI} - /> - )} - - - - -
+ +
+ {provider === ModelProvider.Bedrock ? ( + + ) : ( + } + provider={provider as GlobalLLMProviderKey} + showEndpoint={provider === ModelProvider.OpenAI} + /> + )} + + + + +
+ ); }); diff --git a/src/features/Conversation/Error/APIKeyForm/useApiKey.ts b/src/features/Conversation/Error/APIKeyForm/useApiKey.ts index 8e252136b8007..de20c8829b997 100644 --- a/src/features/Conversation/Error/APIKeyForm/useApiKey.ts +++ b/src/features/Conversation/Error/APIKeyForm/useApiKey.ts @@ -1,6 +1,8 @@ import isEqual from 'fast-deep-equal'; +import { useContext } from 'react'; import { isDeprecatedEdition } from '@/const/version'; +import { LoadingContext } from '@/features/Conversation/Error/APIKeyForm/LoadingContext'; import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra'; import { useUserStore } from '@/store/user'; import { keyVaultsConfigSelectors } from '@/store/user/selectors'; @@ -11,7 +13,7 @@ export const useApiKey = (provider: string) => { keyVaultsConfigSelectors.getVaultByProvider(provider as any)(s)?.baseURL, s.updateKeyVaultConfig, ]); - + const { setLoading } = useContext(LoadingContext); const updateAiProviderConfig = useAiInfraStore((s) => s.updateAiProviderConfig); const data = useAiInfraStore(aiProviderSelectors.providerConfigById(provider), isEqual); @@ -23,12 +25,14 @@ export const useApiKey = (provider: string) => { apiKey: data?.keyVaults.apiKey, baseURL: data?.keyVaults?.baseURL, setConfig: async (id: string, params: Record) => { + const next = { ...data?.keyVaults, ...params }; + if (isEqual(data?.keyVaults, next)) return; + + setLoading(true); await updateAiProviderConfig(id, { - keyVaults: { - ...data?.keyVaults, - ...params, - }, + keyVaults: { ...data?.keyVaults, ...params }, }); + setLoading(false); }, }; }; From ca5791f07b3d7383645648457c7f84bdbde58ab0 Mon Sep 17 00:00:00 2001 From: arvinxx Date: Thu, 13 Feb 2025 23:23:39 +0800 Subject: [PATCH 2/2] try to fix clerk auth --- .../[variants]/(main)/settings/provider/(detail)/[id]/page.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/app/[variants]/(main)/settings/provider/(detail)/[id]/page.tsx b/src/app/[variants]/(main)/settings/provider/(detail)/[id]/page.tsx index 980ed2a430c89..6b64d0070e26c 100644 --- a/src/app/[variants]/(main)/settings/provider/(detail)/[id]/page.tsx +++ b/src/app/[variants]/(main)/settings/provider/(detail)/[id]/page.tsx @@ -45,5 +45,3 @@ const Page = async (props: PagePropsWithId) => { }; export default Page; - -export const dynamic = 'auto';