Ultron SDK

Ultron SDK for integrating AI features into your web application.

Installation

To install the package, use npm:

npm install @metabrix_labs/ultronai

Methods Documentation

initUltronAI(divId: string, iframeLink: string): void

Initializes the Ultron AI by embedding an iframe into the specified div.

• divId: The ID of the div where the iframe should be embedded.
• iframeLink: The URL of the iframe content.

sendMessageContent(iframe: HTMLIFrameElement, message: string, speak: boolean, lipsync: boolean, url: string): void

Sends a text message to the iframe.

• iframe: The iframe element.
• message: The text message to send.
• speak: Whether the message should be spoken.
• lipsync: Whether lipsync should be enabled.
• url: The URL of the iframe content.

sendSubmitEvent(iframe: HTMLIFrameElement, url: string): void

Sends a submit event to the iframe.

• iframe: The iframe element.
• url: The URL of the iframe content.

sendAudioMessage(iframe: HTMLIFrameElement, audioData: string, url: string): void

Sends an audio message to the iframe.

• iframe: The iframe element.
• audioData: The audio data to send.
• url: The URL of the iframe content.

setupMessageListener(iframe: HTMLIFrameElement, iframeLink: string, callback: (data: any) => void): void

Sets up a message listener to receive messages from the iframe.

• iframe: The iframe element.
• iframeLink: The URL of the iframe content.
• callback: The callback function to handle the received messages.

Iframe Messages

When using the package, you can receive the following messages from the iframe:

1. {type: "avatarLoaded"}

   • Indicates that the avatar has been successfully loaded.

2. {type: "error", message: "Unauthorized request: Session not found", status: 401}

   • Indicates that the session was not found and the request is unauthorized.

3. {type: "error", message: "Unauthorized request: Session expired", status: 401}

   • Indicates that the session has expired and the request is unauthorized.

Usage

To use the package, import the necessary functions in your TypeScript or JavaScript file:

import { initUltronAI, sendMessageContent, sendSubmitEvent, sendAudioMessage, setupMessageListener } from '@metabrix_labs/ultronai-sdk';

Initializing Ultron AI

To initialize the Ultron AI, call the initUltronAI function with the ID of the div where the iframe should be embedded and the link to the iframe content:

const sessionId = 'created_with_ultron_api'; // please refer docs.ultronai.me
initUltronAI('metabrix-labs', `https://app.ultronai.me/chat/?avatarId=xxxx&sessionId=${sessionId}`);

Sending Messages

You can send messages to the iframe using the provided functions:

const iframe = document.getElementById('metabrix-labs').querySelector('iframe');

// Send a text message
sendMessageContent(iframe, 'Hello, Ultron!', true, false, 'https://app.ultronai.me');

// Send a submit event
sendSubmitEvent(iframe, 'https://app.ultronai.me');

Example Usage

import { useEffect, useState, useRef } from "react";
import "./App.css";
import {
  initUltronAI,
  sendMessageContent,
  sendSubmitEvent,
  sendAudioMessage,
  setupMessageListener
} from "@metabrix_labs/ultronai-sdk";

function App() {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState("");
  const [audioData, setAudioData] = useState<string | null>(null);
  const [iframeMessage, setIframeMessage] = useState<any>(null); 
  const iframeRef = useRef<HTMLIFrameElement | null>(null);

  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const sessionId =
      urlParams.get("sessionId")
    console.log("sessionId:", sessionId);

    const timer = setTimeout(() => {
      initUltronAI(
        "metabrix",
        `https://app.ultronai.me/chat/?avatarId=xxxx&sessionId=${sessionId}`
      );
      iframeRef.current = document.querySelector("#metabrix iframe");

      if (iframeRef.current) {
        setupMessageListener(
          iframeRef.current,
          iframeRef.current.src,
          setIframeMessage
        ); 
      }
    }, 2000);

    return () => clearTimeout(timer);
  }, []);

  const handleSendMessage = () => {
    if (iframeRef.current) {
      const userInteracted =
        document.body.classList.contains("user-interacted");
      if (userInteracted) {
        const finalMessage =
          message || "Hello, this is a metabrix test message";
        sendMessageContent(
          iframeRef.current,
          finalMessage,
          true,
          true,
          iframeRef.current.src
        );
      } else {
        alert("Please interact with the page first.");
      }
    }
  };

  const handleSendSubmitEvent = () => {
    if (iframeRef.current) {
      sendSubmitEvent(iframeRef.current, iframeRef.current.src);
    }
  };

  const handleSendAudioMessage = () => {
    if (iframeRef.current && audioData) {
      sendAudioMessage(iframeRef.current, audioData, iframeRef.current.src);
    } else {
      alert("Please upload an audio file first.");
    }
  };

  const handleAudioUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const audioData = e.target?.result as string;
        setAudioData(audioData);
        if (iframeRef.current) {
          sendAudioMessage(iframeRef.current, audioData, iframeRef.current.src);
        }
      };
      reader.readAsDataURL(file);
    }
  };

  useEffect(() => {
    const handleUserInteraction = () => {
      document.body.classList.add("user-interacted");
    };

    document.addEventListener("click", handleUserInteraction);
    document.addEventListener("keydown", handleUserInteraction);

    return () => {
      document.removeEventListener("click", handleUserInteraction);
      document.removeEventListener("keydown", handleUserInteraction);
    };
  }, []);

  useEffect(() => {
    handleSendMessage();
  }, [message]);

  useEffect(() => {
    console.log("iframeMessage", iframeMessage);
  }, [iframeMessage]);

  return (
    <div className="app-container">
      <h2>AI Interviewer - SDK demo</h2>
      <div className="iframe-container">
        <div id="metabrix" className="iframe-wrapper"></div>
      </div>
      <div className="controls-container">
        <input
          type="text"
          placeholder="Enter your message"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          className="input-field"
        />
        <input
          type="file"
          accept="audio/*"
          onChange={handleAudioUpload}
          className="input-field"
        />
        <button onClick={handleSendSubmitEvent} className="button">
          Send Submit Event
        </button>
      </div>
      {iframeMessage && (
        <div className="message-container">
          <h3>Message from iframe:</h3>
          <pre>{JSON.stringify(iframeMessage, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}

export default App;