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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.35",
+  "version": "4.1.0-beta-2",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [
@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "vercel-build": "npm run dev-setup && cd template && npm run web:build && cd .. && npm run copy-vercel",
-    "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/ReactNative-UIKit.git template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout appbuilder-uikit-3.0.29",
+    "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/appbuilder-ui-kit.git template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout appbuilder-uikit-3.0.36",
     "deps": "cd template && npm i --force",
     "dev-setup": "npm run uikit && npm run deps && node devSetup.js",
     "web-build": "cd template && npm run web:build && cd .. && npm run copy-vercel",

package/template/agora-rn-uikit/README.md

@@ -1,42 +1,3 @@
 <div style="text-align:center">
-<h1> Agora React Native UIKit</h1>
-<h6>Rapidly integrate video calling into your React Native applications with built in UI Elements.</h6>
+<h1> AppBuilder UIKit - Internal Usage</h1>
 </div>
-
-## Getting started
-
-### Installation
-
-To a react-native application generated using react-native-cli, add the following:
-
-```
-npm i react-native-agora agora-rn-uikit
-```
-
-### Usage
-
-This UIKit is very simple to use and contains a high level component called `AgoraUIKit`.
-
-**A simple sample app integrating Agora UI Kit:**
-```javascript
-import React, { useState } from 'react';
-import AgoraUIKit from 'agora-rn-uikit';
-
-const App = () => {
-  const [videoCall, setVideoCall] = useState(true);
-  const rtcProps = {
-    appId: '<-----App ID here----->',
-    channel: 'test',
-  };
-  const callbacks = {
-    EndCall: () => setVideoCall(false),
-  };
-  return videoCall ? (
-    <AgoraUIKit rtcProps={rtcProps} callbacks={callbacks} />
-  ) : (
-    <></>
-  );
-};
-
-export default App;
-```

package/template/agora-rn-uikit/src/Contexts/PropsContext.tsx

@@ -185,6 +185,7 @@ export interface CallbacksInterface {
   AddCustomContent(uid: UidType, data: any): void;
   RemoveCustomContent(uid: UidType): void;
   UserPin(Uid: UidType): void;
+  Spotlight(Uid: UidType): void;
   UserSecondaryPin(Uid: UidType): void;
   ActiveSpeaker(Uid: UidType): void;
 }

package/template/agora-rn-uikit/src/Contexts/RtcContext.tsx

@@ -33,6 +33,7 @@ export interface ContentStateInterface {
   pinnedUid?: UidType;
   secondaryPinnedUid?: UidType;
   lastJoinedUid?: UidType;
+  spotlightUid?: UidType;
 }
 
 export interface ActionInterface<T extends keyof CallbacksInterface> {

package/template/agora-rn-uikit/src/Reducer/Spotlight.ts

@@ -0,0 +1,11 @@
+import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
+
+export default function Spotlight(
+  state: ContentStateInterface,
+  action: ActionType<'Spotlight'>,
+) {
+  return {
+    ...state,
+    spotlightUid: action?.value && action.value?.length ? action.value[0] : 0,
+  };
+}

package/template/agora-rn-uikit/src/Reducer/index.ts

@@ -11,3 +11,4 @@ export {default as RemoteVideoStateChanged} from './RemoteVideoStateChanged';
 export {default as UserPin} from './UserPin';
 export {default as UserSecondaryPin} from './UserSecondaryPin';
 export {default as ActiveSpeaker} from './ActiveSpeaker';
+export {default as Spotlight} from './Spotlight';

package/template/agora-rn-uikit/src/RtcConfigure.tsx

@@ -32,6 +32,7 @@ import {
   UserPin,
   UserSecondaryPin,
   ActiveSpeaker,
+  Spotlight,
 } from './Reducer';
 import Create from './Rtc/Create';
 import Join from './Rtc/Join';
@@ -260,6 +261,11 @@ const RtcConfigure = (outerProps: {children: React.ReactNode}) => {
           stateUpdate = ActiveSpeaker(state, action);
         }
         break;
+      case 'Spotlight':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = Spotlight(state, action);
+        }
+        break;
     }
 
     // TODO: remove Handle event listeners
@@ -459,6 +465,7 @@ const RtcConfigure = (outerProps: {children: React.ReactNode}) => {
                       ? uidState.secondaryPinnedUid
                       : undefined,
                   lastJoinedUid: uidState.lastJoinedUid,
+                  spotlightUid: uidState.spotlightUid,
                 }}>
                 {outerProps.children}
               </ContentProvider>

package/template/bridge/rtc/webNg/RtcEngine.ts

@@ -220,7 +220,7 @@ export default class RtcEngine {
   private activeSpeakerUid: number;
   public appId: string;
   // public AgoraRTC: any;
-  public client: any | IAgoraRTCClient;
+  public client: IAgoraRTCClient;
   public screenClient: any | IAgoraRTCClient;
   public eventsMap = new Map<string, callbackType>([
     ['onUserJoined', () => null],
@@ -630,6 +630,7 @@ export default class RtcEngine {
   }
 
   async publish() {
+    console.log(`Audio-Track: ${this.localStream.audio}`);
     if (this.localStream.audio || this.localStream.video) {
       try {
         let tracks: Array<ILocalTrack> = [];
@@ -646,7 +647,9 @@ export default class RtcEngine {
             'API',
             'RTC [publish] trying to publish tracks',
           );
+          console.log(`Audio-Track: RTC publish ${this.localStream.audio}`);
           await this.client.publish(tracks);
+          console.log(`Audio-Track: RTC published ${this.localStream.audio}`);
           logger.log(
             LogSource.AgoraSDK,
             'API',

package/template/customization-api/app-state.ts

@@ -4,9 +4,9 @@
 import {createHook} from 'customization-implementation';
 import {RtcContext, ContentContext} from '../agora-rn-uikit';
 
-// commented for v1 release
-//import {default as DeviceContext} from '../src/components/DeviceContext';
-//import {default as StorageContext} from '../src/components/StorageContext';
+import {default as DeviceContext} from '../src/components/DeviceContext';
+import {default as StorageContext} from '../src/components/StorageContext';
+import {ErrorContext} from '../src/components/common/Error';
 /**
  * The RTC app state exposes the internal RtcEngine object as well as dispatch interface to perform various actions.
  */
@@ -18,9 +18,9 @@ export const useContent = createHook(ContentContext);
 
 export {useLocalUserInfo} from '../src/app-state/useLocalUserInfo';
 
-// commented for v1 release
-//export const useDeviceContext = createHook(DeviceContext);
-//export const useStorageContext = createHook(StorageContext);
+export const useDeviceContext = createHook(DeviceContext);
+export const useStorageContext = createHook(StorageContext);
+export const useErrorContext = createHook(ErrorContext);
 
 /**
  * UI contexts
@@ -40,8 +40,12 @@ export type {LayoutContextInterface} from '../src/utils/useLayout';
 // export type {ScreenshareContextInterface} from '../src/subComponents/screenshare/useScreenshare';
 export {useRecording} from '../src/subComponents/recording/useRecording';
 export type {RecordingContextInterface} from '../src/subComponents/recording/useRecording';
-export {useRoomInfo} from '../src/components/room-info/useRoomInfo';
+export {
+  useRoomInfo,
+  RoomInfoDefaultValue,
+} from '../src/components/room-info/useRoomInfo';
 export type {RoomInfoContextInterface} from '../src/components/room-info/useRoomInfo';
+export {useSetRoomInfo} from '../src/components/room-info/useSetRoomInfo';
 export {useMessages} from '../src/app-state/useMessages';
 export type {messageInterface} from '../src/app-state/useMessages';
 export {SidePanelType} from '../src/subComponents/SidePanelEnum';

package/template/customization-api/{customize.ts → customize.tsx}

@@ -9,6 +9,8 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
+import React from 'react';
+import {AI_AGENT_CUSTOMIZATION} from '../src/ai-agent';
 import {LogSource, logger} from '../src/logger/AppBuilderLogger';
 import {CustomizationApiInterface} from './typeDefinition';
 import ReactIs from 'react-is';
@@ -129,20 +131,123 @@ function validatei18n(data: any) {
     }
   }
 }
+
+const mergeCustomization = (
+  externalConfig: CustomizationApiInterface,
+  aiAgentConfig: CustomizationApiInterface,
+) => {
+  //check if any external config passed
+  if (
+    !externalConfig ||
+    (externalConfig && !Object.keys(externalConfig)?.length)
+  ) {
+    logger.log(
+      LogSource.CustomizationAPI,
+      'AI_AGENT_CUSTOMIZATION',
+      'Applied default customization',
+    );
+    //if not then return the aiAgentConfig
+    return aiAgentConfig;
+  }
+
+  //merging config
+  const mergedData: CustomizationApiInterface = mergeDeep(
+    aiAgentConfig,
+    externalConfig,
+  );
+
+  logger.log(
+    LogSource.CustomizationAPI,
+    'EXTERNAL_CUSTOMIZATION',
+    'Applied EXTERNAL_CUSTOMIZATION with AI_AGENT_CUSTOMZATION',
+  );
+  //override the app root
+  if (externalConfig?.components?.appRoot) {
+    const AiAgentAppRoot = aiAgentConfig.components.appRoot;
+    const ExternalAppRoot = externalConfig.components.appRoot;
+    mergedData.components.appRoot = props => (
+      <AiAgentAppRoot>
+        <ExternalAppRoot>{props.children}</ExternalAppRoot>
+      </AiAgentAppRoot>
+    );
+    logger.log(
+      LogSource.CustomizationAPI,
+      'EXTERNAL_CUSTOMIZATION',
+      'Applied appRoot with aiAgent appRoot',
+    );
+  }
+
+  //override the i18n
+  if (externalConfig?.i18n && externalConfig?.i18n?.length) {
+    mergedData.i18n = externalConfig.i18n;
+  } else if (
+    (!externalConfig?.i18n || !externalConfig?.i18n?.length) &&
+    aiAgentConfig?.i18n?.length
+  ) {
+    mergedData.i18n = aiAgentConfig.i18n;
+  }
+
+  return mergedData;
+};
+
 export const customize = (config: CustomizationApiInterface) => {
-  //validating the components
-  config?.components && validateComponents(config.components);
+  let newConfig: CustomizationApiInterface = {};
 
-  //validating the custom routes
-  //commented for v1 release
-  //config?.customRoutes && validateCustomRoutes(config.customRoutes);
+  try {
+    //check if is ai agent and merge agent and user config
+    if ($config.ENABLE_CONVERSATIONAL_AI) {
+      newConfig = mergeCustomization(config, AI_AGENT_CUSTOMIZATION);
+    } else {
+      newConfig = config;
+    }
 
-  //validating the i18n
-  config?.i18n && validatei18n(config.i18n);
+    //validating the components
+    newConfig?.components && validateComponents(newConfig.components);
 
-  //validating the lifecycle
-  //commented for v1 release
-  //config?.lifecycle && validateLifecycle(config?.lifecycle);
+    //validating the custom routes
+    config?.customRoutes && validateCustomRoutes(config.customRoutes);
 
-  return config;
+    //validating the i18n
+    newConfig?.i18n && validatei18n(newConfig.i18n);
+
+    //validating the lifecycle
+    config?.lifecycle && validateLifecycle(config?.lifecycle);
+  } catch (error) {
+    logger.error(
+      LogSource.CustomizationAPI,
+      'Log',
+      'Error on applying the customization',
+      error,
+    );
+  }
+
+  return newConfig;
 };
+
+/**
+ * Performs a deep merge of objects and returns new object. Does not modify
+ * objects (immutable) and merges arrays via concatenation.
+ *
+ * @param {...object} objects - Objects to merge
+ * @returns {object} New object with merged key/values
+ */
+function mergeDeep(...objects) {
+  const isObject = obj => obj && typeof obj === 'object';
+
+  return objects.reduce((prev, obj) => {
+    Object.keys(obj).forEach(key => {
+      const pVal = prev[key];
+      const oVal = obj[key];
+
+      if (Array.isArray(pVal) && Array.isArray(oVal)) {
+        prev[key] = pVal.concat(...oVal);
+      } else if (isObject(pVal) && isObject(oVal)) {
+        prev[key] = mergeDeep(pVal, oVal);
+      } else {
+        prev[key] = oVal;
+      }
+    });
+
+    return prev;
+  }, {});
+}

package/template/customization-api/sub-components.ts

@@ -87,3 +87,7 @@ export {default as CaptionPanel} from '../src/subComponents/caption/CaptionConta
 export {default as VBPreview} from '../src/components/virtual-background/VideoPreview';
 export {default as Toast} from '../react-native-toast-message';
 export {default as CaptionContainer} from '../src/subComponents/caption/CaptionContainer';
+export {default as Loading} from '../src/subComponents/Loading';
+export {default as UserAvatar} from '../src/atoms/UserAvatar';
+export {default as Card} from '../src/atoms/Card';
+export {default as ThemeConfig} from '../src/theme';

package/template/customization-api/temp.ts

@@ -2,6 +2,7 @@
 
 import VideoRenderer from '../src/pages/video-call/VideoRenderer';
 import {DispatchContext} from '../agora-rn-uikit';
+import IconButton from '../src/atoms/IconButton';
 import WhiteboardView from '../src/components/whiteboard/WhiteboardView';
 import {
   useWhiteboard,
@@ -27,6 +28,7 @@ import useEndCall from '../src/utils/useEndCall';
 export {
   VideoRenderer,
   DispatchContext,
+  IconButton,
   WhiteboardView,
   whiteboardContext,
   useVideoCall,

package/template/customization-api/typeDefinition.ts

@@ -100,7 +100,7 @@ export type ComponentsInterface = {
   precall?: PreCallInterface;
   preferenceWrapper?: React.ComponentType;
   //precall?: React.ComponentType;
-  //create?: React.ComponentType;
+  create?: React.ComponentType;
   //share?: React.ComponentType;
   //join?: React.ComponentType;
   videoCall?: VideoCallInterface;
@@ -114,6 +114,7 @@ export interface CustomRoutesInterface {
   isPrivateRoute?: boolean;
   routeProps?: object;
   failureRedirectTo?: string;
+  isTopLevelRoute?: boolean;
 }
 
 export type CustomHookType = () => () => Promise<void>;

package/template/customization-api/utils.ts

@@ -25,7 +25,7 @@ export {default as useIsVideoEnabled} from '../src/utils/useIsVideoEnabled';
 export {default as useActiveSpeaker} from '../src/utils/useActiveSpeaker';
 
 //hooks used for navigation
-export {useHistory, useParams} from '../src/components/Router';
+export {useHistory, useParams, Redirect} from '../src/components/Router';
 
 //export common function
 export {
@@ -34,7 +34,11 @@ export {
   isAndroid,
   isDesktop,
   calculatePosition,
+  isWebInternal,
+  trimText,
+  BREAKPOINTS,
 } from '../src/utils/common';
+export {default as isSDK} from '../src/utils/isSDK';
 export {default as isMobileOrTablet} from '../src/utils/isMobileOrTablet';
 export {useLocalUid} from '../agora-rn-uikit';
 export {default as useLocalAudio} from '../src/utils/useLocalAudio';
@@ -49,4 +53,5 @@ export {useFullScreen} from '../src/utils/useFullScreen';
 export {useHideShareTitle} from '../src/utils/useHideShareTile';
 export {useActionSheet} from '../src/utils/useActionSheet';
 export {default as PlatformWrapper} from '../src/utils/PlatformWrapper';
+export {useSpotlight} from '../src/utils/useSpotlight';
 export {useActiveUids} from '../src/utils/useActiveUids';

package/template/defaultConfig.js

@@ -76,12 +76,14 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.0.35',
-  CORE_VERSION: '4.0.35',
+  CLI_VERSION: '3.1.0-beta-2',
+  CORE_VERSION: '4.1.0-beta-2',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,
+  ENABLE_SPOTLIGHT: false,
   AUTO_CONNECT_RTM: false,
+  ENABLE_CONVERSATIONAL_AI: false,
 };
 
 module.exports = DefaultConfig;

package/template/global.d.ts

@@ -168,7 +168,9 @@ interface ConfigInterface {
   DISABLE_LANDSCAPE_MODE: boolean;
   STT_AUTO_START: boolean;
   CLOUD_RECORDING_AUTO_START: boolean;
+  ENABLE_SPOTLIGHT: boolean;
   AUTO_CONNECT_RTM: boolean;
+  ENABLE_CONVERSATIONAL_AI: boolean;
 }
 declare var $config: ConfigInterface;
 declare module 'customization' {

package/template/src/AppRoutes.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useEffect} from 'react';
+import React from 'react';
 import Join from './pages/Join';
 import VideoCall from './pages/VideoCall';
 import Create from './pages/Create';
@@ -22,18 +22,24 @@ import {CUSTOM_ROUTES_PREFIX, CustomRoutesInterface} from 'customization-api';
 import PrivateRoute from './components/PrivateRoute';
 import RecordingBotRoute from './components/recording-bot/RecordingBotRoute';
 import {useIsRecordingBot} from './subComponents/recording/useIsRecordingBot';
-import {LogSource, logger} from './logger/AppBuilderLogger';
 import {isValidReactComponent} from './utils/common';
+import ErrorBoundary from './components/ErrorBoundary';
+import {ErrorBoundaryFallback} from './components/ErrorBoundaryFallback';
 
 function VideoCallWrapper(props) {
   const {isRecordingBot} = useIsRecordingBot();
+  const ErrorBoundaryFallbackComponent = <ErrorBoundaryFallback />;
   return isRecordingBot ? (
     <RecordingBotRoute history={props.history}>
-      <VideoCall />
+      <ErrorBoundary fallback={ErrorBoundaryFallbackComponent}>
+        <VideoCall />
+      </ErrorBoundary>
     </RecordingBotRoute>
   ) : (
     <AuthRoute>
-      <VideoCall />
+      <ErrorBoundary fallback={ErrorBoundaryFallbackComponent}>
+        <VideoCall />
+      </ErrorBoundary>
     </AuthRoute>
   );
 }
@@ -52,7 +58,11 @@ function AppRoutes() {
           let RouteComponent = item?.isPrivateRoute ? PrivateRoute : Route;
           return (
             <RouteComponent
-              path={CUSTOM_ROUTES_PREFIX + item.path}
+              path={
+                item.isTopLevelRoute
+                  ? item.path
+                  : CUSTOM_ROUTES_PREFIX + item.path
+              }
               exact={item.exact}
               key={i}
               failureRedirectTo={

package/template/src/ai-agent/components/AgentControls/AgentContext.tsx

@@ -0,0 +1,163 @@
+import React, {createContext, useState} from 'react';
+import {AIAgentState, AgentState} from './const';
+import {UidType} from 'customization-api';
+
+export interface ChatItem {
+  id: string;
+  uid: UidType;
+  text: string;
+  isFinal: boolean;
+  time: number;
+  isSelf: boolean;
+}
+
+export interface AgentContextInterface {
+  agentConnectionState: AIAgentState;
+  setAgentConnectionState: (agentState: AIAgentState) => void;
+  agentAuthToken: string | null;
+  setAgentAuthToken: (token: string | null) => void;
+  isSubscribedForStreams: boolean;
+  setIsSubscribedForStreams: (state: boolean) => void;
+  agentUID: UidType | null;
+  setAgentUID: (uid: UidType | null) => void;
+  chatItems: ChatItem[];
+  addChatItem: (newItem: ChatItem) => void;
+}
+
+export const AgentContext = createContext<AgentContextInterface>({
+  agentConnectionState: AgentState.NOT_CONNECTED,
+  setAgentConnectionState: () => {},
+  agentAuthToken: null,
+  setAgentAuthToken: () => {},
+  isSubscribedForStreams: false,
+  setIsSubscribedForStreams: () => {},
+  agentUID: null,
+  setAgentUID: () => {},
+  chatItems: [],
+  addChatItem: () => {}, // Default no-op
+});
+
+/**
+ * Helper function to find the correct insertion index for a new item using binary search.
+ * Ensures that the array remains sorted by the `time` property after insertion.
+ *
+ * @param array The array to search within.
+ * @param time The `time` value of the new item to insert.
+ * @returns The index where the new item should be inserted.
+ */
+const findInsertionIndex = (array: ChatItem[], time: number): number => {
+  let low = 0;
+  let high = array.length;
+
+  // Perform binary search to find the insertion index
+  while (low < high) {
+    const mid = Math.floor((low + high) / 2);
+
+    // If the middle item's time is less than the new time, search the upper half
+    if (array[mid].time < time) {
+      low = mid + 1;
+    } else {
+      // Otherwise, search the lower half
+      high = mid;
+    }
+  }
+
+  return low; // The correct index for insertion
+};
+
+export const AgentProvider: React.FC<{children: React.ReactNode}> = ({
+  children,
+}) => {
+  const [agentConnectionState, setAgentConnectionState] =
+    useState<AIAgentState>(AgentState.NOT_CONNECTED);
+  const [agentAuthToken, setAgentAuthToken] = useState<string | null>(null);
+  const [agentUID, setAgentUID] = useState<UidType | null>(null);
+  const [isSubscribedForStreams, setIsSubscribedForStreams] = useState(false);
+  const [chatItems, setChatItems] = useState<ChatItem[]>([]);
+
+  /**
+   * Adds a new chat item to the chat state while ensuring:
+   * - Outdated messages are discarded.
+   * - Non-finalized messages are updated if a newer message is received.
+   * - Finalized messages are added without duplication.
+   * - Chat items remain sorted by their `time` property.
+   *
+   * @param newItem The new chat item to add.
+   */
+  const addChatItem = (newItem: ChatItem) => {
+    setChatItems(prevItems => {
+      // Find the index of the last finalized chat item for the same user
+      // Finalized messages are typically considered "complete" and should not be updated by non-final messages
+      const LastFinalIndex = prevItems.findLastIndex(
+        el => el.uid === newItem.uid && el.isFinal,
+      );
+
+      // Find the index of the last non-finalized chat item for the same user
+      // Non-finalized messages represent "in-progress" messages that can be updated or replaced
+      const LastNonFinalIndex = prevItems.findLastIndex(
+        el => el.uid === newItem.uid && !el.isFinal,
+      );
+
+      // Retrieve the actual items for the indices found above
+      const LastFinalItem =
+        LastFinalIndex !== -1 ? prevItems[LastFinalIndex] : null;
+      const LastNonFinalItem =
+        LastNonFinalIndex !== -1 ? prevItems[LastNonFinalIndex] : null;
+
+      // If the new message's timestamp is older than or equal to the last finalized message,
+      // it is considered outdated and discarded to prevent unnecessary overwrites.
+      if (LastFinalItem && newItem.time <= LastFinalItem.time) {
+        console.log(
+          '[AgentProvider] addChatItem - Discarded outdated message:',
+          newItem,
+        );
+        return prevItems; // Return the previous state without changes
+      }
+
+      // Create a new copy of the current chat items to maintain immutability
+      let updatedItems = [...prevItems];
+
+      // If there is a non-finalized message for the same user, replace it with the new message
+      if (LastNonFinalItem) {
+        console.log(
+          '[AgentProvider] addChatItem - Updating non-finalized message:',
+          newItem,
+        );
+        updatedItems[LastNonFinalIndex] = newItem; // Replace the non-finalized message
+      } else {
+        // If no non-finalized message exists, the new message is added to the array
+        console.log(
+          '[AgentProvider] addChatItem - Adding new message:',
+          newItem,
+        );
+
+        // Use binary search to find the correct insertion index for the new message
+        // This ensures the array remains sorted by the `time` property
+        const insertIndex = findInsertionIndex(updatedItems, newItem.time);
+
+        // Insert the new message at the correct position to maintain chronological order
+        updatedItems.splice(insertIndex, 0, newItem);
+      }
+
+      // Return the updated array, which will replace the previous state
+      return updatedItems;
+    });
+  };
+
+  const value = {
+    agentConnectionState,
+    setAgentConnectionState,
+    agentAuthToken,
+    setAgentAuthToken,
+    isSubscribedForStreams,
+    setIsSubscribedForStreams,
+    agentUID,
+    setAgentUID,
+    chatItems,
+    addChatItem, // Expose the function in the context
+  };
+
+  return (
+    <AgentContext.Provider value={value}>{children}</AgentContext.Provider>
+  );
+};

package/template/src/ai-agent/components/AgentControls/Vector.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M10.496 16.7876C9.35026 16.7876 8.23023 16.4482 7.27757 15.8122C6.3249 15.1763 5.58239 14.2724 5.14393 13.2148C4.70546 12.1573 4.59074 10.9936 4.81427 9.87089C5.03779 8.7482 5.58953 7.71694 6.39971 6.90753C7.20988 6.09811 8.24211 5.54689 9.36585 5.32358C10.4896 5.10026 11.6544 5.21487 12.7129 5.65292C13.7715 6.09098 14.6762 6.83279 15.3128 7.78456C15.9493 8.73633 16.2891 9.85531 16.2891 11C16.2875 12.5345 15.6767 14.0057 14.5906 15.0908C13.5045 16.1758 12.032 16.7861 10.496 16.7876ZM17.2419 2.56827L17.1536 2.68579C17.1049 2.75071 17.0128 2.76384 16.9478 2.71517L16.836 2.62703C15.5071 1.6239 13.9584 0.950884 12.3178 0.663529C10.6773 0.376175 8.99179 0.482718 7.40054 0.974366C5.80929 1.46601 4.35788 2.32867 3.16609 3.49115C1.97429 4.65362 1.07629 6.08258 0.546187 7.6601C0.0160829 9.23762 -0.130923 10.9185 0.117301 12.5639C0.365526 14.2094 1.00186 15.7723 1.9738 17.1237C2.94573 18.475 4.2254 19.5761 5.70719 20.336C7.18898 21.0959 8.83041 21.4929 10.496 21.4941C12.7869 21.5007 15.0158 20.7509 16.836 19.3612L16.9478 19.279C17.0117 19.2279 17.106 19.2418 17.1536 19.3083L17.2419 19.4259C17.6382 19.9723 18.1411 20.433 18.7202 20.7804C19.2993 21.1277 19.9428 21.3545 20.6118 21.4471C20.8172 21.4751 21 21.3155 21 21.1082V0.89175C21 0.684521 20.8172 0.524908 20.6118 0.552882C19.9433 0.645086 19.3003 0.871101 18.7212 1.2174C18.1422 1.56369 17.639 2.02315 17.2419 2.56827Z" fill="#111111"/>
+</svg>