mirror of
https://github.com/meta-llama/llama-stack.git
synced 2025-12-18 17:19:46 +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
3bfc4488b0
commit
709dd76f74
6 changed files with 878 additions and 92 deletions
|
|
@ -17,9 +17,20 @@ 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);
|
||||
|
|
@ -35,6 +46,26 @@ export default function ChatPlaygroundPage() {
|
|||
|
||||
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 () => {
|
||||
try {
|
||||
|
|
@ -43,8 +74,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);
|
||||
|
|
@ -108,9 +139,9 @@ export default function ChatPlaygroundPage() {
|
|||
setInput(e.target.value);
|
||||
};
|
||||
|
||||
const handleSubmit = async (event?: { preventDefault?: () => void }) => {
|
||||
event?.preventDefault?.();
|
||||
if (!input.trim()) return;
|
||||
const handleSubmit = async (event?: { preventDefault?: () => void }) => {
|
||||
event?.preventDefault?.();
|
||||
if (!input.trim() || !currentSession || !currentSession.selectedModel) return;
|
||||
|
||||
// Add user message to chat
|
||||
const userMessage: Message = {
|
||||
|
|
@ -120,8 +151,12 @@ export default function ChatPlaygroundPage() {
|
|||
createdAt: new Date(),
|
||||
};
|
||||
|
||||
setMessages(prev => [...prev, userMessage]);
|
||||
setInput("");
|
||||
setCurrentSession(prev => prev ? {
|
||||
...prev,
|
||||
messages: [...prev.messages, userMessage],
|
||||
updatedAt: Date.now()
|
||||
} : null);
|
||||
setInput("");
|
||||
|
||||
// Use the helper function with the content
|
||||
await handleSubmitWithContent(userMessage.content);
|
||||
|
|
@ -135,11 +170,11 @@ export default function ChatPlaygroundPage() {
|
|||
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) {
|
||||
|
|
@ -162,7 +197,7 @@ export default function ChatPlaygroundPage() {
|
|||
}
|
||||
|
||||
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 };
|
||||
|
|
@ -175,11 +210,11 @@ export default function ChatPlaygroundPage() {
|
|||
{ role: "user" as const, content: enhancedContent }
|
||||
];
|
||||
|
||||
const response = await client.chat.completions.create({
|
||||
model: 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(),
|
||||
|
|
@ -188,33 +223,43 @@ export default function ChatPlaygroundPage() {
|
|||
createdAt: new Date(),
|
||||
};
|
||||
|
||||
setMessages(prev => [...prev, assistantMessage]);
|
||||
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;
|
||||
setCurrentSession(prev => prev ? {
|
||||
...prev,
|
||||
messages: [...prev.messages, assistantMessage],
|
||||
updatedAt: Date.now()
|
||||
} : null);
|
||||
|
||||
flushSync(() => {
|
||||
setMessages(prev => {
|
||||
const newMessages = [...prev];
|
||||
const lastMessage = newMessages[newMessages.length - 1];
|
||||
if (lastMessage.role === "assistant") {
|
||||
lastMessage.content = fullContent;
|
||||
}
|
||||
return newMessages;
|
||||
});
|
||||
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() };
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error sending message:", err);
|
||||
setError("Failed to send message. Please try again.");
|
||||
setMessages(prev => prev.slice(0, -1));
|
||||
} 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);
|
||||
}
|
||||
};
|
||||
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?",
|
||||
|
|
@ -228,15 +273,41 @@ export default function ChatPlaygroundPage() {
|
|||
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);
|
||||
|
|
@ -252,51 +323,70 @@ export default function ChatPlaygroundPage() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full max-w-4xl mx-auto">
|
||||
<div className="flex flex-col h-full w-full max-w-4xl mx-auto">
|
||||
<div className="mb-4 flex justify-between items-center">
|
||||
<h1 className="text-2xl font-bold">Chat Playground (Completions)</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"
|
||||
}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{models.map(model => (
|
||||
<SelectItem key={model.identifier} value={model.identifier}>
|
||||
{model.identifier}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={selectedVectorDb} onValueChange={setSelectedVectorDb} disabled={vectorDbsLoading || isGenerating}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder={vectorDbsLoading ? "Loading vector DBs..." : "Select Vector DB (Optional)"} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">None (No RAG)</SelectItem>
|
||||
{vectorDbs.map((vectorDb) => (
|
||||
<SelectItem key={vectorDb.identifier} value={vectorDb.identifier}>
|
||||
{vectorDb.identifier}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<VectorDbManager
|
||||
client={client}
|
||||
onVectorDbCreated={refreshVectorDbs}
|
||||
<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}
|
||||
>
|
||||
<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>
|
||||
</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 && (
|
||||
|
|
@ -319,14 +409,14 @@ export default function ChatPlaygroundPage() {
|
|||
|
||||
<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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue