Address comments

Signed-off-by: Daishan Peng <[email protected]>

Author: StrongMonkey

components/edit/configure.tsx

@@ -229,39 +229,41 @@ const Configure: React.FC<ConfigureProps> = ({ collapsed }) => {
             >
               <div className="grid grid-cols-1 gap-2 w-full mb-2">
                 <div className="max-h-[30vh] flex flex-col space-y-2 overflow-auto">
-                  {Array.from(droppedFiles.entries()).map((fileDetail, i) => (
-                    <div key={i} className="flex space-x-2">
-                      <div className="flex flex-row w-full border-2 justify-between truncate dark:border-zinc-700 text-sm pl-2 rounded-lg">
-                        <div className="flex items-center">
-                          {fileDetail[1].type === 'local' && (
-                            <RiFileSearchLine className="justify-start mr-2" />
-                          )}
-                          {fileDetail[1].type === 'notion' && (
-                            <RiNotionFill className="justify-start mr-2" />
-                          )}
-                          <div className="flex flex-row justify-start overflow-x-auto">
-                            <p className="capitalize text-left">
-                              {fileDetail[1].fileName}
-                            </p>
-                            <p className="text-xs text-zinc-400 ml-2">{`${fileDetail[1].size} KB`}</p>
+                  {Array.from(droppedFiles.entries()).map(
+                    ([key, fileDetail], _) => (
+                      <div key={key} className="flex space-x-2">
+                        <div className="flex flex-row w-full border-2 justify-between truncate dark:border-zinc-700 text-sm pl-2 rounded-lg">
+                          <div className="flex items-center">
+                            {fileDetail.type === 'local' && (
+                              <RiFileSearchLine className="justify-start mr-2" />
+                            )}
+                            {fileDetail.type === 'notion' && (
+                              <RiNotionFill className="justify-start mr-2" />
+                            )}
+                            <div className="flex flex-row justify-start overflow-x-auto">
+                              <p className="capitalize text-left">
+                                {fileDetail.fileName}
+                              </p>
+                              <p className="text-xs text-zinc-400 ml-2">{`${fileDetail.size} KB`}</p>
+                            </div>
                           </div>
+                          <Button
+                            variant="light"
+                            isIconOnly
+                            size="sm"
+                            startContent={<GoTrash />}
+                            onPress={() => {
+                              setDroppedFiles((prev) => {
+                                const newMap = new Map(prev);
+                                newMap.delete(key);
+                                return newMap;
+                              });
+                            }}
+                          />
                         </div>
-                        <Button
-                          variant="light"
-                          isIconOnly
-                          size="sm"
-                          startContent={<GoTrash />}
-                          onPress={() => {
-                            setDroppedFiles((prev) => {
-                              const newMap = new Map(prev);
-                              newMap.delete(fileDetail[0]);
-                              return newMap;
-                            });
-                          }}
-                        />
                       </div>
-                    </div>
-                  ))}
+                    )
+                  )}
                 </div>
                 <div className="flex justify-end mt-2">
                   {droppedFiles?.size > 0 && !ingesting && !ingestionError && (

components/knowledge/FileModal.tsx

@@ -1,4 +1,5 @@
 import {
+  Button,
   Modal,
   ModalBody,
   ModalContent,
@@ -20,16 +21,22 @@ const FileModal = ({ isOpen, onClose, handleAddFile }: FileModalProps) => {
   const notionModal = useDisclosure();
   const [isSyncing, setIsSyncing] = useState(false);
   const [notionConfigured, setNotionConfigured] = useState(false);
+  const [notionSyncError, setNotionSyncError] = useState('');
 
   const onClickNotion = async () => {
     onClose();
     notionModal.onOpen();
     const isConfigured = await isNotionConfigured();
     if (!isConfigured) {
       setIsSyncing(true);
-      await runNotionSync(false);
-      setIsSyncing(false);
-      setNotionConfigured(true);
+      try {
+        await runNotionSync(false);
+        setNotionConfigured(true);
+      } catch (e) {
+        setNotionSyncError((e as Error).toString());
+      } finally {
+        setIsSyncing(false);
+      }
     }
   };
 
@@ -44,7 +51,7 @@ const FileModal = ({ isOpen, onClose, handleAddFile }: FileModalProps) => {
       >
         <ModalContent className="p-4">
           <ModalBody>
-            <div
+            <Button
               onClick={() => {
                 handleAddFile();
                 onClose();
@@ -55,17 +62,17 @@ const FileModal = ({ isOpen, onClose, handleAddFile }: FileModalProps) => {
               <span className="text-sm font-semibold leading-6">
                 Add Local Files
               </span>
-            </div>
+            </Button>
 
-            <div
+            <Button
               onClick={onClickNotion}
               className="flex w-full items-center justify-center gap-3 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:ring-transparent hover:cursor-pointer"
             >
               <Image className="h-5 w-5" src="notion.svg" alt="Notion Icon" />
               <span className="text-sm font-semibold leading-6">
                 Sync From Notion
               </span>
-            </div>
+            </Button>
           </ModalBody>
         </ModalContent>
       </Modal>
@@ -76,6 +83,8 @@ const FileModal = ({ isOpen, onClose, handleAddFile }: FileModalProps) => {
         setIsSyncing={setIsSyncing}
         notionConfigured={notionConfigured}
         setNotionConfigured={setNotionConfigured}
+        syncError={notionSyncError}
+        setSyncError={setNotionSyncError}
       />
     </>
   );

components/knowledge/Notion.tsx

@@ -1,5 +1,6 @@
 import {
   Button,
+  Input,
   Modal,
   ModalBody,
   ModalContent,
@@ -20,7 +21,7 @@ import {
   isNotionConfigured,
   runNotionSync,
 } from '@/actions/knowledge/notion';
-import { CiShare1 } from 'react-icons/ci';
+import { CiSearch, CiShare1 } from 'react-icons/ci';
 import { EditContext } from '@/contexts/edit';
 import { importFiles } from '@/actions/knowledge/filehelper';
 
@@ -31,6 +32,8 @@ interface NotionFileModalProps {
   setIsSyncing: React.Dispatch<React.SetStateAction<boolean>>;
   notionConfigured: boolean;
   setNotionConfigured: React.Dispatch<React.SetStateAction<boolean>>;
+  syncError: string;
+  setSyncError: React.Dispatch<React.SetStateAction<string>>;
 }
 
 export const NotionFileModal = ({
@@ -40,14 +43,16 @@ export const NotionFileModal = ({
   setNotionConfigured,
   isSyncing,
   setIsSyncing,
+  syncError,
+  setSyncError,
 }: NotionFileModalProps) => {
   const { droppedFiles, setDroppedFiles } = useContext(EditContext);
+  const [searchQuery, setSearchQuery] = useState<string>('');
 
   const [notionFiles, setNotionFiles] = useState<
     Map<string, { url: string; fileName: string }>
   >(new Map());
 
-  const [syncError, setSyncError] = useState('');
   const [selectedFile, setSelectedFile] = useState<string[]>(
     Array.from(droppedFiles.keys())
   );
@@ -76,13 +81,13 @@ export const NotionFileModal = ({
     const files = await importFiles(selectedFile, 'notion');
     setDroppedFiles((prev) => {
       const newMap = new Map(prev);
-      for (const file of Array.from(newMap.entries())) {
-        if (file[1].type === 'notion') {
-          newMap.delete(file[0]);
+      for (const [key, file] of Array.from(newMap.entries())) {
+        if (file.type === 'notion') {
+          newMap.delete(key);
         }
       }
-      for (const file of Array.from(files.entries())) {
-        newMap.set(file[0], file[1]);
+      for (const [key, file] of Array.from(files.entries())) {
+        newMap.set(key, file);
       }
       return newMap;
     });
@@ -146,12 +151,23 @@ export const NotionFileModal = ({
           </div>
         </ModalHeader>
         <ModalBody>
+          <Input
+            className="w-[20%] flex justify-end"
+            placeholder="Search"
+            size="sm"
+            value={searchQuery}
+            onChange={(e) => {
+              setSearchQuery(e.target.value);
+            }}
+            startContent={<CiSearch />}
+          />
           {notionConfigured && notionFiles.size > 0 ? (
             <div className="flex flex-col gap-1">
               <Table
                 selectionMode="multiple"
                 selectionBehavior="toggle"
                 aria-label="notion-files"
+                isCompact={true}
                 selectedKeys={selectedFile}
                 onSelectionChange={(selected) => {
                   handleSelectedFileChange(selected);
@@ -162,26 +178,34 @@ export const NotionFileModal = ({
                   <TableColumn>Link</TableColumn>
                 </TableHeader>
                 <TableBody>
-                  {Array.from(notionFiles.entries()).map(([key, value]) => (
-                    <TableRow key={key}>
-                      <TableCell>
-                        <div className="flex flex-col">
-                          <p>{value.fileName}</p>
-                        </div>
-                      </TableCell>
-                      <TableCell>
-                        <Button
-                          isIconOnly
-                          color="primary"
-                          variant="flat"
-                          startContent={<CiShare1 />}
-                          onClick={() => {
-                            window.open(value.url);
-                          }}
-                        />
-                      </TableCell>
-                    </TableRow>
-                  ))}
+                  {Array.from(notionFiles.entries())
+                    .filter(([_, file]) => {
+                      if (!searchQuery) return true;
+                      return file.fileName
+                        .toLowerCase()
+                        .includes(searchQuery.toLowerCase());
+                    })
+                    .map(([key, value]) => (
+                      <TableRow key={key}>
+                        <TableCell>
+                          <div className="flex flex-col">
+                            <p>{value.fileName}</p>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <Button
+                            isIconOnly
+                            size="sm"
+                            color="primary"
+                            variant="flat"
+                            startContent={<CiShare1 />}
+                            onClick={() => {
+                              window.open(value.url);
+                            }}
+                          />
+                        </TableCell>
+                      </TableRow>
+                    ))}
                 </TableBody>
               </Table>
             </div>
@@ -194,7 +218,7 @@ export const NotionFileModal = ({
           )}
         </ModalBody>
         <ModalFooter>
-          <Button color="primary" onClick={onClickImport}>
+          <Button color="primary" size="sm" onClick={onClickImport}>
             Import
           </Button>
         </ModalFooter>

contexts/edit.tsx

@@ -147,8 +147,6 @@ const EditContextProvider: React.FC<EditContextProps> = ({
     setFiles();
   }, [scriptId]);
 
-  useEffect(() => {}, [droppedFiles]);
-
   const ingest = useCallback(async () => {
     setIngesting(true);
     const first = await firstIngestion(scriptId.toString(), droppedFiles);