Overview

<div
  data-chatbot-id="YOUR_ASSISTANT_ID"
  data-chatbot-mode="popover"
  data-hide-header="true"
  data-button-color="#007bff"
  data-icon-color="#fff"
></div>

const chatbotInstance = tai.getInstance("YOUR_ASSISTANT_ID");

window.addEventListener("teamAIChatbotReady", function () {
  const chatbotInstance = tai.getInstance("YOUR_ASSISTANT_ID");
  // Your code here
});

chatbotInstance.updateContext({ userEmail: "user@example.com" });

const currentContext = chatbotInstance.getContext();

const conversation = await chatbotInstance.getConversation();

interface MessageEntry {
  role: "user" | "assistant"; // Who sent the message
  content: string; // The message content
  timestamp: number; // Unix timestamp in milliseconds
}

interface ConversationData {
  assistantId: string; // The ID of the assistant
  messages: MessageEntry[]; // Array of messages in chronological order
}

window.addEventListener("teamAIChatbotReady", async function () {
  const chatbotInstance = tai.getInstance("YOUR_ASSISTANT_ID");

  // Wait until chatbot is fully ready
  await chatbotInstance.ready();

  try {
    // Get the conversation history
    const conversation = await chatbotInstance.getConversation();

    console.log(`Retrieved ${conversation.messages.length} messages`);

    // Display or process the messages
    conversation.messages.forEach((message) => {
      console.log(`[${message.role}]: ${message.content}`);
      console.log(`Timestamp: ${new Date(message.timestamp).toLocaleString()}`);
    });
  } catch (error) {
    console.error("Failed to retrieve conversation:", error);
  }
});

await chatbotInstance.resetConversation();

window.addEventListener("teamAIChatbotReady", function () {
  const chatbot = tai.getInstance("YOUR_ASSISTANT_ID");

  // Create a reset button
  const resetButton = document.createElement("button");
  resetButton.textContent = "Start New Conversation";
  resetButton.addEventListener("click", async () => {
    try {
      await chatbot.resetConversation();
      console.log("Conversation reset successfully");
      // Optionally send a welcome message
      chatbot.sendMessage("Hi! How can I help you today?");
    } catch (error) {
      console.error("Failed to reset conversation:", error);
    }
  });

  // Add button to your page
  document.getElementById("chatbot-controls").appendChild(resetButton);
});

chatbotInstance.registerTool({
  name: "getCurrentTime",
  description: "Gets the current time in the user's timezone",
  parameters: {
    format: {
      type: "string",
      description: "Format to display the time (optional)",
    },
  },
  execute: (params) => {
    const now = new Date();
    return {
      time: now.toLocaleTimeString(),
      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
    };
  },
});

chatbotInstance.unregisterTool("getCurrentTime");

const registeredTools = chatbotInstance.getRegisteredTools();

chatbotInstance.onAgentHandoff((data) => {
  console.log(`Task delegated to ${data.targetAgentName}: ${data.task}`);
  console.log(`Reason: ${data.reason}`);

  // Available data:
  // - targetAgentId: string
  // - targetAgentName: string
  // - task: string
  // - reason: string
});

chatbotInstance.onSpecialistReturn((data) => {
  console.log(`Task completed: ${data.completedTask}`);
  console.log(`Results: ${data.taskResults}`);

  // Available data:
  // - taskResults: string
  // - taskSummary: string
  // - additionalContext?: string
  // - completedTask: string
});

window.addEventListener("teamAIChatbotReady", function () {
  const chatbotInstance = tai.getInstance("YOUR_ASSISTANT_ID");

  // Listen for agent handoff events
  chatbotInstance.onAgentHandoff((data) => {
    console.log("🎯 Agent handoff received:", data);

    // Log the handoff with full details
    console.log(`🔄 Agent Handoff: ${data.targetAgentName} taking over`);
    console.log(`📋 Task: ${data.task}`);
    console.log(`🎯 Reason: ${data.reason}`);

    // Show loading indicator for specialist work
    showSpecialistWorkingIndicator(data.targetAgentName, data.task);

    // Update UI to show current agent
    updateCurrentAgent(data.targetAgentId, data.targetAgentName);
  });

  // Listen for specialist completion events
  chatbotInstance.onSpecialistReturn((data) => {
    console.log("🔄 Specialist return received:", data);

    // Log the completion
    console.log(`✅ Task Completed: ${data.completedTask}`);
    console.log(`📊 Results: ${data.taskResults}`);
    console.log(`🔄 Returning to: Main Assistant`);

    // Hide loading indicator
    hideSpecialistWorkingIndicator();

    // Return to main agent
    updateCurrentAgent("main", "Main Assistant");
  });

  console.log("🤖 Chatbot initialized and multi-agent events connected");
});

function showSpecialistWorkingIndicator(specialistName, task) {
  // Remove any existing indicator first
  hideSpecialistWorkingIndicator();

  const indicator = document.createElement("div");
  indicator.id = "specialist-indicator";
  indicator.innerHTML = `🔄 <strong>${specialistName}</strong> is working on: ${task}`;
  indicator.style.cssText = `
    padding: 12px;
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    margin: 10px 0;
    font-size: 14px;
    color: #856404;
  `;

  // Add to your chatbot container with fallback to body
  const container =
    document.getElementById("chatbot-container") || document.body;
  container.appendChild(indicator);
}

function hideSpecialistWorkingIndicator() {
  const indicator = document.getElementById("specialist-indicator");
  if (indicator) {
    indicator.remove();
  }
}

function updateCurrentAgent(agentId, agentName) {
  const currentAgentElement = document.getElementById("current-agent");
  if (currentAgentElement) {
    currentAgentElement.textContent = agentName;
  }
  console.log(`🤖 Current Agent: ${agentName}`);
}

chatbotInstance.uploadBlob(myFile: Blob): Promise<UploadResponse>;

window.addEventListener("teamAIChatbotReady", function () {
  console.log("The TeamAI Chatbot is ready!");

  const chatbotInstance = tai.getInstance("YOUR_ASSISTANT_ID");

  // Update context with user's email and name
  chatbotInstance.updateContext({
    userEmail: "user@example.com",
    userName: "John Doe",
  });
});

// Create CSV content on the fly (or fetch from server)
const csvContent = `name,age,city
John Smith,32,New York
Sarah Johnson,28,San Francisco`;

// Convert CSV string to a File object
const csvFile = new File([csvContent], "dummy.csv", { type: "text/csv" });

// Upload the file so the chatbot can access it
chatbotInstance
  .uploadBlob(csvFile)
  .then((uploadResponse) => {
    console.log("Upload successful:", uploadResponse);
    // After upload, you can instruct your chatbot:
    chatbotInstance.sendMessage(
      "Hi, please analyze the CSV data you just received."
    );
  })
  .catch((error) => {
    console.error("Upload failed:", error);
  });

window.addEventListener("teamAIChatbotReady", function () {
  const chatbotInstance = tai.getInstance("YOUR_ASSISTANT_ID");

  // Register a tool to get user's location (with permission)
  chatbotInstance.registerTool({
    name: "getUserLocation",
    description: "Gets the user's current location (requires permission)",
    parameters: {},
    execute: async () => {
      return new Promise((resolve, reject) => {
        if (!navigator.geolocation) {
          reject({ error: "Geolocation not supported by this browser" });
          return;
        }

        navigator.geolocation.getCurrentPosition(
          (position) => {
            resolve({
              latitude: position.coords.latitude,
              longitude: position.coords.longitude,
              accuracy: position.coords.accuracy,
            });
          },
          (error) => {
            reject({ error: error.message });
          }
        );
      });
    },
  });

  // Register a tool to get data from your application
  chatbotInstance.registerTool({
    name: "getProductDetails",
    description: "Gets details about a product by ID",
    parameters: {
      productId: {
        type: "string",
        description: "The ID of the product to look up",
      },
    },
    execute: async (params) => {
      try {
        // This is where you would call your API or access your app state
        const response = await fetch(`/api/products/${params.productId}`);
        const product = await response.json();
        return product;
      } catch (error) {
        return { error: "Failed to fetch product details" };
      }
    },
  });

  // Let the chatbot know it can use these tools
  chatbotInstance.sendMessage(
    "Hi, I'm ready to help with product information or location-based services."
  );
});

https://example.com?teamAIDebug=true