@onedeskpro/chatbot-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Typetech IT
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,70 @@
+# @onedeskpro/chatbot-react
+
+React SDK for the [Onedesk Pro](https://onedeskpro.com) chatbot. Wraps [`@onedeskpro/chatbot-core`](https://www.npmjs.com/package/@onedeskpro/chatbot-core) in a provider, a drop-in widget, and a `useChatbot` hook for fully custom UI.
+
+## Install
+
+```bash
+npm install @onedeskpro/chatbot-react
+```
+
+Requires React 18 or later as a peer dependency.
+
+## Usage
+
+Wrap your app in `ChatbotProvider` and render `ChatbotWidget`:
+
+```tsx
+import { ChatbotProvider, ChatbotWidget } from '@onedeskpro/chatbot-react';
+
+export default function App() {
+  return (
+    <ChatbotProvider apiKey="your-onedesk-pro-api-key" theme="auto">
+      <YourApp />
+      <ChatbotWidget />
+    </ChatbotProvider>
+  );
+}
+```
+
+`ChatbotProvider` accepts every `ChatbotInitOptions` field as a prop — `apiKey`, `apiBaseUrl`, `chatbotName`, `primaryColor`, `theme`, `position`, `welcomeMessage`, `placeholder`, `autoOpen`, `sessionId`. Only `apiKey` is required.
+
+The components are client-side; in Next.js App Router they carry `'use client'` already, so importing them from a server component is fine as long as the provider itself renders on the client.
+
+## Custom UI
+
+`useChatbot` gives you the whole conversation state and controls:
+
+```tsx
+import { useChatbot } from '@onedeskpro/chatbot-react';
+
+function SupportPanel() {
+  const { messages, isLoading, isReady, sendMessage, resetSession } = useChatbot();
+
+  if (!isReady) return null;
+
+  return (
+    <div>
+      {messages.map((m) => (
+        <p key={m.id}>{m.message.content}</p>
+      ))}
+      <button onClick={() => sendMessage('Hello')} disabled={isLoading}>
+        Send
+      </button>
+      <button onClick={resetSession}>New conversation</button>
+    </div>
+  );
+}
+```
+
+`useChatbot` returns `messages`, `isOpen`, `isLoading`, `isReady`, `blockReason`, `error`, `sessionId`, `sendMessage`, `open`, `close`, `toggle`, and `resetSession`.
+
+For custom chrome around the built-in behavior, `ChatbotHeadless` takes `renderLauncher` and `renderWindow` render props instead of shipping any markup of its own.
+
+## Exports
+
+`ChatbotProvider`, `ChatbotWidget`, `ChatbotHeadless`, `useChatbot`, `ChatbotContext`, plus the `ChatbotInitOptions`, `ChatbotState`, `ChatMessage`, and `ChatbotEventMap` types.
+
+## License
+
+MIT © Typetech IT

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),t=require("react"),h=require("@onedeskpro/chatbot-core"),b=t.createContext(null);function C(){const e=t.useContext(b);if(!e)throw new Error("useChatbot must be used inside <ChatbotProvider>.");return e}function f({children:e,...s}){const n=t.useRef(null);return n.current||(n.current=new h.ChatbotCore),t.useEffect(()=>{const o=n.current;return o.init(s).catch(r=>{console.error("[onedeskpro-chatbot] Failed to initialise:",r)}),()=>o.destroy()},[]),i.jsx(b.Provider,{value:n.current,children:e})}function g(){const e=C(),[s,n]=t.useState(()=>e.getState());t.useEffect(()=>{const a=e.on("state-change",d=>n({...d}));return n({...e.getState()}),a},[e]);const o=t.useCallback(a=>e.sendMessage(a),[e]),r=t.useCallback(()=>e.open(),[e]),c=t.useCallback(()=>e.close(),[e]),u=t.useCallback(()=>e.toggle(),[e]),l=t.useCallback(()=>e.resetSession(),[e]);return{messages:s.messages,isOpen:s.isOpen,isLoading:s.isLoading,isReady:s.isReady,blockReason:s.blockReason,error:s.error,sessionId:s.sessionId,sendMessage:o,open:r,close:c,toggle:u,resetSession:l}}function x(){const e=C();return t.useEffect(()=>{},[e]),i.jsx("div",{style:{display:"none"},"aria-hidden":"true"})}function p({renderLauncher:e,renderWindow:s}){const{isOpen:n,toggle:o,open:r,close:c,messages:u,sendMessage:l,isLoading:a,error:d}=g();return i.jsxs(i.Fragment,{children:[e({isOpen:n,toggle:o,open:r,close:c}),s({isOpen:n,messages:u,sendMessage:l,isLoading:a,error:d,close:c})]})}exports.ChatbotContext=b;exports.ChatbotHeadless=p;exports.ChatbotProvider=f;exports.ChatbotWidget=x;exports.useChatbot=g;

package/dist/index.d.cts

@@ -0,0 +1,74 @@
+import { ChatbotBlockReason } from '@onedeskpro/chatbot-types';
+import { ChatbotCore } from '@onedeskpro/chatbot-core';
+import { ChatbotEventMap } from '@onedeskpro/chatbot-types';
+import { ChatbotInitOptions } from '@onedeskpro/chatbot-types';
+import { ChatbotState } from '@onedeskpro/chatbot-types';
+import { ChatMessage } from '@onedeskpro/chatbot-types';
+import { Context } from 'react';
+import { default as default_2 } from 'react';
+import { ReactNode } from 'react';
+
+export declare const ChatbotContext: Context<ChatbotCore | null>;
+
+export { ChatbotEventMap }
+
+/**
+ * Headless variant — no built-in UI. Supply your own launcher and chat window
+ * via render props. All state comes from useChatbot() internally.
+ */
+export declare function ChatbotHeadless({ renderLauncher, renderWindow }: ChatbotHeadlessProps): default_2.JSX.Element;
+
+export declare interface ChatbotHeadlessProps {
+    renderLauncher: (props: {
+        isOpen: boolean;
+        toggle: () => void;
+        open: () => void;
+        close: () => void;
+    }) => ReactNode;
+    renderWindow: (props: {
+        isOpen: boolean;
+        messages: ReturnType<typeof useChatbot>['messages'];
+        sendMessage: (text: string) => Promise<void>;
+        isLoading: boolean;
+        error: string | null;
+        close: () => void;
+    }) => ReactNode;
+}
+
+export { ChatbotInitOptions }
+
+export declare function ChatbotProvider({ children, ...options }: ChatbotProviderProps): default_2.JSX.Element;
+
+export declare type ChatbotProviderProps = ChatbotInitOptions & {
+    children: ReactNode;
+};
+
+export { ChatbotState }
+
+/**
+ * Default floating widget — delegates rendering to the core Shadow DOM widget
+ * that ChatbotCore.init() mounts into document.body. This component just
+ * ensures the provider is in scope; the actual UI lives outside React's tree.
+ */
+export declare function ChatbotWidget(): default_2.JSX.Element;
+
+export { ChatMessage }
+
+export declare function useChatbot(): UseChatbotReturn;
+
+export declare interface UseChatbotReturn {
+    messages: ChatMessage[];
+    isOpen: boolean;
+    isLoading: boolean;
+    isReady: boolean;
+    blockReason: ChatbotBlockReason;
+    error: string | null;
+    sessionId: string | null;
+    sendMessage: (text: string) => Promise<void>;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    resetSession: () => void;
+}
+
+export { }

package/dist/index.d.ts

@@ -0,0 +1,74 @@
+import { ChatbotBlockReason } from '@onedeskpro/chatbot-types';
+import { ChatbotCore } from '@onedeskpro/chatbot-core';
+import { ChatbotEventMap } from '@onedeskpro/chatbot-types';
+import { ChatbotInitOptions } from '@onedeskpro/chatbot-types';
+import { ChatbotState } from '@onedeskpro/chatbot-types';
+import { ChatMessage } from '@onedeskpro/chatbot-types';
+import { Context } from 'react';
+import { default as default_2 } from 'react';
+import { ReactNode } from 'react';
+
+export declare const ChatbotContext: Context<ChatbotCore | null>;
+
+export { ChatbotEventMap }
+
+/**
+ * Headless variant — no built-in UI. Supply your own launcher and chat window
+ * via render props. All state comes from useChatbot() internally.
+ */
+export declare function ChatbotHeadless({ renderLauncher, renderWindow }: ChatbotHeadlessProps): default_2.JSX.Element;
+
+export declare interface ChatbotHeadlessProps {
+    renderLauncher: (props: {
+        isOpen: boolean;
+        toggle: () => void;
+        open: () => void;
+        close: () => void;
+    }) => ReactNode;
+    renderWindow: (props: {
+        isOpen: boolean;
+        messages: ReturnType<typeof useChatbot>['messages'];
+        sendMessage: (text: string) => Promise<void>;
+        isLoading: boolean;
+        error: string | null;
+        close: () => void;
+    }) => ReactNode;
+}
+
+export { ChatbotInitOptions }
+
+export declare function ChatbotProvider({ children, ...options }: ChatbotProviderProps): default_2.JSX.Element;
+
+export declare type ChatbotProviderProps = ChatbotInitOptions & {
+    children: ReactNode;
+};
+
+export { ChatbotState }
+
+/**
+ * Default floating widget — delegates rendering to the core Shadow DOM widget
+ * that ChatbotCore.init() mounts into document.body. This component just
+ * ensures the provider is in scope; the actual UI lives outside React's tree.
+ */
+export declare function ChatbotWidget(): default_2.JSX.Element;
+
+export { ChatMessage }
+
+export declare function useChatbot(): UseChatbotReturn;
+
+export declare interface UseChatbotReturn {
+    messages: ChatMessage[];
+    isOpen: boolean;
+    isLoading: boolean;
+    isReady: boolean;
+    blockReason: ChatbotBlockReason;
+    error: string | null;
+    sessionId: string | null;
+    sendMessage: (text: string) => Promise<void>;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    resetSession: () => void;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,62 @@
+import { jsx as g, jsxs as C, Fragment as b } from "react/jsx-runtime";
+import { createContext as p, useContext as m, useRef as x, useEffect as l, useState as R, useCallback as i } from "react";
+import { ChatbotCore as S } from "@onedeskpro/chatbot-core";
+const f = p(null);
+function h() {
+  const e = m(f);
+  if (!e) throw new Error("useChatbot must be used inside <ChatbotProvider>.");
+  return e;
+}
+function L({ children: e, ...t }) {
+  const s = x(null);
+  return s.current || (s.current = new S()), l(() => {
+    const n = s.current;
+    return n.init(t).catch((o) => {
+      console.error("[onedeskpro-chatbot] Failed to initialise:", o);
+    }), () => n.destroy();
+  }, []), /* @__PURE__ */ g(f.Provider, { value: s.current, children: e });
+}
+function v() {
+  const e = h(), [t, s] = R(() => e.getState());
+  l(() => {
+    const r = e.on("state-change", (d) => s({ ...d }));
+    return s({ ...e.getState() }), r;
+  }, [e]);
+  const n = i(
+    (r) => e.sendMessage(r),
+    [e]
+  ), o = i(() => e.open(), [e]), a = i(() => e.close(), [e]), c = i(() => e.toggle(), [e]), u = i(() => e.resetSession(), [e]);
+  return {
+    messages: t.messages,
+    isOpen: t.isOpen,
+    isLoading: t.isLoading,
+    isReady: t.isReady,
+    blockReason: t.blockReason,
+    error: t.error,
+    sessionId: t.sessionId,
+    sendMessage: n,
+    open: o,
+    close: a,
+    toggle: c,
+    resetSession: u
+  };
+}
+function M() {
+  const e = h();
+  return l(() => {
+  }, [e]), /* @__PURE__ */ g("div", { style: { display: "none" }, "aria-hidden": "true" });
+}
+function O({ renderLauncher: e, renderWindow: t }) {
+  const { isOpen: s, toggle: n, open: o, close: a, messages: c, sendMessage: u, isLoading: r, error: d } = v();
+  return /* @__PURE__ */ C(b, { children: [
+    e({ isOpen: s, toggle: n, open: o, close: a }),
+    t({ isOpen: s, messages: c, sendMessage: u, isLoading: r, error: d, close: a })
+  ] });
+}
+export {
+  f as ChatbotContext,
+  O as ChatbotHeadless,
+  L as ChatbotProvider,
+  M as ChatbotWidget,
+  v as useChatbot
+};

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@onedeskpro/chatbot-react",
+  "version": "0.1.0",
+  "description": "React SDK for the Onedesk Pro Chatbot",
+  "license": "MIT",
+  "author": "Typetech IT <support@onedeskpro.com>",
+  "homepage": "https://github.com/onedeskpro/onedeskpro-chatbot-sdk#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/onedeskpro/onedeskpro-chatbot-sdk.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/onedeskpro/onedeskpro-chatbot-sdk/issues"
+  },
+  "keywords": [
+    "onedeskpro",
+    "chatbot",
+    "react",
+    "chat-widget",
+    "customer-support",
+    "sdk"
+  ],
+  "sideEffects": false,
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@onedeskpro/chatbot-core": "0.1.0",
+    "@onedeskpro/chatbot-types": "0.1.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10",
+    "@testing-library/jest-dom": "^6",
+    "@testing-library/react": "^16",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "jsdom": "^25",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript": "^5.5.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^4.0.0",
+    "vitest": "^2"
+  },
+  "scripts": {
+    "build": "vite build && cp dist/index.d.ts dist/index.d.cts",
+    "test": "vitest run",
+    "dev": "vite build --watch",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}