mirror of
https://github.com/meta-llama/llama-stack.git
synced 2025-08-15 22:18:00 +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>
37 lines
899 B
TypeScript
37 lines
899 B
TypeScript
import {
|
|
MessageBlock,
|
|
ToolCallBlock,
|
|
} from "@/components/chat-playground/message-components";
|
|
import { BaseItem } from "../utils/item-types";
|
|
|
|
interface GenericItemProps {
|
|
item: BaseItem;
|
|
index: number;
|
|
keyPrefix: string;
|
|
}
|
|
|
|
export function GenericItemComponent({
|
|
item,
|
|
index,
|
|
keyPrefix,
|
|
}: GenericItemProps) {
|
|
// Handle other types like function calls, tool outputs, etc.
|
|
const itemData = item as Record<string, unknown>;
|
|
|
|
const content = itemData.content
|
|
? typeof itemData.content === "string"
|
|
? itemData.content
|
|
: JSON.stringify(itemData.content, null, 2)
|
|
: JSON.stringify(itemData, null, 2);
|
|
|
|
const label = keyPrefix === "input" ? "Input" : "Output";
|
|
|
|
return (
|
|
<MessageBlock
|
|
key={`${keyPrefix}-${index}`}
|
|
label={label}
|
|
labelDetail={`(${itemData.type})`}
|
|
content={<ToolCallBlock>{content}</ToolCallBlock>}
|
|
/>
|
|
);
|
|
}
|