@bbearai/react-native 0.1.2 → 0.1.3

package/dist/index.d.mts

@@ -27,6 +27,15 @@ interface BugBearContextValue {
     sendMessage: (threadId: string, content: string) => Promise<boolean>;
     /** Mark a thread as read */
     markAsRead: (threadId: string) => Promise<void>;
+    /** Create a new thread */
+    createThread: (options: {
+        subject: string;
+        message: string;
+    }) => Promise<{
+        success: boolean;
+        threadId?: string;
+        error?: string;
+    }>;
     /** Re-check tester status (call after auth state changes) */
     refreshTesterStatus: () => Promise<void>;
 }

package/dist/index.d.ts

@@ -27,6 +27,15 @@ interface BugBearContextValue {
     sendMessage: (threadId: string, content: string) => Promise<boolean>;
     /** Mark a thread as read */
     markAsRead: (threadId: string) => Promise<void>;
+    /** Create a new thread */
+    createThread: (options: {
+        subject: string;
+        message: string;
+    }) => Promise<{
+        success: boolean;
+        threadId?: string;
+        error?: string;
+    }>;
     /** Re-check tester status (call after auth state changes) */
     refreshTesterStatus: () => Promise<void>;
 }

package/dist/index.js

@@ -61,6 +61,7 @@ var BugBearContext = (0, import_react.createContext)({
   sendMessage: async () => false,
   markAsRead: async () => {
   },
+  createThread: async () => ({ success: false }),
   refreshTesterStatus: async () => {
   }
 });
@@ -111,6 +112,13 @@ function BugBearProvider({ config, children, appVersion, enabled = true }) {
     await client.markThreadAsRead(threadId);
     await refreshThreads();
   }, [client, refreshThreads]);
+  const createThread = (0, import_react.useCallback)(async (options) => {
+    const result = await client.createThread(options);
+    if (result.success) {
+      await refreshThreads();
+    }
+    return result;
+  }, [client, refreshThreads]);
   const initializeBugBear = (0, import_react.useCallback)(async () => {
     setIsLoading(true);
     try {
@@ -172,6 +180,7 @@ function BugBearProvider({ config, children, appVersion, enabled = true }) {
         getThreadMessages,
         sendMessage,
         markAsRead,
+        createThread,
         refreshTesterStatus
       }
     },
@@ -214,7 +223,8 @@ function BugBearButton({
     refreshThreads,
     getThreadMessages,
     sendMessage,
-    markAsRead
+    markAsRead,
+    createThread
   } = useBugBear();
   const [modalVisible, setModalVisible] = (0, import_react2.useState)(false);
   const [activeTab, setActiveTab] = (0, import_react2.useState)("tests");
@@ -225,6 +235,9 @@ function BugBearButton({
   const [replyText, setReplyText] = (0, import_react2.useState)("");
   const [sendingReply, setSendingReply] = (0, import_react2.useState)(false);
   const [loadingMessages, setLoadingMessages] = (0, import_react2.useState)(false);
+  const [composeSubject, setComposeSubject] = (0, import_react2.useState)("");
+  const [composeMessage, setComposeMessage] = (0, import_react2.useState)("");
+  const [sendingNewMessage, setSendingNewMessage] = (0, import_react2.useState)(false);
   const getInitialPosition = () => {
     const buttonSize = 56;
     const margin = 16;
@@ -387,6 +400,27 @@ function BugBearButton({
     setSelectedThread(null);
     setThreadMessages([]);
     setReplyText("");
+    setComposeSubject("");
+    setComposeMessage("");
+  };
+  const handleStartNewMessage = () => {
+    setMessageView("compose");
+    setComposeSubject("");
+    setComposeMessage("");
+  };
+  const handleSendNewMessage = async () => {
+    if (!composeSubject.trim() || !composeMessage.trim()) return;
+    setSendingNewMessage(true);
+    const result = await createThread({
+      subject: composeSubject.trim(),
+      message: composeMessage.trim()
+    });
+    if (result.success) {
+      setComposeSubject("");
+      setComposeMessage("");
+      setMessageView("list");
+    }
+    setSendingNewMessage(false);
   };
   const formatRelativeTime = (dateString) => {
     const date = new Date(dateString);
@@ -638,9 +672,46 @@ function BugBearButton({
           },
           /* @__PURE__ */ import_react2.default.createElement(import_react_native2.Text, { style: styles.passButtonText }, submitting ? "..." : "\u2713 Pass")
         )))
-      ) : null), activeTab === "messages" && /* @__PURE__ */ import_react2.default.createElement(import_react_native2.View, null, messageView === "list" ? (
+      ) : null), activeTab === "messages" && /* @__PURE__ */ import_react2.default.createElement(import_react_native2.View, null, messageView === "compose" ? (
+        /* Compose New Message View */
+        /* @__PURE__ */ import_react2.default.createElement(import_react_native2.View, null, /* @__PURE__ */ import_react2.default.createElement(import_react_native2.TouchableOpacity, { onPress: handleBackToThreadList, style: styles.backButton }, /* @__PURE__ */ import_react2.default.createElement(import_react_native2.Text, { style: styles.backButtonText }, "\u2190 Back to Messages")), /* @__PURE__ */ import_react2.default.createElement(import_react_native2.View, { style: styles.composeHeader }, /* @__PURE__ */ import_react2.default.createElement(import_react_native2.Text, { style: styles.composeTitle }, "New Message"), /* @__PURE__ */ import_react2.default.createElement(import_react_native2.Text, { style: styles.composeSubtitle }, "Send a message to the QA team")), /* @__PURE__ */ import_react2.default.createElement(import_react_native2.View, { style: styles.composeForm }, /* @__PURE__ */ import_react2.default.createElement(import_react_native2.Text, { style: styles.label }, "Subject"), /* @__PURE__ */ import_react2.default.createElement(
+          import_react_native2.TextInput,
+          {
+            style: styles.composeSubjectInput,
+            value: composeSubject,
+            onChangeText: setComposeSubject,
+            placeholder: "What's this about?",
+            placeholderTextColor: "#9CA3AF",
+            maxLength: 100
+          }
+        ), /* @__PURE__ */ import_react2.default.createElement(import_react_native2.Text, { style: [styles.label, { marginTop: 16 }] }, "Message"), /* @__PURE__ */ import_react2.default.createElement(
+          import_react_native2.TextInput,
+          {
+            style: styles.composeMessageInput,
+            value: composeMessage,
+            onChangeText: setComposeMessage,
+            placeholder: "Write your message...",
+            placeholderTextColor: "#9CA3AF",
+            multiline: true,
+            numberOfLines: 6,
+            textAlignVertical: "top",
+            maxLength: 2e3
+          }
+        ), /* @__PURE__ */ import_react2.default.createElement(
+          import_react_native2.TouchableOpacity,
+          {
+            style: [
+              styles.composeSendButton,
+              (!composeSubject.trim() || !composeMessage.trim() || sendingNewMessage) && styles.composeSendButtonDisabled
+            ],
+            onPress: handleSendNewMessage,
+            disabled: !composeSubject.trim() || !composeMessage.trim() || sendingNewMessage
+          },
+          /* @__PURE__ */ import_react2.default.createElement(import_react_native2.Text, { style: styles.composeSendButtonText }, sendingNewMessage ? "Sending..." : "Send Message")
+        )))
+      ) : messageView === "list" ? (
         /* Thread List View */
-        /* @__PURE__ */ import_react2.default.createElement(import_react_native2.View, null, threads.length === 0 ? /* @__PURE__ */ import_react2.default.createElement(import_react_native2.View, { style: styles.emptyState }, /* @__PURE__ */ import_react2.default.createElement(import_react_native2.Text, { style: styles.emptyEmoji }, "\u{1F4AC}"), /* @__PURE__ */ import_react2.default.createElement(import_react_native2.Text, { style: styles.emptyTitle }, "No messages yet"), /* @__PURE__ */ import_react2.default.createElement(import_react_native2.Text, { style: styles.emptySubtitle }, "Messages from admins will appear here")) : /* @__PURE__ */ import_react2.default.createElement(import_react_native2.View, null, threads.map((thread) => /* @__PURE__ */ import_react2.default.createElement(
+        /* @__PURE__ */ import_react2.default.createElement(import_react_native2.View, null, /* @__PURE__ */ import_react2.default.createElement(import_react_native2.TouchableOpacity, { onPress: handleStartNewMessage, style: styles.newMessageButton }, /* @__PURE__ */ import_react2.default.createElement(import_react_native2.Text, { style: styles.newMessageButtonIcon }, "\u2709\uFE0F"), /* @__PURE__ */ import_react2.default.createElement(import_react_native2.Text, { style: styles.newMessageButtonText }, "New Message")), threads.length === 0 ? /* @__PURE__ */ import_react2.default.createElement(import_react_native2.View, { style: styles.emptyState }, /* @__PURE__ */ import_react2.default.createElement(import_react_native2.Text, { style: styles.emptyEmoji }, "\u{1F4AC}"), /* @__PURE__ */ import_react2.default.createElement(import_react_native2.Text, { style: styles.emptyTitle }, "No messages yet"), /* @__PURE__ */ import_react2.default.createElement(import_react_native2.Text, { style: styles.emptySubtitle }, "Start a conversation or wait for messages from admins")) : /* @__PURE__ */ import_react2.default.createElement(import_react_native2.View, null, threads.map((thread) => /* @__PURE__ */ import_react2.default.createElement(
           import_react_native2.TouchableOpacity,
           {
             key: thread.id,
@@ -1670,6 +1741,81 @@ var styles = import_react_native2.StyleSheet.create({
     fontSize: 14,
     fontWeight: "600",
     color: "#fff"
+  },
+  // New message button styles
+  newMessageButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#7C3AED",
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    borderRadius: 12,
+    marginBottom: 16
+  },
+  newMessageButtonIcon: {
+    fontSize: 16,
+    marginRight: 8
+  },
+  newMessageButtonText: {
+    fontSize: 15,
+    fontWeight: "600",
+    color: "#fff"
+  },
+  // Compose view styles
+  composeHeader: {
+    marginBottom: 20
+  },
+  composeTitle: {
+    fontSize: 20,
+    fontWeight: "600",
+    color: "#111827",
+    marginBottom: 4
+  },
+  composeSubtitle: {
+    fontSize: 14,
+    color: "#6B7280"
+  },
+  composeForm: {
+    backgroundColor: "#F9FAFB",
+    borderRadius: 12,
+    padding: 16
+  },
+  composeSubjectInput: {
+    backgroundColor: "#fff",
+    borderWidth: 1,
+    borderColor: "#E5E7EB",
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 15,
+    color: "#111827"
+  },
+  composeMessageInput: {
+    backgroundColor: "#fff",
+    borderWidth: 1,
+    borderColor: "#E5E7EB",
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 15,
+    color: "#111827",
+    minHeight: 120
+  },
+  composeSendButton: {
+    backgroundColor: "#7C3AED",
+    paddingVertical: 14,
+    borderRadius: 12,
+    alignItems: "center",
+    marginTop: 20
+  },
+  composeSendButtonDisabled: {
+    backgroundColor: "#C4B5FD"
+  },
+  composeSendButtonText: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#fff"
   }
 });
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -25,6 +25,7 @@ var BugBearContext = createContext({
   sendMessage: async () => false,
   markAsRead: async () => {
   },
+  createThread: async () => ({ success: false }),
   refreshTesterStatus: async () => {
   }
 });
@@ -75,6 +76,13 @@ function BugBearProvider({ config, children, appVersion, enabled = true }) {
     await client.markThreadAsRead(threadId);
     await refreshThreads();
   }, [client, refreshThreads]);
+  const createThread = useCallback(async (options) => {
+    const result = await client.createThread(options);
+    if (result.success) {
+      await refreshThreads();
+    }
+    return result;
+  }, [client, refreshThreads]);
   const initializeBugBear = useCallback(async () => {
     setIsLoading(true);
     try {
@@ -136,6 +144,7 @@ function BugBearProvider({ config, children, appVersion, enabled = true }) {
         getThreadMessages,
         sendMessage,
         markAsRead,
+        createThread,
         refreshTesterStatus
       }
     },
@@ -191,7 +200,8 @@ function BugBearButton({
     refreshThreads,
     getThreadMessages,
     sendMessage,
-    markAsRead
+    markAsRead,
+    createThread
   } = useBugBear();
   const [modalVisible, setModalVisible] = useState2(false);
   const [activeTab, setActiveTab] = useState2("tests");
@@ -202,6 +212,9 @@ function BugBearButton({
   const [replyText, setReplyText] = useState2("");
   const [sendingReply, setSendingReply] = useState2(false);
   const [loadingMessages, setLoadingMessages] = useState2(false);
+  const [composeSubject, setComposeSubject] = useState2("");
+  const [composeMessage, setComposeMessage] = useState2("");
+  const [sendingNewMessage, setSendingNewMessage] = useState2(false);
   const getInitialPosition = () => {
     const buttonSize = 56;
     const margin = 16;
@@ -364,6 +377,27 @@ function BugBearButton({
     setSelectedThread(null);
     setThreadMessages([]);
     setReplyText("");
+    setComposeSubject("");
+    setComposeMessage("");
+  };
+  const handleStartNewMessage = () => {
+    setMessageView("compose");
+    setComposeSubject("");
+    setComposeMessage("");
+  };
+  const handleSendNewMessage = async () => {
+    if (!composeSubject.trim() || !composeMessage.trim()) return;
+    setSendingNewMessage(true);
+    const result = await createThread({
+      subject: composeSubject.trim(),
+      message: composeMessage.trim()
+    });
+    if (result.success) {
+      setComposeSubject("");
+      setComposeMessage("");
+      setMessageView("list");
+    }
+    setSendingNewMessage(false);
   };
   const formatRelativeTime = (dateString) => {
     const date = new Date(dateString);
@@ -615,9 +649,46 @@ function BugBearButton({
           },
           /* @__PURE__ */ React2.createElement(Text, { style: styles.passButtonText }, submitting ? "..." : "\u2713 Pass")
         )))
-      ) : null), activeTab === "messages" && /* @__PURE__ */ React2.createElement(View, null, messageView === "list" ? (
+      ) : null), activeTab === "messages" && /* @__PURE__ */ React2.createElement(View, null, messageView === "compose" ? (
+        /* Compose New Message View */
+        /* @__PURE__ */ React2.createElement(View, null, /* @__PURE__ */ React2.createElement(TouchableOpacity, { onPress: handleBackToThreadList, style: styles.backButton }, /* @__PURE__ */ React2.createElement(Text, { style: styles.backButtonText }, "\u2190 Back to Messages")), /* @__PURE__ */ React2.createElement(View, { style: styles.composeHeader }, /* @__PURE__ */ React2.createElement(Text, { style: styles.composeTitle }, "New Message"), /* @__PURE__ */ React2.createElement(Text, { style: styles.composeSubtitle }, "Send a message to the QA team")), /* @__PURE__ */ React2.createElement(View, { style: styles.composeForm }, /* @__PURE__ */ React2.createElement(Text, { style: styles.label }, "Subject"), /* @__PURE__ */ React2.createElement(
+          TextInput,
+          {
+            style: styles.composeSubjectInput,
+            value: composeSubject,
+            onChangeText: setComposeSubject,
+            placeholder: "What's this about?",
+            placeholderTextColor: "#9CA3AF",
+            maxLength: 100
+          }
+        ), /* @__PURE__ */ React2.createElement(Text, { style: [styles.label, { marginTop: 16 }] }, "Message"), /* @__PURE__ */ React2.createElement(
+          TextInput,
+          {
+            style: styles.composeMessageInput,
+            value: composeMessage,
+            onChangeText: setComposeMessage,
+            placeholder: "Write your message...",
+            placeholderTextColor: "#9CA3AF",
+            multiline: true,
+            numberOfLines: 6,
+            textAlignVertical: "top",
+            maxLength: 2e3
+          }
+        ), /* @__PURE__ */ React2.createElement(
+          TouchableOpacity,
+          {
+            style: [
+              styles.composeSendButton,
+              (!composeSubject.trim() || !composeMessage.trim() || sendingNewMessage) && styles.composeSendButtonDisabled
+            ],
+            onPress: handleSendNewMessage,
+            disabled: !composeSubject.trim() || !composeMessage.trim() || sendingNewMessage
+          },
+          /* @__PURE__ */ React2.createElement(Text, { style: styles.composeSendButtonText }, sendingNewMessage ? "Sending..." : "Send Message")
+        )))
+      ) : messageView === "list" ? (
         /* Thread List View */
-        /* @__PURE__ */ React2.createElement(View, null, threads.length === 0 ? /* @__PURE__ */ React2.createElement(View, { style: styles.emptyState }, /* @__PURE__ */ React2.createElement(Text, { style: styles.emptyEmoji }, "\u{1F4AC}"), /* @__PURE__ */ React2.createElement(Text, { style: styles.emptyTitle }, "No messages yet"), /* @__PURE__ */ React2.createElement(Text, { style: styles.emptySubtitle }, "Messages from admins will appear here")) : /* @__PURE__ */ React2.createElement(View, null, threads.map((thread) => /* @__PURE__ */ React2.createElement(
+        /* @__PURE__ */ React2.createElement(View, null, /* @__PURE__ */ React2.createElement(TouchableOpacity, { onPress: handleStartNewMessage, style: styles.newMessageButton }, /* @__PURE__ */ React2.createElement(Text, { style: styles.newMessageButtonIcon }, "\u2709\uFE0F"), /* @__PURE__ */ React2.createElement(Text, { style: styles.newMessageButtonText }, "New Message")), threads.length === 0 ? /* @__PURE__ */ React2.createElement(View, { style: styles.emptyState }, /* @__PURE__ */ React2.createElement(Text, { style: styles.emptyEmoji }, "\u{1F4AC}"), /* @__PURE__ */ React2.createElement(Text, { style: styles.emptyTitle }, "No messages yet"), /* @__PURE__ */ React2.createElement(Text, { style: styles.emptySubtitle }, "Start a conversation or wait for messages from admins")) : /* @__PURE__ */ React2.createElement(View, null, threads.map((thread) => /* @__PURE__ */ React2.createElement(
           TouchableOpacity,
           {
             key: thread.id,
@@ -1647,6 +1718,81 @@ var styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: "600",
     color: "#fff"
+  },
+  // New message button styles
+  newMessageButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#7C3AED",
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    borderRadius: 12,
+    marginBottom: 16
+  },
+  newMessageButtonIcon: {
+    fontSize: 16,
+    marginRight: 8
+  },
+  newMessageButtonText: {
+    fontSize: 15,
+    fontWeight: "600",
+    color: "#fff"
+  },
+  // Compose view styles
+  composeHeader: {
+    marginBottom: 20
+  },
+  composeTitle: {
+    fontSize: 20,
+    fontWeight: "600",
+    color: "#111827",
+    marginBottom: 4
+  },
+  composeSubtitle: {
+    fontSize: 14,
+    color: "#6B7280"
+  },
+  composeForm: {
+    backgroundColor: "#F9FAFB",
+    borderRadius: 12,
+    padding: 16
+  },
+  composeSubjectInput: {
+    backgroundColor: "#fff",
+    borderWidth: 1,
+    borderColor: "#E5E7EB",
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 15,
+    color: "#111827"
+  },
+  composeMessageInput: {
+    backgroundColor: "#fff",
+    borderWidth: 1,
+    borderColor: "#E5E7EB",
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 15,
+    color: "#111827",
+    minHeight: 120
+  },
+  composeSendButton: {
+    backgroundColor: "#7C3AED",
+    paddingVertical: 14,
+    borderRadius: 12,
+    alignItems: "center",
+    marginTop: 20
+  },
+  composeSendButtonDisabled: {
+    backgroundColor: "#C4B5FD"
+  },
+  composeSendButtonText: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#fff"
   }
 });
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbearai/react-native",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "BugBear React Native components for mobile apps",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",