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>

llama_stack/ui/components/chat-playground/message-components.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+export interface MessageBlockProps {
+  label: string;
+  labelDetail?: string;
+  content: React.ReactNode;
+  className?: string;
+  contentClassName?: string;
+}
+
+export const MessageBlock: React.FC<MessageBlockProps> = ({
+  label,
+  labelDetail,
+  content,
+  className = "",
+  contentClassName = "",
+}) => {
+  return (
+    <div className={`mb-4 ${className}`}>
+      <p className="py-1 font-semibold text-muted-foreground mb-1">
+        {label}
+        {labelDetail && (
+          <span className="text-xs text-muted-foreground font-normal ml-1">
+            {labelDetail}
+          </span>
+        )}
+      </p>
+      <div className={`py-1 whitespace-pre-wrap ${contentClassName}`}>
+        {content}
+      </div>
+    </div>
+  );
+};
+
+export interface ToolCallBlockProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const ToolCallBlock = ({ children, className }: ToolCallBlockProps) => {
+  const baseClassName =
+    "p-3 bg-slate-50 border border-slate-200 rounded-md text-sm";
+
+  return (
+    <div className={`${baseClassName} ${className || ""}`}>
+      <pre className="whitespace-pre-wrap text-xs">{children}</pre>
+    </div>
+  );
+};