feat(UI): Implementing File Upload and VectorDB Creation/Configuration in Playground (#3266)

llama_stack/ui/components/chat-playground/vector-db-creator.tsx

@@ -0,0 +1,243 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useAuthClient } from "@/hooks/use-auth-client";
+import type { Model } from "llama-stack-client/resources/models";
+
+interface VectorDBCreatorProps {
+  models: Model[];
+  onVectorDBCreated?: (vectorDbId: string) => void;
+  onCancel?: () => void;
+}
+
+interface VectorDBProvider {
+  api: string;
+  provider_id: string;
+  provider_type: string;
+}
+
+export function VectorDBCreator({
+  models,
+  onVectorDBCreated,
+  onCancel,
+}: VectorDBCreatorProps) {
+  const [vectorDbName, setVectorDbName] = useState("");
+  const [selectedEmbeddingModel, setSelectedEmbeddingModel] = useState("");
+  const [selectedProvider, setSelectedProvider] = useState("faiss");
+  const [availableProviders, setAvailableProviders] = useState<
+    VectorDBProvider[]
+  >([]);
+  const [isCreating, setIsCreating] = useState(false);
+  const [isLoadingProviders, setIsLoadingProviders] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const client = useAuthClient();
+
+  const embeddingModels = models.filter(
+    model => model.model_type === "embedding"
+  );
+
+  useEffect(() => {
+    const fetchProviders = async () => {
+      setIsLoadingProviders(true);
+      try {
+        const providersResponse = await client.providers.list();
+
+        const vectorIoProviders = providersResponse.filter(
+          (provider: VectorDBProvider) => provider.api === "vector_io"
+        );
+
+        setAvailableProviders(vectorIoProviders);
+
+        if (vectorIoProviders.length > 0) {
+          const faissProvider = vectorIoProviders.find(
+            (p: VectorDBProvider) => p.provider_id === "faiss"
+          );
+          setSelectedProvider(
+            faissProvider?.provider_id || vectorIoProviders[0].provider_id
+          );
+        }
+      } catch (err) {
+        console.error("Error fetching providers:", err);
+        setAvailableProviders([
+          {
+            api: "vector_io",
+            provider_id: "faiss",
+            provider_type: "inline::faiss",
+          },
+        ]);
+      } finally {
+        setIsLoadingProviders(false);
+      }
+    };
+
+    fetchProviders();
+  }, [client]);
+
+  const handleCreate = async () => {
+    if (!vectorDbName.trim() || !selectedEmbeddingModel) {
+      setError("Please provide a name and select an embedding model");
+      return;
+    }
+
+    setIsCreating(true);
+    setError(null);
+
+    try {
+      const embeddingModel = embeddingModels.find(
+        m => m.identifier === selectedEmbeddingModel
+      );
+
+      if (!embeddingModel) {
+        throw new Error("Selected embedding model not found");
+      }
+
+      const embeddingDimension = embeddingModel.metadata
+        ?.embedding_dimension as number;
+
+      if (!embeddingDimension) {
+        throw new Error("Embedding dimension not available for selected model");
+      }
+
+      const vectorDbId = vectorDbName.trim() || `vector_db_${Date.now()}`;
+
+      const response = await client.vectorDBs.register({
+        vector_db_id: vectorDbId,
+        embedding_model: selectedEmbeddingModel,
+        embedding_dimension: embeddingDimension,
+        provider_id: selectedProvider,
+      });
+
+      onVectorDBCreated?.(response.identifier || vectorDbId);
+    } catch (err) {
+      console.error("Error creating vector DB:", err);
+      setError(
+        err instanceof Error ? err.message : "Failed to create vector DB"
+      );
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  return (
+    <Card className="p-6 space-y-4">
+      <h3 className="text-lg font-semibold">Create Vector Database</h3>
+
+      <div className="space-y-4">
+        <div>
+          <label className="text-sm font-medium block mb-2">
+            Vector DB Name
+          </label>
+          <Input
+            value={vectorDbName}
+            onChange={e => setVectorDbName(e.target.value)}
+            placeholder="My Vector Database"
+          />
+        </div>
+
+        <div>
+          <label className="text-sm font-medium block mb-2">
+            Embedding Model
+          </label>
+          <Select
+            value={selectedEmbeddingModel}
+            onValueChange={setSelectedEmbeddingModel}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="Select Embedding Model" />
+            </SelectTrigger>
+            <SelectContent>
+              {embeddingModels.map(model => (
+                <SelectItem key={model.identifier} value={model.identifier}>
+                  {model.identifier}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {selectedEmbeddingModel && (
+            <p className="text-xs text-muted-foreground mt-1">
+              Dimension:{" "}
+              {embeddingModels.find(
+                m => m.identifier === selectedEmbeddingModel
+              )?.metadata?.embedding_dimension || "Unknown"}
+            </p>
+          )}
+        </div>
+
+        <div>
+          <label className="text-sm font-medium block mb-2">
+            Vector Database Provider
+          </label>
+          <Select
+            value={selectedProvider}
+            onValueChange={setSelectedProvider}
+            disabled={isLoadingProviders}
+          >
+            <SelectTrigger>
+              <SelectValue
+                placeholder={
+                  isLoadingProviders
+                    ? "Loading providers..."
+                    : "Select Provider"
+                }
+              />
+            </SelectTrigger>
+            <SelectContent>
+              {availableProviders.map(provider => (
+                <SelectItem
+                  key={provider.provider_id}
+                  value={provider.provider_id}
+                >
+                  {provider.provider_id}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {selectedProvider && (
+            <p className="text-xs text-muted-foreground mt-1">
+              Selected provider: {selectedProvider}
+            </p>
+          )}
+        </div>
+
+        {error && (
+          <div className="text-destructive text-sm bg-destructive/10 p-2 rounded">
+            {error}
+          </div>
+        )}
+
+        <div className="flex gap-2 pt-2">
+          <Button
+            onClick={handleCreate}
+            disabled={
+              isCreating || !vectorDbName.trim() || !selectedEmbeddingModel
+            }
+            className="flex-1"
+          >
+            {isCreating ? "Creating..." : "Create Vector DB"}
+          </Button>
+          {onCancel && (
+            <Button variant="outline" onClick={onCancel} className="flex-1">
+              Cancel
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <div className="text-xs text-muted-foreground bg-muted/50 p-3 rounded">
+        <strong>Note:</strong> This will create a new vector database that can
+        be used with RAG tools. After creation, you&apos;ll be able to upload
+        documents and use it for knowledge search in your agent conversations.
+      </div>
+    </Card>
+  );
+}