QuivrHQ · StanGirard · Jun 9, 2024 · May 22, 2024 · May 22, 2024 · May 22, 2024
diff --git a/backend/modules/sync/controller/azure_sync_routes.py b/backend/modules/sync/controller/azure_sync_routes.py
@@ -8,6 +8,9 @@
 from modules.sync.service.sync_service import SyncService, SyncUserService
 from modules.user.entity.user_identity import UserIdentity
 from msal import PublicClientApplication
+from .successfull_connection import successfullConnectionPage
+from fastapi.responses import HTMLResponse
+
 
 # Initialize logger
 logger = get_logger(__name__)
@@ -31,7 +34,7 @@
 ]
 
 
-@azure_sync_router.get(
+@azure_sync_router.post(
     "/sync/azure/authorize",
     dependencies=[Depends(AuthBearer())],
     tags=["Sync"],
@@ -125,4 +128,4 @@ def oauth2callback_azure(request: Request):
 
     sync_user_service.update_sync_user(current_user, state_dict, sync_user_input)
     logger.info(f"Azure sync created successfully for user: {current_user}")
-    return {"message": "Azure sync created successfully"}
+    return HTMLResponse(successfullConnectionPage)
diff --git a/backend/modules/sync/controller/google_sync_routes.py b/backend/modules/sync/controller/google_sync_routes.py
@@ -9,6 +9,9 @@
 from modules.sync.dto.inputs import SyncsUserInput, SyncUserUpdateInput
 from modules.sync.service.sync_service import SyncService, SyncUserService
 from modules.user.entity.user_identity import UserIdentity
+from .successfull_connection import successfullConnectionPage
+from fastapi.responses import HTMLResponse
+
 
 # Set environment variable for OAuthlib
 os.environ["OAUTHLIB_INSECURE_TRANSPORT"] = "1"
@@ -47,7 +50,7 @@
 }
 
 
-@google_sync_router.get(
+@google_sync_router.post(
     "/sync/google/authorize",
     dependencies=[Depends(AuthBearer())],
     tags=["Sync"],
@@ -138,4 +141,4 @@ def oauth2callback_google(request: Request):
     )
     sync_user_service.update_sync_user(current_user, state_dict, sync_user_input)
     logger.info(f"Google Drive sync created successfully for user: {current_user}")
-    return {"message": "Google Drive sync created successfully"}
+    return HTMLResponse(successfullConnectionPage)
diff --git a/backend/modules/sync/controller/successfull_connection.py b/backend/modules/sync/controller/successfull_connection.py
@@ -0,0 +1,53 @@
+successfullConnectionPage = """
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #f8f9fa;
+            font-family: Arial, sans-serif;
+        }
+        .container {
+            text-align: center;
+        }
+        .message {
+            font-size: 2em;
+            margin-bottom: 20px;
+        }
+        .icon {
+            font-size: 2em;
+            color: white;
+            background-color: green;
+            border-radius: 50%;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+        .close-button {
+            padding: 10px 20px;
+            font-size: 1em;
+            color: #fff;
+            background-color: #6142d4;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        .close-button:hover {
+            background-color: #0056b3;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <i class="fas fa-check icon"></i>
+        <div class="message">Connection successful</div>
+        <button class="close-button" onclick="window.close();">Close Tab</button>
+    </div>
+</body>
+</html>
+"""
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
@@ -16,7 +16,7 @@ module.exports = {
     complexity: ["error", 10],
     "max-lines": ["error", 300],
     "max-depth": ["error", 3],
-    "max-params": ["error", 4],
+    "max-params": ["error", 5],
     eqeqeq: ["error", "smart"],
     "import/no-extraneous-dependencies": [
       "error",

diff --git a/frontend/app/App.tsx b/frontend/app/App.tsx
@@ -24,7 +24,9 @@ import { UserSettingsProvider } from "@/lib/context/UserSettingsProvider/User-se
 import { IntercomProvider } from "@/lib/helpers/intercom/IntercomProvider";
 import { UpdateMetadata } from "@/lib/helpers/updateMetadata";
 import { usePageTracking } from "@/services/analytics/june/usePageTracking";
+
 import "../lib/config/LocaleConfig/i18n";
+import { FromConnectionsProvider } from "./chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/components/FromConnections/FromConnectionsProvider/FromConnection-provider";
 
 if (
   process.env.NEXT_PUBLIC_POSTHOG_KEY != null &&
@@ -90,11 +92,13 @@ const AppWithQueryClient = ({ children }: PropsWithChildren): JSX.Element => {
             <BrainCreationProvider>
               <MenuProvider>
                 <OnboardingProvider>
-                  <ChatsProvider>
-                    <ChatProvider>
-                      <App>{children}</App>
-                    </ChatProvider>
-                  </ChatsProvider>
+                  <FromConnectionsProvider>
+                    <ChatsProvider>
+                      <ChatProvider>
+                        <App>{children}</App>
+                      </ChatProvider>
+                    </ChatsProvider>
+                  </FromConnectionsProvider>
                 </OnboardingProvider>
               </MenuProvider>
             </BrainCreationProvider>

diff --git a/...hat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/KnowledgeToFeed.module.scss b/...hat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/KnowledgeToFeed.module.scss
@@ -9,6 +9,7 @@
   width: 100%;
   gap: Spacings.$spacing05;
   overflow: hidden;
+  height: 100%;
 
   .single_selector_wrapper {
     width: 30%;
@@ -21,44 +22,8 @@
 
   .tabs_content_wrapper {
     width: 100%;
-    height: 200px;
-  }
-
-  .uploaded_knowledges_title {
-    color: var(--text-2);
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .uploaded_knowledges {
-    padding: Spacings.$spacing03;
-    display: flex;
-    width: 100%;
-    overflow: scroll;
-    flex-direction: column;
-    gap: Spacings.$spacing02;
-    flex-grow: 1;
+    height: 80%;
     overflow: scroll;
-
-    .uploaded_knowledge {
-      display: flex;
-      gap: Spacings.$spacing02;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      overflow: hidden;
-      font-size: Typography.$small;
-
-      .left {
-        display: flex;
-        align-items: center;
-        gap: Spacings.$spacing02;
-        overflow: hidden;
-
-        .label {
-          @include Typography.EllipsisOverflow;
-        }
-      }
-    }
+    padding: Spacings.$spacing01;
   }
 }
diff --git a/...nd/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/KnowledgeToFeed.tsx b/...nd/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/KnowledgeToFeed.tsx
@@ -1,6 +1,6 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
-import { Icon } from "@/lib/components/ui/Icon/Icon";
+import { useSync } from "@/lib/api/sync/useSync";
 import { SingleSelector } from "@/lib/components/ui/SingleSelector/SingleSelector";
 import { Tabs } from "@/lib/components/ui/Tabs/Tabs";
 import { requiredRolesForUpload } from "@/lib/config/upload";
@@ -9,6 +9,8 @@ import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider
 import { Tab } from "@/lib/types/Tab";
 
 import styles from "./KnowledgeToFeed.module.scss";
+import { FromConnections } from "./components/FromConnections/FromConnections";
+import { useFromConnectionsContext } from "./components/FromConnections/FromConnectionsProvider/hooks/useFromConnectionContext";
 import { FromDocuments } from "./components/FromDocuments/FromDocuments";
 import { FromWebsites } from "./components/FromWebsites/FromWebsites";
 import { formatMinimalBrainsToSelectComponentInput } from "./utils/formatMinimalBrainsToSelectComponentInput";
@@ -18,10 +20,13 @@ export const KnowledgeToFeed = ({
 }: {
   hideBrainSelector?: boolean;
 }): JSX.Element => {
-  const { allBrains, setCurrentBrainId, currentBrain } = useBrainContext();
-  const [selectedTab, setSelectedTab] = useState("From documents");
-  const { knowledgeToFeed, removeKnowledgeToFeed } =
-    useKnowledgeToFeedContext();
+  const { allBrains, setCurrentBrainId, currentBrainId, currentBrain } =
+    useBrainContext();
+  const [selectedTab, setSelectedTab] = useState("Documents");
+  const { knowledgeToFeed } = useKnowledgeToFeedContext();
+  const { openedConnections, setOpenedConnections, setCurrentSyncId } =
+    useFromConnectionsContext();
+  const { getActiveSyncsForBrain } = useSync();
 
   const brainsWithUploadRights = formatMinimalBrainsToSelectComponentInput(
     useMemo(
@@ -36,19 +41,69 @@ export const KnowledgeToFeed = ({
 
   const knowledgesTabs: Tab[] = [
     {
-      label: "From documents",
-      isSelected: selectedTab === "From documents",
-      onClick: () => setSelectedTab("From documents"),
+      label: "Documents",
+      isSelected: selectedTab === "Documents",
+      onClick: () => setSelectedTab("Documents"),
       iconName: "file",
+      badge: knowledgeToFeed.filter(
+        (knowledge) => knowledge.source === "upload"
+      ).length,
     },
     {
-      label: "From websites",
-      isSelected: selectedTab === "From websites",
-      onClick: () => setSelectedTab("From websites"),
+      label: "Websites",
+      isSelected: selectedTab === "Websites",
+      onClick: () => setSelectedTab("Websites"),
       iconName: "website",
+      badge: knowledgeToFeed.filter((knowledge) => knowledge.source === "crawl")
+        .length,
+    },
+    {
+      label: "Connections",
+      isSelected: selectedTab === "Connections",
+      onClick: () => setSelectedTab("Connections"),
+      iconName: "sync",
+      badge: openedConnections.filter((connection) => connection.submitted)
+        .length,
     },
   ];
 
+  useEffect(() => {
+    if (currentBrain) {
+      void (async () => {
+        try {
+          const res = await getActiveSyncsForBrain(currentBrain.id);
+          setCurrentSyncId(undefined);
+          setOpenedConnections(
+            res.map((sync) => ({
+              user_sync_id: sync.syncs_user_id,
+              id: sync.id,
+              provider: sync.syncs_user.provider,
+              submitted: true,
+              selectedFiles: {
+                files: [
+                  ...(sync.settings.folders?.map((folder) => ({
+                    id: folder,
+                    name: undefined,
+                    is_folder: true,
+                  })) ?? []),
+                  ...(sync.settings.files?.map((file) => ({
+                    id: file,
+                    name: undefined,
+                    is_folder: false,
+                  })) ?? []),
+                ],
+              },
+              name: sync.name,
+              last_synced: sync.last_synced,
+            }))
+          );
+        } catch (error) {
+          console.error(error);
+        }
+      })();
+    }
+  }, [currentBrainId]);
+
   return (
     <div className={styles.knowledge_to_feed_wrapper}>
       {!hideBrainSelector && (
@@ -68,39 +123,9 @@ export const KnowledgeToFeed = ({
       )}
       <Tabs tabList={knowledgesTabs} />
       <div className={styles.tabs_content_wrapper}>
-        {selectedTab === "From documents" && <FromDocuments />}
-        {selectedTab === "From websites" && <FromWebsites />}
-      </div>
-      <div>
-        <div className={styles.uploaded_knowledges_title}>
-          <span>Knowledges to upload</span>
-          <span>{knowledgeToFeed.length}</span>
-        </div>
-        <div className={styles.uploaded_knowledges}>
-          {knowledgeToFeed.map((knowledge, index) => (
-            <div className={styles.uploaded_knowledge} key={index}>
-              <div className={styles.left}>
-                <Icon
-                  name={knowledge.source === "crawl" ? "website" : "file"}
-                  size="small"
-                  color="black"
-                />
-                <span className={styles.label}>
-                  {knowledge.source === "crawl"
-                    ? knowledge.url
-                    : knowledge.file.name}
-                </span>
-              </div>
-              <Icon
-                name="delete"
-                size="normal"
-                color="dangerous"
-                handleHover={true}
-                onClick={() => removeKnowledgeToFeed(index)}
-              />
-            </div>
-          ))}
-        </div>
+        {selectedTab === "Documents" && <FromDocuments />}
+        {selectedTab === "Websites" && <FromWebsites />}
+        {selectedTab === "Connections" && <FromConnections />}
       </div>
     </div>
   );

diff --git a/...nsBar/components/KnowledgeToFeed/components/FromConnections/FileLine/FileLine.module.scss b/...nsBar/components/KnowledgeToFeed/components/FromConnections/FileLine/FileLine.module.scss
diff --git a/...ts/ActionsBar/components/KnowledgeToFeed/components/FromConnections/FileLine/FileLine.tsx b/...ts/ActionsBar/components/KnowledgeToFeed/components/FromConnections/FileLine/FileLine.tsx
@@ -0,0 +1,22 @@
+import { SyncElementLine } from "../SyncElementLine/SyncElementLine";
+
+interface FileLineProps {
+  name: string;
+  selectable: boolean;
+  id: string;
+}
+
+export const FileLine = ({
+  name,
+  selectable,
+  id,
+}: FileLineProps): JSX.Element => {
+  return (
+    <SyncElementLine
+      name={name}
+      selectable={selectable}
+      id={id}
+      isFolder={false}
+    />
+  );
+};
diff --git a/...r/components/KnowledgeToFeed/components/FromConnections/FolderLine/FolderLine.module.scss b/...r/components/KnowledgeToFeed/components/FromConnections/FolderLine/FolderLine.module.scss
diff --git a/...ctionsBar/components/KnowledgeToFeed/components/FromConnections/FolderLine/FolderLine.tsx b/...ctionsBar/components/KnowledgeToFeed/components/FromConnections/FolderLine/FolderLine.tsx
@@ -0,0 +1,22 @@
+import { SyncElementLine } from "../SyncElementLine/SyncElementLine";
+
+interface FolderLineProps {
+  name: string;
+  selectable: boolean;
+  id: string;
+}
+
+export const FolderLine = ({
+  name,
+  selectable,
+  id,
+}: FolderLineProps): JSX.Element => {
+  return (
+    <SyncElementLine
+      name={name}
+      selectable={selectable}
+      id={id}
+      isFolder={true}
+    />
+  );
+};