feat: change component place

frontend/packages/common/src/types/iconpark.d.ts

@@ -0,0 +1,10 @@
+declare namespace JSX {
+  interface IntrinsicElements {
+    'iconpark-icon': {
+      name?: string;
+      size?: string | number;
+      color?: string;
+      [key: string]: any;
+    }
+  }
+}

frontend/packages/core/src/pages/aiSetting/AiSettingList.tsx

@@ -9,6 +9,7 @@ import { checkAccess } from '@common/utils/permission'
 import { Icon } from '@iconify/react/dist/iconify.js'
 import { App, Button, Card, Divider, Empty, Spin, Tag } from 'antd'
 import { memo, useEffect, useRef, useState } from 'react'
+import AIFlowChart from './AIFlowChart'
 import AiSettingModalContent, { AiSettingModalContentHandle } from './AiSettingModal'
 
 export type AiSettingListItem = {
@@ -54,10 +55,11 @@ const AiSettingList = () => {
 
   const getAiSettingList = () => {
     setLoading(true)
-    return fetchData<
-      BasicResponse<{ providers: Omit<AiSettingListItem, 'availableLlms' | 'llmListStatus'>[] }>
-    >(`ai/providers`, { method: 'GET', eoTransformKeys: ['default_llm', 'default_llm_logo'] })
-      .then(response => {
+    return fetchData<BasicResponse<{ providers: Omit<AiSettingListItem, 'availableLlms' | 'llmListStatus'>[] }>>(
+      `ai/providers`,
+      { method: 'GET', eoTransformKeys: ['default_llm', 'default_llm_logo'] }
+    )
+      .then((response) => {
         const { code, data, msg } = response
         if (code === STATUS_CODE.SUCCESS) {
           setAiSettingList(
@@ -90,10 +92,11 @@ const AiSettingList = () => {
 
   const openModal = async (entity: AiSettingListItem) => {
     message.loading($t(RESPONSE_TIPS.loading))
-    const { code, data, msg } = await fetchData<BasicResponse<{ provider: AiProviderConfig }>>(
-      'ai/provider/config',
-      { method: 'GET', eoParams: { provider: entity!.id }, eoTransformKeys: ['get_apikey_url'] }
-    )
+    const { code, data, msg } = await fetchData<BasicResponse<{ provider: AiProviderConfig }>>('ai/provider/config', {
+      method: 'GET',
+      eoParams: { provider: entity!.id },
+      eoTransformKeys: ['get_apikey_url']
+    })
     message.destroy()
     if (code !== STATUS_CODE.SUCCESS) {
       message.error(msg || $t(RESPONSE_TIPS.error))
@@ -109,7 +112,7 @@ const AiSettingList = () => {
         />
       ),
       onOk: () => {
-        return modalRef.current?.save().then(res => {
+        return modalRef.current?.save().then((res) => {
           if (res === true) setAiConfigFlushed(true)
           getAiSettingList()
         })
@@ -193,13 +196,7 @@ const AiSettingList = () => {
     )
   })
 
-  const ModelCardArea = ({
-    modelList,
-    className
-  }: {
-    modelList: AiSettingListItem[]
-    className?: string
-  }) => {
+  const ModelCardArea = ({ modelList, className }: { modelList: AiSettingListItem[]; className?: string }) => {
     return (
       <>
         {modelList.length > 0 ? (
@@ -230,20 +227,8 @@ const AiSettingList = () => {
         description={$t('配置好 AI 模型后，你可以使用对应的大模型来创建 AI 服务')}
         showBorder={false}
         scrollPage={false}
-        // customBtn={
-        // <WithPermission access="system.devops.ai_provider.edit">
-        // <Button
-        //     icon={<Icon icon="ic:baseline-refresh" width={20} height={20} />}
-        //     type="text"
-        //     iconPosition={'start'}
-        //     classNames={{icon:'h-[20px]'}}
-        //     loading={updateLoading}
-        //     onClick={updateModalList}>
-        //     {$t('同步最新模型')}
-        // </Button>
-        // </WithPermission>
-        // }
       >
+        <AIFlowChart />
         <Spin
           className="h-full"
           wrapperClassName="h-full pr-PAGE_INSIDE_X"
@@ -252,18 +237,11 @@ const AiSettingList = () => {
         >
           {aiSettingList && aiSettingList.length > 0 ? (
             <div>
-              <p className="text-[14px] text-[#666] mb-[4px] font-bold">{$t('已配置')}</p>
-              <ModelCardArea
-                className="mb-[20px]"
-                modelList={aiSettingList.filter(item => item.configured) || []}
-              />
-              {aiSettingList.filter(item => !item.configured).length > 0 && (
+              {aiSettingList.filter((item) => !item.configured).length > 0 && (
                 <>
                   <Divider style={{ margin: '20px 0 !important;' }} />
-                  <p className="text-[14px] text-[#666]  mb-[4px] mt-[20px]  font-bold">
-                    {$t('未配置')}
-                  </p>
-                  <ModelCardArea modelList={aiSettingList.filter(item => !item.configured) || []} />
+                  <p className="text-[14px] text-[#666]  mb-[4px] mt-[20px]  font-bold">{$t('未配置')}</p>
+                  <ModelCardArea modelList={aiSettingList.filter((item) => !item.configured) || []} />
                 </>
               )}
             </div>

frontend/packages/core/src/pages/aiSetting/components/KeyStatusNode.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { KeyData } from './types'
 
 interface KeyStatusNodeData {
+  id: string
   title: string
   keys: KeyData[]
 }
@@ -40,7 +41,7 @@ export const KeyStatusNode: React.FC<{ data: KeyStatusNodeData }> = ({ data }) =
               }}
               className={`
                   rounded-md flex-shrink-0
-                  ${key.status === 'normal' ? 'bg-green-500' : 'bg-red-500'}
+                  ${key.status === 'enabled' || key.status === 'normal' ? 'bg-green-500' : 'bg-red-500'}
                   transition-all duration-200 hover:opacity-80
                 `}
             />

frontend/packages/core/src/pages/aiSetting/components/ModelCardNode.tsx

@@ -1,6 +1,7 @@
 import { Icon } from '@iconify/react'
 import { Handle, Position } from '@xyflow/react'
 import { Avatar } from 'antd'
+import { t } from 'i18next'
 import React from 'react'
 import { ModelStatus } from './types'
 
@@ -18,7 +19,6 @@ type ModelCardNodeData = ModelCardData & {
 
 export const ModelCardNode: React.FC<{ data: ModelCardNodeData }> = ({ data }) => {
   const { title, status, defaultModel, logo } = data
-
   return (
     <div
       className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[280px] relative group"
@@ -32,7 +32,7 @@ export const ModelCardNode: React.FC<{ data: ModelCardNodeData }> = ({ data }) =
             <Avatar
               shape="square"
               size={50}
-              className={`rounded-[12px] border-none rounded-[12px] ${logo ? 'bg-[linear-gradient(135deg,white,#f0f0f0)]' : 'bg-theme'}`}
+              className={`rounded-[12px] border-none  ${logo ? 'bg-[linear-gradient(135deg,white,#f0f0f0)]' : 'bg-theme'}`}
               src={
                 logo ? (
                   <img
@@ -42,6 +42,7 @@ export const ModelCardNode: React.FC<{ data: ModelCardNodeData }> = ({ data }) =
                   />
                 ) : undefined
               }
+              // TODO use https://www.npmjs.com/package/@icon-park/react
               icon={logo ? '' : <iconpark-icon name="auto-generate-api"></iconpark-icon>}
             >
               {' '}
@@ -58,11 +59,14 @@ export const ModelCardNode: React.FC<{ data: ModelCardNodeData }> = ({ data }) =
             <Icon
               icon="mdi:cog"
               className="text-xl text-gray-400 cursor-pointer hover:text-[--primary-color]"
-              onClick={() => console.log('Settings', data.id)}
+              onClick={() => console.log('Default:', data.id)}
             />
           </div>
         </div>
-        <div className="mt-2 text-sm text-gray-500">{defaultModel}</div>
+        <div className="mt-2 text-sm text-gray-500">
+          {t('默认：')}
+          {defaultModel}
+        </div>
       </div>
     </div>
   )

frontend/packages/core/tsconfig.json

@@ -1,4 +1,3 @@
-
 {
   "compilerOptions": {
     "target": "ES2020",
@@ -6,6 +5,7 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "typeRoots": ["./node_modules/@types", "../common/src/types"],
 
     /* Bundler mode */
     "moduleResolution": "bundler",