fix(frontend): notion integration in front end (#3175)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

frontend/.eslintrc.js

@@ -13,7 +13,7 @@ module.exports = {
     "import/no-unresolved": 0,
     "import/prefer-default-export": 0,
     "import/no-duplicates": "error",
-    complexity: ["error", 10],
+    complexity: ["error", 12],
     "max-lines": ["error", 300],
     "max-depth": ["error", 3],
     "max-params": ["error", 5],

frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/components/FromConnections/FolderLine/FolderLine.tsx

@@ -5,13 +5,15 @@ interface FolderLineProps {
   selectable: boolean;
   id: string;
   icon?: string;
+  isAlsoFile?: boolean;
 }
 
 export const FolderLine = ({
   name,
   selectable,
   id,
-  icon
+  icon,
+  isAlsoFile,
 }: FolderLineProps): JSX.Element => {
   return (
     <SyncElementLine
@@ -19,7 +21,8 @@ export const FolderLine = ({
       selectable={selectable}
       id={id}
       isFolder={true}
-      icon= {icon}
+      isAlsoFile={isAlsoFile}
+      icon={icon}
     />
   );
 };

frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/components/FromConnections/FromConnections.tsx

@@ -20,6 +20,7 @@ export const FromConnections = (): JSX.Element => {
     currentSyncId,
     loadingFirstList,
     setCurrentSyncId,
+    currentProvider,
   } = useFromConnectionsContext();
   const [currentFiles, setCurrentFiles] = useState<SyncElement[]>([]);
   const [currentFolders, setCurrentFolders] = useState<SyncElement[]>([]);
@@ -114,9 +115,10 @@ export const FromConnections = (): JSX.Element => {
                   >
                     <FolderLine
                       name={folder.name ?? ""}
-                      selectable={!!isPremium}
+                      selectable={!!isPremium || currentProvider === "Notion"}
                       id={folder.id}
-                      icon= {folder.icon}
+                      icon={folder.icon}
+                      isAlsoFile={currentProvider === "Notion"}
                     />
                   </div>
                 ))}
@@ -126,15 +128,18 @@ export const FromConnections = (): JSX.Element => {
                       name={file.name ?? ""}
                       selectable={true}
                       id={file.id}
-                      icon= {file.icon}
+                      icon={file.icon}
                     />
                   </div>
                 ))}
               </>
             )}
-            {!currentFiles.length && !currentFolders.length && (
-              <span className={styles.empty_folder}>Empty folder</span>
-            )}
+            {!currentFiles.length &&
+              !currentFolders.length &&
+              !loading &&
+              !loadingFirstList && (
+                <span className={styles.empty_folder}>Empty folder</span>
+              )}
           </div>
         </div>
       )}

frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/components/FromConnections/FromConnectionsProvider/FromConnection-provider.tsx

@@ -1,6 +1,6 @@
 import { createContext, useState } from "react";
 
-import { OpenedConnection, SyncElements } from "@/lib/api/sync/types";
+import { OpenedConnection, Provider, SyncElements } from "@/lib/api/sync/types";
 
 export type FromConnectionsContextType = {
   currentSyncElements: SyncElements | undefined;
@@ -17,6 +17,8 @@ export type FromConnectionsContextType = {
   setHasToReload: React.Dispatch<React.SetStateAction<boolean>>;
   loadingFirstList: boolean;
   setLoadingFirstList: React.Dispatch<React.SetStateAction<boolean>>;
+  currentProvider: Provider | null;
+  setCurrentProvider: React.Dispatch<React.SetStateAction<Provider | null>>;
 };
 
 export const FromConnectionsContext = createContext<
@@ -37,6 +39,7 @@ export const FromConnectionsProvider = ({
   const [openedConnections, setOpenedConnections] = useState<
     OpenedConnection[]
   >([]);
+  const [currentProvider, setCurrentProvider] = useState<Provider | null>(null);
   const [hasToReload, setHasToReload] = useState<boolean>(false);
   const [loadingFirstList, setLoadingFirstList] = useState<boolean>(false);
 
@@ -55,6 +58,9 @@ export const FromConnectionsProvider = ({
 
         loadingFirstList,
         setLoadingFirstList,
+
+        currentProvider,
+        setCurrentProvider,
       }}
     >
       {children}

frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/components/FromConnections/SyncElementLine/SyncElementLine.tsx

@@ -14,6 +14,7 @@ interface SyncElementLineProps {
   id: string;
   isFolder: boolean;
   icon?: string;
+  isAlsoFile?: boolean;
 }
 
 export const SyncElementLine = ({
@@ -21,7 +22,8 @@ export const SyncElementLine = ({
   selectable,
   id,
   isFolder,
-  icon
+  icon,
+  isAlsoFile,
 }: SyncElementLineProps): JSX.Element => {
   const [isCheckboxHovered, setIsCheckboxHovered] = useState(false);
   const { currentSyncId, openedConnections, setOpenedConnections } =
@@ -39,6 +41,8 @@ export const SyncElementLine = ({
 
   const [checked, setChecked] = useState<boolean>(initialChecked);
 
+  const showCheckbox: boolean = isAlsoFile ?? !isFolder;
+
   const handleSetChecked = () => {
     setOpenedConnections((prevState) => {
       return prevState.map((connection) => {
@@ -78,8 +82,12 @@ export const SyncElementLine = ({
         }
       }}
     >
-      <div className={`${styles.left} ${isFolder ? styles.folder : ""}`}>
-        {!isFolder && (
+      <div
+        className={`${styles.left} ${
+          !isAlsoFile && isFolder ? styles.folder : ""
+        }`}
+      >
+        {showCheckbox && (
           <div
             onMouseEnter={() => setIsCheckboxHovered(true)}
             onMouseLeave={() => setIsCheckboxHovered(false)}
@@ -92,13 +100,16 @@ export const SyncElementLine = ({
             />
           </div>
         )}
-      {
-        icon ?
-        <div>{icon}</div> :
-
-        <Icon name={isFolder? "folder" : "file"} color="black" size="normal" />
-      }
-      <span className={styles.element_name}>{name}</span>
+        {icon ? (
+          <div>{icon}</div>
+        ) : (
+          <Icon
+            name={isFolder ? "folder" : "file"}
+            color="black"
+            size="normal"
+          />
+        )}
+        <span className={styles.element_name}>{name}</span>
       </div>
       {isFolder && (
         <Icon

frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/MessageContent/MessageContent.tsx

@@ -9,6 +9,7 @@ import "prismjs/components/prism-css";
 import "prismjs/components/prism-dart";
 import "prismjs/components/prism-go";
 import "prismjs/components/prism-java";
+import "prismjs/components/prism-jsx";
 import "prismjs/components/prism-kotlin";
 import "prismjs/components/prism-markup";
 import "prismjs/components/prism-python";
@@ -17,6 +18,7 @@ import "prismjs/components/prism-rust";
 import "prismjs/components/prism-scss";
 import "prismjs/components/prism-sql";
 import "prismjs/components/prism-swift";
+import "prismjs/components/prism-tsx";
 import "prismjs/components/prism-typescript";
 import { useEffect, useState } from "react";
 import { BlockMath, InlineMath } from "react-katex";

frontend/app/globals.css

@@ -31,16 +31,17 @@ div:focus {
 
   .scrollbar::-webkit-scrollbar-track {
     border-radius: 10px;
-    background-color: var(--background-3);
+    background-color: var(--background-0);
   }
 
   .scrollbar::-webkit-scrollbar-thumb {
-    background-color: var(--text-4);
+    background-color: var(--background-3);
     border-radius: 4px;
+    max-height: 30px;
   }
 
   .scrollbar::-webkit-scrollbar-thumb:hover {
-    background-color: var(--text-3);
+    background-color: var(--background-2);
   }
 
   .h-fill-available {

frontend/lib/components/ConnectionCards/ConnectionCards.module.scss

@@ -2,12 +2,36 @@
 @use "styles/Spacings.module.scss";
 
 .connection_cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: Spacings.$spacing05;
-  width: 100%;
+  column-count: 3;
+  column-gap: Spacings.$spacing05;
+  padding-bottom: Spacings.$spacing05;
+  margin-bottom: -(Spacings.$spacing05);
+
+  > * {
+    margin-bottom: Spacings.$spacing05;
+  }
 
   &.spaced {
     justify-content: space-between;
   }
+
+  @media screen and (min-width: ScreenSizes.$large) {
+    column-count: 4;
+  }
+
+  @media screen and (max-width: ScreenSizes.$medium) {
+    column-count: 2;
+  }
+
+  @media screen and (max-width: ScreenSizes.$small) {
+    column-count: 1;
+  }
+
+  &.spaced {
+    column-count: 2;
+
+    @media screen and (max-width: ScreenSizes.$small) {
+      column-count: 1;
+    }
+  }
 }

frontend/lib/components/ConnectionCards/ConnectionCards.tsx

@@ -10,12 +10,14 @@ interface ConnectionCardsProps {
 export const ConnectionCards = ({
   fromAddKnowledge,
 }: ConnectionCardsProps): JSX.Element => {
-  const { syncGoogleDrive, syncSharepoint, syncDropbox } = useSync();
+  const { syncGoogleDrive, syncSharepoint, syncDropbox, syncNotion } =
+    useSync();
 
   return (
     <div
-      className={`${styles.connection_cards} ${fromAddKnowledge ? styles.spaced : ""
-        }`}
+      className={`${styles.connection_cards} ${
+        fromAddKnowledge ? styles.spaced : ""
+      }`}
     >
       <ConnectionSection
         label="Google Drive"
@@ -35,12 +37,12 @@ export const ConnectionCards = ({
         callback={(name) => syncDropbox(name)}
         fromAddKnowledge={fromAddKnowledge}
       />
-      {/* <ConnectionSection
+      <ConnectionSection
         label="Notion"
         provider="Notion"
         callback={(name) => syncNotion(name)}
         fromAddKnowledge={fromAddKnowledge}
-      /> */}
+      />
     </div>
   );
 };

frontend/lib/components/ConnectionCards/ConnectionSection/ConnectionSection.tsx

@@ -55,11 +55,13 @@ const renderExistingConnections = ({
   fromAddKnowledge,
   handleGetSyncFiles,
   openedConnections,
+  setCurrentProvider,
 }: {
   existingConnections: Sync[];
   folded: boolean;
   setFolded: (folded: boolean) => void;
   fromAddKnowledge: boolean;
+  setCurrentProvider: (provider: Provider) => void;
   handleGetSyncFiles: (
     userSyncId: number,
     currentProvider: Provider
@@ -96,9 +98,10 @@ const renderExistingConnections = ({
                   openedConnection.submitted
                 );
               })}
-              onClick={() =>
-                void handleGetSyncFiles(connection.id, connection.provider)
-              }
+              onClick={() => {
+                void handleGetSyncFiles(connection.id, connection.provider);
+                setCurrentProvider(connection.provider);
+              }}
             />
           </div>
         ))}
@@ -124,6 +127,7 @@ export const ConnectionSection = ({
     hasToReload,
     setHasToReload,
     setLoadingFirstList,
+    setCurrentProvider,
   } = useFromConnectionsContext();
   const [existingConnections, setExistingConnections] = useState<Sync[]>([]);
   const [folded, setFolded] = useState<boolean>(!fromAddKnowledge);
@@ -251,6 +255,7 @@ export const ConnectionSection = ({
           fromAddKnowledge: !!fromAddKnowledge,
           handleGetSyncFiles,
           openedConnections,
+          setCurrentProvider,
         })}
       </div>
     </>