dify

dify/web/app/components/plugins/plugin-detail-panel/index.tsx

@@ -0,0 +1,88 @@
+'use client'
+import Drawer from '@/app/components/base/drawer'
+import { PluginCategoryEnum, type PluginDetail } from '@/app/components/plugins/types'
+import cn from '@/utils/classnames'
+import type { FC } from 'react'
+import { useCallback, useEffect } from 'react'
+import ActionList from './action-list'
+import AgentStrategyList from './agent-strategy-list'
+import DatasourceActionList from './datasource-action-list'
+import DetailHeader from './detail-header'
+import EndpointList from './endpoint-list'
+import ModelList from './model-list'
+import { SubscriptionList } from './subscription-list'
+import { usePluginStore } from './store'
+import { TriggerEventsList } from './trigger/event-list'
+import { ReadmeEntrance } from '../readme-panel/entrance'
+
+type Props = {
+  detail?: PluginDetail
+  onUpdate: () => void
+  onHide: () => void
+}
+
+const PluginDetailPanel: FC<Props> = ({
+  detail,
+  onUpdate,
+  onHide,
+}) => {
+  const handleUpdate = useCallback((isDelete = false) => {
+    if (isDelete)
+      onHide()
+    onUpdate()
+  }, [onHide, onUpdate])
+
+  const { setDetail } = usePluginStore()
+
+  useEffect(() => {
+    setDetail(!detail ? undefined : {
+      plugin_id: detail.plugin_id,
+      provider: `${detail.plugin_id}/${detail.declaration.name}`,
+      plugin_unique_identifier: detail.plugin_unique_identifier || '',
+      declaration: detail.declaration,
+      name: detail.name,
+      id: detail.id,
+    })
+  }, [detail])
+
+  if (!detail)
+    return null
+
+  return (
+    <Drawer
+      isOpen={!!detail}
+      clickOutsideNotOpen={false}
+      onClose={onHide}
+      footer={null}
+      mask={false}
+      positionCenter={false}
+      panelClassName={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')}
+    >
+      {detail && (
+        <>
+          <DetailHeader detail={detail} onUpdate={handleUpdate} onHide={onHide} />
+          <div className='grow overflow-y-auto'>
+            <div className='flex min-h-full flex-col'>
+              <div className='flex-1'>
+                {detail.declaration.category === PluginCategoryEnum.trigger && (
+                  <>
+                    <SubscriptionList />
+                    <TriggerEventsList />
+                  </>
+                )}
+                {!!detail.declaration.tool && <ActionList detail={detail} />}
+                {!!detail.declaration.agent_strategy && <AgentStrategyList detail={detail} />}
+                {!!detail.declaration.endpoint && <EndpointList detail={detail} />}
+                {!!detail.declaration.model && <ModelList detail={detail} />}
+                {!!detail.declaration.datasource && <DatasourceActionList detail={detail} />}
+              </div>
+              <ReadmeEntrance pluginDetail={detail} className='mt-auto' />
+            </div>
+          </div>
+        </>
+      )}
+    </Drawer>
+  )
+}
+
+export default PluginDetailPanel