feat: support enable/disable plugin (#3605)

plugins/copilot/src/UI/header-item.tsx

@@ -1,32 +1,43 @@
 import { IconButton, Tooltip } from '@affine/component';
-import { contentLayoutAtom } from '@affine/sdk/entry';
+import { deleteLayoutAtom, pushLayoutAtom } from '@affine/sdk/entry';
 import { AiIcon } from '@blocksuite/icons';
 import { useSetAtom } from 'jotai';
-import type { ReactElement } from 'react';
-import { useCallback } from 'react';
+import type { ComponentType, PropsWithChildren, ReactElement } from 'react';
+import { useCallback, useState } from 'react';
+import { createRoot } from 'react-dom/client';
 
-export const HeaderItem = (): ReactElement => {
-  const setLayout = useSetAtom(contentLayoutAtom);
+import { DetailContent } from './detail-content';
+
+export const HeaderItem = ({
+  Provider,
+}: {
+  Provider: ComponentType<PropsWithChildren>;
+}): ReactElement => {
+  const [open, setOpen] = useState(false);
+  const pushLayout = useSetAtom(pushLayoutAtom);
+  const deleteLayout = useSetAtom(deleteLayoutAtom);
   return (
     <Tooltip content="Chat with AI" placement="bottom-end">
       <IconButton
-        onClick={useCallback(
-          () =>
-            // todo: abstract a context function to open a new tab
-            setLayout(layout => {
-              if (layout === 'editor') {
-                return {
-                  direction: 'horizontal',
-                  first: 'editor',
-                  second: '@affine/copilot-plugin',
-                  splitPercentage: 70,
-                };
-              } else {
-                return 'editor';
-              }
-            }),
-          [setLayout]
-        )}
+        onClick={useCallback(() => {
+          if (!open) {
+            setOpen(true);
+            pushLayout('@affine/copilot-plugin', div => {
+              const root = createRoot(div);
+              root.render(
+                <Provider>
+                  <DetailContent />
+                </Provider>
+              );
+              return () => {
+                root.unmount();
+              };
+            });
+          } else {
+            setOpen(false);
+            deleteLayout('@affine/copilot-plugin');
+          }
+        }, [Provider, deleteLayout, open, pushLayout])}
       >
         <AiIcon />
       </IconButton>

plugins/copilot/src/index.ts

@@ -3,28 +3,19 @@ import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { DebugContent } from './UI/debug-content';
-import { DetailContent } from './UI/detail-content';
 import { HeaderItem } from './UI/header-item';
 
 export const entry = (context: PluginContext) => {
   console.log('copilot entry');
   context.register('headerItem', div => {
-    const root = createRoot(div);
-    root.render(
-      createElement(context.utils.PluginProvider, {}, createElement(HeaderItem))
-    );
-    return () => {
-      root.unmount();
-    };
-  });
-
-  context.register('window', div => {
     const root = createRoot(div);
     root.render(
       createElement(
         context.utils.PluginProvider,
         {},
-        createElement(DetailContent)
+        createElement(HeaderItem, {
+          Provider: context.utils.PluginProvider,
+        })
       )
     );
     return () => {