mirror of
https://github.com/meta-llama/llama-stack.git
synced 2025-08-13 05:17:26 +00:00
f3d5459647
# 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>
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
"use client"
|
|
|
|
import { AnimatePresence, motion } from "framer-motion"
|
|
import { X } from "lucide-react"
|
|
|
|
interface InterruptPromptProps {
|
|
isOpen: boolean
|
|
close: () => void
|
|
}
|
|
|
|
export function InterruptPrompt({ isOpen, close }: InterruptPromptProps) {
|
|
return (
|
|
<AnimatePresence>
|
|
{isOpen && (
|
|
<motion.div
|
|
initial={{ top: 0, filter: "blur(5px)" }}
|
|
animate={{
|
|
top: -40,
|
|
filter: "blur(0px)",
|
|
transition: {
|
|
type: "spring",
|
|
filter: { type: "tween" },
|
|
},
|
|
}}
|
|
exit={{ top: 0, filter: "blur(5px)" }}
|
|
className="absolute left-1/2 flex -translate-x-1/2 overflow-hidden whitespace-nowrap rounded-full border bg-background py-1 text-center text-sm text-muted-foreground"
|
|
>
|
|
<span className="ml-2.5">Press Enter again to interrupt</span>
|
|
<button
|
|
className="ml-1 mr-2.5 flex items-center"
|
|
type="button"
|
|
onClick={close}
|
|
aria-label="Close"
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
)
|
|
}
|