feat: init new plugin system (#3323)

plugins/copilot/src/UI/detail-content.tsx

@@ -1,11 +1,9 @@
 import { IconButton } from '@affine/component';
 import { SendIcon } from '@blocksuite/icons';
-import { rootStore } from '@toeverything/plugin-infra/manager';
-import type { PluginUIAdapter } from '@toeverything/plugin-infra/type';
-import { Provider, useAtomValue, useSetAtom } from 'jotai';
+import { contentLayoutAtom } from '@toeverything/plugin-infra/manager';
+import { useAtomValue, useSetAtom } from 'jotai';
 import type { ReactElement } from 'react';
-import { StrictMode, Suspense, useCallback, useState } from 'react';
-import { createRoot } from 'react-dom/client';
+import { Suspense, useCallback, useState } from 'react';
 
 import { ConversationList } from '../core/components/conversation-list';
 import { FollowingUp } from '../core/components/following-up';
@@ -17,51 +15,6 @@ import {
   textareaStyle,
 } from './index.css';
 
-if (typeof window === 'undefined') {
-  import('@blocksuite/blocks')
-    .then(({ FormatQuickBar }) => {
-      FormatQuickBar.customElements.push((_page, getSelection) => {
-        const div = document.createElement('div');
-        const root = createRoot(div);
-
-        const AskAI = (): ReactElement => {
-          const { conversationAtom } = useChatAtoms();
-          const call = useSetAtom(conversationAtom);
-          const onClickAskAI = useCallback(() => {
-            const selection = getSelection();
-            if (selection != null) {
-              const text = selection.models
-                .map(model => {
-                  return model.text?.toString();
-                })
-                .filter((v): v is string => Boolean(v))
-                .join('\n');
-              console.log('selected text:', text);
-              call(
-                `I selected some text from the document: \n"${text}."`
-              ).catch(err => {
-                console.error(err);
-              });
-            }
-          }, [call]);
-
-          return <div onClick={onClickAskAI}>Ask AI</div>;
-        };
-        root.render(
-          <StrictMode>
-            <Provider store={rootStore}>
-              <AskAI />
-            </Provider>
-          </StrictMode>
-        );
-        return div;
-      });
-    })
-    .catch(error => {
-      console.error(error);
-    });
-}
-
 const Actions = () => {
   const { conversationAtom, followingUpAtoms } = useChatAtoms();
   const call = useSetAtom(conversationAtom);
@@ -108,12 +61,10 @@ const DetailContentImpl = () => {
   );
 };
 
-export const DetailContent: PluginUIAdapter['detailContent'] = ({
-  contentLayoutAtom,
-}): ReactElement => {
+export const DetailContent = (): ReactElement => {
   const layout = useAtomValue(contentLayoutAtom);
   const key = useAtomValue(openAIApiKeyAtom);
-  if (layout === 'editor' || layout.second !== 'com.affine.copilot') {
+  if (layout === 'editor' || layout.second !== 'copilot') {
     return <></>;
   }
   if (!key) {

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

@@ -1,12 +1,10 @@
 import { IconButton, Tooltip } from '@affine/component';
-import type { PluginUIAdapter } from '@toeverything/plugin-infra/type';
+import { contentLayoutAtom } from '@toeverything/plugin-infra/manager';
 import { useSetAtom } from 'jotai';
 import type { ReactElement } from 'react';
 import { useCallback } from 'react';
 
-export const HeaderItem: PluginUIAdapter['headerItem'] = ({
-  contentLayoutAtom,
-}): ReactElement => {
+export const HeaderItem = (): ReactElement => {
   const setLayout = useSetAtom(contentLayoutAtom);
   return (
     <Tooltip content="Chat with AI" placement="bottom-end">
@@ -18,7 +16,7 @@ export const HeaderItem: PluginUIAdapter['headerItem'] = ({
                 return {
                   direction: 'horizontal',
                   first: 'editor',
-                  second: 'com.affine.copilot',
+                  second: 'copilot',
                   splitPercentage: 70,
                 };
               } else {