added knowledge base

src/components/ui/configure-knowledge-base-dialog.tsx

@@ -0,0 +1,131 @@
+/**
+ * Configure Knowledge Base Dialog Component
+ * @description Dialog for managing knowledge base collections
+ */
+
+import { useEscapeKey, useBodyScrollLock } from '@/hooks';
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+    DialogClose,
+} from './dialog';
+
+/**
+ * ConfigureKnowledgeBaseDialog component props
+ */
+interface ConfigureKnowledgeBaseDialogProps {
+    /** Whether the dialog is open */
+    open: boolean;
+    /** Callback when dialog open state changes */
+    onOpenChange: (open: boolean) => void;
+    /** Callback when Add Knowledge Base button is clicked */
+    onAddKnowledgeBase?: () => void;
+}
+
+/**
+ * ConfigureKnowledgeBaseDialog component
+ * @description Modal dialog for managing knowledge base collections with empty state
+ * @param props - Component props
+ * @returns {JSX.Element} ConfigureKnowledgeBaseDialog element
+ */
+export function ConfigureKnowledgeBaseDialog({
+    open,
+    onOpenChange,
+    onAddKnowledgeBase,
+}: ConfigureKnowledgeBaseDialogProps): JSX.Element {
+    useEscapeKey(() => onOpenChange(false), open);
+    useBodyScrollLock(open);
+
+    /**
+     * Handle Add Knowledge Base button click
+     * @description Triggers the onAddKnowledgeBase callback and closes dialog
+     */
+    const handleAddKnowledgeBase = (): void => {
+        if (onAddKnowledgeBase) {
+            onAddKnowledgeBase();
+        }
+        onOpenChange(false);
+    };
+
+    /**
+     * Handle keyboard events on Add Knowledge Base button
+     * @description Handles Enter and Space key presses
+     * @param e - Keyboard event
+     */
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>): void => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleAddKnowledgeBase();
+        }
+    };
+
+    // Icon from Figma design - database icon with exclamation
+    const emptyStateIcon = 'https://www.figma.com/api/mcp/asset/31344752-2e10-42c5-9678-5d2cb0b3dadb';
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="w-[620px]">
+                <DialogHeader>
+                    <div className="flex flex-col gap-0.5">
+                        <DialogTitle className="font-semibold text-[22px] text-black leading-normal">
+                            Add Knowledge Base
+                        </DialogTitle>
+                        <DialogDescription className="font-normal text-sm text-[rgba(0,0,0,0.75)] max-w-[484px]">
+                            Manage your document collections and knowledge sources
+                        </DialogDescription>
+                    </div>
+                    <DialogClose onClick={() => onOpenChange(false)} />
+                </DialogHeader>
+
+                <div className="px-8 pt-6 pb-8">
+                    <div className="flex flex-col gap-8 items-end relative shrink-0">
+                        {/* Empty State Content */}
+                        <div className="flex flex-col items-center justify-center relative shrink-0 w-full">
+                            <div className="flex flex-col gap-4 items-center relative shrink-0">
+                                {/* Database Icon */}
+                                <div className="h-[61px] relative shrink-0 w-[59px]">
+                                    <img
+                                        alt="Database icon"
+                                        className="block max-w-none size-full"
+                                        src={emptyStateIcon}
+                                    />
+                                </div>
+
+                                {/* Empty State Messages */}
+                                <div className="flex flex-col gap-[11px] items-center not-italic relative shrink-0 text-center">
+                                    <div className="flex flex-col font-semibold justify-center leading-normal min-w-full relative shrink-0 text-[#252526] text-base tracking-[0.25px] w-[min-content]">
+                                        <p className="leading-normal whitespace-pre-wrap">
+                                            No knowledge bases found
+                                        </p>
+                                    </div>
+                                    <p className="font-normal leading-normal relative shrink-0 text-[#6d6b70] text-sm w-[266px] whitespace-pre-wrap">
+                                        Get started by adding your first knowledge base
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Add Knowledge Base Button */}
+                        <div className="flex items-center justify-center relative shrink-0 w-full">
+                            <button
+                                type="button"
+                                onClick={handleAddKnowledgeBase}
+                                onKeyDown={handleKeyDown}
+                                className="bg-[#03f] flex flex-1 items-center justify-center px-[42px] py-[14px] relative rounded-[12px] hover:bg-[#002BCC] active:bg-[#0025AA] transition-colors cursor-pointer focus:outline-none focus:ring-2 focus:ring-[#0033FF] focus:ring-offset-2"
+                                aria-label="Add Knowledge Base"
+                            >
+                                <p className="capitalize font-medium leading-[18px] not-italic relative shrink-0 text-sm text-center text-white">
+                                    Add Knowledge base
+                                </p>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+}
+

src/pages/agent-create.tsx

@@ -4,6 +4,7 @@ import { Info, ChevronDown } from 'lucide-react';
 import { APP_PATHS } from '@/routes';
 import { AddToolDialog } from '@/components/ui/add-tool-dialog';
 import { ConfigureMemoryDialog } from '@/components/ui/configure-memory-dialog';
+import { ConfigureKnowledgeBaseDialog } from '@/components/ui/configure-knowledge-base-dialog';
 import { ToolChip } from '@/components/ui/tool-chip';
 import type { Tool } from '@/types';
 
@@ -39,6 +40,7 @@ export function AgentCreatePage(): JSX.Element {
     const [enableMemory, setEnableMemory] = useState(true);
     const [isToolDialogOpen, setIsToolDialogOpen] = useState(false);
     const [isMemoryDialogOpen, setIsMemoryDialogOpen] = useState(false);
+    const [isKnowledgeBaseDialogOpen, setIsKnowledgeBaseDialogOpen] = useState(false);
     const [memoryValue, setMemoryValue] = useState(2);
     const [editingTool, setEditingTool] = useState<Tool | null>(null);
     const [tools, setTools] = useState<Tool[]>([
@@ -250,7 +252,10 @@ export function AgentCreatePage(): JSX.Element {
                                 </div>
                                 {enableKb && (
                                     <div className="flex items-center justify-between">
-                                        <button className="flex items-center gap-0.5 text-xs font-medium text-[#03f] leading-[1.5] hover:underline">
+                                        <button
+                                            onClick={() => setIsKnowledgeBaseDialogOpen(true)}
+                                            className="flex items-center gap-0.5 text-xs font-medium text-[#03f] leading-[1.5] hover:underline"
+                                        >
                                             Configure
                                             <img src="/Agent/redirect.svg" alt="Redirect" className="size-3.5 text-[#03f]" />
                                         </button>
@@ -382,6 +387,16 @@ export function AgentCreatePage(): JSX.Element {
                 initialValue={memoryValue}
                 onSave={setMemoryValue}
             />
+
+            {/* Configure Knowledge Base Dialog */}
+            <ConfigureKnowledgeBaseDialog
+                open={isKnowledgeBaseDialogOpen}
+                onOpenChange={setIsKnowledgeBaseDialogOpen}
+                onAddKnowledgeBase={() => {
+                    // Handle add knowledge base action
+                    console.log('Add Knowledge Base clicked');
+                }}
+            />
         </div>
     );
 }