feat: script method parity, permission-gating audit, and native markdown/LaTeX rendering

Author: tharindu20118

.gitignore

@@ -1,3 +1,7 @@
 node_modules/
+example/node_modules/
+example/android/
+example/ios/
+example/.expo/
 *.log
 .DS_Store

README.md

@@ -61,7 +61,33 @@ export default function App() {
 }
 ```
 
-**Embedded full-screen chat** — place it directly in your own navigation, e.g. as a "Support" screen:
+**Script Method (WebView Embed — 100% web widget parity)** — loads the exact production widget served at `/embed/{botId}` with pixel-for-pixel visual and feature parity, including client-side voice messages, file attachments, AI search, and CSAT:
+
+```tsx
+import { ChattyEmbedView } from "@personaliai/react-native";
+
+function SupportScreen() {
+  return (
+    <ChattyEmbedView
+      botId="YOUR_BOT_ID"
+      onReady={() => console.log("Chat ready")}
+      onMessage={() => console.log("New message")}
+      onClose={() => navigation.goBack()}
+      onRequestNotificationPermission={(botName) => {
+        // Request POST_NOTIFICATIONS contextually (Android 13+ / iOS)
+      }}
+      onMicPermissionNeeded={() => {
+        // Request RECORD_AUDIO permission contextually when user taps the mic
+      }}
+      onLocationPermissionNeeded={() => {
+        // Request location permission contextually when user selects "Location"
+      }}
+    />
+  );
+}
+```
+
+**Native Components Chat** — renders with 100% native React Native components (`FlatList`, `View`, `Text`, `ChattyMarkdown`):
 
 ```tsx
 import { ChattyChatView } from "@personaliai/react-native";
@@ -155,6 +181,37 @@ The button color follows the active design's accent automatically — same as we
 />
 ```
 
+### `ChattyEmbedView` (Script Method)
+
+The official web widget hosted in a React Native `WebView`. Guaranteed pixel-for-pixel and feature-for-feature parity with the web widget, with automatic permission reflection, alert suppression, and OEM font scale isolation:
+
+```tsx
+<ChattyEmbedView
+  botId={string}
+  baseUrl={string}                    // optional, defaults to https://chatty.personaliai.com
+  onReady={() => void}                // optional, fired when web widget finishes loading
+  onMessage={() => void}              // optional, fired on every assistant reply
+  onClose={() => void}                // optional, fired when user closes the widget / CSAT
+  onRequestNotificationPermission={(botName) => void}  // optional, fired on notification bell tap
+  onMicPermissionNeeded={() => void}  // optional, fired on mic tap if RECORD_AUDIO not granted
+  onLocationPermissionNeeded={() => void} // optional, fired on location attach if not granted
+/>
+```
+
+### `ChattyMarkdown`
+
+Real CommonMark + GFM (tables, strikethrough, blockquotes, code blocks with copy) + LaTeX equation support (`$inline$` and `$$block$$`), matching web widget's feature set. Used automatically by `ChattyChatView` and available standalone:
+
+```tsx
+import { ChattyMarkdown } from "@personaliai/react-native";
+
+<ChattyMarkdown
+  text="Solve $$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$ for $x$."
+  color="#111827"
+  fontSize={13}
+/>
+```
+
 > [!NOTE]
 > This SDK renders the composer's emoji picker and attach/mic UI (with layout animation), but it
 > deliberately doesn't bundle a camera, photo-library, document-picker, geolocation, or
@@ -188,24 +245,40 @@ layout.
 
 <br>
 
-This SDK requests exactly one permission itself, and only in direct response to a button tap —
-never on load, never speculatively:
+This SDK strictly adheres to the **"Reflect, Never Request"** contract:
 
-| Permission | Risk | Used for | Requested when |
+| Feature | Android Permission | iOS Info.plist Key | Callback |
 |---|---|---|---|
-| `POST_NOTIFICATIONS` (Android 13+) | Runtime-gated | Header bell button → local notification-permission ask | User taps the bell, only if `enableNotificationBell` (default `true`) |
-
-Set `enableNotificationBell={false}` to hide the bell button entirely — the SDK then never calls
-`PermissionsAndroid.request` at all, so your app fully controls if/when/how notification
-permission is ever requested. Your app remains free to request it itself, on its own schedule,
-for its own purposes.
-
-**Camera, photo library, and microphone are never requested by this SDK at all** — as noted
-above, `onCameraPress` / `onPhotoLibraryPress` / `onMicPress` are plain callbacks; your app
-supplies its own picker/recorder package (`expo-image-picker`, `react-native-image-picker`,
-`expo-av`, etc.) and that package's own permission flow runs entirely under your control. This
-SDK adds no `CAMERA`/`RECORD_AUDIO`/photo-library manifest entries or Info.plist keys of its own —
-whatever picker/recorder you choose documents what it needs.
+| **Voice Notes (`getUserMedia`)** | `android.permission.RECORD_AUDIO`<br>`android.permission.MODIFY_AUDIO_SETTINGS` | `NSMicrophoneUsageDescription` | `onMicPermissionNeeded` |
+| **Location Share (`geolocation`)** | `android.permission.ACCESS_COARSE_LOCATION`<br>`android.permission.ACCESS_FINE_LOCATION` | `NSLocationWhenInUseUsageDescription` | `onLocationPermissionNeeded` |
+| **Notifications** | `android.permission.POST_NOTIFICATIONS` | N/A (UserNotifications API) | `onRequestNotificationPermission` |
+
+In `ChattyEmbedView`, the SDK checks permissions read-only and reflects the status to the web widget. If a user taps the mic or location attach without permissions, `onMicPermissionNeeded` or `onLocationPermissionNeeded` fires so you can present your own rationale and request the permission. Once granted, returning to the view or subsequent taps immediately succeed.
+
+#### Android Setup (`android/app/src/main/AndroidManifest.xml`)
+```xml
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+    <uses-permission android:name="android.permission.RECORD_AUDIO" />
+    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
+    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
+</manifest>
+```
+
+#### iOS Setup (`ios/Podfile` / `Info.plist`)
+```xml
+<key>NSMicrophoneUsageDescription</key>
+<string>We need access to your microphone to record voice messages for support.</string>
+<key>NSLocationWhenInUseUsageDescription</key>
+<string>We need your location to share with support.</string>
+<key>NSCameraUsageDescription</key>
+<string>We need access to your camera to attach photos.</string>
+<key>NSPhotoLibraryUsageDescription</key>
+<string>We need access to your photo library to attach photos.</string>
+```
 
 </details>
 

dist/ChattyChatView.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { ChattyMessage, UseChattyChatOptions } from "./useChattyChat";
+import { ChattyMarkdown } from "./ChattyMarkdown";
 export interface ChattyChatViewProps extends UseChattyChatOptions {
     /** Called once theme/config has loaded and the chat is ready to use. */
     onReady?: () => void;
@@ -34,23 +35,31 @@ export interface ChattyChatViewProps extends UseChattyChatOptions {
      * dashboard has voice enabled). This SDK doesn't bundle a voice-call implementation
      * (that's a separate LiveKit integration) — wire this up if your app has one. */
     onVoiceCallPress?: () => void;
-    /** Called when the header's notification-bell button is tapped, after the OS notification
-     * permission has been requested on Android (PermissionsAndroid, built into RN core — no
-     * extra dependency). There's no cross-platform JS API for this on iOS; request it yourself
-     * (e.g. via expo-notifications or your own native module) before/inside this callback.
-     * Native apps still need their own push infrastructure (FCM/APNs) to actually *deliver* a
-     * notification while backgrounded — this SDK only handles the permission ask. */
+    /** Called when the header's notification-bell button is tapped. This SDK never calls
+     * PermissionsAndroid.request (or any permission prompt) itself — it only reflects
+     * POST_NOTIFICATIONS' already-granted state (via PermissionsAndroid.check on Android 13+,
+     * re-checked on app foreground) to decide whether to show the bell at all. Request the
+     * permission yourself (e.g. via expo-notifications, your own native module, or
+     * PermissionsAndroid.request) wherever your app's onboarding flow calls for it — the bell
+     * then appears once granted. Native apps still need their own push infrastructure
+     * (FCM/APNs) to actually *deliver* a notification while backgrounded. */
     onNotificationBellPress?: () => void;
     /** Renders a close (✕) button in the header when provided — pass this instead of drawing
      * your own close bar above ChattyChatView (e.g. in a modal wrapper), so there's one header,
      * not two stacked ones. ChattyLauncher already does this for you. */
     onClose?: () => void;
-    /** Shows the header's notification-bell button and, on Android, requests
-     * POST_NOTIFICATIONS (a runtime permission on API 33+) when tapped. Set `false` to hide the
-     * button entirely — the SDK then never calls PermissionsAndroid.request at all, so your app
-     * fully controls if/when/how notification permission is ever requested. Default `true`.
+    /** Set `false` to force-hide the header's notification-bell button regardless of permission
+     * state. Left at the default `true`, the bell only shows once POST_NOTIFICATIONS is already
+     * granted (checked read-only, never requested by this SDK — see onNotificationBellPress).
      * Camera/photo/mic aren't listed here because this SDK never requests those permissions
-     * itself — see onCameraPress/onPhotoLibraryPress/onMicPress above. */
+     * itself either — see onCameraPress/onPhotoLibraryPress/onMicPress above. */
     enableNotificationBell?: boolean;
 }
+/** Mirrors standalone.tsx's LAUNCHER_ICONS map + its MessageCircle fallback:
+ * logo(no logoUrl)/custom(no avatarUrl)/anything unmatched falls back to a
+ * chat-bubble glyph, NOT a robot — web only shows the robot for avatar_icon
+ * === "bot" specifically. */
+export declare function avatarGlyph(avatarIcon: string | null | undefined): string;
 export declare function ChattyChatView(props: ChattyChatViewProps): React.JSX.Element;
+/** Backward compatibility alias for ChattyMarkdown. */
+export declare const SimpleMarkdown: typeof ChattyMarkdown;