Use voiceAssistant components (#98)

src/components/config/AudioInputTile.tsx

@@ -1,25 +1,22 @@
-import { useRef } from "react";
-import { AgentMultibandAudioVisualizer } from "../visualization/AgentMultibandAudioVisualizer";
+import {
+  BarVisualizer,
+  TrackReferenceOrPlaceholder,
+} from "@livekit/components-react";
 
-type AudioInputTileProps = {
-  frequencies: Float32Array[];
-};
-
-export const AudioInputTile = ({ frequencies }: AudioInputTileProps) => {
+export const AudioInputTile = ({
+  trackRef,
+}: {
+  trackRef: TrackReferenceOrPlaceholder;
+}) => {
   return (
     <div
       className={`flex flex-row gap-2 h-[100px] items-center w-full justify-center border rounded-sm border-gray-800 bg-gray-900`}
     >
-      <AgentMultibandAudioVisualizer
-        state="speaking"
-        barWidth={4}
-        minBarHeight={2}
-        maxBarHeight={50}
-        accentColor={"gray"}
-        accentShade={400}
-        frequencies={frequencies}
-        borderRadius={2}
-        gap={4}
+      <BarVisualizer
+        trackRef={trackRef}
+        className="h-full w-full"
+        barCount={20}
+        options={{ minHeight: 0 }}
       />
     </div>
   );