clean up bar visualizer appearance

Author: davidliu

app/assistant/ui/AgentVisualization.tsx

@@ -1,16 +1,26 @@
 import { useVoiceAssistant } from "@livekit/components-react";
 import { BarVisualizer, VideoTrack } from "@livekit/react-native";
-import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
+import React, { useCallback, useLayoutEffect, useState } from "react";
+import { LayoutChangeEvent, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 
 type AgentVisualizationProps = {
   style: StyleProp<ViewStyle>,
 }
 
+const barSize = 0.20;
+
 export default function AgentVisualization({
   style
 }: AgentVisualizationProps) {
   const { state, audioTrack, videoTrack } = useVoiceAssistant();
-
+  const [barWidth, setBarWidth] = useState(0);
+  const [barBorderRadius, setBarBorderRadius] = useState(0);
+  const layoutCallback = useCallback((event: LayoutChangeEvent) => {
+    const { x, y, width, height } = event.nativeEvent.layout
+    console.log(x, y, width, height);
+    setBarWidth(barSize * height);
+    setBarBorderRadius(barSize * height);
+  }, []);
   let videoView = ( videoTrack 
     ? <VideoTrack 
         trackRef={videoTrack} 
@@ -20,17 +30,20 @@ export default function AgentVisualization({
   )
   return (
     <View style={[style, styles.container]} >
-      
-      <BarVisualizer
-        state={state}
-        barCount={5}
-        options={{
-          minHeight: 0.1,
-          barWidth: 12,
-        }}
-        trackRef={audioTrack}
-        style={styles.voiceAssistant}
-      />
+      <View style={styles.barVisualizerContainer} onLayout={layoutCallback}>
+        <BarVisualizer
+          state={state}
+          barCount={5}
+          options={{
+            minHeight: barSize,
+            barWidth: barWidth,
+            barColor: '#FFFFFF',
+            barBorderRadius: barBorderRadius,
+          }}
+          trackRef={audioTrack}
+          style={styles.barVisualizer}
+        />
+      </View>
       {videoView}
     </View>
   );
@@ -48,9 +61,13 @@ const styles = StyleSheet.create({
     height: '100%',
     zIndex: 1,
   },
-  voiceAssistant: {
+  barVisualizerContainer: {
     width: '100%',
     height: '30%',
     zIndex: 0,
   },
+  barVisualizer: {
+    width: '100%',
+    height: '100%',
+  },
 });

app/assistant/ui/ChatLog.tsx

@@ -81,21 +81,22 @@ const styles = StyleSheet.create({
   },
   userTranscription: {
     width: 'auto',
-    fontSize: 18,
+    fontSize: 17,
     alignSelf: 'flex-end',
     borderRadius: 6,
-    padding: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
     margin: 16,
   },
   userTranscriptionLight: {
     backgroundColor: '#B0B0B0',
   },
   userTranscriptionDark: {
-    backgroundColor: '#404040',
+    backgroundColor: '#131313',
   },
 
   agentTranscription: {
-    fontSize: 20,
+    fontSize: 17,
     textAlign: 'left',
     margin: 16,
   },

package-lock.json

@@ -20,9 +20,9 @@
     "@config-plugins/react-native-webrtc": "12.0.0",
     "@expo/vector-icons": "^14.1.0",
     "@livekit/components-react": "^2.8.1",
-    "@livekit/react-native": "^2.7.6",
+    "@livekit/react-native": "^2.9.0",
     "@livekit/react-native-expo-plugin": "^1.0.1",
-    "@livekit/react-native-webrtc": "^125.0.9",
+    "@livekit/react-native-webrtc": "^137.0.0",
     "@react-navigation/bottom-tabs": "^7.2.0",
     "@react-navigation/native": "^7.0.14",
     "expo": "53.0.20",