@ringg/react-native 0.3.0 → 0.4.0

package/dist/index.mjs

@@ -14,6 +14,117 @@ var DEFAULT_WIDGET_THEME = {
   "borderRadius": "16px",
   "fontFamily": "inherit"
 };
+var WIDGET_PRESET_THEMES = {
+  "light": {
+    "primaryColor": "#18181b",
+    "primaryTextColor": "#ffffff",
+    "backgroundColor": "#ffffff",
+    "surfaceColor": "#f4f4f5",
+    "textColor": "#18181b",
+    "mutedTextColor": "#71717a",
+    "borderColor": "#e4e4e7"
+  },
+  "warm": {
+    "primaryColor": "#57534e",
+    "primaryTextColor": "#ffffff",
+    "backgroundColor": "#fefefe",
+    "surfaceColor": "#fafaf9",
+    "textColor": "#1c1917",
+    "mutedTextColor": "#78716c",
+    "borderColor": "#e7e5e4"
+  },
+  "blue": {
+    "primaryColor": "#2563eb",
+    "primaryTextColor": "#ffffff",
+    "backgroundColor": "#fafcff",
+    "surfaceColor": "#f0f7ff",
+    "textColor": "#1e3a8a",
+    "mutedTextColor": "#64748b",
+    "borderColor": "#dbeafe"
+  },
+  "indigo": {
+    "primaryColor": "#6366f1",
+    "primaryTextColor": "#ffffff",
+    "backgroundColor": "#fbfbff",
+    "surfaceColor": "#f5f5ff",
+    "textColor": "#312e81",
+    "mutedTextColor": "#6b7280",
+    "borderColor": "#e0e7ff"
+  },
+  "green": {
+    "primaryColor": "#16a34a",
+    "primaryTextColor": "#ffffff",
+    "backgroundColor": "#fbfefb",
+    "surfaceColor": "#f0fdf4",
+    "textColor": "#14532d",
+    "mutedTextColor": "#6b7280",
+    "borderColor": "#dcfce7"
+  },
+  "orange": {
+    "primaryColor": "#ea580c",
+    "primaryTextColor": "#ffffff",
+    "backgroundColor": "#fffdfb",
+    "surfaceColor": "#fff7ed",
+    "textColor": "#7c2d12",
+    "mutedTextColor": "#78716c",
+    "borderColor": "#ffedd5"
+  },
+  "dark": {
+    "primaryColor": "#fafafa",
+    "primaryTextColor": "#18181b",
+    "backgroundColor": "#18181b",
+    "surfaceColor": "#27272a",
+    "textColor": "#fafafa",
+    "mutedTextColor": "#a1a1aa",
+    "borderColor": "#3f3f46"
+  },
+  "sunset": {
+    "primaryColor": "linear-gradient(135deg, #f97316, #ef4444)",
+    "primaryTextColor": "#ffffff",
+    "backgroundColor": "#fffbf7",
+    "surfaceColor": "#fff3e8",
+    "textColor": "#7c2d12",
+    "mutedTextColor": "#9a3412",
+    "borderColor": "#fed7aa"
+  },
+  "ocean": {
+    "primaryColor": "linear-gradient(135deg, #667eea, #764ba2)",
+    "primaryTextColor": "#ffffff",
+    "backgroundColor": "#faf9ff",
+    "surfaceColor": "#f0edff",
+    "textColor": "#312e81",
+    "mutedTextColor": "#6366f1",
+    "borderColor": "#ddd6fe"
+  },
+  "emerald": {
+    "primaryColor": "linear-gradient(135deg, #10b981, #0ea5e9)",
+    "primaryTextColor": "#ffffff",
+    "backgroundColor": "#f7fdfb",
+    "surfaceColor": "#ecfdf5",
+    "textColor": "#064e3b",
+    "mutedTextColor": "#047857",
+    "borderColor": "#a7f3d0"
+  },
+  "midnight": {
+    "primaryColor": "linear-gradient(135deg, #6366f1, #8b5cf6)",
+    "primaryTextColor": "#ffffff",
+    "backgroundColor": "#18181b",
+    "surfaceColor": "#27272a",
+    "textColor": "#fafafa",
+    "mutedTextColor": "#a1a1aa",
+    "borderColor": "#3f3f46"
+  },
+  "policybazaar": {
+    "primaryColor": "linear-gradient(88deg, #9403fd, #00adfe)",
+    "primaryTextColor": "#ffffff",
+    "backgroundColor": "#ffffff",
+    "surfaceColor": "#f4f2ff",
+    "agentBubbleColor": "linear-gradient(107deg, #f0fff9, #f7eeff)",
+    "textColor": "#18181b",
+    "mutedTextColor": "#64748b",
+    "borderColor": "#e6e2ff"
+  }
+};
 var TIMING = {
   "chatWidgetGraceMs": 800,
   "chatWidgetAfterTextMs": 120,
@@ -34,6 +145,47 @@ var WIDGET_DEFAULTS = {
 };
 
 // ../core/dist/ports/event-bus.js
+function createDomEventBus() {
+  const listeners = /* @__PURE__ */ new Map();
+  return {
+    emit(event, payload) {
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent(event, { detail: payload }));
+      }
+    },
+    on(event, handler) {
+      if (typeof window === "undefined")
+        return () => {
+        };
+      const wrapped = ((e) => handler(e.detail));
+      let set = listeners.get(event);
+      if (!set) {
+        set = /* @__PURE__ */ new Set();
+        listeners.set(event, set);
+      }
+      set.add(wrapped);
+      window.addEventListener(event, wrapped);
+      return () => {
+        window.removeEventListener(event, wrapped);
+        listeners.get(event)?.delete(wrapped);
+      };
+    },
+    off(event) {
+      const remove = (name, handlers) => {
+        handlers.forEach((h) => window.removeEventListener(name, h));
+      };
+      if (event) {
+        const handlers = listeners.get(event);
+        if (handlers)
+          remove(event, handlers);
+        listeners.delete(event);
+      } else {
+        listeners.forEach((handlers, name) => remove(name, handlers));
+        listeners.clear();
+      }
+    }
+  };
+}
 function createCallbackEventBus() {
   const listeners = /* @__PURE__ */ new Map();
   return {
@@ -88,6 +240,13 @@ var silentNotificationPlayer = {
 };
 
 // ../core/dist/api/client.js
+function createStaticUrlResolver(urls) {
+  return {
+    resolve(mode) {
+      return urls[mode];
+    }
+  };
+}
 function createRinggApiClient(config) {
   const { backendUrl, livekitUrl } = config.urlResolver.resolve(config.mode);
   const authHeaders = config.authorization ? { Authorization: config.authorization } : config.xApiKey ? { "X-API-KEY": config.xApiKey } : {};
@@ -212,11 +371,47 @@ function getDominantColor(color) {
     return color;
   return extractColorsFromGradient(color)[0] ?? color;
 }
+function colorToBackground(color) {
+  if (isGradient(color)) {
+    return { background: color };
+  }
+  return { backgroundColor: color };
+}
+function colorToSolid(color) {
+  return getDominantColor(color);
+}
+function colorToBorder(color) {
+  if (isGradient(color)) {
+    return {
+      borderImage: `${color} 1`,
+      borderStyle: "solid"
+    };
+  }
+  return { borderColor: color };
+}
 
 // ../core/dist/theme/theme-engine.js
 function mergeWidgetTheme(theme) {
   return { ...DEFAULT_WIDGET_THEME, ...theme };
 }
+function mergeComponentTheme(componentTheme, widgetTheme) {
+  const base = widgetTheme ?? DEFAULT_WIDGET_THEME;
+  return {
+    primaryColor: base.primaryColor,
+    primaryTextColor: base.primaryTextColor,
+    backgroundColor: base.backgroundColor,
+    surfaceColor: base.surfaceColor,
+    textColor: base.textColor,
+    mutedTextColor: base.mutedTextColor,
+    borderColor: base.borderColor,
+    errorColor: base.errorColor,
+    successColor: base.successColor,
+    fontFamily: base.fontFamily,
+    borderRadius: base.borderRadius,
+    buttonStyle: base.buttonStyle,
+    ...componentTheme
+  };
+}
 function getButtonRadius(style) {
   switch (style) {
     case "pill":
@@ -228,6 +423,25 @@ function getButtonRadius(style) {
       return "12px";
   }
 }
+function getLuminance(hexColor) {
+  const solid = getDominantColor(hexColor);
+  const hex = solid.replace("#", "");
+  const r = parseInt(hex.slice(0, 2), 16) / 255;
+  const g = parseInt(hex.slice(2, 4), 16) / 255;
+  const b = parseInt(hex.slice(4, 6), 16) / 255;
+  const toLinear = (c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+}
+function isLightColor(hexColor) {
+  try {
+    return getLuminance(hexColor) > 0.5;
+  } catch {
+    return true;
+  }
+}
+function getContrastingTextColor(bgColor) {
+  return isLightColor(bgColor) ? "#212121" : "#ffffff";
+}
 
 // ../core/dist/rpc/formatter.js
 function transformRpcToComponent(componentName, rpcPayload) {
@@ -411,6 +625,68 @@ function formatDynamicData(payload) {
   };
 }
 
+// ../core/dist/components/helpers.js
+function groupSlotsByDate(slots) {
+  const grouped = /* @__PURE__ */ new Map();
+  slots.forEach((slot) => {
+    const dateKey = new Date(slot.datetime).toISOString().split("T")[0];
+    if (!grouped.has(dateKey)) {
+      grouped.set(dateKey, []);
+    }
+    grouped.get(dateKey).push(slot);
+  });
+  return Array.from(grouped.entries()).sort(([a], [b]) => a.localeCompare(b)).map(([dateKey, dateSlots]) => ({
+    date: dateKey,
+    dateLabel: new Date(dateKey).toLocaleDateString("en-US", {
+      weekday: "short",
+      month: "short",
+      day: "numeric"
+    }),
+    slots: dateSlots.sort((a, b) => new Date(a.datetime).getTime() - new Date(b.datetime).getTime())
+  }));
+}
+function formatSlotTime(datetime, timezone) {
+  return new Date(datetime).toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+    timeZone: timezone
+  });
+}
+function formatSlotDate(datetime, timezone) {
+  return new Date(datetime).toLocaleDateString("en-US", {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+    timeZone: timezone
+  });
+}
+function buildPayload(template, values) {
+  const result = {};
+  for (const [key, raw] of Object.entries(template)) {
+    result[key] = raw.replace(/\{\{(\w+)\}\}/g, (_, name) => values[name] ?? "");
+  }
+  return result;
+}
+function isCalendarBooking(payload) {
+  return payload.component_type === "calendar_booking";
+}
+function isForm(payload) {
+  return payload.component_type === "form";
+}
+function isButtons(payload) {
+  return payload.component_type === "buttons";
+}
+function isConfirmation(payload) {
+  return payload.component_type === "confirmation";
+}
+function isInteractiveFlow(payload) {
+  return payload.component_type === "interactive_flow";
+}
+function isBlocks(payload) {
+  return payload.component_type === "blocks";
+}
+
 // ../core/dist/stores/store.js
 function createStore(build) {
   const listeners = /* @__PURE__ */ new Set();
@@ -1200,7 +1476,7 @@ var useRinggSlashCommands = (controller) => useStoreSnapshot(controller.slashCom
 
 // src/RinggWidget.tsx
 import { Fragment as Fragment7, useEffect as useEffect16, useMemo as useMemo11, useRef as useRef15, useState as useState16 } from "react";
-import { Animated as Animated15, Image as Image3, KeyboardAvoidingView as KeyboardAvoidingView3, Platform as Platform5, ScrollView as ScrollView5, StyleSheet as StyleSheet24, Text as Text18, View as View21, useWindowDimensions } from "react-native";
+import { Animated as Animated15, Image as Image3, KeyboardAvoidingView as KeyboardAvoidingView3, Platform as Platform6, ScrollView as ScrollView5, StyleSheet as StyleSheet24, Text as Text18, View as View21, useWindowDimensions } from "react-native";
 import { Minus, X } from "lucide-react-native";
 
 // src/components/action-button.tsx
@@ -1808,7 +2084,7 @@ import { Animated as Animated7, Linking, StyleSheet as StyleSheet12, Text as Tex
 import { Check as Check3, ChevronLeft } from "lucide-react-native";
 
 // src/lib/component-types.ts
-function groupSlotsByDate(slots) {
+function groupSlotsByDate2(slots) {
   const grouped = /* @__PURE__ */ new Map();
   slots.forEach((slot) => {
     const date = new Date(slot.datetime);
@@ -1827,7 +2103,7 @@ function groupSlotsByDate(slots) {
     };
   });
 }
-function formatSlotTime(datetime, timezone) {
+function formatSlotTime2(datetime, timezone) {
   const date = new Date(datetime);
   return date.toLocaleTimeString("en-US", {
     hour: "numeric",
@@ -1836,7 +2112,7 @@ function formatSlotTime(datetime, timezone) {
     timeZone: timezone
   });
 }
-function formatSlotDate(datetime, timezone) {
+function formatSlotDate2(datetime, timezone) {
   const date = new Date(datetime);
   return date.toLocaleDateString("en-US", {
     weekday: "short",
@@ -1845,7 +2121,7 @@ function formatSlotDate(datetime, timezone) {
     timeZone: timezone
   });
 }
-function buildPayload(template, values) {
+function buildPayload2(template, values) {
   const result = {};
   for (const [key, value] of Object.entries(template)) {
     if (typeof value === "string" && value.startsWith("{") && value.endsWith("}")) {
@@ -1857,13 +2133,13 @@ function buildPayload(template, values) {
   }
   return result;
 }
-function isButtons(payload) {
+function isButtons2(payload) {
   return payload.component_type === "buttons";
 }
-function isInteractiveFlow(payload) {
+function isInteractiveFlow2(payload) {
   return payload.component_type === "interactive_flow";
 }
-function isBlocks(payload) {
+function isBlocks2(payload) {
   return payload.component_type === "blocks";
 }
 
@@ -2075,7 +2351,7 @@ var CalendarStep = ({ payload, isProcessing, onComplete }) => {
   const buttonRadius = getButtonRadius2(theme.buttonStyle);
   const fontFamily = resolveFontFamily(theme.fontFamily);
   const { data } = payload;
-  const groupedSlots = useMemo4(() => groupSlotsByDate(data.available_slots), [data.available_slots]);
+  const groupedSlots = useMemo4(() => groupSlotsByDate2(data.available_slots), [data.available_slots]);
   const [selectedDate, setSelectedDate] = useState4(groupedSlots[0]?.date || "");
   const [selectedSlot, setSelectedSlot] = useState4(null);
   const selectedDateGroup = groupedSlots.find((g) => g.date === selectedDate);
@@ -2139,7 +2415,7 @@ var CalendarStep = ({ payload, isProcessing, onComplete }) => {
           {
             color: isSelected ? theme.primaryColor : theme.backgroundColor,
             style: [styles9.slot, { borderRadius: buttonRadius, borderColor: isSelected ? solidColor(theme.primaryColor) : theme.borderColor }, isSelected ? styles9.selectedShadow : null],
-            children: /* @__PURE__ */ jsx11(Text5, { style: [styles9.slotLabel, { color: isSelected ? theme.primaryTextColor : theme.textColor, fontFamily }], numberOfLines: 1, children: formatSlotTime(slot.datetime, data.timezone) })
+            children: /* @__PURE__ */ jsx11(Text5, { style: [styles9.slotLabel, { color: isSelected ? theme.primaryTextColor : theme.textColor, fontFamily }], numberOfLines: 1, children: formatSlotTime2(slot.datetime, data.timezone) })
           }
         ) }) }, slot.id);
       }) })
@@ -2681,8 +2957,8 @@ var EnterFade = ({ translateX = 0, translateY = 0, durationMs = ENTER_DURATION_M
   );
 };
 var InteractiveFlow = ({ initialComponent, onApiCall, onComplete, onSendResponse, onSelectionDisplayed, quickReplyAlign = "end" }) => {
-  const isMultiStepFlow = isInteractiveFlow(initialComponent);
-  const isFreeButtonGroup = !isMultiStepFlow && isButtons(initialComponent) && initialComponent.data.presentation === "free";
+  const isMultiStepFlow = isInteractiveFlow2(initialComponent);
+  const isFreeButtonGroup = !isMultiStepFlow && isButtons2(initialComponent) && initialComponent.data.presentation === "free";
   const widgetTheme = useWidgetTheme();
   const theme = useMemo6(
     () => mergeTheme({
@@ -2728,7 +3004,7 @@ var InteractiveFlow = ({ initialComponent, onApiCall, onComplete, onSendResponse
       try {
         const isLastStep = currentStepIndex === totalSteps - 1;
         const selectedButtonId = typeof stepData.selected_button === "string" ? stepData.selected_button : null;
-        const buttonsComponent = currentComponent !== void 0 && isButtons(currentComponent) ? currentComponent : null;
+        const buttonsComponent = currentComponent !== void 0 && isButtons2(currentComponent) ? currentComponent : null;
         const submittedButton = buttonsComponent && selectedButtonId ? buttonsComponent.data.buttons.find((button) => button.id === selectedButtonId) ?? { id: selectedButtonId, label: selectedButtonId, action: { type: "trigger_component" } } : null;
         const shouldShowSubmittedSelection = buttonsComponent?.data.completionDisplay === "selected_item" && !!submittedButton;
         if (onSendResponse) {
@@ -2767,7 +3043,7 @@ var InteractiveFlow = ({ initialComponent, onApiCall, onComplete, onSendResponse
               for (const [key, value] of Object.entries(newAllData)) {
                 stringifiedData[key] = Array.isArray(value) ? JSON.stringify(value) : String(value);
               }
-              const apiPayload = buildPayload(on_complete.payload, {
+              const apiPayload = buildPayload2(on_complete.payload, {
                 ...stringifiedData,
                 all_data: JSON.stringify(newAllData)
               });
@@ -2846,8 +3122,8 @@ var InteractiveFlow = ({ initialComponent, onApiCall, onComplete, onSendResponse
               handleStepComplete({
                 slot_id: slotId,
                 slot_datetime: slotDatetime,
-                slot_time: formatSlotTime(slotDatetime, timezone),
-                slot_date: formatSlotDate(slotDatetime, timezone)
+                slot_time: formatSlotTime2(slotDatetime, timezone),
+                slot_date: formatSlotDate2(slotDatetime, timezone)
               });
             }
           }
@@ -4182,7 +4458,7 @@ var FeedbackScreen = ({ callMode, isSubmitting, feedbackScreenConfig, messages,
             transcript.map((message, index) => {
               if (message.componentType && message.componentData) {
                 const componentData = message.componentData;
-                if (isBlocks(componentData)) {
+                if (isBlocks2(componentData)) {
                   return /* @__PURE__ */ jsx19(View14, { testID: ringgId("blocks-widget"), style: styles16.replayed, children: /* @__PURE__ */ jsx19(blocks_step_default, { config: componentData.data, disabled: true, onAction: async () => {
                   } }) }, `c_${message.timestamp}__${index}`);
                 }
@@ -4878,374 +5154,87 @@ var renderTextWithLinks = (text, links, linkStyle) => {
   return parts;
 };
 
-// src/RinggWidget.tsx
-import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
-var PANEL_MAX_WIDTH = 400;
-var PANEL_HEIGHT = 456;
-var PANEL_HEIGHT_RATIO = 0.9;
-var EDGE_INSET = 16;
-var BOTTOM_SAFE_INSET = 24;
-var TRIGGER_SIZE = 52;
-var TRIGGER_RADIUS = 20;
-var DEFAULT_TRIGGER_ICON_SIZE = 24;
-var PANEL_SPRING = { stiffness: 380, damping: 30 };
-var TRIGGER_SPRING = { stiffness: 400, damping: 25 };
-var LEGAL_LINKS = { "Privacy Policy": "https://www.ringg.ai/privacy", "T&C": "https://www.ringg.ai/terms" };
-var LEGAL_TEXT = "By continuing, you agree to our\nPrivacy Policy and T&C.";
-var isFreeButtonsMessage = (message) => {
-  const componentData = message?.componentData;
-  return !!componentData && isButtons(componentData) && componentData.data.presentation === "free";
+// src/config/default-urls.ts
+var DEFAULT_ENVIRONMENT_URLS = {
+  dev: {
+    backendUrl: "https://calling-dev.ringg.ai/ca/api/v0",
+    livekitUrl: "wss://ringg-ai-dev-92tubwpz.livekit.cloud"
+  },
+  stage: {
+    backendUrl: "https://stage-api.ringg.ai/ca/api/v0",
+    livekitUrl: "wss://mercury.webrtc-stage.ringg.ai"
+  },
+  prod: {
+    backendUrl: "https://prod-api.ringg.ai/ca/api/v0",
+    livekitUrl: "wss://mercury.webrtc.ringg.ai"
+  }
 };
-var isAttachableAgentMessage = (message) => !!message && !message.componentType && !message.isSelf && Boolean(message.message.trim());
-var WidgetPanel = ({ controller, room, width, height }) => {
-  const theme = useWidgetTheme();
-  const { config } = controller;
-  const {
-    title = WIDGET_DEFAULTS.title,
-    description = WIDGET_DEFAULTS.description,
-    buttons,
-    defaultExpanded = WIDGET_DEFAULTS.defaultExpanded,
-    hideTabSelector = WIDGET_DEFAULTS.hideTabSelector,
-    bypassStartScreen = WIDGET_DEFAULTS.bypassStartScreen,
-    logoUrl,
-    logoStyles,
-    typingWords,
-    legalDisclaimer,
-    feedbackScreen,
-    voiceCall
-  } = config;
-  const shell = useRinggShell(controller);
-  const session = useRinggSession(controller);
-  const { messages } = useRinggMessages(controller);
-  const { isTyping: isAgentTyping } = useRinggTyping(controller);
-  const { completedFlowIds } = useRinggComponents(controller);
-  const { commands } = useRinggSlashCommands(controller);
-  const [alertEndCall, setAlertEndCall] = useState16(false);
-  const microphone = useMicrophone(room);
-  const callMode = shell.callMode;
-  const showFeedback = shell.viewState === "feedback";
-  const isLoading = session.isLoading;
-  const error = session.error;
-  const connectionState = session.connectionState;
-  const isCalling = connectionState === "connected";
-  const isSessionLive = session.isSessionLive;
-  const isAudioMode = callMode === "audio";
-  const showVoiceAnimation = isAudioMode && isCalling && (voiceCall?.showAnimation ?? WIDGET_DEFAULTS.voiceCallShowAnimation);
-  const showVoiceTranscript = !isAudioMode || (voiceCall?.showTranscript ?? WIDGET_DEFAULTS.voiceCallShowTranscript);
-  const mergedSlashCommands = useMemo11(() => [...commands], [commands]);
-  const sortedMessages = useMemo11(() => [...messages].sort((a, b) => a.timestamp - b.timestamp), [messages]);
-  const transcriptRef = useRef15(null);
-  const previousMessagesCountRef = useRef15(0);
-  useEffect16(() => {
-    const newMessageAdded = messages.length > previousMessagesCountRef.current;
-    previousMessagesCountRef.current = messages.length;
-    transcriptRef.current?.scrollToEnd({ animated: newMessageAdded });
-  }, [messages, isAgentTyping]);
-  const handleCallStart = (mediaType) => void controller.startCall(mediaType);
-  const handleCallEnd = () => {
-    setAlertEndCall(false);
-    void controller.endCall();
-  };
-  const handleFeedbackSubmit = (rating, comment) => void controller.submitFeedback(rating, comment);
-  const handleFeedbackSkip = () => controller.skipFeedback();
-  const handleUserMessageSent = () => controller.typing.showOnUserSend();
-  const handleFlowComplete = (componentId) => controller.markFlowComplete(componentId);
-  const handleSelectionDisplayed = (componentId, label) => controller.displaySelection(componentId, label);
-  const sendComponentResponse = (componentId, responseData) => controller.sendComponentResponse(componentId, responseData);
-  const sendSlashCommand = (command) => void controller.sendSlashCommand(command);
-  const callComponentApi = controller.callComponentApi;
-  const panelRadius = resolveRadius(theme.borderRadius, 16);
-  const fontFamily = resolveFontFamily(theme.fontFamily);
-  const chrome = /* @__PURE__ */ jsxs20(Fragment8, { children: [
-    !defaultExpanded && (isSessionLive || showFeedback) ? /* @__PURE__ */ jsx28(Touchable, { testID: ringgId("minimize-button"), accessibilityLabel: "Minimize widget", onPress: () => controller.minimizeWidget(), style: [styles24.chromeButton, styles24.minimizeButton], children: /* @__PURE__ */ jsx28(Minus, { size: 16, color: solidColor(theme.mutedTextColor) }) }) : null,
-    !defaultExpanded ? /* @__PURE__ */ jsx28(
-      Touchable,
-      {
-        testID: ringgId("close-button"),
-        accessibilityLabel: isSessionLive ? "End call" : "Close widget",
-        onPress: () => isSessionLive ? setAlertEndCall(true) : showFeedback ? handleFeedbackSkip() : controller.minimizeWidget(),
-        style: [styles24.chromeButton, styles24.closeButton],
-        children: /* @__PURE__ */ jsx28(X, { size: 16, color: solidColor(theme.mutedTextColor) })
-      }
-    ) : null
-  ] });
-  const transcript = /* @__PURE__ */ jsxs20(
-    ScrollView5,
-    {
-      testID: ringgId("transcript"),
-      ref: transcriptRef,
-      style: styles24.transcript,
-      contentContainerStyle: [styles24.transcriptList, !showVoiceAnimation && styles24.transcriptTopClearance, !isAudioMode && styles24.transcriptBottomClearance],
-      keyboardShouldPersistTaps: "handled",
-      showsVerticalScrollIndicator: false,
-      children: [
-        sortedMessages.map((segment, index) => {
-          if (segment.kind === "system") return /* @__PURE__ */ jsx28(system_log_default, { label: segment.message, meta: segment.systemMeta, level: segment.systemLevel }, `sys_${segment.timestamp}_${index}`);
-          const previousSegment = sortedMessages[index - 1];
-          const nextSegment = sortedMessages[index + 1];
-          const attachFreeButtonsToPrevious = isFreeButtonsMessage(segment) && isAttachableAgentMessage(previousSegment);
-          const skipStandaloneRender = isAttachableAgentMessage(segment) && isFreeButtonsMessage(nextSegment);
-          if (skipStandaloneRender) return null;
-          if (attachFreeButtonsToPrevious && previousSegment && segment.componentData) {
-            const componentData = segment.componentData;
-            const isCompletedSelectedItem = componentData.component_type === "buttons" && componentData.data.completionDisplay === "selected_item" && completedFlowIds.has(componentData.component_id);
-            if (isCompletedSelectedItem) return /* @__PURE__ */ jsx28(message_item_default, { itemIndex: index, message: previousSegment }, `message_with_buttons_${segment.componentData.component_id}_${index}`);
-            return /* @__PURE__ */ jsxs20(Fragment7, { children: [
-              /* @__PURE__ */ jsx28(message_item_default, { itemIndex: index, message: previousSegment }),
-              /* @__PURE__ */ jsx28(View21, { testID: ringgId("attached-buttons"), style: styles24.fullWidth, children: /* @__PURE__ */ jsx28(
-                interactive_flow_default,
-                {
-                  initialComponent: segment.componentData,
-                  onApiCall: callComponentApi,
-                  onComplete: () => handleFlowComplete(componentData.component_id),
-                  onSendResponse: sendComponentResponse,
-                  onSelectionDisplayed: handleSelectionDisplayed,
-                  quickReplyAlign: isAudioMode ? "center" : "end"
-                }
-              ) })
-            ] }, `message_with_buttons_${segment.componentData.component_id}_${index}`);
-          }
-          if (segment.componentType === "blocks" && segment.componentData) {
-            const blocksPayload = segment.componentData;
-            if (isBlocks(blocksPayload)) {
-              const blocksConfig = blocksPayload.data;
-              const blockId = blocksPayload.component_id;
-              return /* @__PURE__ */ jsx28(View21, { testID: ringgId("blocks-widget"), style: styles24.fullWidth, children: /* @__PURE__ */ jsx28(
-                blocks_step_default,
-                {
-                  config: blocksConfig,
-                  disabled: completedFlowIds.has(blockId),
-                  onAction: (action) => {
-                    handleUserMessageSent();
-                    handleFlowComplete(blockId);
-                    const selection = typeof action.value === "string" || typeof action.value === "number" ? String(action.value) : action.label;
-                    if (selection) handleSelectionDisplayed(blockId, selection);
-                    return controller.sendBlocksAction(blocksConfig.tool_id, blockId, { action_id: action.action_id, value: action.value, values: action.values });
-                  }
-                }
-              ) }, `blocks_${blockId}`);
-            }
-          }
-          if (segment.componentType && segment.componentData) {
-            const componentData = segment.componentData;
-            const isCompletedSelectedItem = componentData.component_type === "buttons" && componentData.data.completionDisplay === "selected_item" && completedFlowIds.has(componentData.component_id);
-            if (isCompletedSelectedItem) return null;
-            return /* @__PURE__ */ jsx28(
-              interactive_flow_default,
-              {
-                initialComponent: segment.componentData,
-                onApiCall: callComponentApi,
-                onComplete: () => handleFlowComplete(componentData.component_id),
-                onSendResponse: sendComponentResponse,
-                onSelectionDisplayed: handleSelectionDisplayed,
-                quickReplyAlign: isAudioMode ? "center" : "end"
-              },
-              `flow_${segment.componentData.component_id}_${index}`
-            );
-          }
-          return /* @__PURE__ */ jsx28(message_item_default, { itemIndex: index, message: segment }, `${segment.timestamp}__${index}`);
-        }),
-        isAgentTyping ? /* @__PURE__ */ jsx28(typing_indicator_default, { words: typingWords }) : null
-      ]
-    }
-  );
-  const controls = /* @__PURE__ */ jsx28(
-    call_controls_default,
-    {
-      buttonConfig: buttons,
-      callMode,
-      isCalling: isSessionLive,
-      enabledSlashCommands: mergedSlashCommands,
-      micEnabled: microphone?.enabled ?? true,
-      onToggleMic: microphone?.toggle,
-      onSlashCommand: sendSlashCommand,
-      onUserMessage: handleUserMessageSent,
-      onCallEnd: handleCallEnd,
-      onSendMessage: (message) => controller.sendMessage(message)
-    }
-  );
-  return /* @__PURE__ */ jsxs20(
-    View21,
-    {
-      testID: ringgId("widget-root"),
-      style: [styles24.panel, { width, height, borderRadius: panelRadius, backgroundColor: solidColor(theme.backgroundColor), borderColor: solidColor(theme.borderColor) }],
-      children: [
-        chrome,
-        /* @__PURE__ */ jsx28(
-          ConfirmDialog,
-          {
-            open: alertEndCall,
-            title: `Are you sure you want to end ${callMode === "text" ? "chat" : "call"}?`,
-            description: "Your current conversation will be closed and cannot be accessed later.",
-            confirmLabel: `End ${callMode === "text" ? "Chat" : "Call"}`,
-            cancelLabel: "Cancel",
-            onConfirm: handleCallEnd,
-            onCancel: () => setAlertEndCall(false)
-          }
-        ),
-        showFeedback ? /* @__PURE__ */ jsx28(
-          feedback_screen_default,
-          {
-            callMode,
-            isSubmitting: isLoading,
-            feedbackScreenConfig: feedbackScreen,
-            messages,
-            title,
-            logoUrl,
-            logoStyles,
-            onSubmit: handleFeedbackSubmit,
-            onSkip: handleFeedbackSkip
-          }
-        ) : /* @__PURE__ */ jsxs20(View21, { testID: ringgId("widget-body"), style: [styles24.body, isSessionLive ? styles24.bodyLive : styles24.bodyIdle], children: [
-          /* @__PURE__ */ jsx28(header_default, { isCalling: isSessionLive, isLoading, title, description, logoUrl, logoStyles }),
-          showVoiceAnimation ? /* @__PURE__ */ jsx28(View21, { testID: ringgId("voice-animation-wrapper"), style: [styles24.voiceWrapper, showVoiceTranscript && messages.length > 0 ? styles24.voiceWrapperCompact : styles24.voiceWrapperFull], children: /* @__PURE__ */ jsx28(VoiceAnimationLeaf, { room }) }) : null,
-          isSessionLive && !showVoiceAnimation && (messages.length === 0 && !isAgentTyping || !showVoiceTranscript) ? /* @__PURE__ */ jsx28(View21, { testID: ringgId("body-spacer"), style: styles24.bodySpacer }) : null,
-          (messages.length > 0 || isAgentTyping) && isSessionLive && showVoiceTranscript ? transcript : null,
-          isSessionLive && callMode === "text" ? (
-            // Transparent bottom bar: it only positions the composer over the
-            // transcript, so the gutters stay clear while messages scroll under.
-            /* @__PURE__ */ jsxs20(View21, { testID: ringgId("controls-bar"), style: styles24.controlsBar, children: [
-              error.hasError ? /* @__PURE__ */ jsx28(Text18, { testID: ringgId("error-message"), style: [styles24.error, { color: solidColor(theme.errorColor), fontFamily }], children: error.message }) : null,
-              controls
-            ] })
-          ) : /* @__PURE__ */ jsxs20(Fragment8, { children: [
-            controls,
-            error.hasError ? /* @__PURE__ */ jsx28(Text18, { testID: ringgId("error-message"), style: [styles24.error, { color: solidColor(theme.errorColor), fontFamily }], children: error.message }) : null
-          ] }),
-          !isSessionLive && isLoading ? /* @__PURE__ */ jsxs20(View21, { testID: ringgId("connecting-status"), children: [
-            /* @__PURE__ */ jsx28(Text18, { testID: ringgId("connecting-label"), style: [styles24.connecting, { color: theme.mutedTextColor, fontFamily }], children: "Connecting..." }),
-            /* @__PURE__ */ jsx28(loading_bar_default, { ariaLabel: callMode === "text" ? "Starting chat" : "Connecting" })
-          ] }) : null,
-          !isLoading && connectionState === "disconnected" && (!bypassStartScreen || error.hasError) ? hideTabSelector ? /* @__PURE__ */ jsx28(action_button_default, { callMode, buttonConfig: buttons, isCalling, isLoading, onCallTrigger: handleCallStart }) : /* @__PURE__ */ jsxs20(View21, { testID: ringgId("start-actions"), style: styles24.startActions, children: [
-            /* @__PURE__ */ jsx28(action_button_default, { dual: true, callMode: "text", buttonConfig: buttons, isCalling, isLoading, onCallTrigger: handleCallStart }),
-            /* @__PURE__ */ jsx28(action_button_default, { dual: true, callMode: "audio", buttonConfig: buttons, isCalling, isLoading, onCallTrigger: handleCallStart })
-          ] }) : null,
-          !isSessionLive ? /* @__PURE__ */ jsx28(Text18, { testID: ringgId("legal-disclaimer"), style: [styles24.legal, { color: theme.mutedTextColor, fontFamily }], children: legalDisclaimer ? renderTextWithLinks(legalDisclaimer.text, legalDisclaimer.links) : renderTextWithLinks(LEGAL_TEXT, LEGAL_LINKS, { color: solidColor(theme.primaryColor), textDecorationLine: "underline" }) }) : null
-        ] })
-      ]
-    }
-  );
-};
-var RinggWidget = ({ controller, room }) => {
-  const shell = useRinggShell(controller);
-  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
-  const { buttons, defaultExpanded = WIDGET_DEFAULTS.defaultExpanded, widgetPosition } = controller.config;
-  const isOpen = shell.viewState === "open" || shell.viewState === "feedback";
-  const hideTriggerOnExpand = widgetPosition?.hideTriggerOnExpand ?? true;
-  const showTrigger = !defaultExpanded && (!hideTriggerOnExpand || !isOpen);
-  const panel = usePresence(isOpen, PANEL_SPRING);
-  const trigger = usePresence(showTrigger, TRIGGER_SPRING);
-  const panelWidth = Math.min(screenWidth - EDGE_INSET * 2, PANEL_MAX_WIDTH);
-  const panelHeight = Math.min(screenHeight * PANEL_HEIGHT_RATIO, PANEL_HEIGHT);
-  const triggerIconSize = toSize(buttons?.modalTrigger?.icon?.size, DEFAULT_TRIGGER_ICON_SIZE);
-  return /* @__PURE__ */ jsx28(WidgetThemeProvider, { theme: controller.theme, children: /* @__PURE__ */ jsxs20(View21, { pointerEvents: "box-none", style: StyleSheet24.absoluteFill, children: [
-    panel.mounted ? /* @__PURE__ */ jsx28(KeyboardAvoidingView3, { pointerEvents: "box-none", behavior: Platform5.OS === "ios" ? "padding" : void 0, style: styles24.overlay, children: /* @__PURE__ */ jsx28(
-      Animated15.View,
-      {
-        renderToHardwareTextureAndroid: true,
-        shouldRasterizeIOS: true,
-        style: [
-          styles24.panelAnchor,
-          {
-            opacity: panel.progress,
-            transform: [{ translateY: panel.progress.interpolate({ inputRange: [0, 1], outputRange: [24, 0] }) }, { scale: panel.progress.interpolate({ inputRange: [0, 1], outputRange: [0.96, 1] }) }]
-          }
-        ],
-        children: /* @__PURE__ */ jsx28(WidgetPanel, { controller, room, width: panelWidth, height: panelHeight })
-      }
-    ) }) : null,
-    trigger.mounted ? /* @__PURE__ */ jsx28(WidgetTrigger, { controller, iconSize: triggerIconSize, progress: trigger.progress }) : null
-  ] }) });
-};
-var WidgetTrigger = ({ controller, iconSize, progress }) => {
-  const theme = useWidgetTheme();
-  const { buttons } = controller.config;
-  return (
-    // Web pops the trigger with a spring and fades it out again when the panel
-    // takes over; both ends of that are visible on every open/close cycle.
-    /* @__PURE__ */ jsx28(Animated15.View, { style: [styles24.trigger, { opacity: progress, transform: [{ scale: progress.interpolate({ inputRange: [0, 1], outputRange: [0.8, 1] }) }] }], children: /* @__PURE__ */ jsx28(Touchable, { testID: ringgId("trigger-button"), accessibilityLabel: "Open call widget", onPress: () => controller.handleTriggerClick(), children: /* @__PURE__ */ jsx28(GradientFill, { color: theme.primaryColor, style: [styles24.triggerSurface, toViewStyle(buttons?.modalTrigger?.styles)], children: buttons?.modalTrigger?.icon?.url ? /* @__PURE__ */ jsx28(
-      Image3,
-      {
-        testID: ringgId("trigger-icon"),
-        accessibilityLabel: "Widget trigger",
-        source: { uri: buttons.modalTrigger.icon.url },
-        resizeMode: "contain",
-        style: { width: iconSize, height: iconSize }
-      }
-    ) : /* @__PURE__ */ jsx28(PhoneCallRingIcon, { testID: ringgId("trigger-icon"), size: iconSize, fill: solidColor(theme.primaryTextColor) }) }) }) })
-  );
-};
-var styles24 = StyleSheet24.create({
-  overlay: { ...StyleSheet24.absoluteFill, justifyContent: "flex-end", alignItems: "flex-end" },
-  panelAnchor: { marginHorizontal: EDGE_INSET, marginTop: EDGE_INSET, marginBottom: BOTTOM_SAFE_INSET },
-  panel: {
-    borderWidth: StyleSheet24.hairlineWidth,
-    // `overflow: hidden` is what keeps the transcript, the header bar and the
-    // rounded corners agreeing with each other.
-    overflow: "hidden",
-    // Web stacks three shadows at 1-2% alpha — the panel sits just off the page
-    // rather than floating above it. 12% read as a hard slab, and on Android
-    // `elevation` is the only one of these that applies, so it was the entire
-    // effect instead of a supporting layer.
-    shadowColor: "#000000",
-    shadowOpacity: 0.05,
-    shadowRadius: 20,
-    shadowOffset: { width: 0, height: 8 },
-    elevation: 4
-  },
-  trigger: { position: "absolute", right: EDGE_INSET, bottom: BOTTOM_SAFE_INSET },
-  triggerSurface: { width: TRIGGER_SIZE, height: TRIGGER_SIZE, borderRadius: TRIGGER_RADIUS, alignItems: "center", justifyContent: "center" },
-  chromeButton: { position: "absolute", top: 10, zIndex: 20, width: 28, height: 28, borderRadius: 14, alignItems: "center", justifyContent: "center" },
-  minimizeButton: { right: 42 },
-  closeButton: { right: 10 },
-  body: { flex: 1 },
-  bodyLive: { paddingHorizontal: 20, paddingVertical: 8, gap: 10 },
-  bodyIdle: { padding: 24, gap: 12 },
-  bodySpacer: { flex: 1, marginTop: 56 },
-  voiceWrapper: { width: "100%", alignItems: "stretch", justifyContent: "center", marginTop: 56 },
-  voiceWrapperCompact: { height: 56, flexShrink: 0 },
-  voiceWrapperFull: { flex: 1, minHeight: 0 },
-  transcript: { flex: 1 },
-  // `justifyContent: flex-end` is web's `mt-auto`: a short conversation sits at
-  // the bottom of the panel rather than floating at the top.
-  transcriptList: { flexGrow: 1, justifyContent: "flex-end", gap: 12 },
-  transcriptTopClearance: { paddingTop: 64 },
-  transcriptBottomClearance: { paddingBottom: 80 },
-  fullWidth: { width: "100%" },
-  controlsBar: { position: "absolute", zIndex: 10, bottom: 0, left: 0, right: 0, paddingHorizontal: 20, paddingVertical: 12 },
-  error: { textAlign: "center", fontSize: 14, marginBottom: 8 },
-  connecting: { fontSize: 14, textAlign: "center" },
-  startActions: { flexDirection: "row", alignItems: "center", gap: 8, width: "100%" },
-  legal: { fontSize: 12, lineHeight: 20, textAlign: "center" }
-});
-
-// src/transport/livekit-transport.ts
-import { registerGlobals } from "@livekit/react-native";
-import {
-  ConnectionState as LKConnectionState,
-  Room,
-  RoomEvent as RoomEvent3
-} from "livekit-client";
-
-// src/platform/audio-session.ts
-import { AndroidAudioTypePresets, AudioSession } from "@livekit/react-native";
-var PREFERRED_OUTPUTS = ["bluetooth", "headset", "speaker", "earpiece"];
-var createAudioSession = () => {
-  let active = false;
-  const start = async () => {
-    if (active) return;
-    active = true;
-    try {
-      await AudioSession.configureAudio({
-        android: {
-          audioTypeOptions: AndroidAudioTypePresets.communication,
-          preferredOutputList: [...PREFERRED_OUTPUTS]
-        },
-        ios: { defaultOutput: "speaker" }
-      });
-      await AudioSession.startAudioSession();
-    } catch {
-    }
+var defaultUrlResolver = createStaticUrlResolver(DEFAULT_ENVIRONMENT_URLS);
+
+// src/platform/mic-permission.ts
+import { PermissionsAndroid, Platform as Platform5 } from "react-native";
+import { mediaDevices } from "@livekit/react-native-webrtc";
+var stopTracks = (stream) => {
+  stream.getTracks().forEach((track) => track.stop());
+};
+var probeMicrophone = async () => {
+  try {
+    const stream = await mediaDevices.getUserMedia({ audio: true });
+    stopTracks(stream);
+    return true;
+  } catch {
+    return false;
+  }
+};
+var ANDROID_RATIONALE = {
+  title: "Microphone access",
+  message: "Voice calls need the microphone to hear you.",
+  buttonPositive: "Allow",
+  buttonNegative: "Not now"
+};
+var createNativeMicPermission = () => ({
+  async isGranted() {
+    if (Platform5.OS === "android") {
+      return PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO);
+    }
+    return probeMicrophone();
+  },
+  async request() {
+    if (Platform5.OS === "android") {
+      const result = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, ANDROID_RATIONALE);
+      return result === PermissionsAndroid.RESULTS.GRANTED;
+    }
+    return probeMicrophone();
+  }
+});
+
+// src/transport/livekit-transport.ts
+import { registerGlobals } from "@livekit/react-native";
+import {
+  ConnectionState as LKConnectionState,
+  Room,
+  RoomEvent as RoomEvent3
+} from "livekit-client";
+
+// src/platform/audio-session.ts
+import { AndroidAudioTypePresets, AudioSession } from "@livekit/react-native";
+var PREFERRED_OUTPUTS = ["bluetooth", "headset", "speaker", "earpiece"];
+var createAudioSession = () => {
+  let active = false;
+  const start = async () => {
+    if (active) return;
+    active = true;
+    try {
+      await AudioSession.configureAudio({
+        android: {
+          audioTypeOptions: AndroidAudioTypePresets.communication,
+          preferredOutputList: [...PREFERRED_OUTPUTS]
+        },
+        ios: { defaultOutput: "speaker" }
+      });
+      await AudioSession.startAudioSession();
+    } catch {
+    }
   };
   const stop = async () => {
     if (!active) return;
@@ -5552,60 +5541,390 @@ var createLiveKitTransport = (options = {}) => {
         room.off(RoomEvent3.MediaDevicesError, listener);
       };
     }
-  };
-  const dispose = () => {
-    room.off(RoomEvent3.DataReceived, handleDataReceived);
-    room.off(RoomEvent3.Disconnected, handleRoomDisconnected);
-    for (const topic of Array.from(registeredTextStreamTopics)) {
-      room.unregisterTextStreamHandler(topic);
+  };
+  const dispose = () => {
+    room.off(RoomEvent3.DataReceived, handleDataReceived);
+    room.off(RoomEvent3.Disconnected, handleRoomDisconnected);
+    for (const topic of Array.from(registeredTextStreamTopics)) {
+      room.unregisterTextStreamHandler(topic);
+    }
+    registeredTextStreamTopics.clear();
+    for (const method of Array.from(registeredRpcMethods)) {
+      room.unregisterRpcMethod(method);
+    }
+    registeredRpcMethods.clear();
+    chatHandlers.clear();
+    firstSeenAt.clear();
+    void room.disconnect().finally(() => audioSession?.stop());
+  };
+  return { transport, room, dispose };
+};
+
+// src/RinggWidget.tsx
+import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+var PANEL_MAX_WIDTH = 400;
+var PANEL_HEIGHT = 456;
+var PANEL_HEIGHT_RATIO = 0.9;
+var EDGE_INSET = 16;
+var BOTTOM_SAFE_INSET = 24;
+var TRIGGER_SIZE = 52;
+var TRIGGER_RADIUS = 20;
+var DEFAULT_TRIGGER_ICON_SIZE = 24;
+var PANEL_SPRING = { stiffness: 380, damping: 30 };
+var TRIGGER_SPRING = { stiffness: 400, damping: 25 };
+var LEGAL_LINKS = { "Privacy Policy": "https://www.ringg.ai/privacy", "T&C": "https://www.ringg.ai/terms" };
+var LEGAL_TEXT = "By continuing, you agree to our\nPrivacy Policy and T&C.";
+var isFreeButtonsMessage = (message) => {
+  const componentData = message?.componentData;
+  return !!componentData && isButtons2(componentData) && componentData.data.presentation === "free";
+};
+var isAttachableAgentMessage = (message) => !!message && !message.componentType && !message.isSelf && Boolean(message.message.trim());
+var WidgetPanel = ({ controller, room, width, height }) => {
+  const theme = useWidgetTheme();
+  const { config } = controller;
+  const {
+    title = WIDGET_DEFAULTS.title,
+    description = WIDGET_DEFAULTS.description,
+    buttons,
+    defaultExpanded = WIDGET_DEFAULTS.defaultExpanded,
+    hideTabSelector = WIDGET_DEFAULTS.hideTabSelector,
+    bypassStartScreen = WIDGET_DEFAULTS.bypassStartScreen,
+    logoUrl,
+    logoStyles,
+    typingWords,
+    legalDisclaimer,
+    feedbackScreen,
+    voiceCall
+  } = config;
+  const shell = useRinggShell(controller);
+  const session = useRinggSession(controller);
+  const { messages } = useRinggMessages(controller);
+  const { isTyping: isAgentTyping } = useRinggTyping(controller);
+  const { completedFlowIds } = useRinggComponents(controller);
+  const { commands } = useRinggSlashCommands(controller);
+  const [alertEndCall, setAlertEndCall] = useState16(false);
+  const microphone = useMicrophone(room);
+  const callMode = shell.callMode;
+  const showFeedback = shell.viewState === "feedback";
+  const isLoading = session.isLoading;
+  const error = session.error;
+  const connectionState = session.connectionState;
+  const isCalling = connectionState === "connected";
+  const isSessionLive = session.isSessionLive;
+  const isAudioMode = callMode === "audio";
+  const showVoiceAnimation = isAudioMode && isCalling && (voiceCall?.showAnimation ?? WIDGET_DEFAULTS.voiceCallShowAnimation);
+  const showVoiceTranscript = !isAudioMode || (voiceCall?.showTranscript ?? WIDGET_DEFAULTS.voiceCallShowTranscript);
+  const mergedSlashCommands = useMemo11(() => [...commands], [commands]);
+  const sortedMessages = useMemo11(() => [...messages].sort((a, b) => a.timestamp - b.timestamp), [messages]);
+  const transcriptRef = useRef15(null);
+  const previousMessagesCountRef = useRef15(0);
+  useEffect16(() => {
+    const newMessageAdded = messages.length > previousMessagesCountRef.current;
+    previousMessagesCountRef.current = messages.length;
+    transcriptRef.current?.scrollToEnd({ animated: newMessageAdded });
+  }, [messages, isAgentTyping]);
+  const handleCallStart = (mediaType) => void controller.startCall(mediaType);
+  const handleCallEnd = () => {
+    setAlertEndCall(false);
+    void controller.endCall();
+  };
+  const handleFeedbackSubmit = (rating, comment) => void controller.submitFeedback(rating, comment);
+  const handleFeedbackSkip = () => controller.skipFeedback();
+  const handleUserMessageSent = () => controller.typing.showOnUserSend();
+  const handleFlowComplete = (componentId) => controller.markFlowComplete(componentId);
+  const handleSelectionDisplayed = (componentId, label) => controller.displaySelection(componentId, label);
+  const sendComponentResponse = (componentId, responseData) => controller.sendComponentResponse(componentId, responseData);
+  const sendSlashCommand = (command) => void controller.sendSlashCommand(command);
+  const callComponentApi = controller.callComponentApi;
+  const panelRadius = resolveRadius(theme.borderRadius, 16);
+  const fontFamily = resolveFontFamily(theme.fontFamily);
+  const chrome = /* @__PURE__ */ jsxs20(Fragment8, { children: [
+    !defaultExpanded && (isSessionLive || showFeedback) ? /* @__PURE__ */ jsx28(Touchable, { testID: ringgId("minimize-button"), accessibilityLabel: "Minimize widget", onPress: () => controller.minimizeWidget(), style: [styles24.chromeButton, styles24.minimizeButton], children: /* @__PURE__ */ jsx28(Minus, { size: 16, color: solidColor(theme.mutedTextColor) }) }) : null,
+    !defaultExpanded ? /* @__PURE__ */ jsx28(
+      Touchable,
+      {
+        testID: ringgId("close-button"),
+        accessibilityLabel: isSessionLive ? "End call" : "Close widget",
+        onPress: () => isSessionLive ? setAlertEndCall(true) : showFeedback ? handleFeedbackSkip() : controller.minimizeWidget(),
+        style: [styles24.chromeButton, styles24.closeButton],
+        children: /* @__PURE__ */ jsx28(X, { size: 16, color: solidColor(theme.mutedTextColor) })
+      }
+    ) : null
+  ] });
+  const transcript = /* @__PURE__ */ jsxs20(
+    ScrollView5,
+    {
+      testID: ringgId("transcript"),
+      ref: transcriptRef,
+      style: styles24.transcript,
+      contentContainerStyle: [styles24.transcriptList, !showVoiceAnimation && styles24.transcriptTopClearance, !isAudioMode && styles24.transcriptBottomClearance],
+      keyboardShouldPersistTaps: "handled",
+      showsVerticalScrollIndicator: false,
+      children: [
+        sortedMessages.map((segment, index) => {
+          if (segment.kind === "system") return /* @__PURE__ */ jsx28(system_log_default, { label: segment.message, meta: segment.systemMeta, level: segment.systemLevel }, `sys_${segment.timestamp}_${index}`);
+          const previousSegment = sortedMessages[index - 1];
+          const nextSegment = sortedMessages[index + 1];
+          const attachFreeButtonsToPrevious = isFreeButtonsMessage(segment) && isAttachableAgentMessage(previousSegment);
+          const skipStandaloneRender = isAttachableAgentMessage(segment) && isFreeButtonsMessage(nextSegment);
+          if (skipStandaloneRender) return null;
+          if (attachFreeButtonsToPrevious && previousSegment && segment.componentData) {
+            const componentData = segment.componentData;
+            const isCompletedSelectedItem = componentData.component_type === "buttons" && componentData.data.completionDisplay === "selected_item" && completedFlowIds.has(componentData.component_id);
+            if (isCompletedSelectedItem) return /* @__PURE__ */ jsx28(message_item_default, { itemIndex: index, message: previousSegment }, `message_with_buttons_${segment.componentData.component_id}_${index}`);
+            return /* @__PURE__ */ jsxs20(Fragment7, { children: [
+              /* @__PURE__ */ jsx28(message_item_default, { itemIndex: index, message: previousSegment }),
+              /* @__PURE__ */ jsx28(View21, { testID: ringgId("attached-buttons"), style: styles24.fullWidth, children: /* @__PURE__ */ jsx28(
+                interactive_flow_default,
+                {
+                  initialComponent: segment.componentData,
+                  onApiCall: callComponentApi,
+                  onComplete: () => handleFlowComplete(componentData.component_id),
+                  onSendResponse: sendComponentResponse,
+                  onSelectionDisplayed: handleSelectionDisplayed,
+                  quickReplyAlign: isAudioMode ? "center" : "end"
+                }
+              ) })
+            ] }, `message_with_buttons_${segment.componentData.component_id}_${index}`);
+          }
+          if (segment.componentType === "blocks" && segment.componentData) {
+            const blocksPayload = segment.componentData;
+            if (isBlocks2(blocksPayload)) {
+              const blocksConfig = blocksPayload.data;
+              const blockId = blocksPayload.component_id;
+              return /* @__PURE__ */ jsx28(View21, { testID: ringgId("blocks-widget"), style: styles24.fullWidth, children: /* @__PURE__ */ jsx28(
+                blocks_step_default,
+                {
+                  config: blocksConfig,
+                  disabled: completedFlowIds.has(blockId),
+                  onAction: (action) => {
+                    handleUserMessageSent();
+                    handleFlowComplete(blockId);
+                    const selection = typeof action.value === "string" || typeof action.value === "number" ? String(action.value) : action.label;
+                    if (selection) handleSelectionDisplayed(blockId, selection);
+                    return controller.sendBlocksAction(blocksConfig.tool_id, blockId, { action_id: action.action_id, value: action.value, values: action.values });
+                  }
+                }
+              ) }, `blocks_${blockId}`);
+            }
+          }
+          if (segment.componentType && segment.componentData) {
+            const componentData = segment.componentData;
+            const isCompletedSelectedItem = componentData.component_type === "buttons" && componentData.data.completionDisplay === "selected_item" && completedFlowIds.has(componentData.component_id);
+            if (isCompletedSelectedItem) return null;
+            return /* @__PURE__ */ jsx28(
+              interactive_flow_default,
+              {
+                initialComponent: segment.componentData,
+                onApiCall: callComponentApi,
+                onComplete: () => handleFlowComplete(componentData.component_id),
+                onSendResponse: sendComponentResponse,
+                onSelectionDisplayed: handleSelectionDisplayed,
+                quickReplyAlign: isAudioMode ? "center" : "end"
+              },
+              `flow_${segment.componentData.component_id}_${index}`
+            );
+          }
+          return /* @__PURE__ */ jsx28(message_item_default, { itemIndex: index, message: segment }, `${segment.timestamp}__${index}`);
+        }),
+        isAgentTyping ? /* @__PURE__ */ jsx28(typing_indicator_default, { words: typingWords }) : null
+      ]
+    }
+  );
+  const controls = /* @__PURE__ */ jsx28(
+    call_controls_default,
+    {
+      buttonConfig: buttons,
+      callMode,
+      isCalling: isSessionLive,
+      enabledSlashCommands: mergedSlashCommands,
+      micEnabled: microphone?.enabled ?? true,
+      onToggleMic: microphone?.toggle,
+      onSlashCommand: sendSlashCommand,
+      onUserMessage: handleUserMessageSent,
+      onCallEnd: handleCallEnd,
+      onSendMessage: (message) => controller.sendMessage(message)
     }
-    registeredTextStreamTopics.clear();
-    for (const method of Array.from(registeredRpcMethods)) {
-      room.unregisterRpcMethod(method);
+  );
+  return /* @__PURE__ */ jsxs20(
+    View21,
+    {
+      testID: ringgId("widget-root"),
+      style: [styles24.panel, { width, height, borderRadius: panelRadius, backgroundColor: solidColor(theme.backgroundColor), borderColor: solidColor(theme.borderColor) }],
+      children: [
+        chrome,
+        /* @__PURE__ */ jsx28(
+          ConfirmDialog,
+          {
+            open: alertEndCall,
+            title: `Are you sure you want to end ${callMode === "text" ? "chat" : "call"}?`,
+            description: "Your current conversation will be closed and cannot be accessed later.",
+            confirmLabel: `End ${callMode === "text" ? "Chat" : "Call"}`,
+            cancelLabel: "Cancel",
+            onConfirm: handleCallEnd,
+            onCancel: () => setAlertEndCall(false)
+          }
+        ),
+        showFeedback ? /* @__PURE__ */ jsx28(
+          feedback_screen_default,
+          {
+            callMode,
+            isSubmitting: isLoading,
+            feedbackScreenConfig: feedbackScreen,
+            messages,
+            title,
+            logoUrl,
+            logoStyles,
+            onSubmit: handleFeedbackSubmit,
+            onSkip: handleFeedbackSkip
+          }
+        ) : /* @__PURE__ */ jsxs20(View21, { testID: ringgId("widget-body"), style: [styles24.body, isSessionLive ? styles24.bodyLive : styles24.bodyIdle], children: [
+          /* @__PURE__ */ jsx28(header_default, { isCalling: isSessionLive, isLoading, title, description, logoUrl, logoStyles }),
+          showVoiceAnimation ? /* @__PURE__ */ jsx28(View21, { testID: ringgId("voice-animation-wrapper"), style: [styles24.voiceWrapper, showVoiceTranscript && messages.length > 0 ? styles24.voiceWrapperCompact : styles24.voiceWrapperFull], children: /* @__PURE__ */ jsx28(VoiceAnimationLeaf, { room }) }) : null,
+          isSessionLive && !showVoiceAnimation && (messages.length === 0 && !isAgentTyping || !showVoiceTranscript) ? /* @__PURE__ */ jsx28(View21, { testID: ringgId("body-spacer"), style: styles24.bodySpacer }) : null,
+          (messages.length > 0 || isAgentTyping) && isSessionLive && showVoiceTranscript ? transcript : null,
+          isSessionLive && callMode === "text" ? (
+            // Transparent bottom bar: it only positions the composer over the
+            // transcript, so the gutters stay clear while messages scroll under.
+            /* @__PURE__ */ jsxs20(View21, { testID: ringgId("controls-bar"), style: styles24.controlsBar, children: [
+              error.hasError ? /* @__PURE__ */ jsx28(Text18, { testID: ringgId("error-message"), style: [styles24.error, { color: solidColor(theme.errorColor), fontFamily }], children: error.message }) : null,
+              controls
+            ] })
+          ) : /* @__PURE__ */ jsxs20(Fragment8, { children: [
+            controls,
+            error.hasError ? /* @__PURE__ */ jsx28(Text18, { testID: ringgId("error-message"), style: [styles24.error, { color: solidColor(theme.errorColor), fontFamily }], children: error.message }) : null
+          ] }),
+          !isSessionLive && isLoading ? /* @__PURE__ */ jsxs20(View21, { testID: ringgId("connecting-status"), children: [
+            /* @__PURE__ */ jsx28(Text18, { testID: ringgId("connecting-label"), style: [styles24.connecting, { color: theme.mutedTextColor, fontFamily }], children: "Connecting..." }),
+            /* @__PURE__ */ jsx28(loading_bar_default, { ariaLabel: callMode === "text" ? "Starting chat" : "Connecting" })
+          ] }) : null,
+          !isLoading && connectionState === "disconnected" && (!bypassStartScreen || error.hasError) ? hideTabSelector ? /* @__PURE__ */ jsx28(action_button_default, { callMode, buttonConfig: buttons, isCalling, isLoading, onCallTrigger: handleCallStart }) : /* @__PURE__ */ jsxs20(View21, { testID: ringgId("start-actions"), style: styles24.startActions, children: [
+            /* @__PURE__ */ jsx28(action_button_default, { dual: true, callMode: "text", buttonConfig: buttons, isCalling, isLoading, onCallTrigger: handleCallStart }),
+            /* @__PURE__ */ jsx28(action_button_default, { dual: true, callMode: "audio", buttonConfig: buttons, isCalling, isLoading, onCallTrigger: handleCallStart })
+          ] }) : null,
+          !isSessionLive ? /* @__PURE__ */ jsx28(Text18, { testID: ringgId("legal-disclaimer"), style: [styles24.legal, { color: theme.mutedTextColor, fontFamily }], children: legalDisclaimer ? renderTextWithLinks(legalDisclaimer.text, legalDisclaimer.links) : renderTextWithLinks(LEGAL_TEXT, LEGAL_LINKS, { color: solidColor(theme.primaryColor), textDecorationLine: "underline" }) }) : null
+        ] })
+      ]
     }
-    registeredRpcMethods.clear();
-    chatHandlers.clear();
-    firstSeenAt.clear();
-    void room.disconnect().finally(() => audioSession?.stop());
-  };
-  return { transport, room, dispose };
+  );
 };
-
-// src/platform/mic-permission.ts
-import { PermissionsAndroid, Platform as Platform6 } from "react-native";
-import { mediaDevices } from "@livekit/react-native-webrtc";
-var stopTracks = (stream) => {
-  stream.getTracks().forEach((track) => track.stop());
+var ControlledRinggWidget = ({ controller, room }) => {
+  const shell = useRinggShell(controller);
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+  const { buttons, defaultExpanded = WIDGET_DEFAULTS.defaultExpanded, widgetPosition } = controller.config;
+  const isOpen = shell.viewState === "open" || shell.viewState === "feedback";
+  const hideTriggerOnExpand = widgetPosition?.hideTriggerOnExpand ?? true;
+  const showTrigger = !defaultExpanded && (!hideTriggerOnExpand || !isOpen);
+  const panel = usePresence(isOpen, PANEL_SPRING);
+  const trigger = usePresence(showTrigger, TRIGGER_SPRING);
+  const panelWidth = Math.min(screenWidth - EDGE_INSET * 2, PANEL_MAX_WIDTH);
+  const panelHeight = Math.min(screenHeight * PANEL_HEIGHT_RATIO, PANEL_HEIGHT);
+  const triggerIconSize = toSize(buttons?.modalTrigger?.icon?.size, DEFAULT_TRIGGER_ICON_SIZE);
+  return /* @__PURE__ */ jsx28(WidgetThemeProvider, { theme: controller.theme, children: /* @__PURE__ */ jsxs20(View21, { pointerEvents: "box-none", style: StyleSheet24.absoluteFill, children: [
+    panel.mounted ? /* @__PURE__ */ jsx28(KeyboardAvoidingView3, { pointerEvents: "box-none", behavior: Platform6.OS === "ios" ? "padding" : void 0, style: styles24.overlay, children: /* @__PURE__ */ jsx28(
+      Animated15.View,
+      {
+        renderToHardwareTextureAndroid: true,
+        shouldRasterizeIOS: true,
+        style: [
+          styles24.panelAnchor,
+          {
+            opacity: panel.progress,
+            transform: [{ translateY: panel.progress.interpolate({ inputRange: [0, 1], outputRange: [24, 0] }) }, { scale: panel.progress.interpolate({ inputRange: [0, 1], outputRange: [0.96, 1] }) }]
+          }
+        ],
+        children: /* @__PURE__ */ jsx28(WidgetPanel, { controller, room, width: panelWidth, height: panelHeight })
+      }
+    ) }) : null,
+    trigger.mounted ? /* @__PURE__ */ jsx28(WidgetTrigger, { controller, iconSize: triggerIconSize, progress: trigger.progress }) : null
+  ] }) });
 };
-var probeMicrophone = async () => {
-  try {
-    const stream = await mediaDevices.getUserMedia({ audio: true });
-    stopTracks(stream);
-    return true;
-  } catch {
-    return false;
-  }
+var WidgetTrigger = ({ controller, iconSize, progress }) => {
+  const theme = useWidgetTheme();
+  const { buttons } = controller.config;
+  return (
+    // Web pops the trigger with a spring and fades it out again when the panel
+    // takes over; both ends of that are visible on every open/close cycle.
+    /* @__PURE__ */ jsx28(Animated15.View, { style: [styles24.trigger, { opacity: progress, transform: [{ scale: progress.interpolate({ inputRange: [0, 1], outputRange: [0.8, 1] }) }] }], children: /* @__PURE__ */ jsx28(Touchable, { testID: ringgId("trigger-button"), accessibilityLabel: "Open call widget", onPress: () => controller.handleTriggerClick(), children: /* @__PURE__ */ jsx28(GradientFill, { color: theme.primaryColor, style: [styles24.triggerSurface, toViewStyle(buttons?.modalTrigger?.styles)], children: buttons?.modalTrigger?.icon?.url ? /* @__PURE__ */ jsx28(
+      Image3,
+      {
+        testID: ringgId("trigger-icon"),
+        accessibilityLabel: "Widget trigger",
+        source: { uri: buttons.modalTrigger.icon.url },
+        resizeMode: "contain",
+        style: { width: iconSize, height: iconSize }
+      }
+    ) : /* @__PURE__ */ jsx28(PhoneCallRingIcon, { testID: ringgId("trigger-icon"), size: iconSize, fill: solidColor(theme.primaryTextColor) }) }) }) })
+  );
 };
-var ANDROID_RATIONALE = {
-  title: "Microphone access",
-  message: "Voice calls need the microphone to hear you.",
-  buttonPositive: "Allow",
-  buttonNegative: "Not now"
+var ManagedRinggWidget = ({ config, ports, onReady }) => {
+  const stack = useMemo11(() => {
+    const livekit = ports?.transport ? null : createLiveKitTransport();
+    const controller = createRinggWidgetController(config, {
+      urlResolver: defaultUrlResolver,
+      micPermission: createNativeMicPermission(),
+      ...ports,
+      transport: ports?.transport ?? livekit.transport
+    });
+    return { controller, livekit };
+  }, [config]);
+  useEffect16(
+    () => () => {
+      stack.controller.destroy();
+      stack.livekit?.dispose();
+    },
+    [stack]
+  );
+  const onReadyRef = useRef15(onReady);
+  onReadyRef.current = onReady;
+  useEffect16(() => {
+    onReadyRef.current?.(stack.controller);
+  }, [stack]);
+  return /* @__PURE__ */ jsx28(ControlledRinggWidget, { controller: stack.controller, room: stack.livekit?.room });
 };
-var createNativeMicPermission = () => ({
-  async isGranted() {
-    if (Platform6.OS === "android") {
-      return PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO);
-    }
-    return probeMicrophone();
+var RinggWidget = (props) => props.config ? /* @__PURE__ */ jsx28(ManagedRinggWidget, { config: props.config, ports: props.ports, onReady: props.onReady }) : /* @__PURE__ */ jsx28(ControlledRinggWidget, { controller: props.controller, room: props.room });
+var styles24 = StyleSheet24.create({
+  overlay: { ...StyleSheet24.absoluteFill, justifyContent: "flex-end", alignItems: "flex-end" },
+  panelAnchor: { marginHorizontal: EDGE_INSET, marginTop: EDGE_INSET, marginBottom: BOTTOM_SAFE_INSET },
+  panel: {
+    borderWidth: StyleSheet24.hairlineWidth,
+    // `overflow: hidden` is what keeps the transcript, the header bar and the
+    // rounded corners agreeing with each other.
+    overflow: "hidden",
+    // Web stacks three shadows at 1-2% alpha — the panel sits just off the page
+    // rather than floating above it. 12% read as a hard slab, and on Android
+    // `elevation` is the only one of these that applies, so it was the entire
+    // effect instead of a supporting layer.
+    shadowColor: "#000000",
+    shadowOpacity: 0.05,
+    shadowRadius: 20,
+    shadowOffset: { width: 0, height: 8 },
+    elevation: 4
   },
-  async request() {
-    if (Platform6.OS === "android") {
-      const result = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, ANDROID_RATIONALE);
-      return result === PermissionsAndroid.RESULTS.GRANTED;
-    }
-    return probeMicrophone();
-  }
+  trigger: { position: "absolute", right: EDGE_INSET, bottom: BOTTOM_SAFE_INSET },
+  triggerSurface: { width: TRIGGER_SIZE, height: TRIGGER_SIZE, borderRadius: TRIGGER_RADIUS, alignItems: "center", justifyContent: "center" },
+  chromeButton: { position: "absolute", top: 10, zIndex: 20, width: 28, height: 28, borderRadius: 14, alignItems: "center", justifyContent: "center" },
+  minimizeButton: { right: 42 },
+  closeButton: { right: 10 },
+  body: { flex: 1 },
+  bodyLive: { paddingHorizontal: 20, paddingVertical: 8, gap: 10 },
+  bodyIdle: { padding: 24, gap: 12 },
+  bodySpacer: { flex: 1, marginTop: 56 },
+  voiceWrapper: { width: "100%", alignItems: "stretch", justifyContent: "center", marginTop: 56 },
+  voiceWrapperCompact: { height: 56, flexShrink: 0 },
+  voiceWrapperFull: { flex: 1, minHeight: 0 },
+  transcript: { flex: 1 },
+  // `justifyContent: flex-end` is web's `mt-auto`: a short conversation sits at
+  // the bottom of the panel rather than floating at the top.
+  transcriptList: { flexGrow: 1, justifyContent: "flex-end", gap: 12 },
+  transcriptTopClearance: { paddingTop: 64 },
+  transcriptBottomClearance: { paddingBottom: 80 },
+  fullWidth: { width: "100%" },
+  controlsBar: { position: "absolute", zIndex: 10, bottom: 0, left: 0, right: 0, paddingHorizontal: 20, paddingVertical: 12 },
+  error: { textAlign: "center", fontSize: 14, marginBottom: 8 },
+  connecting: { fontSize: 14, textAlign: "center" },
+  startActions: { flexDirection: "row", alignItems: "center", gap: 8, width: "100%" },
+  legal: { fontSize: 12, lineHeight: 20, textAlign: "center" }
 });
 
 // src/platform/app-origin.ts
@@ -5673,26 +5992,73 @@ var createHostActionDispatcher = (onAction) => (action, onLog) => {
   }
 };
 export {
+  CHAT_WIDGET_AFTER_TEXT_MS,
+  CHAT_WIDGET_GRACE_MS,
+  WIDGET_DEFAULTS as DEFAULT_CONFIG,
+  DEFAULT_ENVIRONMENT_URLS,
+  DEFAULT_WIDGET_THEME,
   GradientFill,
+  MIN_TYPING_INDICATOR_MS,
   Markdown,
   RinggWidget,
+  WIDGET_PRESET_THEMES,
   WidgetThemeProvider,
   appOrigin,
+  buildPayload,
+  colorToBackground,
+  colorToBorder,
+  colorToSolid,
   createAudioSession,
   createCallbackEventBus,
+  createComponentStore,
+  createDomEventBus,
   createHostActionDispatcher,
   createLiveKitTransport,
+  createMessageStore,
   createNativeMicPermission,
   createNotificationPlayer,
+  createRinggApiClient,
   createRinggWidgetController,
+  createSessionStore,
+  createShellStore,
   createSilentNotificationPlayer,
+  createSlashCommandStore,
+  createStaticUrlResolver,
+  createStore,
+  createSystemClock,
+  createTypingStore,
+  defaultUrlResolver,
+  extractColorsFromGradient,
+  formatBlocksAction,
+  formatComponentResponse,
+  formatDynamicData,
+  formatSlashCommand,
+  formatSlotDate,
+  formatSlotTime,
+  getButtonRadius,
+  getContrastingTextColor,
+  getDominantColor,
+  grantedMicPermission,
+  groupSlotsByDate,
+  isBlocks,
+  isButtons,
+  isCalendarBooking,
+  isConfirmation,
+  isForm,
+  isGradient,
+  isInteractiveFlow,
+  isLightColor,
+  mergeComponentTheme,
+  mergeWidgetTheme,
   resolveButtonRadius,
   resolveFontFamily,
   resolveRadius,
   ringgId,
+  silentNotificationPlayer,
   solidColor,
   toSize,
   toViewStyle,
+  transformRpcToComponent,
   useRinggComponents,
   useRinggMessages,
   useRinggSession,