@mushi-mushi/react-native 0.19.2 → 0.20.0

package/dist/index.js

@@ -12,7 +12,7 @@ import {
   useEffect as useEffect3,
   useRef as useRef3,
   useState as useState2,
-  useCallback as useCallback3,
+  useCallback as useCallback4,
   useMemo
 } from "react";
 import {
@@ -474,33 +474,65 @@ import {
   ScrollView,
   useColorScheme
 } from "react-native";
-import { mushiPalette } from "@mushi-mushi/core";
+import { mushiPalette, MUSHI_BANNER_NEON, MUSHI_COPY } from "@mushi-mushi/core";
+import { getLocale } from "@mushi-mushi/web/i18n";
+
+// src/reporter-status.ts
+function reporterStatusShort(status) {
+  switch (status) {
+    case "new":
+    case "queued":
+    case "pending":
+    case "submitted":
+      return "Received";
+    case "classified":
+    case "triaged":
+    case "grouped":
+    case "dispatched":
+      return "In review";
+    case "fixing":
+      return "Fixing";
+    case "fixed":
+    case "resolved":
+    case "completed":
+      return "Fixed";
+    case "dismissed":
+      return "Closed";
+    default:
+      return status.replace(/_/g, " ").slice(0, 16);
+  }
+}
+
+// src/components/MushiBottomSheet.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var { height: SCREEN_HEIGHT } = Dimensions2.get("window");
 var SHEET_HEIGHT = SCREEN_HEIGHT * 0.55;
 var DISMISS_THRESHOLD = 80;
-var NEON = {
-  accent: "#0FFF50",
-  accentHover: "#00E646",
-  ink: "#0a1a0a",
-  border: "#00C43A"
+var CATEGORY_KEYS = ["bug", "slow", "visual", "confusing", "other"];
+var CATEGORY_EMOJI = {
+  bug: "\u{1F41B}",
+  slow: "\u{1F422}",
+  visual: "\u{1F3A8}",
+  confusing: "\u{1F615}",
+  other: "\u{1F4AC}"
 };
-var CATEGORIES = [
-  { key: "bug", emoji: "\u{1F41B}", label: "Bug" },
-  { key: "slow", emoji: "\u{1F422}", label: "Slow" },
-  { key: "visual", emoji: "\u{1F3A8}", label: "Visual" },
-  { key: "confusing", emoji: "\u{1F615}", label: "Confusing" },
-  { key: "other", emoji: "\u{1F4AC}", label: "Other" }
-];
 var VERIFIABLE_STATUSES = /* @__PURE__ */ new Set(["fixed", "resolved", "verified"]);
 var MushiBottomSheet = ({
   visible,
   onClose,
+  preferredTab = "report",
   screenshotDataUrl,
   onClearScreenshot,
-  screenshotSensitiveHint
+  screenshotSensitiveHint,
+  assistantEnabled = false,
+  assistantLabel = MUSHI_COPY.assistantTab,
+  assistantGreeting,
+  assistantSuggestions = [],
+  inboxPollIntervalMs = 0
 }) => {
   const mushi = useMushiContext();
+  const t = getLocale();
+  const greeting = assistantGreeting ?? t.assistant.defaultGreeting;
   const scheme = useColorScheme();
   const dark = scheme === "dark";
   const translateY = useRef(new Animated.Value(SHEET_HEIGHT)).current;
@@ -514,6 +546,11 @@ var MushiBottomSheet = ({
   const [selectedReportId, setSelectedReportId] = useState(null);
   const [threadComments, setThreadComments] = useState([]);
   const [replyText, setReplyText] = useState("");
+  const [assistantInput, setAssistantInput] = useState("");
+  const [assistantThreadId, setAssistantThreadId] = useState(null);
+  const [assistantSending, setAssistantSending] = useState(false);
+  const [assistantError, setAssistantError] = useState(null);
+  const [assistantTurns, setAssistantTurns] = useState([]);
   const [screenshotAttached, setScreenshotAttached] = useState(true);
   const loadInbox = useCallback(async () => {
     if (!mushi?.listMyReports) return;
@@ -528,9 +565,17 @@ var MushiBottomSheet = ({
   useEffect(() => {
     if (visible) {
       setScreenshotAttached(true);
-      if (sheetTab === "inbox") void loadInbox();
+      setSheetTab(preferredTab);
+      if (preferredTab === "inbox") void loadInbox();
     }
-  }, [visible, sheetTab, loadInbox]);
+  }, [visible, preferredTab, loadInbox]);
+  useEffect(() => {
+    if (!visible || sheetTab !== "inbox" || inboxPollIntervalMs <= 0) return;
+    const timer = setInterval(() => {
+      void loadInbox();
+    }, inboxPollIntervalMs);
+    return () => clearInterval(timer);
+  }, [visible, sheetTab, inboxPollIntervalMs, loadInbox]);
   const openThread = useCallback(async (reportId) => {
     setSelectedReportId(reportId);
     if (!mushi?.listMyComments) return;
@@ -549,6 +594,29 @@ var MushiBottomSheet = ({
     await loadInbox();
     await openThread(selectedReportId);
   }, [mushi, selectedReportId, loadInbox, openThread]);
+  const sendAssistant = useCallback(async (message) => {
+    if (!mushi?.askAssistant || !message.trim() || assistantSending) return;
+    const trimmed = message.trim();
+    setAssistantInput("");
+    setAssistantError(null);
+    setAssistantTurns((prev) => [...prev, { role: "user", text: trimmed }]);
+    setAssistantSending(true);
+    try {
+      const reply = await mushi.askAssistant(trimmed, assistantThreadId);
+      if (!reply) {
+        setAssistantError("Could not reach the assistant. Try again.");
+        return;
+      }
+      if (reply.threadId) setAssistantThreadId(reply.threadId);
+      const botText = reply.kind === "clarify" ? reply.question ?? reply.text ?? "" : reply.text ?? "";
+      setAssistantTurns((prev) => [
+        ...prev,
+        { role: "bot", text: botText, options: reply.options }
+      ]);
+    } finally {
+      setAssistantSending(false);
+    }
+  }, [mushi, assistantSending, assistantThreadId]);
   const resetForm = useCallback(() => {
     setCategory(null);
     setDescription("");
@@ -633,7 +701,8 @@ var MushiBottomSheet = ({
   };
   const activeScreenshot = screenshotDataUrl && screenshotAttached ? screenshotDataUrl : null;
   const pal = mushiPalette(dark ? "dark" : "light");
-  const colors = dark ? { bg: pal.paper, text: pal.ink, sub: pal.inkMuted, card: pal.paperRaised, accent: NEON.accent, accentInk: NEON.ink, border: pal.ruleStrong, backdrop: "rgba(0,0,0,0.6)", disabled: "#3a3a3c", disabledText: pal.inkFaint } : { bg: pal.paperRaised, text: pal.ink, sub: pal.inkMuted, card: pal.paper, accent: NEON.accent, accentInk: NEON.ink, border: pal.ruleStrong, backdrop: "rgba(0,0,0,0.35)", disabled: "#d1d1d6", disabledText: pal.inkFaint };
+  const colors = dark ? { bg: pal.paper, text: pal.ink, sub: pal.inkMuted, card: pal.paperRaised, accent: MUSHI_BANNER_NEON.bg, accentInk: MUSHI_BANNER_NEON.fg, border: pal.ruleStrong, backdrop: "rgba(0,0,0,0.6)", disabled: "#3a3a3c", disabledText: pal.inkFaint } : { bg: pal.paperRaised, text: pal.ink, sub: pal.inkMuted, card: pal.paper, accent: MUSHI_BANNER_NEON.bg, accentInk: MUSHI_BANNER_NEON.fg, border: pal.ruleStrong, backdrop: "rgba(0,0,0,0.35)", disabled: "#d1d1d6", disabledText: pal.inkFaint };
+  const sheetTabs = ["report", "inbox", ...assistantEnabled ? ["assistant"] : []];
   const canSubmit = !!category && description.trim().length > 0 && phase === "form";
   return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "none", statusBarTranslucent: true, children: /* @__PURE__ */ jsxs(
     KeyboardAvoidingView,
@@ -658,11 +727,11 @@ var MushiBottomSheet = ({
             ],
             children: [
               /* @__PURE__ */ jsx(View, { ...panResponder.panHandlers, style: s.handleArea, children: /* @__PURE__ */ jsx(View, { style: [s.handle, { backgroundColor: colors.sub }] }) }),
-              /* @__PURE__ */ jsxs(View, { style: [s.brandHeader, { backgroundColor: NEON.accent, borderBottomColor: NEON.border }], children: [
-                /* @__PURE__ */ jsx(Text, { style: [s.brandEyebrow, { color: NEON.ink }], children: "MUSHI \xB7 BETA" }),
-                /* @__PURE__ */ jsx(Text, { style: [s.brandTitle, { color: NEON.ink }], children: sheetTab === "inbox" ? "Your reports" : sheetTab === "community" ? "Community" : "Report an issue" })
+              /* @__PURE__ */ jsxs(View, { style: [s.brandHeader, { backgroundColor: MUSHI_BANNER_NEON.bg, borderBottomColor: MUSHI_BANNER_NEON.border }], children: [
+                /* @__PURE__ */ jsx(Text, { style: [s.brandEyebrow, { color: MUSHI_BANNER_NEON.fg }], children: "MUSHI \xB7 BETA" }),
+                /* @__PURE__ */ jsx(Text, { style: [s.brandTitle, { color: MUSHI_BANNER_NEON.fg }], children: sheetTab === "assistant" ? assistantLabel : sheetTab === "inbox" ? t.flows.reports.title : t.widget.title })
               ] }),
-              /* @__PURE__ */ jsx(View, { style: s.tabRow, children: ["report", "inbox", "community"].map((tab) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(View, { style: s.tabRow, children: sheetTabs.map((tab) => /* @__PURE__ */ jsx(
                 TouchableOpacity,
                 {
                   onPress: () => {
@@ -671,12 +740,68 @@ var MushiBottomSheet = ({
                     else setSelectedReportId(null);
                   },
                   style: [s.tabBtn, sheetTab === tab && { borderBottomColor: colors.accent }],
-                  children: /* @__PURE__ */ jsx(Text, { style: [s.tabLabel, { color: sheetTab === tab ? colors.text : colors.sub }], children: tab === "report" ? "Report" : tab === "inbox" ? "Your reports" : "Community" })
+                  children: /* @__PURE__ */ jsx(Text, { style: [s.tabLabel, { color: sheetTab === tab ? colors.text : colors.sub }], children: tab === "report" ? t.widget.trigger : tab === "inbox" ? t.flows.reports.title : assistantLabel })
                 },
                 tab
               )) }),
-              sheetTab === "inbox" ? /* @__PURE__ */ jsx(ScrollView, { style: s.body, keyboardShouldPersistTaps: "handled", children: inboxLoading ? /* @__PURE__ */ jsx(Text, { style: { color: colors.sub }, children: "Loading\u2026" }) : selectedReportId ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(TouchableOpacity, { onPress: () => setSelectedReportId(null), children: /* @__PURE__ */ jsx(Text, { style: { color: colors.accent, marginBottom: 8 }, children: "\u2190 Back" }) }),
+              sheetTab === "assistant" ? /* @__PURE__ */ jsxs(ScrollView, { style: s.body, keyboardShouldPersistTaps: "handled", children: [
+                assistantTurns.length === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Text, { style: { color: colors.sub, marginBottom: 12, lineHeight: 20 }, children: greeting }),
+                  assistantSuggestions.map((chip) => /* @__PURE__ */ jsx(
+                    TouchableOpacity,
+                    {
+                      style: [s.assistantChip, { borderColor: colors.border, backgroundColor: colors.card }],
+                      onPress: () => void sendAssistant(chip),
+                      children: /* @__PURE__ */ jsx(Text, { style: { color: colors.text, fontSize: 13 }, children: chip })
+                    },
+                    chip
+                  ))
+                ] }) : assistantTurns.map((turn, idx) => /* @__PURE__ */ jsxs(
+                  View,
+                  {
+                    style: [
+                      s.assistantBubble,
+                      {
+                        alignSelf: turn.role === "user" ? "flex-end" : "flex-start",
+                        backgroundColor: turn.role === "user" ? colors.accent : colors.card
+                      }
+                    ],
+                    children: [
+                      /* @__PURE__ */ jsx(Text, { style: { color: turn.role === "user" ? colors.accentInk : colors.text }, children: turn.text }),
+                      turn.options?.map((opt) => /* @__PURE__ */ jsx(TouchableOpacity, { onPress: () => void sendAssistant(opt), style: { marginTop: 8 }, children: /* @__PURE__ */ jsx(Text, { style: { color: colors.accent, fontSize: 12 }, children: opt }) }, opt))
+                    ]
+                  },
+                  `${turn.role}-${idx}`
+                )),
+                assistantSending ? /* @__PURE__ */ jsx(Text, { style: { color: colors.sub, marginTop: 8 }, accessibilityLiveRegion: "polite", children: t.assistant.thinking }) : null,
+                assistantError ? /* @__PURE__ */ jsx(Text, { style: { color: pal.danger, marginTop: 8 }, accessibilityRole: "alert", children: assistantError }) : null,
+                /* @__PURE__ */ jsxs(View, { style: s.assistantComposer, children: [
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      style: [s.input, { flex: 1, minHeight: 44, backgroundColor: colors.card, color: colors.text, borderColor: colors.border }],
+                      placeholder: t.assistant.inputPlaceholder,
+                      placeholderTextColor: colors.sub,
+                      value: assistantInput,
+                      onChangeText: setAssistantInput,
+                      editable: !assistantSending
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    TouchableOpacity,
+                    {
+                      style: [s.submitBtn, { backgroundColor: colors.accent, paddingHorizontal: 16 }],
+                      onPress: () => void sendAssistant(assistantInput),
+                      disabled: !assistantInput.trim() || assistantSending,
+                      children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: colors.accentInk }], children: "\u2191" })
+                    }
+                  )
+                ] })
+              ] }) : sheetTab === "inbox" ? /* @__PURE__ */ jsx(ScrollView, { style: s.body, keyboardShouldPersistTaps: "handled", children: inboxLoading ? /* @__PURE__ */ jsx(Text, { style: { color: colors.sub }, children: t.flows.reports.loading }) : selectedReportId ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(TouchableOpacity, { onPress: () => setSelectedReportId(null), children: /* @__PURE__ */ jsxs(Text, { style: { color: colors.accent, marginBottom: 8 }, children: [
+                  "\u2190 ",
+                  t.widget.back
+                ] }) }),
                 threadComments.map((c) => /* @__PURE__ */ jsxs(View, { style: [s.threadBubble, { backgroundColor: colors.card }], children: [
                   /* @__PURE__ */ jsx(Text, { style: { color: colors.sub, fontSize: 11 }, children: c.author_kind }),
                   /* @__PURE__ */ jsx(Text, { style: { color: colors.text }, children: c.body })
@@ -684,42 +809,26 @@ var MushiBottomSheet = ({
                 VERIFIABLE_STATUSES.has(
                   inboxReports.find((r) => r.id === selectedReportId)?.status ?? ""
                 ) && /* @__PURE__ */ jsxs(View, { style: s.verifyRow, children: [
-                  /* @__PURE__ */ jsx(TouchableOpacity, { style: [s.verifyBtn, { backgroundColor: colors.accent }], onPress: () => submitFeedback("confirms"), children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: colors.accentInk }], children: "Yes, fixed" }) }),
-                  /* @__PURE__ */ jsx(TouchableOpacity, { style: [s.verifyBtn, { backgroundColor: colors.border }], onPress: () => submitFeedback("not_fixed"), children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: colors.text }], children: "Not fixed" }) })
+                  /* @__PURE__ */ jsx(TouchableOpacity, { style: [s.verifyBtn, { backgroundColor: colors.accent }], onPress: () => submitFeedback("confirms"), children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: colors.accentInk }], children: t.flows.thread.confirmFixed }) }),
+                  /* @__PURE__ */ jsx(TouchableOpacity, { style: [s.verifyBtn, { backgroundColor: colors.border }], onPress: () => submitFeedback("not_fixed"), children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: colors.text }], children: t.flows.thread.notFixed }) })
                 ] }),
                 /* @__PURE__ */ jsx(
                   TextInput,
                   {
                     style: [s.input, { backgroundColor: colors.card, color: colors.text, borderColor: colors.border, minHeight: 48 }],
-                    placeholder: "Reply\u2026",
+                    placeholder: t.flows.thread.replyPlaceholder,
                     placeholderTextColor: colors.sub,
                     value: replyText,
                     onChangeText: setReplyText
                   }
                 ),
-                /* @__PURE__ */ jsx(TouchableOpacity, { style: [s.submitBtn, { backgroundColor: colors.accent }], onPress: sendReply, children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: colors.accentInk }], children: "Send" }) })
+                /* @__PURE__ */ jsx(TouchableOpacity, { style: [s.submitBtn, { backgroundColor: colors.accent }], onPress: sendReply, children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: colors.accentInk }], children: t.flows.thread.send }) })
               ] }) : inboxReports.map((r) => /* @__PURE__ */ jsxs(TouchableOpacity, { style: [s.inboxRow, { borderColor: colors.border }], onPress: () => openThread(r.id), children: [
                 /* @__PURE__ */ jsx(Text, { style: { color: colors.text, fontWeight: "600" }, numberOfLines: 1, children: (r.summary ?? r.description ?? "Report").slice(0, 60) }),
-                /* @__PURE__ */ jsx(Text, { style: { color: colors.sub, fontSize: 11 }, children: r.status })
-              ] }, r.id)) }) : sheetTab === "community" ? /* @__PURE__ */ jsxs(ScrollView, { style: s.body, keyboardShouldPersistTaps: "handled", children: [
-                /* @__PURE__ */ jsx(Text, { style: { color: colors.sub, fontSize: 13, marginBottom: 16, lineHeight: 18 }, children: "Sign in to track your reports across apps and see the global leaderboard. No password needed." }),
-                /* @__PURE__ */ jsx(
-                  TextInput,
-                  {
-                    style: [s.input, { backgroundColor: colors.card, color: colors.text, borderColor: colors.border, minHeight: 48 }],
-                    placeholder: "you@example.com",
-                    placeholderTextColor: colors.sub,
-                    keyboardType: "email-address",
-                    autoCapitalize: "none",
-                    autoCorrect: false,
-                    textContentType: "emailAddress"
-                  }
-                ),
-                /* @__PURE__ */ jsx(TouchableOpacity, { style: [s.submitBtn, { backgroundColor: colors.accent }], children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: colors.accentInk }], children: "Send sign-in link \u2192" }) }),
-                /* @__PURE__ */ jsx(Text, { style: { color: colors.sub, fontSize: 11, textAlign: "center", marginTop: 12 }, children: "We'll email you a one-tap sign-in link. No password, ever." })
-              ] }) : phase === "sent" ? /* @__PURE__ */ jsxs(View, { style: s.sentWrap, children: [
+                /* @__PURE__ */ jsx(Text, { style: { color: colors.sub, fontSize: 11 }, children: reporterStatusShort(r.status) })
+              ] }, r.id)) }) : phase === "sent" ? /* @__PURE__ */ jsxs(View, { style: s.sentWrap, children: [
                 /* @__PURE__ */ jsx(Text, { style: [s.sentEmoji], children: "\u2705" }),
-                /* @__PURE__ */ jsx(Text, { style: [s.sentText, { color: colors.text }], children: "Report sent!" })
+                /* @__PURE__ */ jsx(Text, { style: [s.sentText, { color: colors.text }], children: t.widget.submitted })
               ] }) : /* @__PURE__ */ jsxs(
                 ScrollView,
                 {
@@ -727,13 +836,13 @@ var MushiBottomSheet = ({
                   keyboardShouldPersistTaps: "handled",
                   contentContainerStyle: { paddingBottom: 24 },
                   children: [
-                    /* @__PURE__ */ jsx(Text, { style: [s.stepLabel, { color: colors.sub }], children: "What kind of issue?" }),
-                    /* @__PURE__ */ jsx(View, { style: s.catRow, children: CATEGORIES.map((c) => {
-                      const active = category === c.key;
+                    /* @__PURE__ */ jsx(Text, { style: [s.stepLabel, { color: colors.sub }], children: t.step1.heading }),
+                    /* @__PURE__ */ jsx(View, { style: s.catRow, children: CATEGORY_KEYS.map((key) => {
+                      const active = category === key;
                       return /* @__PURE__ */ jsxs(
                         TouchableOpacity,
                         {
-                          onPress: () => setCategory(c.key),
+                          onPress: () => setCategory(key),
                           activeOpacity: 0.7,
                           style: [
                             s.catBtn,
@@ -743,7 +852,7 @@ var MushiBottomSheet = ({
                             }
                           ],
                           children: [
-                            /* @__PURE__ */ jsx(Text, { style: s.catEmoji, children: c.emoji }),
+                            /* @__PURE__ */ jsx(Text, { style: s.catEmoji, children: CATEGORY_EMOJI[key] }),
                             /* @__PURE__ */ jsx(
                               Text,
                               {
@@ -751,12 +860,12 @@ var MushiBottomSheet = ({
                                   s.catLabel,
                                   { color: active ? colors.accentInk : colors.text }
                                 ],
-                                children: c.label
+                                children: t.step1.categories[key]
                               }
                             )
                           ]
                         },
-                        c.key
+                        key
                       );
                     }) }),
                     /* @__PURE__ */ jsx(
@@ -770,7 +879,7 @@ var MushiBottomSheet = ({
                             borderColor: colors.border
                           }
                         ],
-                        placeholder: "What happened?",
+                        placeholder: t.step3.descriptionPlaceholder,
                         placeholderTextColor: colors.sub,
                         multiline: true,
                         textAlignVertical: "top",
@@ -785,12 +894,12 @@ var MushiBottomSheet = ({
                         {
                           source: { uri: activeScreenshot },
                           style: s.screenshotThumb,
-                          accessibilityLabel: "Attached screenshot"
+                          accessibilityLabel: t.step3.screenshotPreviewAlt
                         }
                       ),
                       /* @__PURE__ */ jsxs(View, { style: s.screenshotMeta, children: [
-                        /* @__PURE__ */ jsx(Text, { style: [s.screenshotLabel, { color: colors.text }], children: "Screenshot attached" }),
-                        /* @__PURE__ */ jsx(Text, { style: [s.screenshotSub, { color: colors.sub }], children: screenshotSensitiveHint && screenshotSensitiveHint.trim() ? `\u26A0 ${screenshotSensitiveHint}` : "Helps the team see the issue" })
+                        /* @__PURE__ */ jsx(Text, { style: [s.screenshotLabel, { color: colors.text }], children: t.step3.screenshotAttached.replace(" \u2713", "") }),
+                        /* @__PURE__ */ jsx(Text, { style: [s.screenshotSub, { color: colors.sub }], children: screenshotSensitiveHint && screenshotSensitiveHint.trim() ? `\u26A0 ${screenshotSensitiveHint}` : t.step3.screenshotSensitiveHint.split("\u2014")[0]?.trim() ?? t.step3.screenshotSensitiveHint })
                       ] }),
                       /* @__PURE__ */ jsx(
                         TouchableOpacity,
@@ -800,7 +909,7 @@ var MushiBottomSheet = ({
                             onClearScreenshot?.();
                           },
                           hitSlop: { top: 8, bottom: 8, left: 8, right: 8 },
-                          accessibilityLabel: "Remove screenshot",
+                          accessibilityLabel: t.widget.close,
                           children: /* @__PURE__ */ jsx(Text, { style: [s.screenshotRemove, { color: colors.sub }], children: "\u2715" })
                         }
                       )
@@ -815,7 +924,7 @@ var MushiBottomSheet = ({
                           s.submitBtn,
                           { backgroundColor: canSubmit ? colors.accent : colors.disabled }
                         ],
-                        children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: canSubmit ? colors.accentInk : colors.disabledText }], children: phase === "sending" ? "Sending\u2026" : "Submit report" })
+                        children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: canSubmit ? colors.accentInk : colors.disabledText }], children: phase === "sending" ? t.widget.submitting : t.widget.submit })
                       }
                     )
                   ]
@@ -1021,6 +1130,27 @@ var s = StyleSheet.create({
     borderRadius: 10,
     paddingVertical: 10,
     alignItems: "center"
+  },
+  assistantBubble: {
+    maxWidth: "88%",
+    borderRadius: 12,
+    padding: 12,
+    marginBottom: 10
+  },
+  assistantChip: {
+    borderWidth: 1,
+    borderRadius: 999,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    marginBottom: 8,
+    alignSelf: "flex-start"
+  },
+  assistantComposer: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    gap: 8,
+    marginTop: 12,
+    paddingBottom: 8
   }
 });
 
@@ -1034,9 +1164,9 @@ import {
   Dimensions as Dimensions3,
   useColorScheme as useColorScheme2
 } from "react-native";
-import { mushiPalette as mushiPalette2, MUSHI_COPY } from "@mushi-mushi/core";
+import { mushiPalette as mushiPalette2, MUSHI_COPY as MUSHI_COPY2, MUSHI_GEOMETRY } from "@mushi-mushi/core";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var FAB_SIZE = 56;
+var FAB_SIZE = MUSHI_GEOMETRY.fabSize;
 var EDGE_PADDING = 12;
 function getScreenBounds() {
   const { width, height } = Dimensions3.get("window");
@@ -1196,7 +1326,7 @@ var MushiFloatingButton = ({
       onStartShouldSetResponder: () => !draggable,
       onResponderGrant: handlePressIn,
       onResponderRelease: handlePressOut,
-      children: /* @__PURE__ */ jsx2(Animated2.Text, { style: s2.emoji, children: MUSHI_COPY.triggerText })
+      children: /* @__PURE__ */ jsx2(Animated2.Text, { style: s2.emoji, children: MUSHI_COPY2.triggerText })
     }
   );
 };
@@ -1219,12 +1349,119 @@ var s2 = StyleSheet2.create({
   }
 });
 
+// src/components/MushiBanner.tsx
+import { useCallback as useCallback3 } from "react";
+import {
+  View as View2,
+  Text as Text2,
+  TouchableOpacity as TouchableOpacity2,
+  StyleSheet as StyleSheet3,
+  Platform as Platform4
+} from "react-native";
+import { MUSHI_BANNER_NEON as MUSHI_BANNER_NEON2, MUSHI_COPY as MUSHI_COPY3, MUSHI_GEOMETRY as MUSHI_GEOMETRY2 } from "@mushi-mushi/core";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var MUSHI_BANNER_DEFAULT_HEIGHT = MUSHI_GEOMETRY2.bannerHeight;
+var MushiBanner = ({
+  onPress,
+  onDismiss,
+  message = MUSHI_COPY3.bannerMessage,
+  label = MUSHI_COPY3.bannerLabel,
+  onLayoutHeight
+}) => {
+  const handleLayout = useCallback3(
+    (e) => {
+      onLayoutHeight?.(e.nativeEvent.layout.height);
+    },
+    [onLayoutHeight]
+  );
+  return /* @__PURE__ */ jsxs2(
+    View2,
+    {
+      style: s3.wrap,
+      onLayout: handleLayout,
+      accessibilityRole: "header",
+      accessibilityLabel: "Mushi feedback banner",
+      children: [
+        /* @__PURE__ */ jsxs2(TouchableOpacity2, { style: s3.main, onPress, activeOpacity: 0.85, children: [
+          /* @__PURE__ */ jsx3(Text2, { style: s3.eyebrow, children: label.toUpperCase() }),
+          /* @__PURE__ */ jsx3(Text2, { style: s3.message, numberOfLines: 2, children: message }),
+          /* @__PURE__ */ jsx3(Text2, { style: s3.cta, children: MUSHI_COPY3.bugCta })
+        ] }),
+        onDismiss ? /* @__PURE__ */ jsx3(
+          TouchableOpacity2,
+          {
+            style: s3.dismiss,
+            onPress: onDismiss,
+            accessibilityRole: "button",
+            accessibilityLabel: "Dismiss banner",
+            hitSlop: { top: 8, bottom: 8, left: 8, right: 8 },
+            children: /* @__PURE__ */ jsx3(Text2, { style: s3.dismissText, children: "\xD7" })
+          }
+        ) : null
+      ]
+    }
+  );
+};
+var s3 = StyleSheet3.create({
+  wrap: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    minHeight: MUSHI_GEOMETRY2.bannerHeight,
+    flexDirection: "row",
+    alignItems: "stretch",
+    backgroundColor: MUSHI_BANNER_NEON2.bg,
+    borderTopWidth: 1,
+    borderTopColor: MUSHI_BANNER_NEON2.border,
+    zIndex: 99998,
+    elevation: 8,
+    paddingBottom: Platform4.OS === "ios" ? 0 : 0
+  },
+  main: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  eyebrow: {
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 1.2,
+    color: MUSHI_BANNER_NEON2.fg
+  },
+  message: {
+    flex: 1,
+    fontSize: 12,
+    fontWeight: "500",
+    color: MUSHI_BANNER_NEON2.fg
+  },
+  cta: {
+    fontSize: 12,
+    fontWeight: "700",
+    color: MUSHI_BANNER_NEON2.fg,
+    textDecorationLine: "underline"
+  },
+  dismiss: {
+    justifyContent: "center",
+    paddingHorizontal: 12
+  },
+  dismissText: {
+    fontSize: 20,
+    lineHeight: 22,
+    color: MUSHI_BANNER_NEON2.fg,
+    opacity: 0.7
+  }
+});
+
 // src/version.ts
 var MUSHI_SDK_PACKAGE = "@mushi-mushi/react-native";
-var MUSHI_SDK_VERSION = "0.19.2" ? "0.19.2" : "0.17.0";
+var MUSHI_SDK_VERSION = "0.20.0" ? "0.20.0" : "0.17.0";
 
 // src/provider.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var MushiContext = createContext(null);
 var DEFAULT_SCREENSHOT_HINT = "Check the preview \u2014 remove it if any private info (balances, personal details) is visible.";
 function resolveScreenshotHint(v) {
@@ -1273,6 +1510,8 @@ function MushiProvider({ children, config: configProp, ...barePropConfig }) {
     createBreadcrumbBuffer({ max: config.capture?.maxBreadcrumbs ?? 50 })
   );
   const [sheetVisible, setSheetVisible] = useState2(false);
+  const [sheetPreferredTab, setSheetPreferredTab] = useState2("report");
+  const [bannerDismissed, setBannerDismissed] = useState2(false);
   const [sheetScreenshot, setSheetScreenshot] = useState2(null);
   const reporterTokenRef = useRef3(`rn-${config.projectId}-anon`);
   let resolveReporterTokenReady = () => {
@@ -1370,7 +1609,8 @@ function MushiProvider({ children, config: configProp, ...barePropConfig }) {
     }
     return () => unsubscribe?.();
   }, []);
-  const open = useCallback3(() => {
+  const open = useCallback4(() => {
+    setSheetPreferredTab("report");
     breadcrumbsRef.current.add({
       category: "lifecycle",
       level: "info",
@@ -1400,8 +1640,14 @@ function MushiProvider({ children, config: configProp, ...barePropConfig }) {
       setSheetVisible(true);
     });
   }, [config.capture?.screenshot]);
-  const close = useCallback3(() => setSheetVisible(false), []);
-  const attachTo = useCallback3(() => ({ onPress: open }), [open]);
+  const openAssistant = useCallback4(() => {
+    if (!config.assistant?.enabled) return;
+    setSheetPreferredTab("assistant");
+    setSheetScreenshot(null);
+    setSheetVisible(true);
+  }, [config.assistant?.enabled]);
+  const close = useCallback4(() => setSheetVisible(false), []);
+  const attachTo = useCallback4(() => ({ onPress: open }), [open]);
   useEffect3(() => {
     const trigger2 = config.widget?.trigger ?? "button";
     if (trigger2 !== "shake" && trigger2 !== "both") return;
@@ -1430,8 +1676,9 @@ function MushiProvider({ children, config: configProp, ...barePropConfig }) {
       cleanup?.();
     };
   }, [config.widget?.trigger, config.widget?.shakeThreshold, open]);
-  const submitReport = useCallback3(
+  const submitReport = useCallback4(
     async (data) => {
+      await reporterTokenReadyRef.current;
       const deviceInfo = getDeviceInfo();
       breadcrumbsRef.current.add({
         category: "lifecycle",
@@ -1675,15 +1922,36 @@ function MushiProvider({ children, config: configProp, ...barePropConfig }) {
           confirmedBugs: 0,
           totalReports: 0
         };
+      },
+      openAssistant,
+      async askAssistant(message, threadId) {
+        const client = apiClientRef.current;
+        if (!client || !config.assistant?.enabled) return null;
+        const res = await client.askAssistant({
+          message,
+          threadId: threadId ?? null,
+          context: pageContextRef.current
+        });
+        return res.ok ? res.data : null;
       }
     }),
-    [open, close, attachTo, submitReport, config.rewards?.enabled]
+    [open, close, attachTo, submitReport, openAssistant, config.rewards?.enabled, config.assistant?.enabled]
   );
   const trigger = config.widget?.trigger ?? "button";
-  const showFab = trigger === "button" || trigger === "both" || trigger === "auto" || trigger === "edge-tab";
-  return /* @__PURE__ */ jsxs2(MushiContext.Provider, { value: instance, children: [
+  const showBanner = trigger === "banner" && !bannerDismissed;
+  const showFab = !showBanner && (trigger === "button" || trigger === "both" || trigger === "auto" || trigger === "edge-tab");
+  return /* @__PURE__ */ jsxs3(MushiContext.Provider, { value: instance, children: [
     children,
-    showFab && /* @__PURE__ */ jsx3(
+    showBanner ? /* @__PURE__ */ jsx4(
+      MushiBanner,
+      {
+        onPress: open,
+        onDismiss: () => setBannerDismissed(true),
+        message: config.widget?.banner?.message,
+        label: config.widget?.banner?.label
+      }
+    ) : null,
+    showFab && /* @__PURE__ */ jsx4(
       MushiFloatingButton,
       {
         onPress: open,
@@ -1691,14 +1959,20 @@ function MushiProvider({ children, config: configProp, ...barePropConfig }) {
         inset: config.widget?.inset
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       MushiBottomSheet,
       {
         visible: sheetVisible,
         onClose: close,
+        preferredTab: sheetPreferredTab,
         screenshotDataUrl: sheetScreenshot ?? void 0,
         onClearScreenshot: () => setSheetScreenshot(null),
-        screenshotSensitiveHint: resolveScreenshotHint(config.widget?.screenshotSensitiveHint)
+        screenshotSensitiveHint: resolveScreenshotHint(config.widget?.screenshotSensitiveHint),
+        assistantEnabled: Boolean(config.assistant?.enabled),
+        assistantLabel: config.assistant?.label,
+        assistantGreeting: config.assistant?.greeting,
+        assistantSuggestions: config.assistant?.suggestions,
+        inboxPollIntervalMs: config.widget?.inboxPollIntervalMs ?? 0
       }
     )
   ] });
@@ -1713,10 +1987,10 @@ function useMushi() {
 }
 
 // src/hooks/useMushiReport.ts
-import { useCallback as useCallback4 } from "react";
+import { useCallback as useCallback5 } from "react";
 function useMushiReport() {
   const mushi = useMushiContext();
-  const submitReport = useCallback4(
+  const submitReport = useCallback5(
     async (data) => {
       if (!mushi) throw new Error("MushiProvider not found");
       await mushi.submitReport(data);
@@ -1727,12 +2001,12 @@ function useMushiReport() {
 }
 
 // src/hooks/useMushiWidget.ts
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback6 } from "react";
 function useMushiWidget() {
   const mushi = useMushiContext();
   return {
-    open: useCallback5(() => mushi?.open(), [mushi]),
-    close: useCallback5(() => mushi?.close(), [mushi])
+    open: useCallback6(() => mushi?.open(), [mushi]),
+    close: useCallback6(() => mushi?.close(), [mushi])
   };
 }
 
@@ -1769,6 +2043,8 @@ function useNavigationCapture(navigationRef) {
 }
 export {
   AsyncStorageQueue,
+  MUSHI_BANNER_DEFAULT_HEIGHT,
+  MushiBanner,
   MushiBottomSheet,
   MushiFloatingButton,
   MushiProvider,