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/ui/audio-visualizer.tsx

@@ -0,0 +1,198 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+
+// Configuration constants for the audio analyzer
+const AUDIO_CONFIG = {
+  FFT_SIZE: 512,
+  SMOOTHING: 0.8,
+  MIN_BAR_HEIGHT: 2,
+  MIN_BAR_WIDTH: 2,
+  BAR_SPACING: 1,
+  COLOR: {
+    MIN_INTENSITY: 100, // Minimum gray value (darker)
+    MAX_INTENSITY: 255, // Maximum gray value (brighter)
+    INTENSITY_RANGE: 155, // MAX_INTENSITY - MIN_INTENSITY
+  },
+} as const
+
+interface AudioVisualizerProps {
+  stream: MediaStream | null
+  isRecording: boolean
+  onClick: () => void
+}
+
+export function AudioVisualizer({
+  stream,
+  isRecording,
+  onClick,
+}: AudioVisualizerProps) {
+  // Refs for managing audio context and animation
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const audioContextRef = useRef<AudioContext | null>(null)
+  const analyserRef = useRef<AnalyserNode | null>(null)
+  const animationFrameRef = useRef<number>()
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  // Cleanup function to stop visualization and close audio context
+  const cleanup = () => {
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current)
+    }
+    if (audioContextRef.current) {
+      audioContextRef.current.close()
+    }
+  }
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return cleanup
+  }, [])
+
+  // Start or stop visualization based on recording state
+  useEffect(() => {
+    if (stream && isRecording) {
+      startVisualization()
+    } else {
+      cleanup()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stream, isRecording])
+
+  // Handle window resize
+  useEffect(() => {
+    const handleResize = () => {
+      if (canvasRef.current && containerRef.current) {
+        const container = containerRef.current
+        const canvas = canvasRef.current
+        const dpr = window.devicePixelRatio || 1
+
+        // Set canvas size based on container and device pixel ratio
+        const rect = container.getBoundingClientRect()
+        // Account for the 2px total margin (1px on each side)
+        canvas.width = (rect.width - 2) * dpr
+        canvas.height = (rect.height - 2) * dpr
+
+        // Scale canvas CSS size to match container minus margins
+        canvas.style.width = `${rect.width - 2}px`
+        canvas.style.height = `${rect.height - 2}px`
+      }
+    }
+
+    window.addEventListener("resize", handleResize)
+    // Initial setup
+    handleResize()
+
+    return () => window.removeEventListener("resize", handleResize)
+  }, [])
+
+  // Initialize audio context and start visualization
+  const startVisualization = async () => {
+    try {
+      const audioContext = new AudioContext()
+      audioContextRef.current = audioContext
+
+      const analyser = audioContext.createAnalyser()
+      analyser.fftSize = AUDIO_CONFIG.FFT_SIZE
+      analyser.smoothingTimeConstant = AUDIO_CONFIG.SMOOTHING
+      analyserRef.current = analyser
+
+      const source = audioContext.createMediaStreamSource(stream!)
+      source.connect(analyser)
+
+      draw()
+    } catch (error) {
+      console.error("Error starting visualization:", error)
+    }
+  }
+
+  // Calculate the color intensity based on bar height
+  const getBarColor = (normalizedHeight: number) => {
+    const intensity =
+      Math.floor(normalizedHeight * AUDIO_CONFIG.COLOR.INTENSITY_RANGE) +
+      AUDIO_CONFIG.COLOR.MIN_INTENSITY
+    return `rgb(${intensity}, ${intensity}, ${intensity})`
+  }
+
+  // Draw a single bar of the visualizer
+  const drawBar = (
+    ctx: CanvasRenderingContext2D,
+    x: number,
+    centerY: number,
+    width: number,
+    height: number,
+    color: string
+  ) => {
+    ctx.fillStyle = color
+    // Draw upper bar (above center)
+    ctx.fillRect(x, centerY - height, width, height)
+    // Draw lower bar (below center)
+    ctx.fillRect(x, centerY, width, height)
+  }
+
+  // Main drawing function
+  const draw = () => {
+    if (!isRecording) return
+
+    const canvas = canvasRef.current
+    const ctx = canvas?.getContext("2d")
+    if (!canvas || !ctx || !analyserRef.current) return
+
+    const dpr = window.devicePixelRatio || 1
+    ctx.scale(dpr, dpr)
+
+    const analyser = analyserRef.current
+    const bufferLength = analyser.frequencyBinCount
+    const frequencyData = new Uint8Array(bufferLength)
+
+    const drawFrame = () => {
+      animationFrameRef.current = requestAnimationFrame(drawFrame)
+
+      // Get current frequency data
+      analyser.getByteFrequencyData(frequencyData)
+
+      // Clear canvas - use CSS pixels for clearing
+      ctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr)
+
+      // Calculate dimensions in CSS pixels
+      const barWidth = Math.max(
+        AUDIO_CONFIG.MIN_BAR_WIDTH,
+        canvas.width / dpr / bufferLength - AUDIO_CONFIG.BAR_SPACING
+      )
+      const centerY = canvas.height / dpr / 2
+      let x = 0
+
+      // Draw each frequency bar
+      for (let i = 0; i < bufferLength; i++) {
+        const normalizedHeight = frequencyData[i] / 255 // Convert to 0-1 range
+        const barHeight = Math.max(
+          AUDIO_CONFIG.MIN_BAR_HEIGHT,
+          normalizedHeight * centerY
+        )
+
+        drawBar(
+          ctx,
+          x,
+          centerY,
+          barWidth,
+          barHeight,
+          getBarColor(normalizedHeight)
+        )
+
+        x += barWidth + AUDIO_CONFIG.BAR_SPACING
+      }
+    }
+
+    drawFrame()
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className="h-full w-full cursor-pointer rounded-lg bg-background/80 backdrop-blur"
+      onClick={onClick}
+    >
+      <canvas ref={canvasRef} className="h-full w-full" />
+    </div>
+  )
+}