phoenix-oss/llama-stack-mirror
0
0
Fork 1
mirror of https://github.com/meta-llama/llama-stack.git synced 2025-10-06 12:37:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(UI): adding MVP playground UI (#2828)

Browse source 
# 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:
Francisco Arceo 2025-07-30 22:44:16 -04:00 • committed by GitHub
parent d6ae2b0f47
commit f3d5459647
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
32 changed files with 4876 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

153
llama_stack/ui/components/ui/file-preview.tsx Normal file
View file

@ -0,0 +1,153 @@
"use client"
import React, { useEffect } from "react"
import { motion } from "framer-motion"
import { FileIcon, X } from "lucide-react"
interface FilePreviewProps {
file: File
onRemove?: () => void
}
export const FilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(
(props, ref) => {
if (props.file.type.startsWith("image/")) {
return <ImageFilePreview {...props} ref={ref} />
}
if (
props.file.type.startsWith("text/") ||
props.file.name.endsWith(".txt") ||
props.file.name.endsWith(".md")
) {
return <TextFilePreview {...props} ref={ref} />
}
return <GenericFilePreview {...props} ref={ref} />
}
)
FilePreview.displayName = "FilePreview"
const ImageFilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(
({ file, onRemove }, ref) => {
return (
<motion.div
ref={ref}
className="relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs"
layout
initial={{ opacity: 0, y: "100%" }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: "100%" }}
>
<div className="flex w-full items-center space-x-2">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
alt={`Attachment ${file.name}`}
className="grid h-10 w-10 shrink-0 place-items-center rounded-sm border bg-muted object-cover"
src={URL.createObjectURL(file)}
/>
<span className="w-full truncate text-muted-foreground">
{file.name}
</span>
</div>
{onRemove ? (
<button
className="absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full border bg-background"
type="button"
onClick={onRemove}
aria-label="Remove attachment"
>
<X className="h-2.5 w-2.5" />
</button>
) : null}
</motion.div>
)
}
)
ImageFilePreview.displayName = "ImageFilePreview"
const TextFilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(
({ file, onRemove }, ref) => {
const [preview, setPreview] = React.useState<string>("")
useEffect(() => {
const reader = new FileReader()
reader.onload = (e) => {
const text = e.target?.result as string
setPreview(text.slice(0, 50) + (text.length > 50 ? "..." : ""))
}
reader.readAsText(file)
}, [file])
return (
<motion.div
ref={ref}
className="relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs"
layout
initial={{ opacity: 0, y: "100%" }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: "100%" }}
>
<div className="flex w-full items-center space-x-2">
<div className="grid h-10 w-10 shrink-0 place-items-center rounded-sm border bg-muted p-0.5">
<div className="h-full w-full overflow-hidden text-[6px] leading-none text-muted-foreground">
{preview || "Loading..."}
</div>
</div>
<span className="w-full truncate text-muted-foreground">
{file.name}
</span>
</div>
{onRemove ? (
<button
className="absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full border bg-background"
type="button"
onClick={onRemove}
aria-label="Remove attachment"
>
<X className="h-2.5 w-2.5" />
</button>
) : null}
</motion.div>
)
}
)
TextFilePreview.displayName = "TextFilePreview"
const GenericFilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(
({ file, onRemove }, ref) => {
return (
<motion.div
ref={ref}
className="relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs"
layout
initial={{ opacity: 0, y: "100%" }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: "100%" }}
>
<div className="flex w-full items-center space-x-2">
<div className="grid h-10 w-10 shrink-0 place-items-center rounded-sm border bg-muted">
<FileIcon className="h-6 w-6 text-foreground" />
</div>
<span className="w-full truncate text-muted-foreground">
{file.name}
</span>
</div>
{onRemove ? (
<button
className="absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full border bg-background"
type="button"
onClick={onRemove}
aria-label="Remove attachment"
>
<X className="h-2.5 w-2.5" />
</button>
) : null}
</motion.div>
)
}
)
GenericFilePreview.displayName = "GenericFilePreview"