@mrrocket/sdk 0.9.0 → 0.10.0

package/dist/react-native/index.js

@@ -49,7 +49,7 @@ module.exports = __toCommonJS(native_exports);
 var import_react3 = require("react");
 
 // src/core.ts
-var SDK_VERSION = "0.9.0";
+var SDK_VERSION = "0.10.0";
 var propOf = (person, name) => {
   const want = name.trim().toLowerCase();
   for (const [k, v] of Object.entries(person)) if (k.toLowerCase() === want) return v;
@@ -172,6 +172,16 @@ var textChanges = (config, distinctId, preview) => {
 var newDistinctId = () => typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `ck_${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`;
 
 // src/api-client.ts
+var replyLine = (t) => t === "minutes" ? "We usually reply in a few minutes" : t === "day" ? "We usually reply within a day" : "We usually reply in a few hours";
+var inkOn = (hex) => {
+  const m = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex);
+  if (!m) return "#ffffff";
+  const [r, g, b] = [m[1], m[2], m[3]].map((x) => {
+    const c = parseInt(x, 16) / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.45 ? "#111214" : "#ffffff";
+};
 var ApiError = class extends Error {
   constructor(message, status) {
     super(message);
@@ -2369,6 +2379,35 @@ var buzz = () => {
   }
 };
 var teamOf = (t) => (t?.messages ?? []).filter((m) => m.from !== "visitor");
+var svg = null;
+try {
+  svg = require("react-native-svg");
+} catch {
+  svg = null;
+}
+var GLYPH = {
+  chat: "M2.5 4.5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v4.5a2 2 0 0 1-2 2H7l-3 2.5V11a2 2 0 0 1-1.5-2z",
+  home: "M2.5 7 8 2.5 13.5 7v6a1 1 0 0 1-1 1h-3v-4h-3v4h-3a1 1 0 0 1-1-1z",
+  help: "M8 14.5A6.5 6.5 0 1 0 8 1.5a6.5 6.5 0 0 0 0 13zM6.2 6.2a1.9 1.9 0 1 1 2.6 1.8c-.5.2-.8.6-.8 1.1v.4M8 11.6v.1",
+  send: "M2.5 8h10M8.5 3.5 13 8l-4.5 4.5",
+  up: "M8 13V3M3.5 7.5 8 3l4.5 4.5",
+  next: "M6 3.5 10.5 8 6 12.5",
+  search: "M7 11.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9zM10.5 10.5l3 3",
+  cross: "m4 4 8 8M12 4l-8 8"
+};
+var FALLBACK = { chat: "\u{1F4AC}", home: "\u2302", help: "?", send: "\u2192", up: "\u2191", next: "\u203A", search: "\u2315", cross: "\xD7" };
+var glyph = (name, color, size = 20) => {
+  const Svg = svg?.Svg ?? svg?.default;
+  if (!svg || !Svg) return (0, import_react2.createElement)(RN3.Text, { style: { color, fontSize: Math.round(size * 0.85), lineHeight: size + 2, textAlign: "center", minWidth: size } }, FALLBACK[name]);
+  return (0, import_react2.createElement)(Svg, { width: size, height: size, viewBox: "0 0 16 16", fill: "none" }, (0, import_react2.createElement)(svg.Path, { d: GLYPH[name], stroke: color, strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }));
+};
+var alpha = (hex, a) => /^#[0-9a-f]{6}$/i.test(hex) ? `${hex}${Math.round(a * 255).toString(16).padStart(2, "0")}` : hex;
+var teamMark = (title, bg, fg, size = 36) => (0, import_react2.createElement)(
+  RN3.View,
+  { style: { width: size, height: size, borderRadius: size / 2, backgroundColor: bg, alignItems: "center", justifyContent: "center" } },
+  (0, import_react2.createElement)(RN3.Text, { style: { color: fg, fontSize: Math.round(size * 0.42), fontWeight: "700" } }, (title.trim()[0] ?? "?").toUpperCase())
+);
+var lift = { shadowColor: "#101218", shadowOpacity: 0.07, shadowRadius: 14, shadowOffset: { width: 0, height: 4 }, elevation: 2 };
 var useChat = (client, o, open, view) => {
   const [thread, setThread] = (0, import_react2.useState)(null);
   const [loaded, setLoaded] = (0, import_react2.useState)(false);
@@ -2570,55 +2609,102 @@ var MessengerSheet = ({
       setPending(null);
     }
   };
+  const ink = inkOn(p.accent);
+  const dark = p.bg === DARK.bg;
+  const canvas = dark ? p.bg : p.soft;
+  const raised = dark ? p.soft : p.bg;
+  const title = o.title ?? "Chat with us";
+  const reply = replyLine(o.replyTime);
   const bubble = (m, isPending = false) => {
     const mine = m.from === "visitor";
     return (0, import_react2.createElement)(
       RN3.View,
       { key: m.id, style: { alignSelf: mine ? "flex-end" : "flex-start", maxWidth: "82%", gap: 4 } },
-      (0, import_react2.createElement)(RN3.View, { style: { backgroundColor: mine ? p.accent : p.soft, borderRadius: 14, paddingHorizontal: 12, paddingVertical: 8, opacity: isPending ? 0.7 : 1 } }, k.text(m.body, { color: mine ? "#ffffff" : p.fg })),
+      (0, import_react2.createElement)(
+        RN3.View,
+        {
+          style: {
+            backgroundColor: mine ? p.accent : dark ? p.soft : "#eeeff1",
+            borderRadius: 18,
+            borderBottomRightRadius: mine ? 6 : 18,
+            borderBottomLeftRadius: mine ? 18 : 6,
+            paddingHorizontal: 14,
+            paddingVertical: 9,
+            opacity: isPending ? 0.7 : 1
+          }
+        },
+        k.text(m.body, { color: mine ? ink : p.fg })
+      ),
       ...(m.articles ?? []).map(
         (a) => (0, import_react2.createElement)(
           RN3.Pressable,
-          { key: a.id, onPress: () => setView({ article: a.id }), accessibilityRole: "link", style: { borderWidth: 1, borderColor: p.line, borderRadius: 10, paddingHorizontal: 10, paddingVertical: 6 } },
+          { key: a.id, onPress: () => setView({ article: a.id }), accessibilityRole: "link", style: { borderWidth: 1, borderColor: p.line, borderRadius: 12, paddingHorizontal: 10, paddingVertical: 7 } },
           k.text(`\u{1F4C4} ${a.title}`, { fontSize: 13 })
         )
       ),
-      m.at ? k.muted(`${mine ? "" : `${whoLabel[m.from]} \xB7 `}${isPending ? "Sending\u2026" : timeAgo(m.at)}`, { fontSize: 11, textAlign: mine ? "right" : "left" }) : null
+      m.at ? k.muted(`${mine ? "" : `${whoLabel[m.from]} \xB7 `}${isPending ? "Sending\u2026" : timeAgo(m.at)}`, { fontSize: 11, textAlign: mine ? "right" : "left", paddingHorizontal: 6 }) : null
     );
   };
   const row = (a) => (0, import_react2.createElement)(
     RN3.Pressable,
-    { key: a.id, onPress: () => setView({ article: a.id }), accessibilityRole: "button", style: { flexDirection: "row", alignItems: "center", paddingVertical: 11, paddingHorizontal: 4 } },
+    { key: a.id, onPress: () => setView({ article: a.id }), accessibilityRole: "button", style: { flexDirection: "row", alignItems: "center", gap: 8, paddingVertical: 11, paddingHorizontal: 8 } },
     k.text(a.title, { flex: 1 }),
-    k.muted("\u203A", { fontSize: 18 })
+    glyph("next", p.accent, 14)
   );
-  const card = (children, style = {}) => (0, import_react2.createElement)(RN3.View, { style: { backgroundColor: p.bg, borderRadius: 12, padding: 12, borderWidth: 1, borderColor: p.line, ...style } }, ...children);
-  const search = k.field({ value: query, onChange: setQuery, placeholder: "Search for help", max: 200 });
+  const card = (children, style = {}) => (0, import_react2.createElement)(RN3.View, { style: { backgroundColor: raised, borderRadius: 16, padding: 16, ...dark ? { borderWidth: 1, borderColor: p.line } : lift, ...style } }, ...children);
+  const searchRow = (onPress) => (0, import_react2.createElement)(
+    RN3.Pressable,
+    { key: "s", onPress, accessibilityRole: "search", style: { flexDirection: "row", alignItems: "center", height: 44, borderRadius: 12, paddingHorizontal: 14, backgroundColor: canvas } },
+    k.muted("Search for help", { flex: 1, fontSize: 15 }),
+    glyph("search", p.accent, 16)
+  );
+  const search = k.field({ value: query, onChange: setQuery, placeholder: "Search for help", max: 200, style: { borderWidth: 0, borderRadius: 12, backgroundColor: raised, ...dark ? {} : lift } });
   const last = thread?.messages.at(-1);
   const showHelp = helpOn && arts.any !== false;
   let content;
   if (view === "home")
     content = (0, import_react2.createElement)(
       RN3.ScrollView,
-      { key: "home", style: { flex: 1, backgroundColor: p.soft }, contentContainerStyle: { padding: 16, gap: 12 }, keyboardShouldPersistTaps: "handled" },
-      (0, import_react2.createElement)(RN3.Text, { style: { color: p.fg, fontSize: 22, fontWeight: "700", paddingVertical: 6 } }, greeting),
+      { key: "home", style: { flex: 1, backgroundColor: canvas }, contentContainerStyle: { paddingBottom: 24 }, keyboardShouldPersistTaps: "handled" },
+      (0, import_react2.createElement)(RN3.View, { style: { backgroundColor: p.accent, paddingHorizontal: 22, paddingTop: 4, paddingBottom: 64 } }, (0, import_react2.createElement)(RN3.Text, { style: { color: ink, fontSize: 28, fontWeight: "700", letterSpacing: -0.4, lineHeight: 34 } }, greeting)),
       (0, import_react2.createElement)(
-        RN3.Pressable,
-        { onPress: () => setView("messages"), accessibilityRole: "button" },
-        card([
-          k.text(last ? "Recent message" : "Send us a message", { fontWeight: "700" }),
-          k.muted(last ? `${last.from === "visitor" ? "You" : whoLabel[last.from]}: ${last.body}` : "We usually answer within a few hours", { marginTop: 2 })
-        ])
-      ),
-      showHelp ? card([(0, import_react2.createElement)(RN3.Pressable, { key: "s", onPress: () => setView("help") }, (0, import_react2.createElement)(RN3.View, { pointerEvents: "none" }, k.muted("\u{1F50D}  Search for help", { paddingVertical: 8 }))), ...(arts.list ?? []).slice(0, 4).map(row)]) : null
+        RN3.View,
+        { style: { marginTop: -48, paddingHorizontal: 16, gap: 12 } },
+        last ? (0, import_react2.createElement)(
+          RN3.Pressable,
+          { key: "recent", onPress: () => setView("messages"), accessibilityRole: "button" },
+          card([
+            k.muted("Recent message", { fontSize: 12, fontWeight: "600", marginBottom: 10 }),
+            (0, import_react2.createElement)(
+              RN3.View,
+              { key: "r", style: { flexDirection: "row", alignItems: "center", gap: 12 } },
+              teamMark(title, p.accent, ink),
+              (0, import_react2.createElement)(RN3.View, { style: { flex: 1, gap: 2 } }, (0, import_react2.createElement)(RN3.Text, { numberOfLines: 1, style: { color: p.fg, fontSize: 15 } }, last.body), k.muted(`${last.from === "visitor" ? "You" : whoLabel[last.from]} \xB7 ${timeAgo(last.at)}`, { fontSize: 12 })),
+              chat.unseen.length ? (0, import_react2.createElement)(RN3.View, { style: { minWidth: 20, height: 20, borderRadius: 10, paddingHorizontal: 6, backgroundColor: p.danger, alignItems: "center", justifyContent: "center" } }, k.text(String(chat.unseen.length), { color: "#fff", fontSize: 12, fontWeight: "700" })) : glyph("next", p.muted, 14)
+            )
+          ])
+        ) : null,
+        (0, import_react2.createElement)(
+          RN3.Pressable,
+          { key: "send", onPress: () => setView("messages"), accessibilityRole: "button" },
+          card(
+            [
+              (0, import_react2.createElement)(RN3.View, { key: "t", style: { flex: 1, gap: 2 } }, k.text("Send us a message", { fontWeight: "700", fontSize: 16 }), k.muted(reply)),
+              (0, import_react2.createElement)(RN3.View, { key: "g", style: { width: 36, height: 36, borderRadius: 18, backgroundColor: alpha(p.accent, 0.12), alignItems: "center", justifyContent: "center" } }, glyph("send", p.accent, 18))
+            ],
+            { flexDirection: "row", alignItems: "center", gap: 12 }
+          )
+        ),
+        showHelp ? card([searchRow(() => setView("help")), ...(arts.list ?? []).slice(0, 4).map(row)], { padding: 8, gap: 2 }) : null
+      )
     );
   else if (view === "messages")
     content = (0, import_react2.createElement)(
       RN3.View,
-      { key: "messages", style: { flex: 1 } },
+      { key: "messages", style: { flex: 1, backgroundColor: p.bg } },
       (0, import_react2.createElement)(
         RN3.ScrollView,
-        { ref: scroll, style: { flex: 1 }, contentContainerStyle: { padding: 16, gap: 10 } },
+        { ref: scroll, style: { flex: 1 }, contentContainerStyle: { padding: 16, gap: 12 } },
         bubble({ id: "greeting", from: "team", body: greeting, at: "" }),
         !chat.loaded ? k.muted("Loading\u2026") : null,
         ...(thread?.messages ?? []).map((m) => bubble(m)),
@@ -2627,14 +2713,24 @@ var MessengerSheet = ({
       ),
       (0, import_react2.createElement)(
         RN3.View,
-        { style: { padding: 12, gap: 8, borderTopWidth: 1, borderTopColor: p.line } },
+        { style: { paddingHorizontal: 12, paddingTop: 8, paddingBottom: 10, gap: 8 } },
         chat.error ? k.text(chat.error, { color: p.danger, fontSize: 12 }) : null,
-        needEmail ? k.field({ value: email, onChange: setEmail, placeholder: "Your email (optional), so we can follow up", email: true, max: 200, style: emailOk ? {} : { borderColor: p.danger } }) : null,
+        needEmail ? k.field({ value: email, onChange: setEmail, placeholder: "Your email (optional), so we can follow up", email: true, max: 200, style: { borderWidth: emailOk ? 0 : 1, borderColor: p.danger, borderRadius: 12, backgroundColor: canvas } }) : null,
         (0, import_react2.createElement)(
           RN3.View,
-          { style: { flexDirection: "row", gap: 8, alignItems: "flex-end" } },
-          k.field({ value: body, onChange: setBody, placeholder: "Write a message\u2026", multiline: true, max: 4e3, style: { flex: 1, minHeight: 44, maxHeight: 120 } }),
-          k.btn("Send", "primary", () => void send(), !body.trim() || !!pending || !emailOk)
+          { style: { flexDirection: "row", alignItems: "flex-end", gap: 6, borderWidth: 1, borderColor: p.line, borderRadius: 22, paddingVertical: 5, paddingRight: 5, paddingLeft: 16, backgroundColor: p.bg } },
+          k.field({ value: body, onChange: setBody, placeholder: "Write a message\u2026", multiline: true, max: 4e3, style: { flex: 1, minHeight: 34, maxHeight: 120, borderWidth: 0, paddingHorizontal: 0, paddingVertical: 7, backgroundColor: "transparent" } }),
+          (0, import_react2.createElement)(
+            RN3.Pressable,
+            {
+              onPress: () => void send(),
+              disabled: !body.trim() || !!pending || !emailOk,
+              accessibilityRole: "button",
+              accessibilityLabel: "Send",
+              style: { width: 34, height: 34, borderRadius: 17, alignItems: "center", justifyContent: "center", backgroundColor: !body.trim() || !!pending || !emailOk ? p.line : p.accent }
+            },
+            glyph("up", !body.trim() || !!pending || !emailOk ? p.muted : ink, 18)
+          )
         )
       )
     );
@@ -2643,11 +2739,11 @@ var MessengerSheet = ({
     for (const a of arts.list ?? []) groups.set(a.collection, [...groups.get(a.collection) ?? [], a]);
     content = (0, import_react2.createElement)(
       RN3.ScrollView,
-      { key: "help", style: { flex: 1, backgroundColor: p.soft }, contentContainerStyle: { padding: 16, gap: 12 }, keyboardShouldPersistTaps: "handled" },
+      { key: "help", style: { flex: 1, backgroundColor: canvas }, contentContainerStyle: { padding: 16, gap: 12 }, keyboardShouldPersistTaps: "handled" },
       search,
       arts.list === null ? k.muted("Loading\u2026") : null,
       arts.list?.length === 0 ? (0, import_react2.createElement)(RN3.View, { style: { gap: 10, alignItems: "center", paddingVertical: 24 } }, k.muted(query.trim() ? `Nothing found for \u201C${query.trim()}\u201D.` : "No help articles yet."), k.btn("Send us a message", "primary", () => setView("messages"))) : null,
-      ...query.trim() ? arts.list?.length ? [card((arts.list ?? []).map(row))] : [] : [...groups].map(([name, items]) => (0, import_react2.createElement)(RN3.View, { key: name, style: { gap: 6 } }, k.muted(`${name} \xB7 ${items.length}`), card(items.map(row))))
+      ...query.trim() ? arts.list?.length ? [card((arts.list ?? []).map(row), { padding: 8 })] : [] : [...groups].map(([name, items]) => (0, import_react2.createElement)(RN3.View, { key: name, style: { gap: 6 } }, k.muted(`${name} \xB7 ${items.length}`, { fontSize: 12, fontWeight: "600", paddingHorizontal: 2 }), card(items.map(row), { padding: 8 })))
     );
   } else
     content = (0, import_react2.createElement)(
@@ -2656,25 +2752,44 @@ var MessengerSheet = ({
       (0, import_react2.createElement)(ArticleView, { client, p, id: view.article, onAsk: () => setView("messages") })
     );
   const current = typeof view === "string" ? view : "help";
-  const tab = (v, name, glyph, badge = 0) => (0, import_react2.createElement)(
+  const tab = (v, name, icon, badge = 0) => (0, import_react2.createElement)(
     RN3.Pressable,
-    { key: v, onPress: () => setView(v), accessibilityRole: "tab", accessibilityState: { selected: current === v }, style: { flex: 1, alignItems: "center", paddingTop: 8, paddingBottom: 6, gap: 2 } },
-    k.text(glyph, { fontSize: 18, color: current === v ? p.fg : p.muted }),
-    k.text(name, { fontSize: 12, fontWeight: "600", color: current === v ? p.fg : p.muted }),
-    badge ? (0, import_react2.createElement)(RN3.View, { style: { position: "absolute", top: 4, right: "30%", minWidth: 18, height: 18, borderRadius: 9, backgroundColor: p.danger, alignItems: "center", justifyContent: "center" } }, k.text(String(Math.min(badge, 9)), { color: "#fff", fontSize: 11, fontWeight: "700" })) : null
+    { key: v, onPress: () => setView(v), accessibilityRole: "tab", accessibilityState: { selected: current === v }, style: { flex: 1, alignItems: "center", paddingTop: 8, paddingBottom: 6, gap: 3 } },
+    glyph(icon, current === v ? p.accent : p.muted, 22),
+    k.text(name, { fontSize: 12, fontWeight: "600", color: current === v ? p.accent : p.muted }),
+    badge ? (0, import_react2.createElement)(RN3.View, { style: { position: "absolute", top: 4, right: "28%", minWidth: 18, height: 18, borderRadius: 9, backgroundColor: p.danger, alignItems: "center", justifyContent: "center" } }, k.text(String(Math.min(badge, 9)), { color: "#fff", fontSize: 11, fontWeight: "700" })) : null
   );
-  const titleOf = typeof view !== "string" || view === "help" ? "Help" : view === "messages" ? o.title ?? "Chat with us" : o.title ?? "Chat with us";
-  return k.page(titleOf, close, [
-    typeof view !== "string" ? (0, import_react2.createElement)(RN3.Pressable, { key: "back", onPress: () => setView("help"), accessibilityRole: "button", style: { paddingHorizontal: 16, paddingVertical: 8 } }, k.text("\u2039 All articles", { color: p.accent, fontWeight: "600" })) : null,
-    content,
+  const onHome = view === "home";
+  const headFg = onHome ? ink : p.fg;
+  const head = (0, import_react2.createElement)(
+    RN3.View,
+    { key: "head", style: { flexDirection: "row", alignItems: "center", gap: 10, paddingLeft: 16, paddingRight: 12, paddingTop: 16, paddingBottom: 12, backgroundColor: onHome ? p.accent : p.bg, borderBottomWidth: onHome ? 0 : 1, borderBottomColor: p.line } },
+    typeof view !== "string" ? (0, import_react2.createElement)(RN3.Pressable, { key: "back", onPress: () => setView("help"), accessibilityRole: "button", hitSlop: 10 }, k.text("\u2039 All articles", { color: p.accent, fontWeight: "600" })) : view === "help" ? null : teamMark(title, onHome ? ink : p.accent, onHome ? p.accent : ink, onHome ? 28 : 36),
     (0, import_react2.createElement)(
       RN3.View,
-      { key: "tabs", accessibilityRole: "tablist", style: { flexDirection: "row", borderTopWidth: 1, borderTopColor: p.line, paddingBottom: 20, backgroundColor: p.bg } },
-      tab("home", "Home", "\u2302"),
-      tab("messages", "Messages", "\u2709\uFE0E", view === "messages" ? 0 : chat.unseen.length),
-      showHelp ? tab("help", "Help", "?") : null
+      { style: { flex: 1, minWidth: 0 } },
+      typeof view !== "string" ? null : (0, import_react2.createElement)(RN3.Text, { accessibilityRole: "header", numberOfLines: 1, style: { color: headFg, fontSize: 17, fontWeight: "700" } }, view === "help" ? "Help" : title),
+      view === "messages" ? k.muted(reply, { fontSize: 12 }) : null
+    ),
+    (0, import_react2.createElement)(RN3.Pressable, { onPress: close, accessibilityRole: "button", accessibilityLabel: "Close", hitSlop: 12, style: { width: 32, height: 32, borderRadius: 10, alignItems: "center", justifyContent: "center" } }, glyph("cross", onHome ? ink : p.muted, 18))
+  );
+  return (0, import_react2.createElement)(
+    RN3.Modal,
+    { visible: true, animationType: "slide", presentationStyle: "pageSheet", onRequestClose: close },
+    (0, import_react2.createElement)(
+      RN3.KeyboardAvoidingView,
+      { behavior: RN3.Platform.OS === "ios" ? "padding" : void 0, style: { flex: 1, backgroundColor: p.bg } },
+      head,
+      content,
+      (0, import_react2.createElement)(
+        RN3.View,
+        { key: "tabs", accessibilityRole: "tablist", style: { flexDirection: "row", borderTopWidth: 1, borderTopColor: p.line, paddingHorizontal: 8, paddingBottom: 22, backgroundColor: p.bg } },
+        tab("home", "Home", "home"),
+        tab("messages", "Messages", "chat", view === "messages" ? 0 : chat.unseen.length),
+        showHelp ? tab("help", "Help", "help") : null
+      )
     )
-  ]);
+  );
 };
 var MRRocketMessenger = ({ client, appearance, options: given = {} }) => {
   const [look, setLook] = (0, import_react2.useState)(null);
@@ -2686,7 +2801,19 @@ var MRRocketMessenger = ({ client, appearance, options: given = {} }) => {
     return () => ctrl.abort();
   }, [client]);
   const defined = Object.fromEntries(Object.entries(given).filter(([, v]) => v !== void 0));
-  const options = look ? { title: look.title, greeting: look.greeting, help: look.help, preview: look.preview, askEmail: look.askEmail, ...defined } : given;
+  const options = look ? {
+    title: look.title,
+    greeting: look.greeting,
+    replyTime: look.replyTime,
+    launcher: look.appLauncher ?? false,
+    position: look.position,
+    label: look.label,
+    help: look.help,
+    preview: look.preview,
+    askEmail: look.askEmail,
+    haptics: look.sound,
+    ...defined
+  } : given;
   const p = usePalette({ theme: appearance?.theme ?? look?.theme, accent: appearance?.accent ?? look?.accent });
   const k = kit(p);
   const open = messengerOpen.useOpen();
@@ -2711,6 +2838,9 @@ var MRRocketMessenger = ({ client, appearance, options: given = {} }) => {
     if (open) setBanner(null);
   }, [open]);
   const unseen = chat.unseen.length;
+  const ink = inkOn(p.accent);
+  const label = options.label?.trim() ?? "";
+  const side = options.position === "bottom-left" ? { left: 20 } : { right: 20 };
   const launcher = options.launcher ? (0, import_react2.createElement)(
     RN3.Pressable,
     {
@@ -2718,9 +2848,28 @@ var MRRocketMessenger = ({ client, appearance, options: given = {} }) => {
       onPress: () => openAt(unseen ? "messages" : "home"),
       accessibilityRole: "button",
       accessibilityLabel: unseen ? `Open chat, ${unseen} new` : "Open chat",
-      style: { position: "absolute", right: 20, bottom: 34, width: 54, height: 54, borderRadius: 27, backgroundColor: p.accent, alignItems: "center", justifyContent: "center", shadowColor: "#000", shadowOpacity: 0.2, shadowRadius: 10, elevation: 6 }
+      style: {
+        position: "absolute",
+        ...side,
+        bottom: 34,
+        height: label ? 50 : 56,
+        minWidth: label ? 0 : 56,
+        paddingHorizontal: label ? 18 : 0,
+        borderRadius: 28,
+        flexDirection: "row",
+        gap: 8,
+        backgroundColor: p.accent,
+        alignItems: "center",
+        justifyContent: "center",
+        shadowColor: p.accent,
+        shadowOpacity: 0.4,
+        shadowRadius: 12,
+        shadowOffset: { width: 0, height: 6 },
+        elevation: 6
+      }
     },
-    k.text("\u{1F4AC}", { fontSize: 22 }),
+    glyph("chat", ink, label ? 20 : 26),
+    label ? k.text(label, { color: ink, fontWeight: "700" }) : null,
     unseen ? (0, import_react2.createElement)(RN3.View, { style: { position: "absolute", top: -2, right: -2, minWidth: 20, height: 20, borderRadius: 10, backgroundColor: p.danger, alignItems: "center", justifyContent: "center", borderWidth: 2, borderColor: p.bg } }, k.text(String(Math.min(unseen, 9)), { color: "#fff", fontSize: 11, fontWeight: "700" })) : null
   ) : null;
   const toast = banner ? (0, import_react2.createElement)(
@@ -2730,10 +2879,15 @@ var MRRocketMessenger = ({ client, appearance, options: given = {} }) => {
       onPress: () => openAt("messages"),
       accessibilityRole: "button",
       accessibilityLiveRegion: "polite",
-      style: { position: "absolute", top: 54, left: 16, right: 16, backgroundColor: p.bg, borderRadius: 14, padding: 14, gap: 2, borderWidth: 1, borderColor: p.line, shadowColor: "#000", shadowOpacity: 0.18, shadowRadius: 16, elevation: 8 }
+      style: { position: "absolute", top: 54, left: 16, right: 16, flexDirection: "row", alignItems: "flex-start", gap: 12, backgroundColor: p.bg, borderRadius: 18, padding: 14, borderWidth: 1, borderColor: p.line, shadowColor: "#000", shadowOpacity: 0.16, shadowRadius: 18, shadowOffset: { width: 0, height: 8 }, elevation: 8 }
     },
-    k.muted(`${whoLabel[banner.from]}${unseen > 1 ? ` \xB7 ${unseen} new` : ""}`, { fontWeight: "600", fontSize: 12 }),
-    (0, import_react2.createElement)(RN3.Text, { numberOfLines: 3, style: { color: p.fg, fontSize: 15 } }, banner.body)
+    teamMark(options.title ?? "Chat with us", p.accent, ink),
+    (0, import_react2.createElement)(
+      RN3.View,
+      { style: { flex: 1, gap: 2 } },
+      k.muted(`${whoLabel[banner.from]}${unseen > 1 ? ` \xB7 ${unseen} new` : ""}`, { fontWeight: "600", fontSize: 12 }),
+      (0, import_react2.createElement)(RN3.Text, { numberOfLines: 3, style: { color: p.fg, fontSize: 15 } }, banner.body)
+    )
   ) : null;
   if (!launcher && !toast && !open) return null;
   return (0, import_react2.createElement)(