Merge pull request #107 from anam-org/alpha

fix: prevent duplicate audio stream issue

Author: ao-anam

README.md

@@ -34,14 +34,19 @@ npm install @anam-ai/js-sdk
 
 ## Local development
 
-The quickest way to start testing the SDK is to use your API key directly with our SDK and [choose a default persona](#listing-personas) from our predefined examples.
+The quickest way to start testing the SDK is to use your API key directly with our SDK and the example persona config shown below.
 To use the SDK you first need to create an instance of `AnamClient`. For local development you can do this using the `unsafe_createClientWithApiKey` method.
 
 ```typescript
 import { unsafe_createClientWithApiKey } from '@anam-ai/js-sdk';
 
 const anamClient = unsafe_createClientWithApiKey('your-api-key', {
-  personaId: 'chosen-persona-id',
+  name: 'Cara',
+  avatarId: '30fa96d0-26c4-4e55-94a0-517025942e18',
+  voiceId: '6bfbe25a-979d-40f3-a92b-5394170af54b',
+  brainType: 'ANAM_GPT_4O_MINI_V1',
+  systemPrompt:
+    "[STYLE] Reply in natural speech without formatting. Add pauses using '...' and very occasionally a disfluency. [PERSONALITY] You are Cara, a helpful assistant.",
 });
 ```
 
@@ -50,13 +55,10 @@ const anamClient = unsafe_createClientWithApiKey('your-api-key', {
 Once you have an instance of the Anam client initialised you can start a session by streaming to audio and video elements in the DOM.
 
 ```typescript
-await anamClient.streamToVideoAndAudioElements(
-  'video-element-id',
-  'audio-element-id',
-);
+await anamClient.streamToVideoElement('video-element-id');
 ```
 
-This will start a new session using the pre-configured persona id and start streaming video and audio to the elements in the DOM with the matching element ids.
+This will start a new session using the pre-configured persona id and start streaming video element in the DOM with the matching element id.
 
 To stop a session use the `stopStreaming` method.
 
@@ -79,13 +81,12 @@ const response = await fetch(`https://api.anam.ai/v1/auth/session-token`, {
   },
   body: JSON.stringify({
     personaConfig: {
-      name: 'Test Assistant',
-      personaPreset: 'eva',
+      name: 'Cara',
+      avatarId: '30fa96d0-26c4-4e55-94a0-517025942e18',
+      voiceId: '6bfbe25a-979d-40f3-a92b-5394170af54b',
       brainType: 'ANAM_GPT_4O_MINI_V1',
-      personality: 'You are a helpful and friendly AI assistant.',
       systemPrompt:
-        'You are an AI assistant focused on helping with technical questions.',
-      fillerPhrases: ['Let me think about that...'],
+        "[STYLE] Reply in natural speech without formatting. Add pauses using '...' and very occasionally a disfluency. [PERSONALITY] You are Cara, a helpful assistant.",
     },
   }),
 });

src/AnamClient.ts

@@ -4,6 +4,7 @@ import {
   DEFAULT_ANAM_METRICS_BASE_URL,
   ErrorCode,
   setErrorMetricsBaseUrl,
+  setCurrentSessionInfo,
 } from './lib/ClientError';
 import {
   CoreApiRestClient,
@@ -34,6 +35,7 @@ export default class AnamClient {
   private inputAudioState: InputAudioState = { isMuted: false };
 
   private sessionId: string | null = null;
+  private organizationId: string | null = null;
 
   private streamingClient: StreamingClient | null = null;
   private apiClient: CoreApiRestClient;
@@ -111,6 +113,9 @@ export default class AnamClient {
     // Validate persona configuration based on session token
     if (sessionToken) {
       const decodedToken = this.decodeJwt(sessionToken);
+      this.organizationId = decodedToken.accountId;
+      setCurrentSessionInfo(this.sessionId, this.organizationId);
+
       const tokenType = decodedToken.type?.toLowerCase();
 
       if (tokenType === 'legacy') {
@@ -218,11 +223,15 @@ export default class AnamClient {
         'Failed to initialize streaming client',
         ErrorCode.CLIENT_ERROR_CODE_SERVER_ERROR,
         500,
-        { cause: error instanceof Error ? error.message : String(error) },
+        {
+          cause: error instanceof Error ? error.message : String(error),
+          sessionId,
+        },
       );
     }
 
     this.sessionId = sessionId;
+    setCurrentSessionInfo(this.sessionId, this.organizationId);
     return sessionId;
   }
 
@@ -286,10 +295,23 @@ export default class AnamClient {
     });
   }
 
+  /**
+   * @deprecated This method is deprecated. Please use streamToVideoElement instead.
+   */
   public async streamToVideoAndAudioElements(
     videoElementId: string,
     audioElementId: string,
     userProvidedAudioStream?: MediaStream,
+  ): Promise<void> {
+    console.warn(
+      'AnamClient: streamToVideoAndAudioElements is deprecated. To avoid possible audio issues, please use streamToVideoElement instead.',
+    );
+    await this.streamToVideoElement(videoElementId, userProvidedAudioStream);
+  }
+
+  public async streamToVideoElement(
+    videoElementId: string,
+    userProvidedAudioStream?: MediaStream,
   ): Promise<void> {
     if (this.clientOptions?.disableInputAudio && userProvidedAudioStream) {
       console.warn(
@@ -309,6 +331,7 @@ export default class AnamClient {
         500,
         {
           cause: error instanceof Error ? error.message : String(error),
+          sessionId: this.sessionId,
         },
       );
     }
@@ -321,10 +344,7 @@ export default class AnamClient {
       throw new Error('Failed to stream: streaming client is not available');
     }
 
-    this.streamingClient.setMediaStreamTargetsById(
-      videoElementId,
-      audioElementId,
-    );
+    this.streamingClient.setMediaStreamTargetById(videoElementId);
     this.streamingClient.startConnection();
   }
 
@@ -356,6 +376,7 @@ export default class AnamClient {
       this.streamingClient.stopConnection();
       this.streamingClient = null;
       this.sessionId = null;
+      setCurrentSessionInfo(null, this.organizationId);
       this._isStreaming = false;
     }
   }

src/lib/ClientError.ts

@@ -17,6 +17,9 @@ export const DEFAULT_ANAM_API_VERSION = '/v1';
 let anamCurrentBaseUrl = DEFAULT_ANAM_METRICS_BASE_URL;
 let anamCurrentApiVersion = DEFAULT_ANAM_API_VERSION;
 
+let currentSessionId: string | null = null;
+let currentOrganizationId: string | null = null;
+
 export const setErrorMetricsBaseUrl = (
   baseUrl: string,
   apiVersion: string = DEFAULT_ANAM_API_VERSION,
@@ -25,12 +28,33 @@ export const setErrorMetricsBaseUrl = (
   anamCurrentApiVersion = apiVersion;
 };
 
+export const setCurrentSessionInfo = (
+  sessionId: string | null,
+  organizationId: string | null,
+) => {
+  currentSessionId = sessionId;
+  currentOrganizationId = organizationId;
+};
+
 export const sendErrorMetric = async (
   name: string,
   value: string,
   tags?: Record<string, string | number>,
 ) => {
   try {
+    const metricTags: Record<string, string | number> = {
+      ...CLIENT_METADATA,
+      ...tags,
+    };
+
+    // Add session and organization IDs if available
+    if (currentSessionId) {
+      metricTags.sessionId = currentSessionId;
+    }
+    if (currentOrganizationId) {
+      metricTags.organizationId = currentOrganizationId;
+    }
+
     await fetch(
       `${anamCurrentBaseUrl}${anamCurrentApiVersion}/metrics/client`,
       {
@@ -41,10 +65,7 @@ export const sendErrorMetric = async (
         body: JSON.stringify({
           name,
           value,
-          tags: {
-            ...CLIENT_METADATA,
-            ...tags,
-          },
+          tags: metricTags,
         }),
       },
     );

src/modules/StreamingClient.ts

@@ -34,7 +34,6 @@ export class StreamingClient {
   private dataChannel: RTCDataChannel | null = null;
   private videoElement: HTMLVideoElement | null = null;
   private videoStream: MediaStream | null = null;
-  private audioElement: HTMLAudioElement | null = null;
   private audioStream: MediaStream | null = null;
   private inputAudioState: InputAudioState = { isMuted: false };
   private audioDeviceId: string | undefined;
@@ -155,10 +154,7 @@ export class StreamingClient {
     }
   }
 
-  public setMediaStreamTargetsById(
-    videoElementId: string,
-    audioElementId: string,
-  ) {
+  public setMediaStreamTargetById(videoElementId: string) {
     // set up streaming targets
     if (videoElementId) {
       const videoElement = document.getElementById(videoElementId);
@@ -169,15 +165,6 @@ export class StreamingClient {
       }
       this.videoElement = videoElement as HTMLVideoElement;
     }
-    if (audioElementId) {
-      const audioElement = document.getElementById(audioElementId);
-      if (!audioElement) {
-        throw new Error(
-          `StreamingClient: audio element with id ${audioElementId} not found`,
-        );
-      }
-      this.audioElement = audioElement as HTMLAudioElement;
-    }
   }
 
   public startConnection() {
@@ -400,9 +387,6 @@ export class StreamingClient {
         AnamEvent.AUDIO_STREAM_STARTED,
         this.audioStream,
       );
-      if (this.audioElement) {
-        this.audioElement.srcObject = this.audioStream;
-      }
     }
   }
   /**