mirror of
https://github.com/meta-llama/llama-stack.git
synced 2025-12-17 14:39:47 +00:00
fixing linter
Signed-off-by: Francisco Javier Arceo <farceo@redhat.com>
This commit is contained in:
Francisco Javier Arceo
parent
709dd76f74
commit
6fa725a833
13 changed files with 1141 additions and 320 deletions
|
|
@ -1,47 +1,45 @@
|
|||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const { url } = await request.json();
|
||||
|
||||
if (!url || typeof url !== 'string') {
|
||||
return NextResponse.json(
|
||||
{ error: 'URL is required' },
|
||||
{ status: 400 }
|
||||
);
|
||||
if (!url || typeof url !== "string") {
|
||||
return NextResponse.json({ error: "URL is required" }, { status: 400 });
|
||||
}
|
||||
|
||||
// Fetch the URL content
|
||||
const response = await fetch(url, {
|
||||
headers: {
|
||||
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
|
||||
}
|
||||
"User-Agent":
|
||||
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36",
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const contentType = response.headers.get('content-type') || '';
|
||||
const contentType = response.headers.get("content-type") || "";
|
||||
let content: string;
|
||||
|
||||
if (contentType.includes('application/json')) {
|
||||
if (contentType.includes("application/json")) {
|
||||
const json = await response.json();
|
||||
content = JSON.stringify(json, null, 2);
|
||||
} else if (contentType.includes('text/html')) {
|
||||
} else if (contentType.includes("text/html")) {
|
||||
const html = await response.text();
|
||||
// Basic HTML to text conversion - remove tags and decode entities
|
||||
content = html
|
||||
.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
|
||||
.replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, '')
|
||||
.replace(/<[^>]*>/g, '')
|
||||
.replace(/ /g, ' ')
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "")
|
||||
.replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, "")
|
||||
.replace(/<[^>]*>/g, "")
|
||||
.replace(/ /g, " ")
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, "'")
|
||||
.replace(/\s+/g, ' ')
|
||||
.replace(/\s+/g, " ")
|
||||
.trim();
|
||||
} else {
|
||||
content = await response.text();
|
||||
|
|
@ -49,9 +47,9 @@ export async function POST(request: NextRequest) {
|
|||
|
||||
return NextResponse.json({ content });
|
||||
} catch (error) {
|
||||
console.error('Error fetching URL:', error);
|
||||
console.error("Error fetching URL:", error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to fetch URL content' },
|
||||
{ error: "Failed to fetch URL content" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
|
|
|
|||
51
llama_stack/ui/app/api/upload-document/route.ts
Normal file
51
llama_stack/ui/app/api/upload-document/route.ts
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import { NextRequest, NextResponse } from "next/server";
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const formData = await request.formData();
|
||||
const file = formData.get("file") as File;
|
||||
const vectorDbId = formData.get("vectorDbId") as string;
|
||||
|
||||
if (!file || !vectorDbId) {
|
||||
return NextResponse.json(
|
||||
{ error: "File and vectorDbId are required" },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Read file content based on type
|
||||
let content: string;
|
||||
const mimeType = file.type || "application/octet-stream";
|
||||
|
||||
if (mimeType === "text/plain" || mimeType === "text/markdown") {
|
||||
content = await file.text();
|
||||
} else if (mimeType === "application/pdf") {
|
||||
// For PDFs, convert to base64 on the server side
|
||||
const arrayBuffer = await file.arrayBuffer();
|
||||
const bytes = new Uint8Array(arrayBuffer);
|
||||
let binary = "";
|
||||
for (let i = 0; i < bytes.byteLength; i++) {
|
||||
binary += String.fromCharCode(bytes[i]);
|
||||
}
|
||||
const base64 = btoa(binary);
|
||||
content = `data:${mimeType};base64,${base64}`;
|
||||
} else {
|
||||
// Try to read as text
|
||||
content = await file.text();
|
||||
}
|
||||
|
||||
// Return the processed content for the client to send to RagTool
|
||||
return NextResponse.json({
|
||||
content,
|
||||
mimeType,
|
||||
fileName: file.name,
|
||||
fileSize: file.size,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error processing file upload:", error);
|
||||
return NextResponse.json(
|
||||
{ error: "Failed to process file upload" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -16,69 +16,96 @@ import { useAuthClient } from "@/hooks/use-auth-client";
|
|||
import type { CompletionCreateParams } from "llama-stack-client/resources/chat/completions";
|
||||
import type { Model } from "llama-stack-client/resources/models";
|
||||
import type { VectorDBListResponse } from "llama-stack-client/resources/vector-dbs";
|
||||
import { VectorDbManager } from "@/components/vector-db/vector-db-manager";
|
||||
import { SessionManager, SessionUtils } from "@/components/chat-playground/session-manager";
|
||||
import { VectorDbManager } from "@/components/vector-db/vector-db-manager-simple";
|
||||
import {
|
||||
SessionManager,
|
||||
SessionUtils,
|
||||
} from "@/components/chat-playground/session-manager";
|
||||
import { DocumentUploader } from "@/components/chat-playground/document-uploader";
|
||||
|
||||
/**
|
||||
* Unified Chat Playground
|
||||
* - Keeps session + system message + VectorDB/RAG & document upload from version B
|
||||
* - Preserves simple message flow & suggestions/append helpers from version A
|
||||
* - Uses a single state source of truth: currentSession
|
||||
*/
|
||||
|
||||
interface ChatSession {
|
||||
id: string;
|
||||
name: string;
|
||||
messages: Message[];
|
||||
selectedModel: string;
|
||||
selectedVectorDb: string;
|
||||
selectedVectorDb: string; // "none" disables RAG
|
||||
systemMessage: string;
|
||||
createdAt: number;
|
||||
updatedAt: number;
|
||||
}
|
||||
|
||||
export default function ChatPlaygroundPage() {
|
||||
const [currentSession, setCurrentSession] = useState<ChatSession | null>(null);
|
||||
const [currentSession, setCurrentSession] = useState<ChatSession | null>(
|
||||
null
|
||||
);
|
||||
const [input, setInput] = useState("");
|
||||
const [isGenerating, setIsGenerating] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [models, setModels] = useState<Model[]>([]);
|
||||
const [selectedModel, setSelectedModel] = useState<string>("");
|
||||
const [modelsLoading, setModelsLoading] = useState(true);
|
||||
const [modelsError, setModelsError] = useState<string | null>(null);
|
||||
|
||||
const [vectorDbs, setVectorDbs] = useState<VectorDBListResponse>([]);
|
||||
const [selectedVectorDb, setSelectedVectorDb] = useState<string>("");
|
||||
const [vectorDbsLoading, setVectorDbsLoading] = useState(true);
|
||||
const [vectorDbsError, setVectorDbsError] = useState<string | null>(null);
|
||||
const client = useAuthClient();
|
||||
|
||||
const client = useAuthClient();
|
||||
const isModelsLoading = modelsLoading ?? true;
|
||||
|
||||
// Load current session on mount
|
||||
// --- Session bootstrapping ---
|
||||
useEffect(() => {
|
||||
const savedSession = SessionUtils.loadCurrentSession();
|
||||
if (savedSession) {
|
||||
setCurrentSession(savedSession);
|
||||
const saved = SessionUtils.loadCurrentSession();
|
||||
if (saved) {
|
||||
setCurrentSession(saved);
|
||||
} else {
|
||||
// Create default session if none exists - will be updated with model when models load
|
||||
const defaultSession = SessionUtils.createDefaultSession();
|
||||
const def = SessionUtils.createDefaultSession();
|
||||
// ensure defaults align with our fields
|
||||
const defaultSession: ChatSession = {
|
||||
...def,
|
||||
selectedModel: "",
|
||||
selectedVectorDb: "none",
|
||||
systemMessage: def.systemMessage || "You are a helpful assistant.",
|
||||
};
|
||||
setCurrentSession(defaultSession);
|
||||
SessionUtils.saveCurrentSession(defaultSession);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Save session when it changes
|
||||
// Persist session on change
|
||||
useEffect(() => {
|
||||
if (currentSession) {
|
||||
SessionUtils.saveCurrentSession(currentSession);
|
||||
}
|
||||
if (currentSession) SessionUtils.saveCurrentSession(currentSession);
|
||||
}, [currentSession]);
|
||||
|
||||
// --- Fetch models & vector DBs ---
|
||||
useEffect(() => {
|
||||
const fetchModels = async () => {
|
||||
try {
|
||||
setModelsLoading(true);
|
||||
setModelsError(null);
|
||||
const modelList = await client.models.list();
|
||||
const llmModels = modelList.filter(model => model.model_type === "llm");
|
||||
setModels(llmModels);
|
||||
if (llmModels.length > 0 && currentSession && !currentSession.selectedModel) {
|
||||
setCurrentSession(prev => prev ? { ...prev, selectedModel: llmModels[0].identifier } : null);
|
||||
const list = await client.models.list();
|
||||
const llms = list.filter(m => m.model_type === "llm");
|
||||
setModels(llms);
|
||||
if (llms.length > 0) {
|
||||
setCurrentSession(prev =>
|
||||
prev && !prev.selectedModel
|
||||
? {
|
||||
...prev,
|
||||
selectedModel: llms[0].identifier,
|
||||
updatedAt: Date.now(),
|
||||
}
|
||||
: prev
|
||||
);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error fetching models:", err);
|
||||
} catch (e) {
|
||||
console.error("Error fetching models:", e);
|
||||
setModelsError("Failed to fetch available models");
|
||||
} finally {
|
||||
setModelsLoading(false);
|
||||
|
|
@ -89,10 +116,16 @@ export default function ChatPlaygroundPage() {
|
|||
try {
|
||||
setVectorDbsLoading(true);
|
||||
setVectorDbsError(null);
|
||||
const vectorDbList = await client.vectorDBs.list();
|
||||
setVectorDbs(vectorDbList);
|
||||
} catch (err) {
|
||||
console.error("Error fetching vector DBs:", err);
|
||||
const list = await client.vectorDBs.list();
|
||||
setVectorDbs(list);
|
||||
// default to "none" if not set
|
||||
setCurrentSession(prev =>
|
||||
prev && !prev.selectedVectorDb
|
||||
? { ...prev, selectedVectorDb: "none", updatedAt: Date.now() }
|
||||
: prev
|
||||
);
|
||||
} catch (e) {
|
||||
console.error("Error fetching vector DBs:", e);
|
||||
setVectorDbsError("Failed to fetch available vector databases");
|
||||
} finally {
|
||||
setVectorDbsLoading(false);
|
||||
|
|
@ -103,10 +136,9 @@ export default function ChatPlaygroundPage() {
|
|||
fetchVectorDbs();
|
||||
}, [client]);
|
||||
|
||||
// --- Utilities ---
|
||||
const extractTextContent = (content: unknown): string => {
|
||||
if (typeof content === "string") {
|
||||
return content;
|
||||
}
|
||||
if (typeof content === "string") return content;
|
||||
if (Array.isArray(content)) {
|
||||
return content
|
||||
.filter(
|
||||
|
|
@ -114,11 +146,11 @@ export default function ChatPlaygroundPage() {
|
|||
item &&
|
||||
typeof item === "object" &&
|
||||
"type" in item &&
|
||||
item.type === "text"
|
||||
(item as { type: string }).type === "text"
|
||||
)
|
||||
.map(item =>
|
||||
item && typeof item === "object" && "text" in item
|
||||
? String(item.text)
|
||||
? String((item as { text: unknown }).text)
|
||||
: ""
|
||||
)
|
||||
.join("");
|
||||
|
|
@ -127,23 +159,23 @@ export default function ChatPlaygroundPage() {
|
|||
content &&
|
||||
typeof content === "object" &&
|
||||
"type" in content &&
|
||||
content.type === "text" &&
|
||||
(content as { type: string }).type === "text" &&
|
||||
"text" in content
|
||||
) {
|
||||
return String(content.text) || "";
|
||||
return String((content as { text: unknown }).text) || "";
|
||||
}
|
||||
return "";
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
// --- Handlers ---
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) =>
|
||||
setInput(e.target.value);
|
||||
};
|
||||
|
||||
const handleSubmit = async (event?: { preventDefault?: () => void }) => {
|
||||
event?.preventDefault?.();
|
||||
if (!input.trim() || !currentSession || !currentSession.selectedModel) return;
|
||||
const handleSubmit = async (event?: { preventDefault?: () => void }) => {
|
||||
event?.preventDefault?.();
|
||||
if (!input.trim() || !currentSession || !currentSession.selectedModel)
|
||||
return;
|
||||
|
||||
// Add user message to chat
|
||||
const userMessage: Message = {
|
||||
id: Date.now().toString(),
|
||||
role: "user",
|
||||
|
|
@ -151,70 +183,79 @@ const handleSubmit = async (event?: { preventDefault?: () => void }) => {
|
|||
createdAt: new Date(),
|
||||
};
|
||||
|
||||
setCurrentSession(prev => prev ? {
|
||||
...prev,
|
||||
messages: [...prev.messages, userMessage],
|
||||
updatedAt: Date.now()
|
||||
} : null);
|
||||
setInput("");
|
||||
setCurrentSession(prev =>
|
||||
prev
|
||||
? {
|
||||
...prev,
|
||||
messages: [...prev.messages, userMessage],
|
||||
updatedAt: Date.now(),
|
||||
}
|
||||
: prev
|
||||
);
|
||||
setInput("");
|
||||
|
||||
// Use the helper function with the content
|
||||
await handleSubmitWithContent(userMessage.content);
|
||||
};
|
||||
// Use the helper function with the content
|
||||
await handleSubmitWithContent(userMessage.content);
|
||||
};
|
||||
|
||||
const handleSubmitWithContent = async (content: string) => {
|
||||
setIsGenerating(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
let enhancedContent = content;
|
||||
try {
|
||||
let enhancedContent = content;
|
||||
|
||||
// If a vector DB is selected, query for relevant context
|
||||
if (currentSession?.selectedVectorDb && currentSession.selectedVectorDb !== "none") {
|
||||
try {
|
||||
const vectorResponse = await client.vectorIo.query({
|
||||
query: content,
|
||||
vector_db_id: currentSession.selectedVectorDb,
|
||||
});
|
||||
// --- RAG augmentation (optional) ---
|
||||
if (
|
||||
currentSession?.selectedVectorDb &&
|
||||
currentSession.selectedVectorDb !== "none"
|
||||
) {
|
||||
try {
|
||||
const vectorResponse = await client.vectorIo.query({
|
||||
query: content,
|
||||
vector_db_id: currentSession.selectedVectorDb,
|
||||
});
|
||||
|
||||
if (vectorResponse.chunks && vectorResponse.chunks.length > 0) {
|
||||
const context = vectorResponse.chunks
|
||||
.map(chunk => {
|
||||
// Extract text content from the chunk
|
||||
const chunkContent = typeof chunk.content === 'string'
|
||||
? chunk.content
|
||||
: extractTextContent(chunk.content);
|
||||
return chunkContent;
|
||||
})
|
||||
.join('\n\n');
|
||||
if (vectorResponse.chunks && vectorResponse.chunks.length > 0) {
|
||||
const context = vectorResponse.chunks
|
||||
.map(chunk =>
|
||||
typeof chunk.content === "string"
|
||||
? chunk.content
|
||||
: extractTextContent(chunk.content)
|
||||
)
|
||||
.join("\n\n");
|
||||
|
||||
enhancedContent = `Please answer the following query using the context below.\n\nCONTEXT:\n${context}\n\nQUERY:\n${content}`;
|
||||
enhancedContent = `Please answer the following query using the context below.\n\nCONTEXT:\n${context}\n\nQUERY:\n${content}`;
|
||||
}
|
||||
} catch (vectorErr) {
|
||||
console.error("Error querying vector DB:", vectorErr);
|
||||
// proceed without augmentation
|
||||
}
|
||||
} catch (vectorErr) {
|
||||
console.error("Error querying vector DB:", vectorErr);
|
||||
// Continue with original content if vector query fails
|
||||
}
|
||||
}
|
||||
|
||||
const messageParams: CompletionCreateParams["messages"] = [
|
||||
...(currentSession?.messages || []).map(msg => {
|
||||
const msgContent = typeof msg.content === 'string' ? msg.content : extractTextContent(msg.content);
|
||||
if (msg.role === "user") {
|
||||
return { role: "user" as const, content: msgContent };
|
||||
} else if (msg.role === "assistant") {
|
||||
return { role: "assistant" as const, content: msgContent };
|
||||
} else {
|
||||
const messageParams: CompletionCreateParams["messages"] = [
|
||||
...(currentSession?.systemMessage
|
||||
? [{ role: "system" as const, content: currentSession.systemMessage }]
|
||||
: []),
|
||||
...(currentSession?.messages || []).map(msg => {
|
||||
const msgContent =
|
||||
typeof msg.content === "string"
|
||||
? msg.content
|
||||
: extractTextContent(msg.content);
|
||||
if (msg.role === "user")
|
||||
return { role: "user" as const, content: msgContent };
|
||||
if (msg.role === "assistant")
|
||||
return { role: "assistant" as const, content: msgContent };
|
||||
return { role: "system" as const, content: msgContent };
|
||||
}
|
||||
}),
|
||||
{ role: "user" as const, content: enhancedContent }
|
||||
];
|
||||
}),
|
||||
{ role: "user" as const, content: enhancedContent },
|
||||
];
|
||||
|
||||
const response = await client.chat.completions.create({
|
||||
model: currentSession?.selectedModel || "",
|
||||
messages: messageParams,
|
||||
stream: true,
|
||||
});
|
||||
const response = await client.chat.completions.create({
|
||||
model: currentSession?.selectedModel || "",
|
||||
messages: messageParams,
|
||||
stream: true,
|
||||
});
|
||||
|
||||
const assistantMessage: Message = {
|
||||
id: (Date.now() + 1).toString(),
|
||||
|
|
@ -229,37 +270,41 @@ const handleSubmit = async (event?: { preventDefault?: () => void }) => {
|
|||
updatedAt: Date.now()
|
||||
} : null);
|
||||
|
||||
let fullContent = "";
|
||||
for await (const chunk of response) {
|
||||
if (chunk.choices && chunk.choices[0]?.delta?.content) {
|
||||
const deltaContent = chunk.choices[0].delta.content;
|
||||
fullContent += deltaContent;
|
||||
let fullContent = "";
|
||||
for await (const chunk of response) {
|
||||
if (chunk.choices && chunk.choices[0]?.delta?.content) {
|
||||
const deltaContent = chunk.choices[0].delta.content;
|
||||
fullContent += deltaContent;
|
||||
|
||||
flushSync(() => {
|
||||
setCurrentSession(prev => {
|
||||
if (!prev) return null;
|
||||
const newMessages = [...prev.messages];
|
||||
const lastMessage = newMessages[newMessages.length - 1];
|
||||
if (lastMessage.role === "assistant") {
|
||||
lastMessage.content = fullContent;
|
||||
}
|
||||
return { ...prev, messages: newMessages, updatedAt: Date.now() };
|
||||
flushSync(() => {
|
||||
setCurrentSession(prev => {
|
||||
if (!prev) return null;
|
||||
const newMessages = [...prev.messages];
|
||||
const last = newMessages[newMessages.length - 1];
|
||||
if (last.role === "assistant") last.content = fullContent;
|
||||
return { ...prev, messages: newMessages, updatedAt: Date.now() };
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error sending message:", err);
|
||||
setError("Failed to send message. Please try again.");
|
||||
setCurrentSession(prev =>
|
||||
prev
|
||||
? {
|
||||
...prev,
|
||||
messages: prev.messages.slice(0, -1),
|
||||
updatedAt: Date.now(),
|
||||
}
|
||||
: prev
|
||||
);
|
||||
} finally {
|
||||
setIsGenerating(false);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error sending message:", err);
|
||||
setError("Failed to send message. Please try again.");
|
||||
setCurrentSession(prev => prev ? {
|
||||
...prev,
|
||||
messages: prev.messages.slice(0, -1),
|
||||
updatedAt: Date.now()
|
||||
} : null);
|
||||
} finally {
|
||||
setIsGenerating(false);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// --- UX helpers ---
|
||||
const suggestions = [
|
||||
"Write a Python function that prints 'Hello, World!'",
|
||||
"Explain step-by-step how to solve this math problem: If x² + 6x + 9 = 25, what is x?",
|
||||
|
|
@ -273,20 +318,22 @@ const handleSubmit = async (event?: { preventDefault?: () => void }) => {
|
|||
content: message.content,
|
||||
createdAt: new Date(),
|
||||
};
|
||||
setCurrentSession(prev => prev ? {
|
||||
...prev,
|
||||
messages: [...prev.messages, newMessage],
|
||||
updatedAt: Date.now()
|
||||
} : null);
|
||||
setCurrentSession(prev =>
|
||||
prev
|
||||
? {
|
||||
...prev,
|
||||
messages: [...prev.messages, newMessage],
|
||||
updatedAt: Date.now(),
|
||||
}
|
||||
: prev
|
||||
);
|
||||
handleSubmitWithContent(newMessage.content);
|
||||
};
|
||||
|
||||
const clearChat = () => {
|
||||
setCurrentSession(prev => prev ? {
|
||||
...prev,
|
||||
messages: [],
|
||||
updatedAt: Date.now()
|
||||
} : null);
|
||||
setCurrentSession(prev =>
|
||||
prev ? { ...prev, messages: [], updatedAt: Date.now() } : prev
|
||||
);
|
||||
setError(null);
|
||||
};
|
||||
|
||||
|
|
@ -296,13 +343,20 @@ const handleSubmit = async (event?: { preventDefault?: () => void }) => {
|
|||
};
|
||||
|
||||
const handleNewSession = () => {
|
||||
const defaultModel = currentSession?.selectedModel || (models.length > 0 ? models[0].identifier : "");
|
||||
const defaultVectorDb = currentSession?.selectedVectorDb || "";
|
||||
const defaultModel =
|
||||
currentSession?.selectedModel ||
|
||||
(models.length > 0 ? models[0].identifier : "");
|
||||
const defaultVectorDb = currentSession?.selectedVectorDb || "none";
|
||||
|
||||
const newSession = {
|
||||
const newSession: ChatSession = {
|
||||
...SessionUtils.createDefaultSession(),
|
||||
selectedModel: defaultModel,
|
||||
selectedVectorDb: defaultVectorDb,
|
||||
systemMessage:
|
||||
currentSession?.systemMessage || "You are a helpful assistant.",
|
||||
messages: [],
|
||||
updatedAt: Date.now(),
|
||||
createdAt: Date.now(),
|
||||
};
|
||||
setCurrentSession(newSession);
|
||||
SessionUtils.saveCurrentSession(newSession);
|
||||
|
|
@ -323,101 +377,200 @@ const handleSubmit = async (event?: { preventDefault?: () => void }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full w-full max-w-4xl mx-auto">
|
||||
<div className="mb-4 flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Chat Playground</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<SessionManager
|
||||
currentSession={currentSession}
|
||||
onSessionChange={handleSessionChange}
|
||||
onNewSession={handleNewSession}
|
||||
/>
|
||||
<Button variant="outline" onClick={clearChat} disabled={isGenerating}>
|
||||
Clear Chat
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 items-center">
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-sm font-medium text-gray-600">Model:</span>
|
||||
<Select
|
||||
value={currentSession?.selectedModel || ""}
|
||||
onValueChange={(value) => setCurrentSession(prev => prev ? { ...prev, selectedModel: value, updatedAt: Date.now() } : null)}
|
||||
disabled={isModelsLoading || isGenerating}
|
||||
<div className="flex flex-col h-full w-full max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h1 className="text-3xl font-bold">Chat Playground</h1>
|
||||
<div className="flex justify-between items-center">
|
||||
<SessionManager
|
||||
currentSession={currentSession}
|
||||
onSessionChange={handleSessionChange}
|
||||
onNewSession={handleNewSession}
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={clearChat}
|
||||
disabled={isGenerating}
|
||||
>
|
||||
<SelectTrigger className="w-[160px]">
|
||||
<SelectValue placeholder={isModelsLoading ? "Loading..." : "Select Model"} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{models.map((model) => (
|
||||
<SelectItem key={model.identifier} value={model.identifier}>
|
||||
{model.identifier}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
Clear Chat
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-sm font-medium text-gray-600">Vector DB:</span>
|
||||
<Select
|
||||
value={currentSession?.selectedVectorDb || ""}
|
||||
onValueChange={(value) => setCurrentSession(prev => prev ? { ...prev, selectedVectorDb: value, updatedAt: Date.now() } : null)}
|
||||
disabled={vectorDbsLoading || isGenerating}
|
||||
>
|
||||
<SelectTrigger className="w-[160px]">
|
||||
<SelectValue placeholder={vectorDbsLoading ? "Loading..." : "None"} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">None</SelectItem>
|
||||
{vectorDbs.map((vectorDb) => (
|
||||
<SelectItem key={vectorDb.identifier} value={vectorDb.identifier}>
|
||||
{vectorDb.identifier}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<VectorDbManager
|
||||
client={client}
|
||||
onVectorDbCreated={refreshVectorDbs}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{modelsError && (
|
||||
<div className="mb-4 p-3 bg-destructive/10 border border-destructive/20 rounded-md">
|
||||
<p className="text-destructive text-sm">{modelsError}</p>
|
||||
</div>
|
||||
)}
|
||||
{/* Main Two-Column Layout */}
|
||||
<div className="flex flex-1 gap-6 min-h-0 flex-col lg:flex-row">
|
||||
{/* Left Column - Configuration Panel */}
|
||||
<div className="w-full lg:w-80 lg:flex-shrink-0 space-y-6 p-4 border border-border rounded-lg bg-muted/30">
|
||||
<h2 className="text-lg font-semibold border-b pb-2 text-left">
|
||||
Settings
|
||||
</h2>
|
||||
|
||||
{vectorDbsError && (
|
||||
<div className="mb-4 p-3 bg-destructive/10 border border-destructive/20 rounded-md">
|
||||
<p className="text-destructive text-sm">{vectorDbsError}</p>
|
||||
</div>
|
||||
)}
|
||||
{/* Model Configuration */}
|
||||
<div className="space-y-4 text-left">
|
||||
<h3 className="text-lg font-semibold border-b pb-2 text-left">
|
||||
Model Configuration
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="text-sm font-medium block mb-2">Model</label>
|
||||
<Select
|
||||
value={currentSession?.selectedModel || ""}
|
||||
onValueChange={value =>
|
||||
setCurrentSession(prev =>
|
||||
prev
|
||||
? {
|
||||
...prev,
|
||||
selectedModel: value,
|
||||
updatedAt: Date.now(),
|
||||
}
|
||||
: prev
|
||||
)
|
||||
}
|
||||
disabled={isModelsLoading || isGenerating}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue
|
||||
placeholder={
|
||||
isModelsLoading ? "Loading..." : "Select Model"
|
||||
}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{models.map(model => (
|
||||
<SelectItem
|
||||
key={model.identifier}
|
||||
value={model.identifier}
|
||||
>
|
||||
{model.identifier}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{modelsError && (
|
||||
<p className="text-destructive text-xs mt-1">{modelsError}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 p-3 bg-destructive/10 border border-destructive/20 rounded-md">
|
||||
<p className="text-destructive text-sm">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<label className="text-sm font-medium block mb-2">
|
||||
System Message
|
||||
</label>
|
||||
<textarea
|
||||
value={currentSession?.systemMessage || ""}
|
||||
onChange={e =>
|
||||
setCurrentSession(prev =>
|
||||
prev
|
||||
? {
|
||||
...prev,
|
||||
systemMessage: e.target.value,
|
||||
updatedAt: Date.now(),
|
||||
}
|
||||
: prev
|
||||
)
|
||||
}
|
||||
placeholder="You are a helpful assistant."
|
||||
disabled={isGenerating}
|
||||
className="w-full h-24 px-3 py-2 text-sm border border-input rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Chat
|
||||
className="flex-1"
|
||||
messages={currentSession?.messages || []}
|
||||
handleSubmit={handleSubmit}
|
||||
input={input}
|
||||
handleInputChange={handleInputChange}
|
||||
isGenerating={isGenerating}
|
||||
append={append}
|
||||
suggestions={suggestions}
|
||||
setMessages={(messages) => setCurrentSession(prev => prev ? { ...prev, messages, updatedAt: Date.now() } : null)}
|
||||
/>
|
||||
{/* Vector Database Configuration */}
|
||||
<div className="space-y-4 text-left">
|
||||
<h3 className="text-lg font-semibold border-b pb-2 text-left">
|
||||
VectorDB Configuration
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="text-sm font-medium block mb-2">
|
||||
Vector Database
|
||||
</label>
|
||||
<Select
|
||||
value={currentSession?.selectedVectorDb || "none"}
|
||||
onValueChange={value =>
|
||||
setCurrentSession(prev =>
|
||||
prev
|
||||
? {
|
||||
...prev,
|
||||
selectedVectorDb: value,
|
||||
updatedAt: Date.now(),
|
||||
}
|
||||
: prev
|
||||
)
|
||||
}
|
||||
disabled={vectorDbsLoading || isGenerating}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue
|
||||
placeholder={
|
||||
vectorDbsLoading ? "Loading..." : "None (No RAG)"
|
||||
}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">None (No RAG)</SelectItem>
|
||||
{vectorDbs.map(db => (
|
||||
<SelectItem key={db.identifier} value={db.identifier}>
|
||||
{db.identifier}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{vectorDbsError && (
|
||||
<p className="text-destructive text-xs mt-1">
|
||||
{vectorDbsError}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<VectorDbManager
|
||||
client={client}
|
||||
onVectorDbCreated={refreshVectorDbs}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Document Upload Section */}
|
||||
<div className="space-y-4 text-left">
|
||||
<DocumentUploader
|
||||
client={client}
|
||||
selectedVectorDb={currentSession?.selectedVectorDb || "none"}
|
||||
disabled={isGenerating}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Chat Interface */}
|
||||
<div className="flex-1 flex flex-col min-h-0 p-4 border border-border rounded-lg bg-background">
|
||||
{error && (
|
||||
<div className="mb-4 p-3 bg-destructive/10 border border-destructive/20 rounded-md">
|
||||
<p className="text-destructive text-sm">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Chat
|
||||
className="flex-1"
|
||||
messages={currentSession?.messages || []}
|
||||
handleSubmit={handleSubmit}
|
||||
input={input}
|
||||
handleInputChange={handleInputChange}
|
||||
isGenerating={isGenerating}
|
||||
append={append}
|
||||
suggestions={suggestions}
|
||||
setMessages={messages =>
|
||||
setCurrentSession(prev =>
|
||||
prev ? { ...prev, messages, updatedAt: Date.now() } : prev
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,10 +52,8 @@ export default function ContentsListPage() {
|
|||
const [file, setFile] = useState<VectorStoreFile | null>(null);
|
||||
const [contents, setContents] = useState<VectorStoreContentItem[]>([]);
|
||||
const [isLoadingStore, setIsLoadingStore] = useState(true);
|
||||
const [isLoadingFile, setIsLoadingFile] = useState(true);
|
||||
const [isLoadingContents, setIsLoadingContents] = useState(true);
|
||||
const [errorStore, setErrorStore] = useState<Error | null>(null);
|
||||
const [errorFile, setErrorFile] = useState<Error | null>(null);
|
||||
const [errorContents, setErrorContents] = useState<Error | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
|||
|
|
@ -161,10 +161,12 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
|
|||
|
||||
const isUser = role === "user";
|
||||
|
||||
const formattedTime = createdAt ? new Date(createdAt).toLocaleTimeString("en-US", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
}) : undefined
|
||||
const formattedTime = createdAt
|
||||
? new Date(createdAt).toLocaleTimeString("en-US", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})
|
||||
: undefined;
|
||||
|
||||
if (isUser) {
|
||||
return (
|
||||
|
|
@ -185,7 +187,7 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
|
|||
|
||||
{showTimeStamp && createdAt ? (
|
||||
<time
|
||||
dateTime={createdAt.toISOString()}
|
||||
dateTime={new Date(createdAt).toISOString()}
|
||||
className={cn(
|
||||
"mt-1 block px-1 text-xs opacity-50",
|
||||
animation !== "none" && "duration-500 animate-in fade-in-0"
|
||||
|
|
|
|||
|
|
@ -203,7 +203,7 @@ export function Chat({
|
|||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="max-w-4xl mx-auto w-full">
|
||||
<PromptSuggestions
|
||||
label="Try these prompts ✨"
|
||||
label="Try asking a question ✨"
|
||||
append={append}
|
||||
suggestions={suggestions}
|
||||
/>
|
||||
|
|
@ -269,7 +269,7 @@ export function ChatMessages({
|
|||
onScroll={handleScroll}
|
||||
onTouchStart={handleTouchStart}
|
||||
>
|
||||
<div className="max-w-4xl mx-auto w-full [grid-column:1/1] [grid-row:1/1]">
|
||||
<div className="max-w-full [grid-column:1/1] [grid-row:1/1]">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
355
llama_stack/ui/components/chat-playground/document-uploader.tsx
Normal file
355
llama_stack/ui/components/chat-playground/document-uploader.tsx
Normal file
|
|
@ -0,0 +1,355 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useRef } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import type LlamaStackClient from "llama-stack-client";
|
||||
|
||||
interface DocumentUploaderProps {
|
||||
client: LlamaStackClient;
|
||||
selectedVectorDb: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
interface UploadState {
|
||||
isUploading: boolean;
|
||||
uploadProgress: string;
|
||||
uploadError: string | null;
|
||||
}
|
||||
|
||||
export function DocumentUploader({
|
||||
client,
|
||||
selectedVectorDb,
|
||||
disabled,
|
||||
}: DocumentUploaderProps) {
|
||||
const [uploadState, setUploadState] = useState<UploadState>({
|
||||
isUploading: false,
|
||||
uploadProgress: "",
|
||||
uploadError: null,
|
||||
});
|
||||
const [urlInput, setUrlInput] = useState("");
|
||||
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0] || null;
|
||||
setSelectedFile(file);
|
||||
if (file) {
|
||||
console.log("File selected:", file.name, file.size, "bytes");
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileUpload = async () => {
|
||||
console.log("Upload button clicked");
|
||||
console.log("Files:", fileInputRef.current?.files?.length);
|
||||
console.log("Selected Vector DB:", selectedVectorDb);
|
||||
|
||||
if (
|
||||
!fileInputRef.current?.files?.length ||
|
||||
!selectedVectorDb ||
|
||||
selectedVectorDb === "none"
|
||||
) {
|
||||
console.log("Upload blocked: missing file or vector DB");
|
||||
setUploadState({
|
||||
isUploading: false,
|
||||
uploadProgress: "",
|
||||
uploadError:
|
||||
"Please select a file and ensure a Vector Database is selected",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const file = fileInputRef.current.files[0];
|
||||
console.log("Starting upload for:", file.name);
|
||||
setUploadState({
|
||||
isUploading: true,
|
||||
uploadProgress: `Uploading ${file.name}...`,
|
||||
uploadError: null,
|
||||
});
|
||||
|
||||
try {
|
||||
// Determine MIME type
|
||||
let mimeType = file.type;
|
||||
if (!mimeType) {
|
||||
// Fallback based on file extension
|
||||
const extension = file.name.split(".").pop()?.toLowerCase();
|
||||
switch (extension) {
|
||||
case "pdf":
|
||||
mimeType = "application/pdf";
|
||||
break;
|
||||
case "txt":
|
||||
mimeType = "text/plain";
|
||||
break;
|
||||
case "md":
|
||||
mimeType = "text/markdown";
|
||||
break;
|
||||
default:
|
||||
mimeType = "application/octet-stream";
|
||||
}
|
||||
}
|
||||
|
||||
setUploadState({
|
||||
isUploading: true,
|
||||
uploadProgress: `Reading ${file.name}...`,
|
||||
uploadError: null,
|
||||
});
|
||||
|
||||
// Use server-side file processing API for better efficiency
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
formData.append("vectorDbId", selectedVectorDb);
|
||||
|
||||
setUploadState({
|
||||
isUploading: true,
|
||||
uploadProgress: `Processing ${file.name}...`,
|
||||
uploadError: null,
|
||||
});
|
||||
|
||||
const uploadResponse = await fetch("/api/upload-document", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (!uploadResponse.ok) {
|
||||
throw new Error(`Upload failed: ${uploadResponse.statusText}`);
|
||||
}
|
||||
|
||||
const { content, mimeType: processedMimeType } =
|
||||
await uploadResponse.json();
|
||||
|
||||
// Use RagTool to insert the document
|
||||
console.log("Calling RagTool.insert with:", {
|
||||
vector_db_id: selectedVectorDb,
|
||||
chunk_size_in_tokens: 512,
|
||||
content_type: typeof content,
|
||||
content_length: typeof content === "string" ? content.length : "N/A",
|
||||
mime_type: processedMimeType,
|
||||
});
|
||||
|
||||
await client.toolRuntime.ragTool.insert({
|
||||
vector_db_id: selectedVectorDb,
|
||||
chunk_size_in_tokens: 512,
|
||||
documents: [
|
||||
{
|
||||
document_id: `file-${Date.now()}-${file.name}`,
|
||||
content: content,
|
||||
mime_type: processedMimeType,
|
||||
metadata: {
|
||||
source: file.name,
|
||||
uploaded_at: new Date().toISOString(),
|
||||
file_size: file.size,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
console.log("RagTool.insert completed successfully");
|
||||
|
||||
const truncatedName =
|
||||
file.name.length > 20 ? file.name.substring(0, 20) + "..." : file.name;
|
||||
setUploadState({
|
||||
isUploading: false,
|
||||
uploadProgress: `Successfully uploaded ${truncatedName}`,
|
||||
uploadError: null,
|
||||
});
|
||||
|
||||
// Clear file input and selected file state
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
setSelectedFile(null);
|
||||
} catch (err) {
|
||||
console.error("Error uploading file:", err);
|
||||
setUploadState({
|
||||
isUploading: false,
|
||||
uploadProgress: "",
|
||||
uploadError:
|
||||
err instanceof Error ? err.message : "Failed to upload file",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleUrlUpload = async () => {
|
||||
if (!urlInput.trim() || !selectedVectorDb || selectedVectorDb === "none")
|
||||
return;
|
||||
|
||||
setUploadState({
|
||||
isUploading: true,
|
||||
uploadProgress: `Fetching content from ${urlInput}...`,
|
||||
uploadError: null,
|
||||
});
|
||||
|
||||
try {
|
||||
// Determine MIME type from URL
|
||||
let mimeType = "text/html";
|
||||
const url = urlInput.toLowerCase();
|
||||
if (url.endsWith(".pdf")) {
|
||||
mimeType = "application/pdf";
|
||||
} else if (url.endsWith(".txt")) {
|
||||
mimeType = "text/plain";
|
||||
} else if (url.endsWith(".md")) {
|
||||
mimeType = "text/markdown";
|
||||
}
|
||||
|
||||
setUploadState({
|
||||
isUploading: true,
|
||||
uploadProgress: `Processing content from ${urlInput}...`,
|
||||
uploadError: null,
|
||||
});
|
||||
|
||||
// Use RagTool to insert the document from URL
|
||||
await client.toolRuntime.ragTool.insert({
|
||||
vector_db_id: selectedVectorDb,
|
||||
chunk_size_in_tokens: 512,
|
||||
documents: [
|
||||
{
|
||||
document_id: `url-${Date.now()}-${encodeURIComponent(urlInput)}`,
|
||||
content: urlInput,
|
||||
mime_type: mimeType,
|
||||
metadata: {
|
||||
source: urlInput,
|
||||
uploaded_at: new Date().toISOString(),
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const truncatedUrl =
|
||||
urlInput.length > 30 ? urlInput.substring(0, 30) + "..." : urlInput;
|
||||
setUploadState({
|
||||
isUploading: false,
|
||||
uploadProgress: `Successfully processed ${truncatedUrl}`,
|
||||
uploadError: null,
|
||||
});
|
||||
|
||||
setUrlInput("");
|
||||
} catch (err) {
|
||||
console.error("Error uploading URL:", err);
|
||||
setUploadState({
|
||||
isUploading: false,
|
||||
uploadProgress: "",
|
||||
uploadError:
|
||||
err instanceof Error ? err.message : "Failed to process URL content",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const clearStatus = () => {
|
||||
setUploadState({
|
||||
isUploading: false,
|
||||
uploadProgress: "",
|
||||
uploadError: null,
|
||||
});
|
||||
};
|
||||
|
||||
if (!selectedVectorDb || selectedVectorDb === "none") {
|
||||
return (
|
||||
<div className="text-sm text-gray-500 text-center py-4">
|
||||
Select a Vector Database to upload documents
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-md font-medium">Upload Documents</h3>
|
||||
|
||||
{uploadState.uploadError && (
|
||||
<div className="p-2 bg-destructive/10 border border-destructive/20 rounded-md">
|
||||
<p className="text-sm text-foreground">{uploadState.uploadError}</p>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={clearStatus}
|
||||
className="mt-1 h-6 px-2 text-xs"
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{uploadState.uploadProgress && (
|
||||
<div className="p-2 bg-muted border border-border rounded-md">
|
||||
<p className="text-sm text-foreground">
|
||||
{uploadState.uploadProgress}
|
||||
</p>
|
||||
{uploadState.isUploading && (
|
||||
<div className="mt-2 w-full bg-secondary rounded-full h-1">
|
||||
<div
|
||||
className="bg-primary h-1 rounded-full animate-pulse"
|
||||
style={{ width: "60%" }}
|
||||
></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* File Upload */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium block">Upload File</label>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".txt,.pdf,.md"
|
||||
onChange={handleFileSelect}
|
||||
className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
|
||||
disabled={disabled || uploadState.isUploading}
|
||||
/>
|
||||
|
||||
{selectedFile && (
|
||||
<div className="p-2 bg-muted border border-border rounded-md">
|
||||
<p className="text-sm text-foreground">
|
||||
Selected:{" "}
|
||||
<span className="font-medium">
|
||||
{selectedFile.name.length > 25
|
||||
? selectedFile.name.substring(0, 25) + "..."
|
||||
: selectedFile.name}
|
||||
</span>
|
||||
<span className="text-muted-foreground ml-2">
|
||||
({(selectedFile.size / 1024).toFixed(1)} KB)
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={handleFileUpload}
|
||||
disabled={disabled || !selectedFile || uploadState.isUploading}
|
||||
className="w-full"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
{uploadState.isUploading
|
||||
? "Uploading..."
|
||||
: selectedFile
|
||||
? "Upload File"
|
||||
: "Upload File"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* URL Upload */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium block">Or Enter URL</label>
|
||||
<Input
|
||||
value={urlInput}
|
||||
onChange={e => setUrlInput(e.target.value)}
|
||||
placeholder="https://example.com/document.pdf"
|
||||
disabled={disabled || uploadState.isUploading}
|
||||
/>
|
||||
<Button
|
||||
onClick={handleUrlUpload}
|
||||
disabled={disabled || !urlInput.trim() || uploadState.isUploading}
|
||||
className="w-full"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
{uploadState.isUploading ? "Processing..." : "Process URL"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-gray-500">
|
||||
Supported formats: PDF, TXT, MD files and web URLs
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -19,6 +19,7 @@ interface ChatSession {
|
|||
messages: Message[];
|
||||
selectedModel: string;
|
||||
selectedVectorDb: string;
|
||||
systemMessage: string;
|
||||
createdAt: number;
|
||||
updatedAt: number;
|
||||
}
|
||||
|
|
@ -29,10 +30,13 @@ interface SessionManagerProps {
|
|||
onNewSession: () => void;
|
||||
}
|
||||
|
||||
const SESSIONS_STORAGE_KEY = 'chat-playground-sessions';
|
||||
const CURRENT_SESSION_KEY = 'chat-playground-current-session';
|
||||
const SESSIONS_STORAGE_KEY = "chat-playground-sessions";
|
||||
const CURRENT_SESSION_KEY = "chat-playground-current-session";
|
||||
|
||||
export function SessionManager({ currentSession, onSessionChange, onNewSession }: SessionManagerProps) {
|
||||
export function SessionManager({
|
||||
currentSession,
|
||||
onSessionChange,
|
||||
}: SessionManagerProps) {
|
||||
const [sessions, setSessions] = useState<ChatSession[]>([]);
|
||||
const [showCreateForm, setShowCreateForm] = useState(false);
|
||||
const [newSessionName, setNewSessionName] = useState("");
|
||||
|
|
@ -56,13 +60,16 @@ export function SessionManager({ currentSession, onSessionChange, onNewSession }
|
|||
};
|
||||
|
||||
const createNewSession = () => {
|
||||
const sessionName = newSessionName.trim() || `Session ${sessions.length + 1}`;
|
||||
const sessionName =
|
||||
newSessionName.trim() || `Session ${sessions.length + 1}`;
|
||||
const newSession: ChatSession = {
|
||||
id: Date.now().toString(),
|
||||
name: sessionName,
|
||||
messages: [],
|
||||
selectedModel: currentSession?.selectedModel || "",
|
||||
selectedVectorDb: currentSession?.selectedVectorDb || "",
|
||||
systemMessage:
|
||||
currentSession?.systemMessage || "You are a helpful assistant.",
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now(),
|
||||
};
|
||||
|
|
@ -85,48 +92,27 @@ export function SessionManager({ currentSession, onSessionChange, onNewSession }
|
|||
}
|
||||
};
|
||||
|
||||
// These functions are available for future use but not currently implemented in UI
|
||||
// const deleteSession = (sessionId: string) => {
|
||||
// const updatedSessions = sessions.filter(s => s.id !== sessionId);
|
||||
// saveSessions(updatedSessions);
|
||||
|
||||
// // If we deleted the current session, switch to the first available or create new
|
||||
// if (currentSession?.id === sessionId) {
|
||||
// if (updatedSessions.length > 0) {
|
||||
// switchToSession(updatedSessions[0].id);
|
||||
// } else {
|
||||
// localStorage.removeItem(CURRENT_SESSION_KEY);
|
||||
// onNewSession();
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
|
||||
// const renameSession = (sessionId: string, newName: string) => {
|
||||
// const updatedSessions = sessions.map(session =>
|
||||
// session.id === sessionId
|
||||
// ? { ...session, name: newName, updatedAt: Date.now() }
|
||||
// : session
|
||||
// );
|
||||
// saveSessions(updatedSessions);
|
||||
|
||||
// if (currentSession?.id === sessionId) {
|
||||
// onSessionChange({ ...currentSession, name: newName });
|
||||
// }
|
||||
// };
|
||||
|
||||
// Update current session in the sessions list
|
||||
useEffect(() => {
|
||||
if (currentSession) {
|
||||
const updatedSessions = sessions.map(session =>
|
||||
session.id === currentSession.id ? currentSession : session
|
||||
);
|
||||
setSessions(prevSessions => {
|
||||
const updatedSessions = prevSessions.map(session =>
|
||||
session.id === currentSession.id ? currentSession : session
|
||||
);
|
||||
|
||||
// Add session if it doesn't exist
|
||||
if (!sessions.find(s => s.id === currentSession.id)) {
|
||||
updatedSessions.push(currentSession);
|
||||
}
|
||||
// Add session if it doesn't exist
|
||||
if (!prevSessions.find(s => s.id === currentSession.id)) {
|
||||
updatedSessions.push(currentSession);
|
||||
}
|
||||
|
||||
saveSessions(updatedSessions);
|
||||
// Save to localStorage
|
||||
localStorage.setItem(
|
||||
SESSIONS_STORAGE_KEY,
|
||||
JSON.stringify(updatedSessions)
|
||||
);
|
||||
|
||||
return updatedSessions;
|
||||
});
|
||||
}
|
||||
}, [currentSession]);
|
||||
|
||||
|
|
@ -141,7 +127,7 @@ export function SessionManager({ currentSession, onSessionChange, onNewSession }
|
|||
<SelectValue placeholder="Select Session" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{sessions.map((session) => (
|
||||
{sessions.map(session => (
|
||||
<SelectItem key={session.id} value={session.id}>
|
||||
{session.name}
|
||||
</SelectItem>
|
||||
|
|
@ -164,12 +150,12 @@ export function SessionManager({ currentSession, onSessionChange, onNewSession }
|
|||
|
||||
<Input
|
||||
value={newSessionName}
|
||||
onChange={(e) => setNewSessionName(e.target.value)}
|
||||
onChange={e => setNewSessionName(e.target.value)}
|
||||
placeholder="Session name (optional)"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
onKeyDown={e => {
|
||||
if (e.key === "Enter") {
|
||||
createNewSession();
|
||||
} else if (e.key === 'Escape') {
|
||||
} else if (e.key === "Escape") {
|
||||
setShowCreateForm(false);
|
||||
setNewSessionName("");
|
||||
}
|
||||
|
|
@ -197,7 +183,8 @@ export function SessionManager({ currentSession, onSessionChange, onNewSession }
|
|||
{currentSession && sessions.length > 1 && (
|
||||
<div className="mt-2 text-xs text-gray-500">
|
||||
{sessions.length} sessions • Current: {currentSession.name}
|
||||
{currentSession.messages.length > 0 && ` • ${currentSession.messages.length} messages`}
|
||||
{currentSession.messages.length > 0 &&
|
||||
` • ${currentSession.messages.length} messages`}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -237,19 +224,27 @@ export const SessionUtils = {
|
|||
if (existingIndex >= 0) {
|
||||
sessions[existingIndex] = { ...session, updatedAt: Date.now() };
|
||||
} else {
|
||||
sessions.push({ ...session, createdAt: Date.now(), updatedAt: Date.now() });
|
||||
sessions.push({
|
||||
...session,
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now(),
|
||||
});
|
||||
}
|
||||
|
||||
localStorage.setItem(SESSIONS_STORAGE_KEY, JSON.stringify(sessions));
|
||||
localStorage.setItem(CURRENT_SESSION_KEY, session.id);
|
||||
},
|
||||
|
||||
createDefaultSession: (inheritModel?: string, inheritVectorDb?: string): ChatSession => ({
|
||||
createDefaultSession: (
|
||||
inheritModel?: string,
|
||||
inheritVectorDb?: string
|
||||
): ChatSession => ({
|
||||
id: Date.now().toString(),
|
||||
name: "Default Session",
|
||||
messages: [],
|
||||
selectedModel: inheritModel || "",
|
||||
selectedVectorDb: inheritVectorDb || "",
|
||||
systemMessage: "You are a helpful assistant.",
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now(),
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -79,6 +79,38 @@ interface SidebarItem {
|
|||
export function AppSidebar() {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<Sidebar>
|
||||
<SidebarHeader>
|
||||
<Link href="/">Llama Stack</Link>
|
||||
</SidebarHeader>
|
||||
<SidebarContent>
|
||||
{/* Chat Playground as its own section */}
|
||||
<SidebarGroup>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
className={cn(
|
||||
"justify-start",
|
||||
pathname.startsWith(chatPlaygroundItem.url) &&
|
||||
"bg-gray-200 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100"
|
||||
)}
|
||||
>
|
||||
<Link href={chatPlaygroundItem.url}>
|
||||
<chatPlaygroundItem.icon
|
||||
className={cn(
|
||||
pathname.startsWith(chatPlaygroundItem.url) &&
|
||||
"text-gray-900 dark:text-gray-100",
|
||||
"mr-2 h-4 w-4"
|
||||
)}
|
||||
/>
|
||||
<span>{chatPlaygroundItem.title}</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
const renderSidebarItems = (items: SidebarItem[]) => {
|
||||
return items.map(item => {
|
||||
const isActive = pathname.startsWith(item.url);
|
||||
|
|
|
|||
|
|
@ -666,7 +666,7 @@ describe("ResponseDetailView", () => {
|
|||
role: "assistant",
|
||||
call_id: "call_123",
|
||||
content: "sunny and warm",
|
||||
} as unknown, // Using any to bypass the type restriction for this test
|
||||
} as unknown, // Using unknown to bypass the type restriction for this test
|
||||
],
|
||||
input: [],
|
||||
};
|
||||
|
|
@ -706,7 +706,7 @@ describe("ResponseDetailView", () => {
|
|||
status: "completed",
|
||||
call_id: "call_123",
|
||||
output: "sunny and warm",
|
||||
} as unknown,
|
||||
} as unknown, // Using unknown to bypass the type restriction for this test
|
||||
],
|
||||
input: [],
|
||||
};
|
||||
|
|
|
|||
200
llama_stack/ui/components/vector-db/vector-db-manager-simple.tsx
Normal file
200
llama_stack/ui/components/vector-db/vector-db-manager-simple.tsx
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import type LlamaStackClient from "llama-stack-client";
|
||||
|
||||
interface VectorDbManagerProps {
|
||||
client: LlamaStackClient;
|
||||
onVectorDbCreated: () => void;
|
||||
}
|
||||
|
||||
export function VectorDbManager({
|
||||
client,
|
||||
onVectorDbCreated,
|
||||
}: VectorDbManagerProps) {
|
||||
const [showCreateForm, setShowCreateForm] = useState(false);
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [createError, setCreateError] = useState<string | null>(null);
|
||||
const [formData, setFormData] = useState({
|
||||
vectorDbId: "",
|
||||
embeddingModel: "all-MiniLM-L6-v2",
|
||||
embeddingDimension: "384",
|
||||
});
|
||||
|
||||
const handleCreateVectorDb = async () => {
|
||||
if (!formData.vectorDbId.trim()) {
|
||||
setCreateError("Vector DB ID is required");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsCreating(true);
|
||||
setCreateError(null);
|
||||
|
||||
try {
|
||||
// Get available providers to find a vector_io provider
|
||||
const providers = await client.providers.list();
|
||||
const vectorIoProvider = providers.find(p => p.api === "vector_io");
|
||||
|
||||
if (!vectorIoProvider) {
|
||||
throw new Error("No vector_io provider found");
|
||||
}
|
||||
|
||||
await client.vectorDBs.register({
|
||||
vector_db_id: formData.vectorDbId.trim(),
|
||||
embedding_model: formData.embeddingModel,
|
||||
embedding_dimension: parseInt(formData.embeddingDimension),
|
||||
provider_id: vectorIoProvider.provider_id,
|
||||
});
|
||||
|
||||
// Reset form and close
|
||||
setFormData({
|
||||
vectorDbId: "",
|
||||
embeddingModel: "all-MiniLM-L6-v2",
|
||||
embeddingDimension: "384",
|
||||
});
|
||||
setShowCreateForm(false);
|
||||
|
||||
// Refresh the vector DB list
|
||||
onVectorDbCreated();
|
||||
} catch (err) {
|
||||
console.error("Error creating vector DB:", err);
|
||||
setCreateError(
|
||||
err instanceof Error ? err.message : "Failed to create vector database"
|
||||
);
|
||||
} finally {
|
||||
setIsCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setShowCreateForm(false);
|
||||
setCreateError(null);
|
||||
setFormData({
|
||||
vectorDbId: "",
|
||||
embeddingModel: "all-MiniLM-L6-v2",
|
||||
embeddingDimension: "384",
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{!showCreateForm ? (
|
||||
<Button
|
||||
onClick={() => setShowCreateForm(true)}
|
||||
variant="outline"
|
||||
size="default"
|
||||
className="w-full"
|
||||
>
|
||||
+ Create Vector DB
|
||||
</Button>
|
||||
) : (
|
||||
<Card className="absolute top-full right-0 mt-2 p-4 space-y-4 w-80 z-50 bg-background border shadow-lg">
|
||||
<h3 className="text-lg font-semibold">Create Vector Database</h3>
|
||||
|
||||
{createError && (
|
||||
<div className="p-3 bg-destructive/10 border border-destructive/20 rounded-md">
|
||||
<p className="text-destructive text-sm">{createError}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="text-sm font-medium block mb-1">
|
||||
Vector DB ID *
|
||||
</label>
|
||||
<Input
|
||||
value={formData.vectorDbId}
|
||||
onChange={e =>
|
||||
setFormData({ ...formData, vectorDbId: e.target.value })
|
||||
}
|
||||
placeholder="Enter unique vector DB identifier"
|
||||
disabled={isCreating}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium block mb-1">
|
||||
Embedding Model
|
||||
</label>
|
||||
<Select
|
||||
value={formData.embeddingModel}
|
||||
onValueChange={value =>
|
||||
setFormData({ ...formData, embeddingModel: value })
|
||||
}
|
||||
disabled={isCreating}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all-MiniLM-L6-v2">
|
||||
all-MiniLM-L6-v2
|
||||
</SelectItem>
|
||||
<SelectItem value="text-embedding-ada-002">
|
||||
text-embedding-ada-002
|
||||
</SelectItem>
|
||||
<SelectItem value="text-embedding-3-small">
|
||||
text-embedding-3-small
|
||||
</SelectItem>
|
||||
<SelectItem value="text-embedding-3-large">
|
||||
text-embedding-3-large
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium block mb-1">
|
||||
Embedding Dimension
|
||||
</label>
|
||||
<Select
|
||||
value={formData.embeddingDimension}
|
||||
onValueChange={value =>
|
||||
setFormData({ ...formData, embeddingDimension: value })
|
||||
}
|
||||
disabled={isCreating}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="384">384 (all-MiniLM-L6-v2)</SelectItem>
|
||||
<SelectItem value="1536">1536 (ada-002, 3-small)</SelectItem>
|
||||
<SelectItem value="3072">3072 (3-large)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={handleCreateVectorDb}
|
||||
disabled={isCreating}
|
||||
className="flex-1"
|
||||
>
|
||||
{isCreating ? "Creating..." : "Create"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleCancel}
|
||||
disabled={isCreating}
|
||||
className="flex-1"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -24,7 +24,10 @@ interface UploadState {
|
|||
uploadError: string | null;
|
||||
}
|
||||
|
||||
export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerProps) {
|
||||
export function VectorDbManager({
|
||||
client,
|
||||
onVectorDbCreated,
|
||||
}: VectorDbManagerProps) {
|
||||
const [showCreateForm, setShowCreateForm] = useState(false);
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [createError, setCreateError] = useState<string | null>(null);
|
||||
|
|
@ -78,7 +81,9 @@ export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerPr
|
|||
onVectorDbCreated();
|
||||
} catch (err) {
|
||||
console.error("Error creating vector DB:", err);
|
||||
setCreateError(err instanceof Error ? err.message : "Failed to create vector database");
|
||||
setCreateError(
|
||||
err instanceof Error ? err.message : "Failed to create vector database"
|
||||
);
|
||||
} finally {
|
||||
setIsCreating(false);
|
||||
}
|
||||
|
|
@ -105,13 +110,17 @@ export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerPr
|
|||
const chunks: string[] = [];
|
||||
|
||||
for (let i = 0; i < words.length; i += chunkSize) {
|
||||
chunks.push(words.slice(i, i + chunkSize).join(' '));
|
||||
chunks.push(words.slice(i, i + chunkSize).join(" "));
|
||||
}
|
||||
|
||||
return chunks;
|
||||
};
|
||||
|
||||
const ingestDocument = async (content: string, documentId: string, vectorDbId: string) => {
|
||||
const ingestDocument = async (
|
||||
content: string,
|
||||
documentId: string,
|
||||
vectorDbId: string
|
||||
) => {
|
||||
const chunks = chunkText(content);
|
||||
|
||||
const vectorChunks = chunks.map((chunk, index) => ({
|
||||
|
|
@ -165,7 +174,8 @@ export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerPr
|
|||
setUploadState({
|
||||
isUploading: false,
|
||||
uploadProgress: "",
|
||||
uploadError: err instanceof Error ? err.message : "Failed to upload file",
|
||||
uploadError:
|
||||
err instanceof Error ? err.message : "Failed to upload file",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -181,8 +191,8 @@ export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerPr
|
|||
|
||||
try {
|
||||
const response = await fetch(`/api/fetch-url`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ url: urlInput }),
|
||||
});
|
||||
|
||||
|
|
@ -212,7 +222,8 @@ export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerPr
|
|||
setUploadState({
|
||||
isUploading: false,
|
||||
uploadProgress: "",
|
||||
uploadError: err instanceof Error ? err.message : "Failed to fetch URL content",
|
||||
uploadError:
|
||||
err instanceof Error ? err.message : "Failed to fetch URL content",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -239,13 +250,17 @@ export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerPr
|
|||
|
||||
{uploadState.uploadError && (
|
||||
<div className="p-3 bg-destructive/10 border border-destructive/20 rounded-md">
|
||||
<p className="text-destructive text-sm">{uploadState.uploadError}</p>
|
||||
<p className="text-destructive text-sm">
|
||||
{uploadState.uploadError}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{uploadState.uploadProgress && (
|
||||
<div className="p-3 bg-blue-50 border border-blue-200 rounded-md">
|
||||
<p className="text-blue-700 text-sm">{uploadState.uploadProgress}</p>
|
||||
<p className="text-blue-700 text-sm">
|
||||
{uploadState.uploadProgress}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -256,7 +271,9 @@ export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerPr
|
|||
</label>
|
||||
<Input
|
||||
value={formData.vectorDbId}
|
||||
onChange={(e) => setFormData({ ...formData, vectorDbId: e.target.value })}
|
||||
onChange={e =>
|
||||
setFormData({ ...formData, vectorDbId: e.target.value })
|
||||
}
|
||||
placeholder="Enter unique vector DB identifier"
|
||||
disabled={isCreating || uploadState.isUploading}
|
||||
/>
|
||||
|
|
@ -268,17 +285,27 @@ export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerPr
|
|||
</label>
|
||||
<Select
|
||||
value={formData.embeddingModel}
|
||||
onValueChange={(value) => setFormData({ ...formData, embeddingModel: value })}
|
||||
onValueChange={value =>
|
||||
setFormData({ ...formData, embeddingModel: value })
|
||||
}
|
||||
disabled={isCreating || uploadState.isUploading}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all-MiniLM-L6-v2">all-MiniLM-L6-v2</SelectItem>
|
||||
<SelectItem value="text-embedding-ada-002">text-embedding-ada-002</SelectItem>
|
||||
<SelectItem value="text-embedding-3-small">text-embedding-3-small</SelectItem>
|
||||
<SelectItem value="text-embedding-3-large">text-embedding-3-large</SelectItem>
|
||||
<SelectItem value="all-MiniLM-L6-v2">
|
||||
all-MiniLM-L6-v2
|
||||
</SelectItem>
|
||||
<SelectItem value="text-embedding-ada-002">
|
||||
text-embedding-ada-002
|
||||
</SelectItem>
|
||||
<SelectItem value="text-embedding-3-small">
|
||||
text-embedding-3-small
|
||||
</SelectItem>
|
||||
<SelectItem value="text-embedding-3-large">
|
||||
text-embedding-3-large
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
|
@ -289,7 +316,9 @@ export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerPr
|
|||
</label>
|
||||
<Select
|
||||
value={formData.embeddingDimension}
|
||||
onValueChange={(value) => setFormData({ ...formData, embeddingDimension: value })}
|
||||
onValueChange={value =>
|
||||
setFormData({ ...formData, embeddingDimension: value })
|
||||
}
|
||||
disabled={isCreating || uploadState.isUploading}
|
||||
>
|
||||
<SelectTrigger>
|
||||
|
|
@ -339,7 +368,11 @@ export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerPr
|
|||
/>
|
||||
<Button
|
||||
onClick={() => handleFileUpload(formData.vectorDbId)}
|
||||
disabled={!formData.vectorDbId || !fileInputRef.current?.files?.length || uploadState.isUploading}
|
||||
disabled={
|
||||
!formData.vectorDbId ||
|
||||
!fileInputRef.current?.files?.length ||
|
||||
uploadState.isUploading
|
||||
}
|
||||
className="mt-2 w-full"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
|
|
@ -354,13 +387,17 @@ export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerPr
|
|||
</label>
|
||||
<Input
|
||||
value={urlInput}
|
||||
onChange={(e) => setUrlInput(e.target.value)}
|
||||
onChange={e => setUrlInput(e.target.value)}
|
||||
placeholder="https://example.com/article"
|
||||
disabled={!formData.vectorDbId || uploadState.isUploading}
|
||||
/>
|
||||
<Button
|
||||
onClick={() => handleUrlUpload(formData.vectorDbId)}
|
||||
disabled={!formData.vectorDbId || !urlInput.trim() || uploadState.isUploading}
|
||||
disabled={
|
||||
!formData.vectorDbId ||
|
||||
!urlInput.trim() ||
|
||||
uploadState.isUploading
|
||||
}
|
||||
className="mt-2 w-full"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
|
|
|
|||
2
llama_stack/ui/package-lock.json
generated
2
llama_stack/ui/package-lock.json
generated
|
|
@ -18,7 +18,7 @@
|
|||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"framer-motion": "^11.18.2",
|
||||
"llama-stack-client": "0.2.17",
|
||||
"llama-stack-client": "^0.2.17",
|
||||
"lucide-react": "^0.510.0",
|
||||
"next": "15.3.3",
|
||||
"next-auth": "^4.24.11",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue