chore: refactor knowledge code in admin ui (#1008)

* chore: refactor knowledge code in admin ui

This should have no effect on logic or UI/UX. it just extracts some subcomponents and abstracts data logic into reusable hooks.

Doing this in preparation for thread level knowledge implementations

* chore: refactor KnowledgeSourceDetail with similar criteria

* chore: move knowledge files around to match the rest of the project

* fix: start polling when knowledge source starts syncing

* fix: additionally start knowledge polling when source is pending

* fix: format

ui/admin/app/components/knowledge/AddKnowledgeButton.tsx

@@ -0,0 +1,99 @@
+import { Avatar } from "@radix-ui/react-avatar";
+import { GlobeIcon, PlusIcon, UploadIcon } from "lucide-react";
+
+import { KnowledgeSourceType } from "~/lib/model/knowledge";
+import { assetUrl } from "~/lib/utils";
+
+import { Button } from "~/components/ui/button";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+
+interface AddKnowledgeButtonProps {
+    disabled?: boolean;
+    onUploadFiles: () => void;
+    onAddSource: (sourceType: KnowledgeSourceType) => void;
+    hasExistingNotion: boolean;
+}
+
+export function AddKnowledgeButton({
+    disabled,
+    onUploadFiles,
+    onAddSource,
+    hasExistingNotion,
+}: AddKnowledgeButtonProps) {
+    return (
+        <div className="flex justify-end w-full">
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button
+                        variant="ghost"
+                        className="flex items-center gap-2"
+                        disabled={disabled}
+                    >
+                        <PlusIcon className="h-5 w-5 text-foreground" />
+                        Add Knowledge
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent side="top">
+                    <DropdownMenuItem
+                        onClick={onUploadFiles}
+                        className="cursor-pointer"
+                    >
+                        <div className="flex items-center">
+                            <UploadIcon className="w-4 h-4 mr-2" />
+                            Local Files
+                        </div>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                        onClick={() =>
+                            onAddSource(KnowledgeSourceType.OneDrive)
+                        }
+                        className="cursor-pointer"
+                    >
+                        <div className="flex flex-row justify-center">
+                            <div className="flex flex-row justify-center">
+                                <div className="flex items-center justify-center">
+                                    <Avatar className="h-4 w-4 mr-2">
+                                        <img
+                                            src={assetUrl("/onedrive.svg")}
+                                            alt="OneDrive logo"
+                                        />
+                                    </Avatar>
+                                </div>
+                                <span>OneDrive</span>
+                            </div>
+                        </div>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                        onClick={() => onAddSource(KnowledgeSourceType.Notion)}
+                        className="cursor-pointer"
+                        disabled={hasExistingNotion}
+                    >
+                        <div className="flex flex-row justify-center">
+                            <Avatar className="h-4 w-4 mr-2">
+                                <img
+                                    src={assetUrl("/notion.svg")}
+                                    alt="Notion logo"
+                                />
+                            </Avatar>
+                            Notion
+                        </div>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                        onClick={() => onAddSource(KnowledgeSourceType.Website)}
+                        className="cursor-pointer"
+                    >
+                        <div className="flex justify-center">
+                            <GlobeIcon className="w-4 h-4 mr-2" />
+                            Website
+                        </div>
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+    );
+}

ui/admin/app/components/knowledge/AddSourceModal.tsx

@@ -2,7 +2,6 @@ import { FC, useState } from "react";
 
 import { KNOWLEDGE_TOOL } from "~/lib/model/agents";
 import { KnowledgeSourceType } from "~/lib/model/knowledge";
-import { KnowledgeService } from "~/lib/service/api/knowledgeService";
 
 import KnowledgeSourceAvatar from "~/components/knowledge/KnowledgeSourceAvatar";
 import { Button } from "~/components/ui/button";
@@ -11,58 +10,39 @@ import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
 
 interface AddSourceModalProps {
-    agentId: string;
     sourceType: KnowledgeSourceType;
     startPolling: () => void;
     isOpen: boolean;
     onOpenChange: (open: boolean) => void;
-    onSave: (knowledgeSourceId: string) => void;
     addTool: (tool: string) => void;
+    onAddWebsite: (website: string) => void;
+    onAddOneDrive: (link: string) => void;
 }
 
-const AddSourceModal: FC<AddSourceModalProps> = ({
-    agentId,
+export const AddSourceModal: FC<AddSourceModalProps> = ({
     sourceType,
     startPolling,
     isOpen,
     onOpenChange,
-    onSave,
     addTool,
+    onAddWebsite,
+    onAddOneDrive,
 }) => {
     const [newWebsite, setNewWebsite] = useState("");
     const [newLink, setNewLink] = useState("");
 
     const handleAddWebsite = async () => {
         if (newWebsite) {
-            const trimmedWebsite = newWebsite.trim();
-            const formattedWebsite =
-                trimmedWebsite.startsWith("http://") ||
-                trimmedWebsite.startsWith("https://")
-                    ? trimmedWebsite
-                    : `https://${trimmedWebsite}`;
-
-            const res = await KnowledgeService.createKnowledgeSource(agentId, {
-                websiteCrawlingConfig: {
-                    urls: [formattedWebsite],
-                },
-            });
-            onSave(res.id);
-            startPolling();
+            onAddWebsite(newWebsite);
             setNewWebsite("");
-            onOpenChange(false);
         }
     };
 
     const handleAddOneDrive = async () => {
-        const res = await KnowledgeService.createKnowledgeSource(agentId, {
-            onedriveConfig: {
-                sharedLinks: [newLink.trim()],
-            },
-        });
-        onSave(res.id);
-        setNewLink("");
-        startPolling();
-        onOpenChange(false);
+        if (newLink) {
+            onAddOneDrive(newLink);
+            setNewLink("");
+        }
     };
 
     const handleAdd = async () => {
@@ -78,7 +58,10 @@ const AddSourceModal: FC<AddSourceModalProps> = ({
 
     return (
         <Dialog open={isOpen} onOpenChange={onOpenChange}>
-            <DialogContent aria-describedby={undefined} className="max-w-2xl">
+            <DialogContent
+                aria-describedby="add-source-modal"
+                className="max-w-2xl"
+            >
                 <DialogTitle className="flex flex-row items-center text-xl font-semibold mb-4 justify-between">
                     <div className="flex flex-row items-center">
                         <KnowledgeSourceAvatar
@@ -163,5 +146,3 @@ const AddSourceModal: FC<AddSourceModalProps> = ({
         </Dialog>
     );
 };
-
-export default AddSourceModal;