mirror of
https://github.com/meta-llama/llama-stack.git
synced 2025-07-27 06:28:50 +00:00
have messages working but streaming still not fixed yet
Signed-off-by: Francisco Javier Arceo <farceo@redhat.com>
This commit is contained in:
Francisco Javier Arceo
parent
fc3286be7e
commit
f7c9651ca7
23 changed files with 4749 additions and 184 deletions
|
|
@ -1,42 +1,34 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { ChatMessage } from "@/lib/types";
|
||||
import { ChatMessageItem } from "@/components/chat-completions/chat-messasge-item";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { useState, useEffect } from "react";
|
||||
import { flushSync } from "react-dom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Send, Loader2, ChevronDown } from "lucide-react";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Chat } from "@/components/ui/chat";
|
||||
import { type Message } from "@/components/ui/chat-message";
|
||||
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";
|
||||
|
||||
export default function ChatPlaygroundPage() {
|
||||
const [messages, setMessages] = useState<ChatMessage[]>([]);
|
||||
const [inputMessage, setInputMessage] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
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 messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
const client = useAuthClient();
|
||||
|
||||
const isModelsLoading = modelsLoading ?? true;
|
||||
|
||||
const scrollToBottom = () => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
scrollToBottom();
|
||||
}, [messages]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchModels = async () => {
|
||||
|
|
@ -60,76 +52,119 @@ export default function ChatPlaygroundPage() {
|
|||
fetchModels();
|
||||
}, [client]);
|
||||
|
||||
const extractTextContent = (content: any): string => {
|
||||
const extractTextContent = (content: unknown): string => {
|
||||
if (typeof content === 'string') {
|
||||
return content;
|
||||
}
|
||||
if (Array.isArray(content)) {
|
||||
return content
|
||||
.filter(item => item.type === 'text')
|
||||
.map(item => item.text)
|
||||
.filter(item => item && typeof item === 'object' && 'type' in item && item.type === 'text')
|
||||
.map(item => (item && typeof item === 'object' && 'text' in item) ? String(item.text) : '')
|
||||
.join('');
|
||||
}
|
||||
if (content && content.type === 'text') {
|
||||
return content.text || '';
|
||||
if (content && typeof content === 'object' && 'type' in content && content.type === 'text' && 'text' in content) {
|
||||
return String(content.text) || '';
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
const handleSendMessage = async () => {
|
||||
if (!inputMessage.trim() || isLoading || !selectedModel) return;
|
||||
|
||||
const userMessage: ChatMessage = {
|
||||
role: "user",
|
||||
content: inputMessage.trim(),
|
||||
};
|
||||
|
||||
setMessages(prev => [...prev, userMessage]);
|
||||
setInputMessage("");
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const messageParams: CompletionCreateParams["messages"] = [...messages, userMessage].map(msg => {
|
||||
const content = typeof msg.content === 'string' ? msg.content : extractTextContent(msg.content);
|
||||
if (msg.role === "user") {
|
||||
return { role: "user" as const, content };
|
||||
} else if (msg.role === "assistant") {
|
||||
return { role: "assistant" as const, content };
|
||||
} else {
|
||||
return { role: "system" as const, content };
|
||||
}
|
||||
});
|
||||
|
||||
const response = await client.chat.completions.create({
|
||||
model: selectedModel,
|
||||
messages: messageParams,
|
||||
stream: false,
|
||||
});
|
||||
|
||||
if ('choices' in response && response.choices && response.choices.length > 0) {
|
||||
const choice = response.choices[0];
|
||||
if ('message' in choice && choice.message) {
|
||||
const assistantMessage: ChatMessage = {
|
||||
role: "assistant",
|
||||
content: extractTextContent(choice.message.content),
|
||||
};
|
||||
setMessages(prev => [...prev, assistantMessage]);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error sending message:", err);
|
||||
setError("Failed to send message. Please try again.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setInput(e.target.value);
|
||||
};
|
||||
|
||||
const handleKeyPress = (e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSendMessage();
|
||||
const handleSubmit = async (event?: { preventDefault?: () => void }) => {
|
||||
event?.preventDefault?.();
|
||||
if (!input.trim()) return;
|
||||
|
||||
// Add user message to chat
|
||||
const userMessage: Message = {
|
||||
id: Date.now().toString(),
|
||||
role: "user",
|
||||
content: input.trim(),
|
||||
createdAt: new Date(),
|
||||
};
|
||||
|
||||
setMessages(prev => [...prev, userMessage]);
|
||||
setInput("");
|
||||
|
||||
// Use the helper function with the content
|
||||
await handleSubmitWithContent(userMessage.content);
|
||||
};
|
||||
|
||||
const handleSubmitWithContent = async (content: string) => {
|
||||
setIsGenerating(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const messageParams: CompletionCreateParams["messages"] = [
|
||||
...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 {
|
||||
return { role: "system" as const, content: msgContent };
|
||||
}
|
||||
}),
|
||||
{ role: "user" as const, content }
|
||||
];
|
||||
|
||||
const response = await client.chat.completions.create({
|
||||
model: selectedModel,
|
||||
messages: messageParams,
|
||||
stream: true,
|
||||
});
|
||||
|
||||
const assistantMessage: Message = {
|
||||
id: (Date.now() + 1).toString(),
|
||||
role: "assistant",
|
||||
content: "",
|
||||
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;
|
||||
|
||||
flushSync(() => {
|
||||
setMessages(prev => {
|
||||
const newMessages = [...prev];
|
||||
const lastMessage = newMessages[newMessages.length - 1];
|
||||
if (lastMessage.role === "assistant") {
|
||||
lastMessage.content = fullContent;
|
||||
}
|
||||
return newMessages;
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
} 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);
|
||||
}
|
||||
};
|
||||
const suggestions = [
|
||||
"What is the weather in San Francisco?",
|
||||
"Explain step-by-step how to solve this math problem: If x² + 6x + 9 = 25, what is x?",
|
||||
"Design a simple algorithm to find the longest palindrome in a string.",
|
||||
];
|
||||
|
||||
const append = (message: { role: "user"; content: string }) => {
|
||||
const newMessage: Message = {
|
||||
id: Date.now().toString(),
|
||||
role: message.role,
|
||||
content: message.content,
|
||||
createdAt: new Date(),
|
||||
};
|
||||
setMessages(prev => [...prev, newMessage])
|
||||
handleSubmitWithContent(newMessage.content);
|
||||
};
|
||||
|
||||
const clearChat = () => {
|
||||
|
|
@ -141,102 +176,48 @@ export default function ChatPlaygroundPage() {
|
|||
<div className="flex flex-col h-full max-w-4xl mx-auto">
|
||||
<div className="mb-4 flex justify-between items-center">
|
||||
<h1 className="text-2xl font-bold">Chat Playground</h1>
|
||||
<div className="flex gap-2">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" disabled={isModelsLoading || isLoading}>
|
||||
{isModelsLoading ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||||
Loading models...
|
||||
</>
|
||||
) : selectedModel ? (
|
||||
<>
|
||||
{selectedModel}
|
||||
<ChevronDown className="h-4 w-4 ml-2" />
|
||||
</>
|
||||
) : (
|
||||
"No models available"
|
||||
)}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<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) => (
|
||||
<DropdownMenuItem
|
||||
key={model.identifier}
|
||||
onClick={() => setSelectedModel(model.identifier)}
|
||||
>
|
||||
<SelectItem key={model.identifier} value={model.identifier}>
|
||||
{model.identifier}
|
||||
</DropdownMenuItem>
|
||||
</SelectItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<Button variant="outline" onClick={clearChat} disabled={isLoading}>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button variant="outline" onClick={clearChat} disabled={isGenerating}>
|
||||
Clear Chat
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="flex-1 flex flex-col">
|
||||
<CardHeader>
|
||||
<CardTitle>Chat Messages</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 flex flex-col">
|
||||
<div className="flex-1 overflow-y-auto mb-4 space-y-4 min-h-0">
|
||||
{messages.length === 0 ? (
|
||||
<div className="text-center text-muted-foreground py-8">
|
||||
<p>Start a conversation by typing a message below.</p>
|
||||
</div>
|
||||
) : (
|
||||
messages.map((message, index) => (
|
||||
<ChatMessageItem key={index} message={message} />
|
||||
))
|
||||
)}
|
||||
{isLoading && (
|
||||
<div className="flex items-center justify-center py-4">
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||||
<span className="text-muted-foreground">Thinking...</span>
|
||||
</div>
|
||||
)}
|
||||
<div ref={messagesEndRef} />
|
||||
</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>
|
||||
)}
|
||||
|
||||
{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>
|
||||
)}
|
||||
{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>
|
||||
)}
|
||||
|
||||
{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 className="flex gap-2">
|
||||
<Input
|
||||
value={inputMessage}
|
||||
onChange={(e) => setInputMessage(e.target.value)}
|
||||
onKeyPress={handleKeyPress}
|
||||
placeholder="Type your message here..."
|
||||
disabled={isLoading}
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button
|
||||
onClick={handleSendMessage}
|
||||
disabled={!inputMessage.trim() || isLoading}
|
||||
disabled={!inputMessage.trim() || isLoading || !selectedModel}
|
||||
size="icon"
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Send className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Chat
|
||||
className="flex-1"
|
||||
messages={messages}
|
||||
handleSubmit={handleSubmit}
|
||||
input={input}
|
||||
handleInputChange={handleInputChange}
|
||||
isGenerating={isGenerating}
|
||||
append={append}
|
||||
suggestions={suggestions}
|
||||
setMessages={setMessages}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue