Merge branch 'feat/agents-center' into dev

web/app/(commonLayout)/agent/center/Apps.tsx

@@ -67,7 +67,6 @@ const Apps = () => {
   const getDifys = () => {
     getDifyList({ name: searchKeywords, agentTypeId: activeTab, page: difysCurrPage + 1, pageSize: APP_PAGE_LIMIT }).then((res) => {
       setDifys(res.data)
-      console.log(res.data)
       setDifysTotal(res.totalCount)
     })
   }
@@ -145,26 +144,29 @@ const Apps = () => {
                   setShowDrag(true)
                 }}>排序</Button>
               </div>
-              <nav className=' content-start  grow p-10 pt-0'>
+              <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0'>
                 {
                   difys.map((app: any, index) => {
                     return (<div key={index}
                       className="flex bg-white p-8 radius-2xl  shadow-sm mt-4 transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg">
-                      <img className="mr-8 h-4/5"
+                      <img className="mr-8 h-12 rounded-2xl w-12 "
                         src={app.imageUrl}
                         alt=""/>
                       <div>
-                        <h3>{app.name}</h3>
-                        <div>{app.description}</div>
-                        <div>
-                          开发者：{app.author}
+                        <h3 className="font-bold">{app.name}</h3>
+                        <div className="mt-3 text-sm">{app.description}</div>
+                        <div className ="mt-5 text-sm flex justify-end">
+                          {app.author}
                         </div>
                       </div>
                     </div>)
                   })
                 }
-                {
-                  difysTotal > 0 && <Pagination
+                <CheckModal/>
+              </nav>
+              {
+                difysTotal > 0 && <div className="p-20 pb-0 pt-0">
+                  <Pagination
                     className="flex items-center w-full h-10 text-sm select-none mt-8"
                     currentPage={difysCurrPage}
                     edgePageCount={2}
@@ -194,9 +196,8 @@ const Apps = () => {
                       <ArrowRightIcon className="ml-3 h-3 w-3" />
                     </Pagination.NextButton>
                   </Pagination>
-                }
-                <CheckModal/>
-              </nav>
+                </div>
+              }
             </div>
           )
           : (<div className=' overflow-auto content-start  grow p-10 pt-2'>

web/app/(commonLayout)/agent/center/DraggableList.tsx

@@ -9,6 +9,8 @@ type Item = {
   appId: number
   name: string
   agentSort: number
+  description: string
+  imageUrl: string
 }
 
 export type DuplicateAppModalProps = {
@@ -86,13 +88,21 @@ const DragDropSort: React.FC<DuplicateAppModalProps> = ({ show = false, onHide,
           <div
             key={item.appId}
             draggable
-            className="bg-amber-100 rounded-14 shadow-2xl mb-2 p-2 flex pl-5 pr-5 mt-2 justify-between"
+            className=" rounded-14 shadow-2xl mb-2 p-2  pl-5 pr-5 flex mt-2 justify-between align-center items-center"
             onDragStart={e => handleDragStart(e, index)}
             onDragOver={() => handleDragOver(index)}
             onDragEnd={handleDragEnd}
           >
-            <div>{item.name}</div>
-            <div>{item.agentSort}</div>
+            <div className="flex justify-between items-center">
+              <img src={item.imageUrl} className="w-10 h-10 mr-4 rounded-b-sm" alt=""/>
+              <div>
+                <div>{item.name}</div>
+                <div className="text-sm mt-2 caret-amber-950">{item.description}</div>
+              </div>
+            </div>
+            <div className="accent-blue-300 text-sm" style={{ color: 'blue' }}>
+              拖拽排序
+            </div>
           </div>
         ))}
       </div>

web/app/(commonLayout)/agent/center/DraggableTypeList.tsx

@@ -9,6 +9,7 @@ type Item = {
   id: number
   name: string
   sort: number
+  description: string
 }
 
 export type DuplicateAppModalProps = {
@@ -84,13 +85,20 @@ const DragDropSortType: React.FC<DuplicateAppModalProps> = ({ show = false, onHi
           <div
             key={item.id}
             draggable
-            className="bg-amber-100 rounded-14 shadow-2xl mb-2 p-2 flex pl-5 pr-5 mt-2 justify-between"
+            className="rounded-14 shadow-2xl mb-2 p-2 flex pl-5 pr-5 mt-2 justify-between items-center"
             onDragStart={e => handleDragStart(e, index)}
             onDragOver={() => handleDragOver(index)}
             onDragEnd={handleDragEnd}
           >
-            <div>{item.name}</div>
-            <div>{item.sort}</div>
+            <div className="flex justify-between items-center">
+              <div>
+                <div>{item.name}</div>
+                <div className="text-sm mt-2 caret-amber-950">{item.description}</div>
+              </div>
+            </div>
+            <div className="accent-blue-300 text-sm" style={{ color: 'blue' }}>
+              拖拽排序
+            </div>
           </div>
         ))}
       </div>

web/app/components/app/app-publisher/index.tsx

@@ -208,7 +208,7 @@ const AppPublisher = ({
                       onSelect(item.value)
                   }
                 }
-                items={selects.map((item) => {
+                items={selects && selects.map((item) => {
                   return {
                     value: item.id,
                     name: item.name,

web/app/components/app/configuration/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { usePathname } from 'next/navigation'
@@ -61,6 +61,7 @@ import {
   getMultipleRetrievalConfig,
   getSelectedDatasetsMode,
 } from '@/app/components/workflow/nodes/knowledge-retrieval/utils'
+import { agentAdd, getAgentTypeList, getDifyList } from '@/service/agent'
 
 type PublishConfig = {
   modelConfig: ModelConfig
@@ -79,11 +80,12 @@ const Configuration: FC = () => {
   const [hasFetchedDetail, setHasFetchedDetail] = useState(false)
   const isLoading = !hasFetchedDetail
   const pathname = usePathname()
+  const [selects, setSelects] = useState([])
   const matched = pathname.match(/\/app\/([^/]+)/)
   const appId = (matched?.length && matched[1]) ? matched[1] : ''
   const [mode, setMode] = useState('')
   const [publishedConfig, setPublishedConfig] = useState<PublishConfig | null>(null)
-
+  const [agentType, setAgentType] = useState<string>()
   const modalConfig = useMemo(() => appDetail?.model_config || {} as BackendModelConfig, [appDetail])
   const [conversationId, setConversationId] = useState<string | null>('')
 
@@ -98,6 +100,7 @@ const Configuration: FC = () => {
     prompt_template: '',
     prompt_variables: [],
   })
+  const [detail, setDetail] = useState<any>()
   const [moreLikeThisConfig, setMoreLikeThisConfig] = useState<MoreLikeThisConfig>({
     enabled: false,
   })
@@ -292,7 +295,7 @@ const Configuration: FC = () => {
     })
     setCitationConfig(modelConfig.retriever_resource || {
       enabled: false,
-      resources: []
+      resources: [],
     })
   }
 
@@ -685,6 +688,37 @@ const Configuration: FC = () => {
     return true
   }
 
+  const getData = useCallback(async () => {
+    const res: any = await getAgentTypeList({ page: 1, pageSize: 999999 })
+    setSelects(res.data)
+    const detail: any = await getDifyList({
+      appId,
+    },
+    )
+    setDetail(detail.data[0])
+    setAgentType(detail.data[0].agentTypeId)
+  }, [appId])
+  useEffect(() => {
+    getData()
+  }, [])
+  const onAgentAddAndDelete = useCallback(async (status: number) => {
+    if (!agentType && status === 1) {
+      notify({ type: 'error', message: '请选择类型' })
+      return
+    }
+    const res = await agentAdd({
+      agentTypeId: agentType,
+      appId,
+      sort: 0,
+      status,
+    })
+    if (res.code === 'Success') {
+      await getData()
+      notify({ type: 'success', message: t('common.api.actionSuccess') })
+    }
+    else { notify({ type: 'error', message: res.message }) }
+  }, [agentType, appId, detail, getData, notify, t])
+
   const [restoreConfirmOpen, setRestoreConfirmOpen] = useState(false)
   const resetAppConfig = () => {
     syncToPublishedConfig(publishedConfig!)
@@ -850,6 +884,12 @@ const Configuration: FC = () => {
                     debugWithMultipleModel,
                     multipleModelConfigs,
                     onPublish,
+                    detail,
+                    onAgentAddAndDelete,
+                    selects,
+                    onSelect: (id: string) => {
+                      setAgentType(id)
+                    },
                     onRestore: () => setRestoreConfirmOpen(true),
                   }} />
                 </div>

web/app/components/workflow/header/index.tsx

@@ -126,7 +126,7 @@ const Header: FC = () => {
     }
   }, [appID, handleCheckBeforePublish, notify, t, workflowStore])
   const getData = useCallback(async () => {
-    const res: any = await getAgentTypeList('/dify/agent-type/list')
+    const res: any = await getAgentTypeList({ page: 1, pageSize: 999999 })
     setSelects(res.data)
     const detail: any = await getDifyList({
       appId: appID,

web/config/index.ts

@@ -29,7 +29,6 @@ else {
   apiPrefix = 'http://localhost:5001/agents/console/api'
   publicApiPrefix = 'http://localhost:5001/api' // avoid browser private mode api cross origin
 }
-console.log(process.env.NEXT_CUSTOM_API_PREFIX, 31, customApiPrefix, publicApiPrefix)
 export const API_PREFIX: string = apiPrefix
 export const PUBLIC_API_PREFIX: string = publicApiPrefix
 export const CUSTOM_API_PREFIX: string = customApiPrefix