Merge branch 'feat/isomorphic-copilot-for-extension' into refactor/op…

…enapi-schema
refly-ai · Jun 3, 2024 · 24caa92 · 24caa92
2 parents 336a8b0 + 56c8d09
commit 24caa92
Show file tree

Hide file tree

Showing 17 changed files with 365 additions and 51 deletions.
diff --git a/apps/extension-wxt/package.json b/apps/extension-wxt/package.json
@@ -67,7 +67,8 @@
     "@refly/arco-vite-plugin-react": "workspace:*",
     "@refly/ai-workspace-common": "workspace:*",
     "react-resizable-panels": "^2.0.19",
-    "vite-tsconfig-paths": "~4.3.2"
+    "vite-tsconfig-paths": "~4.3.2",
+    "react-error-boundary": "~4.0.13"
   },
   "devDependencies": {
     "@types/react": "^18.2.46",

diff --git a/apps/extension-wxt/src/entrypoints/background/events/activated.ts b/apps/extension-wxt/src/entrypoints/background/events/activated.ts
@@ -1,16 +1,17 @@
-import { Tabs } from "wxt/browser";
-
-export const onActivated = (activeInfo: Tabs.OnActivatedActiveInfoType) => {
-  // 在此处处理标签切换
-  console.log(
-    "Tab with ID " +
-      activeInfo.tabId +
-      " was activated in window " +
-      activeInfo.windowId
-  );
+import { Tabs, browser } from 'wxt/browser';
+import { checkSidePanelSupport } from '../../../utils/sidePanel';
 
+export const sendHeartBeatMessage = (activeInfo: Tabs.OnActivatedActiveInfoType) => {
   // 给 tab 发消息，进行 userProfile 检查，包括更新 i18n 和登录状态
   browser.tabs.sendMessage(activeInfo.tabId, {
-    name: "refly-status-check",
+    name: 'refly-status-check',
   });
 };
+
+export const onActivated = (activeInfo: Tabs.OnActivatedActiveInfoType) => {
+  // 在此处处理标签切换
+  console.log('Tab with ID ' + activeInfo.tabId + ' was activated in window ' + activeInfo.windowId);
+
+  sendHeartBeatMessage(activeInfo);
+  checkSidePanelSupport();
+};
diff --git a/apps/extension-wxt/src/entrypoints/sidepanel/App.scss b/apps/extension-wxt/src/entrypoints/sidepanel/App.scss
@@ -0,0 +1,110 @@
+body {
+  padding: 8px;
+}
+
+.popup-page {
+  font-size: 14px;
+  padding: 8px;
+  min-width: 418px;
+
+  header {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .logo {
+    gap: 10px;
+    display: flex;
+    align-items: center;
+
+    .title {
+      display: flex;
+      align-items: center;
+      height: 18px;
+      color: #0d1117;
+      font-weight: 500;
+      font-size: 20px;
+    }
+  }
+
+  .guide-box {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .content-title {
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 26px;
+    color: #000000d9;
+  }
+
+  .state {
+    font-weight: 400;
+    font-size: 16px;
+    color: #4f4f4f;
+  }
+
+  ul {
+    padding-left: 20px;
+
+    li {
+      font-size: 16px;
+      line-height: 24px;
+      color: #000000d9;
+    }
+  }
+
+  .page-unsupported-hint {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    color: #000000a6;
+  }
+
+  a {
+    color: #3872e0;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-drag: none;
+  }
+
+  .shortcut-hint {
+    border-top: 1px solid #e4e9ed;
+    margin: 0 -16px;
+    line-height: 1.5;
+    padding: 16px 16px 2px;
+    font-weight: 400;
+    font-size: 14px;
+    color: #919eab;
+    margin-top: 24px;
+
+    .key {
+      padding: 0 2px;
+      display: inline-block;
+      min-width: 20px;
+      text-align: center;
+      width: 90px;
+      height: 24px;
+      background: #ffffff;
+      border: 1px solid #dadce0;
+      box-shadow: inset 0 -3px #0003;
+      border-radius: 4px;
+      line-height: 20px;
+      color: #000000d9;
+    }
+  }
+}
+
+.logo-img {
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  -webkit-user-drag: none;
+}
diff --git a/apps/extension-wxt/src/entrypoints/sidepanel/App.tsx b/apps/extension-wxt/src/entrypoints/sidepanel/App.tsx
@@ -0,0 +1,16 @@
+import { Button, Spin } from '@arco-design/web-react';
+
+import './App.scss';
+/**
+ * 打开 popup 页面的规则
+ * 1. 如果是
+ */
+const App = () => {
+  return (
+    <div className="popup-page">
+      <Button>hello refly sidePanel</Button>
+    </div>
+  );
+};
+
+export default App;
diff --git a/apps/extension-wxt/src/entrypoints/sidepanel/index.html b/apps/extension-wxt/src/entrypoints/sidepanel/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Where knowledge thrives</title>
+    <meta name="manifest.type" content="browser_action" />
+    <meta
+      name="manifest.default_icon"
+      content="{
+        '16': '/icon/16.png',
+        '24': '/icon/24.png',
+        '32': '/icon/32.png',
+        '48': '/icon/48.png',
+        '64': '/icon/64.png',
+        '128': '/icon/128.png',
+      }"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/extension-wxt/src/entrypoints/sidepanel/main.tsx b/apps/extension-wxt/src/entrypoints/sidepanel/main.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/apps/extension-wxt/src/pages/knowledge-base/index.scss b/apps/extension-wxt/src/pages/knowledge-base/index.scss
@@ -0,0 +1,39 @@
+.workspace-container {
+  height: 100%;
+}
+
+.workspace-inner-container {
+  height: 100%;
+  background-color: #f3f3ee;
+}
+
+.workspace-panel-container {
+  height: 100%;
+}
+
+.workspace-left-assist-panel {
+  border-radius: 8px;
+  background-color: #fcfcf9;
+  border-color: hsla(60, 11%, 83%, 0.5);
+  box-shadow: 0 1px 1px 0 hsla(60, 11%, 83%, 0.3);
+}
+
+.workspace-content-panel {
+  border-radius: 8px;
+  background-color: #fcfcf9;
+  border-color: hsla(60, 11%, 83%, 0.5);
+  box-shadow: 0 1px 1px 0 hsla(60, 11%, 83%, 0.3);
+}
+
+.workspace-panel-resize {
+  background-color: #f3f3ee;
+  width: 2px;
+  margin: 0 3px;
+  height: calc(100% - 4px);
+  margin-top: 4px;
+  transition: background-color;
+
+  &:hover {
+    background-color: #00968f;
+  }
+}
diff --git a/apps/extension-wxt/src/pages/knowledge-base/index.tsx b/apps/extension-wxt/src/pages/knowledge-base/index.tsx
@@ -0,0 +1,91 @@
+import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';
+
+// 自定义组件
+import { KnowledgeBaseDetail } from '@refly/ai-workspace-common/components/knowledge-base/knowledge-base-detail';
+import { AICopilot } from '@refly/ai-workspace-common/components/knowledge-base/copilot';
+// utils
+// 自定义方法
+// stores
+// scss
+import './index.scss';
+// types
+import { useUserStore } from '@refly/ai-workspace-common/stores/user';
+import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom';
+import { useResizePanel } from '@refly/ai-workspace-common/hooks/use-resize-panel';
+import { ErrorBoundary } from '@sentry/react';
+
+// 用于快速选择
+export const quickActionList = ['summary'];
+
+/**
+ *
+ * 分层架构设计：AI Workspace -> AI Knowledge Base (Knowledge Collecton + AI Note + AI Copilot)
+ * /knowledge-base 打开的是一体的，通过 query 参数显示 collection、note 或 copilot，都属于 knowledge base 里面的资源
+ */
+const KnowledgeLibraryLayout = () => {
+  const [searchParams] = useSearchParams();
+  const kbId = searchParams.get('kbId');
+  const userStore = useUserStore();
+  const { t } = useTranslation();
+
+  const [minSize] = useResizePanel({
+    getGroupSelector: () => document.querySelector(`.workspace-panel-container`) as HTMLElement,
+    getResizeSelector: () => document.querySelectorAll(`.workspace-panel-resize`),
+    initialMinSize: 24,
+    initialMinPixelSize: 310,
+  });
+
+  const copilotStyle = kbId
+    ? {
+        defaultSize: 20,
+        minSize: 20,
+        maxSize: 50,
+      }
+    : {
+        defaultSize: 100,
+        minSize: 100,
+        maxSize: 100,
+      };
+
+  return (
+    <ErrorBoundary>
+      <div className="workspace-container" style={{}}>
+        <div className="workspace-inner-container">
+          <PanelGroup direction="horizontal" className="workspace-panel-container">
+            {kbId ? (
+              <>
+                <Panel
+                  minSize={50}
+                  order={1}
+                  className="workspace-left-assist-panel"
+                  key="workspace-left-assist-panel"
+                  id="workspace-left-assist-panel"
+                >
+                  <KnowledgeBaseDetail />
+                </Panel>
+                <PanelResizeHandle
+                  className="workspace-panel-resize"
+                  key="workspace-panel-resize"
+                  id="workspace-panel-resize"
+                />
+              </>
+            ) : null}
+            <Panel
+              order={3}
+              className="workspace-content-panel"
+              {...copilotStyle}
+              minSize={minSize}
+              key="workspace-content-panel"
+              id="workspace-content-panel"
+            >
+              <AICopilot />
+            </Panel>
+          </PanelGroup>
+        </div>
+      </div>
+    </ErrorBoundary>
+  );
+};
+
+export default KnowledgeLibraryLayout;
diff --git a/...nsion-wxt/src/components/login/index.scss → .../extension-wxt/src/pages/login/index.scss b/...nsion-wxt/src/components/login/index.scss → .../extension-wxt/src/pages/login/index.scss