From 9b6d07dc4c4a831313ba209cdb32dedb72e42705 Mon Sep 17 00:00:00 2001 From: scarqin Date: Tue, 31 Dec 2024 15:07:43 +0800 Subject: [PATCH] feat: apikey --- .../core/src/pages/aiSetting/AIFlowChart.tsx | 53 ++++++++++++------- .../src/pages/aiSetting/AIUnconfigure.tsx | 5 +- .../src/pages/aiSetting/AiSettingList.tsx | 15 ++++++ .../src/pages/aiSetting/AiSettingModal.tsx | 6 +-- .../aiSetting/components/ModelCardNode.tsx | 2 +- .../aiSetting/contexts/AiSettingContext.tsx | 4 +- .../core/src/pages/aiSetting/types.ts | 13 ++--- 7 files changed, 61 insertions(+), 37 deletions(-) diff --git a/frontend/packages/core/src/pages/aiSetting/AIFlowChart.tsx b/frontend/packages/core/src/pages/aiSetting/AIFlowChart.tsx index a2799f5d..9f7173bf 100644 --- a/frontend/packages/core/src/pages/aiSetting/AIFlowChart.tsx +++ b/frontend/packages/core/src/pages/aiSetting/AIFlowChart.tsx @@ -15,7 +15,9 @@ import { useNodesState } from '@xyflow/react' import '@xyflow/react/dist/style.css' +import { Button, Space } from 'antd' import { useCallback, useEffect, useState } from 'react' +import { useNavigate } from 'react-router-dom' import CustomEdge from './components/CustomEdge' import { KeyStatusNode } from './components/KeyStatusNode' import { ModelCardNode } from './components/ModelCardNode' @@ -68,11 +70,13 @@ const AIFlowChart = () => { const [edges, setEdges, onEdgesChange] = useEdgesState([]) const { fetchData } = useFetch() const { aiConfigFlushed } = useGlobalContext() + const navigate = useNavigate() useEffect(() => { fetchData('ai/providers/configured', { method: 'GET', eoTransformKeys: ['default_llm'] + // eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/' }).then((response) => { const mockApiResponse: ApiResponse = response as ApiResponse setModelData(mockApiResponse.data.providers) @@ -207,26 +211,35 @@ const AIFlowChart = () => { return (
- + {modelData.length === 0 ? ( + +
No AI model configured
+ + + ) : ( + + )}
) } diff --git a/frontend/packages/core/src/pages/aiSetting/AIUnconfigure.tsx b/frontend/packages/core/src/pages/aiSetting/AIUnconfigure.tsx index f8d8e61d..ba1ae334 100644 --- a/frontend/packages/core/src/pages/aiSetting/AIUnconfigure.tsx +++ b/frontend/packages/core/src/pages/aiSetting/AIUnconfigure.tsx @@ -6,16 +6,17 @@ import { useFetch } from '@common/hooks/http' import { $t } from '@common/locales' import { App, Button, Card, Empty, Spin, Tag } from 'antd' import { memo, useEffect, useState } from 'react' +import { useNavigate } from 'react-router-dom' import { useAiSetting } from './contexts/AiSettingContext' import { AiSettingListItem } from './types' const CardBox = memo(({ provider }: { provider: AiSettingListItem }) => { const { openConfigModal } = useAiSetting() - const { aiConfigFlushed, setAiConfigFlushed } = useGlobalContext() + const navigate = useNavigate() const handleOpenModal = async (provider: AiSettingListItem) => { await openConfigModal(provider) - setAiConfigFlushed(!aiConfigFlushed) + navigate('/aisetting?status=configure') } return ( diff --git a/frontend/packages/core/src/pages/aiSetting/AiSettingList.tsx b/frontend/packages/core/src/pages/aiSetting/AiSettingList.tsx index 353f5bf5..30694d5a 100644 --- a/frontend/packages/core/src/pages/aiSetting/AiSettingList.tsx +++ b/frontend/packages/core/src/pages/aiSetting/AiSettingList.tsx @@ -1,6 +1,8 @@ import InsidePage from '@common/components/aoplatform/InsidePage' import { $t } from '@common/locales' import { Tabs } from 'antd' +import { useEffect, useState } from 'react' +import { useSearchParams } from 'react-router-dom' import AIFlowChart from './AIFlowChart' import AIUnConfigure from './AIUnconfigure' import { AiSettingProvider } from './contexts/AiSettingContext' @@ -8,6 +10,14 @@ import { AiSettingProvider } from './contexts/AiSettingContext' const CONTENT_STYLE = { height: 'calc(-300px + 100vh)' } as const const AiSettingContent = () => { + const [searchParams, setSearchParams] = useSearchParams() + const [activeKey, setActiveKey] = useState(searchParams.get('status') === 'unconfigure' ? 'config' : 'flow') + + useEffect(() => { + const newActiveKey = searchParams.get('status') === 'unconfigure' ? 'config' : 'flow' + setActiveKey(newActiveKey) + }, [searchParams]) + return ( { >
{ + setActiveKey(key) + setSearchParams({ status: key === 'config' ? 'unconfigure' : 'configure' }) + }} className="sticky top-0 flex-shrink-0" items={[ { diff --git a/frontend/packages/core/src/pages/aiSetting/AiSettingModal.tsx b/frontend/packages/core/src/pages/aiSetting/AiSettingModal.tsx index fca85750..9527d009 100644 --- a/frontend/packages/core/src/pages/aiSetting/AiSettingModal.tsx +++ b/frontend/packages/core/src/pages/aiSetting/AiSettingModal.tsx @@ -5,10 +5,10 @@ import { useFetch } from '@common/hooks/http' import { $t } from '@common/locales' import { App, Form, InputNumber, Select, Switch, Tag, Tooltip } from 'antd' import { forwardRef, useEffect, useImperativeHandle, useState } from 'react' -import { AiProviderConfig, AiProviderLlmsItems, ModelDetailData } from './types' +import { AiProviderLlmsItems, ModelDetailData } from './types' export type AiSettingModalContentProps = { - entity: AiProviderConfig & { defaultLlm: string } + entity: ModelDetailData & { defaultLlm: string } readOnly: boolean } @@ -173,7 +173,7 @@ const AiSettingModalContent = forwardRef - {entity.id && ( + {entity.configured && (
diff --git a/frontend/packages/core/src/pages/aiSetting/components/ModelCardNode.tsx b/frontend/packages/core/src/pages/aiSetting/components/ModelCardNode.tsx index bbabc26d..99efbe2b 100644 --- a/frontend/packages/core/src/pages/aiSetting/components/ModelCardNode.tsx +++ b/frontend/packages/core/src/pages/aiSetting/components/ModelCardNode.tsx @@ -44,7 +44,7 @@ export const ModelCardNode: React.FC<{ data: ModelCardNodeData }> = ({ data }) = >
{name} - +
{/* Action buttons */} diff --git a/frontend/packages/core/src/pages/aiSetting/contexts/AiSettingContext.tsx b/frontend/packages/core/src/pages/aiSetting/contexts/AiSettingContext.tsx index 502c3bf3..f8e078bd 100644 --- a/frontend/packages/core/src/pages/aiSetting/contexts/AiSettingContext.tsx +++ b/frontend/packages/core/src/pages/aiSetting/contexts/AiSettingContext.tsx @@ -7,7 +7,7 @@ import { checkAccess } from '@common/utils/permission' import { App } from 'antd' import { createContext, useContext, useRef } from 'react' import AiSettingModalContent, { AiSettingModalContentHandle } from '../AiSettingModal' -import { AiProviderConfig, AiSettingListItem } from '../types' +import { AiSettingListItem, ModelDetailData } from '../types' interface AiSettingContextType { openConfigModal: (entity: AiSettingListItem) => Promise @@ -23,7 +23,7 @@ export const AiSettingProvider: React.FC<{ children: React.ReactNode }> = ({ chi const openConfigModal = async (entity: AiSettingListItem) => { message.loading($t(RESPONSE_TIPS.loading)) - const { code, data, msg } = await fetchData>('ai/provider/config', { + const { code, data, msg } = await fetchData>('ai/provider/config', { method: 'GET', eoParams: { provider: entity!.id }, eoTransformKeys: ['get_apikey_url'] diff --git a/frontend/packages/core/src/pages/aiSetting/types.ts b/frontend/packages/core/src/pages/aiSetting/types.ts index 814346c9..6ba2ea7a 100644 --- a/frontend/packages/core/src/pages/aiSetting/types.ts +++ b/frontend/packages/core/src/pages/aiSetting/types.ts @@ -21,6 +21,9 @@ export interface ModelDetailData extends ModelListData{ enable:boolean config: string, priority?: number + getApikeyUrl: string + status: ModelStatus + configured: boolean } @@ -51,12 +54,4 @@ export type AiProviderDefaultConfig = { scopes: string[] } -export interface AiProviderConfig { - id: string - name: string - config: string - getApikeyUrl: string - priority: number - enable: boolean - status: ModelStatus -} +