avin-ai 0.1.0

package/dist/avin-ai.es.js

@@ -0,0 +1,575 @@
+var u = Object.defineProperty;
+var b = (a, e, t) => e in a ? u(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
+var r = (a, e, t) => b(a, typeof e != "symbol" ? e + "" : e, t);
+class f {
+  constructor(e) {
+    r(this, "serverUrl");
+    r(this, "agentId");
+    r(this, "callId");
+    r(this, "pc", null);
+    r(this, "dataChannel", null);
+    r(this, "audioElement", null);
+    r(this, "connected", !1);
+    r(this, "onConnected");
+    r(this, "onDisconnected");
+    r(this, "onError");
+    r(this, "onTranscription");
+    if (!e.serverUrl) throw new Error("serverUrl is required");
+    if (!e.agentId) throw new Error("agentId is required");
+    this.serverUrl = e.serverUrl.replace(/\/$/, ""), this.agentId = e.agentId, this.callId = this.generateCallId(), this.onConnected = e.onConnected || (() => {
+    }), this.onDisconnected = e.onDisconnected || (() => {
+    }), this.onError = e.onError || ((t) => console.error("[WebRTC]", t)), this.onTranscription = e.onTranscription || (() => {
+    });
+  }
+  async connect() {
+    console.log("🔵 [WebRTC] Starting connection...");
+    try {
+      this.pc = new RTCPeerConnection({
+        iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
+      }), this.pc.addTransceiver("video", { direction: "recvonly" });
+      const e = await navigator.mediaDevices.getUserMedia({
+        audio: {
+          echoCancellation: !0,
+          noiseSuppression: !0,
+          autoGainControl: !0,
+          sampleRate: { ideal: 16e3 },
+          channelCount: 1
+        }
+      });
+      console.log("🎤 [WebRTC] Microphone access granted"), e.getTracks().forEach((i) => {
+        this.pc && this.pc.addTrack(i, e);
+      }), this.dataChannel = this.pc.createDataChannel("control"), this.dataChannel.onopen = () => console.log("📡 [WebRTC] DataChannel opened"), this.dataChannel.onmessage = (i) => this.handleControlEvent(JSON.parse(i.data)), this.dataChannel.onerror = (i) => console.error("❌ [WebRTC] DataChannel error:", i), this.pc.ontrack = (i) => {
+        const s = i.track, c = i.streams[0];
+        console.log(`📥 [WebRTC] Received ${s.kind} track`), s.kind === "audio" && (console.log("🔊 [WebRTC] Setting up audio playback"), this.audioElement = new Audio(), this.audioElement.srcObject = c, this.audioElement.play().catch((l) => console.warn("Audio autoplay blocked:", l)), this.audioElement.onended = () => {
+          this.sendEvent("playedStream");
+        });
+      }, this.pc.onconnectionstatechange = () => {
+        var i, s, c, l, h;
+        console.log("🔄 [WebRTC] State:", (i = this.pc) == null ? void 0 : i.connectionState), ((s = this.pc) == null ? void 0 : s.connectionState) === "connected" ? (this.connected = !0, this.onConnected()) : (((c = this.pc) == null ? void 0 : c.connectionState) === "failed" || ((l = this.pc) == null ? void 0 : l.connectionState) === "disconnected" || ((h = this.pc) == null ? void 0 : h.connectionState) === "closed") && (this.connected = !1, this.onDisconnected());
+      };
+      const t = await this.pc.createOffer();
+      await this.pc.setLocalDescription(t), console.log("📝 [WebRTC] Created offer, waiting for ICE gathering..."), await this.waitForIceGathering(), console.log("🧊 [WebRTC] ICE gathering complete"), console.log("📤 [WebRTC] Sending offer via HTTP...");
+      const n = await fetch(`${this.serverUrl}/webrtc?agent=${this.agentId}_${this.callId}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          offer: this.pc.localDescription,
+          agentId: this.agentId,
+          callId: this.callId
+        })
+      });
+      if (!n.ok) {
+        const i = await n.json();
+        throw new Error(i.error || `HTTP ${n.status}`);
+      }
+      const { answer: o } = await n.json();
+      console.log("📥 [WebRTC] Received answer from server"), await this.pc.setRemoteDescription(o), console.log("✅ [WebRTC] Connection established!");
+    } catch (e) {
+      throw console.error("❌ [WebRTC] Connection failed:", e), this.onError(e.message || e), e;
+    }
+  }
+  waitForIceGathering() {
+    return new Promise((e) => {
+      if (!this.pc) return e();
+      if (this.pc.iceGatheringState === "complete")
+        e();
+      else {
+        const t = () => {
+          var n;
+          ((n = this.pc) == null ? void 0 : n.iceGatheringState) === "complete" && (this.pc.removeEventListener("icegatheringstatechange", t), e());
+        };
+        this.pc.addEventListener("icegatheringstatechange", t), setTimeout(() => {
+          var n;
+          (n = this.pc) == null || n.removeEventListener("icegatheringstatechange", t), console.warn("⚠️ [WebRTC] ICE gathering timeout, proceeding anyway"), e();
+        }, 5e3);
+      }
+    });
+  }
+  sendEvent(e, t = {}) {
+    var n;
+    ((n = this.dataChannel) == null ? void 0 : n.readyState) === "open" && this.dataChannel.send(JSON.stringify({ event: e, ...t }));
+  }
+  handleControlEvent(e) {
+    switch (e.event) {
+      case "clearAudio":
+        console.log("🛑 [WebRTC] Interrupt: stopping audio"), this.audioElement && (this.audioElement.pause(), this.audioElement.currentTime = 0);
+        break;
+      case "transcription":
+        console.log("📝 [WebRTC] Transcription:", e.text), e.text && this.onTranscription(e.text, !!e.isFinal);
+        break;
+      case "mark":
+        console.log("🏷️ [WebRTC] Mark:", e.name);
+        break;
+      default:
+        console.log("ℹ️ [WebRTC] Unknown event:", e.event);
+    }
+  }
+  disconnect() {
+    console.log("🔴 [WebRTC] Disconnecting..."), this.audioElement && (this.audioElement.pause(), this.audioElement.srcObject = null), this.dataChannel && this.dataChannel.close(), this.pc && this.pc.close(), this.connected = !1, this.onDisconnected();
+  }
+  generateCallId() {
+    return "web_" + Date.now() + "_" + Math.random().toString(36).substr(2, 8);
+  }
+}
+const w = "https://coredb.travelr.club/v1/graphql";
+async function v(a) {
+  var t;
+  const e = `
+    query GetWidgetConfig($id: uuid!) {
+      app_widget_by_pk(id: $id) {
+        agent_id
+        client_id
+        agent {
+          tts_voice {
+            provider {
+              root_name
+              provider_country
+            }
+          }
+        }
+      }
+    }
+  `;
+  try {
+    const i = (t = (await (await fetch(w, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        query: e,
+        variables: { id: a }
+      })
+    })).json()).data) == null ? void 0 : t.app_widget_by_pk;
+    if (!i)
+      throw new Error(`Widget configuration not found for ID: ${a}`);
+    return i;
+  } catch (n) {
+    throw console.error("[AvinAI] Failed to fetch widget config:", n), n;
+  }
+}
+const d = {
+  phone: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
+    </svg>
+  `,
+  close: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="18" y1="6" x2="6" y2="18"/>
+      <line x1="6" y1="6" x2="18" y2="18"/>
+    </svg>
+  `,
+  mic: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"/>
+      <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+      <line x1="12" y1="19" x2="12" y2="22"/>
+    </svg>
+  `,
+  micOff: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="1" y1="1" x2="23" y2="23"/>
+      <path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"/>
+      <path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"/>
+      <line x1="12" y1="19" x2="12" y2="23"/>
+    </svg>
+  `,
+  waves: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>
+      <path d="M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>
+      <path d="M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>
+    </svg>
+  `
+}, m = `
+  * {
+    box-sizing: border-box;
+  }
+
+  :host {
+    --primary: #6366f1;
+    --primary-hover: #4f46e5;
+    --bg: #ffffff;
+    --text: #1f2937;
+    --text-muted: #6b7280;
+    --border: #e5e7eb;
+    --shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
+  }
+
+  .widget-fab {
+    position: fixed;
+    z-index: 9999;
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: var(--shadow);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    animation: fadeInScale 0.4s ease-out;
+  }
+
+  .widget-fab:hover {
+    transform: scale(1.1);
+    box-shadow: var(--shadow-lg);
+  }
+
+  .widget-fab:active {
+    transform: scale(0.95);
+  }
+
+  .widget-fab svg {
+    width: 28px;
+    height: 28px;
+    color: white;
+  }
+
+  .widget-panel {
+    position: fixed;
+    z-index: 9998;
+    background: var(--bg);
+    border-radius: 20px;
+    box-shadow: var(--shadow-lg);
+    overflow: hidden;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  }
+
+  .widget-panel.hidden {
+    opacity: 0;
+    pointer-events: none;
+    transform: scale(0.8);
+  }
+
+  .widget-header {
+    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
+    color: white;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .widget-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .close-btn {
+    background: rgba(255, 255, 255, 0.2);
+    border: none;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+
+  .close-btn:hover {
+    background: rgba(255, 255, 255, 0.3);
+  }
+
+  .close-btn svg {
+    width: 18px;
+    height: 18px;
+    color: white;
+  }
+
+  .widget-body {
+    padding: 24px;
+  }
+
+  .status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px;
+    background: #f9fafb;
+    border-radius: 12px;
+    margin-bottom: 20px;
+  }
+
+  .status-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #10b981;
+    animation: pulse 2s infinite;
+  }
+
+  .status-text {
+    font-size: 14px;
+    color: var(--text-muted);
+    margin: 0;
+  }
+
+  .transcript-box {
+    min-height: 100px;
+    max-height: 200px;
+    overflow-y: auto;
+    background: #f9fafb;
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 16px;
+    margin-bottom: 20px;
+    font-size: 14px;
+    line-height: 1.6;
+    color: var(--text);
+  }
+
+  .transcript-box::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .transcript-box::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 3px;
+  }
+
+  .controls {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+  }
+
+  .control-btn {
+    flex: 1;
+    padding: 14px 20px;
+    border: none;
+    border-radius: 12px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+  }
+
+  .control-btn svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .control-btn.primary {
+    background: var(--primary);
+    color: white;
+  }
+
+  .control-btn.primary:hover {
+    background: var(--primary-hover);
+  }
+
+  .control-btn.danger {
+    background: #ef4444;
+    color: white;
+  }
+
+  .control-btn.danger:hover {
+    background: #dc2626;
+  }
+
+  .control-btn.secondary {
+    background: #f3f4f6;
+    color: var(--text);
+  }
+
+  .control-btn.secondary:hover {
+    background: #e5e7eb;
+  }
+
+  .control-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .wave-animation {
+    display: inline-block;
+    animation: wave 1.5s ease-in-out infinite;
+  }
+
+  @keyframes fadeInScale {
+    from {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  @keyframes wave {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-4px);
+    }
+  }
+
+  @media (max-width: 640px) {
+    .widget-panel {
+      width: 100vw !important;
+      height: 100vh !important;
+      top: 0 !important;
+      left: 0 !important;
+      right: 0 !important;
+      bottom: 0 !important;
+      border-radius: 0;
+    }
+  }
+`;
+class y extends HTMLElement {
+  constructor() {
+    super();
+    r(this, "isPanelOpen", !1);
+    r(this, "callActive", !1);
+    r(this, "transcript", "");
+    r(this, "client", null);
+    r(this, "shadow");
+    // Configuration
+    r(this, "widgetId", "");
+    r(this, "serverUrl", "https://api.travelr.club");
+    // Default
+    r(this, "agentId", "");
+    this.shadow = this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["widget-id", "agent-id", "position", "primary-color", "server-url"];
+  }
+  connectedCallback() {
+    console.log("[AvinAI Widget] Initializing..."), this.widgetId = this.getAttribute("widget-id") || "", this.agentId = this.getAttribute("agent-id") || "", this.serverUrl = this.getAttribute("server-url") || "https://api.travelr.club";
+    const t = this.getAttribute("position") || "bottom-right", n = this.getAttribute("primary-color") || "#6366f1";
+    this.render(t, n), this.attachEventListeners(), this.widgetId && !this.agentId && this.initializeConfig();
+  }
+  async initializeConfig() {
+    var t, n, o, i;
+    try {
+      console.log(`[AvinAI Widget] Fetching config for widget: ${this.widgetId}`);
+      const s = await v(this.widgetId);
+      this.agentId = s.agent_id, ((i = (o = (n = (t = s.agent) == null ? void 0 : t.tts_voice) == null ? void 0 : n.provider) == null ? void 0 : o.root_name) == null ? void 0 : i.toLowerCase()) === "premium" ? this.serverUrl = "https://godspeed.travelr.club" : this.serverUrl = "https://in-godspeed.travelr.club", console.log(`[AvinAI Widget] Configured for Agent ID: ${this.agentId}`), console.log(`[AvinAI Widget] Using Server URL: ${this.serverUrl}`);
+    } catch (s) {
+      console.error("[AvinAI Widget] Configuration failed:", s), this.updateStatus("Configuration Failed", "error");
+    }
+  }
+  render(t, n) {
+    const o = {
+      "bottom-right": { bottom: "24px", right: "24px" },
+      "bottom-left": { bottom: "24px", left: "24px" },
+      "top-right": { top: "24px", right: "24px" },
+      "top-left": { top: "24px", left: "24px" }
+    }, i = o[t] || o["bottom-right"], s = Object.entries(i).map(([p, g]) => `${p}: ${g}`).join("; "), c = t.includes("bottom") ? "bottom: 100px;" : "top: 100px;", l = t.includes("right") ? "right: 24px;" : "left: 24px;", h = m.replace("--primary: #6366f1", `--primary: ${n}`);
+    this.shadow.innerHTML = `
+      <style>${h}</style>
+      
+      <!-- Floating Action Button -->
+      <button class="widget-fab" style="${s}">
+        ${d.phone}
+      </button>
+
+      <!-- Voice Panel -->
+      <div class="widget-panel hidden" style="width: 380px; height: 480px; ${c} ${l}">
+        <div class="widget-header">
+          <h3 class="widget-title">Voice Assistant</h3>
+          <button class="close-btn" id="close-panel">
+            ${d.close}
+          </button>
+        </div>
+
+        <div class="widget-body">
+          <div class="status-indicator">
+            <div class="status-dot" id="status-dot" style="background: #ef4444;"></div>
+            <p class="status-text" id="status-text">Click Start to begin conversation</p>
+          </div>
+
+          <div class="transcript-box" id="transcript">
+            <p style="color: #9ca3af; font-style: italic;">Transcript will appear here...</p>
+          </div>
+
+          <div class="controls" id="controls">
+            <button class="control-btn primary" id="start-btn">
+              ${d.mic}
+              <span>Start Call</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  attachEventListeners() {
+    const t = this.shadow.querySelector(".widget-fab"), n = this.shadow.querySelector(".widget-panel"), o = this.shadow.querySelector("#close-panel"), i = this.shadow.querySelector("#start-btn");
+    t == null || t.addEventListener("click", () => {
+      this.isPanelOpen = !this.isPanelOpen, n == null || n.classList.toggle("hidden", !this.isPanelOpen);
+    }), o == null || o.addEventListener("click", () => {
+      this.isPanelOpen = !1, n == null || n.classList.add("hidden");
+    }), i == null || i.addEventListener("click", () => {
+      this.callActive ? this.stopCall() : this.startCall();
+    });
+  }
+  updateStatus(t, n) {
+    const o = this.shadow.querySelector("#status-text"), i = this.shadow.querySelector("#status-dot");
+    o && (o.textContent = t), i && (n === "idle" && (i.style.background = "#ef4444"), n === "connecting" && (i.style.background = "#f59e0b"), n === "connected" && (i.style.background = "#10b981"), n === "error" && (i.style.background = "#ef4444"));
+  }
+  async startCall() {
+    if (!this.agentId) {
+      this.updateStatus("Error: Agent ID not configured", "error");
+      return;
+    }
+    const t = this.shadow.querySelector("#start-btn"), n = this.shadow.querySelector("#transcript");
+    try {
+      this.updateStatus("Connecting...", "connecting"), t && (t.disabled = !0), this.client = new f({
+        serverUrl: this.serverUrl,
+        agentId: this.agentId,
+        onConnected: () => {
+          this.callActive = !0, this.updateStatus("Connected - Listening...", "connected"), t && (t.innerHTML = `${d.close}<span>End Call</span>`, t.className = "control-btn danger", t.disabled = !1);
+        },
+        onDisconnected: () => {
+          this.stopCall();
+        },
+        onError: (o) => {
+          this.updateStatus(`Error: ${o.message || "Connection failed"}`, "error"), t && (t.disabled = !1);
+        },
+        onTranscription: (o, i) => {
+          i && (this.transcript += (this.transcript ? `
+` : "") + o, n && (n.innerHTML = this.transcript, n.scrollTop = n.scrollHeight));
+        }
+      }), await this.client.connect();
+    } catch (o) {
+      console.error("[AvinAI Widget] Start call failed:", o), this.updateStatus("Connection failed", "error"), t && (t.disabled = !1);
+    }
+  }
+  stopCall() {
+    this.client && (this.client.disconnect(), this.client = null), this.callActive = !1, this.updateStatus("Click Start to begin conversation", "idle");
+    const t = this.shadow.querySelector("#start-btn");
+    t && (t.innerHTML = `${d.mic}<span>Start Call</span>`, t.className = "control-btn primary", t.disabled = !1);
+  }
+  disconnectedCallback() {
+    this.client && this.client.disconnect();
+  }
+}
+export {
+  y as AvinWidget,
+  f as WebRTCClient,
+  v as fetchWidgetConfig
+};