@convai/web-widget 0.1.4 → 0.2.0-beta.0

package/react.js

@@ -0,0 +1,3551 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useLocalParticipant, useRoomContext, RoomContext, VideoTrack } from "@livekit/components-react";
+import { RoomContext as RoomContext2, RoomAudioRenderer } from "@livekit/components-react";
+import { FALLBACK_CHARACTER_NAME, fetchCharacterInfo, resolveLinkPreviewCached, isCardWorthy, faviconFor, siteNameFor, parseInlineMarkdown, linkKindForUrl, contactLabel, hoverTitle, compactUrl, documentBadge, fileNameOf, isMixedContent, describeUrl } from "@convai/web-sdk/core";
+import { AudioRenderer } from "@convai/web-sdk/vanilla";
+import { freshPublicationGrantOptions } from "@convai/web-sdk/embed";
+import styled from "styled-components";
+import { p as presentationStyles, M as MAX_CARDS_PER_MESSAGE, i as injectKeyframes, P as PREVIEW_TIMEOUT_MS, g as glyph, o as openLightbox } from "./chunks/lightbox-Dxfdw3VU.js";
+import { Track } from "livekit-client";
+function renderTree(tree) {
+  return tree.map(
+    (node, i) => React.createElement(node.tag, { key: i, ...node.attr }, renderTree(node.child))
+  );
+}
+function IconBase({
+  data,
+  size,
+  title,
+  ...svgProps
+}) {
+  const computedSize = size || "1em";
+  return React.createElement(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      ...data.attr,
+      ...svgProps,
+      className: svgProps.className,
+      style: { color: svgProps.color, ...svgProps.style },
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    title && React.createElement("title", null, title),
+    renderTree(data.child)
+  );
+}
+function icon(data) {
+  return (props) => IconBase({ ...props, data });
+}
+const FaUser = icon({ "tag": "svg", "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z" }, "child": [] }] });
+const FiMoreVertical = icon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "1" }, "child": [] }, { "tag": "circle", "attr": { "cx": "12", "cy": "5", "r": "1" }, "child": [] }, { "tag": "circle", "attr": { "cx": "12", "cy": "19", "r": "1" }, "child": [] }] });
+const FiSend = icon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "line", "attr": { "x1": "22", "y1": "2", "x2": "11", "y2": "13" }, "child": [] }, { "tag": "polygon", "attr": { "points": "22 2 15 22 11 13 2 9 22 2" }, "child": [] }] });
+const FiPhoneOff = icon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-3.33-2.67m-2.67-3.34a19.79 19.79 0 0 1-3.07-8.63A2 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.91" }, "child": [] }, { "tag": "line", "attr": { "x1": "23", "y1": "1", "x2": "1", "y2": "23" }, "child": [] }] });
+const IoClose = icon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "m289.94 256 95-95A24 24 0 0 0 351 127l-95 95-95-95a24 24 0 0 0-34 34l95 95-95 95a24 24 0 1 0 34 34l95-95 95 95a24 24 0 0 0 34-34z" }, "child": [] }] });
+const IoVideocam = icon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M464 384.39a32 32 0 0 1-13-2.77 15.77 15.77 0 0 1-2.71-1.54l-82.71-58.22A32 32 0 0 1 352 295.7v-79.4a32 32 0 0 1 13.58-26.16l82.71-58.22a15.77 15.77 0 0 1 2.71-1.54 32 32 0 0 1 45 29.24v192.76a32 32 0 0 1-32 32zM268 400H84a68.07 68.07 0 0 1-68-68V180a68.07 68.07 0 0 1 68-68h184.48A67.6 67.6 0 0 1 336 179.52V332a68.07 68.07 0 0 1-68 68z" }, "child": [] }] });
+const IoVideocamOff = icon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M336 179.52A67.52 67.52 0 0 0 268.48 112h-79.2a4 4 0 0 0-2.82 6.83l142.71 142.71a4 4 0 0 0 6.83-2.82zM16 180v152a68 68 0 0 0 68 68h184a67.66 67.66 0 0 0 42.84-15.24 4 4 0 0 0 .33-6L54.41 122a4 4 0 0 0-4.87-.62A68 68 0 0 0 16 180zm448 204.39a32 32 0 0 1-13-2.77 15.77 15.77 0 0 1-2.71-1.54l-82.71-58.22A32 32 0 0 1 352 295.7v-79.4a32 32 0 0 1 13.58-26.16l82.71-58.22a15.77 15.77 0 0 1 2.71-1.54 32 32 0 0 1 45 29.24v192.76a32 32 0 0 1-32 32z" }, "child": [] }, { "tag": "path", "attr": { "fill": "none", "strokeLinecap": "round", "strokeMiterlimit": "10", "strokeWidth": "32", "d": "M416 416 80 80" }, "child": [] }] });
+const IoVolumeMute = icon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "fill": "none", "strokeLinecap": "round", "strokeMiterlimit": "10", "strokeWidth": "32", "d": "M416 432 64 80" }, "child": [] }, { "tag": "path", "attr": { "d": "M243.33 98.86a23.89 23.89 0 0 0-25.55 1.82l-.66.51-28.52 23.35a8 8 0 0 0-.59 11.85l54.33 54.33a8 8 0 0 0 13.66-5.66v-64.49a24.51 24.51 0 0 0-12.67-21.71zm8 236.43L96.69 180.69A16 16 0 0 0 85.38 176H56a24 24 0 0 0-24 24v112a24 24 0 0 0 24 24h69.76l92 75.31a23.9 23.9 0 0 0 25.87 1.69A24.51 24.51 0 0 0 256 391.45v-44.86a16 16 0 0 0-4.67-11.3zM352 256c0-24.56-5.81-47.87-17.75-71.27a16 16 0 1 0-28.5 14.55C315.34 218.06 320 236.62 320 256q0 4-.31 8.13a8 8 0 0 0 2.32 6.25l14.36 14.36a8 8 0 0 0 13.55-4.31A146 146 0 0 0 352 256zm64 0c0-51.18-13.08-83.89-34.18-120.06a16 16 0 0 0-27.64 16.12C373.07 184.44 384 211.83 384 256c0 23.83-3.29 42.88-9.37 60.65a8 8 0 0 0 1.9 8.26L389 337.4a8 8 0 0 0 13.13-2.79C411 311.76 416 287.26 416 256z" }, "child": [] }, { "tag": "path", "attr": { "d": "M480 256c0-74.25-20.19-121.11-50.51-168.61a16 16 0 1 0-27 17.22C429.82 147.38 448 189.5 448 256c0 46.19-8.43 80.27-22.43 110.53a8 8 0 0 0 1.59 9l11.92 11.92a8 8 0 0 0 12.92-2.16C471.6 344.9 480 305 480 256z" }, "child": [] }] });
+const IoVolumeHigh = icon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M232 416a23.88 23.88 0 0 1-14.2-4.68 8.27 8.27 0 0 1-.66-.51L125.76 336H56a24 24 0 0 1-24-24V200a24 24 0 0 1 24-24h69.75l91.37-74.81a8.27 8.27 0 0 1 .66-.51A24 24 0 0 1 256 120v272a24 24 0 0 1-24 24zm-106.18-80zm-.27-159.86zM320 336a16 16 0 0 1-14.29-23.19c9.49-18.87 14.3-38 14.3-56.81 0-19.38-4.66-37.94-14.25-56.73a16 16 0 0 1 28.5-14.54C346.19 208.12 352 231.44 352 256c0 23.86-6 47.81-17.7 71.19A16 16 0 0 1 320 336z" }, "child": [] }, { "tag": "path", "attr": { "d": "M368 384a16 16 0 0 1-13.86-24C373.05 327.09 384 299.51 384 256c0-44.17-10.93-71.56-29.82-103.94a16 16 0 0 1 27.64-16.12C402.92 172.11 416 204.81 416 256c0 50.43-13.06 83.29-34.13 120a16 16 0 0 1-13.87 8z" }, "child": [] }, { "tag": "path", "attr": { "d": "M416 432a16 16 0 0 1-13.39-24.74C429.85 365.47 448 323.76 448 256c0-66.5-18.18-108.62-45.49-151.39a16 16 0 1 1 27-17.22C459.81 134.89 480 181.74 480 256c0 64.75-14.66 113.63-50.6 168.74A16 16 0 0 1 416 432z" }, "child": [] }] });
+const LiaRedoAltSolid = icon({ "tag": "svg", "attr": { "viewBox": "0 0 32 32" }, "child": [{ "tag": "path", "attr": { "d": "M 16 3 C 8.832031 3 3 8.832031 3 16 C 3 23.167969 8.832031 29 16 29 C 23.167969 29 29 23.167969 29 16 L 27 16 C 27 22.085938 22.085938 27 16 27 C 9.914063 27 5 22.085938 5 16 C 5 9.914063 9.914063 5 16 5 C 19.875 5 23.261719 6.984375 25.21875 10 L 20 10 L 20 12 L 28 12 L 28 4 L 26 4 L 26 7.71875 C 23.617188 4.84375 20.019531 3 16 3 Z" }, "child": [] }] });
+const MdDragIndicator = icon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }, "child": [] }] });
+const MdScreenShare = icon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M20 18c1.1 0 1.99-.9 1.99-2L22 6a2 2 0 0 0-2-2H4c-1.11 0-2 .89-2 2v10a2 2 0 0 0 2 2H0v2h24v-2h-4zm-7-3.53v-2.19c-2.78 0-4.61.85-6 2.72.56-2.67 2.11-5.33 6-5.87V7l4 3.73-4 3.74z" }, "child": [] }] });
+const MdStopScreenShare = icon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "m21.22 18.02 2 2H24v-2h-2.78zm.77-2 .01-10a2 2 0 0 0-2-2H7.22l5.23 5.23c.18-.04.36-.07.55-.1V7.02l4 3.73-1.58 1.47 5.54 5.54c.61-.33 1.03-.99 1.03-1.74zM2.39 1.73 1.11 3l1.54 1.54c-.4.36-.65.89-.65 1.48v10a2 2 0 0 0 2 2H0v2h18.13l2.71 2.71 1.27-1.27L2.39 1.73zM7 15.02c.31-1.48.92-2.95 2.07-4.06l1.59 1.59c-1.54.38-2.7 1.18-3.66 2.47z" }, "child": [] }] });
+const PiWaveform = icon({ "tag": "svg", "attr": { "viewBox": "0 0 256 256", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "d": "M56,96v64a8,8,0,0,1-16,0V96a8,8,0,0,1,16,0ZM88,24a8,8,0,0,0-8,8V224a8,8,0,0,0,16,0V32A8,8,0,0,0,88,24Zm40,32a8,8,0,0,0-8,8V192a8,8,0,0,0,16,0V64A8,8,0,0,0,128,56Zm40,32a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V96A8,8,0,0,0,168,88Zm40-16a8,8,0,0,0-8,8v96a8,8,0,0,0,16,0V80A8,8,0,0,0,208,72Z" }, "child": [] }] });
+const detectEnvironment = () => {
+  var _a, _b, _c;
+  const isBrowser = typeof window !== "undefined";
+  const getEnv = (key) => {
+    try {
+      return typeof process !== "undefined" && process.env ? process.env[key] : void 0;
+    } catch {
+      return void 0;
+    }
+  };
+  const publicEnv = getEnv("NEXT_PUBLIC_ENVIRONMENT");
+  if (publicEnv === "PRODUCTION") {
+    return "production";
+  }
+  if (publicEnv === "PREVIEW" || publicEnv === "STAGING") {
+    return "development";
+  }
+  const nodeEnv = getEnv("NODE_ENV");
+  const reactEnv = getEnv("REACT_APP_ENV");
+  if (nodeEnv === "production" || reactEnv === "production") {
+    return "production";
+  }
+  if (nodeEnv === "development" || reactEnv === "development") {
+    return "development";
+  }
+  const viteDevUrl = getEnv("VITE_DEV_SERVER_URL");
+  if (viteDevUrl !== void 0) {
+    return "development";
+  }
+  if (isBrowser) {
+    if (((_a = window.location) == null ? void 0 : _a.hostname) === "localhost" || ((_b = window.location) == null ? void 0 : _b.hostname) === "127.0.0.1") {
+      return "development";
+    }
+    if (((_c = window.location) == null ? void 0 : _c.port) && ["3000", "3001", "5173", "8080"].includes(window.location.port)) {
+      return "development";
+    }
+  }
+  return "production";
+};
+const environment = detectEnvironment();
+const isDevelopment = environment === "development";
+function shouldLog() {
+  if (isDevelopment) return true;
+  try {
+    if (typeof window !== "undefined" && window.__CONVAI_DEBUG__) {
+      return true;
+    }
+  } catch {
+  }
+  return false;
+}
+const devLogger = {
+  log: (...args) => console.log("[Convai]", ...args),
+  warn: (...args) => console.warn("[Convai]", ...args),
+  error: (...args) => console.error("[Convai]", ...args),
+  info: (...args) => console.info("[Convai]", ...args),
+  debug: (...args) => console.debug("[Convai]", ...args),
+  trace: (...args) => console.trace("[Convai]", ...args)
+};
+const noop = () => {
+};
+const logger = {
+  log: (...args) => shouldLog() ? devLogger.log(...args) : noop(),
+  warn: (...args) => shouldLog() ? devLogger.warn(...args) : noop(),
+  error: (...args) => shouldLog() ? devLogger.error(...args) : noop(),
+  info: (...args) => shouldLog() ? devLogger.info(...args) : noop(),
+  debug: (...args) => shouldLog() ? devLogger.debug(...args) : noop(),
+  trace: (...args) => shouldLog() ? devLogger.trace(...args) : noop()
+};
+const useCharacterInfo = (characterId, apiKey, authToken, baseUrl) => {
+  const [characterInfo, setCharacterInfo] = useState({
+    name: FALLBACK_CHARACTER_NAME,
+    image: null
+  });
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!characterId || !apiKey) {
+      setIsLoading(false);
+      return;
+    }
+    const controller = new AbortController();
+    let cancelled = false;
+    setIsLoading(true);
+    setError(null);
+    fetchCharacterInfo({
+      characterId,
+      apiKey,
+      authToken,
+      baseUrl,
+      signal: controller.signal
+    }).then((info) => {
+      if (!cancelled) setCharacterInfo(info);
+    }).catch((err) => {
+      if (cancelled || controller.signal.aborted) return;
+      const error2 = err instanceof Error ? err : new Error("Unknown error");
+      logger.error("Failed to fetch character info:", error2);
+      setError(error2);
+    }).finally(() => {
+      if (!cancelled) setIsLoading(false);
+    });
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [characterId, apiKey, authToken, baseUrl]);
+  return { ...characterInfo, isLoading, error };
+};
+const aeroTheme = {
+  // Color Palette
+  colors: {
+    // Primary colors
+    primary: {
+      300: "#7dd3fc",
+      500: "#0ea5e9"
+    },
+    convai: {
+      light: "#1EB453",
+      dark: "#084c3a"
+    },
+    // Neutral colors for glass effects
+    neutral: {
+      300: "#d4d4d4",
+      400: "#a3a3a3",
+      700: "#404040",
+      800: "#262626"
+    },
+    // Glass overlay colors
+    glass: {
+      light: "rgba(255, 255, 255, 0.1)",
+      medium: "rgba(255, 255, 255, 0.15)",
+      backdrop: "rgba(255, 255, 255, 0.8)"
+    },
+    // Text colors
+    text: {
+      primary: "#1f2937",
+      secondary: "#6b7280",
+      tertiary: "#9ca3af",
+      inverse: "#ffffff"
+    }
+  },
+  // Typography
+  typography: {
+    fontFamily: {
+      body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+    },
+    fontSize: {
+      xs: "0.75rem",
+      sm: "0.875rem",
+      lg: "1.125rem"
+    },
+    sizes: {
+      sm: "0.875rem",
+      body: "1rem",
+      caption: "0.75rem"
+    },
+    fontWeight: {
+      semibold: 600
+    }
+  },
+  // Spacing
+  spacing: {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem"
+  },
+  // Border Radius
+  borderRadius: {
+    sm: "0.25rem",
+    md: "0.5rem",
+    lg: "0.75rem",
+    xl: "1rem",
+    full: "9999px"
+  },
+  // Shadows
+  shadows: {
+    xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+    glass: "0 8px 32px rgba(0, 0, 0, 0.1)"
+  },
+  // Glass Effects
+  glass: {
+    backdrop: "blur(20px)",
+    backdropLight: "blur(10px)",
+    border: "1px solid rgba(255, 255, 255, 0.2)"
+  },
+  // Transitions
+  transitions: {
+    normal: "0.2s ease-in-out"
+  }
+};
+const iconSizes = {
+  xs: "12px",
+  sm: "16px",
+  md: "20px",
+  lg: "24px",
+  xl: "32px",
+  "2xl": "40px"
+};
+const iosTransitions = {
+  // Fast and snappy transitions for buttons and small elements
+  snappy: {
+    type: "spring",
+    stiffness: 400,
+    damping: 30
+  },
+  // Smooth fade with pop effect
+  fadePop: {
+    type: "spring",
+    stiffness: 300,
+    damping: 25
+  },
+  // Modal slide from bottom
+  modalSlide: {
+    type: "spring",
+    stiffness: 260,
+    damping: 22
+  }
+};
+const ConvaiContainer = styled(motion.div)`
+  position: fixed !important;
+  bottom: 2rem !important;
+  right: 2rem !important;
+  z-index: 1000 !important;
+  isolation: isolate;
+  background: transparent !important;
+  pointer-events: none !important;
+
+  /* Override any inherited text styles */
+  * {
+    font-family: ${aeroTheme.typography.fontFamily.body} !important;
+    color-scheme: light !important;
+    font-synthesis: none !important;
+    text-rendering: optimizeLegibility !important;
+    -webkit-font-smoothing: antialiased !important;
+    -moz-osx-font-smoothing: grayscale !important;
+    -webkit-text-size-adjust: 100% !important;
+  }
+`;
+const MorphingContainer = styled(motion.div)`
+  position: relative !important;
+  background: ${(props) => {
+  var _a;
+  const opacity = (_a = props.$backgroundOpacity) != null ? _a : 0.95;
+  return `rgba(252, 252, 253, ${opacity})`;
+}} !important;
+  backdrop-filter: blur(20px) saturate(180%) !important;
+  // Subtle dual-tone border for visibility on any background
+  border: 1px solid rgba(0, 0, 0, 0.06) !important;
+  box-shadow: 
+    0 0 0 1px rgba(255, 255, 255, 0.8) inset,  // Inner highlight
+    0 8px 32px rgba(0, 0, 0, 0.12),              // Main shadow for light backgrounds
+    0 2px 8px rgba(0, 0, 0, 0.08) !important;    // Subtle depth
+  display: flex !important;
+  flex-direction: column !important;
+  overflow: hidden !important;
+  isolation: isolate;
+  pointer-events: auto !important;
+`;
+const ButtonContent = styled(motion.div)`
+  width: 100% !important;
+  height: 100% !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  background: transparent !important;
+  isolation: isolate;
+  pointer-events: auto !important;
+`;
+const Logo = styled(motion.div)`
+  width: 2rem !important;
+  height: 2rem !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  color: ${aeroTheme.colors.primary[500]} !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+const ChatContent = styled(motion.div)`
+  width: 100% !important;
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  overflow: hidden !important;
+  background: transparent !important;
+  isolation: isolate;
+  pointer-events: auto !important;
+`;
+const Header = styled(motion.div)`
+  padding: ${aeroTheme.spacing.md} !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  background: rgba(255, 255, 255, 0.5) !important;
+  position: relative !important;
+  z-index: 10 !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+const Title = styled.h3`
+  margin: 0 !important;
+  font-size: ${aeroTheme.typography.fontSize.lg} !important;
+  font-weight: ${aeroTheme.typography.fontWeight.semibold} !important;
+  font-family: ${aeroTheme.typography.fontFamily.body} !important;
+  color: ${aeroTheme.colors.text.primary} !important;
+  text-align: center !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 0.5rem !important;
+  flex: 1 !important;
+  font-synthesis: none !important;
+  text-rendering: optimizeLegibility !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  -webkit-text-size-adjust: 100% !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+styled.div`
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+const CloseButton = styled(motion.button)`
+  background: rgba(252, 252, 253, 0.95) !important;
+  backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(0, 0, 0, 0.06) !important;
+  border-radius: 50% !important;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer !important;
+  color: ${aeroTheme.colors.text.primary} !important;
+  transition: ${aeroTheme.transitions.normal};
+  z-index: 1;
+  box-shadow: 
+    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
+    0 2px 8px rgba(0, 0, 0, 0.08);
+  outline: none !important;
+  padding: 0 !important;
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  font-family: inherit !important;
+
+  &:hover {
+    background: rgba(255, 255, 255, 1) !important;
+    color: ${aeroTheme.colors.text.primary} !important;
+    box-shadow: 
+      0 0 0 1px rgba(255, 255, 255, 1) inset,
+      0 4px 12px rgba(0, 0, 0, 0.12);
+    border-color: rgba(0, 0, 0, 0.08) !important;
+  }
+
+  &:focus {
+    outline: none !important;
+  }
+
+  &:focus-visible {
+    outline: none !important;
+  }
+`;
+const SettingsButton = styled(motion.button)`
+  background: rgba(252, 252, 253, 0.95) !important;
+  backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(0, 0, 0, 0.06) !important;
+  border-radius: 50% !important;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer !important;
+  color: ${aeroTheme.colors.text.primary} !important;
+  transition: ${aeroTheme.transitions.normal};
+  z-index: 1;
+  box-shadow: 
+    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
+    0 2px 8px rgba(0, 0, 0, 0.08);
+  outline: none !important;
+  padding: 0 !important;
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  font-family: inherit !important;
+
+  &:hover {
+    background: rgba(255, 255, 255, 1) !important;
+    color: ${aeroTheme.colors.text.primary} !important;
+    box-shadow: 
+      0 0 0 1px rgba(255, 255, 255, 1) inset,
+      0 4px 12px rgba(0, 0, 0, 0.12);
+    border-color: rgba(0, 0, 0, 0.08) !important;
+  }
+
+  &:focus {
+    outline: none !important;
+  }
+
+  &:focus-visible {
+    outline: none !important;
+  }
+`;
+const SettingsTray$1 = styled(motion.div)`
+  background: rgba(252, 252, 253, 0.98) !important;
+  backdrop-filter: blur(20px) saturate(180%) !important;
+  border: 1px solid rgba(0, 0, 0, 0.08) !important;
+  border-radius: ${aeroTheme.borderRadius.lg} !important;
+  box-shadow: 
+    0 0 0 1px rgba(255, 255, 255, 0.9) inset,
+    0 8px 32px rgba(0, 0, 0, 0.15) !important;
+  padding: 0 !important;
+  min-width: 0 !important;
+  isolation: isolate;
+  contain: layout style paint;
+  pointer-events: auto !important;
+`;
+const SettingsOption = styled(motion.button)`
+  padding: ${aeroTheme.spacing.sm} ${aeroTheme.spacing.md};
+  background: transparent;
+  border: none !important;
+  border-radius: ${aeroTheme.borderRadius.md} !important;
+  color: ${aeroTheme.colors.text.primary};
+  font-family: ${aeroTheme.typography.fontFamily.body} !important;
+  font-size: ${aeroTheme.typography.sizes.sm} !important;
+  font-weight: inherit !important;
+  cursor: pointer !important;
+  transition: ${aeroTheme.transitions.normal};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${aeroTheme.spacing.sm};
+  outline: none !important;
+  pointer-events: auto !important;
+  flex: 1;
+  min-width: 2.5rem;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.05);
+    border-color: transparent !important;
+  }
+
+  &:active {
+    background: rgba(0, 0, 0, 0.1);
+  }
+
+  &:focus {
+    outline: none !important;
+  }
+
+  &:focus-visible {
+    outline: none !important;
+  }
+`;
+const Content = styled(motion.div)`
+  flex: 1 !important;
+  padding: ${aeroTheme.spacing.md} !important;
+  display: flex !important;
+  flex-direction: column !important;
+  justify-content: space-between !important;
+  min-height: 0 !important;
+  z-index: 1 !important;
+  overflow: hidden !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+const Footer = styled(motion.div)`
+  padding: ${aeroTheme.spacing.md} !important;
+  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
+  background: rgba(255, 255, 255, 0.5) !important;
+  position: relative !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+const InputContainer = styled(motion.div)`
+  display: flex !important;
+  align-items: center !important;
+  gap: ${aeroTheme.spacing.sm} !important;
+  background: rgba(252, 252, 253, 0.95) !important;
+  backdrop-filter: blur(20px) saturate(180%) !important;
+  border: 1px solid rgba(0, 0, 0, 0.06) !important;
+  border-radius: ${aeroTheme.borderRadius.full} !important;
+  min-height: 3rem !important;
+  box-shadow: 
+    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
+    0 2px 12px rgba(0, 0, 0, 0.08) !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+const Input = styled.input`
+  flex: 1 !important;
+  background: transparent !important;
+  border: none !important;
+  outline: none !important;
+  color: ${aeroTheme.colors.text.primary} !important;
+  font-size: ${aeroTheme.typography.fontSize.sm} !important;
+  font-family: ${aeroTheme.typography.fontFamily.body} !important;
+  border-radius: ${aeroTheme.borderRadius.full} !important;
+  padding: 0.5rem 0.75rem !important;
+  line-height: 1.5 !important;
+  min-height: 2.25rem !important;
+  font-synthesis: none !important;
+  text-rendering: optimizeLegibility !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  -webkit-text-size-adjust: 100% !important;
+  isolation: isolate;
+  contain: layout style paint;
+
+  &::placeholder {
+    color: ${aeroTheme.colors.text.tertiary} !important;
+    font-family: ${aeroTheme.typography.fontFamily.body} !important;
+    font-size: ${aeroTheme.typography.fontSize.sm} !important;
+  }
+
+  &:focus {
+    outline: none !important;
+    border: none !important;
+  }
+`;
+const ActionButton = styled(motion.button)`
+  width: 2.25rem !important;
+  height: 2.25rem !important;
+  min-width: 2.25rem !important;
+  min-height: 2.25rem !important;
+  flex-shrink: 0 !important;
+  border-radius: 50% !important;
+  border: none !important;
+  background: ${(props) => props.$active ? aeroTheme.colors.convai.light : aeroTheme.colors.text.primary};
+  color: ${(props) => props.$active ? aeroTheme.colors.text.inverse : "white"};
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  cursor: pointer !important;
+  transition: ${aeroTheme.transitions.normal} !important;
+  outline: none !important;
+  padding: 0 !important;
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  font-family: inherit !important;
+  isolation: isolate;
+  contain: layout style paint;
+
+  &:hover {
+    transform: scale(1.05);
+    background: ${aeroTheme.colors.neutral[800]} !important;
+    border-color: transparent !important;
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  &:focus {
+    outline: none !important;
+  }
+
+  &:focus-visible {
+    outline: none !important;
+  }
+`;
+styled.div`
+  flex: 1 !important;
+  overflow-y: auto !important;
+  padding: ${aeroTheme.spacing.md} !important;
+  display: flex !important;
+  flex-direction: column !important;
+  gap: ${aeroTheme.spacing.sm} !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+styled.div`
+  display: flex !important;
+  flex-direction: ${(props) => props.isUser ? "row-reverse" : "row"} !important;
+  align-items: flex-start !important;
+  gap: ${aeroTheme.spacing.sm} !important;
+  margin-bottom: ${aeroTheme.spacing.sm} !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+styled.div`
+  max-width: 70% !important;
+  padding: ${aeroTheme.spacing.sm} ${aeroTheme.spacing.md} !important;
+  background: ${(props) => props.isUser ? aeroTheme.colors.primary[500] : "rgba(255, 255, 255, 0.9)"} !important;
+  color: ${(props) => props.isUser ? "white" : aeroTheme.colors.text.primary} !important;
+  border-radius: ${aeroTheme.borderRadius.lg} !important;
+  font-size: ${aeroTheme.typography.fontSize.sm} !important;
+  font-family: ${aeroTheme.typography.fontFamily.body} !important;
+  line-height: 1.4 !important;
+  word-wrap: break-word !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+  font-synthesis: none !important;
+  text-rendering: optimizeLegibility !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  -webkit-text-size-adjust: 100% !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+styled.div`
+  font-size: ${aeroTheme.typography.fontSize.xs} !important;
+  font-family: ${aeroTheme.typography.fontFamily.body} !important;
+  color: ${aeroTheme.colors.text.secondary} !important;
+  margin-top: ${aeroTheme.spacing.xs} !important;
+  text-align: ${(props) => props.isUser ? "right" : "left"} !important;
+  font-synthesis: none !important;
+  text-rendering: optimizeLegibility !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  -webkit-text-size-adjust: 100% !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+styled(motion.button)`
+  position: fixed !important;
+  bottom: 2rem !important;
+  right: 2rem !important;
+  width: 4rem !important;
+  height: 4rem !important;
+  border: none !important;
+  border-radius: 50% !important;
+  background: ${aeroTheme.colors.glass.backdrop} !important;
+  backdrop-filter: ${aeroTheme.glass.backdrop} !important;
+  border: ${aeroTheme.glass.border} !important;
+  box-shadow: ${aeroTheme.shadows.glass} !important;
+  cursor: pointer !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  z-index: 1000 !important;
+  isolation: isolate;
+  contain: layout style paint;
+
+  &:hover {
+    transform: scale(1.05) !important;
+    box-shadow: ${aeroTheme.shadows.xl} !important;
+  }
+`;
+styled(motion.div)`
+  width: 2rem !important;
+  height: 2rem !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  color: ${aeroTheme.colors.primary[500]} !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+const ConviBubble = styled.div`
+  background: rgba(252, 252, 253, 0.95) !important;
+  backdrop-filter: blur(20px) saturate(180%) !important;
+  border: 1px solid rgba(0, 0, 0, 0.06) !important;
+  border-radius: 12px 12px 12px 4px !important;
+  padding: 12px !important;
+  box-shadow: 
+    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
+    0 2px 8px rgba(0, 0, 0, 0.08) !important;
+  color: ${aeroTheme.colors.text.primary} !important;
+  font-family: ${aeroTheme.typography.fontFamily.body} !important;
+  font-size: 14px !important;
+  line-height: 1.5 !important;
+  
+  /* Markdown styling */
+  strong {
+    font-weight: 600 !important;
+    color: ${aeroTheme.colors.text.primary} !important;
+  }
+  
+  em {
+    font-style: italic !important;
+  }
+  word-wrap: break-word !important;
+  max-width: 100% !important;
+  font-synthesis: none !important;
+  text-rendering: optimizeLegibility !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  -webkit-text-size-adjust: 100% !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+const ConviMessageContainer = styled.div`
+  display: flex !important;
+  flex-direction: column !important;
+  max-width: 70% !important;
+  margin-right: auto !important;
+  width: 100% !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+const MessageHeader = styled.div`
+  display: flex !important;
+  align-items: center !important;
+  gap: ${aeroTheme.spacing.xs} !important;
+  margin-bottom: ${aeroTheme.spacing.xs} !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+const ConviLabel = styled.span`
+  font-size: ${aeroTheme.typography.sizes.caption} !important;
+  color: #10b981 !important;
+  font-weight: 500 !important;
+  font-family: ${aeroTheme.typography.fontFamily.body} !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+const LogoWrapper = styled.div`
+  width: 1rem !important;
+  height: 1rem !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+const UserBubble = styled.div`
+  background: rgba(252, 252, 253, 0.95) !important;
+  backdrop-filter: blur(20px) saturate(180%) !important;
+  border: 1px solid rgba(0, 0, 0, 0.06) !important;
+  border-radius: 12px 12px 4px 12px !important;
+  padding: 12px !important;
+  box-shadow: 
+    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
+    0 2px 8px rgba(0, 0, 0, 0.08) !important;
+  color: ${aeroTheme.colors.text.primary} !important;
+  font-family: ${aeroTheme.typography.fontFamily.body} !important;
+  font-size: 14px !important;
+  line-height: 1.5 !important;
+  
+  /* Markdown styling */
+  strong {
+    font-weight: 600 !important;
+    color: ${aeroTheme.colors.text.primary} !important;
+  }
+  
+  em {
+    font-style: italic !important;
+  }
+  word-wrap: break-word !important;
+  max-width: 100% !important;
+  font-synthesis: none !important;
+  text-rendering: optimizeLegibility !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  -webkit-text-size-adjust: 100% !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+const UserMessageContainer = styled.div`
+  display: flex !important;
+  flex-direction: column !important;
+  max-width: 70% !important;
+  margin-left: auto !important;
+  width: 100% !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+const UserLabel = styled.span`
+  font-size: ${aeroTheme.typography.sizes.caption} !important;
+  color: ${aeroTheme.colors.convai.dark} !important;
+  font-weight: 500 !important;
+  font-family: ${aeroTheme.typography.fontFamily.body} !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+styled(motion.div)`
+  display: flex !important;
+  flex-direction: column !important;
+  max-width: 70% !important;
+  margin: ${aeroTheme.spacing.sm} 0 !important;
+  align-self: ${(props) => props.$isUser ? "flex-end" : "flex-start"} !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+styled(motion.div)`
+  background: ${(props) => props.$isUser ? "rgba(252, 252, 253, 0.95)" : "rgba(248, 250, 252, 0.95)"} !important;
+  backdrop-filter: blur(20px) saturate(180%) !important;
+  border: 1px solid rgba(0, 0, 0, 0.06) !important;
+  border-radius: ${(props) => props.$isUser ? `${aeroTheme.borderRadius.lg} ${aeroTheme.borderRadius.lg} ${aeroTheme.borderRadius.sm} ${aeroTheme.borderRadius.lg}` : `${aeroTheme.borderRadius.lg} ${aeroTheme.borderRadius.lg} ${aeroTheme.borderRadius.lg} ${aeroTheme.borderRadius.sm}`} !important;
+  padding: ${aeroTheme.spacing.md} !important;
+  box-shadow: 
+    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
+    0 2px 8px rgba(0, 0, 0, 0.08) !important;
+  color: ${aeroTheme.colors.text.primary} !important;
+  font-family: ${aeroTheme.typography.fontFamily.body} !important;
+  font-size: ${aeroTheme.typography.sizes.body} !important;
+  line-height: 1.5 !important;
+  word-wrap: break-word !important;
+  position: relative !important;
+  font-synthesis: none !important;
+  text-rendering: optimizeLegibility !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  -webkit-text-size-adjust: 100% !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+styled.span`
+  font-size: ${aeroTheme.typography.sizes.caption} !important;
+  color: ${aeroTheme.colors.text.secondary} !important;
+  margin-top: ${aeroTheme.spacing.xs} !important;
+  align-self: ${(props) => props.$isUser ? "flex-end" : "flex-start"} !important;
+  font-family: ${aeroTheme.typography.fontFamily.body} !important;
+  isolation: isolate;
+  contain: layout style paint;
+`;
+const MessageListContainer = styled.div`
+  display: flex !important;
+  flex-direction: column !important;
+  overflow-y: auto !important;
+  flex: 1 !important;
+  min-height: 0 !important;
+  width: 100% !important;
+  scroll-behavior: smooth !important;
+  isolation: isolate;
+  contain: layout style paint;
+
+  /* Custom scrollbar */
+  &::-webkit-scrollbar {
+    width: 4px !important;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent !important;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.1) !important;
+    border-radius: 2px !important;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.2) !important;
+  }
+`;
+const MessageWrapper = styled.div`
+  margin-bottom: 16px !important;
+  width: 100% !important;
+  isolation: isolate;
+  contain: layout style paint;
+
+  &:last-child {
+    margin-bottom: 0 !important;
+  }
+`;
+const EmptyState = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: ${aeroTheme.colors.text.secondary};
+  font-family: ${aeroTheme.typography.fontFamily.body};
+  font-size: ${aeroTheme.typography.sizes.body};
+  text-align: center;
+  padding: 32px;
+`;
+const LogoSVG = styled(motion.svg)`
+  width: ${(props) => props.$size || "100%"};
+  height: ${(props) => props.$size || "100%"};
+  fill: ${(props) => props.$color || "currentColor"};
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+`;
+const stateVariants = {
+  idle: {
+    scale: 1,
+    opacity: 1,
+    color: "#0ea5e9"
+    // Primary blue
+  },
+  connecting: {
+    scale: [1, 1.1, 1],
+    opacity: [1, 0.7, 1],
+    color: "#f59e0b",
+    // Orange
+    transition: {
+      duration: 1.5,
+      repeat: Infinity,
+      ease: "easeInOut"
+    }
+  },
+  connected: {
+    scale: 1,
+    opacity: 1,
+    color: "#10b981",
+    // Green
+    transition: {
+      duration: 0.3,
+      ease: "easeInOut"
+    }
+  },
+  disconnected: {
+    scale: 1,
+    opacity: 0.5,
+    color: "#ef4444",
+    // Red
+    transition: {
+      duration: 0.3,
+      ease: "easeInOut"
+    }
+  },
+  typing: {
+    scale: [1, 1.05, 1],
+    opacity: 1,
+    color: "#8b5cf6",
+    // Purple
+    transition: {
+      duration: 0.8,
+      repeat: Infinity,
+      ease: "easeInOut"
+    }
+  },
+  listening: {
+    scale: [1, 1.08, 1],
+    opacity: [1, 0.8, 1],
+    color: "#3b82f6",
+    // Blue
+    transition: {
+      duration: 1.2,
+      repeat: Infinity,
+      ease: "easeInOut"
+    }
+  },
+  processing: {
+    scale: [1, 1.02, 1],
+    opacity: [1, 0.9, 1],
+    color: "#6366f1",
+    // Indigo
+    transition: {
+      duration: 0.6,
+      repeat: Infinity,
+      ease: "easeInOut"
+    }
+  }
+};
+const secondStripColors = {
+  idle: "#1EB453",
+  // Original green
+  connecting: "#f59e0b",
+  // Orange
+  connected: "#1EB453",
+  // Original green
+  disconnected: "#ef4444",
+  // Red
+  typing: "#8b5cf6",
+  // Purple
+  listening: "#3b82f6",
+  // Blue
+  processing: "#6366f1"
+  // Indigo
+};
+const pathVariants = {
+  idle: {
+    pathLength: 1,
+    opacity: 1
+  },
+  connecting: {
+    pathLength: [0.3, 0.7, 1],
+    opacity: [0.5, 1, 0.8],
+    transition: {
+      duration: 2,
+      repeat: Infinity,
+      ease: "easeInOut"
+    }
+  },
+  connected: {
+    pathLength: 1,
+    opacity: 1,
+    transition: {
+      duration: 0.5,
+      ease: "easeInOut"
+    }
+  },
+  disconnected: {
+    pathLength: 0.6,
+    opacity: 0.4,
+    transition: {
+      duration: 0.3,
+      ease: "easeInOut"
+    }
+  },
+  typing: {
+    pathLength: [0.8, 1, 0.9],
+    opacity: [1],
+    transition: {
+      duration: 1,
+      repeat: Infinity,
+      ease: "easeInOut"
+    }
+  },
+  listening: {
+    pathLength: [0.6, 1, 0.8],
+    opacity: [0.6, 1, 0.7],
+    transition: {
+      duration: 1.5,
+      repeat: Infinity,
+      ease: "easeInOut"
+    }
+  },
+  processing: {
+    pathLength: [0.5, 1, 0.7],
+    opacity: [0.5, 1, 0.6],
+    transition: {
+      duration: 1.2,
+      repeat: Infinity,
+      ease: "easeInOut"
+    }
+  }
+};
+const IconWrapper = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: ${(props) => {
+  const size = props.$size || "md";
+  return iconSizes[size];
+}};
+  height: ${(props) => {
+  const size = props.$size || "md";
+  return iconSizes[size];
+}};
+  color: ${(props) => props.$color || aeroTheme.colors.text.secondary};
+  transition: ${aeroTheme.transitions.normal};
+
+  &:hover {
+    color: ${(props) => props.$color || aeroTheme.colors.text.primary};
+  }
+`;
+const AeroIcons = {
+  // Chevron down icon for close button
+  ChevronDown: ({
+    size = "md",
+    color
+  }) => /* @__PURE__ */ jsx(IconWrapper, { $size: size, $color: color, children: /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: iconSizes[size],
+      height: iconSizes[size],
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: /* @__PURE__ */ jsx("polyline", { points: "6,9 12,15 18,9" })
+    }
+  ) }),
+  // ConvaiLogo component with animated SVG
+  ConvaiLogo: ({
+    size = "md",
+    color,
+    animate = false,
+    state = "idle"
+  }) => {
+    const [currentState, setCurrentState] = useState(state);
+    const sizeMap = {
+      xs: "0.75rem",
+      sm: "1rem",
+      md: "1.25rem",
+      lg: "1.5rem",
+      xl: "2rem",
+      "2xl": "2.5rem"
+    };
+    const iconSize = sizeMap[size] || "1.25rem";
+    useEffect(() => {
+      setCurrentState(state);
+    }, [state]);
+    useEffect(() => {
+      if (animate) {
+        const states = [
+          "idle",
+          "connecting",
+          "typing",
+          "connected",
+          "disconnected",
+          "processing"
+        ];
+        let currentIndex = 0;
+        const interval = setInterval(() => {
+          currentIndex = (currentIndex + 1) % states.length;
+          setCurrentState(states[currentIndex]);
+        }, 3e3);
+        return () => clearInterval(interval);
+      }
+    }, [animate]);
+    return /* @__PURE__ */ jsxs(
+      LogoSVG,
+      {
+        viewBox: "0 0 384 384",
+        $size: iconSize,
+        $color: color,
+        initial: animate ? { opacity: 1, scale: 1 } : false,
+        animate: animate ? stateVariants[currentState] : false,
+        transition: animate ? { duration: 0.2, ease: "easeInOut" } : void 0,
+        whileHover: animate ? { scale: 1.1 } : void 0,
+        whileTap: animate ? { scale: 0.9 } : void 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            motion.path,
+            {
+              d: "M0 0 C0.69959839 -0.0065712 1.39919678 -0.0131424 2.11999512 -0.01991272 C4.43522251 -0.03962096 6.75038501 -0.05130455 9.06567383 -0.0612793 C9.85831446 -0.06535482 10.65095509 -0.06943035 11.46761513 -0.07362938 C15.66541914 -0.0944825 19.86319057 -0.10878583 24.06103516 -0.11816406 C28.38410215 -0.12920936 32.70665171 -0.16358924 37.02953625 -0.20333576 C40.36427221 -0.22956171 43.69888619 -0.23786131 47.0337162 -0.24144554 C48.62643224 -0.24629839 50.21914331 -0.2578751 51.81175804 -0.27648354 C69.26930263 -0.46773456 69.26930263 -0.46773456 75.58610535 5.6245575 C80.21645647 10.85588298 81.33540199 14.49016989 81.35986328 21.4206543 C81.36497421 22.14311844 81.37008514 22.86558258 81.37535095 23.60993958 C81.38923214 25.99435754 81.38829113 28.37848592 81.38598633 30.76293945 C81.38987448 32.42436836 81.39420939 34.08579627 81.39897156 35.7472229 C81.40643089 39.22905703 81.40614488 42.71078976 81.40087891 46.19262695 C81.39508893 50.64694813 81.41200506 55.10085286 81.43522358 59.55510521 C81.44998192 62.98670871 81.4508297 66.41821245 81.44771385 69.84984207 C81.44822615 71.49163258 81.45344672 73.1334288 81.46352577 74.77518845 C81.47591195 77.07525124 81.46908575 79.37450987 81.45751953 81.67456055 C81.45814896 82.981539 81.45877838 84.28851746 81.45942688 85.63510132 C80.84254452 91.47371365 78.52732357 95.26249723 74.08520508 98.98950195 C73.40458008 99.57344727 72.72395508 100.15739258 72.02270508 100.7590332 C68.47350615 103.35653161 65.36290965 103.30519544 61.10424805 103.31884766 C59.87221649 103.32588211 58.64018494 103.33291656 57.37081909 103.34016418 C56.7124493 103.34198008 56.05407951 103.34379597 55.37575912 103.34566689 C53.30624131 103.35285669 51.23695729 103.36854441 49.16751099 103.38700867 C43.28366424 103.43934056 37.3999433 103.4873775 31.51586914 103.50292969 C27.91355676 103.5130737 24.3118307 103.54256243 20.70975113 103.5842495 C19.34402042 103.59647838 17.97820656 103.60169572 16.61242294 103.59945107 C8.73090231 103.58969075 1.87263728 103.81383569 -4.91479492 108.17700195 C-7.72384754 111.13052013 -9.15477197 114.52324306 -10.91479492 118.17700195 C-11.28512344 118.93435638 -11.65545197 119.69171082 -12.03700256 120.47201538 C-16.07726993 130.41632989 -15.43823163 140.76281367 -15.37008476 151.32646561 C-15.34801891 154.90096301 -15.35197296 158.47462262 -15.36256409 162.04916382 C-15.38412577 170.92003422 -15.36687668 179.79071265 -15.34106445 188.66156006 C-15.31962039 196.17710783 -15.31776573 203.69211414 -15.34398079 211.20765305 C-15.34831203 214.71647808 -15.32375642 218.22434564 -15.29844666 221.73306274 C-15.30371999 223.89748554 -15.31044419 226.06190545 -15.31884766 228.22631836 C-15.30393784 229.19074356 -15.28902802 230.15516876 -15.27366638 231.14881897 C-15.34508206 238.01141921 -16.9480351 243.5040945 -20.91479492 249.17700195 C-26.0538927 253.49142781 -30.93587496 255.28530317 -37.61843872 255.3309021 C-38.56028519 255.33950256 -39.50213165 255.34810303 -40.47251892 255.35696411 C-41.49906082 255.36122406 -42.52560272 255.36548401 -43.58325195 255.36987305 C-44.66992661 255.37805054 -45.75660126 255.38622803 -46.87620544 255.39465332 C-50.47500054 255.41947905 -54.07375621 255.43601739 -57.67260742 255.45043945 C-58.90313717 255.45576313 -60.13366692 255.46108681 -61.40148544 255.46657181 C-67.24488135 255.49053877 -73.08826109 255.5097802 -78.93169224 255.52259386 C-84.98841103 255.53614167 -91.04475988 255.56242227 -97.10131836 255.60913086 C-103.60933706 255.65850314 -110.11701183 255.68322666 -116.62520981 255.69032669 C-119.10105009 255.69703038 -121.57688297 255.71222923 -124.05261612 255.7362175 C-127.52547148 255.76794397 -130.99700762 255.7678936 -134.4699707 255.76049805 C-135.48436722 255.77690338 -136.49876373 255.79330872 -137.54389954 255.81021118 C-144.58516525 255.74911945 -150.0594436 254.18666177 -155.91479492 250.17700195 C-160.11922437 245.7740819 -162.02935988 241.44006577 -162.06869507 235.39033508 C-162.08159576 233.91218575 -162.08159576 233.91218575 -162.09475708 232.4041748 C-162.09901703 231.32414185 -162.10327698 230.24410889 -162.10766602 229.13134766 C-162.11584351 227.99283859 -162.124021 226.85432953 -162.13244629 225.68132019 C-162.15730395 221.90514656 -162.17381777 218.12901055 -162.18823242 214.3527832 C-162.1935561 213.06367727 -162.19887978 211.77457134 -162.20436478 210.4464016 C-162.22559522 205.02735272 -162.24472449 199.60831609 -162.25598717 194.18923664 C-162.27221051 186.43543753 -162.30535181 178.68214076 -162.36238801 170.92853099 C-162.40584504 164.81123062 -162.42174109 158.6941264 -162.42811966 152.57668114 C-162.43483541 149.9791729 -162.45006568 147.38167207 -162.47401047 144.78426552 C-162.50563862 141.14566586 -162.50570126 137.50833002 -162.49829102 133.86962891 C-162.51469635 132.7997171 -162.53110168 131.7298053 -162.54800415 130.62747192 C-162.49171427 123.86379339 -161.30224231 119.40867493 -156.91479492 114.17700195 C-150.70048633 108.27340879 -145.09496666 107.88810653 -136.89892578 107.9375 C-135.89334625 107.93548584 -134.88776672 107.93347168 -133.85171509 107.93139648 C-131.67026481 107.92785441 -129.48880427 107.92861384 -127.30735588 107.93317223 C-123.84643147 107.93877446 -120.38584111 107.92958995 -116.92494202 107.91596985 C-107.08536336 107.87889048 -97.24589659 107.86026615 -87.40625 107.87158203 C-81.38322548 107.87745814 -75.36066903 107.85904709 -69.33773994 107.82569313 C-67.05060701 107.81777476 -64.76342257 107.81896733 -62.47630119 107.82971764 C-43.45245929 108.09017669 -43.45245929 108.09017669 -26.78979492 99.73950195 C-23.10917107 94.70931602 -22.66695746 89.8832171 -22.67529297 83.76977539 C-22.67327881 83.05344437 -22.67126465 82.33711334 -22.66918945 81.59907532 C-22.66565984 80.05224746 -22.66639133 78.50540513 -22.67096519 76.95858002 C-22.67659236 74.50202502 -22.66734352 72.0459363 -22.65376282 69.5894165 C-22.61678347 62.60801088 -22.59805845 55.62676468 -22.609375 48.64526367 C-22.61525918 44.36517663 -22.59680667 40.08574677 -22.5634861 35.80579376 C-22.55558359 34.18408293 -22.55673851 32.56229947 -22.5675106 30.94060516 C-22.62477994 21.92945939 -22.61028477 13.70058716 -16.91479492 6.17700195 C-11.68775031 1.25109893 -7.03157131 0.05467437 0 0 Z",
+              fill: "#1EB453",
+              transform: "translate(275.914794921875,92.822998046875)",
+              initial: animate ? { pathLength: 0 } : false,
+              animate: animate ? pathVariants[currentState] : false,
+              transition: animate ? { duration: 1.2, ease: "easeInOut" } : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.path,
+            {
+              d: "M0 0 C0.70949799 -0.0065712 1.41899597 -0.0131424 2.1499939 -0.01991272 C4.49224974 -0.03958252 6.83444162 -0.05129463 9.17675781 -0.0612793 C9.97951393 -0.06535482 10.78227005 -0.06943035 11.60935211 -0.07362938 C15.85903157 -0.09446397 20.10867901 -0.10877652 24.35839844 -0.11816406 C28.73412049 -0.12921848 33.10933265 -0.16361435 37.48487473 -0.20333576 C40.86164252 -0.22955602 44.23828982 -0.2378607 47.61515045 -0.24144554 C49.22740367 -0.24629814 50.83965199 -0.25787412 52.45180511 -0.27648354 C61.87754315 -0.37851798 69.22600258 -0.40722527 76.90332031 5.81762695 C77.34933594 6.3487207 77.79535156 6.87981445 78.25488281 7.42700195 C78.94710937 8.20817383 78.94710937 8.20817383 79.65332031 9.00512695 C84.02596265 16.74776753 83.1900497 25.91727112 83.18066406 34.5168457 C83.18455855 36.00842913 83.18889475 37.50001147 83.19364929 38.99159241 C83.20108066 42.10738735 83.20084254 45.22306892 83.19555664 48.33886719 C83.189763 52.31076588 83.20670518 56.28219809 83.22990131 60.25401974 C83.24470727 63.33145309 83.24550113 66.40877581 83.24239159 69.48623848 C83.24290125 70.94971198 83.24807164 72.41319226 83.25820351 73.87663078 C83.37438765 93.0006229 83.37438765 93.0006229 77.12988281 100.05200195 C76.68128906 100.58567383 76.23269531 101.1193457 75.77050781 101.66918945 C70.71771348 105.69889733 65.71373184 106.5516213 59.38745117 106.56176758 C58.67430252 106.56714035 57.96115387 106.57251312 57.22639465 106.57804871 C55.69051241 106.58777157 54.15457559 106.5907876 52.6186657 106.58769226 C50.18403577 106.58318589 47.75012185 106.59729184 45.31556702 106.61608887 C39.27289347 106.65895188 33.23023785 106.67011114 27.18743896 106.68231201 C22.07081894 106.69385979 16.95452773 106.71746947 11.83804512 106.75700378 C9.4460817 106.7705322 7.05456878 106.76641182 4.6625824 106.76159668 C3.1893558 106.77094038 1.71613413 106.78110998 0.24291992 106.79223633 C-1.03724503 106.79429077 -2.31740997 106.79634521 -3.6363678 106.79846191 C-7.41637293 107.20919275 -9.82064532 108.34953123 -13.12011719 110.17700195 C-13.78011719 110.17700195 -14.44011719 110.17700195 -15.12011719 110.17700195 C-17.52280099 115.83889015 -17.41598579 121.16057712 -17.42871094 127.20043945 C-17.45386958 129.37752548 -17.47926763 131.55460875 -17.50488281 133.73168945 C-17.53360338 137.14379163 -17.55763834 140.55584604 -17.57641602 143.96801758 C-17.59814672 147.27490607 -17.63758849 150.58124339 -17.67871094 153.88793945 C-17.67882675 154.89964203 -17.67894257 155.9113446 -17.67906189 156.95370483 C-17.7841159 164.52274898 -19.03497091 169.98795471 -23.24511719 176.42700195 C-29.45623238 182.36806866 -36.31490332 183.78705333 -44.68652344 183.6730957 C-46.00401833 183.67527855 -46.00401833 183.67527855 -47.34812927 183.67750549 C-49.19102319 183.67585714 -51.03393241 183.66441631 -52.87670898 183.64355469 C-55.67914918 183.61453786 -58.47969965 183.62298099 -61.28222656 183.63598633 C-63.08366794 183.62974909 -64.88510341 183.62135826 -66.68652344 183.6105957 C-67.51382462 183.61353134 -68.34112579 183.61646698 -69.1934967 183.61949158 C-75.59165864 183.51691869 -81.40132888 182.53204156 -86.39746094 178.2043457 C-86.9453125 177.51469727 -87.49316406 176.82504883 -88.05761719 176.11450195 C-88.62351562 175.42227539 -89.18941406 174.73004883 -89.77246094 174.0168457 C-91.95579877 171.03611492 -92.25725067 169.22772898 -92.31298828 165.57885742 C-92.32905121 164.62381317 -92.34511414 163.66876892 -92.36166382 162.68478394 C-92.40618833 158.30003565 -92.44720831 153.91543939 -92.47021484 149.53051758 C-92.48674024 147.22214655 -92.51398466 144.91382596 -92.55224609 142.60571289 C-92.60721123 139.27243575 -92.62892302 135.94035974 -92.64355469 132.60668945 C-92.66622406 131.58243866 -92.68889343 130.55818787 -92.71224976 129.50289917 C-92.69275809 122.84191599 -91.55490715 118.27254494 -87.12011719 113.17700195 C-82.85713484 109.85187572 -79.42315905 108.06794719 -74.01928711 108.01928711 C-73.19800827 108.00902496 -72.37672943 107.99876282 -71.53056335 107.9881897 C-70.64617081 107.98088837 -69.76177826 107.97358704 -68.85058594 107.96606445 C-66.97362414 107.93799282 -65.09667113 107.90932834 -63.21972656 107.88012695 C-60.26391881 107.83890024 -57.30827464 107.80200782 -54.35229492 107.77563477 C-51.49721474 107.74795955 -48.64287792 107.70208605 -45.78808594 107.65356445 C-44.47060616 107.64868515 -44.47060616 107.64868515 -43.12651062 107.64370728 C-38.07403193 107.54295109 -34.47561603 107.02250373 -30.12011719 104.17700195 C-28.38692337 101.61731491 -28.38692337 101.61731491 -27.30761719 98.67700195 C-26.90929687 97.71793945 -26.51097656 96.75887695 -26.10058594 95.77075195 C-24.41267145 91.30551203 -23.99587525 87.9866657 -23.99414062 83.20214844 C-23.99227249 82.49600906 -23.99040436 81.78986969 -23.98847961 81.06233215 C-23.9844771 79.52854718 -23.98240091 77.99475626 -23.98201752 76.46096611 C-23.97859338 73.18930997 -23.95721325 69.91785101 -23.93678665 66.64626408 C-23.89884548 60.55842138 -23.86749302 54.47078699 -23.86962891 48.3828125 C-23.87042015 44.14504806 -23.84687404 39.90800348 -23.80774689 35.67042732 C-23.79734392 34.06268623 -23.79572049 32.45486145 -23.80339813 30.84710503 C-23.84202858 21.8556044 -23.77030332 13.69524181 -18.12011719 6.17700195 C-12.50415323 0.77468343 -7.52615394 0.05781024 0 0 Z",
+              fill: secondStripColors[currentState],
+              transform: "translate(92.1201171875,53.822998046875)",
+              initial: animate ? { pathLength: 0 } : false,
+              animate: animate ? pathVariants[currentState] : false,
+              transition: animate ? { duration: 1.2, delay: 0.3, ease: "easeInOut" } : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.path,
+            {
+              d: "M0 0 C0.66 0.33 1.32 0.66 2 1 C0.90033225 2.29549899 -0.20491801 3.58626071 -1.3125 4.875 C-1.92738281 5.59429687 -2.54226563 6.31359375 -3.17578125 7.0546875 C-5 9 -5 9 -8 11 C-6.60366572 6.55711819 -4.39598172 4.13475236 -1 1 C-0.67 0.67 -0.34 0.34 0 0 Z",
+              fill: "currentColor",
+              transform: "translate(264,95)",
+              initial: animate ? { pathLength: 0 } : false,
+              animate: animate ? pathVariants[currentState] : false,
+              transition: animate ? { duration: 0.8, delay: 0.6, ease: "easeInOut" } : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.path,
+            {
+              d: "M0 0 C0.66 0.33 1.32 0.66 2 1 C-0.64 3.64 -3.28 6.28 -6 9 C-6 6 -6 6 -3.5625 3.375 C-2.716875 2.59125 -1.87125 1.8075 -1 1 C-0.67 0.67 -0.34 0.34 0 0 Z",
+              fill: "currentColor",
+              transform: "translate(79,56)",
+              initial: animate ? { pathLength: 0 } : false,
+              animate: animate ? pathVariants[currentState] : false,
+              transition: animate ? { duration: 0.8, delay: 0.9, ease: "easeInOut" } : void 0
+            }
+          )
+        ]
+      }
+    );
+  }
+};
+styled.button`
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: ${(props) => {
+  const size = props.$size || "md";
+  return iconSizes[size];
+}} !important;
+  height: ${(props) => {
+  const size = props.$size || "md";
+  return iconSizes[size];
+}} !important;
+  border: none !important;
+  border-radius: ${aeroTheme.borderRadius.md} !important;
+  background: ${(props) => props.$variant === "glass" ? aeroTheme.colors.glass.light : "transparent"} !important;
+  backdrop-filter: ${(props) => props.$variant === "glass" ? aeroTheme.glass.backdropLight : "none"} !important;
+  color: ${aeroTheme.colors.text.secondary} !important;
+  cursor: pointer !important;
+  transition: ${aeroTheme.transitions.normal} !important;
+
+  &:hover {
+    background: ${(props) => props.$variant === "glass" ? aeroTheme.colors.glass.medium : aeroTheme.colors.glass.light} !important;
+    color: ${aeroTheme.colors.text.primary} !important;
+    transform: translateY(-1px) !important;
+  }
+
+  &:active {
+    transform: translateY(0) !important;
+  }
+`;
+const { ChevronDown, ConvaiLogo } = AeroIcons;
+const css$1 = (...objs) => Object.assign({}, ...objs);
+const SiteCard = ({ href, resolver }) => {
+  const [meta, setMeta] = React.useState(null);
+  const [faviconOk, setFaviconOk] = React.useState(true);
+  const [imageOk, setImageOk] = React.useState(true);
+  const [focused, setFocused] = React.useState(false);
+  React.useEffect(() => {
+    let live = true;
+    resolveLinkPreviewCached(resolver, href).then((m) => {
+      if (live && isCardWorthy(m)) setMeta(m);
+    });
+    return () => {
+      live = false;
+    };
+  }, [href, resolver]);
+  if (!meta) return null;
+  const favicon = faviconFor(meta, href);
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "data-convai-part": "message-site-card",
+      style: css$1(presentationStyles.siteCard, focused ? presentationStyles.linkFocus : {}),
+      onFocus: (e) => setFocused(e.target.matches(":focus-visible")),
+      onBlur: () => setFocused(false),
+      children: [
+        /* @__PURE__ */ jsxs("span", { style: css$1(presentationStyles.siteHeader), children: [
+          favicon && faviconOk && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: favicon,
+              alt: "",
+              "data-convai-part": "message-site-favicon",
+              style: css$1(presentationStyles.siteFavicon),
+              onError: () => setFaviconOk(false)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { "data-convai-part": "message-site-name", style: css$1(presentationStyles.siteName), children: siteNameFor(meta, href) })
+        ] }),
+        meta.title && /* @__PURE__ */ jsx("span", { "data-convai-part": "message-site-title", style: css$1(presentationStyles.siteTitle), children: meta.title }),
+        meta.description && /* @__PURE__ */ jsx("span", { "data-convai-part": "message-site-description", style: css$1(presentationStyles.siteDescription), children: meta.description }),
+        meta.image && imageOk && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: meta.image,
+            alt: "",
+            loading: "lazy",
+            "data-convai-part": "message-site-image",
+            style: css$1(presentationStyles.siteImage),
+            onError: () => setImageOk(false)
+          }
+        )
+      ]
+    }
+  );
+};
+const css = (...objs) => Object.assign({}, ...objs);
+const Glyph = ({ name, style }) => /* @__PURE__ */ jsx("span", { style: css(presentationStyles.contactGlyph, style != null ? style : {}), dangerouslySetInnerHTML: { __html: glyph(name) } });
+const useFocusRing = () => {
+  const [focused, setFocused] = React.useState(false);
+  return {
+    style: focused ? presentationStyles.linkFocus : {},
+    onFocus: (e) => setFocused(e.target.matches(":focus-visible")),
+    onBlur: () => setFocused(false)
+  };
+};
+const Anchor = ({ href, kind, label }) => {
+  const ring = useFocusRing();
+  const display = label === href ? compactUrl(label) : label;
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      title: hoverTitle(kind, href, display),
+      "data-convai-part": "message-link",
+      style: css(presentationStyles.link, ring.style),
+      onFocus: ring.onFocus,
+      onBlur: ring.onBlur,
+      children: [
+        display,
+        kind === "ftp" && /* @__PURE__ */ jsx("span", { "data-convai-part": "message-link-badge", style: css(presentationStyles.badge), children: "FTP" })
+      ]
+    }
+  );
+};
+const ContactChip = ({ href, kind }) => {
+  const ring = useFocusRing();
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href,
+      title: hoverTitle(kind, href, href),
+      "data-convai-part": "message-contact",
+      style: css(presentationStyles.contact, ring.style),
+      onFocus: ring.onFocus,
+      onBlur: ring.onBlur,
+      children: [
+        /* @__PURE__ */ jsx(Glyph, { name: kind }),
+        /* @__PURE__ */ jsx("span", { children: contactLabel(href) })
+      ]
+    }
+  );
+};
+const DocumentCard = ({ href }) => {
+  const ring = useFocusRing();
+  let host = "";
+  try {
+    host = new URL(href).host;
+  } catch {
+  }
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      title: href,
+      "data-convai-part": "message-file-card",
+      style: css(presentationStyles.fileCard, ring.style),
+      onFocus: ring.onFocus,
+      onBlur: ring.onBlur,
+      children: [
+        /* @__PURE__ */ jsx("span", { "data-convai-part": "message-file-icon", style: css(presentationStyles.fileIcon), children: documentBadge(href) }),
+        /* @__PURE__ */ jsxs("span", { style: css(presentationStyles.fileBody), children: [
+          /* @__PURE__ */ jsx("span", { "data-convai-part": "message-file-name", style: css(presentationStyles.fileName), children: fileNameOf(href) }),
+          /* @__PURE__ */ jsxs("span", { "data-convai-part": "message-file-meta", style: css(presentationStyles.fileMeta), children: [
+            host,
+            " · Opens in a new tab"
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+const MediaPreview = ({
+  src,
+  alt,
+  kind,
+  pageProtocol
+}) => {
+  const insecure = isMixedContent(src, pageProtocol);
+  const [state, setState] = React.useState(insecure ? "error" : "loading");
+  const cardRef = React.useRef(null);
+  React.useEffect(() => {
+    injectKeyframes(document);
+  }, []);
+  React.useEffect(() => {
+    if (state !== "loading") return;
+    const t = setTimeout(() => setState((s) => s === "loading" ? "error" : s), PREVIEW_TIMEOUT_MS);
+    return () => clearTimeout(t);
+  }, [state]);
+  if (state === "error") {
+    return /* @__PURE__ */ jsxs("span", { "data-convai-part": "message-media-unavailable", style: css(presentationStyles.unavailable), children: [
+      "Preview unavailable — ",
+      describeUrl(src),
+      insecure ? " (insecure URL)" : ""
+    ] });
+  }
+  const ready = state === "ready";
+  const open = () => openLightbox({
+    src,
+    alt,
+    caption: describeUrl(src),
+    href: src,
+    root: document,
+    returnFocusTo: cardRef.current
+  });
+  const buttonProps = kind === "image" ? {
+    role: "button",
+    tabIndex: 0,
+    "aria-label": `Open image: ${fileNameOf(src)}`,
+    onClick: open,
+    onKeyDown: (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        open();
+      }
+    }
+  } : {};
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref: cardRef,
+        "data-convai-part": "message-media-card",
+        style: css(presentationStyles.card, kind === "image" ? presentationStyles.cardButton : {}),
+        ...buttonProps,
+        children: [
+          kind === "image" ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt,
+              loading: "lazy",
+              "data-convai-part": "message-media",
+              onLoad: () => setState("ready"),
+              onError: () => setState("error"),
+              style: css(presentationStyles.media, { opacity: ready ? 1 : 0 })
+            }
+          ) : /* @__PURE__ */ jsx(
+            "video",
+            {
+              src,
+              controls: true,
+              preload: "metadata",
+              "data-convai-part": "message-media",
+              onLoadedMetadata: () => setState("ready"),
+              onError: () => setState("error"),
+              style: css(presentationStyles.media, presentationStyles.videoMedia, { opacity: ready ? 1 : 0 })
+            }
+          ),
+          !ready && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-convai-skeleton": "",
+              "data-convai-part": "message-media-skeleton",
+              style: css(presentationStyles.skeleton),
+              "aria-hidden": "true"
+            }
+          ),
+          kind === "image" && /* @__PURE__ */ jsx("span", { "data-convai-part": "message-media-zoom", style: css(presentationStyles.zoom), children: /* @__PURE__ */ jsx(Glyph, { name: "zoom", style: { fontSize: 14 } }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "data-convai-part": "message-media-caption", style: css(presentationStyles.caption), children: describeUrl(src) })
+  ] });
+};
+const renderNode = (node, key, media, budget, pageProtocol, resolveLinkPreview) => {
+  switch (node.kind) {
+    case "strong":
+      return /* @__PURE__ */ jsx("strong", { children: node.text }, key);
+    case "em":
+      return /* @__PURE__ */ jsx("em", { children: node.text }, key);
+    case "blocked":
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-convai-part": "message-link-blocked",
+          style: css(presentationStyles.blocked),
+          title: `Link blocked: ${node.href}`,
+          children: node.label
+        },
+        key
+      );
+    case "image": {
+      if (media && budget.cards < MAX_CARDS_PER_MESSAGE) {
+        budget.cards++;
+        return /* @__PURE__ */ jsx(MediaPreview, { src: node.src, alt: node.alt, kind: "image", pageProtocol }, key);
+      }
+      return /* @__PURE__ */ jsx(Anchor, { href: node.src, kind: "image", label: node.alt || node.src }, key);
+    }
+    case "link": {
+      const kind = linkKindForUrl(node.href);
+      if (kind === "email" || kind === "phone" || kind === "sms") {
+        return media ? /* @__PURE__ */ jsx(ContactChip, { href: node.href, kind }, key) : /* @__PURE__ */ jsx(Anchor, { href: node.href, kind, label: node.label }, key);
+      }
+      const wantsCard = media && (kind === "image" || kind === "video" || kind === "document") && budget.cards < MAX_CARDS_PER_MESSAGE;
+      const wantsSiteCard = media && kind === "web" && !!resolveLinkPreview && budget.cards < MAX_CARDS_PER_MESSAGE;
+      if (wantsCard || wantsSiteCard) budget.cards++;
+      return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsx(Anchor, { href: node.href, kind, label: node.label }),
+        wantsCard && kind === "document" && /* @__PURE__ */ jsx(DocumentCard, { href: node.href }),
+        wantsCard && kind !== "document" && /* @__PURE__ */ jsx(MediaPreview, { src: node.href, alt: node.label, kind, pageProtocol }),
+        wantsSiteCard && /* @__PURE__ */ jsx(SiteCard, { href: node.href, resolver: resolveLinkPreview })
+      ] }, key);
+    }
+    default:
+      return /* @__PURE__ */ jsx(React.Fragment, { children: node.text }, key);
+  }
+};
+const wrapperStyle = { whiteSpace: "pre-wrap", wordWrap: "break-word" };
+const MarkdownRenderer = ({
+  text,
+  media = true,
+  pageProtocol,
+  resolveLinkPreview
+}) => {
+  if (!text) return /* @__PURE__ */ jsx("div", { style: wrapperStyle });
+  const lines = text.replace(/\\n/g, "\n").split("\n");
+  const budget = { cards: 0 };
+  return /* @__PURE__ */ jsx("div", { style: wrapperStyle, children: lines.map((line, lineIndex) => {
+    if (line.trim() === "" && lineIndex > 0) return /* @__PURE__ */ jsx("br", {}, `br-${lineIndex}`);
+    const nodes = parseInlineMarkdown(line).map(
+      (node, i) => renderNode(
+        node,
+        `${node.kind}-${lineIndex}-${i}`,
+        media,
+        budget,
+        pageProtocol,
+        resolveLinkPreview
+      )
+    );
+    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      nodes.length > 0 ? nodes : line,
+      lineIndex < lines.length - 1 && /* @__PURE__ */ jsx("br", {})
+    ] }, `line-${lineIndex}`);
+  }) });
+};
+const UserMessage = ({
+  message,
+  timestamp,
+  className,
+  sender
+}) => {
+  return /* @__PURE__ */ jsxs(UserMessageContainer, { className, children: [
+    /* @__PURE__ */ jsxs(UserBubble, { children: [
+      sender && /* @__PURE__ */ jsxs(MessageHeader, { children: [
+        /* @__PURE__ */ jsx(LogoWrapper, { children: /* @__PURE__ */ jsx(FaUser, { size: 16, color: aeroTheme.colors.convai.dark }) }),
+        /* @__PURE__ */ jsx(UserLabel, { children: sender === "User" ? "You" : sender })
+      ] }),
+      /* @__PURE__ */ jsx(MarkdownRenderer, { text: message, media: false })
+    ] }),
+    timestamp && /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: {
+          fontSize: aeroTheme.typography.sizes.caption,
+          color: aeroTheme.colors.text.secondary,
+          marginTop: 4,
+          alignSelf: "flex-end",
+          fontFamily: aeroTheme.typography.fontFamily.body
+        },
+        children: timestamp
+      }
+    )
+  ] });
+};
+const ConviMessage = ({
+  message,
+  timestamp,
+  className,
+  showLogo = true,
+  sender,
+  resolveLinkPreview
+}) => {
+  return /* @__PURE__ */ jsxs(ConviMessageContainer, { className, children: [
+    /* @__PURE__ */ jsxs(ConviBubble, { children: [
+      showLogo && /* @__PURE__ */ jsxs(MessageHeader, { children: [
+        /* @__PURE__ */ jsx(LogoWrapper, { children: /* @__PURE__ */ jsx(
+          ConvaiLogo,
+          {
+            size: "sm",
+            color: "#10b981",
+            animate: false,
+            state: "connected"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(ConviLabel, { children: sender })
+      ] }),
+      /* @__PURE__ */ jsx(MarkdownRenderer, { text: message, resolveLinkPreview })
+    ] }),
+    timestamp && /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: {
+          fontSize: aeroTheme.typography.sizes.caption,
+          color: aeroTheme.colors.text.secondary,
+          marginTop: 4,
+          alignSelf: "flex-start",
+          fontFamily: aeroTheme.typography.fontFamily.body
+        },
+        children: timestamp
+      }
+    )
+  ] });
+};
+const MessageList = ({
+  messages,
+  className,
+  isStreaming = false,
+  forceToBottomToken,
+  linkPreviewResolver
+}) => {
+  const containerRef = useRef(null);
+  const [shouldAutoScroll, setShouldAutoScroll] = React.useState(true);
+  const handleScroll = useCallback((e) => {
+    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+    const isNearBottom = scrollHeight - scrollTop - clientHeight < 100;
+    setShouldAutoScroll(isNearBottom);
+  }, []);
+  const scrollToBottom = useCallback(() => {
+    const el = containerRef.current;
+    if (!el || !shouldAutoScroll) return;
+    try {
+      el.scrollTo({ top: el.scrollHeight, behavior: isStreaming ? "smooth" : "auto" });
+    } catch {
+      el.scrollTop = el.scrollHeight;
+    }
+  }, [shouldAutoScroll, isStreaming]);
+  const scrollToBottomImmediate = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    try {
+      el.scrollTo({ top: el.scrollHeight, behavior: "auto" });
+    } catch {
+      el.scrollTop = el.scrollHeight;
+    }
+  }, []);
+  useEffect(() => {
+    if (messages.length > 0) {
+      requestAnimationFrame(() => {
+        scrollToBottom();
+      });
+    }
+  }, [messages.length, scrollToBottom]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      if (!shouldAutoScroll) return;
+      try {
+        el.scrollTo({ top: el.scrollHeight, behavior: isStreaming ? "smooth" : "auto" });
+      } catch {
+        el.scrollTop = el.scrollHeight;
+      }
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [shouldAutoScroll, isStreaming]);
+  useEffect(() => {
+    if (forceToBottomToken !== void 0) {
+      requestAnimationFrame(() => scrollToBottomImmediate());
+    }
+  }, [forceToBottomToken, scrollToBottomImmediate]);
+  useEffect(() => {
+    if (containerRef.current && messages.length > 0) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, []);
+  if (messages.length === 0) {
+    return /* @__PURE__ */ jsxs(EmptyState, { children: [
+      /* @__PURE__ */ jsx("p", { children: "Start a conversation" }),
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          style: {
+            fontSize: aeroTheme.typography.sizes.caption,
+            marginTop: 8
+          },
+          children: "Type a message below to begin chatting"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    MessageListContainer,
+    {
+      ref: containerRef,
+      className,
+      onScroll: handleScroll,
+      children: messages.map((message) => /* @__PURE__ */ jsx(MessageWrapper, { children: message.isUser ? /* @__PURE__ */ jsx(
+        UserMessage,
+        {
+          message: message.text,
+          timestamp: message.timestamp,
+          sender: message.sender
+        }
+      ) : /* @__PURE__ */ jsx(
+        ConviMessage,
+        {
+          message: message.text,
+          timestamp: message.timestamp,
+          showLogo: message.showLogo,
+          sender: message.sender,
+          resolveLinkPreview: linkPreviewResolver
+        }
+      ) }, message.id))
+    }
+  );
+};
+const useLocalCameraTrack = () => {
+  const { cameraTrack, localParticipant } = useLocalParticipant();
+  const cameraTrackRef = useMemo(() => {
+    return {
+      participant: localParticipant,
+      source: Track.Source.Camera,
+      publication: cameraTrack
+    };
+  }, [localParticipant, cameraTrack]);
+  return cameraTrackRef;
+};
+const LocalVideoDisplay = ({ mirror = false }) => {
+  var _a;
+  const cameraTrackRef = useLocalCameraTrack();
+  if (!((_a = cameraTrackRef.publication) == null ? void 0 : _a.track)) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          color: aeroTheme.colors.neutral[400],
+          gap: "12px",
+          background: "#000"
+        },
+        children: [
+          /* @__PURE__ */ jsx(IoVideocamOff, { size: 48 }),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "14px", textAlign: "center" }, children: "Camera is off" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        position: "relative"
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            transform: mirror ? "scaleX(-1)" : "none",
+            width: "100%",
+            height: "100%"
+          },
+          children: /* @__PURE__ */ jsx(
+            VideoTrack,
+            {
+              trackRef: cameraTrackRef,
+              style: {
+                width: "100%",
+                height: "100%",
+                objectFit: "cover"
+              }
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const FloatingVideo = ({
+  isVisible,
+  onClose,
+  mirror = true
+}) => {
+  const room = useRoomContext();
+  const [position, setPosition] = useState({ x: 20, y: 20 });
+  const [isDragging, setIsDragging] = useState(false);
+  const containerRef = useRef(null);
+  const handleDragEnd = (event, info) => {
+    var _a, _b;
+    setIsDragging(false);
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+    const containerWidth = ((_a = containerRef.current) == null ? void 0 : _a.offsetWidth) || 320;
+    const containerHeight = ((_b = containerRef.current) == null ? void 0 : _b.offsetHeight) || 240;
+    let newX = position.x + info.offset.x;
+    let newY = position.y + info.offset.y;
+    newX = Math.max(0, Math.min(newX, windowWidth - containerWidth));
+    newY = Math.max(0, Math.min(newY, windowHeight - containerHeight));
+    setPosition({ x: newX, y: newY });
+  };
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsx(RoomContext.Provider, { value: room, children: /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      ref: containerRef,
+      drag: true,
+      dragMomentum: false,
+      dragElastic: 0,
+      onDragStart: () => setIsDragging(true),
+      onDragEnd: handleDragEnd,
+      initial: { opacity: 0, scale: 0.8 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.8 },
+      transition: iosTransitions.modalSlide,
+      style: {
+        position: "fixed",
+        left: position.x,
+        top: position.y,
+        zIndex: 1e4,
+        width: "320px",
+        borderRadius: aeroTheme.borderRadius.lg,
+        overflow: "hidden",
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)",
+        cursor: isDragging ? "grabbing" : "grab"
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            background: "rgba(15, 23, 42, 0.95)",
+            backdropFilter: "blur(20px)",
+            border: `1px solid ${aeroTheme.colors.neutral[700]}`,
+            borderRadius: aeroTheme.borderRadius.lg,
+            overflow: "hidden"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: "8px 12px",
+                  background: "rgba(0, 0, 0, 0.3)",
+                  borderBottom: `1px solid ${aeroTheme.colors.neutral[700]}`
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "8px",
+                        color: aeroTheme.colors.neutral[300],
+                        fontSize: "12px",
+                        fontWeight: 500
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(MdDragIndicator, { size: 16 }),
+                        /* @__PURE__ */ jsx("span", { children: "Your Camera" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    motion.button,
+                    {
+                      onPointerDown: (e) => e.stopPropagation(),
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onClose();
+                      },
+                      whileHover: { scale: 1.1 },
+                      whileTap: { scale: 0.9 },
+                      style: {
+                        background: "transparent",
+                        border: "none",
+                        color: aeroTheme.colors.neutral[400],
+                        cursor: "pointer",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        padding: "4px"
+                      },
+                      "aria-label": "Close video",
+                      children: /* @__PURE__ */ jsx(IoClose, { size: 20 })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "relative",
+                  width: "100%",
+                  paddingBottom: "75%",
+                  // 4:3 aspect ratio
+                  background: "#000"
+                },
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width: "100%",
+                      height: "100%"
+                    },
+                    children: /* @__PURE__ */ jsx(LocalVideoDisplay, { mirror })
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+};
+const VisualizerContainer = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+  border-radius: 50%;
+  overflow: visible;
+`;
+const Canvas = styled.canvas`
+  display: block;
+  width: 100%;
+  height: 100%;
+`;
+const AudioVisualizer = ({
+  room,
+  size = 350,
+  color = "#10b981",
+  opacity = 0.4,
+  avatarRadius = 80,
+  barCount = 64,
+  onSpeakingChange
+}) => {
+  const canvasRef = useRef(null);
+  const animationFrameRef = useRef(null);
+  const audioContextRef = useRef(null);
+  const analyserRef = useRef(null);
+  const sourceNodeRef = useRef(null);
+  const isActiveRef = useRef(false);
+  const timeRef = useRef(0);
+  const previousSpeakingStateRef = useRef(false);
+  const bandEdgesRef = useRef(null);
+  useEffect(() => {
+    if (!room) return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    canvas.width = size;
+    canvas.height = size;
+    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    const analyser = audioContext.createAnalyser();
+    analyser.fftSize = 512;
+    analyser.smoothingTimeConstant = 0.6;
+    audioContextRef.current = audioContext;
+    analyserRef.current = analyser;
+    const buildLogBands = () => {
+      const nyquist = audioContext.sampleRate / 2;
+      const bufferLength2 = analyser.frequencyBinCount;
+      const minHz = 60;
+      const maxHz = Math.min(8e3, nyquist);
+      const edges = Array.from({ length: barCount + 1 }, (_, k) => {
+        const hz = minHz * Math.pow(maxHz / minHz, k / barCount);
+        const bin = Math.max(
+          0,
+          Math.min(bufferLength2 - 1, Math.floor(hz / nyquist * bufferLength2))
+        );
+        return bin;
+      });
+      for (let i = 1; i < edges.length; i++) {
+        if (edges[i] <= edges[i - 1]) edges[i] = Math.min(edges[i - 1] + 1, bufferLength2 - 1);
+      }
+      bandEdgesRef.current = edges;
+    };
+    const findBotParticipant = (remoteParticipants, localParticipant) => {
+      const participants = Array.from(remoteParticipants.values()).filter(
+        (p) => p !== localParticipant && p !== room.localParticipant
+      );
+      if (participants.length === 0) {
+        return null;
+      }
+      const participantsWithAudio = participants.filter((participant) => {
+        if (!participant.trackPublications) return false;
+        const audioTracks = Array.from(participant.trackPublications.values()).filter(
+          (p) => p.kind === "audio" && p.track
+        );
+        return audioTracks.length > 0;
+      });
+      return participantsWithAudio.length > 0 ? participantsWithAudio[0] : participants[0];
+    };
+    const setupAudioSource = async () => {
+      try {
+        if (audioContext.state === "suspended") await audioContext.resume();
+        const remoteParticipants = room.remoteParticipants;
+        if (remoteParticipants.size === 0) {
+          isActiveRef.current = false;
+          return;
+        }
+        const botParticipant = findBotParticipant(remoteParticipants, room.localParticipant);
+        if (!botParticipant) {
+          isActiveRef.current = false;
+          return;
+        }
+        const audioTracks = Array.from(botParticipant.trackPublications.values()).filter(
+          (p) => p.kind === "audio" && p.track
+        );
+        if (audioTracks.length === 0) {
+          isActiveRef.current = false;
+          return;
+        }
+        const liveKitTrack = audioTracks[0].track;
+        const mediaStreamTrack = liveKitTrack.mediaStreamTrack;
+        if (!mediaStreamTrack) {
+          isActiveRef.current = false;
+          return;
+        }
+        const mediaStream = new MediaStream([mediaStreamTrack]);
+        if (sourceNodeRef.current) sourceNodeRef.current.disconnect();
+        const source = audioContext.createMediaStreamSource(mediaStream);
+        source.connect(analyser);
+        sourceNodeRef.current = source;
+        buildLogBands();
+        isActiveRef.current = true;
+      } catch {
+        isActiveRef.current = false;
+      }
+    };
+    setupAudioSource();
+    const setupTimeout = setTimeout(setupAudioSource, 500);
+    const handleTrackSubscribed = (track, publication, participant) => {
+      if (track && track.kind === "audio" && participant !== room.localParticipant) {
+        setTimeout(setupAudioSource, 200);
+      }
+    };
+    const handleParticipantConnected = (participant) => {
+      if (participant !== room.localParticipant) setTimeout(setupAudioSource, 200);
+    };
+    room.on("trackSubscribed", handleTrackSubscribed);
+    room.on("participantConnected", handleParticipantConnected);
+    const bufferLength = analyser.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
+    let frameParity = 0;
+    let idleFramesPainted = 0;
+    const draw = () => {
+      frameParity ^= 1;
+      if (frameParity) {
+        animationFrameRef.current = requestAnimationFrame(draw);
+        return;
+      }
+      timeRef.current += 0.16;
+      analyser.getByteFrequencyData(dataArray);
+      {
+        let t = 0;
+        for (let i = 0; i < bufferLength; i++) t += dataArray[i] || 0;
+        if (!isActiveRef.current || t / (bufferLength * 255) < 0.01) {
+          if (idleFramesPainted > 20) {
+            animationFrameRef.current = requestAnimationFrame(draw);
+            return;
+          }
+          idleFramesPainted++;
+        } else {
+          idleFramesPainted = 0;
+        }
+      }
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      const centerX = canvas.width / 2;
+      const centerY = canvas.height / 2;
+      const characterRadius = 60;
+      const innerRadius = characterRadius;
+      const outerRadius = avatarRadius;
+      const maxBarLength = outerRadius - innerRadius;
+      ctx.save();
+      const angleStep = Math.PI * 2 / barCount;
+      let total = 0;
+      for (let i = 0; i < bufferLength; i++) total += isActiveRef.current ? dataArray[i] || 0 : 0;
+      const overallLevel = total / (bufferLength * 255);
+      const speakingThreshold = 0.1;
+      const isSpeaking = isActiveRef.current && overallLevel > speakingThreshold;
+      if (onSpeakingChange && isSpeaking !== previousSpeakingStateRef.current) {
+        previousSpeakingStateRef.current = isSpeaking;
+        onSpeakingChange(isSpeaking);
+      }
+      if (!bandEdgesRef.current) {
+        bandEdgesRef.current = Array.from(
+          { length: barCount + 1 },
+          (_, k) => Math.floor(k / barCount * bufferLength)
+        );
+      }
+      const edges = bandEdgesRef.current;
+      const waveRevolutions = 2;
+      const phasePerBar = Math.PI * 2 * waveRevolutions / barCount;
+      const baseWaveAmp = 0.35;
+      const waveAmp = baseWaveAmp * (0.3 + 0.7 * overallLevel);
+      for (let i = 0; i < barCount; i++) {
+        const angle = i * angleStep - Math.PI / 2;
+        const startFreq = edges[i];
+        const endFreq = edges[i + 1];
+        let sum = 0;
+        let count = 0;
+        for (let f = startFreq; f < endFreq && f < bufferLength; f++) {
+          sum += isActiveRef.current ? dataArray[f] || 0 : 0;
+          count++;
+        }
+        const bandAvg = count > 0 ? sum / (count * 255) : 0;
+        const energy = 0.4 * bandAvg + 0.6 * overallLevel;
+        const wavePhase = i * phasePerBar;
+        const wave = 1 + waveAmp * Math.sin(timeRef.current + wavePhase);
+        const intensity = Math.min(1, energy * wave);
+        const length = Math.max(maxBarLength * 0.03, intensity * maxBarLength * 0.95);
+        const startX = centerX + Math.cos(angle) * innerRadius;
+        const startY = centerY + Math.sin(angle) * innerRadius;
+        const endX = centerX + Math.cos(angle) * (innerRadius + length);
+        const endY = centerY + Math.sin(angle) * (innerRadius + length);
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 5;
+        ctx.lineCap = "round";
+        ctx.globalAlpha = opacity * (0.5 + 0.5 * intensity);
+        ctx.beginPath();
+        ctx.moveTo(startX, startY);
+        ctx.lineTo(endX, endY);
+        ctx.stroke();
+      }
+      ctx.globalAlpha = 1;
+      ctx.restore();
+      animationFrameRef.current = requestAnimationFrame(draw);
+    };
+    draw();
+    return () => {
+      clearTimeout(setupTimeout);
+      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
+      if (sourceNodeRef.current) sourceNodeRef.current.disconnect();
+      if (analyserRef.current) analyserRef.current.disconnect();
+      if (audioContextRef.current && audioContextRef.current.state !== "closed") {
+        audioContextRef.current.close();
+      }
+      room.off("trackSubscribed", handleTrackSubscribed);
+      room.off("participantConnected", handleParticipantConnected);
+    };
+  }, [room, size, color, opacity, avatarRadius, barCount, onSpeakingChange]);
+  return /* @__PURE__ */ jsx(VisualizerContainer, { style: { width: size, height: size }, children: /* @__PURE__ */ jsx(Canvas, { ref: canvasRef }) });
+};
+const SettingsTray = ({
+  isOpen,
+  isVideoVisible,
+  isScreenShareActive,
+  onReset,
+  onDisconnect,
+  onToggleVideo,
+  onToggleScreenShare
+}) => {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
+    SettingsTray$1,
+    {
+      "data-settings-tray": true,
+      initial: { opacity: 0, y: -10, scale: 0.95 },
+      animate: { opacity: 1, y: 0, scale: 1 },
+      exit: { opacity: 0, y: -10, scale: 0.95 },
+      transition: iosTransitions.fadePop,
+      style: {
+        position: "absolute",
+        top: "60px",
+        right: "16px",
+        zIndex: 9999
+      },
+      onClick: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            padding: "8px",
+            gap: "4px"
+          },
+          children: [
+            onReset && /* @__PURE__ */ jsxs(
+              SettingsOption,
+              {
+                onClick: onReset,
+                whileHover: { scale: 1.02 },
+                whileTap: { scale: 0.98 },
+                transition: iosTransitions.snappy,
+                style: {
+                  cursor: "pointer",
+                  flexDirection: "column",
+                  gap: "4px",
+                  padding: "8px 12px"
+                },
+                "aria-label": "Reset",
+                title: "Reset",
+                children: [
+                  /* @__PURE__ */ jsx(LiaRedoAltSolid, { size: 18 }),
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: "10px", fontWeight: 500 }, children: "Reset" })
+                ]
+              }
+            ),
+            onToggleVideo && /* @__PURE__ */ jsxs(
+              SettingsOption,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onToggleVideo();
+                },
+                whileHover: { scale: 1.02 },
+                whileTap: { scale: 0.98 },
+                transition: iosTransitions.snappy,
+                style: {
+                  cursor: "pointer",
+                  flexDirection: "column",
+                  gap: "4px",
+                  padding: "8px 12px",
+                  backgroundColor: isVideoVisible ? "rgba(16, 185, 129, 0.15)" : "transparent",
+                  color: isVideoVisible ? "#10b981" : aeroTheme.colors.text.primary
+                },
+                "aria-label": isVideoVisible ? "Hide Video" : "Show Video",
+                title: isVideoVisible ? "Hide Video" : "Show Video",
+                children: [
+                  isVideoVisible ? /* @__PURE__ */ jsx(IoVideocam, { size: 18 }) : /* @__PURE__ */ jsx(IoVideocamOff, { size: 18 }),
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: "10px", fontWeight: 500 }, children: "Video" })
+                ]
+              }
+            ),
+            onToggleScreenShare && /* @__PURE__ */ jsxs(
+              SettingsOption,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onToggleScreenShare();
+                },
+                whileHover: { scale: 1.02 },
+                whileTap: { scale: 0.98 },
+                transition: iosTransitions.snappy,
+                style: {
+                  cursor: "pointer",
+                  flexDirection: "column",
+                  gap: "4px",
+                  padding: "8px 12px",
+                  backgroundColor: isScreenShareActive ? "rgba(16, 185, 129, 0.15)" : "transparent",
+                  color: isScreenShareActive ? "#10b981" : aeroTheme.colors.text.primary
+                },
+                "aria-label": isScreenShareActive ? "Stop Sharing" : "Share Screen",
+                title: isScreenShareActive ? "Stop Sharing" : "Share Screen",
+                children: [
+                  isScreenShareActive ? /* @__PURE__ */ jsx(MdStopScreenShare, { size: 18 }) : /* @__PURE__ */ jsx(MdScreenShare, { size: 18 }),
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: "10px", fontWeight: 500 }, children: "Screen" })
+                ]
+              }
+            ),
+            onDisconnect && /* @__PURE__ */ jsxs(
+              SettingsOption,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onDisconnect();
+                },
+                whileHover: { scale: 1.02 },
+                whileTap: { scale: 0.98 },
+                transition: iosTransitions.snappy,
+                style: {
+                  cursor: "pointer",
+                  flexDirection: "column",
+                  gap: "4px",
+                  padding: "8px 12px",
+                  backgroundColor: "rgba(239, 68, 68, 0.1)",
+                  color: "#ef4444"
+                },
+                "aria-label": "Disconnect",
+                title: "Disconnect",
+                children: [
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: "18px" }, children: "⏻" }),
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: "10px", fontWeight: 500 }, children: "Disconnect" })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+};
+const VoiceModeOverlay = ({
+  isActive,
+  isTalking,
+  isListening = false,
+  convaiClient,
+  characterImage,
+  characterName = "Character",
+  room
+}) => {
+  var _a;
+  const barsCount = 40;
+  const audioLevelsRef = useRef(Array(barsCount).fill(0));
+  const waveCanvasRef = useRef(null);
+  const analyzerRef = useRef(null);
+  const animationFrameRef = useRef(void 0);
+  const audioContextRef = useRef(null);
+  const waveFrameParityRef = useRef(0);
+  const waveWasSilentRef = useRef(false);
+  const drawWaves = () => {
+    waveFrameParityRef.current ^= 1;
+    if (waveFrameParityRef.current) return;
+    const canvas = waveCanvasRef.current;
+    if (!canvas) return;
+    {
+      const lv = audioLevelsRef.current;
+      let sum = 0;
+      for (let i = 0; i < lv.length; i++) sum += lv[i];
+      const silent = sum / lv.length < 0.012;
+      if (silent && waveWasSilentRef.current) return;
+      waveWasSilentRef.current = silent;
+    }
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    if (canvas.width !== 250 * dpr) {
+      canvas.width = 250 * dpr;
+      canvas.height = 80 * dpr;
+    }
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, 250, 80);
+    const audioLevels = audioLevelsRef.current;
+    const centerY = 40;
+    const waveWidth = 250;
+    const segments = barsCount;
+    const avgLevel = audioLevels.reduce((sum, level) => sum + level, 0) / audioLevels.length;
+    const waveColors = [
+      aeroTheme.colors.convai.light,
+      aeroTheme.colors.convai.light,
+      "#34d399"
+    ];
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    for (let waveIndex = 2; waveIndex >= 0; waveIndex--) {
+      ctx.beginPath();
+      for (let i = 0; i <= segments; i++) {
+        const x = i / segments * waveWidth;
+        const levelIndex = Math.floor(i / segments * (audioLevels.length - 1));
+        const level = audioLevels[levelIndex] || 0;
+        const phase = (Date.now() / 500 + i * 0.2 + waveIndex * 1.5) % (Math.PI * 2);
+        const baseAmplitude = avgLevel > 0.05 ? 2 + waveIndex * 1.5 : 0;
+        const amplitude = baseAmplitude + level * (25 - baseAmplitude);
+        const y = centerY + Math.sin(phase) * amplitude;
+        if (i === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+      }
+      ctx.strokeStyle = waveColors[waveIndex];
+      ctx.globalAlpha = 0.18 * (0.3 + avgLevel);
+      ctx.lineWidth = 2.5 - waveIndex * 0.4 + 8 * avgLevel + 3;
+      ctx.stroke();
+      ctx.globalAlpha = 0.95 - waveIndex * 0.15;
+      ctx.lineWidth = 2.5 - waveIndex * 0.4;
+      ctx.stroke();
+    }
+    ctx.globalAlpha = 1;
+  };
+  useEffect(() => {
+    if (!isActive) {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+      audioLevelsRef.current = Array(barsCount).fill(0);
+      drawWaves();
+      return;
+    }
+    let stream = null;
+    const setupAudioAnalysis = async () => {
+      try {
+        stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        audioContextRef.current = audioContext;
+        const analyzer = audioContext.createAnalyser();
+        analyzer.fftSize = 256;
+        analyzer.smoothingTimeConstant = 0.7;
+        analyzerRef.current = analyzer;
+        const source = audioContext.createMediaStreamSource(stream);
+        source.connect(analyzer);
+        const dataArray = new Uint8Array(analyzer.fftSize);
+        const updateLevels = () => {
+          if (!analyzerRef.current) return;
+          analyzer.getByteTimeDomainData(dataArray);
+          let sum = 0;
+          for (let i = 0; i < dataArray.length; i++) {
+            const normalized = (dataArray[i] - 128) / 128;
+            sum += normalized * normalized;
+          }
+          const rms = Math.sqrt(sum / dataArray.length);
+          const volume = Math.min(1, rms * 3);
+          const levels = audioLevelsRef.current;
+          for (let i = 0; i < barsCount; i++) {
+            const position = i / barsCount;
+            const wavePhase = Date.now() / 300 + position * Math.PI * 2;
+            const waveVariation = Math.sin(wavePhase) * 0.15 + 0.85;
+            levels[i] = volume * waveVariation;
+          }
+          drawWaves();
+          animationFrameRef.current = requestAnimationFrame(updateLevels);
+        };
+        updateLevels();
+      } catch (error) {
+        console.error("Error setting up audio analysis:", error);
+      }
+    };
+    setupAudioAnalysis();
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+      if (stream) {
+        stream.getTracks().forEach((track) => track.stop());
+      }
+      if (audioContextRef.current) {
+        audioContextRef.current.close();
+      }
+    };
+  }, [isActive, barsCount]);
+  const [isBotSpeaking, setIsBotSpeaking] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        textAlign: "center",
+        padding: "1rem",
+        zIndex: 10,
+        pointerEvents: "none",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "2rem"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "relative",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              isolation: "isolate"
+              // Create stacking context
+            },
+            children: [
+              room && /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  initial: { opacity: 0, scale: 0.8 },
+                  animate: {
+                    opacity: isBotSpeaking ? 1 : 0,
+                    scale: isBotSpeaking ? 1 : 0.8
+                  },
+                  transition: iosTransitions.fadePop,
+                  style: {
+                    position: "absolute",
+                    width: "220px",
+                    height: "220px",
+                    zIndex: -1,
+                    // Negative z-index to ensure it's behind
+                    pointerEvents: "none"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    AudioVisualizer,
+                    {
+                      room,
+                      size: 220,
+                      color: aeroTheme.colors.convai.light,
+                      opacity: 0.6,
+                      avatarRadius: 110,
+                      barCount: 48,
+                      onSpeakingChange: setIsBotSpeaking
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                motion.div,
+                {
+                  initial: { scale: 0.8, opacity: 0 },
+                  animate: { scale: 1, opacity: 1 },
+                  exit: { scale: 0.8, opacity: 0 },
+                  transition: iosTransitions.fadePop,
+                  style: {
+                    position: "relative",
+                    zIndex: 10,
+                    // Higher z-index to be clearly on top
+                    borderRadius: "50%",
+                    overflow: "visible",
+                    // Changed to visible to show glow
+                    boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)",
+                    background: "white"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      motion.div,
+                      {
+                        animate: {
+                          rotate: [0, 360],
+                          scale: isBotSpeaking ? [1, 1.05, 1.02, 1.05, 1] : 1
+                        },
+                        transition: {
+                          rotate: { duration: 20, repeat: Infinity, ease: "linear" },
+                          scale: { duration: 3, repeat: Infinity, ease: "easeInOut" }
+                        },
+                        style: {
+                          position: "absolute",
+                          width: "126px",
+                          height: "126px",
+                          borderRadius: "50%",
+                          background: `
+                conic-gradient(
+                  from 0deg,
+                  ${aeroTheme.colors.convai.light}00 0%,
+                  ${aeroTheme.colors.convai.light}40 25%,
+                  ${aeroTheme.colors.convai.dark}60 50%,
+                  ${aeroTheme.colors.convai.light}40 75%,
+                  ${aeroTheme.colors.convai.light}00 100%
+                )
+              `,
+                          opacity: 0.8,
+                          filter: "blur(8px)",
+                          zIndex: -2
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      motion.div,
+                      {
+                        animate: {
+                          rotate: [360, 0],
+                          scale: isBotSpeaking ? [1, 1.03, 1.06, 1.03, 1] : 1
+                        },
+                        transition: {
+                          rotate: { duration: 15, repeat: Infinity, ease: "linear" },
+                          scale: { duration: 2.5, repeat: Infinity, ease: "easeInOut" }
+                        },
+                        style: {
+                          position: "absolute",
+                          width: "126px",
+                          height: "126px",
+                          borderRadius: "50%",
+                          background: `
+                radial-gradient(
+                  ellipse 80% 100% at 30% 40%,
+                  ${aeroTheme.colors.convai.light}50,
+                  ${aeroTheme.colors.convai.light}30 40%,
+                  transparent 70%
+                ),
+                radial-gradient(
+                  ellipse 80% 100% at 70% 60%,
+                  ${aeroTheme.colors.convai.dark}50,
+                  ${aeroTheme.colors.convai.dark}30 40%,
+                  transparent 70%
+                )
+              `,
+                          opacity: 0.9,
+                          filter: "blur(6px)",
+                          zIndex: -1
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          position: "relative",
+                          borderRadius: "50%",
+                          overflow: "hidden",
+                          border: `3px solid rgba(255, 255, 255, 0.2)`
+                        },
+                        children: characterImage ? /* @__PURE__ */ jsx(
+                          motion.img,
+                          {
+                            src: characterImage,
+                            alt: characterName,
+                            animate: {
+                              scale: isBotSpeaking ? 1.05 : 1
+                            },
+                            transition: {
+                              duration: 0.3,
+                              ease: "easeInOut"
+                            },
+                            style: {
+                              width: "120px",
+                              height: "120px",
+                              objectFit: "cover",
+                              display: "block"
+                            }
+                          }
+                        ) : /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              width: "120px",
+                              height: "120px",
+                              backgroundColor: aeroTheme.colors.convai.light + "20",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              fontSize: "48px",
+                              color: aeroTheme.colors.convai.light,
+                              fontWeight: 600
+                            },
+                            children: ((_a = characterName[0]) == null ? void 0 : _a.toUpperCase()) || "C"
+                          }
+                        )
+                      }
+                    )
+                  ]
+                },
+                "center-avatar"
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(AnimatePresence, { children: isActive && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            exit: { opacity: 0, y: -20 },
+            transition: iosTransitions.fadePop,
+            style: {
+              width: "250px",
+              height: "80px",
+              position: "relative"
+            },
+            children: /* @__PURE__ */ jsx(
+              "canvas",
+              {
+                ref: waveCanvasRef,
+                style: { width: "250px", height: "80px" }
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: { opacity: 0, y: 10 },
+            animate: { opacity: 1, y: 0 },
+            transition: { delay: 0.2, ...iosTransitions.fadePop },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontSize: "16px",
+                    fontWeight: 600,
+                    color: aeroTheme.colors.text.primary,
+                    marginBottom: "0.5rem"
+                  },
+                  children: isTalking ? `${characterName} Speaking...` : isListening || isActive ? "Listening..." : "Voice Mode"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontSize: "13px",
+                    color: aeroTheme.colors.text.secondary
+                  },
+                  children: isListening || isActive || isTalking ? "Audio active" : "Tap microphone to talk"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const ConvaiWidget = ({
+  convaiClient,
+  showVideo = true,
+  showScreenShare = true,
+  defaultVoiceMode = true,
+  requestPublicationGrant,
+  publishedChatConnectOptions,
+  publishedChatDescriptor,
+  linkPreviewResolver
+}) => {
+  var _a, _b, _c, _d;
+  const isTextOnly = Boolean(requestPublicationGrant) || convaiClient.connectionType === "text";
+  const {
+    name: fetchedCharacterName,
+    image: fetchedCharacterImage,
+    isLoading: isFetchedCharacterLoading
+  } = useCharacterInfo(
+    convaiClient.characterId || void 0,
+    convaiClient.apiKey || void 0,
+    convaiClient.authToken || void 0,
+    convaiClient.characterInfoUrl
+  );
+  const characterName = (publishedChatDescriptor == null ? void 0 : publishedChatDescriptor.display_name) || fetchedCharacterName;
+  const characterImage = (_a = publishedChatDescriptor == null ? void 0 : publishedChatDescriptor.image_url) != null ? _a : fetchedCharacterImage;
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const [isVoiceMode, setIsVoiceMode] = useState(
+    defaultVoiceMode && !isTextOnly
+  );
+  const [isMuted, setIsMuted] = useState(false);
+  const [isVideoVisible, setIsVideoVisible] = useState(false);
+  const [hasEnteredDefaultVoiceMode, setHasEnteredDefaultVoiceMode] = useState(false);
+  const settingsButtonRef = useRef(null);
+  const hasConnectedBeforeRef = useRef(false);
+  const isStartingConnectionRef = useRef(false);
+  const isUnmountedRef = useRef(false);
+  const requiresBotReadyForText = Boolean(requestPublicationGrant) || convaiClient.isPublishedChatSession;
+  const canSendText = convaiClient.state.isConnected && (!requiresBotReadyForText || convaiClient.isBotReady);
+  const selectedCharacter = {
+    id: convaiClient.characterId || "unknown",
+    name: characterName,
+    image: characterImage
+  };
+  const getBotStatusColor = () => {
+    if (!convaiClient.state.isConnected) {
+      return { color: "#ef4444", label: "Disconnected" };
+    }
+    if (convaiClient.state.isConnecting || !convaiClient.isBotReady) {
+      return { color: "#f59e0b", label: "Connecting" };
+    }
+    if (convaiClient.state.isListening) {
+      return { color: "#3b82f6", label: "Listening" };
+    }
+    return { color: "#10b981", label: "Connected" };
+  };
+  const formatMessages = () => {
+    const filteredMessages = convaiClient.chatMessages.filter(
+      (msg) => (msg.type === "user-transcription" || msg.type === "user-llm-text" || msg.type === "bot-llm-text" || msg.type === "bot-output" || msg.type === "bot-emotion") && msg.content && // Ensure content exists
+      msg.content.trim().length > 0
+      // Ensure content is not empty or just whitespace
+    );
+    return filteredMessages.map((msg) => ({
+      id: msg.id,
+      text: msg.content,
+      isUser: msg.type.includes("user"),
+      timestamp: new Date(msg.timestamp).toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit"
+      }),
+      sender: msg.type.includes("user") ? "You" : selectedCharacter.name,
+      showLogo: msg.type.includes("bot")
+    }));
+  };
+  const handleToggle = async () => {
+    if (isStartingConnectionRef.current) {
+      return;
+    }
+    if (!convaiClient.state.isConnected && !convaiClient.state.isConnecting) {
+      isStartingConnectionRef.current = true;
+      try {
+        if (requestPublicationGrant || convaiClient.isPublishedChatSession) {
+          if (!requestPublicationGrant) {
+            throw new Error(
+              "Published chat widgets require requestPublicationGrant to start a new session"
+            );
+          }
+          if (!convaiClient.connectWithPublicationGrant) {
+            throw new Error(
+              "This Convai client does not support published chat connections"
+            );
+          }
+          const launchToken = await requestPublicationGrant();
+          if (isUnmountedRef.current) return;
+          await convaiClient.connectWithPublicationGrant(
+            launchToken,
+            freshPublicationGrantOptions(publishedChatConnectOptions)
+          );
+        } else if (hasConnectedBeforeRef.current && typeof convaiClient.reconnect === "function") {
+          await convaiClient.reconnect();
+        } else {
+          await convaiClient.connect();
+        }
+        if (isUnmountedRef.current) {
+          await convaiClient.disconnect();
+          return;
+        }
+        setIsOpen(true);
+      } catch (error) {
+        console.error("Failed to connect:", error);
+      } finally {
+        isStartingConnectionRef.current = false;
+      }
+    } else {
+      setIsOpen(!isOpen);
+    }
+  };
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+  };
+  const handleSend = () => {
+    if (inputValue.trim() && canSendText) {
+      convaiClient.sendUserTextMessage(inputValue);
+      setInputValue("");
+    }
+  };
+  const handleKeyPress = (e) => {
+    if (e.key === "Enter") {
+      handleSend();
+    }
+  };
+  const handleToggleMute = () => {
+    const newMutedState = !isMuted;
+    convaiClient.setCharacterMuted(newMutedState);
+    setIsMuted(newMutedState);
+  };
+  const handleReset = async () => {
+    setIsSettingsOpen(false);
+    try {
+      await convaiClient.disconnect();
+      convaiClient.resetSession();
+      setIsMuted(false);
+      setIsVoiceMode(false);
+    } catch (error) {
+      console.error("Failed to reset:", error);
+    }
+  };
+  const handleDisconnect = async () => {
+    setIsSettingsOpen(false);
+    await convaiClient.disconnect();
+    setIsMuted(false);
+    setIsVoiceMode(false);
+  };
+  const handleToggleVideo = async () => {
+    if (convaiClient.connectionType !== "video") {
+      console.warn("Video capability requires connection type to be 'video'");
+      return;
+    }
+    if (convaiClient.isVideoEnabled) {
+      await convaiClient.videoControls.disableVideo();
+    } else {
+      await convaiClient.videoControls.enableVideo();
+    }
+  };
+  const handleToggleScreenShare = async () => {
+    await convaiClient.screenShareControls.toggleScreenShare();
+  };
+  const handleSettingsToggle = () => {
+    setIsSettingsOpen(!isSettingsOpen);
+  };
+  useEffect(() => {
+    isUnmountedRef.current = false;
+    return () => {
+      isUnmountedRef.current = true;
+    };
+  }, []);
+  useEffect(() => {
+    if (convaiClient.state.isConnected) {
+      hasConnectedBeforeRef.current = true;
+    }
+  }, [convaiClient.state.isConnected]);
+  useEffect(() => {
+    if (!convaiClient.state.isConnected && !convaiClient.state.isConnecting) {
+      if (isOpen) {
+        setIsOpen(false);
+      }
+      setIsMuted(false);
+      setIsVoiceMode(false);
+      setHasEnteredDefaultVoiceMode(false);
+    }
+  }, [convaiClient.state.isConnected, convaiClient.state.isConnecting, isOpen]);
+  useEffect(() => {
+    setIsVideoVisible(convaiClient.isVideoEnabled);
+  }, [convaiClient.isVideoEnabled]);
+  useEffect(() => {
+    if (isTextOnly && isVoiceMode) {
+      setIsVoiceMode(false);
+    }
+  }, [isTextOnly, isVoiceMode]);
+  useEffect(() => {
+    const ensureMicState = async () => {
+      if (!isVoiceMode && !convaiClient.isAudioMuted) {
+        await convaiClient.audioControls.muteAudio();
+      }
+    };
+    ensureMicState();
+  }, [isVoiceMode, convaiClient]);
+  const showVoiceMode = isVoiceMode || defaultVoiceMode && !isTextOnly && !hasEnteredDefaultVoiceMode;
+  useEffect(() => {
+    if (isOpen && defaultVoiceMode && !isTextOnly && convaiClient.state.isConnected && !hasEnteredDefaultVoiceMode && !isVoiceMode) {
+      const enterVoiceMode = async () => {
+        try {
+          await convaiClient.audioControls.unmuteAudio();
+          setIsVoiceMode(true);
+          setHasEnteredDefaultVoiceMode(true);
+        } catch (error) {
+          console.error("Failed to enter voice mode:", error);
+        }
+      };
+      enterVoiceMode();
+    }
+  }, [isOpen, defaultVoiceMode, isTextOnly, convaiClient.state.isConnected, hasEnteredDefaultVoiceMode, isVoiceMode, convaiClient]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (isSettingsOpen && settingsButtonRef.current) {
+        const target = event.target;
+        const settingsButton = settingsButtonRef.current;
+        if (!settingsButton.contains(target)) {
+          const settingsTray = document.querySelector("[data-settings-tray]");
+          if (settingsTray && !settingsTray.contains(target)) {
+            setIsSettingsOpen(false);
+          }
+        }
+      }
+    };
+    if (isSettingsOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isSettingsOpen]);
+  const getLogoState = () => {
+    if (convaiClient.state.isConnecting) return "connecting";
+    if (convaiClient.state.isConnected) return "connected";
+    return "idle";
+  };
+  const getLogoColor = () => {
+    if (convaiClient.state.isConnected) return aeroTheme.colors.primary[500];
+    if (convaiClient.state.isConnecting) return aeroTheme.colors.primary[300];
+    return aeroTheme.colors.primary[500];
+  };
+  const audioRendererRef = useRef(null);
+  useEffect(() => {
+    if (!convaiClient.room || convaiClient.room.state !== "connected") return;
+    audioRendererRef.current = new AudioRenderer(convaiClient.room);
+    return () => {
+      if (audioRendererRef.current) {
+        audioRendererRef.current.destroy();
+        audioRendererRef.current = null;
+      }
+    };
+  }, [convaiClient.room, convaiClient.state.isConnected]);
+  return /* @__PURE__ */ jsxs(RoomContext.Provider, { value: ((_b = convaiClient.room) == null ? void 0 : _b.state) === "connected" ? convaiClient.room : void 0, children: [
+    /* @__PURE__ */ jsxs(
+      ConvaiContainer,
+      {
+        initial: { opacity: 0, scale: 0.8 },
+        animate: { opacity: 1, scale: 1 },
+        transition: { duration: 0.4, ease: "easeOut" },
+        children: [
+          /* @__PURE__ */ jsxs(
+            MorphingContainer,
+            {
+              onClick: !isOpen ? handleToggle : void 0,
+              whileHover: !isOpen ? { scale: 1.05 } : void 0,
+              whileTap: !isOpen ? { scale: 0.95 } : void 0,
+              animate: {
+                width: isOpen ? "400px" : "4rem",
+                height: isOpen ? "600px" : "4rem",
+                borderRadius: isOpen ? aeroTheme.borderRadius.xl : "50%"
+              },
+              transition: { duration: 0.3, ease: "easeInOut" },
+              style: { cursor: !isOpen ? "pointer" : "default" },
+              children: [
+                /* @__PURE__ */ jsx(
+                  ButtonContent,
+                  {
+                    animate: {
+                      opacity: isOpen ? 0 : 1,
+                      scale: isOpen ? 0.8 : 1
+                    },
+                    transition: { duration: 0.3 },
+                    children: /* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(
+                      ConvaiLogo,
+                      {
+                        size: "xl",
+                        color: getLogoColor(),
+                        animate: convaiClient.state.isConnecting,
+                        state: getLogoState()
+                      }
+                    ) })
+                  }
+                ),
+                convaiClient.state.isConnected && /* @__PURE__ */ jsxs(
+                  ChatContent,
+                  {
+                    animate: {
+                      opacity: isOpen ? 1 : 0,
+                      scale: isOpen ? 1 : 0.8
+                    },
+                    transition: {
+                      duration: 0.2,
+                      delay: isOpen ? 0.2 : 0
+                    },
+                    style: {
+                      pointerEvents: isOpen ? "auto" : "none"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        Header,
+                        {
+                          initial: { opacity: 0, y: -20 },
+                          animate: {
+                            opacity: isOpen ? 1 : 0,
+                            y: isOpen ? 0 : -20
+                          },
+                          transition: {
+                            delay: isOpen ? 0.4 : 0,
+                            ...iosTransitions.modalSlide
+                          },
+                          style: {
+                            pointerEvents: isOpen ? "auto" : "none",
+                            minHeight: "3.5rem"
+                            // Ensure consistent height
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              CloseButton,
+                              {
+                                onClick: handleClose,
+                                whileHover: { scale: 1.1 },
+                                whileTap: { scale: 0.9 },
+                                transition: iosTransitions.snappy,
+                                style: { cursor: "pointer", pointerEvents: "auto" },
+                                children: /* @__PURE__ */ jsx(ChevronDown, { size: "md" })
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs(Title, { children: [
+                              selectedCharacter.image && !showVoiceMode && /* @__PURE__ */ jsx(
+                                motion.img,
+                                {
+                                  src: selectedCharacter.image,
+                                  alt: selectedCharacter.name,
+                                  initial: { scale: 0.8, opacity: 0 },
+                                  animate: { scale: 1, opacity: 1 },
+                                  exit: { scale: 0.8, opacity: 0 },
+                                  transition: iosTransitions.fadePop,
+                                  style: {
+                                    width: "1.5rem",
+                                    height: "1.5rem",
+                                    borderRadius: "50%",
+                                    objectFit: "cover",
+                                    marginRight: "0.5rem",
+                                    border: `1.5px solid ${getBotStatusColor().color}`,
+                                    boxShadow: `0 0 6px ${getBotStatusColor().color}40`,
+                                    transition: "all 0.3s ease"
+                                  }
+                                },
+                                "header-avatar"
+                              ),
+                              selectedCharacter.name,
+                              /* @__PURE__ */ jsx(
+                                motion.button,
+                                {
+                                  onClick: handleToggleMute,
+                                  whileHover: { scale: 1.1 },
+                                  whileTap: { scale: 0.9 },
+                                  transition: iosTransitions.snappy,
+                                  style: {
+                                    cursor: "pointer",
+                                    pointerEvents: "auto",
+                                    background: "transparent",
+                                    border: "none",
+                                    boxShadow: "none",
+                                    width: "auto",
+                                    height: "auto",
+                                    padding: "0",
+                                    display: "inline-flex",
+                                    alignItems: "center",
+                                    marginLeft: "0.5rem",
+                                    outline: "none"
+                                  },
+                                  "aria-label": isMuted ? "Unmute" : "Mute",
+                                  title: isMuted ? "Unmute" : "Mute",
+                                  children: isMuted ? /* @__PURE__ */ jsx(IoVolumeMute, { size: 16, color: "#919EABA6" }) : /* @__PURE__ */ jsx(IoVolumeHigh, { size: 16, color: "#0E7360" })
+                                }
+                              ),
+                              showVoiceMode && /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  style: {
+                                    fontSize: "10px",
+                                    color: aeroTheme.colors.convai.light,
+                                    fontWeight: 500,
+                                    marginLeft: "8px",
+                                    padding: "2px 6px",
+                                    borderRadius: "4px",
+                                    backgroundColor: aeroTheme.colors.convai.light + "20"
+                                  },
+                                  children: "VOICE"
+                                }
+                              ),
+                              convaiClient.state.isSpeaking && /* @__PURE__ */ jsxs(
+                                motion.span,
+                                {
+                                  initial: { scale: 0.8, opacity: 0 },
+                                  animate: { scale: 1, opacity: 1 },
+                                  exit: { scale: 0.8, opacity: 0 },
+                                  transition: { duration: 0.2 },
+                                  style: {
+                                    fontSize: "10px",
+                                    color: "#10b981",
+                                    fontWeight: 600,
+                                    marginLeft: "8px",
+                                    padding: "3px 8px",
+                                    borderRadius: "6px",
+                                    backgroundColor: "#10b98120",
+                                    border: "1px solid #10b98140",
+                                    display: "inline-flex",
+                                    alignItems: "center",
+                                    gap: "4px"
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ jsx(
+                                      motion.span,
+                                      {
+                                        animate: {
+                                          scale: [1, 1.2, 1],
+                                          opacity: [1, 0.7, 1]
+                                        },
+                                        transition: {
+                                          duration: 1.5,
+                                          repeat: Infinity,
+                                          ease: "easeInOut"
+                                        },
+                                        style: {
+                                          width: "6px",
+                                          height: "6px",
+                                          borderRadius: "50%",
+                                          backgroundColor: "#10b981",
+                                          display: "inline-block"
+                                        }
+                                      }
+                                    ),
+                                    "SPEAKING"
+                                  ]
+                                }
+                              ),
+                              convaiClient.state.isListening && !convaiClient.state.isSpeaking && /* @__PURE__ */ jsxs(
+                                motion.span,
+                                {
+                                  initial: { scale: 0.8, opacity: 0 },
+                                  animate: { scale: 1, opacity: 1 },
+                                  exit: { scale: 0.8, opacity: 0 },
+                                  transition: { duration: 0.2 },
+                                  style: {
+                                    fontSize: "10px",
+                                    color: "#3b82f6",
+                                    fontWeight: 600,
+                                    marginLeft: "8px",
+                                    padding: "3px 8px",
+                                    borderRadius: "6px",
+                                    backgroundColor: "#3b82f620",
+                                    border: "1px solid #3b82f640",
+                                    display: "inline-flex",
+                                    alignItems: "center",
+                                    gap: "4px"
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ jsx(
+                                      motion.span,
+                                      {
+                                        animate: {
+                                          scale: [1, 1.2, 1],
+                                          opacity: [1, 0.7, 1]
+                                        },
+                                        transition: {
+                                          duration: 1.5,
+                                          repeat: Infinity,
+                                          ease: "easeInOut"
+                                        },
+                                        style: {
+                                          width: "6px",
+                                          height: "6px",
+                                          borderRadius: "50%",
+                                          backgroundColor: "#3b82f6",
+                                          display: "inline-block"
+                                        }
+                                      }
+                                    ),
+                                    "LISTENING"
+                                  ]
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                style: {
+                                  display: "flex",
+                                  alignItems: "center",
+                                  gap: "0.5rem",
+                                  position: "relative"
+                                },
+                                children: /* @__PURE__ */ jsx(
+                                  SettingsButton,
+                                  {
+                                    ref: settingsButtonRef,
+                                    onClick: handleSettingsToggle,
+                                    whileHover: { scale: 1.1 },
+                                    whileTap: { scale: 0.9 },
+                                    transition: iosTransitions.snappy,
+                                    style: { cursor: "pointer" },
+                                    children: /* @__PURE__ */ jsx(FiMoreVertical, { size: 20 })
+                                  }
+                                )
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        Content,
+                        {
+                          style: {
+                            background: showVoiceMode ? "rgba(255, 255, 255, 0.98)" : "transparent",
+                            filter: isSettingsOpen ? "blur(3px)" : "none",
+                            position: "relative"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(AnimatePresence, { children: convaiClient.state.isConnected && !convaiClient.isBotReady && /* @__PURE__ */ jsxs(
+                              motion.div,
+                              {
+                                initial: { opacity: 0 },
+                                animate: { opacity: 1 },
+                                exit: { opacity: 0 },
+                                transition: { duration: 0.3 },
+                                style: {
+                                  position: "absolute",
+                                  top: 0,
+                                  left: 0,
+                                  right: 0,
+                                  bottom: 0,
+                                  display: "flex",
+                                  flexDirection: "column",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  backgroundColor: "rgba(255, 255, 255, 0.95)",
+                                  zIndex: 100,
+                                  gap: "1rem"
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx(
+                                    motion.div,
+                                    {
+                                      animate: {
+                                        rotate: 360
+                                      },
+                                      transition: {
+                                        duration: 2,
+                                        repeat: Infinity,
+                                        ease: "linear"
+                                      },
+                                      children: /* @__PURE__ */ jsx(
+                                        ConvaiLogo,
+                                        {
+                                          size: "xl",
+                                          color: aeroTheme.colors.convai.light,
+                                          state: "connecting"
+                                        }
+                                      )
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxs(
+                                    motion.div,
+                                    {
+                                      animate: {
+                                        opacity: [0.5, 1, 0.5]
+                                      },
+                                      transition: {
+                                        duration: 2,
+                                        repeat: Infinity,
+                                        ease: "easeInOut"
+                                      },
+                                      style: {
+                                        fontSize: "14px",
+                                        fontWeight: 500,
+                                        color: aeroTheme.colors.text.secondary
+                                      },
+                                      children: [
+                                        "Connecting to ",
+                                        selectedCharacter.name,
+                                        "..."
+                                      ]
+                                    }
+                                  )
+                                ]
+                              }
+                            ) }),
+                            showVoiceMode && /* @__PURE__ */ jsx(
+                              VoiceModeOverlay,
+                              {
+                                isActive: !convaiClient.isAudioMuted,
+                                isTalking: convaiClient.state.isSpeaking,
+                                isListening: convaiClient.state.isListening,
+                                convaiClient: null,
+                                characterImage: characterImage || void 0,
+                                characterName: characterName || void 0,
+                                room: ((_c = convaiClient.room) == null ? void 0 : _c.state) === "connected" ? convaiClient.room : null
+                              }
+                            ),
+                            !showVoiceMode && /* @__PURE__ */ jsx(
+                              MessageList,
+                              {
+                                messages: formatMessages(),
+                                isStreaming: convaiClient.state.isSpeaking,
+                                forceToBottomToken: `${isOpen}-${convaiClient.chatMessages.length}`,
+                                linkPreviewResolver
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Footer,
+                        {
+                          initial: { y: 20, opacity: 0 },
+                          animate: { y: 0, opacity: 1 },
+                          transition: {
+                            delay: 0.7,
+                            ...iosTransitions.modalSlide
+                          },
+                          style: {
+                            filter: isSettingsOpen ? "blur(3px)" : "none",
+                            transition: "filter 0.2s ease",
+                            display: "flex",
+                            gap: "0.5rem",
+                            alignItems: "center",
+                            position: "relative",
+                            justifyContent: showVoiceMode ? "center" : "flex-start",
+                            minHeight: "3.5rem"
+                            // Ensure consistent height
+                          },
+                          children: showVoiceMode ? /* @__PURE__ */ jsx(
+                            motion.button,
+                            {
+                              initial: { scale: 0.8, opacity: 0 },
+                              animate: { scale: 1, opacity: 1 },
+                              exit: { scale: 0.8, opacity: 0 },
+                              transition: {
+                                duration: 0.3,
+                                ease: "easeOut"
+                              },
+                              onClick: async () => {
+                                var _a2;
+                                convaiClient.sendInterruptMessage();
+                                await convaiClient.audioControls.muteAudio();
+                                if (((_a2 = convaiClient.room) == null ? void 0 : _a2.state) !== "connected") {
+                                  convaiClient.toggleStt(false);
+                                }
+                                setIsVoiceMode(false);
+                                setHasEnteredDefaultVoiceMode(true);
+                              },
+                              whileHover: { scale: 1.1 },
+                              whileTap: { scale: 0.9 },
+                              style: {
+                                cursor: "pointer",
+                                backgroundColor: "#ef4444",
+                                color: "#ffffff",
+                                border: "none",
+                                borderRadius: "50%",
+                                width: "2.25rem",
+                                height: "2.25rem",
+                                minWidth: "2.25rem",
+                                minHeight: "2.25rem",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                flexShrink: 0,
+                                padding: 0,
+                                outline: "none"
+                              },
+                              "aria-label": "Exit Voice Mode",
+                              title: "Exit voice mode",
+                              children: /* @__PURE__ */ jsx(FiPhoneOff, { size: 20 })
+                            },
+                            "voice-mode-exit"
+                          ) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(InputContainer, { style: { flex: 1, position: "relative" }, children: [
+                            /* @__PURE__ */ jsx(
+                              Input,
+                              {
+                                type: "text",
+                                placeholder: "Conversation",
+                                value: inputValue,
+                                onChange: handleInputChange,
+                                onKeyPress: handleKeyPress,
+                                disabled: !canSendText,
+                                style: { paddingRight: "2.75rem" }
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                style: {
+                                  position: "absolute",
+                                  right: "0.375rem",
+                                  top: "50%",
+                                  transform: "translateY(-50%)",
+                                  width: "2.25rem",
+                                  height: "2.25rem",
+                                  minWidth: "2.25rem",
+                                  minHeight: "2.25rem",
+                                  flexShrink: 0,
+                                  overflow: "visible",
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  zIndex: 2
+                                },
+                                children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: inputValue.length > 0 || isTextOnly ? /* @__PURE__ */ jsx(
+                                  ActionButton,
+                                  {
+                                    initial: { y: "100%" },
+                                    animate: { y: "0%" },
+                                    exit: { y: "-100%" },
+                                    transition: {
+                                      duration: 0.1,
+                                      ease: "linear"
+                                    },
+                                    onClick: handleSend,
+                                    disabled: inputValue.length === 0 || !canSendText,
+                                    whileTap: { scale: 0.9 },
+                                    style: {
+                                      position: "absolute",
+                                      top: 0,
+                                      left: 0,
+                                      cursor: "pointer"
+                                    },
+                                    children: /* @__PURE__ */ jsx(FiSend, { size: 20 })
+                                  },
+                                  "send"
+                                ) : /* @__PURE__ */ jsx(
+                                  motion.button,
+                                  {
+                                    initial: { y: "100%" },
+                                    animate: { y: "0%" },
+                                    exit: { y: "-100%" },
+                                    transition: {
+                                      duration: 0.1,
+                                      ease: "linear"
+                                    },
+                                    onClick: async () => {
+                                      var _a2;
+                                      convaiClient.sendInterruptMessage();
+                                      if (((_a2 = convaiClient.room) == null ? void 0 : _a2.state) !== "connected") {
+                                        convaiClient.toggleStt(true);
+                                      }
+                                      await convaiClient.audioControls.unmuteAudio();
+                                      setIsVoiceMode(true);
+                                    },
+                                    whileHover: { scale: 1.1 },
+                                    whileTap: { scale: 0.9 },
+                                    style: {
+                                      position: "absolute",
+                                      top: 0,
+                                      left: 0,
+                                      cursor: "pointer",
+                                      backgroundColor: "transparent",
+                                      color: aeroTheme.colors.text.primary,
+                                      border: `1px solid ${aeroTheme.colors.neutral[300]}`,
+                                      borderRadius: "50%",
+                                      width: "2.25rem",
+                                      height: "2.25rem",
+                                      minWidth: "2.25rem",
+                                      minHeight: "2.25rem",
+                                      display: "flex",
+                                      alignItems: "center",
+                                      justifyContent: "center",
+                                      flexShrink: 0,
+                                      padding: 0,
+                                      outline: "none"
+                                    },
+                                    "aria-label": "Enter Voice Mode",
+                                    title: "Use voice mode",
+                                    children: /* @__PURE__ */ jsx(PiWaveform, { size: 20 })
+                                  },
+                                  "voice"
+                                ) })
+                              }
+                            )
+                          ] }) })
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          convaiClient.state.isConnected && /* @__PURE__ */ jsx(
+            SettingsTray,
+            {
+              isOpen: isSettingsOpen,
+              onReset: convaiClient.isPublishedChatSession && !requestPublicationGrant ? void 0 : handleReset,
+              onDisconnect: convaiClient.isPublishedChatSession && !requestPublicationGrant ? void 0 : handleDisconnect,
+              onToggleVideo: convaiClient.connectionType === "video" && showVideo ? handleToggleVideo : void 0,
+              isVideoVisible,
+              onToggleScreenShare: convaiClient.connectionType === "video" && showScreenShare ? handleToggleScreenShare : void 0,
+              isScreenShareActive: convaiClient.isScreenShareActive
+            }
+          )
+        ]
+      }
+    ),
+    ((_d = convaiClient.room) == null ? void 0 : _d.state) === "connected" && /* @__PURE__ */ jsx(
+      FloatingVideo,
+      {
+        isVisible: isVideoVisible,
+        onClose: async () => {
+          await convaiClient.videoControls.disableVideo();
+        },
+        mirror: true
+      }
+    )
+  ] });
+};
+export {
+  RoomContext2 as AudioContext,
+  RoomAudioRenderer as AudioRenderer,
+  ConvaiWidget,
+  MarkdownRenderer,
+  useCharacterInfo,
+  useLocalCameraTrack
+};