+
+
+
+
+
+
+
Status: {status}
+
+
+ {messages.length === 0 ? (
+
No messages yet.
+ ) : (
+ messages.map((m, i) => (
+
+
+ {m.role === "assistant"
+ ? "Agent"
+ : m.role === "user"
+ ? "You"
+ : "System"}
+ :
+ {" "}
+
+ {m.role === "user" && m.chunks?.length
+ ? m.chunks.map((c) => (
+ {c.text}
+ ))
+ : m.text}
+
+
+ ))
+ )}
+
+
+ );
+ }
+
+ return VoiceAgentDemo;
+ },
+ { ssr: false }
+);
+
+export default Page;
diff --git a/app/ui/AudioVisualization.tsx b/app/ui/AudioVisualization.tsx
deleted file mode 100644
index 898cc19..0000000
--- a/app/ui/AudioVisualization.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-export function AudioVisualization({ amplitude }: { amplitude: number }) {
- // Calculate the height of each bar based on amplitude
- const maxHeight = 36; // Maximum height in pixels (reduced to avoid overflow)
- const minHeight = 6; // Minimum height in pixels
-
- // Create multipliers for each bar to make middle bars taller
- const multipliers = [0.2, 0.5, 1.0, 0.5, 0.2];
-
- // Boost amplitude by 5 and ensure it's between 0 and 1 (less aggressive)
- const normalizedAmplitude = Math.min(Math.max(amplitude * 5, 0), 1);
-
- return (
-
- {multipliers.map((multiplier, index) => {
- // Calculate height based on amplitude, multiplier and min/max constraints
- const height = minHeight + normalizedAmplitude * maxHeight * multiplier;
-
- return
;
- })}
-
- );
-}
diff --git a/app/ui/ConnectionStatusIndicator.tsx b/app/ui/ConnectionStatusIndicator.tsx
deleted file mode 100644
index 92cf650..0000000
--- a/app/ui/ConnectionStatusIndicator.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export function ConnectionStatusIndicator({ status }: { status: string }) {
- return (
-