mirror of
https://github.com/meta-llama/llama-stack.git
synced 2025-12-03 09:53:45 +00:00
feat: allow returning embeddings and metadata from /vector_stores/ methods; disallow changing Provider ID (#4046)
# What does this PR do?
- Updates `/vector_stores/{vector_store_id}/files/{file_id}/content` to
allow returning `embeddings` and `metadata` using the `extra_query`
- Updates the UI accordingly to display them.
- Update UI to support CRUD operations in the Vector Stores section and
adds a new modal exposing the functionality.
- Updates Vector Store update to fail if a user tries to update Provider
ID (which doesn't make sense to allow)
```python
In [1]: client.vector_stores.files.content(
vector_store_id=vector_store.id,
file_id=file.id,
extra_query={"include_embeddings": True, "include_metadata": True}
)
Out [1]: FileContentResponse(attributes={}, content=[Content(text='This is a test document to check if embeddings are generated properly.\n', type='text', embedding=[0.33760684728622437, ...,], chunk_metadata={'chunk_id': '62a63ae0-c202-f060-1b86-0a688995b8d3', 'document_id': 'file-27291dbc679642ac94ffac6d2810c339', 'source': None, 'created_timestamp': 1762053437, 'updated_timestamp': 1762053437, 'chunk_window': '0-13', 'chunk_tokenizer': 'DEFAULT_TIKTOKEN_TOKENIZER', 'chunk_embedding_model': 'sentence-transformers/nomic
-ai/nomic-embed-text-v1.5', 'chunk_embedding_dimension': 768, 'content_token_count': 13, 'metadata_token_count': 9}, metadata={'filename': 'test-embedding.txt', 'chunk_id': '62a63ae0-c202-f060-1b86-0a688995b8d3', 'document_id': 'file-27291dbc679642ac94ffac6d2810c339', 'token_count': 13, 'metadata_token_count': 9})], file_id='file-27291dbc679642ac94ffac6d2810c339', filename='test-embedding.txt')
```
Screenshots of UI are displayed below:
### List Vector Store with Added "Create New Vector Store"
<img width="1912" height="491" alt="Screenshot 2025-11-06 at 10 47
25 PM"
src="https://github.com/user-attachments/assets/a3a3ddd9-758d-4005-ac9c-5047f03916f3"
/>
### Create New Vector Store
<img width="1918" height="1048" alt="Screenshot 2025-11-06 at 10 47
49 PM"
src="https://github.com/user-attachments/assets/b4dc0d31-696f-4e68-b109-27915090f158"
/>
### Edit Vector Store
<img width="1916" height="1355" alt="Screenshot 2025-11-06 at 10 48
32 PM"
src="https://github.com/user-attachments/assets/ec879c63-4cf7-489f-bb1e-57ccc7931414"
/>
### Vector Store Files Contents page (with Embeddings)
<img width="1914" height="849" alt="Screenshot 2025-11-06 at 11 54
32 PM"
src="https://github.com/user-attachments/assets/3095520d-0e90-41f7-83bd-652f6c3fbf27"
/>
### Vector Store Files Contents Details page (with Embeddings)
<img width="1916" height="1221" alt="Screenshot 2025-11-06 at 11 55
00 PM"
src="https://github.com/user-attachments/assets/e71dbdc5-5b49-472b-a43a-5785f58d196c"
/>
<!-- If resolving an issue, uncomment and update the line below -->
<!-- Closes #[issue-number] -->
## Test Plan
Tests added for Middleware extension and Provider failures.
---------
Signed-off-by: Francisco Javier Arceo <farceo@redhat.com>
This commit is contained in:
Francisco Arceo
GitHub
parent
37853ca558
commit
eb3f9ac278
17 changed files with 1161 additions and 125 deletions
|
|
@ -8,6 +8,9 @@ import type {
|
|||
import { useRouter } from "next/navigation";
|
||||
import { usePagination } from "@/hooks/use-pagination";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Plus, Trash2, Search, Edit, X } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
|
|
@ -17,9 +20,21 @@ import {
|
|||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { useAuthClient } from "@/hooks/use-auth-client";
|
||||
import {
|
||||
VectorStoreEditor,
|
||||
VectorStoreFormData,
|
||||
} from "@/components/vector-stores/vector-store-editor";
|
||||
|
||||
export default function VectorStoresPage() {
|
||||
const router = useRouter();
|
||||
const client = useAuthClient();
|
||||
const [deletingStores, setDeletingStores] = useState<Set<string>>(new Set());
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [showVectorStoreModal, setShowVectorStoreModal] = useState(false);
|
||||
const [editingStore, setEditingStore] = useState<VectorStore | null>(null);
|
||||
const [modalError, setModalError] = useState<string | null>(null);
|
||||
const [showSuccessState, setShowSuccessState] = useState(false);
|
||||
const {
|
||||
data: stores,
|
||||
status,
|
||||
|
|
@ -47,6 +62,142 @@ export default function VectorStoresPage() {
|
|||
}
|
||||
}, [status, hasMore, loadMore]);
|
||||
|
||||
// Handle ESC key to close modal
|
||||
React.useEffect(() => {
|
||||
const handleEscape = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape" && showVectorStoreModal) {
|
||||
handleCancel();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("keydown", handleEscape);
|
||||
return () => document.removeEventListener("keydown", handleEscape);
|
||||
}, [showVectorStoreModal]);
|
||||
|
||||
const handleDeleteVectorStore = async (storeId: string) => {
|
||||
if (
|
||||
!confirm(
|
||||
"Are you sure you want to delete this vector store? This action cannot be undone."
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
setDeletingStores(prev => new Set([...prev, storeId]));
|
||||
|
||||
try {
|
||||
await client.vectorStores.delete(storeId);
|
||||
// Reload the data to reflect the deletion
|
||||
window.location.reload();
|
||||
} catch (err: unknown) {
|
||||
console.error("Failed to delete vector store:", err);
|
||||
const errorMessage = err instanceof Error ? err.message : "Unknown error";
|
||||
alert(`Failed to delete vector store: ${errorMessage}`);
|
||||
} finally {
|
||||
setDeletingStores(prev => {
|
||||
const newSet = new Set(prev);
|
||||
newSet.delete(storeId);
|
||||
return newSet;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveVectorStore = async (formData: VectorStoreFormData) => {
|
||||
try {
|
||||
setModalError(null);
|
||||
|
||||
if (editingStore) {
|
||||
// Update existing vector store
|
||||
const updateParams: {
|
||||
name?: string;
|
||||
extra_body?: Record<string, unknown>;
|
||||
} = {};
|
||||
|
||||
// Only include fields that have changed or are provided
|
||||
if (formData.name && formData.name !== editingStore.name) {
|
||||
updateParams.name = formData.name;
|
||||
}
|
||||
|
||||
// Add all parameters to extra_body (except provider_id which can't be changed)
|
||||
const extraBody: Record<string, unknown> = {};
|
||||
if (formData.embedding_model) {
|
||||
extraBody.embedding_model = formData.embedding_model;
|
||||
}
|
||||
if (formData.embedding_dimension) {
|
||||
extraBody.embedding_dimension = formData.embedding_dimension;
|
||||
}
|
||||
|
||||
if (Object.keys(extraBody).length > 0) {
|
||||
updateParams.extra_body = extraBody;
|
||||
}
|
||||
|
||||
await client.vectorStores.update(editingStore.id, updateParams);
|
||||
|
||||
// Show success state with close button
|
||||
setShowSuccessState(true);
|
||||
setModalError(
|
||||
"✅ Vector store updated successfully! You can close this modal and refresh the page to see changes."
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const createParams: {
|
||||
name?: string;
|
||||
provider_id?: string;
|
||||
extra_body?: Record<string, unknown>;
|
||||
} = {
|
||||
name: formData.name || undefined,
|
||||
};
|
||||
|
||||
// Extract provider_id to top-level (like Python client does)
|
||||
if (formData.provider_id) {
|
||||
createParams.provider_id = formData.provider_id;
|
||||
}
|
||||
|
||||
// Add remaining parameters to extra_body
|
||||
const extraBody: Record<string, unknown> = {};
|
||||
if (formData.provider_id) {
|
||||
extraBody.provider_id = formData.provider_id;
|
||||
}
|
||||
if (formData.embedding_model) {
|
||||
extraBody.embedding_model = formData.embedding_model;
|
||||
}
|
||||
if (formData.embedding_dimension) {
|
||||
extraBody.embedding_dimension = formData.embedding_dimension;
|
||||
}
|
||||
|
||||
if (Object.keys(extraBody).length > 0) {
|
||||
createParams.extra_body = extraBody;
|
||||
}
|
||||
|
||||
await client.vectorStores.create(createParams);
|
||||
|
||||
// Show success state with close button
|
||||
setShowSuccessState(true);
|
||||
setModalError(
|
||||
"✅ Vector store created successfully! You can close this modal and refresh the page to see changes."
|
||||
);
|
||||
} catch (err: unknown) {
|
||||
console.error("Failed to create vector store:", err);
|
||||
const errorMessage =
|
||||
err instanceof Error ? err.message : "Failed to create vector store";
|
||||
setModalError(errorMessage);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditVectorStore = (store: VectorStore) => {
|
||||
setEditingStore(store);
|
||||
setShowVectorStoreModal(true);
|
||||
setModalError(null);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setShowVectorStoreModal(false);
|
||||
setEditingStore(null);
|
||||
setModalError(null);
|
||||
setShowSuccessState(false);
|
||||
};
|
||||
|
||||
const renderContent = () => {
|
||||
if (status === "loading") {
|
||||
return (
|
||||
|
|
@ -66,73 +217,190 @@ export default function VectorStoresPage() {
|
|||
return <p>No vector stores found.</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-auto flex-1 min-h-0">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Created</TableHead>
|
||||
<TableHead>Completed</TableHead>
|
||||
<TableHead>Cancelled</TableHead>
|
||||
<TableHead>Failed</TableHead>
|
||||
<TableHead>In Progress</TableHead>
|
||||
<TableHead>Total</TableHead>
|
||||
<TableHead>Usage Bytes</TableHead>
|
||||
<TableHead>Provider ID</TableHead>
|
||||
<TableHead>Provider Vector DB ID</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{stores.map(store => {
|
||||
const fileCounts = store.file_counts;
|
||||
const metadata = store.metadata || {};
|
||||
const providerId = metadata.provider_id ?? "";
|
||||
const providerDbId = metadata.provider_vector_db_id ?? "";
|
||||
// Filter stores based on search term
|
||||
const filteredStores = stores.filter(store => {
|
||||
if (!searchTerm) return true;
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
key={store.id}
|
||||
onClick={() => router.push(`/logs/vector-stores/${store.id}`)}
|
||||
className="cursor-pointer hover:bg-muted/50"
|
||||
>
|
||||
<TableCell>
|
||||
<Button
|
||||
variant="link"
|
||||
className="p-0 h-auto font-mono text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
|
||||
onClick={() =>
|
||||
router.push(`/logs/vector-stores/${store.id}`)
|
||||
}
|
||||
>
|
||||
{store.id}
|
||||
</Button>
|
||||
</TableCell>
|
||||
<TableCell>{store.name}</TableCell>
|
||||
<TableCell>
|
||||
{new Date(store.created_at * 1000).toLocaleString()}
|
||||
</TableCell>
|
||||
<TableCell>{fileCounts.completed}</TableCell>
|
||||
<TableCell>{fileCounts.cancelled}</TableCell>
|
||||
<TableCell>{fileCounts.failed}</TableCell>
|
||||
<TableCell>{fileCounts.in_progress}</TableCell>
|
||||
<TableCell>{fileCounts.total}</TableCell>
|
||||
<TableCell>{store.usage_bytes}</TableCell>
|
||||
<TableCell>{providerId}</TableCell>
|
||||
<TableCell>{providerDbId}</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
return (
|
||||
store.id.toLowerCase().includes(searchLower) ||
|
||||
(store.name && store.name.toLowerCase().includes(searchLower)) ||
|
||||
(store.metadata?.provider_id &&
|
||||
String(store.metadata.provider_id)
|
||||
.toLowerCase()
|
||||
.includes(searchLower)) ||
|
||||
(store.metadata?.provider_vector_db_id &&
|
||||
String(store.metadata.provider_vector_db_id)
|
||||
.toLowerCase()
|
||||
.includes(searchLower))
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Search Bar */}
|
||||
<div className="relative flex-1 max-w-md">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
|
||||
<Input
|
||||
placeholder="Search vector stores..."
|
||||
value={searchTerm}
|
||||
onChange={e => setSearchTerm(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="overflow-auto flex-1 min-h-0">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Created</TableHead>
|
||||
<TableHead>Completed</TableHead>
|
||||
<TableHead>Cancelled</TableHead>
|
||||
<TableHead>Failed</TableHead>
|
||||
<TableHead>In Progress</TableHead>
|
||||
<TableHead>Total</TableHead>
|
||||
<TableHead>Usage Bytes</TableHead>
|
||||
<TableHead>Provider ID</TableHead>
|
||||
<TableHead>Provider Vector DB ID</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredStores.map(store => {
|
||||
const fileCounts = store.file_counts;
|
||||
const metadata = store.metadata || {};
|
||||
const providerId = metadata.provider_id ?? "";
|
||||
const providerDbId = metadata.provider_vector_db_id ?? "";
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
key={store.id}
|
||||
onClick={() =>
|
||||
router.push(`/logs/vector-stores/${store.id}`)
|
||||
}
|
||||
className="cursor-pointer hover:bg-muted/50"
|
||||
>
|
||||
<TableCell>
|
||||
<Button
|
||||
variant="link"
|
||||
className="p-0 h-auto font-mono text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
|
||||
onClick={() =>
|
||||
router.push(`/logs/vector-stores/${store.id}`)
|
||||
}
|
||||
>
|
||||
{store.id}
|
||||
</Button>
|
||||
</TableCell>
|
||||
<TableCell>{store.name}</TableCell>
|
||||
<TableCell>
|
||||
{new Date(store.created_at * 1000).toLocaleString()}
|
||||
</TableCell>
|
||||
<TableCell>{fileCounts.completed}</TableCell>
|
||||
<TableCell>{fileCounts.cancelled}</TableCell>
|
||||
<TableCell>{fileCounts.failed}</TableCell>
|
||||
<TableCell>{fileCounts.in_progress}</TableCell>
|
||||
<TableCell>{fileCounts.total}</TableCell>
|
||||
<TableCell>{store.usage_bytes}</TableCell>
|
||||
<TableCell>{providerId}</TableCell>
|
||||
<TableCell>{providerDbId}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
handleEditVectorStore(store);
|
||||
}}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
handleDeleteVectorStore(store.id);
|
||||
}}
|
||||
disabled={deletingStores.has(store.id)}
|
||||
>
|
||||
{deletingStores.has(store.id) ? (
|
||||
"Deleting..."
|
||||
) : (
|
||||
<>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-2xl font-semibold">Vector Stores</h1>
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-semibold">Vector Stores</h1>
|
||||
<Button
|
||||
onClick={() => setShowVectorStoreModal(true)}
|
||||
disabled={status === "loading"}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
New Vector Store
|
||||
</Button>
|
||||
</div>
|
||||
{renderContent()}
|
||||
|
||||
{/* Create Vector Store Modal */}
|
||||
{showVectorStoreModal && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-background border rounded-lg shadow-lg max-w-2xl w-full mx-4 max-h-[90vh] overflow-hidden">
|
||||
<div className="p-6 border-b flex items-center justify-between">
|
||||
<h2 className="text-2xl font-bold">
|
||||
{editingStore ? "Edit Vector Store" : "Create New Vector Store"}
|
||||
</h2>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleCancel}
|
||||
className="p-1 h-auto"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="p-6 overflow-y-auto max-h-[calc(90vh-120px)]">
|
||||
<VectorStoreEditor
|
||||
onSave={handleSaveVectorStore}
|
||||
onCancel={handleCancel}
|
||||
error={modalError}
|
||||
showSuccessState={showSuccessState}
|
||||
isEditing={!!editingStore}
|
||||
initialData={
|
||||
editingStore
|
||||
? {
|
||||
name: editingStore.name || "",
|
||||
embedding_model:
|
||||
editingStore.metadata?.embedding_model || "",
|
||||
embedding_dimension:
|
||||
editingStore.metadata?.embedding_dimension || 768,
|
||||
provider_id: editingStore.metadata?.provider_id || "",
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from "react";
|
|||
import { render, screen, fireEvent } from "@testing-library/react";
|
||||
import "@testing-library/jest-dom";
|
||||
import { PromptEditor } from "./prompt-editor";
|
||||
import type { Prompt, PromptFormData } from "./types";
|
||||
import type { Prompt } from "./types";
|
||||
|
||||
describe("PromptEditor", () => {
|
||||
const mockOnSave = jest.fn();
|
||||
|
|
|
|||
|
|
@ -12,6 +12,20 @@ jest.mock("next/navigation", () => ({
|
|||
}),
|
||||
}));
|
||||
|
||||
// Mock NextAuth
|
||||
jest.mock("next-auth/react", () => ({
|
||||
useSession: () => ({
|
||||
data: {
|
||||
accessToken: "mock-access-token",
|
||||
user: {
|
||||
id: "mock-user-id",
|
||||
email: "test@example.com",
|
||||
},
|
||||
},
|
||||
status: "authenticated",
|
||||
}),
|
||||
}));
|
||||
|
||||
describe("VectorStoreDetailView", () => {
|
||||
const defaultProps = {
|
||||
store: null,
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState, useEffect } from "react";
|
||||
import type { VectorStore } from "llama-stack-client/resources/vector-stores/vector-stores";
|
||||
import type { VectorStoreFile } from "llama-stack-client/resources/vector-stores/files";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useAuthClient } from "@/hooks/use-auth-client";
|
||||
import { Edit2, Trash2, X } from "lucide-react";
|
||||
import {
|
||||
DetailLoadingView,
|
||||
DetailErrorView,
|
||||
DetailNotFoundView,
|
||||
DetailLayout,
|
||||
PropertiesCard,
|
||||
PropertyItem,
|
||||
} from "@/components/layout/detail-layout";
|
||||
|
|
@ -23,6 +25,7 @@ import {
|
|||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { VectorStoreEditor, VectorStoreFormData } from "./vector-store-editor";
|
||||
|
||||
interface VectorStoreDetailViewProps {
|
||||
store: VectorStore | null;
|
||||
|
|
@ -43,21 +46,122 @@ export function VectorStoreDetailView({
|
|||
errorFiles,
|
||||
id,
|
||||
}: VectorStoreDetailViewProps) {
|
||||
const title = "Vector Store Details";
|
||||
const router = useRouter();
|
||||
const client = useAuthClient();
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [showEditModal, setShowEditModal] = useState(false);
|
||||
const [modalError, setModalError] = useState<string | null>(null);
|
||||
const [showSuccessState, setShowSuccessState] = useState(false);
|
||||
|
||||
// Handle ESC key to close modal
|
||||
useEffect(() => {
|
||||
const handleEscape = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape" && showEditModal) {
|
||||
handleCancel();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("keydown", handleEscape);
|
||||
return () => document.removeEventListener("keydown", handleEscape);
|
||||
}, [showEditModal]);
|
||||
|
||||
const handleFileClick = (fileId: string) => {
|
||||
router.push(`/logs/vector-stores/${id}/files/${fileId}`);
|
||||
};
|
||||
|
||||
const handleEditVectorStore = () => {
|
||||
setShowEditModal(true);
|
||||
setModalError(null);
|
||||
setShowSuccessState(false);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setShowEditModal(false);
|
||||
setModalError(null);
|
||||
setShowSuccessState(false);
|
||||
};
|
||||
|
||||
const handleSaveVectorStore = async (formData: VectorStoreFormData) => {
|
||||
try {
|
||||
setModalError(null);
|
||||
|
||||
// Update existing vector store (same logic as list page)
|
||||
const updateParams: {
|
||||
name?: string;
|
||||
extra_body?: Record<string, unknown>;
|
||||
} = {};
|
||||
|
||||
// Only include fields that have changed or are provided
|
||||
if (formData.name && formData.name !== store?.name) {
|
||||
updateParams.name = formData.name;
|
||||
}
|
||||
|
||||
// Add all parameters to extra_body (except provider_id which can't be changed)
|
||||
const extraBody: Record<string, unknown> = {};
|
||||
if (formData.embedding_model) {
|
||||
extraBody.embedding_model = formData.embedding_model;
|
||||
}
|
||||
if (formData.embedding_dimension) {
|
||||
extraBody.embedding_dimension = formData.embedding_dimension;
|
||||
}
|
||||
|
||||
if (Object.keys(extraBody).length > 0) {
|
||||
updateParams.extra_body = extraBody;
|
||||
}
|
||||
|
||||
await client.vectorStores.update(id, updateParams);
|
||||
|
||||
// Show success state
|
||||
setShowSuccessState(true);
|
||||
setModalError(
|
||||
"✅ Vector store updated successfully! You can close this modal and refresh the page to see changes."
|
||||
);
|
||||
} catch (err: unknown) {
|
||||
console.error("Failed to update vector store:", err);
|
||||
const errorMessage =
|
||||
err instanceof Error ? err.message : "Failed to update vector store";
|
||||
setModalError(errorMessage);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteVectorStore = async () => {
|
||||
if (
|
||||
!confirm(
|
||||
"Are you sure you want to delete this vector store? This action cannot be undone."
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsDeleting(true);
|
||||
|
||||
try {
|
||||
await client.vectorStores.delete(id);
|
||||
// Redirect to the vector stores list after successful deletion
|
||||
router.push("/logs/vector-stores");
|
||||
} catch (err: unknown) {
|
||||
console.error("Failed to delete vector store:", err);
|
||||
const errorMessage = err instanceof Error ? err.message : "Unknown error";
|
||||
alert(`Failed to delete vector store: ${errorMessage}`);
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (errorStore) {
|
||||
return <DetailErrorView title={title} id={id} error={errorStore} />;
|
||||
return (
|
||||
<DetailErrorView
|
||||
title="Vector Store Details"
|
||||
id={id}
|
||||
error={errorStore}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (isLoadingStore) {
|
||||
return <DetailLoadingView title={title} />;
|
||||
return <DetailLoadingView />;
|
||||
}
|
||||
if (!store) {
|
||||
return <DetailNotFoundView title={title} id={id} />;
|
||||
return <DetailNotFoundView title="Vector Store Details" id={id} />;
|
||||
}
|
||||
|
||||
const mainContent = (
|
||||
|
|
@ -138,6 +242,73 @@ export function VectorStoreDetailView({
|
|||
);
|
||||
|
||||
return (
|
||||
<DetailLayout title={title} mainContent={mainContent} sidebar={sidebar} />
|
||||
<>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1 className="text-2xl font-bold">Vector Store Details</h1>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleEditVectorStore}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
<Edit2 className="h-4 w-4 mr-2" />
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleDeleteVectorStore}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
{isDeleting ? (
|
||||
"Deleting..."
|
||||
) : (
|
||||
<>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Delete
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col md:flex-row gap-6">
|
||||
<div className="flex-grow md:w-2/3 space-y-6">{mainContent}</div>
|
||||
<div className="md:w-1/3">{sidebar}</div>
|
||||
</div>
|
||||
|
||||
{/* Edit Vector Store Modal */}
|
||||
{showEditModal && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-background border rounded-lg shadow-lg max-w-2xl w-full mx-4 max-h-[90vh] overflow-hidden">
|
||||
<div className="p-6 border-b flex items-center justify-between">
|
||||
<h2 className="text-2xl font-bold">Edit Vector Store</h2>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleCancel}
|
||||
className="p-1 h-auto"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="p-6 overflow-y-auto max-h-[calc(90vh-120px)]">
|
||||
<VectorStoreEditor
|
||||
onSave={handleSaveVectorStore}
|
||||
onCancel={handleCancel}
|
||||
error={modalError}
|
||||
showSuccessState={showSuccessState}
|
||||
isEditing={true}
|
||||
initialData={{
|
||||
name: store?.name || "",
|
||||
embedding_model: store?.metadata?.embedding_model || "",
|
||||
embedding_dimension:
|
||||
store?.metadata?.embedding_dimension || 768,
|
||||
provider_id: store?.metadata?.provider_id || "",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,235 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Card, CardContent } 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";
|
||||
|
||||
export interface VectorStoreFormData {
|
||||
name: string;
|
||||
embedding_model?: string;
|
||||
embedding_dimension?: number;
|
||||
provider_id?: string;
|
||||
}
|
||||
|
||||
interface VectorStoreEditorProps {
|
||||
onSave: (formData: VectorStoreFormData) => Promise<void>;
|
||||
onCancel: () => void;
|
||||
error?: string | null;
|
||||
initialData?: VectorStoreFormData;
|
||||
showSuccessState?: boolean;
|
||||
isEditing?: boolean;
|
||||
}
|
||||
|
||||
export function VectorStoreEditor({
|
||||
onSave,
|
||||
onCancel,
|
||||
error,
|
||||
initialData,
|
||||
showSuccessState,
|
||||
isEditing = false,
|
||||
}: VectorStoreEditorProps) {
|
||||
const client = useAuthClient();
|
||||
const [formData, setFormData] = useState<VectorStoreFormData>(
|
||||
initialData || {
|
||||
name: "",
|
||||
embedding_model: "",
|
||||
embedding_dimension: 768,
|
||||
provider_id: "",
|
||||
}
|
||||
);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [models, setModels] = useState<Model[]>([]);
|
||||
const [modelsLoading, setModelsLoading] = useState(true);
|
||||
const [modelsError, setModelsError] = useState<string | null>(null);
|
||||
|
||||
const embeddingModels = models.filter(
|
||||
model => model.custom_metadata?.model_type === "embedding"
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchModels = async () => {
|
||||
try {
|
||||
setModelsLoading(true);
|
||||
setModelsError(null);
|
||||
const modelList = await client.models.list();
|
||||
setModels(modelList);
|
||||
|
||||
// Set default embedding model if available
|
||||
const embeddingModelsList = modelList.filter(model => {
|
||||
return model.custom_metadata?.model_type === "embedding";
|
||||
});
|
||||
if (embeddingModelsList.length > 0 && !formData.embedding_model) {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
embedding_model: embeddingModelsList[0].id,
|
||||
}));
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to load models:", err);
|
||||
setModelsError(
|
||||
err instanceof Error ? err.message : "Failed to load models"
|
||||
);
|
||||
} finally {
|
||||
setModelsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchModels();
|
||||
}, [client]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
await onSave(formData);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={formData.name}
|
||||
onChange={e => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="Enter vector store name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="embedding_model">Embedding Model (Optional)</Label>
|
||||
{modelsLoading ? (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Loading models... ({models.length} loaded)
|
||||
</div>
|
||||
) : modelsError ? (
|
||||
<div className="text-sm text-destructive">
|
||||
Error: {modelsError}
|
||||
</div>
|
||||
) : embeddingModels.length === 0 ? (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
No embedding models available ({models.length} total models)
|
||||
</div>
|
||||
) : (
|
||||
<Select
|
||||
value={formData.embedding_model}
|
||||
onValueChange={value =>
|
||||
setFormData({ ...formData, embedding_model: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Embedding Model" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{embeddingModels.map((model, index) => (
|
||||
<SelectItem key={model.id} value={model.id}>
|
||||
{model.id}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
{formData.embedding_model && (
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Dimension:{" "}
|
||||
{embeddingModels.find(m => m.id === formData.embedding_model)
|
||||
?.custom_metadata?.embedding_dimension || "Unknown"}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="embedding_dimension">
|
||||
Embedding Dimension (Optional)
|
||||
</Label>
|
||||
<Input
|
||||
id="embedding_dimension"
|
||||
type="number"
|
||||
value={formData.embedding_dimension}
|
||||
onChange={e =>
|
||||
setFormData({
|
||||
...formData,
|
||||
embedding_dimension: parseInt(e.target.value) || 768,
|
||||
})
|
||||
}
|
||||
placeholder="768"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="provider_id">
|
||||
Provider ID {isEditing ? "(Read-only)" : "(Optional)"}
|
||||
</Label>
|
||||
<Input
|
||||
id="provider_id"
|
||||
value={formData.provider_id}
|
||||
onChange={e =>
|
||||
setFormData({ ...formData, provider_id: e.target.value })
|
||||
}
|
||||
placeholder="e.g., faiss, chroma, sqlite"
|
||||
disabled={isEditing}
|
||||
/>
|
||||
{isEditing && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Provider ID cannot be changed after vector store creation
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div
|
||||
className={`text-sm p-3 rounded ${
|
||||
error.startsWith("✅")
|
||||
? "text-green-700 bg-green-50 border border-green-200"
|
||||
: "text-destructive bg-destructive/10"
|
||||
}`}
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2 pt-4">
|
||||
{showSuccessState ? (
|
||||
<Button type="button" onClick={onCancel}>
|
||||
Close
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<Button type="submit" disabled={loading}>
|
||||
{loading
|
||||
? initialData
|
||||
? "Updating..."
|
||||
: "Creating..."
|
||||
: initialData
|
||||
? "Update Vector Store"
|
||||
: "Create Vector Store"}
|
||||
</Button>
|
||||
<Button type="button" variant="outline" onClick={onCancel}>
|
||||
Cancel
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -34,9 +34,35 @@ export class ContentsAPI {
|
|||
|
||||
async getFileContents(
|
||||
vectorStoreId: string,
|
||||
fileId: string
|
||||
fileId: string,
|
||||
includeEmbeddings: boolean = true,
|
||||
includeMetadata: boolean = true
|
||||
): Promise<VectorStoreContentsResponse> {
|
||||
return this.client.vectorStores.files.content(vectorStoreId, fileId);
|
||||
try {
|
||||
// Use query parameters to pass embeddings and metadata flags (OpenAI-compatible pattern)
|
||||
const extraQuery: Record<string, boolean> = {};
|
||||
if (includeEmbeddings) {
|
||||
extraQuery.include_embeddings = true;
|
||||
}
|
||||
if (includeMetadata) {
|
||||
extraQuery.include_metadata = true;
|
||||
}
|
||||
|
||||
const result = await this.client.vectorStores.files.content(
|
||||
vectorStoreId,
|
||||
fileId,
|
||||
{
|
||||
query: {
|
||||
include_embeddings: includeEmbeddings,
|
||||
include_metadata: includeMetadata,
|
||||
},
|
||||
}
|
||||
);
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error("ContentsAPI.getFileContents error:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async getContent(
|
||||
|
|
@ -70,11 +96,15 @@ export class ContentsAPI {
|
|||
order?: string;
|
||||
after?: string;
|
||||
before?: string;
|
||||
includeEmbeddings?: boolean;
|
||||
includeMetadata?: boolean;
|
||||
}
|
||||
): Promise<VectorStoreListContentsResponse> {
|
||||
const fileContents = await this.client.vectorStores.files.content(
|
||||
const fileContents = await this.getFileContents(
|
||||
vectorStoreId,
|
||||
fileId
|
||||
fileId,
|
||||
options?.includeEmbeddings ?? true,
|
||||
options?.includeMetadata ?? true
|
||||
);
|
||||
const contentItems: VectorStoreContentItem[] = [];
|
||||
|
||||
|
|
@ -82,7 +112,7 @@ export class ContentsAPI {
|
|||
const rawContent = content as Record<string, unknown>;
|
||||
|
||||
// Extract actual fields from the API response
|
||||
const embedding = rawContent.embedding || undefined;
|
||||
const embedding = rawContent.embedding as number[] | undefined;
|
||||
const created_timestamp =
|
||||
rawContent.created_timestamp ||
|
||||
rawContent.created_at ||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue