feat: move kb to config api and add cache layer

wavefront/client/src/api/knowledge-base-service.ts

@@ -9,22 +9,26 @@ export interface NewKnowledgeBasePayload {
   vector_size: number;
 }
 
+// Interface for partially updating a knowledge base
+export interface UpdateKnowledgeBasePayload {
+  name?: string;
+  description?: string;
+  type?: string;
+}
+
 export interface KbData {
   id: string;
   name: string;
   description: string;
+  type: string;
   created_at: string;
   updated_at: string;
 }
-// Interface for knowledge base data
-export interface KnowledgeBaseData {
-  data: KbData;
-}
 
 export type KnowledgeBaseDetail = IApiResponse<KbData>;
 
 // Interface for a single knowledge base response
-export type KnowledgeBaseDetailResponse = IApiResponse<KnowledgeBaseData>;
+export type KnowledgeBaseDetailResponse = IApiResponse<KbData>;
 
 // Interface for listing knowledge bases
 export interface KnowledgeBaseListData {
@@ -96,6 +100,14 @@ export class KnowledgeBaseService {
     return response;
   }
 
+  async updateKnowledgeBase(kbId: string, payload: UpdateKnowledgeBasePayload): Promise<KnowledgeBaseDetailResponse> {
+    const response: KnowledgeBaseDetailResponse = await this.http.patch(
+      `/v1/:appId/floware/v1/knowledge-bases/${kbId}`,
+      payload
+    );
+    return response;
+  }
+
   async listKnowledgeBases(offset: number = 0, limit: number = 10): Promise<KnowledgeBaseListResponse> {
     const response: KnowledgeBaseListResponse = await this.http.get(`/v1/:appId/floware/v1/knowledge-bases`, {
       params: { offset, limit },

wavefront/client/src/components/KnowledgeBaseCard.tsx

@@ -6,9 +6,10 @@ interface KnowledgeBaseCardProps {
   kb: KbData;
   onClick: (kbId: string) => void;
   onDeleteClick: (e: React.MouseEvent, kb: KbData) => void;
+  onEditClick?: (e: React.MouseEvent, kb: KbData) => void;
 }
 
-const KnowledgeBaseCard: React.FC<KnowledgeBaseCardProps> = ({ kb, onClick, onDeleteClick }) => {
+const KnowledgeBaseCard: React.FC<KnowledgeBaseCardProps> = ({ kb, onClick, onDeleteClick, onEditClick }) => {
   const metadata: ResourceCardMetadata[] = [
     {
       label: 'Knowledge Base ID',
@@ -24,7 +25,9 @@ const KnowledgeBaseCard: React.FC<KnowledgeBaseCardProps> = ({ kb, onClick, onDe
       metadata={metadata}
       onClick={() => onClick(kb.id)}
       onDeleteClick={(e) => onDeleteClick(e, kb)}
+      onEditClick={onEditClick ? (e) => onEditClick(e, kb) : undefined}
       deleteTitle="Delete knowledge base"
+      editTitle="Edit knowledge base"
     />
   );
 };

wavefront/client/src/components/ResourceCard.tsx

@@ -1,4 +1,4 @@
-import { TrashIcon } from 'lucide-react';
+import { Pencil, TrashIcon } from 'lucide-react';
 import React from 'react';
 
 export interface ResourceCardMetadata {
@@ -14,7 +14,9 @@ interface ResourceCardProps {
   metadata: ResourceCardMetadata[];
   onClick: () => void;
   onDeleteClick: (e: React.MouseEvent) => void;
+  onEditClick?: (e: React.MouseEvent) => void;
   deleteTitle?: string;
+  editTitle?: string;
 }
 
 const ResourceCard: React.FC<ResourceCardProps> = ({
@@ -23,7 +25,9 @@ const ResourceCard: React.FC<ResourceCardProps> = ({
   metadata,
   onClick,
   onDeleteClick,
+  onEditClick,
   deleteTitle = 'Delete',
+  editTitle = 'Edit',
 }) => {
   return (
     <div
@@ -35,6 +39,15 @@ const ResourceCard: React.FC<ResourceCardProps> = ({
           {title}
         </h3>
         <div className="flex items-center space-x-2">
+          {onEditClick && (
+            <button
+              onClick={onEditClick}
+              className="cursor-pointer rounded p-1 text-gray-600 opacity-0 transition-opacity group-hover:opacity-100 hover:bg-gray-100 hover:text-gray-900"
+              title={editTitle}
+            >
+              <Pencil className="h-4 w-4" />
+            </button>
+          )}
           <button
             onClick={onDeleteClick}
             className="cursor-pointer rounded p-1 text-red-500 opacity-0 transition-opacity group-hover:opacity-100 hover:bg-red-50 hover:text-red-700"

wavefront/client/src/pages/apps/[appId]/knowledge-bases/CreateKnowledgeBaseDialog.tsx

@@ -23,7 +23,6 @@ import { useDashboardStore, useNotifyStore } from '@app/store';
 import { zodResolver } from '@hookform/resolvers/zod';
 import React, { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router';
 import { z } from 'zod';
 
 const createKnowledgeBaseSchema = z.object({
@@ -48,7 +47,6 @@ const CreateKnowledgeBaseDialog: React.FC<CreateKnowledgeBaseDialogProps> = ({
   appId,
   onSuccess,
 }) => {
-  const navigate = useNavigate();
   const { notifySuccess, notifyError } = useNotifyStore();
   const { selectedApp } = useDashboardStore();
 
@@ -91,18 +89,9 @@ const CreateKnowledgeBaseDialog: React.FC<CreateKnowledgeBaseDialogProps> = ({
       const response = await floConsoleService.knowledgeBaseService.createKnowledgeBase(payload);
 
       if (response.data?.data) {
-        notifySuccess(`Knowledge Base '${response.data.data.data.name}' created successfully`);
-
-        if (onSuccess) {
-          onSuccess();
-        }
-
+        notifySuccess(`Knowledge Base '${response.data.data.name}' created successfully`);
+        onSuccess?.();
         onOpenChange(false);
-
-        // Navigate to the created knowledge base
-        if (response.data.data.data.id) {
-          navigate(`/apps/${appId}/knowledge-bases/${response.data.data.data.id}`);
-        }
       } else {
         notifyError('Failed to get knowledge base ID after creation.');
       }

wavefront/client/src/pages/apps/[appId]/knowledge-bases/EditKnowledgeBaseDialog.tsx

@@ -0,0 +1,172 @@
+import floConsoleService from '@app/api';
+import { KbData, UpdateKnowledgeBasePayload } from '@app/api/knowledge-base-service';
+import { Button } from '@app/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@app/components/ui/dialog';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@app/components/ui/form';
+import { Input } from '@app/components/ui/input';
+import { extractErrorMessage } from '@app/lib/utils';
+import { useNotifyStore } from '@app/store';
+import { zodResolver } from '@hookform/resolvers/zod';
+import React, { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const editKnowledgeBaseSchema = z.object({
+  name: z.string().min(1, 'Knowledge base name is required'),
+  type: z.string().min(1, 'Type is required'),
+  description: z.string().optional(),
+});
+
+type EditKnowledgeBaseInput = z.infer<typeof editKnowledgeBaseSchema>;
+
+interface EditKnowledgeBaseDialogProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  knowledgeBase: KbData;
+  onSuccess?: () => void;
+}
+
+const EditKnowledgeBaseDialog: React.FC<EditKnowledgeBaseDialogProps> = ({
+  isOpen,
+  onOpenChange,
+  knowledgeBase,
+  onSuccess,
+}) => {
+  const { notifySuccess, notifyError } = useNotifyStore();
+
+  const form = useForm<EditKnowledgeBaseInput>({
+    resolver: zodResolver(editKnowledgeBaseSchema),
+    defaultValues: {
+      name: '',
+      type: '',
+      description: '',
+    },
+  });
+
+  useEffect(() => {
+    if (knowledgeBase && isOpen) {
+      form.reset({
+        name: knowledgeBase.name || '',
+        type: knowledgeBase.type || '',
+        description: knowledgeBase.description || '',
+      });
+    }
+  }, [knowledgeBase, isOpen, form]);
+
+  const onSubmit = async (data: EditKnowledgeBaseInput) => {
+    try {
+      const payload: UpdateKnowledgeBasePayload = {
+        name: data.name.trim(),
+        description: data.description?.trim() || '',
+        type: data.type.trim(),
+      };
+
+      await floConsoleService.knowledgeBaseService.updateKnowledgeBase(knowledgeBase.id, payload);
+
+      notifySuccess(`Knowledge Base '${payload.name}' updated successfully`);
+      onSuccess?.();
+      onOpenChange(false);
+    } catch (error) {
+      console.error('Error updating knowledge base:', error);
+      const errorMessage = extractErrorMessage(error);
+      notifyError(errorMessage || 'Failed to update knowledge base');
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[90vh] max-w-4xl overflow-y-auto lg:max-w-4xl">
+        <DialogHeader>
+          <DialogTitle>Edit Knowledge Base</DialogTitle>
+          <DialogDescription>Update the details for this knowledge base</DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <div className="grid grid-cols-2 gap-6">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      Knowledge Base Name<span className="text-red-500">*</span>
+                    </FormLabel>
+                    <FormControl>
+                      <Input placeholder="e.g., Customer Support FAQ" {...field} />
+                    </FormControl>
+                    <FormDescription>A unique name for your knowledge base</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="type"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      Type<span className="text-red-500">*</span>
+                    </FormLabel>
+                    <FormControl>
+                      <Input placeholder="e.g., General" {...field} />
+                    </FormControl>
+                    <FormDescription>The type of your knowledge base</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <textarea
+                      rows={3}
+                      placeholder="A brief description of the knowledge base's purpose"
+                      className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormDescription>Provide a description for your knowledge base</FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
+              <Button type="submit" loading={form.formState.isSubmitting}>
+                Save Changes
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default EditKnowledgeBaseDialog;

wavefront/client/src/pages/apps/[appId]/knowledge-bases/index.tsx

@@ -21,6 +21,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import React, { useState } from 'react';
 import { useNavigate, useParams } from 'react-router';
 import CreateKnowledgeBaseDialog from './CreateKnowledgeBaseDialog';
+import EditKnowledgeBaseDialog from './EditKnowledgeBaseDialog';
 
 const KnowledgeBasesListPage: React.FC = () => {
   const { app: appId } = useParams<{ app: string }>();
@@ -32,6 +33,7 @@ const KnowledgeBasesListPage: React.FC = () => {
   const [deleteItem, setDeleteItem] = useState<KbData | null>(null);
   const [deleting, setDeleting] = useState(false);
   const [createDialogOpen, setCreateDialogOpen] = useState(false);
+  const [editItem, setEditItem] = useState<KbData | null>(null);
 
   // Fetch knowledge bases
   const { data: knowledgeBases = [], isLoading: loading } = useGetKnowledgeBases(appId);
@@ -41,6 +43,16 @@ const KnowledgeBasesListPage: React.FC = () => {
     setDeleteItem(kb);
   };
 
+  const handleEditClick = (e: React.MouseEvent, kb: KbData) => {
+    e.stopPropagation();
+    setEditItem(kb);
+  };
+
+  const handleEditSuccess = () => {
+    queryClient.invalidateQueries({ queryKey: getKnowledgeBasesKey(appId as string) });
+    setEditItem(null);
+  };
+
   const handleDeleteConfirm = async () => {
     if (!appId || !deleteItem) return;
 
@@ -72,8 +84,7 @@ const KnowledgeBasesListPage: React.FC = () => {
   };
 
   const handleCreateSuccess = () => {
-    if (!appId) return;
-    queryClient.invalidateQueries({ queryKey: getKnowledgeBasesKey(appId) });
+    queryClient.invalidateQueries({ queryKey: getKnowledgeBasesKey(appId as string) });
     setCreateDialogOpen(false);
   };
 
@@ -143,7 +154,13 @@ const KnowledgeBasesListPage: React.FC = () => {
         ) : (
           <>
             {filteredKnowledgeBases.map((kb) => (
-              <KnowledgeBaseCard key={kb.id} kb={kb} onClick={handleCardClick} onDeleteClick={handleDeleteClick} />
+              <KnowledgeBaseCard
+                key={kb.id}
+                kb={kb}
+                onClick={handleCardClick}
+                onDeleteClick={handleDeleteClick}
+                onEditClick={handleEditClick}
+              />
             ))}
           </>
         )}
@@ -168,6 +185,18 @@ const KnowledgeBasesListPage: React.FC = () => {
           onSuccess={handleCreateSuccess}
         />
       )}
+
+      {/* Edit Knowledge Base Dialog */}
+      {editItem && (
+        <EditKnowledgeBaseDialog
+          isOpen={!!editItem}
+          onOpenChange={(open) => {
+            if (!open) setEditItem(null);
+          }}
+          knowledgeBase={editItem}
+          onSuccess={handleEditSuccess}
+        />
+      )}
     </div>
   );
 };