{"_id":"@aichatbot-saas/react-native","name":"@aichatbot-saas/react-native","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@aichatbot-saas/react-native","version":"0.1.0","description":"Native React Native chat UI kit for the AIChatbot SaaS — themed from your backend config.","license":"MIT","repository":{"type":"git","url":"git+https://github.com/piyushshri01/chat-bot-saas.git","directory":"sdks/react-native"},"homepage":"https://github.com/piyushshri01/chat-bot-saas/tree/main/sdks/react-native#readme","bugs":{"url":"https://github.com/piyushshri01/chat-bot-saas/issues"},"main":"src/index.ts","module":"src/index.ts","types":"src/index.ts","react-native":"src/index.ts","keywords":["react-native","chatbot","ai","chat","sdk","aichatbot","support","widget"],"scripts":{"typecheck":"tsc --noEmit","build":"tsc"},"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"peerDependenciesMeta":{"@react-native-async-storage/async-storage":{"optional":true}},"devDependencies":{"@types/react":"^18.2.0","react":"^18.2.0","react-native":"^0.73.0","typescript":"^5.4.0"},"publishConfig":{"access":"public"},"_id":"@aichatbot-saas/react-native@0.1.0","gitHead":"6d7b30833e233509829ad91ba9b78ec1e7a29c18","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-dLDzUdpgS60bKpLZoQAwpHBbL9eknVlKjnQhuK3tm9walZVwiEOyH3U+O+j8vFatAvmxvum71GoH5SR5ubwqEg==","shasum":"e845cd26559a3fbf80d0d94d2fa4b210517cd8f5","tarball":"https://registry.npmjs.org/@aichatbot-saas/react-native/-/react-native-0.1.0.tgz","fileCount":12,"unpackedSize":45205,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCID5yjpIpW62vA68Fj0MGs1a6/BEMPOS/LX329Gnra8sOAiEA78sod/Hb1hBzRKtO+uiUz6ibjfZ1/ezJ34zk2sTQOsM="}]},"_npmUser":{"name":"piyushshri01","email":"piyushshrimal94@gmail.com"},"directories":{},"maintainers":[{"name":"piyushshri01","email":"piyushshrimal94@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native_0.1.0_1782120888657_0.40230417187036793"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-22T09:34:48.485Z","0.1.0":"2026-06-22T09:34:48.813Z","modified":"2026-06-22T09:34:49.058Z"},"maintainers":[{"name":"piyushshri01","email":"piyushshrimal94@gmail.com"}],"description":"Native React Native chat UI kit for the AIChatbot SaaS — themed from your backend config.","homepage":"https://github.com/piyushshri01/chat-bot-saas/tree/main/sdks/react-native#readme","keywords":["react-native","chatbot","ai","chat","sdk","aichatbot","support","widget"],"repository":{"type":"git","url":"git+https://github.com/piyushshri01/chat-bot-saas.git","directory":"sdks/react-native"},"bugs":{"url":"https://github.com/piyushshri01/chat-bot-saas/issues"},"license":"MIT","readme":"# @aichatbot-saas/react-native\n\nA native React Native chat UI kit for the [AIChatbot](../README.md) SaaS. Drop in\none component, give it your API key, and get a fully native chat screen — message\nlist, input bar, suggestion chips, and thumbs up/down feedback — themed\nautomatically from your backend config.\n\nNo external UI libraries. Pure React Native primitives. Strict TypeScript.\n\n---\n\n## Install\n\n```sh\nnpm install @aichatbot-saas/react-native\n# or\nyarn add @aichatbot-saas/react-native\n```\n\nFor conversation persistence across app restarts, also install AsyncStorage\n(optional — the SDK degrades gracefully without it):\n\n```sh\nnpm install @react-native-async-storage/async-storage\n```\n\n`react` and `react-native` are peer dependencies and should already be in your app.\n\n---\n\n## Usage\n\n```tsx\nimport React from 'react';\nimport { SafeAreaView } from 'react-native';\nimport { AIChatbot } from '@aichatbot-saas/react-native';\n\nexport default function Support() {\n  return (\n    <SafeAreaView style={{ flex: 1 }}>\n      <AIChatbot apiKey=\"pk_live_xxx\" apiUrl=\"https://api.you.com\" />\n    </SafeAreaView>\n  );\n}\n```\n\nOnly `apiKey` is required. The bot name, greeting, colors, languages, and\nsuggestions all come from your backend config — the same one that powers the web\nwidget.\n\n---\n\n## Props\n\n| Prop        | Type                 | Required | Description                                                                 |\n|-------------|----------------------|----------|-----------------------------------------------------------------------------|\n| `apiKey`    | `string`             | yes      | Your publishable API key (sent as `X-API-Key`).                             |\n| `apiUrl`    | `string`             | no       | Backend base URL. Trailing slash is stripped. Defaults to the hosted API.   |\n| `language`  | `string`             | no       | Force a language. Otherwise `config.languages[0]` → `\"en\"`.                 |\n| `theme`     | `Partial<ChatTheme>` | no       | Local theme overrides; win over backend config and defaults.                |\n| `sessionId` | `string`             | no       | Stable device/session id forwarded to the backend for threading.            |\n| `style`     | `ViewStyle`          | no       | Extra style for the root container.                                         |\n\n---\n\n## Theming & overrides\n\nThe backend sends raw config (`primary_color`, etc.); the SDK normalizes it into\na `ChatTheme` so the native UI matches the web widget. Override precedence is:\n\n```\nclient override  →  backend config  →  built-in default\n```\n\nForce any token locally via the `theme` prop:\n\n```tsx\n<AIChatbot\n  apiKey=\"pk_live_xxx\"\n  apiUrl=\"https://api.you.com\"\n  theme={{\n    primaryColor: '#16a34a', // overrides whatever the backend says\n    bubbleRadius: 18,\n  }}\n/>\n```\n\nResolvable tokens: `primaryColor`, `secondaryColor`, `onPrimaryColor`,\n`backgroundColor`, `surfaceColor`, `botBubbleColor`, `botBubbleTextColor`,\n`botBubbleBorderColor`, `userBubbleColor`, `userBubbleTextColor`,\n`mutedTextColor`, `bubbleRadius`, `inputRadius`, `fontFamily`.\n\nYou can also resolve a theme yourself:\n\n```ts\nimport { resolveTheme, DEFAULT_THEME } from '@aichatbot-saas/react-native';\n\nconst theme = resolveTheme(config, { primaryColor: '#16a34a' });\n```\n\n---\n\n## Headless client\n\nNeed full control over the UI? Use `AIChatbotClient` directly — it implements the\nentire REST contract and is what `<AIChatbot />` uses internally.\n\n```ts\nimport { AIChatbotClient, suggestionLabel } from '@aichatbot-saas/react-native';\n\nconst client = new AIChatbotClient({\n  apiKey: 'pk_live_xxx',\n  apiUrl: 'https://api.you.com',\n});\n\nconst config = await client.fetchConfig();\nconst starters = await client.fetchSuggestions(config.languages[0]);\nconsole.log(starters.map(suggestionLabel));\n\nconst reply = await client.sendMessage({\n  text: 'What are your hours?',\n  conversationId: null, // persist reply.conversation_id for the next call\n  language: 'en',\n});\nconsole.log(reply.response, reply.conversation_id);\n\nawait client.sendFeedback(reply.message_id, 'positive');\n```\n\n| Method                                                   | Returns                  |\n|----------------------------------------------------------|--------------------------|\n| `fetchConfig()`                                          | `Promise<ChatConfig>`    |\n| `fetchSuggestions(language?)`                            | `Promise<Suggestion[]>`  |\n| `sendMessage({ text, conversationId?, language?, sessionId? })` | `Promise<ChatResponse>` |\n| `sendFeedback(messageId, feedback)`                      | `Promise<{ success }>`   |\n\nNon-2xx responses throw `Error(data.error)`.\n\n---\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-1522e13906efeba593e1131d5131200c"}