mirror of
https://github.com/meta-llama/llama-stack.git
synced 2025-08-15 14:08:00 +00:00
fixed width behavior and made session list cleaner
Signed-off-by: Francisco Javier Arceo <farceo@redhat.com>
This commit is contained in:
Francisco Javier Arceo
parent
f609d15b33
commit
82de94a11b
6 changed files with 859 additions and 68 deletions
58
llama_stack/ui/app/api/fetch-url/route.ts
Normal file
58
llama_stack/ui/app/api/fetch-url/route.ts
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
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 }
|
||||
);
|
||||
}
|
||||
|
||||
// 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'
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const contentType = response.headers.get('content-type') || '';
|
||||
let content: string;
|
||||
|
||||
if (contentType.includes('application/json')) {
|
||||
const json = await response.json();
|
||||
content = JSON.stringify(json, null, 2);
|
||||
} 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(/"/g, '"')
|
||||
.replace(/'/g, "'")
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim();
|
||||
} else {
|
||||
content = await response.text();
|
||||
}
|
||||
|
||||
return NextResponse.json({ content });
|
||||
} catch (error) {
|
||||
console.error('Error fetching URL:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to fetch URL content' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -17,24 +17,52 @@ import type { CompletionCreateParams } from "llama-stack-client/resources/chat/c
|
|||
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";
|
||||
|
||||
interface ChatSession {
|
||||
id: string;
|
||||
name: string;
|
||||
messages: Message[];
|
||||
selectedModel: string;
|
||||
selectedVectorDb: string;
|
||||
createdAt: number;
|
||||
updatedAt: number;
|
||||
}
|
||||
|
||||
export default function ChatPlaygroundPage() {
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
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 isModelsLoading = modelsLoading ?? true;
|
||||
|
||||
// Load current session on mount
|
||||
useEffect(() => {
|
||||
const savedSession = SessionUtils.loadCurrentSession();
|
||||
if (savedSession) {
|
||||
setCurrentSession(savedSession);
|
||||
} else {
|
||||
// Create default session if none exists - will be updated with model when models load
|
||||
const defaultSession = SessionUtils.createDefaultSession();
|
||||
setCurrentSession(defaultSession);
|
||||
SessionUtils.saveCurrentSession(defaultSession);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Save session when it changes
|
||||
useEffect(() => {
|
||||
if (currentSession) {
|
||||
SessionUtils.saveCurrentSession(currentSession);
|
||||
}
|
||||
}, [currentSession]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchModels = async () => {
|
||||
|
|
@ -44,8 +72,8 @@ export default function ChatPlaygroundPage() {
|
|||
const modelList = await client.models.list();
|
||||
const llmModels = modelList.filter(model => model.model_type === 'llm');
|
||||
setModels(llmModels);
|
||||
if (llmModels.length > 0) {
|
||||
setSelectedModel(llmModels[0].identifier);
|
||||
if (llmModels.length > 0 && currentSession && !currentSession.selectedModel) {
|
||||
setCurrentSession(prev => prev ? { ...prev, selectedModel: llmModels[0].identifier } : null);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error fetching models:", err);
|
||||
|
|
@ -95,7 +123,7 @@ export default function ChatPlaygroundPage() {
|
|||
|
||||
const handleSubmit = async (event?: { preventDefault?: () => void }) => {
|
||||
event?.preventDefault?.();
|
||||
if (!input.trim()) return;
|
||||
if (!input.trim() || !currentSession || !currentSession.selectedModel) return;
|
||||
|
||||
// Add user message to chat
|
||||
const userMessage: Message = {
|
||||
|
|
@ -105,7 +133,11 @@ const handleSubmit = async (event?: { preventDefault?: () => void }) => {
|
|||
createdAt: new Date(),
|
||||
};
|
||||
|
||||
setMessages(prev => [...prev, userMessage]);
|
||||
setCurrentSession(prev => prev ? {
|
||||
...prev,
|
||||
messages: [...prev.messages, userMessage],
|
||||
updatedAt: Date.now()
|
||||
} : null);
|
||||
setInput("");
|
||||
|
||||
// Use the helper function with the content
|
||||
|
|
@ -120,11 +152,11 @@ const handleSubmitWithContent = async (content: string) => {
|
|||
let enhancedContent = content;
|
||||
|
||||
// If a vector DB is selected, query for relevant context
|
||||
if (selectedVectorDb && selectedVectorDb !== "none") {
|
||||
if (currentSession?.selectedVectorDb && currentSession.selectedVectorDb !== "none") {
|
||||
try {
|
||||
const vectorResponse = await client.vectorIo.query({
|
||||
query: content,
|
||||
vector_db_id: selectedVectorDb,
|
||||
vector_db_id: currentSession.selectedVectorDb,
|
||||
});
|
||||
|
||||
if (vectorResponse.chunks && vectorResponse.chunks.length > 0) {
|
||||
|
|
@ -147,7 +179,7 @@ const handleSubmitWithContent = async (content: string) => {
|
|||
}
|
||||
|
||||
const messageParams: CompletionCreateParams["messages"] = [
|
||||
...messages.map(msg => {
|
||||
...(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 };
|
||||
|
|
@ -161,7 +193,7 @@ const handleSubmitWithContent = async (content: string) => {
|
|||
];
|
||||
|
||||
const response = await client.chat.completions.create({
|
||||
model: selectedModel,
|
||||
model: currentSession?.selectedModel || "",
|
||||
messages: messageParams,
|
||||
stream: true,
|
||||
});
|
||||
|
|
@ -173,7 +205,12 @@ const handleSubmitWithContent = async (content: string) => {
|
|||
createdAt: new Date(),
|
||||
};
|
||||
|
||||
setMessages(prev => [...prev, assistantMessage]);
|
||||
setCurrentSession(prev => prev ? {
|
||||
...prev,
|
||||
messages: [...prev.messages, assistantMessage],
|
||||
updatedAt: Date.now()
|
||||
} : null);
|
||||
|
||||
let fullContent = "";
|
||||
for await (const chunk of response) {
|
||||
if (chunk.choices && chunk.choices[0]?.delta?.content) {
|
||||
|
|
@ -181,13 +218,14 @@ const handleSubmitWithContent = async (content: string) => {
|
|||
fullContent += deltaContent;
|
||||
|
||||
flushSync(() => {
|
||||
setMessages(prev => {
|
||||
const newMessages = [...prev];
|
||||
setCurrentSession(prev => {
|
||||
if (!prev) return null;
|
||||
const newMessages = [...prev.messages];
|
||||
const lastMessage = newMessages[newMessages.length - 1];
|
||||
if (lastMessage.role === "assistant") {
|
||||
lastMessage.content = fullContent;
|
||||
}
|
||||
return newMessages;
|
||||
return { ...prev, messages: newMessages, updatedAt: Date.now() };
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -195,7 +233,11 @@ const handleSubmitWithContent = async (content: string) => {
|
|||
} catch (err) {
|
||||
console.error("Error sending message:", err);
|
||||
setError("Failed to send message. Please try again.");
|
||||
setMessages(prev => prev.slice(0, -1));
|
||||
setCurrentSession(prev => prev ? {
|
||||
...prev,
|
||||
messages: prev.messages.slice(0, -1),
|
||||
updatedAt: Date.now()
|
||||
} : null);
|
||||
} finally {
|
||||
setIsGenerating(false);
|
||||
}
|
||||
|
|
@ -213,15 +255,41 @@ const handleSubmitWithContent = async (content: string) => {
|
|||
content: message.content,
|
||||
createdAt: new Date(),
|
||||
};
|
||||
setMessages(prev => [...prev, newMessage])
|
||||
setCurrentSession(prev => prev ? {
|
||||
...prev,
|
||||
messages: [...prev.messages, newMessage],
|
||||
updatedAt: Date.now()
|
||||
} : null);
|
||||
handleSubmitWithContent(newMessage.content);
|
||||
};
|
||||
|
||||
const clearChat = () => {
|
||||
setMessages([]);
|
||||
setCurrentSession(prev => prev ? {
|
||||
...prev,
|
||||
messages: [],
|
||||
updatedAt: Date.now()
|
||||
} : null);
|
||||
setError(null);
|
||||
};
|
||||
|
||||
const handleSessionChange = (session: ChatSession) => {
|
||||
setCurrentSession(session);
|
||||
setError(null);
|
||||
};
|
||||
|
||||
const handleNewSession = () => {
|
||||
const defaultModel = currentSession?.selectedModel || (models.length > 0 ? models[0].identifier : "");
|
||||
const defaultVectorDb = currentSession?.selectedVectorDb || "";
|
||||
|
||||
const newSession = {
|
||||
...SessionUtils.createDefaultSession(),
|
||||
selectedModel: defaultModel,
|
||||
selectedVectorDb: defaultVectorDb,
|
||||
};
|
||||
setCurrentSession(newSession);
|
||||
SessionUtils.saveCurrentSession(newSession);
|
||||
};
|
||||
|
||||
const refreshVectorDbs = async () => {
|
||||
try {
|
||||
setVectorDbsLoading(true);
|
||||
|
|
@ -237,13 +305,33 @@ const handleSubmitWithContent = async (content: string) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full max-w-4xl mx-auto">
|
||||
<div className="mb-4 flex justify-between items-center">
|
||||
<div className="flex flex-col h-full w-full max-w-4xl mx-auto">
|
||||
<div className="mb-4 space-y-3">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Chat Playground</h1>
|
||||
<div className="flex gap-2">
|
||||
<Select value={selectedModel} onValueChange={setSelectedModel} disabled={isModelsLoading || isGenerating}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder={isModelsLoading ? "Loading models..." : "Select Model"} />
|
||||
</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}
|
||||
>
|
||||
<SelectTrigger className="w-[160px]">
|
||||
<SelectValue placeholder={isModelsLoading ? "Loading..." : "Select Model"} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{models.map((model) => (
|
||||
|
|
@ -253,12 +341,20 @@ const handleSubmitWithContent = async (content: string) => {
|
|||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={selectedVectorDb} onValueChange={setSelectedVectorDb} disabled={vectorDbsLoading || isGenerating}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder={vectorDbsLoading ? "Loading vector DBs..." : "Select Vector DB (Optional)"} />
|
||||
</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 (No RAG)</SelectItem>
|
||||
<SelectItem value="none">None</SelectItem>
|
||||
{vectorDbs.map((vectorDb) => (
|
||||
<SelectItem key={vectorDb.identifier} value={vectorDb.identifier}>
|
||||
{vectorDb.identifier}
|
||||
|
|
@ -266,13 +362,12 @@ const handleSubmitWithContent = async (content: string) => {
|
|||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<VectorDbManager
|
||||
client={client}
|
||||
onVectorDbCreated={refreshVectorDbs}
|
||||
/>
|
||||
<Button variant="outline" onClick={clearChat} disabled={isGenerating}>
|
||||
Clear Chat
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -296,14 +391,14 @@ const handleSubmitWithContent = async (content: string) => {
|
|||
|
||||
<Chat
|
||||
className="flex-1"
|
||||
messages={messages}
|
||||
messages={currentSession?.messages || []}
|
||||
handleSubmit={handleSubmit}
|
||||
input={input}
|
||||
handleInputChange={handleInputChange}
|
||||
isGenerating={isGenerating}
|
||||
append={append}
|
||||
suggestions={suggestions}
|
||||
setMessages={setMessages}
|
||||
setMessages={(messages) => setCurrentSession(prev => prev ? { ...prev, messages, updatedAt: Date.now() } : null)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -161,10 +161,10 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
|
|||
|
||||
const isUser = role === "user"
|
||||
|
||||
const formattedTime = createdAt?.toLocaleTimeString("en-US", {
|
||||
const formattedTime = createdAt ? new Date(createdAt).toLocaleTimeString("en-US", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})
|
||||
}) : undefined
|
||||
|
||||
if (isUser) {
|
||||
return (
|
||||
|
|
@ -185,7 +185,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"
|
||||
|
|
@ -220,7 +220,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"
|
||||
|
|
@ -262,7 +262,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"
|
||||
|
|
|
|||
|
|
@ -196,12 +196,14 @@ export function Chat({
|
|||
<div className="flex-1 flex flex-col">
|
||||
{isEmpty && append && suggestions ? (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="max-w-4xl mx-auto w-full">
|
||||
<PromptSuggestions
|
||||
label="Try these prompts ✨"
|
||||
append={append}
|
||||
suggestions={suggestions}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{messages.length > 0 ? (
|
||||
|
|
@ -262,7 +264,7 @@ export function ChatMessages({
|
|||
onScroll={handleScroll}
|
||||
onTouchStart={handleTouchStart}
|
||||
>
|
||||
<div className="max-w-full [grid-column:1/1] [grid-row:1/1]">
|
||||
<div className="max-w-4xl mx-auto w-full [grid-column:1/1] [grid-row:1/1]">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
256
llama_stack/ui/components/chat-playground/session-manager.tsx
Normal file
256
llama_stack/ui/components/chat-playground/session-manager.tsx
Normal file
|
|
@ -0,0 +1,256 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect } 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 { Message } from "@/components/chat-playground/chat-message";
|
||||
|
||||
interface ChatSession {
|
||||
id: string;
|
||||
name: string;
|
||||
messages: Message[];
|
||||
selectedModel: string;
|
||||
selectedVectorDb: string;
|
||||
createdAt: number;
|
||||
updatedAt: number;
|
||||
}
|
||||
|
||||
interface SessionManagerProps {
|
||||
currentSession: ChatSession | null;
|
||||
onSessionChange: (session: ChatSession) => void;
|
||||
onNewSession: () => void;
|
||||
}
|
||||
|
||||
const SESSIONS_STORAGE_KEY = 'chat-playground-sessions';
|
||||
const CURRENT_SESSION_KEY = 'chat-playground-current-session';
|
||||
|
||||
export function SessionManager({ currentSession, onSessionChange, onNewSession }: SessionManagerProps) {
|
||||
const [sessions, setSessions] = useState<ChatSession[]>([]);
|
||||
const [showCreateForm, setShowCreateForm] = useState(false);
|
||||
const [newSessionName, setNewSessionName] = useState("");
|
||||
|
||||
// Load sessions from localStorage
|
||||
useEffect(() => {
|
||||
const savedSessions = localStorage.getItem(SESSIONS_STORAGE_KEY);
|
||||
if (savedSessions) {
|
||||
try {
|
||||
setSessions(JSON.parse(savedSessions));
|
||||
} catch (err) {
|
||||
console.error("Error loading sessions:", err);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Save sessions to localStorage
|
||||
const saveSessions = (updatedSessions: ChatSession[]) => {
|
||||
setSessions(updatedSessions);
|
||||
localStorage.setItem(SESSIONS_STORAGE_KEY, JSON.stringify(updatedSessions));
|
||||
};
|
||||
|
||||
const createNewSession = () => {
|
||||
const sessionName = newSessionName.trim() || `Session ${sessions.length + 1}`;
|
||||
const newSession: ChatSession = {
|
||||
id: Date.now().toString(),
|
||||
name: sessionName,
|
||||
messages: [],
|
||||
selectedModel: currentSession?.selectedModel || "",
|
||||
selectedVectorDb: currentSession?.selectedVectorDb || "",
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now(),
|
||||
};
|
||||
|
||||
const updatedSessions = [...sessions, newSession];
|
||||
saveSessions(updatedSessions);
|
||||
|
||||
localStorage.setItem(CURRENT_SESSION_KEY, newSession.id);
|
||||
onSessionChange(newSession);
|
||||
|
||||
setNewSessionName("");
|
||||
setShowCreateForm(false);
|
||||
};
|
||||
|
||||
const switchToSession = (sessionId: string) => {
|
||||
const session = sessions.find(s => s.id === sessionId);
|
||||
if (session) {
|
||||
localStorage.setItem(CURRENT_SESSION_KEY, sessionId);
|
||||
onSessionChange(session);
|
||||
}
|
||||
};
|
||||
|
||||
// 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
|
||||
);
|
||||
|
||||
// Add session if it doesn't exist
|
||||
if (!sessions.find(s => s.id === currentSession.id)) {
|
||||
updatedSessions.push(currentSession);
|
||||
}
|
||||
|
||||
saveSessions(updatedSessions);
|
||||
}
|
||||
}, [currentSession]);
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="flex items-center gap-2">
|
||||
<Select
|
||||
value={currentSession?.id || ""}
|
||||
onValueChange={switchToSession}
|
||||
>
|
||||
<SelectTrigger className="w-[200px]">
|
||||
<SelectValue placeholder="Select Session" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{sessions.map((session) => (
|
||||
<SelectItem key={session.id} value={session.id}>
|
||||
{session.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Button
|
||||
onClick={() => setShowCreateForm(true)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
+ New
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{showCreateForm && (
|
||||
<Card className="absolute top-full left-0 mt-2 p-4 space-y-3 w-80 z-50 bg-background border shadow-lg">
|
||||
<h3 className="text-md font-semibold">Create New Session</h3>
|
||||
|
||||
<Input
|
||||
value={newSessionName}
|
||||
onChange={(e) => setNewSessionName(e.target.value)}
|
||||
placeholder="Session name (optional)"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
createNewSession();
|
||||
} else if (e.key === 'Escape') {
|
||||
setShowCreateForm(false);
|
||||
setNewSessionName("");
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={createNewSession} className="flex-1">
|
||||
Create
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setShowCreateForm(false);
|
||||
setNewSessionName("");
|
||||
}}
|
||||
className="flex-1"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{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`}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Export utility functions for session management
|
||||
export const SessionUtils = {
|
||||
loadCurrentSession: (): ChatSession | null => {
|
||||
const currentSessionId = localStorage.getItem(CURRENT_SESSION_KEY);
|
||||
const savedSessions = localStorage.getItem(SESSIONS_STORAGE_KEY);
|
||||
|
||||
if (currentSessionId && savedSessions) {
|
||||
try {
|
||||
const sessions: ChatSession[] = JSON.parse(savedSessions);
|
||||
return sessions.find(s => s.id === currentSessionId) || null;
|
||||
} catch (err) {
|
||||
console.error("Error loading current session:", err);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
saveCurrentSession: (session: ChatSession) => {
|
||||
const savedSessions = localStorage.getItem(SESSIONS_STORAGE_KEY);
|
||||
let sessions: ChatSession[] = [];
|
||||
|
||||
if (savedSessions) {
|
||||
try {
|
||||
sessions = JSON.parse(savedSessions);
|
||||
} catch (err) {
|
||||
console.error("Error parsing sessions:", err);
|
||||
}
|
||||
}
|
||||
|
||||
const existingIndex = sessions.findIndex(s => s.id === session.id);
|
||||
if (existingIndex >= 0) {
|
||||
sessions[existingIndex] = { ...session, updatedAt: Date.now() };
|
||||
} else {
|
||||
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 => ({
|
||||
id: Date.now().toString(),
|
||||
name: "Default Session",
|
||||
messages: [],
|
||||
selectedModel: inheritModel || "",
|
||||
selectedVectorDb: inheritVectorDb || "",
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now(),
|
||||
}),
|
||||
};
|
||||
380
llama_stack/ui/components/vector-db/vector-db-manager.tsx
Normal file
380
llama_stack/ui/components/vector-db/vector-db-manager.tsx
Normal file
|
|
@ -0,0 +1,380 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useRef } 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;
|
||||
}
|
||||
|
||||
interface UploadState {
|
||||
isUploading: boolean;
|
||||
uploadProgress: string;
|
||||
uploadError: string | null;
|
||||
}
|
||||
|
||||
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 [uploadState, setUploadState] = useState<UploadState>({
|
||||
isUploading: false,
|
||||
uploadProgress: "",
|
||||
uploadError: null,
|
||||
});
|
||||
const [urlInput, setUrlInput] = useState("");
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
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",
|
||||
});
|
||||
setUploadState({
|
||||
isUploading: false,
|
||||
uploadProgress: "",
|
||||
uploadError: null,
|
||||
});
|
||||
setUrlInput("");
|
||||
};
|
||||
|
||||
const chunkText = (text: string, chunkSize: number = 512): string[] => {
|
||||
const words = text.split(/\s+/);
|
||||
const chunks: string[] = [];
|
||||
|
||||
for (let i = 0; i < words.length; i += chunkSize) {
|
||||
chunks.push(words.slice(i, i + chunkSize).join(' '));
|
||||
}
|
||||
|
||||
return chunks;
|
||||
};
|
||||
|
||||
const ingestDocument = async (content: string, documentId: string, vectorDbId: string) => {
|
||||
const chunks = chunkText(content);
|
||||
|
||||
const vectorChunks = chunks.map((chunk, index) => ({
|
||||
content: chunk,
|
||||
metadata: {
|
||||
document_id: documentId,
|
||||
chunk_index: index,
|
||||
source: documentId,
|
||||
},
|
||||
}));
|
||||
|
||||
await client.vectorIo.insert({
|
||||
vector_db_id: vectorDbId,
|
||||
chunks: vectorChunks,
|
||||
});
|
||||
};
|
||||
|
||||
const handleFileUpload = async (vectorDbId: string) => {
|
||||
if (!fileInputRef.current?.files?.length) return;
|
||||
|
||||
const file = fileInputRef.current.files[0];
|
||||
setUploadState({
|
||||
isUploading: true,
|
||||
uploadProgress: `Reading ${file.name}...`,
|
||||
uploadError: null,
|
||||
});
|
||||
|
||||
try {
|
||||
const text = await file.text();
|
||||
|
||||
setUploadState({
|
||||
isUploading: true,
|
||||
uploadProgress: `Ingesting ${file.name} into vector database...`,
|
||||
uploadError: null,
|
||||
});
|
||||
|
||||
await ingestDocument(text, file.name, vectorDbId);
|
||||
|
||||
setUploadState({
|
||||
isUploading: false,
|
||||
uploadProgress: `Successfully ingested ${file.name}`,
|
||||
uploadError: null,
|
||||
});
|
||||
|
||||
// Clear file input
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
} 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 (vectorDbId: string) => {
|
||||
if (!urlInput.trim()) return;
|
||||
|
||||
setUploadState({
|
||||
isUploading: true,
|
||||
uploadProgress: `Fetching content from ${urlInput}...`,
|
||||
uploadError: null,
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/fetch-url`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ url: urlInput }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch URL: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const { content } = await response.json();
|
||||
|
||||
setUploadState({
|
||||
isUploading: true,
|
||||
uploadProgress: `Ingesting content from ${urlInput}...`,
|
||||
uploadError: null,
|
||||
});
|
||||
|
||||
await ingestDocument(content, urlInput, vectorDbId);
|
||||
|
||||
setUploadState({
|
||||
isUploading: false,
|
||||
uploadProgress: `Successfully ingested content from ${urlInput}`,
|
||||
uploadError: null,
|
||||
});
|
||||
|
||||
setUrlInput("");
|
||||
} catch (err) {
|
||||
console.error("Error uploading URL:", err);
|
||||
setUploadState({
|
||||
isUploading: false,
|
||||
uploadProgress: "",
|
||||
uploadError: err instanceof Error ? err.message : "Failed to fetch URL content",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{!showCreateForm ? (
|
||||
<Button
|
||||
onClick={() => setShowCreateForm(true)}
|
||||
variant="outline"
|
||||
size="default"
|
||||
>
|
||||
+ Vector DB
|
||||
</Button>
|
||||
) : (
|
||||
<Card className="absolute top-full right-0 mt-2 p-4 space-y-4 w-96 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>
|
||||
)}
|
||||
|
||||
{uploadState.uploadError && (
|
||||
<div className="p-3 bg-destructive/10 border border-destructive/20 rounded-md">
|
||||
<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>
|
||||
</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 || uploadState.isUploading}
|
||||
/>
|
||||
</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 || 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>
|
||||
</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 || uploadState.isUploading}
|
||||
>
|
||||
<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 || uploadState.isUploading}
|
||||
className="flex-1"
|
||||
>
|
||||
{isCreating ? "Creating..." : "Create"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleCancel}
|
||||
disabled={isCreating || uploadState.isUploading}
|
||||
className="flex-1"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Document Upload Section */}
|
||||
<div className="border-t pt-4 space-y-3">
|
||||
<h4 className="text-md font-medium">Upload Documents (Optional)</h4>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium block mb-1">
|
||||
Upload File (TXT, PDF)
|
||||
</label>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".txt,.pdf"
|
||||
className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
|
||||
disabled={!formData.vectorDbId || uploadState.isUploading}
|
||||
/>
|
||||
<Button
|
||||
onClick={() => handleFileUpload(formData.vectorDbId)}
|
||||
disabled={!formData.vectorDbId || !fileInputRef.current?.files?.length || uploadState.isUploading}
|
||||
className="mt-2 w-full"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
{uploadState.isUploading ? "Uploading..." : "Upload File"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium block mb-1">
|
||||
Or Enter URL
|
||||
</label>
|
||||
<Input
|
||||
value={urlInput}
|
||||
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}
|
||||
className="mt-2 w-full"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
{uploadState.isUploading ? "Fetching..." : "Fetch & Upload"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-gray-500">
|
||||
Note: Create the Vector DB first, then upload documents to it.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue