agora-appbuilder-core 4.0.35 → 4.1.0-beta-2

package/template/src/ai-agent/components/FallbackLogo.tsx

@@ -0,0 +1,80 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React from 'react';
+import {View, StyleSheet} from 'react-native';
+import {UserAvatar} from 'customization-api';
+
+export default function FallbackLogo(
+  name: string,
+  isActiveSpeaker?: boolean,
+  hideAvatar?: boolean,
+  isMax?: boolean,
+  avatarSize?: number,
+) {
+  const iconSize = Math.min(avatarSize, 100);
+  const textSize = Math.min(avatarSize * 0.35, 32);
+  return (
+    <View style={[styles.container]}>
+      {!hideAvatar ? (
+        <UserAvatar
+          name={name}
+          containerStyle={[
+            {
+              width: iconSize,
+              height: iconSize,
+              borderRadius: iconSize / 2,
+            },
+
+            {
+              backgroundColor: isActiveSpeaker
+                ? $config.PRIMARY_ACTION_BRAND_COLOR
+                : $config.VIDEO_AUDIO_TILE_AVATAR_COLOR,
+            },
+          ]}
+          textStyle={[
+            styles.textStyle,
+            {fontSize: textSize, lineHeight: textSize},
+          ]}
+        />
+      ) : (
+        <></>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: $config.VIDEO_AUDIO_TILE_COLOR,
+    justifyContent: 'center',
+  },
+  avatarBg: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+  },
+  avatarBgSmall: {
+    width: 60,
+    height: 60,
+  },
+  avatarBgMobileUA: {
+    width: 45,
+    height: 45,
+  },
+  textStyle: {
+    fontSize: 32,
+    lineHeight: 32,
+    fontWeight: '600',
+    color: $config.CARD_LAYER_1_COLOR,
+  },
+});

package/template/src/ai-agent/components/LocalAudioWave.tsx

@@ -0,0 +1,171 @@
+import React, {useRef, useState, useEffect} from 'react';
+import {IRemoteAudioTrack, ILocalAudioTrack} from 'agora-rtc-sdk-ng';
+import {useMultibandTrackVolume} from '../utils';
+import {View, StyleSheet} from 'react-native';
+
+export interface AudioVisualizerProps {
+  type: 'agent' | 'user';
+  gap: number;
+  barWidth: number;
+  minBarHeight: number;
+  maxBarHeight: number;
+  borderRadius: number;
+  audioTrack: ILocalAudioTrack | IRemoteAudioTrack;
+}
+
+export const ActiveSpeakerAnimation = ({
+  audioTrack,
+  isMuted,
+}: {
+  audioTrack: ILocalAudioTrack | IRemoteAudioTrack | null;
+  isMuted: boolean;
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const animationRef = useRef<number>();
+  const [audioContext, setAudioContext] = useState<AudioContext | null>(null);
+  const [analyser, setAnalyser] = useState<AnalyserNode | null>(null);
+  const [dataArray, setDataArray] = useState<Uint8Array | null>(null);
+  const previousDataRef = useRef<Uint8Array | null>(null);
+  const frameCountRef = useRef(0);
+
+  console.log({audioTrack}, 'activeSpeaker', isMuted);
+  useEffect(() => {
+    if (!audioTrack || isMuted) {
+      // Clean up if track is null or muted
+      if (audioContext) {
+        audioContext.state !== 'closed' && audioContext.close();
+        setAudioContext(null);
+        setAnalyser(null);
+        setDataArray(null);
+      }
+      return;
+    }
+    console.log('created audio context');
+    // Create a new AudioContext
+    const newAudioContext = new (window.AudioContext ||
+      (window as any).webkitAudioContext)();
+    // Create an analyser node
+    const newAnalyser = newAudioContext.createAnalyser();
+    newAnalyser.fftSize = 256;
+    // Create a new Uint8Array to hold the frequency data
+    const newDataArray = new Uint8Array(newAnalyser.frequencyBinCount);
+
+    // Create a media stream source from the audio track
+    const source = newAudioContext.createMediaStreamSource(
+      new MediaStream([audioTrack.getMediaStreamTrack()]),
+    );
+    // Connect the source to the analyser
+    source.connect(newAnalyser);
+
+    // Update state with new audio context, analyser, and data array
+    setAudioContext(newAudioContext);
+    setAnalyser(newAnalyser);
+    setDataArray(newDataArray);
+
+    return () => {
+      newAudioContext.close();
+    };
+  }, [audioTrack, isMuted]);
+
+  useEffect(() => {
+    if (!canvasRef.current || !analyser || !dataArray) return;
+
+    const canvas = canvasRef.current;
+    const canvasCtx = canvas.getContext('2d');
+    if (!canvasCtx) return;
+
+    const draw = () => {
+      if (isMuted) {
+        // Clear the canvas if muted
+        canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
+        return;
+      }
+      animationRef.current = requestAnimationFrame(draw);
+      frameCountRef.current = (frameCountRef.current + 1) % 3;
+      if (frameCountRef.current !== 0) return;
+
+      analyser.getByteFrequencyData(dataArray);
+
+      canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
+
+      const barWidth = (canvas.width / analyser.frequencyBinCount) * 5;
+      let barHeight;
+      let x = 0;
+
+      // Draw frequency bars
+      const numberOfBars = Math.floor(analyser.frequencyBinCount / 10);
+      for (let i = 0; i < numberOfBars; i++) {
+        barHeight = (dataArray[i] / 255) * canvas.height * 0.5;
+
+        //   const hue = ((i / analyser.frequencyBinCount) * 120) + 240;
+        canvasCtx.fillStyle = '#00C2FF';
+
+        canvasCtx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
+
+        x += barWidth + 1;
+      }
+    };
+
+    draw();
+
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, [analyser, dataArray, isMuted]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="left-1/2 transform -translate-x-1/2 w-1/4 h-16"
+    />
+  );
+};
+
+export const AudioVisualizerEffect = (props: AudioVisualizerProps) => {
+  const {
+    gap,
+    barWidth,
+    minBarHeight,
+    maxBarHeight,
+    borderRadius,
+    type,
+    audioTrack,
+  } = props;
+
+  const mediaStreamTrack = audioTrack?.getMediaStreamTrack();
+  const frequencies = useMultibandTrackVolume(mediaStreamTrack, 10);
+
+  const summedFrequencies = frequencies.map(bandFrequencies => {
+    const sum = bandFrequencies.reduce((a, b) => a + b, 0);
+    if (sum <= 0) {
+      return 0;
+    }
+    return Math.sqrt(sum / bandFrequencies.length);
+  });
+
+  return (
+    <View style={[styles.container, {gap}]}>
+      {summedFrequencies.map((frequency, index) => {
+        const barHeight =
+          minBarHeight + frequency * (maxBarHeight - minBarHeight);
+        const style = {
+          height: barHeight,
+          width: barWidth,
+          borderRadius: borderRadius,
+          backgroundColor: type === 'agent' ? '#0888FF' : '#EAECF0',
+        };
+        return <View key={index} style={style} />;
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/template/src/ai-agent/components/agent-chat-panel/agent-chat-ui.tsx

@@ -0,0 +1,82 @@
+import React, {useContext} from 'react';
+import {FlatList, StyleSheet, View} from 'react-native';
+import {AgentContext, ChatItem} from '../AgentControls/AgentContext'; // Ensure the path matches your project structure
+import {ChatBubble, ChatMessageType} from 'customization-api';
+
+// ChatItem Component
+const ChatItemBubble = ({item}: {item: ChatItem}) => {
+  return (
+    <ChatBubble
+      key={item.id}
+      msgId={item.id}
+      isLocal={item.isSelf}
+      message={item.text}
+      createdTimestamp={`${item.time}`}
+      uid={item.uid}
+      isDeleted={false}
+      isSameUser={false}
+      type={ChatMessageType.TXT}
+      remoteUIConfig={{
+        username: 'AI Agent',
+        avatarIcon:
+          'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjAyMTQ4IDYuNjgxMzZDNS4wMjE0OCA2LjgwMDg5IDUuMTEwNDkgNi45MDE3MiA1LjIyOTE0IDYuOTE2NThDNS4yMzE4IDYuOTE2ODkgNS41MDQ2MyA2Ljk1NDY5IDUuNzkwMjQgNy4xMjI3MkM2LjE2OTIxIDcuMzQ1NjEgNi4zODk3IDcuNjg1NTggNi40NDU2NSA4LjEzMzA4QzYuNDYwNSA4LjI1MTczIDYuNTYxMzMgOC4zNDA3NCA2LjY4MDg3IDguMzQwNzRDNi44MDA0MSA4LjM0MDc0IDYuOTAxMjMgOC4yNTE3MyA2LjkxNjA5IDguMTMzMDhDNi45MTY0IDguMTMwNDIgNi45NTQyMSA3Ljg1NzU5IDcuMTIyMjMgNy41NzE5OUM3LjM0NTEzIDcuMTkzMDEgNy42ODUwOSA2Ljk3MjUyIDguMTMyNTkgNi45MTY1OEM4LjI1MTI0IDYuOTAxNzIgOC4zNDAyNSA2LjgwMDg5IDguMzQwMjUgNi42ODEzNkM4LjM0MDI1IDYuNTYxODIgOC4yNTEyNCA2LjQ2MDk5IDguMTMyNTkgNi40NDYxM0M4LjEyOTkzIDYuNDQ1ODIgNy44NTcxIDYuNDA4MDIgNy41NzE1IDYuMjM5OTlDNy4xOTI1MyA2LjAxNzEgNi45NzIwMyA1LjY3NzEzIDYuOTE2MDkgNS4yMjk2M0M2LjkwMTIzIDUuMTEwOTggNi44MDA0MSA1LjAyMTk3IDYuNjgwODcgNS4wMjE5N0M2LjU2MTMzIDUuMDIxOTcgNi40NjA1IDUuMTEwOTggNi40NDU2NSA1LjIyOTYzQzYuNDQ1MzMgNS4yMzIyOSA2LjQwNzUzIDUuNTA1MTIgNi4yMzk1IDUuNzkwNzJDNi4wMTY2MSA2LjE2OTcgNS42NzY2NCA2LjM5MDE5IDUuMjI5MTQgNi40NDYxM0M1LjExMDQ5IDYuNDYwOTkgNS4wMjE0OCA2LjU2MTgyIDUuMDIxNDggNi42ODEzNlpNMi41MzI3MSAxMi4wNzQzQzIuNTMyNzEgMTIuMjgzNSAyLjY4ODQ4IDEyLjQ2IDIuODk2MTIgMTIuNDg2QzIuOTAwNzcgMTIuNDg2NSAzLjM3ODIzIDEyLjU1MjcgMy44NzgwMyAxMi44NDY3QzQuNTQxMjMgMTMuMjM2OCA0LjkyNzA5IDEzLjgzMTcgNS4wMjUgMTQuNjE0OEM1LjA1MDk5IDE0LjgyMjUgNS4yMjc0NCAxNC45NzgyIDUuNDM2NjMgMTQuOTc4MkM1LjY0NTgzIDE0Ljk3ODIgNS44MjIyNyAxNC44MjI1IDUuODQ4MjcgMTQuNjE0OEM1Ljg0ODgyIDE0LjYxMDIgNS45MTQ5OCAxNC4xMzI3IDYuMjA5MDIgMTMuNjMyOUM2LjU5OTA5IDEyLjk2OTcgNy4xOTQwMyAxMi41ODM5IDcuOTc3MTUgMTIuNDg2QzguMTg0NzkgMTIuNDYgOC4zNDA1NSAxMi4yODM1IDguMzQwNTUgMTIuMDc0M0M4LjM0MDU1IDExLjg2NTEgOC4xODQ3OSAxMS42ODg3IDcuOTc3MTUgMTEuNjYyN0M3Ljk3MjUgMTEuNjYyMSA3LjQ5NTA0IDExLjU5NiA2Ljk5NTI0IDExLjMwMTlDNi4zMzIwNCAxMC45MTE5IDUuOTQ2MTggMTAuMzE2OSA1Ljg0ODI3IDkuNTMzODFDNS44MjIyNyA5LjMyNjE3IDUuNjQ1ODMgOS4xNzA0MSA1LjQzNjYzIDkuMTcwNDFDNS4yMjc0NCA5LjE3MDQxIDUuMDUwOTkgOS4zMjYxNyA1LjAyNSA5LjUzMzgxQzUuMDI0NDQgOS41Mzg0NiA0Ljk1ODI5IDEwLjAxNTkgNC42NjQyNSAxMC41MTU3QzQuMjc0MTggMTEuMTc4OSAzLjY3OTI0IDExLjU2NDggMi44OTYxMiAxMS42NjI3QzIuNjg4NDggMTEuNjg4NyAyLjUzMjcxIDExLjg2NTEgMi41MzI3MSAxMi4wNzQzWk0xMy41NTA3IDEzLjU3NzVDMTMuNTA5OSAxMy45MDM4IDEzLjIzMjYgMTQuMTQ4NiAxMi45MDM5IDE0LjE0ODZDMTIuNTc1MSAxNC4xNDg2IDEyLjI5NzkgMTMuOTAzOCAxMi4yNTcgMTMuNTc3NUMxMi4xMDMyIDEyLjM0NjkgMTEuNDk2OCAxMS40MTIgMTAuNDU0NiAxMC43OTlDOS42NjkyMiAxMC4zMzcgOC45MTg5MiAxMC4yMzMgOC45MTE2MiAxMC4yMzIyQzguNTg1MzIgMTAuMTkxMyA4LjM0MDU2IDkuOTE0MDMgOC4zNDA1NSA5LjU4NTNDOC4zNDA1NSA5LjI1NjU3IDguNTg1MzIgOC45NzkyOSA4LjkxMTYxIDguOTM4NDRDMTAuMTQyMiA4Ljc4NDU4IDExLjA3NzEgOC4xNzgyMiAxMS42OTAxIDcuMTM2MDVDMTIuMTUyMiA2LjM1MDY0IDEyLjI1NjEgNS42MDAzNCAxMi4yNTcgNS41OTMwNEMxMi4yOTc4IDUuMjY2NzQgMTIuNTc1MSA1LjAyMTk3IDEyLjkwMzggNS4wMjE5N0MxMy4yMzI2IDUuMDIxOTcgMTMuNTA5OCA1LjI2Njc0IDEzLjU1MDcgNS41OTMwM0MxMy43MDQ1IDYuODIzNjUgMTQuMzEwOSA3Ljc1ODU2IDE1LjM1MzEgOC4zNzE1MUMxNi4xMzg1IDguODMzNTcgMTYuODg4OCA4LjkzNzUyIDE2Ljg5NjEgOC45MzgzOUMxNy4yMjI0IDguOTc5MjQgMTcuNDY3MiA5LjI1NjUyIDE3LjQ2NzIgOS41ODUyNUMxNy40NjcyIDkuOTEzOTggMTcuMjIyNCAxMC4xOTEzIDE2Ljg5NjEgMTAuMjMyMUMxNS42NjU1IDEwLjM4NiAxNC43MzA2IDEwLjk5MjMgMTQuMTE3NiAxMi4wMzQ1QzEzLjY1NTYgMTIuODE5OSAxMy41NTE2IDEzLjU3MDIgMTMuNTUwNyAxMy41Nzc1WiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzc2MDZfNzAwMSkiLz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl83NjA2XzcwMDEiIHgxPSIxNy40MTQiIHkxPSIxMC4xMzQ1IiB4Mj0iMi4yOTkzNyIgeTI9IjEwLjE2MDEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzAwQzJGRiIvPgo8c3RvcCBvZmZzZXQ9IjAuMzMiIHN0b3AtY29sb3I9IiNBMEZBRkYiLz4KPHN0b3Agb2Zmc2V0PSIwLjY2IiBzdG9wLWNvbG9yPSIjRTVGRUZGIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0M0NkZGQiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=',
+        bubbleStyleLayer1: {
+          backgroundColor: 'transparent',
+          paddingLeft: 4,
+          paddingRight: 0,
+          paddingTop: 2,
+          marginTop: 0,
+        },
+        bubbleStyleLayer2: {
+          padding: 0,
+        },
+      }}
+    />
+  );
+};
+
+// Main Chat Component
+const ChatScreen = () => {
+  const {chatItems} = useContext(AgentContext); // Access chatItems from AgentContext
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={chatItems}
+        keyExtractor={item => `${item.uid}`}
+        renderItem={({item}) => <ChatItemBubble item={item} />}
+        contentContainerStyle={styles.chatList}
+      />
+    </View>
+  );
+};
+
+// Styles
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  chatList: {},
+  chatBubble: {
+    maxWidth: '70%',
+    marginVertical: 5,
+    padding: 10,
+    borderRadius: 10,
+  },
+  selfBubble: {
+    alignSelf: 'flex-end',
+    borderTopRightRadius: 0,
+    border: '1px solid blue',
+  },
+  otherBubble: {
+    alignSelf: 'flex-start',
+    borderTopLeftRadius: 0,
+    border: '1px solid green',
+  },
+  chatText: {
+    fontSize: 14,
+    color: '#fff',
+  },
+});
+
+export default ChatScreen;

package/template/src/ai-agent/components/icons.tsx

@@ -0,0 +1,227 @@
+import React from 'react';
+
+export const CallIcon = ({fill}: {fill: string}) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7.07102 16.7279C5.74082 15.3977 4.74462 13.8496 4.08241 12.0837C3.4202 10.3177 3.18079 8.47739 3.36419 6.56263C3.38901 6.36889 3.46435 6.20381 3.5902 6.0674C3.71606 5.93098 3.87567 5.86111 4.06904 5.85777L7.09844 5.80549C7.27032 5.80252 7.4409 5.87475 7.61019 6.02218C7.77947 6.16961 7.87337 6.32908 7.89189 6.50059L8.30385 9.69918C8.31255 9.81716 8.29996 9.92477 8.26606 10.022C8.23217 10.1193 8.17697 10.2061 8.10047 10.2826L5.822 12.5611C6.09055 13.1793 6.41893 13.7536 6.80713 14.2839C7.19534 14.8141 7.61114 15.301 8.05454 15.7444C8.49794 16.1878 8.98477 16.6036 9.51504 16.9918C10.0453 17.38 10.6196 17.7084 11.2378 17.9769L13.5163 15.6984C13.5928 15.6219 13.6797 15.5667 13.7769 15.5328C13.8741 15.4989 13.9817 15.4864 14.0997 15.4951L17.2983 15.907C17.5233 15.9353 17.6964 16.021 17.8174 16.1639C17.9385 16.3067 17.9971 16.4856 17.9934 16.7005L17.9411 19.7299C17.9378 19.9232 17.8679 20.0828 17.7315 20.2087C17.5951 20.3346 17.43 20.4099 17.2363 20.4347C15.3215 20.6181 13.4812 20.3787 11.7152 19.7165C9.94929 19.0543 8.40122 18.0581 7.07102 16.7279Z"
+      fill={fill}
+    />
+    <path
+      d="M9.99951 7.21275C9.99951 7.58826 10.2811 7.905 10.6565 7.95167C10.6649 7.95266 11.5281 8.07141 12.4317 8.59924C13.6307 9.29944 14.3283 10.3674 14.5053 11.7732C14.5523 12.1459 14.8713 12.4255 15.2495 12.4255C15.6277 12.4255 15.9467 12.1459 15.9937 11.7732C15.9947 11.7648 16.1143 10.9077 16.6459 10.0106C17.3511 8.82006 18.4267 8.12741 19.8425 7.95167C20.2179 7.905 20.4995 7.58826 20.4995 7.21275C20.4995 6.83723 20.2179 6.52049 19.8425 6.47383C19.8341 6.47284 18.9709 6.35408 18.0673 5.82626C16.8683 5.12606 16.1707 4.05809 15.9937 2.65234C15.9467 2.2796 15.6277 2 15.2495 2C14.8713 2 14.5523 2.2796 14.5053 2.65234C14.5043 2.66068 14.3847 3.51775 13.8531 4.41494C13.1479 5.60543 12.0723 6.29808 10.6565 6.47383C10.2811 6.52049 9.99951 6.83723 9.99951 7.21275ZM15.1459 5.17014C15.1719 5.12626 15.1971 5.08257 15.2215 5.03908C15.7037 5.88345 16.4049 6.58325 17.3067 7.10988C17.3509 7.1357 17.3949 7.16072 17.4387 7.18495C16.5883 7.66372 15.8835 8.35995 15.3531 9.25535C15.3271 9.29924 15.3019 9.34293 15.2775 9.38641C14.7953 8.54205 14.0941 7.84225 13.1923 7.31561C13.1481 7.2898 13.1041 7.26478 13.0603 7.24055C13.9107 6.76177 14.6155 6.06555 15.1459 5.17014Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export const LogoIcon = () => (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 80 80"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M42.599 1.42905C42.7981 0.956333 42.9856 0.479843 43.1614 0H70.9732C69.3395 8.44404 65.85 16.4456 60.7381 23.4407C56.3119 29.4972 50.7705 34.661 44.4184 38.674C46.94 37.5087 49.5481 36.514 52.2255 35.6999C61.2135 32.9668 70.7269 32.347 80 33.8881V61.1032C74.6719 59.434 68.9849 59.1128 63.4707 60.1914C57.0407 61.4489 51.1345 64.553 46.4988 69.111C43.3234 72.2332 40.8418 75.9415 39.1824 80H11.166C11.6458 77.7555 12.2594 75.5347 13.0057 73.349C16.0389 64.4656 21.1772 56.4187 27.9965 49.8725C30.9091 47.0765 34.0928 44.5884 37.4941 42.4397C29.5176 46.1257 20.8056 48.0454 11.9749 48.052C7.93008 48.0635 3.91901 47.6693 0 46.8889V19.337C3.78284 20.781 7.83872 21.5444 11.9749 21.5485C18.5309 21.5485 24.9395 19.6371 30.3905 16.0558C35.8416 12.4746 40.0901 7.38449 42.599 1.42905Z"
+      fill="url(#paint0_linear_487_2602)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_487_2602"
+        x1="80"
+        y1="1.19999"
+        x2="-14.6604"
+        y2="55.0099"
+        gradientUnits="userSpaceOnUse">
+        <stop stop-color="#00C2FF" />
+        <stop offset="0.440985" stop-color="#A0FAFF" />
+        <stop offset="0.722215" stop-color="#FCF9F8" />
+        <stop offset="1" stop-color="#C46FFB" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export const EndCall = ({fill}: {fill: string}) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_11_3253)">
+      <path
+        d="M12 8C13.8812 8 15.6803 8.39022 17.3972 9.17068C19.1142 9.95113 20.5848 11.0832 21.8091 12.5668C21.9285 12.7213 21.9919 12.8913 21.9994 13.0768C22.0069 13.2622 21.9434 13.4245 21.8091 13.5636L19.7039 15.7427C19.5845 15.8663 19.4128 15.9359 19.1888 15.9513C18.9649 15.9668 18.7857 15.9204 18.6513 15.8122L16.0983 13.8418C16.0087 13.7645 15.9415 13.6795 15.8967 13.5868C15.852 13.4941 15.8296 13.3936 15.8296 13.2854V10.0632C15.2025 9.8159 14.5642 9.64204 13.9148 9.54158C13.2653 9.44113 12.6271 9.3909 12 9.3909C11.3729 9.3909 10.7347 9.44113 10.0852 9.54158C9.43576 9.64204 8.7975 9.8159 8.17044 10.0632V13.2854C8.17044 13.3936 8.14804 13.4941 8.10325 13.5868C8.05846 13.6795 7.99128 13.7645 7.9017 13.8418L5.34866 15.8122C5.1695 15.9513 4.9866 16.0131 4.79998 15.9977C4.61335 15.9822 4.44539 15.8972 4.29609 15.7427L2.19095 13.5636C2.05658 13.4245 1.99312 13.2622 2.00059 13.0768C2.00805 12.8913 2.07151 12.7213 2.19095 12.5668C3.41521 11.0832 4.88582 9.95113 6.60278 9.17068C8.31974 8.39022 10.1188 8 12 8Z"
+        fill={fill}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_11_3253">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export const AgoraLogo = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="100"
+    height="36"
+    viewBox="0 0 100 36"
+    fill="none">
+    <path
+      d="M55.9961 16.6571C54.8825 16.6582 53.7937 16.3262 52.8672 15.7031C51.9408 15.0799 51.2184 14.1936 50.7915 13.1563C50.3646 12.119 50.2523 10.9773 50.4688 9.87565C50.6854 8.77397 51.2211 7.76182 52.0081 6.96725C52.7951 6.17269 53.798 5.6314 54.8901 5.41187C55.9822 5.19234 57.1143 5.30443 58.1432 5.73397C59.1721 6.1635 60.0516 6.89118 60.6703 7.82494C61.2891 8.7587 61.6194 9.85658 61.6194 10.9797C61.6179 12.484 61.0251 13.9263 59.971 14.9905C58.917 16.0547 57.4875 16.654 55.9961 16.6571ZM55.9961 0.685545C53.9774 0.685545 52.0041 1.28929 50.3257 2.42042C48.6472 3.55156 47.339 5.15929 46.5665 7.0403C45.794 8.92131 45.5919 10.9911 45.9857 12.988C46.3795 14.9849 47.3516 16.8191 48.779 18.2588C50.2064 19.6984 52.0251 20.6789 54.0049 21.0761C55.9848 21.4733 58.037 21.2694 59.902 20.4903C61.767 19.7111 63.361 18.3917 64.4825 16.6988C65.604 15.006 66.2026 13.0157 66.2026 10.9797C66.1981 8.25093 65.1213 5.63522 63.2082 3.70568C61.2951 1.77615 58.7016 0.690117 55.9961 0.685545Z"
+      fill="white"
+    />
+    <path
+      d="M72.9509 3.33686L72.8252 3.46367L72.688 3.59624L72.5966 3.42908L72.5166 3.29075C72.1528 2.61057 71.6352 2.02647 71.0057 1.58583C70.3761 1.1452 69.6525 0.860443 68.8935 0.754678L68.5106 0.679749V21.2796L68.8935 21.2277C70.0661 21.0917 71.1463 20.5196 71.923 19.6232C72.6997 18.7269 73.1172 17.5706 73.0938 16.3804V10.9797C73.1048 9.57935 73.6245 8.23169 74.5544 7.19181C75.4843 6.15193 76.76 5.49199 78.1399 5.3369L78.4428 5.30232V0.691276L78.077 0.731623C76.1175 0.98888 74.3034 1.91185 72.9338 3.34839"
+      fill="white"
+    />
+    <path
+      d="M10.1988 16.6627C9.08546 16.6627 7.99714 16.3297 7.07146 15.7059C6.14578 15.0821 5.42429 14.1954 4.99825 13.158C4.5722 12.1206 4.46073 10.9791 4.67792 9.87776C4.89512 8.77646 5.43123 7.76486 6.21846 6.97086C7.00569 6.17687 8.00868 5.63616 9.1006 5.4171C10.1925 5.19803 11.3243 5.31046 12.3529 5.74017C13.3815 6.16987 14.2606 6.89756 14.8791 7.83119C15.4976 8.76483 15.8278 9.86248 15.8278 10.9854C15.8263 12.4906 15.2327 13.9338 14.1774 14.9982C13.1221 16.0625 11.6912 16.6612 10.1988 16.6627ZM16.7536 2.71429L16.5821 2.94485L16.4678 2.85839L16.3592 2.77193C15.0679 1.78792 13.5631 1.12773 11.969 0.845847C10.3749 0.563968 8.73714 0.668481 7.19095 1.15076C5.64477 1.63304 4.23446 2.47926 3.07642 3.61958C1.91838 4.7599 1.04581 6.16164 0.530718 7.7091C0.0156274 9.25656 -0.127215 10.9054 0.113979 12.5195C0.355174 14.1336 0.973489 15.6667 1.9179 16.9923C2.86231 18.3179 4.10573 19.398 5.54556 20.1434C6.98538 20.8889 8.58033 21.2783 10.1988 21.2795C12.4248 21.286 14.5905 20.5505 16.3592 19.1873L16.4678 19.1066L16.5821 19.0143L16.6678 19.1354L16.7536 19.2507C17.1387 19.7867 17.6273 20.2387 18.19 20.5794C18.7527 20.9201 19.378 21.1426 20.0281 21.2334L20.4053 21.2853V0.685434L20.0281 0.737308C19.3785 0.827755 18.7537 1.04946 18.191 1.38916C17.6284 1.72886 17.1395 2.17956 16.7536 2.71429Z"
+      fill="white"
+    />
+    <path
+      d="M89.7935 16.6628C88.6805 16.6616 87.5927 16.3277 86.6678 15.7032C85.7428 15.0786 85.0222 14.1916 84.5971 13.1541C84.1719 12.1166 84.0612 10.9752 84.2791 9.87431C84.4969 8.77339 85.0335 7.76232 85.8209 6.96891C86.6084 6.17549 87.6114 5.63535 88.7032 5.41675C89.7949 5.19816 90.9264 5.31093 91.9547 5.7408C92.9829 6.17067 93.8617 6.89836 94.48 7.83187C95.0982 8.76538 95.4282 9.86281 95.4282 10.9854C95.4267 12.4907 94.8332 13.9339 93.7779 14.9982C92.7226 16.0626 91.2917 16.6613 89.7992 16.6628M99.6228 0.737385C98.9726 0.82837 98.3472 1.05027 97.7837 1.38989C97.2202 1.72951 96.7301 2.17993 96.3426 2.71437L96.2626 2.82388L96.1769 2.94492L96.0626 2.85847L95.954 2.77201C94.6633 1.7847 93.1582 1.12141 91.5631 0.836964C89.968 0.55252 88.3286 0.655094 86.7806 1.13621C85.2325 1.61732 83.8202 2.46315 82.6605 3.60378C81.5007 4.74441 80.6268 6.14707 80.111 7.69581C79.5951 9.24455 79.4522 10.8949 79.694 12.5104C79.9358 14.1259 80.5553 15.6601 81.5014 16.9863C82.4475 18.3124 83.693 19.3924 85.1349 20.137C86.5767 20.8815 88.1736 21.2692 89.7935 21.2681C92.0195 21.2746 94.1853 20.539 95.954 19.1758L96.0626 19.0951L96.1769 19.0029L96.2626 19.1239L96.3426 19.2392C96.7293 19.7749 97.2191 20.2266 97.7827 20.5673C98.3462 20.9079 98.9721 21.1306 99.6228 21.222L100 21.2738V0.68551L99.6228 0.737385Z"
+      fill="white"
+    />
+    <path
+      d="M33.2416 5.30235C34.3547 5.30349 35.4424 5.63743 36.3673 6.26196C37.2923 6.88649 38.0129 7.77357 38.438 8.81107C38.8632 9.84857 38.9739 10.9899 38.756 12.0908C38.5382 13.1917 38.0016 14.2028 37.2142 14.9962C36.4267 15.7896 35.4237 16.3298 34.3319 16.5484C33.2402 16.767 32.1087 16.6542 31.0804 16.2243C30.0522 15.7945 29.1734 15.0668 28.5551 14.1333C27.9369 13.1998 27.6069 12.1023 27.6069 10.9797C27.6076 10.2329 27.7543 9.49357 28.0385 8.80398C28.3228 8.11438 28.7389 7.48805 29.2633 6.96078C29.7877 6.43352 30.4099 6.01566 31.0945 5.73109C31.7791 5.44653 32.5126 5.30084 33.253 5.30235M39.6249 19.0087C41.6322 17.3967 42.9621 15.08 43.3489 12.5217C43.7356 9.96339 43.1506 7.35216 41.7108 5.21013C41.568 4.99111 41.4079 4.77785 41.2422 4.57035C41.8327 4.17829 42.3331 3.66317 42.7097 3.05968C43.0863 2.45618 43.3302 1.77831 43.4252 1.07172L43.4824 0.685545H33.2016C31.0896 0.690185 29.0311 1.35588 27.3103 2.59075C25.5894 3.82562 24.2909 5.56877 23.5942 7.57963C22.8974 9.59049 22.8366 11.7699 23.4203 13.8171C24.0039 15.8643 25.2032 17.6782 26.8525 19.0087C26.4142 19.3584 26.0052 19.744 25.6296 20.1615L28.7384 23.6197C29.2337 22.9457 29.8709 22.3908 30.6042 21.9949C31.3375 21.5989 32.1487 21.3718 32.9794 21.3299C33.8102 21.2879 34.6398 21.4322 35.4086 21.7523C36.1775 22.0724 36.8664 22.5604 37.426 23.1811C37.9855 23.8019 38.4016 24.54 38.6445 25.3423C38.8874 26.1447 38.951 26.9914 38.8306 27.8215C38.7103 28.6516 38.409 29.4445 37.9486 30.1431C37.4881 30.8417 36.8798 31.4288 36.1675 31.862L39.2821 35.3203C40.5352 34.3824 41.5581 33.1669 42.2721 31.7675C42.9861 30.368 43.372 28.8219 43.4001 27.2483C43.4283 25.6747 43.0979 24.1156 42.4345 22.6911C41.7711 21.2665 40.7923 20.0146 39.5735 19.0317"
+      fill="white"
+    />
+  </svg>
+);
+
+export const OpenAILogo = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="120"
+    height="34"
+    viewBox="0 0 120 34"
+    fill="none">
+    <path
+      d="M37.7401 16.3637C37.7401 21.7689 41.2112 25.5376 46.0213 25.5376C50.8314 25.5376 54.3026 21.7689 54.3026 16.3637C54.3026 10.9586 50.8314 7.18988 46.0213 7.18988C41.2112 7.18988 37.7401 10.9586 37.7401 16.3637ZM51.1289 16.3637C51.1289 20.2316 49.0214 22.7359 46.0213 22.7359C43.0212 22.7359 40.9137 20.2316 40.9137 16.3637C40.9137 12.4958 43.0212 9.99163 46.0213 9.99163C49.0214 9.99163 51.1289 12.4958 51.1289 16.3637Z"
+      fill="white"
+    />
+    <path
+      d="M63.2401 25.5375C66.8849 25.5375 68.9676 22.463 68.9676 18.7687C68.9676 15.0744 66.8849 11.9999 63.2401 11.9999C61.5541 11.9999 60.3144 12.6693 59.4962 13.6363V12.2478H56.5209V29.7278H59.4962V23.9011C60.3144 24.8681 61.5541 25.5375 63.2401 25.5375ZM59.4218 18.3968C59.4218 15.9422 60.8103 14.6033 62.6451 14.6033C64.8022 14.6033 65.9675 16.2893 65.9675 18.7687C65.9675 21.2481 64.8022 22.9341 62.6451 22.9341C60.8103 22.9341 59.4218 21.5705 59.4218 19.1654V18.3968Z"
+      fill="white"
+    />
+    <path
+      d="M77.0196 25.5375C79.623 25.5375 81.6809 24.1738 82.5983 21.8928L80.0445 20.9258C79.6478 22.2647 78.4825 23.0085 77.0196 23.0085C75.1105 23.0085 73.7716 21.6448 73.5484 19.4134H82.6727V18.4216C82.6727 14.8512 80.6644 11.9999 76.8956 11.9999C73.1269 11.9999 70.6971 14.9504 70.6971 18.7687C70.6971 22.7854 73.3005 25.5375 77.0196 25.5375ZM76.8708 14.5041C78.7552 14.5041 79.6478 15.7438 79.6726 17.1819H73.6972C74.1435 15.4215 75.3336 14.5041 76.8708 14.5041Z"
+      fill="white"
+    />
+    <path
+      d="M84.9045 25.2649H87.8799V17.6282C87.8799 15.7687 89.2435 14.7769 90.5824 14.7769C92.2188 14.7769 92.8635 15.9422 92.8635 17.5538V25.2649H95.8388V16.6861C95.8388 13.8843 94.2024 11.9999 91.475 11.9999C89.789 11.9999 88.6237 12.7686 87.8799 13.6364V12.2479H84.9045V25.2649Z"
+      fill="white"
+    />
+    <path
+      d="M104.554 7.46271L97.8096 25.265H100.958L102.471 21.1987H110.157L111.694 25.265H114.893L108.149 7.46271H104.554ZM106.289 10.9835L109.116 18.4218H103.512L106.289 10.9835Z"
+      fill="white"
+    />
+    <path d="M120 7.51434H116.826V25.3166H120V7.51434Z" fill="white" />
+    <path
+      d="M30.469 14.0015C31.2191 11.7503 30.9608 9.28436 29.7614 7.23676C27.9576 4.09616 24.3314 2.4804 20.79 3.24076C19.2145 1.46591 16.951 0.456576 14.578 0.47104C10.958 0.462775 7.74615 2.79343 6.63248 6.23776C4.30699 6.71402 2.29969 8.16965 1.12506 10.2327C-0.692152 13.3651 -0.277881 17.3136 2.14989 19.9996C1.39986 22.2507 1.65814 24.7167 2.85756 26.7643C4.66134 29.9049 8.28749 31.5207 11.8289 30.7603C13.4034 32.5352 15.6679 33.5445 18.0409 33.529C21.663 33.5383 24.8759 31.2056 25.9895 27.7581C28.315 27.2819 30.3223 25.8262 31.497 23.7632C33.3121 20.6308 32.8968 16.6854 30.4701 13.9994L30.469 14.0015ZM18.043 31.3688C16.5936 31.3709 15.1896 30.8636 14.0769 29.9349C14.1276 29.908 14.2154 29.8594 14.2722 29.8243L20.8551 26.0225C21.1919 25.8314 21.3985 25.4729 21.3964 25.0855V15.8052L24.1785 17.4117C24.2085 17.4262 24.2281 17.4551 24.2323 17.4881V25.1733C24.2281 28.5908 21.4605 31.3616 18.043 31.3688ZM4.73262 25.6837C4.00636 24.4295 3.74498 22.9594 3.99396 21.5327C4.04252 21.5616 4.12826 21.6143 4.18921 21.6495L10.7721 25.4512C11.1058 25.6465 11.519 25.6465 11.8537 25.4512L19.8902 20.8106V24.0235C19.8922 24.0566 19.8767 24.0886 19.8509 24.1092L13.1968 27.9513C10.2328 29.658 6.44756 28.6435 4.73365 25.6837H4.73262ZM3.00012 11.3144C3.72329 10.0581 4.86486 9.09737 6.22441 8.59838C6.22441 8.6552 6.22131 8.75541 6.22131 8.82566V16.4303C6.21924 16.8166 6.42586 17.1751 6.76162 17.3662L14.798 22.0059L12.0159 23.6123C11.988 23.6309 11.9529 23.634 11.9219 23.6206L5.26673 19.7754C2.30898 18.0625 1.29449 14.2783 2.99909 11.3154L3.00012 11.3144ZM25.8583 16.6338L17.8219 11.9931L20.604 10.3877C20.6319 10.3691 20.667 10.366 20.698 10.3794L27.3532 14.2215C30.3161 15.9333 31.3317 19.7238 29.6198 22.6867C28.8956 23.9408 27.7551 24.9016 26.3966 25.4016V17.5698C26.3997 17.1834 26.1941 16.8259 25.8594 16.6338H25.8583ZM28.627 12.4663C28.5785 12.4363 28.4927 12.3847 28.4318 12.3495L21.8489 8.54776C21.5152 8.35251 21.102 8.35251 20.7673 8.54776L12.7308 13.1884V9.9755C12.7288 9.94244 12.7443 9.91041 12.7701 9.88975L19.4242 6.05077C22.3882 4.341 26.1776 5.3586 27.8863 8.32358C28.6084 9.57569 28.8698 11.0416 28.625 12.4663H28.627ZM11.2184 18.1927L8.43523 16.5863C8.40527 16.5718 8.38564 16.5429 8.38151 16.5098V8.82463C8.38357 5.40303 11.1595 2.6302 14.5811 2.63227C16.0285 2.63227 17.4293 3.14055 18.542 4.0662C18.4914 4.09306 18.4046 4.14162 18.3467 4.17674L11.7639 7.97853C11.4271 8.16965 11.2204 8.5271 11.2225 8.91451L11.2184 18.1907V18.1927ZM12.7298 14.9343L16.3095 12.8671L19.8891 14.9333V19.0667L16.3095 21.1329L12.7298 19.0667V14.9343Z"
+      fill="white"
+    />
+    <path
+      d="M30.469 14.0015C31.2191 11.7503 30.9608 9.28436 29.7614 7.23676C27.9576 4.09616 24.3314 2.4804 20.79 3.24076C19.2145 1.46591 16.951 0.456576 14.578 0.47104C10.958 0.462775 7.74615 2.79343 6.63248 6.23776C4.30699 6.71402 2.29969 8.16965 1.12506 10.2327C-0.692152 13.3651 -0.277881 17.3136 2.14989 19.9996C1.39986 22.2507 1.65814 24.7167 2.85756 26.7643C4.66134 29.9049 8.28749 31.5207 11.8289 30.7603C13.4034 32.5352 15.6679 33.5445 18.0409 33.529C21.663 33.5383 24.8759 31.2056 25.9895 27.7581C28.315 27.2819 30.3223 25.8262 31.497 23.7632C33.3121 20.6308 32.8968 16.6854 30.4701 13.9994L30.469 14.0015ZM18.043 31.3688C16.5936 31.3709 15.1896 30.8636 14.0769 29.9349C14.1276 29.908 14.2154 29.8594 14.2722 29.8243L20.8551 26.0225C21.1919 25.8314 21.3985 25.4729 21.3964 25.0855V15.8052L24.1785 17.4117C24.2085 17.4262 24.2281 17.4551 24.2323 17.4881V25.1733C24.2281 28.5908 21.4605 31.3616 18.043 31.3688ZM4.73262 25.6837C4.00636 24.4295 3.74498 22.9594 3.99396 21.5327C4.04252 21.5616 4.12826 21.6143 4.18921 21.6495L10.7721 25.4512C11.1058 25.6465 11.519 25.6465 11.8537 25.4512L19.8902 20.8106V24.0235C19.8922 24.0566 19.8767 24.0886 19.8509 24.1092L13.1968 27.9513C10.2328 29.658 6.44756 28.6435 4.73365 25.6837H4.73262ZM3.00012 11.3144C3.72329 10.0581 4.86486 9.09737 6.22441 8.59838C6.22441 8.6552 6.22131 8.75541 6.22131 8.82566V16.4303C6.21924 16.8166 6.42586 17.1751 6.76162 17.3662L14.798 22.0059L12.0159 23.6123C11.988 23.6309 11.9529 23.634 11.9219 23.6206L5.26673 19.7754C2.30898 18.0625 1.29449 14.2783 2.99909 11.3154L3.00012 11.3144ZM25.8583 16.6338L17.8219 11.9931L20.604 10.3877C20.6319 10.3691 20.667 10.366 20.698 10.3794L27.3532 14.2215C30.3161 15.9333 31.3317 19.7238 29.6198 22.6867C28.8956 23.9408 27.7551 24.9016 26.3966 25.4016V17.5698C26.3997 17.1834 26.1941 16.8259 25.8594 16.6338H25.8583ZM28.627 12.4663C28.5785 12.4363 28.4927 12.3847 28.4318 12.3495L21.8489 8.54776C21.5152 8.35251 21.102 8.35251 20.7673 8.54776L12.7308 13.1884V9.9755C12.7288 9.94244 12.7443 9.91041 12.7701 9.88975L19.4242 6.05077C22.3882 4.341 26.1776 5.3586 27.8863 8.32358C28.6084 9.57569 28.8698 11.0416 28.625 12.4663H28.627ZM11.2184 18.1927L8.43523 16.5863C8.40527 16.5718 8.38564 16.5429 8.38151 16.5098V8.82463C8.38357 5.40303 11.1595 2.6302 14.5811 2.63227C16.0285 2.63227 17.4293 3.14055 18.542 4.0662C18.4914 4.09306 18.4046 4.14162 18.3467 4.17674L11.7639 7.97853C11.4271 8.16965 11.2204 8.5271 11.2225 8.91451L11.2184 18.1907V18.1927ZM12.7298 14.9343L16.3095 12.8671L19.8891 14.9333V19.0667L16.3095 21.1329L12.7298 19.0667V14.9343Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export const AgoraOpenAILogo = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="80"
+    height="80"
+    viewBox="0 0 80 80"
+    fill="none">
+    <path
+      d="M42.599 1.42905C42.7981 0.956333 42.9856 0.479843 43.1614 0H70.9732C69.3395 8.44404 65.85 16.4456 60.7381 23.4407C56.3119 29.4972 50.7705 34.661 44.4184 38.674C46.94 37.5087 49.5481 36.514 52.2255 35.6999C61.2135 32.9668 70.7269 32.347 80 33.8881V61.1032C74.6719 59.434 68.9849 59.1128 63.4707 60.1914C57.0407 61.4489 51.1345 64.553 46.4988 69.111C43.3234 72.2332 40.8418 75.9415 39.1824 80H11.166C11.6458 77.7555 12.2594 75.5347 13.0057 73.349C16.0389 64.4656 21.1772 56.4187 27.9965 49.8725C30.9091 47.0765 34.0928 44.5884 37.4941 42.4397C29.5176 46.1257 20.8056 48.0454 11.9749 48.052C7.93008 48.0635 3.91901 47.6693 0 46.8889V19.337C3.78284 20.781 7.83872 21.5444 11.9749 21.5485C18.5309 21.5485 24.9395 19.6371 30.3905 16.0558C35.8416 12.4746 40.0901 7.38449 42.599 1.42905Z"
+      fill="url(#paint0_linear_487_2602)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_487_2602"
+        x1="80"
+        y1="1.19999"
+        x2="-14.6604"
+        y2="55.0099"
+        gradientUnits="userSpaceOnUse">
+        <stop stop-color="#00C2FF" />
+        <stop offset="0.440985" stop-color="#A0FAFF" />
+        <stop offset="0.722215" stop-color="#FCF9F8" />
+        <stop offset="1" stop-color="#C46FFB" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export const MobileTopBarLogo = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="17"
+    height="16"
+    viewBox="0 0 17 16"
+    fill="none">
+    <path
+      d="M8.49697 12.4096C7.62401 12.4096 6.77065 12.151 6.04481 11.6665C5.31897 11.1819 4.75325 10.4932 4.41918 9.68749C4.08512 8.88174 3.99771 7.99511 4.16801 7.13972C4.33832 6.28434 4.75869 5.49862 5.37597 4.88192C5.99324 4.26523 6.7797 3.84525 7.63589 3.6751C8.49207 3.50496 9.37953 3.59228 10.186 3.92604C10.9926 4.25979 11.6819 4.82498 12.1669 5.55014C12.6519 6.2753 12.9107 7.12786 12.9107 8C12.9095 9.16914 12.4441 10.2901 11.6167 11.1168C10.7892 11.9435 9.66721 12.4084 8.49697 12.4096ZM13.6367 1.57583L13.5694 1.66536C13.5323 1.71482 13.4621 1.72483 13.4126 1.68774L13.3275 1.62059C12.3149 0.856303 11.135 0.343531 9.88503 0.124594C8.63506 -0.0943429 7.35089 -0.0131673 6.13851 0.361422C4.92613 0.736011 3.82029 1.39327 2.91226 2.27897C2.00422 3.16466 1.32003 4.25339 0.916142 5.45531C0.512254 6.65723 0.400249 7.93788 0.589372 9.19157C0.778496 10.4453 1.26332 11.636 2.00385 12.6656C2.74437 13.6952 3.71935 14.5342 4.84834 15.1131C5.97732 15.6921 7.22794 15.9946 8.49697 15.9955C10.2424 16.0006 11.9406 15.4293 13.3275 14.3705L13.4126 14.3078C13.4613 14.2689 13.5332 14.2794 13.5694 14.3302L13.6367 14.4197C13.9386 14.836 14.3218 15.1871 14.763 15.4517C15.2042 15.7164 15.6945 15.8892 16.2043 15.9597C16.3607 15.981 16.5 15.8594 16.5 15.7015V0.298476C16.5 0.140587 16.3607 0.0189778 16.2043 0.040291C15.6949 0.110542 15.205 0.282743 14.7638 0.546588C14.3226 0.810433 13.9392 1.1605 13.6367 1.57583Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export const SettingsIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none">
+    <path
+      d="M11.9998 20.75C11.7871 20.75 11.609 20.6781 11.4655 20.5343C11.3218 20.3906 11.25 20.2125 11.25 20V16C11.25 15.7875 11.3219 15.6094 11.4658 15.4658C11.6096 15.3219 11.7878 15.25 12.0003 15.25C12.2129 15.25 12.391 15.3219 12.5345 15.4658C12.6782 15.6094 12.75 15.7875 12.75 16V17.25H20C20.2125 17.25 20.3906 17.3219 20.5343 17.4658C20.6781 17.6096 20.75 17.7878 20.75 18.0003C20.75 18.2129 20.6781 18.391 20.5343 18.5345C20.3906 18.6782 20.2125 18.75 20 18.75H12.75V20C12.75 20.2125 12.6781 20.3906 12.5343 20.5343C12.3904 20.6781 12.2122 20.75 11.9998 20.75ZM4 18.75C3.7875 18.75 3.60942 18.6781 3.46575 18.5343C3.32192 18.3904 3.25 18.2122 3.25 17.9998C3.25 17.7871 3.32192 17.609 3.46575 17.4655C3.60942 17.3218 3.7875 17.25 4 17.25H8C8.2125 17.25 8.39058 17.3219 8.53425 17.4658C8.67808 17.6096 8.75 17.7878 8.75 18.0003C8.75 18.2129 8.67808 18.391 8.53425 18.5345C8.39058 18.6782 8.2125 18.75 8 18.75H4ZM7.99975 14.75C7.78708 14.75 7.609 14.6781 7.4655 14.5343C7.32183 14.3906 7.25 14.2125 7.25 14V12.75H4C3.7875 12.75 3.60942 12.6781 3.46575 12.5343C3.32192 12.3904 3.25 12.2122 3.25 11.9998C3.25 11.7871 3.32192 11.609 3.46575 11.4655C3.60942 11.3218 3.7875 11.25 4 11.25H7.25V10C7.25 9.7875 7.32192 9.60942 7.46575 9.46575C7.60958 9.32192 7.78775 9.25 8.00025 9.25C8.21292 9.25 8.391 9.32192 8.5345 9.46575C8.67817 9.60942 8.75 9.7875 8.75 10V14C8.75 14.2125 8.67808 14.3906 8.53425 14.5343C8.39042 14.6781 8.21225 14.75 7.99975 14.75ZM12 12.75C11.7875 12.75 11.6094 12.6781 11.4658 12.5343C11.3219 12.3904 11.25 12.2122 11.25 11.9998C11.25 11.7871 11.3219 11.609 11.4658 11.4655C11.6094 11.3218 11.7875 11.25 12 11.25H20C20.2125 11.25 20.3906 11.3219 20.5343 11.4658C20.6781 11.6096 20.75 11.7878 20.75 12.0003C20.75 12.2129 20.6781 12.391 20.5343 12.5345C20.3906 12.6782 20.2125 12.75 20 12.75H12ZM15.9998 8.75C15.7871 8.75 15.609 8.67808 15.4655 8.53425C15.3218 8.39058 15.25 8.2125 15.25 8V4C15.25 3.7875 15.3219 3.60942 15.4658 3.46575C15.6096 3.32192 15.7878 3.25 16.0003 3.25C16.2129 3.25 16.391 3.32192 16.5345 3.46575C16.6782 3.60942 16.75 3.7875 16.75 4V5.25H20C20.2125 5.25 20.3906 5.32192 20.5343 5.46575C20.6781 5.60958 20.75 5.78775 20.75 6.00025C20.75 6.21292 20.6781 6.391 20.5343 6.5345C20.3906 6.67817 20.2125 6.75 20 6.75H16.75V8C16.75 8.2125 16.6781 8.39058 16.5343 8.53425C16.3904 8.67808 16.2122 8.75 15.9998 8.75ZM4 6.75C3.7875 6.75 3.60942 6.67808 3.46575 6.53425C3.32192 6.39042 3.25 6.21225 3.25 5.99975C3.25 5.78708 3.32192 5.609 3.46575 5.4655C3.60942 5.32183 3.7875 5.25 4 5.25H12C12.2125 5.25 12.3906 5.32192 12.5343 5.46575C12.6781 5.60958 12.75 5.78775 12.75 6.00025C12.75 6.21292 12.6781 6.391 12.5343 6.5345C12.3906 6.67817 12.2125 6.75 12 6.75H4Z"
+      fill="#E8EAED"
+    />
+  </svg>
+);
+export const DisconnectedIconMobile = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="254"
+    height="255"
+    viewBox="0 0 254 255"
+    fill="none">
+    <path
+      opacity="0.5"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M127 254.5C197.14 254.5 254 197.64 254 127.5C254 57.3598 197.14 0.5 127 0.5C56.8598 0.5 0 57.3598 0 127.5C0 197.64 56.8598 254.5 127 254.5ZM127.001 240.244C189.267 240.244 239.744 189.767 239.744 127.501C239.744 65.2346 189.267 14.7578 127.001 14.7578C64.7346 14.7578 14.2578 65.2346 14.2578 127.501C14.2578 189.767 64.7346 240.244 127.001 240.244Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export const DisconnectedIconDesktop = () => (
+  <svg
+    width="500"
+    height="500"
+    viewBox="0 0 500 500"
+    fill="#00C2FF"
+    xmlns="http://www.w3.org/2000/svg">
+    <circle
+      cx="250"
+      cy="250"
+      r="200"
+      stroke="#00C2FF"
+      stroke-width="40"
+      fill="transparent"
+    />
+  </svg>
+);

package/template/src/ai-agent/components/mobile/Bottombar.tsx

@@ -0,0 +1,47 @@
+import React, {useState} from 'react';
+import {StyleSheet, View} from 'react-native';
+import {ToolbarComponents, useRoomInfo} from 'customization-api';
+import {AgentControl} from '../AgentControls';
+
+const Bottombar = () => {
+  const [clientId, setClientId] = useState<string | null>(null);
+  const {LocalAudioToolbarItem} = ToolbarComponents;
+  const {data} = useRoomInfo();
+  const css = `
+    [data-testid="localAudio-btn"]{
+      padding-bottom: 0px !important;
+    }
+  `;
+  return (
+    <>
+      <style type="text/css">{css}</style>
+      <View style={style.containerStyle}>
+        <LocalAudioToolbarItem
+          iconBGColor={'#00C2FF'}
+          iconSize={32}
+          containerStyle={{padding: 20}}
+        />
+        <AgentControl
+          channel_name={data.channel}
+          style={{fontSize: 18, lineHeight: 18}}
+          clientId={clientId}
+          setClientId={setClientId}
+        />
+      </View>
+    </>
+  );
+};
+
+const style = StyleSheet.create({
+  containerStyle: {
+    paddingTop: 20,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 16,
+    alignSelf: 'stretch',
+  },
+});
+
+export default Bottombar;