Creating a RN example for simple-chatbot

2025-05-05 18:17:39 -03:00
parent b323a7bd88
commit 40154824e8
26 changed files with 12366 additions and 0 deletions
--- a/examples/simple-chatbot/client/react-native/src/components/WaveformView.tsx
+++ b/examples/simple-chatbot/client/react-native/src/components/WaveformView.tsx
@@ -0,0 +1,128 @@
+import React, { useEffect, useState } from 'react';
+import { LayoutChangeEvent, StyleSheet, Text, View, ViewStyle } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
+import Colors from '../theme/Colors';
+import { useVoiceClient } from '../context/VoiceClientContext';
+
+const dotCount = 5;
+
+const WaveformView: React.FC = () => {
+  const [audioLevels, setAudioLevels] = useState(Array(dotCount).fill(0));
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+  const { currentState: voiceClientStatus, botReady: isBotReady, remoteAudioLevel: audioLevel } = useVoiceClient();
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setDimensions({ width, height });
+  };
+
+  useEffect(() => {
+    setAudioLevels((prevLevels) => [...prevLevels.slice(1), audioLevel]);
+  }, [audioLevel]);
+
+  const { width, height } = dimensions;
+  const circleSize = width * 0.9;
+  const innerCircleSize = width * 0.82;
+  const barWidth = (width * 0.5) / dotCount;
+
+  return (
+    <View style={styles.container} onLayout={onLayout}>
+      <View style={[styles.outerCircle, { width: circleSize, height: circleSize, borderRadius: circleSize / 2 }]}>
+        <View
+          style={[
+            styles.innerCircle,
+            {
+              backgroundColor: isBotReady ? Colors.backgroundCircle : Colors.backgroundCircleNotConnected,
+              width: innerCircleSize,
+              height: innerCircleSize,
+              borderRadius: innerCircleSize / 2,
+            },
+          ]}
+        >
+          {isBotReady ? (
+            audioLevel > 0 ? (
+              <View style={[styles.waveformContainer, { width: width * 0.5, height: width * 0.5 }]}>
+                {audioLevels.map((level, index) => (
+                  <View
+                    key={index}
+                    style={[
+                      styles.waveformBar,
+                      {
+                        width: barWidth - 10, // Subtract some margin
+                        height: level * height,
+                      },
+                    ]}
+                  />
+                ))}
+              </View>
+            ) : (
+              <View style={[styles.dotContainer, { width: width * 0.5, height: height * 0.5 }]}>
+                {Array(dotCount)
+                  .fill(0)
+                  .map((_, index) => (
+                    <View key={index} style={[styles.dot, { width: height * 0.1, height: height * 0.1 }]} />
+                  ))}
+              </View>
+            )
+          ) : (
+            <View style={styles.notReadyContainer}>
+              <MaterialIcons name="hourglass-empty" size={32} color="white" />
+              <Text style={styles.voiceClientStatusText}>{voiceClientStatus}</Text>
+            </View>
+          )}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: "100%",
+  } as ViewStyle,
+  outerCircle: {
+    borderWidth: 1,
+    borderColor: 'gray',
+    justifyContent: 'center',
+    alignItems: 'center',
+  } as ViewStyle,
+  innerCircle: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  } as ViewStyle,
+  waveformContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  } as ViewStyle,
+  waveformBar: {
+    backgroundColor: 'white',
+    maxHeight: '100%',
+    borderRadius: 12,
+  } as ViewStyle,
+  dotContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  } as ViewStyle,
+  dot: {
+    backgroundColor: 'white',
+    borderRadius: 50,
+  } as ViewStyle,
+  notReadyContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  } as ViewStyle,
+  voiceClientStatusText: {
+    color: 'white',
+    marginTop: 10,
+    fontSize: 16,
+    fontWeight: 'bold',
+  } as ViewStyle,
+});
+
+export default WaveformView;