dify/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx

94 lines
2.7 KiB
TypeScript

import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import {
ErrorPluginsSection,
RunningPluginsSection,
SuccessPluginsSection,
} from './plugin-task-list'
import PluginTaskTrigger from './plugin-task-trigger'
import { usePluginTaskPanel } from './use-plugin-task-panel'
const PluginTasks = () => {
const {
open,
setOpen,
tip,
taskStatus,
handleClearAll,
handleClearErrors,
handleClearSingle,
} = usePluginTaskPanel()
const {
errorPlugins,
successPlugins,
runningPlugins,
runningPluginsLength,
successPluginsLength,
errorPluginsLength,
totalPluginsLength,
isInstalling,
isInstallingWithSuccess,
isInstallingWithError,
isSuccess,
isFailed,
} = taskStatus
// Show icon if there are any plugin tasks (completed, running, or failed)
// Only hide when there are absolutely no plugin tasks
if (totalPluginsLength === 0)
return null
const canOpenPanel = isFailed || isInstalling || isInstallingWithSuccess || isInstallingWithError || isSuccess
return (
<div className="flex items-center">
<PortalToFollowElem
open={open}
onOpenChange={setOpen}
placement="bottom-start"
offset={{
mainAxis: 4,
crossAxis: 79,
}}
>
<PortalToFollowElemTrigger
onClick={() => {
if (canOpenPanel)
setOpen(!open)
}}
>
<PluginTaskTrigger
tip={tip}
isInstalling={isInstalling}
isInstallingWithSuccess={isInstallingWithSuccess}
isInstallingWithError={isInstallingWithError}
isSuccess={isSuccess}
isFailed={isFailed}
successPluginsLength={successPluginsLength}
runningPluginsLength={runningPluginsLength}
errorPluginsLength={errorPluginsLength}
totalPluginsLength={totalPluginsLength}
/>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-[11]">
<div className="w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
<RunningPluginsSection plugins={runningPlugins} />
<SuccessPluginsSection plugins={successPlugins} onClearAll={handleClearAll} />
<ErrorPluginsSection
plugins={errorPlugins}
onClearAll={handleClearErrors}
onClearSingle={handleClearSingle}
/>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</div>
)
}
export default PluginTasks