Addressing craig's UX feedback

StrongMonkey · StrongMonkey · commit 3510da85356a · 2024-09-12T18:13:59.000-07:00
Signed-off-by: Daishan Peng &lt;daishan@acorn.io&gt;
diff --git a/actions/knowledge/onedrive.ts b/actions/knowledge/onedrive.ts
@@ -61,6 +61,17 @@ export async function syncSharedLink(link: string): Promise<void> {
   return;
 }
 
+export async function clearOneDriveFiles(): Promise<void> {
+  const dir = path.join(
+    WORKSPACE_DIR(),
+    'knowledge',
+    'integrations',
+    'onedrive'
+  );
+  const externalLinkFile = path.join(dir, 'externalLinks.json');
+  fs.rmSync(externalLinkFile, { recursive: true, force: true });
+}
+
 export async function runOneDriveSync(authed: boolean): Promise<void> {
   return runSyncTool(authed, 'onedrive');
 }
diff --git a/components/edit/configure.tsx b/components/edit/configure.tsx
@@ -19,7 +19,7 @@ import {
   useDisclosure,
 } from '@nextui-org/react';
 import { useRouter } from 'next/navigation';
-import { useCallback, useContext } from 'react';
+import { useCallback, useContext, useState } from 'react';
 import { GoLightBulb, GoTrash } from 'react-icons/go';
 import { HiCog } from 'react-icons/hi2';
 import { IoMdAdd, IoMdRefresh } from 'react-icons/io';
@@ -32,6 +32,8 @@ import FileModal from '@/components/knowledge/FileModal';
 import { gatewayTool } from '@/actions/knowledge/util';
 import { importFiles } from '@/actions/knowledge/filehelper';
 import { DiOnedrive } from 'react-icons/di';
+import { FileDetail } from '@/model/knowledge';
+import { runSyncTool } from '@/actions/knowledge/tool';
 
 interface ConfigureProps {
   collapsed?: boolean;
@@ -61,6 +63,7 @@ const Configure: React.FC<ConfigureProps> = ({ collapsed }) => {
     ingestionError,
   } = useContext(EditContext);
   const { restartScript } = useContext(ChatContext);
+  const [syncing, setSyncing] = useState(false);
   const fileSettingModal = useDisclosure();
   const addFileModal = useDisclosure();
 
@@ -101,6 +104,34 @@ const Configure: React.FC<ConfigureProps> = ({ collapsed }) => {
     return root.name && root.name.length > 0 ? root.name : 'your assistant';
   };
 
+  const hasUpstreamFiles = (droppedFiles: Map<string, FileDetail>): boolean => {
+    return Array.from(droppedFiles.values()).some(
+      (file) => file.type === 'notion' || file.type === 'onedrive'
+    );
+  };
+
+  const syncUpstreamFiles = async () => {
+    setSyncing(true);
+    const hasNotion = Array.from(droppedFiles.values()).some(
+      (file) => file.type === 'notion'
+    );
+    const hasOnedrive = Array.from(droppedFiles.values()).some(
+      (file) => file.type === 'onedrive'
+    );
+    try {
+      if (hasNotion) {
+        await runSyncTool(true, 'notion');
+      }
+      if (hasOnedrive) {
+        await runSyncTool(true, 'onedrive');
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setSyncing(false);
+    }
+  };
+
   if (loading)
     return <Loading>{`Loading your assistant's details...`}</Loading>;
 
@@ -282,6 +313,20 @@ const Configure: React.FC<ConfigureProps> = ({ collapsed }) => {
                 >
                   Add Files
                 </Button>
+                {hasUpstreamFiles(droppedFiles) && (
+                  <Button
+                    className="w-full"
+                    variant="flat"
+                    color="primary"
+                    isIconOnly
+                    size="sm"
+                    isLoading={syncing}
+                    startContent={!syncing && <IoMdRefresh className="mr-2" />}
+                    onPress={syncUpstreamFiles}
+                  >
+                    Sync Files
+                  </Button>
+                )}
               </div>
             </AccordionItem>
             <AccordionItem
@@ -338,6 +383,7 @@ const Configure: React.FC<ConfigureProps> = ({ collapsed }) => {
             </AccordionItem>
           </Accordion>
         </div>
+
         <div className="w-full justify-end items-center px-2 flex gap-2 mb-6">
           <Button
             color="primary"
diff --git a/components/knowledge/Notion.tsx b/components/knowledge/Notion.tsx
@@ -15,7 +15,6 @@ import {
   TableRow,
 } from '@nextui-org/react';
 import React, { useContext, useEffect, useState } from 'react';
-import { IoMdRefresh } from 'react-icons/io';
 import {
   getNotionFiles,
   isNotionConfigured,
@@ -139,15 +138,6 @@ export const NotionFileModal = ({
             </div>
 
             <div className="flex items-center justify-end p-2">
-              <Button
-                isLoading={isSyncing}
-                size="sm"
-                color="primary"
-                startContent={!isSyncing && <IoMdRefresh />}
-                onClick={syncNotion}
-              >
-                {!isSyncing && 'Sync'}
-              </Button>
               {syncError && (
                 <p className="text-sm text-red-500 ml-2">{syncError}</p>
               )}
@@ -165,7 +155,7 @@ export const NotionFileModal = ({
             }}
             startContent={<CiSearch />}
           />
-          {notionConfigured && notionFiles.size > 0 ? (
+          {notionConfigured && notionFiles.size > 0 && (
             <div className="flex flex-col gap-1">
               <Table
                 selectionMode="multiple"
@@ -223,12 +213,6 @@ export const NotionFileModal = ({
                 </TableBody>
               </Table>
             </div>
-          ) : (
-            <div className="flex items-center justify-center h-full">
-              <p className="text-sm text-zinc-500">
-                {`Click the "Sync" button to sync your Notion files`}
-              </p>
-            </div>
           )}
         </ModalBody>
         <ModalFooter>
@@ -238,7 +222,7 @@ export const NotionFileModal = ({
             size="sm"
             onClick={onClickImport}
           >
-            Import
+            Add to Knowledge
           </Button>
         </ModalFooter>
       </ModalContent>
diff --git a/components/knowledge/OneDrive.tsx b/components/knowledge/OneDrive.tsx
@@ -16,8 +16,8 @@ import {
   useDisclosure,
 } from '@nextui-org/react';
 import React, { useContext, useEffect, useState } from 'react';
-import { IoMdRefresh } from 'react-icons/io';
 import {
+  clearOneDriveFiles,
   getOneDriveFiles,
   isOneDriveConfigured,
   runOneDriveSync,
@@ -28,7 +28,6 @@ import { EditContext } from '@/contexts/edit';
 import { importFiles } from '@/actions/knowledge/filehelper';
 import { Link } from '@nextui-org/react';
 import { syncFiles } from '@/actions/knowledge/tool';
-import { BiPlus } from 'react-icons/bi';
 
 interface OnedriveFileModalProps {
   isOpen: boolean;
@@ -54,8 +53,8 @@ export const OnedriveFileModal = ({
   const { droppedFiles, ensureImportedFiles } = useContext(EditContext);
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [importing, setImporting] = useState(false);
-  const externalLinkModal = useDisclosure();
   const [sharedLink, setSharedLink] = useState<string>('');
+  const [isClearing, setIsClearing] = useState(false);
 
   const [onedriveFiles, setOnedriveFiles] = useState<
     Map<string, { url: string; fileName: string; displayName: string }>
@@ -99,7 +98,6 @@ export const OnedriveFileModal = ({
   };
 
   const syncOnedrive = async () => {
-    setIsSyncing(true);
     try {
       const isConfigured = await isOneDriveConfigured();
       await runOneDriveSync(isConfigured);
@@ -108,8 +106,6 @@ export const OnedriveFileModal = ({
       setSyncError('');
     } catch (e) {
       setSyncError((e as Error).toString());
-    } finally {
-      setIsSyncing(false);
     }
   };
 
@@ -121,9 +117,8 @@ export const OnedriveFileModal = ({
     }
   };
 
-  const addSharedLink = async () => {
+  const load = async () => {
     setIsSyncing(true);
-    externalLinkModal.onClose();
     try {
       await syncSharedLink(sharedLink);
       setOnedriveFiles(await getOneDriveFiles());
@@ -135,6 +130,18 @@ export const OnedriveFileModal = ({
     }
   };
 
+  const clear = async () => {
+    setIsClearing(true);
+    try {
+      await clearOneDriveFiles();
+      syncOnedrive();
+    } catch (e) {
+      setSyncError((e as Error).toString());
+    } finally {
+      setIsClearing(false);
+    }
+  };
+
   return (
     <>
       <Modal
@@ -158,46 +165,46 @@ export const OnedriveFileModal = ({
                 <p className="ml-2">Onedrive</p>
               </div>
 
-              <div className="flex items-center justify-end p-2">
+              <div className="justify-end flex">
+                <Input
+                  className="w-[40vh] flex justify-end ml-2"
+                  size="sm"
+                  placeholder="Enter your document link"
+                  value={sharedLink}
+                  onChange={(e) => {
+                    setSharedLink(e.target.value);
+                  }}
+                />
                 <Button
+                  className="ml-2"
                   size="sm"
+                  variant="flat"
                   color="primary"
                   isLoading={isSyncing}
-                  startContent={!isSyncing && <IoMdRefresh />}
-                  onClick={syncOnedrive}
+                  onClick={load}
+                >
+                  Load
+                </Button>
+                <Button
+                  className="ml-2"
+                  size="sm"
+                  color="primary"
+                  variant="flat"
+                  isLoading={isClearing}
+                  onClick={clear}
                 >
-                  {!isSyncing && 'Sync'}
+                  Clear
                 </Button>
-                {syncError && (
-                  <p className="text-sm text-red-500 ml-2">{syncError}</p>
-                )}
               </div>
             </div>
+            <div className="flex items-center justify-end p-2">
+              {syncError && (
+                <p className="text-sm text-red-500 ml-2">{syncError}</p>
+              )}
+            </div>
           </ModalHeader>
           <ModalBody>
-            <div className="justify-between flex">
-              <Input
-                className="w-[20%] flex justify-end"
-                placeholder="Search"
-                size="sm"
-                value={searchQuery}
-                onChange={(e) => {
-                  setSearchQuery(e.target.value);
-                }}
-                startContent={<CiSearch />}
-              />
-              <Button
-                isIconOnly
-                size="sm"
-                color="primary"
-                startContent={<BiPlus />}
-                onClick={() => {
-                  externalLinkModal.onOpen();
-                }}
-              />
-            </div>
-
-            {onedriveConfigured && onedriveFiles.size > 0 ? (
+            {onedriveConfigured && onedriveFiles.size > 0 && (
               <div className="flex flex-col gap-1">
                 <Table
                   selectionMode="multiple"
@@ -255,12 +262,6 @@ export const OnedriveFileModal = ({
                   </TableBody>
                 </Table>
               </div>
-            ) : (
-              <div className="flex items-center justify-center h-full">
-                <p className="text-sm text-zinc-500">
-                  {`Click the "Sync" button to sync your Onedrive files`}
-                </p>
-              </div>
             )}
           </ModalBody>
           <ModalFooter>
@@ -270,34 +271,7 @@ export const OnedriveFileModal = ({
               size="sm"
               onClick={onClickImport}
             >
-              Import
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-      <Modal
-        isOpen={externalLinkModal.isOpen}
-        onClose={externalLinkModal.onClose}
-      >
-        <ModalContent>
-          <ModalHeader>Shared Link</ModalHeader>
-          <ModalBody>
-            <Input
-              placeholder={'Add shared link for documents'}
-              value={sharedLink}
-              onChange={(e) => setSharedLink(e.target.value)}
-            />
-          </ModalBody>
-          <ModalFooter>
-            <Button
-              color="primary"
-              disabled={isSyncing}
-              size="sm"
-              onClick={() => {
-                addSharedLink();
-              }}
-            >
-              Add
+              Add to Knowledge
             </Button>
           </ModalFooter>
         </ModalContent>
