| @@ -1,6 +1,6 @@ | |||
| 'use client' | |||
| import type { FC } from 'react' | |||
| import React, { useMemo, useState } from 'react' | |||
| import React, { useCallback, useMemo, useState } from 'react' | |||
| import { useTranslation } from 'react-i18next' | |||
| import { useContext } from 'use-context-selector' | |||
| import copy from 'copy-to-clipboard' | |||
| @@ -32,6 +32,7 @@ import cn from '@/utils/classnames' | |||
| import ToolPicker from '@/app/components/workflow/block-selector/tool-picker' | |||
| import type { ToolDefaultValue } from '@/app/components/workflow/block-selector/types' | |||
| import { canFindTool } from '@/utils' | |||
| import { useMittContextSelector } from '@/context/mitt-context' | |||
| type AgentToolWithMoreInfo = AgentTool & { icon: any; collection?: Collection } | null | |||
| const AgentTools: FC = () => { | |||
| @@ -39,7 +40,6 @@ const AgentTools: FC = () => { | |||
| const [isShowChooseTool, setIsShowChooseTool] = useState(false) | |||
| const { modelConfig, setModelConfig, collectionList } = useContext(ConfigContext) | |||
| const formattingChangedDispatcher = useFormattingChangedDispatcher() | |||
| const [currentTool, setCurrentTool] = useState<AgentToolWithMoreInfo>(null) | |||
| const currentCollection = useMemo(() => { | |||
| if (!currentTool) return null | |||
| @@ -61,6 +61,17 @@ const AgentTools: FC = () => { | |||
| collection, | |||
| } | |||
| }) | |||
| const useSubscribe = useMittContextSelector(s => s.useSubscribe) | |||
| const handleUpdateToolsWhenInstallToolSuccess = useCallback((installedPluginNames: string[]) => { | |||
| const newModelConfig = produce(modelConfig, (draft) => { | |||
| draft.agentConfig.tools.forEach((item: any) => { | |||
| if (item.isDeleted && installedPluginNames.includes(item.provider_id)) | |||
| item.isDeleted = false | |||
| }) | |||
| }) | |||
| setModelConfig(newModelConfig) | |||
| }, [modelConfig, setModelConfig]) | |||
| useSubscribe('plugin:install:success', handleUpdateToolsWhenInstallToolSuccess as any) | |||
| const handleToolSettingChange = (value: Record<string, any>) => { | |||
| const newModelConfig = produce(modelConfig, (draft) => { | |||
| @@ -132,7 +143,7 @@ const AgentTools: FC = () => { | |||
| disabled={false} | |||
| supportAddCustomTool | |||
| onSelect={handleSelectTool} | |||
| selectedTools={tools} | |||
| selectedTools={tools as any} | |||
| /> | |||
| </> | |||
| )} | |||
| @@ -79,6 +79,7 @@ import { | |||
| } from '@/utils' | |||
| import PluginDependency from '@/app/components/workflow/plugin-dependency' | |||
| import { supportFunctionCall } from '@/utils/tool-call' | |||
| import { MittProvider } from '@/context/mitt-context' | |||
| type PublishConfig = { | |||
| modelConfig: ModelConfig | |||
| @@ -908,7 +909,7 @@ const Configuration: FC = () => { | |||
| }} | |||
| > | |||
| <FeaturesProvider features={featuresData}> | |||
| <> | |||
| <MittProvider> | |||
| <div className="flex h-full flex-col"> | |||
| <div className='relative flex h-[200px] grow pt-14'> | |||
| {/* Header */} | |||
| @@ -1060,7 +1061,7 @@ const Configuration: FC = () => { | |||
| /> | |||
| )} | |||
| <PluginDependency /> | |||
| </> | |||
| </MittProvider> | |||
| </FeaturesProvider> | |||
| </ConfigContext.Provider> | |||
| ) | |||
| @@ -9,6 +9,7 @@ import InstallMulti from './install-multi' | |||
| import { useInstallOrUpdate } from '@/service/use-plugins' | |||
| import useRefreshPluginList from '../../hooks/use-refresh-plugin-list' | |||
| import { useCanInstallPluginFromMarketplace } from '@/app/components/plugins/plugin-page/use-permission' | |||
| import { useMittContextSelector } from '@/context/mitt-context' | |||
| const i18nPrefix = 'plugin.installModal' | |||
| type Props = { | |||
| @@ -29,6 +30,7 @@ const Install: FC<Props> = ({ | |||
| isHideButton, | |||
| }) => { | |||
| const { t } = useTranslation() | |||
| const emit = useMittContextSelector(s => s.emit) | |||
| const [selectedPlugins, setSelectedPlugins] = React.useState<Plugin[]>([]) | |||
| const [selectedIndexes, setSelectedIndexes] = React.useState<number[]>([]) | |||
| const selectedPluginsNum = selectedPlugins.length | |||
| @@ -63,8 +65,12 @@ const Install: FC<Props> = ({ | |||
| }) | |||
| })) | |||
| const hasInstallSuccess = res.some(r => r.success) | |||
| if (hasInstallSuccess) | |||
| if (hasInstallSuccess) { | |||
| refreshPluginList(undefined, true) | |||
| emit('plugin:install:success', selectedPlugins.map((p) => { | |||
| return `${p.plugin_id}/${p.name}` | |||
| })) | |||
| } | |||
| }, | |||
| }) | |||
| const handleInstall = () => { | |||
| @@ -0,0 +1,27 @@ | |||
| import { createContext, useContext, useContextSelector } from 'use-context-selector' | |||
| import { useMitt } from '@/hooks/use-mitt' | |||
| import { noop } from 'lodash-es' | |||
| type ContextValueType = ReturnType<typeof useMitt> | |||
| export const MittContext = createContext<ContextValueType>({ | |||
| emit: noop, | |||
| useSubscribe: noop, | |||
| }) | |||
| export const MittProvider = ({ children }: { children: React.ReactNode }) => { | |||
| const mitt = useMitt() | |||
| return ( | |||
| <MittContext.Provider value={mitt}> | |||
| {children} | |||
| </MittContext.Provider> | |||
| ) | |||
| } | |||
| export const useMittContext = () => { | |||
| return useContext(MittContext) | |||
| } | |||
| export function useMittContextSelector<T>(selector: (value: ContextValueType) => T): T { | |||
| return useContextSelector(MittContext, selector) | |||
| } | |||