mirror of
https://github.com/meta-llama/llama-stack.git
synced 2025-08-14 21:50:49 +00:00
feat(UI): adding MVP playground UI (#2828)
# What does this PR do? I've been tinkering a little with a simple chat playground in the UI, so I'm opening the PR with what's kind of a WIP. If you look at the first commit, that includes the big part of the changes. The rest of the files changed come from adding installing the `shadcn` components. Note this is missing a lot; e.g., - sessions - document upload - audio (the shadcn components install these by default from https://shadcn-chatbot-kit.vercel.app/docs/components/chat) I still need to wire up a lot more to make it actually fully functional but it does basic chat using the LS Typescript Client. Basic demo: <img width="1329" height="1430" alt="Image" src="https://github.com/user-attachments/assets/917a2096-36d4-4925-b83b-f1f2cda98698" /> <img width="1319" height="1424" alt="Image" src="https://github.com/user-attachments/assets/fab1583b-1c72-4bf3-baf2-405aee13c6bb" /> <!-- If resolving an issue, uncomment and update the line below --> <!-- Closes #[issue-number] --> ## Test Plan <!-- Describe the tests you ran to verify your changes with result summaries. *Provide clear instructions so the plan can be easily re-executed.* --> --------- Signed-off-by: Francisco Javier Arceo <farceo@redhat.com>
This commit is contained in:
parent
d6ae2b0f47
commit
f3d5459647
32 changed files with 4876 additions and 31 deletions
45
llama_stack/ui/components/chat-playground/message-list.tsx
Normal file
45
llama_stack/ui/components/chat-playground/message-list.tsx
Normal file
|
@ -0,0 +1,45 @@
|
|||
import {
|
||||
ChatMessage,
|
||||
type ChatMessageProps,
|
||||
type Message,
|
||||
} from "@/components/chat-playground/chat-message"
|
||||
import { TypingIndicator } from "@/components/chat-playground/typing-indicator"
|
||||
|
||||
type AdditionalMessageOptions = Omit<ChatMessageProps, keyof Message>
|
||||
|
||||
interface MessageListProps {
|
||||
messages: Message[]
|
||||
showTimeStamps?: boolean
|
||||
isTyping?: boolean
|
||||
messageOptions?:
|
||||
| AdditionalMessageOptions
|
||||
| ((message: Message) => AdditionalMessageOptions)
|
||||
}
|
||||
|
||||
export function MessageList({
|
||||
messages,
|
||||
showTimeStamps = true,
|
||||
isTyping = false,
|
||||
messageOptions,
|
||||
}: MessageListProps) {
|
||||
return (
|
||||
<div className="space-y-4 overflow-visible">
|
||||
{messages.map((message, index) => {
|
||||
const additionalOptions =
|
||||
typeof messageOptions === "function"
|
||||
? messageOptions(message)
|
||||
: messageOptions
|
||||
|
||||
return (
|
||||
<ChatMessage
|
||||
key={index}
|
||||
showTimeStamp={showTimeStamps}
|
||||
{...message}
|
||||
{...additionalOptions}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
{isTyping && <TypingIndicator />}
|
||||
</div>
|
||||
)
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue