opendesk-react-native 0.0.0-stage → 0.1.2

package/lib/ui/OpenDeskLauncher.d.ts

@@ -0,0 +1,12 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+export interface OpenDeskLauncherProps {
+    onPress: () => void;
+    /** Shows the close icon instead of the chat bubble. */
+    open?: boolean;
+    accentColor?: string;
+    accessibilityLabel?: string;
+    /** Position it yourself, e.g. `{ position: 'absolute', right: 20, bottom: 20 }`. */
+    style?: StyleProp<ViewStyle>;
+}
+/** The web widget's launcher button: brand colour, rounded square, unread badge. */
+export declare function OpenDeskLauncher({ onPress, open, accentColor, accessibilityLabel, style }: OpenDeskLauncherProps): import("react").JSX.Element;

package/lib/ui/OpenDeskLauncher.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenDeskLauncher = OpenDeskLauncher;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_2 = require("../react");
+const icons_1 = require("./icons");
+const theme_1 = require("./theme");
+/** The web widget's launcher button: brand colour, rounded square, unread badge. */
+function OpenDeskLauncher({ onPress, open = false, accentColor, accessibilityLabel, style }) {
+    const config = (0, react_2.useOpenDeskState)((state) => state.config);
+    const unread = (0, react_2.useUnreadCount)();
+    const scheme = (0, react_native_1.useColorScheme)() === 'dark' ? 'dark' : 'light';
+    const theme = (0, react_1.useMemo)(() => (0, theme_1.makeTheme)(config, config?.theme === 'light' || config?.theme === 'dark' ? config.theme : scheme, accentColor), [accentColor, config, scheme]);
+    const radius = { square: 10, soft: 16, round: 27 }[config?.radius ?? 'soft'] ?? 16;
+    const label = accessibilityLabel ?? (open ? 'Close chat' : unread > 0 ? `Open chat, ${unread} new` : 'Open chat');
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: label, onPress: onPress, style: ({ pressed }) => [styles.launcher, { backgroundColor: theme.accent, borderRadius: radius }, pressed && styles.pressed, style], children: [open ? (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, { color: theme.accentFg, size: 22 }) : (0, jsx_runtime_1.jsx)(icons_1.ChatIcon, { color: theme.accentFg, size: 24 }), !open && unread > 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.badge, { backgroundColor: theme.danger, borderColor: theme.bg }], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.badgeText, children: unread > 99 ? '99+' : unread }) })) : null] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    launcher: {
+        width: 54,
+        height: 54,
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: '#000000',
+        shadowOpacity: 0.3,
+        shadowRadius: 10,
+        shadowOffset: { width: 0, height: 8 },
+        elevation: 6,
+    },
+    pressed: { transform: [{ scale: 0.96 }] },
+    badge: {
+        position: 'absolute',
+        top: -5,
+        right: -5,
+        minWidth: 20,
+        height: 20,
+        paddingHorizontal: 6,
+        borderRadius: 10,
+        borderWidth: 2,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    badgeText: { color: '#ffffff', fontSize: 11, fontWeight: '600' },
+});

package/lib/ui/icons.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The widget's line icons drawn with plain Views, so the SDK needs no react-native-svg.
+ * Each fits a square of `size` with 1.6px strokes, like the web widget's 1.6 stroke SVGs.
+ */
+interface IconProps {
+    color: string;
+    size?: number;
+}
+export declare function CloseIcon({ color, size }: IconProps): import("react").JSX.Element;
+/** A chevron; `direction` is where it points. */
+export declare function ChevronIcon({ color, size, direction }: IconProps & {
+    direction?: 'left' | 'right';
+}): import("react").JSX.Element;
+/** An arrow; `angle` is the clockwise rotation from pointing right. */
+export declare function ArrowIcon({ color, size, angle }: IconProps & {
+    angle?: number;
+}): import("react").JSX.Element;
+export declare function PaperclipIcon({ color, size }: IconProps): import("react").JSX.Element;
+/** A speech bubble, used on the launcher. */
+export declare function ChatIcon({ color, size }: IconProps): import("react").JSX.Element;
+export declare function PersonIcon({ color, size }: IconProps): import("react").JSX.Element;
+export declare function SparkIcon({ color, size }: IconProps): import("react").JSX.Element;
+export {};

package/lib/ui/icons.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseIcon = CloseIcon;
+exports.ChevronIcon = ChevronIcon;
+exports.ArrowIcon = ArrowIcon;
+exports.PaperclipIcon = PaperclipIcon;
+exports.ChatIcon = ChatIcon;
+exports.PersonIcon = PersonIcon;
+exports.SparkIcon = SparkIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const stroke = 1.6;
+function Box({ size, children }) {
+    return (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: size, height: size, alignItems: 'center', justifyContent: 'center' }, children: children });
+}
+function Line({ length, color, style }) {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [{ position: 'absolute', width: length, height: stroke, borderRadius: stroke, backgroundColor: color }, style] }));
+}
+function CloseIcon({ color, size = 16 }) {
+    const length = size * 0.78;
+    return ((0, jsx_runtime_1.jsxs)(Box, { size: size, children: [(0, jsx_runtime_1.jsx)(Line, { length: length, color: color, style: { transform: [{ rotate: '45deg' }] } }), (0, jsx_runtime_1.jsx)(Line, { length: length, color: color, style: { transform: [{ rotate: '-45deg' }] } })] }));
+}
+/** A chevron; `direction` is where it points. */
+function ChevronIcon({ color, size = 16, direction = 'left' }) {
+    const arm = size * 0.42;
+    return ((0, jsx_runtime_1.jsx)(Box, { size: size, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                width: arm,
+                height: arm,
+                borderLeftWidth: stroke,
+                borderBottomWidth: stroke,
+                borderColor: color,
+                borderBottomLeftRadius: 1,
+                transform: [{ translateX: direction === 'left' ? arm * 0.2 : -arm * 0.2 }, { rotate: direction === 'left' ? '45deg' : '-135deg' }],
+            } }) }));
+}
+/** An arrow; `angle` is the clockwise rotation from pointing right. */
+function ArrowIcon({ color, size = 16, angle = 0 }) {
+    const shaft = size * 0.7;
+    const head = size * 0.36;
+    return ((0, jsx_runtime_1.jsx)(Box, { size: size, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { width: shaft, height: shaft, alignItems: 'center', justifyContent: 'center', transform: [{ rotate: `${angle}deg` }] }, children: [(0, jsx_runtime_1.jsx)(Line, { length: shaft, color: color }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                        position: 'absolute',
+                        right: stroke / 2,
+                        width: head,
+                        height: head,
+                        borderTopWidth: stroke,
+                        borderRightWidth: stroke,
+                        borderColor: color,
+                        borderTopRightRadius: 1,
+                        transform: [{ rotate: '45deg' }],
+                    } })] }) }));
+}
+function PaperclipIcon({ color, size = 16 }) {
+    const width = size * 0.42;
+    const height = size * 0.86;
+    return ((0, jsx_runtime_1.jsx)(Box, { size: size, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { transform: [{ rotate: '40deg' }] }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width, height, borderWidth: stroke, borderColor: color, borderRadius: width / 2, borderBottomColor: color } }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                        position: 'absolute',
+                        left: width / 2 - stroke / 2,
+                        top: height * 0.22,
+                        width: stroke,
+                        height: height * 0.5,
+                        borderRadius: stroke,
+                        backgroundColor: color,
+                    } })] }) }));
+}
+/** A speech bubble, used on the launcher. */
+function ChatIcon({ color, size = 22 }) {
+    const width = size * 0.86;
+    const height = size * 0.66;
+    return ((0, jsx_runtime_1.jsxs)(Box, { size: size, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width, height, borderWidth: 2, borderColor: color, borderRadius: height * 0.38 } }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                    position: 'absolute',
+                    left: size * 0.2,
+                    bottom: size * 0.06,
+                    width: size * 0.22,
+                    height: size * 0.22,
+                    borderLeftWidth: 2,
+                    borderBottomWidth: 2,
+                    borderColor: color,
+                    borderBottomLeftRadius: 2,
+                    transform: [{ skewY: '-20deg' }],
+                } })] }));
+}
+function PersonIcon({ color, size = 16 }) {
+    return ((0, jsx_runtime_1.jsxs)(Box, { size: size, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: size * 0.38, height: size * 0.38, borderRadius: size, borderWidth: stroke, borderColor: color, marginBottom: 1 } }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                    width: size * 0.66,
+                    height: size * 0.3,
+                    borderTopLeftRadius: size,
+                    borderTopRightRadius: size,
+                    borderWidth: stroke,
+                    borderBottomWidth: 0,
+                    borderColor: color,
+                } })] }));
+}
+function SparkIcon({ color, size = 10 }) {
+    return ((0, jsx_runtime_1.jsx)(Box, { size: size, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: size * 0.5, height: size * 0.5, backgroundColor: color, borderRadius: 1, transform: [{ rotate: '45deg' }] } }) }));
+}

package/lib/ui/strings.d.ts

@@ -0,0 +1,53 @@
+/** The web widget's English copy, so both channels read the same. Override any key via `strings`. */
+export declare const defaultStrings: {
+    support: string;
+    closeChat: string;
+    greeting: string;
+    replyTime: string;
+    replyTimeAi: string;
+    unavailable: string;
+    unavailableHint: string;
+    sendMessage: string;
+    yourConversations: string;
+    conversation: string;
+    typing: string;
+    botTyping: string;
+    searchHelp: string;
+    poweredBy: string;
+    back: string;
+    emptyHint: string;
+    notSent: string;
+    sending: string;
+    uploading: string;
+    removeFile: string;
+    fileTypeRefused: string;
+    fileTooLarge: string;
+    uploadFailed: string;
+    placeholder: string;
+    attach: string;
+    send: string;
+    ai: string;
+    talkToPerson: string;
+    handoffFailed: string;
+    handedOff: string;
+    handedOffHint: string;
+    checking: string;
+    checked: string;
+    toolFailed: string;
+    actionPending: string;
+    confirm: string;
+    cancel: string;
+    actionConfirmed: string;
+    actionDeclined: string;
+    actionExpired: string;
+    actionFailed: string;
+    topicsTitle: string;
+    topicsHint: string;
+    placeholderTopic: string;
+    changeTopic: string;
+    offlineDefault: string;
+    today: string;
+    yesterday: string;
+};
+export type ChatStrings = typeof defaultStrings;
+export declare function format(template: string, values?: Record<string, string | number>): string;

package/lib/ui/strings.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultStrings = void 0;
+exports.format = format;
+/** The web widget's English copy, so both channels read the same. Override any key via `strings`. */
+exports.defaultStrings = {
+    support: 'Support',
+    closeChat: 'Close chat',
+    greeting: 'Hi there. How can we help?',
+    replyTime: 'We usually reply within a few hours.',
+    replyTimeAi: '{name} answers right away, the team within a few hours.',
+    unavailable: 'Chat is unavailable',
+    unavailableHint: 'Check your connection and try again later.',
+    sendMessage: 'Send us a message',
+    yourConversations: 'Your conversations',
+    conversation: 'Conversation',
+    typing: '{name} is typing…',
+    botTyping: '{name} is writing…',
+    searchHelp: 'Search the help center',
+    poweredBy: 'Powered by opendesk',
+    back: 'Back to conversations',
+    emptyHint: "Ask us anything. We'll reply here, and by email if you leave one.",
+    notSent: 'Not sent.',
+    sending: 'Sending…',
+    uploading: 'Uploading…',
+    removeFile: 'Remove {name}',
+    fileTypeRefused: "{name} can't be sent here. Try another file type.",
+    fileTooLarge: '{name} is larger than 25 MB.',
+    uploadFailed: "Couldn't upload {name}. Try again.",
+    placeholder: 'Write a message…',
+    attach: 'Attach files',
+    send: 'Send',
+    ai: 'AI',
+    talkToPerson: 'Talk to a person',
+    handoffFailed: "Couldn't reach the team. Try again.",
+    handedOff: 'A person will reply here',
+    handedOffHint: "You'll see their reply in this conversation, and by email if you left one.",
+    checking: 'Checking {tool}…',
+    checked: 'Checked {tool}',
+    toolFailed: "Couldn't check {tool}",
+    actionPending: 'Needs your confirmation',
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+    actionConfirmed: 'Confirmed',
+    actionDeclined: 'Cancelled',
+    actionExpired: 'Expired',
+    actionFailed: "Didn't go through",
+    topicsTitle: 'What can we help with?',
+    topicsHint: 'Pick a topic so your message reaches the right people.',
+    placeholderTopic: 'Pick a topic to start',
+    changeTopic: 'Change topic',
+    offlineDefault: "We're away right now. Leave a message and we'll reply as soon as we're back.",
+    today: 'Today',
+    yesterday: 'Yesterday',
+};
+function format(template, values = {}) {
+    return template.replace(/\{(\w+)\}/g, (match, key) => (key in values ? String(values[key]) : match));
+}

package/lib/ui/theme.d.ts

@@ -0,0 +1,51 @@
+import type { WidgetConfig } from '../types';
+/** Colour tokens from openDesk's web widget (`.root` and `.root[data-theme="dark"]`). */
+export interface Palette {
+    bg: string;
+    bg2: string;
+    bg3: string;
+    line: string;
+    line2: string;
+    fg: string;
+    fg2: string;
+    fg3: string;
+    fg4: string;
+    ai: string;
+    aiSoft: string;
+    aiLine: string;
+    danger: string;
+    dangerSoft: string;
+}
+/** The widget's `radius` setting, in the same steps as the web widget. */
+declare const radii: {
+    readonly square: {
+        readonly bubble: 6;
+        readonly ctl: 4;
+        readonly card: 4;
+        readonly bar: 4;
+        readonly av: 4;
+    };
+    readonly soft: {
+        readonly bubble: 14;
+        readonly ctl: 8;
+        readonly card: 10;
+        readonly bar: 10;
+        readonly av: 6;
+    };
+    readonly round: {
+        readonly bubble: 20;
+        readonly ctl: 999;
+        readonly card: 16;
+        readonly bar: 22;
+        readonly av: 999;
+    };
+};
+export interface ChatTheme extends Palette {
+    accent: string;
+    accentFg: string;
+    headBg: string;
+    radius: (typeof radii)[keyof typeof radii];
+    mono: string;
+}
+export declare function makeTheme(config: WidgetConfig | null, scheme: 'light' | 'dark', accentOverride?: string): ChatTheme;
+export {};

package/lib/ui/theme.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeTheme = makeTheme;
+const react_native_1 = require("react-native");
+const light = {
+    bg: '#ffffff',
+    bg2: '#f4f4f5',
+    bg3: '#fafafa',
+    line: '#e7e7e9',
+    line2: '#d6d6d9',
+    fg: '#0a0a0a',
+    fg2: '#525252',
+    fg3: '#737373',
+    fg4: '#a3a3a3',
+    ai: '#6d4bd8',
+    aiSoft: '#f4f0ff',
+    aiLine: '#e4dcff',
+    danger: '#dc2626',
+    dangerSoft: '#fef2f2',
+};
+const dark = {
+    bg: '#161616',
+    bg2: '#242426',
+    bg3: '#1c1c1d',
+    line: '#2c2c2f',
+    line2: '#3a3a3e',
+    fg: '#fafafa',
+    fg2: '#c4c4c6',
+    fg3: '#8d8d92',
+    fg4: '#5e5e63',
+    ai: '#b9a3ff',
+    aiSoft: '#231d33',
+    aiLine: '#372d52',
+    danger: '#f87171',
+    dangerSoft: '#2a1515',
+};
+/** The widget's `radius` setting, in the same steps as the web widget. */
+const radii = {
+    square: { bubble: 6, ctl: 4, card: 4, bar: 4, av: 4 },
+    soft: { bubble: 14, ctl: 8, card: 10, bar: 10, av: 6 },
+    round: { bubble: 20, ctl: 999, card: 16, bar: 22, av: 999 },
+};
+function makeTheme(config, scheme, accentOverride) {
+    const palette = scheme === 'dark' ? dark : light;
+    const brand = normalizeHex(accentOverride ?? config?.brand_color ?? config?.brand?.color);
+    const accent = brand ?? palette.fg;
+    return {
+        ...palette,
+        accent,
+        accentFg: brand ? readableOn(brand) : palette.bg,
+        headBg: mix(accent, palette.bg3, 0.035),
+        radius: radii[config?.radius ?? 'soft'] ?? radii.soft,
+        mono: react_native_1.Platform.select({ ios: 'Menlo', android: 'monospace', default: 'ui-monospace, SFMono-Regular, Menlo, monospace' }),
+    };
+}
+function normalizeHex(value) {
+    if (!value) {
+        return null;
+    }
+    const hex = value.trim().replace(/^#/, '');
+    return /^([0-9a-f]{3}|[0-9a-f]{6})$/i.test(hex) ? `#${hex}` : null;
+}
+function rgb(hex) {
+    let h = hex.replace('#', '');
+    if (h.length === 3) {
+        h = h
+            .split('')
+            .map((c) => c + c)
+            .join('');
+    }
+    const n = parseInt(h, 16);
+    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+/** `color-mix(in srgb, a weight, b)`. */
+function mix(a, b, weight) {
+    const [ar, ag, ab] = rgb(a);
+    const [br, bg, bb] = rgb(b);
+    const channel = (x, y) => Math.round(x * weight + y * (1 - weight)).toString(16).padStart(2, '0');
+    return `#${channel(ar, br)}${channel(ag, bg)}${channel(ab, bb)}`;
+}
+/** White or near-black text, whichever reads better on the brand colour. */
+function readableOn(hex) {
+    const [r, g, b] = rgb(hex).map((c) => {
+        const v = c / 255;
+        return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+    });
+    const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    return luminance > 0.45 ? '#0a0a0a' : '#ffffff';
+}

package/package.json

@@ -1,6 +1,45 @@
 {
   "name": "opendesk-react-native",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.2",
+  "description": "React Native SDK for openDesk live chat: headless client, realtime, hooks and a drop-in chat screen.",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "src",
+    "!src/**/__tests__"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "prepare": "npm run build",
+    "example": "vite --config example/vite.config.ts"
+  },
+  "keywords": [
+    "opendesk",
+    "react-native",
+    "live-chat",
+    "support"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "phoenix": "^1.7.21"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.72"
+  },
+  "devDependencies": {
+    "@types/phoenix": "^1.6.6",
+    "@types/react": "^19.1.0",
+    "@vitejs/plugin-react": "^5.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.3.1",
+    "react-native": "^0.81.0",
+    "react-native-web": "^0.21.4",
+    "typescript": "^5.9.2",
+    "vite": "^7.3.7",
+    "vitest": "^3.2.4"
+  }
+}

package/src/api.ts

@@ -0,0 +1,172 @@
+import { OpenDeskError } from './errors';
+import type {
+  Attachment,
+  Conversation,
+  Identity,
+  Message,
+  SendMessageInput,
+  StartConversationInput,
+  UploadFile,
+  WidgetConfig,
+  WidgetSession,
+} from './types';
+
+export type Fetcher = typeof fetch;
+
+export interface OpenDeskApiOptions {
+  /** The openDesk origin, e.g. `https://desk.example.com`. `/v1` is added. */
+  baseUrl: string;
+  /** The chat widget's public key (`wk_…`). */
+  widgetKey: string;
+  fetcher?: Fetcher;
+}
+
+/**
+ * Thin REST client for openDesk's visitor endpoints. Holds the visitor token once a
+ * session exists and sends it as `Authorization: Visitor <token>`.
+ */
+export class OpenDeskApi {
+  readonly baseUrl: string;
+  readonly widgetKey: string;
+  visitorToken: string | null = null;
+  private readonly fetcher: Fetcher;
+
+  constructor(options: OpenDeskApiOptions) {
+    this.baseUrl = options.baseUrl.replace(/\/widget\/v1\.js$/, '').replace(/\/+$/, '').replace(/\/v1$/, '');
+    this.widgetKey = options.widgetKey;
+    this.fetcher = options.fetcher ?? ((input, init) => fetch(input, init));
+  }
+
+  config(): Promise<WidgetConfig> {
+    return this.request('GET', `/v1/widget/config?key=${encodeURIComponent(this.widgetKey)}`, undefined, false);
+  }
+
+  /** Starts a session, or resumes the current one when a visitor token is held. */
+  async session(identity: Identity = {}): Promise<WidgetSession> {
+    const session = await this.request<WidgetSession>(
+      'POST',
+      '/v1/widget/session',
+      { key: this.widgetKey, ...(this.visitorToken ? { visitor_token: this.visitorToken } : {}), ...identity },
+      false,
+    );
+    this.visitorToken = session.visitor_token;
+
+    return session;
+  }
+
+  async endSession(): Promise<void> {
+    if (this.visitorToken) {
+      await this.request('DELETE', '/v1/widget/session');
+    }
+  }
+
+  async conversations(): Promise<Conversation[]> {
+    const response = await this.request<{ data: Conversation[] | null }>('GET', '/v1/widget/conversations');
+
+    return response.data ?? [];
+  }
+
+  startConversation(input: StartConversationInput): Promise<{ conversation: Conversation; message: Message }> {
+    return this.request('POST', '/v1/widget/conversations', input);
+  }
+
+  async messages(conversationId: string): Promise<Message[]> {
+    const response = await this.request<{ data: Message[] | null }>(
+      'GET',
+      `/v1/widget/conversations/${encodeURIComponent(conversationId)}/messages`,
+    );
+
+    return response.data ?? [];
+  }
+
+  sendMessage(conversationId: string, input: SendMessageInput): Promise<Message> {
+    return this.request('POST', `/v1/widget/conversations/${encodeURIComponent(conversationId)}/messages`, input);
+  }
+
+  async markSeen(conversationId: string): Promise<void> {
+    await this.request('POST', `/v1/widget/conversations/${encodeURIComponent(conversationId)}/seen`, {});
+  }
+
+  /** Asks for a person after an AI answer. */
+  async handoff(conversationId: string): Promise<void> {
+    await this.request('POST', `/v1/widget/conversations/${encodeURIComponent(conversationId)}/handoff`, {});
+  }
+
+  /** Confirms or declines an action the AI proposed. */
+  async decideAction(conversationId: string, actionId: string, decision: 'confirm' | 'decline'): Promise<void> {
+    await this.request(
+      'POST',
+      `/v1/widget/conversations/${encodeURIComponent(conversationId)}/actions/${encodeURIComponent(actionId)}`,
+      { decision },
+    );
+  }
+
+  async rateMessage(conversationId: string, messageId: string, rating: 'up' | 'down'): Promise<void> {
+    await this.request(
+      'POST',
+      `/v1/widget/conversations/${encodeURIComponent(conversationId)}/messages/${encodeURIComponent(messageId)}/rating`,
+      { rating },
+    );
+  }
+
+  /**
+   * Uploads one file as multipart `file`. React Native's FormData takes `{ uri, name, type }`;
+   * a browser needs a real Blob, so web Files are passed through as they are.
+   */
+  upload(file: UploadFile): Promise<Attachment> {
+    const form = new FormData();
+    if (isBlob(file)) {
+      form.append('file', file, 'name' in file && typeof file.name === 'string' ? file.name : 'upload');
+    } else {
+      form.append('file', { uri: file.uri, name: file.name, type: file.type || 'application/octet-stream' } as unknown as Blob);
+    }
+
+    return this.request('POST', '/v1/widget/attachments', form);
+  }
+
+  private async request<T>(method: string, path: string, body?: unknown, authenticated = true): Promise<T> {
+    const headers: Record<string, string> = { Accept: 'application/json' };
+    let payload: BodyInit | undefined;
+
+    if (body instanceof FormData) {
+      payload = body;
+    } else if (body !== undefined) {
+      headers['Content-Type'] = 'application/json';
+      payload = JSON.stringify(body);
+    }
+
+    if (authenticated && this.visitorToken) {
+      headers.Authorization = `Visitor ${this.visitorToken}`;
+    }
+
+    let response: Response;
+    try {
+      response = await this.fetcher(this.baseUrl + path, { method, headers, body: payload });
+    } catch {
+      throw new OpenDeskError(0, 'network_error', "Can't reach the server");
+    }
+
+    if (!response.ok) {
+      let code = 'error';
+      let message = `Request failed (${response.status})`;
+      try {
+        const problem = (await response.json()) as { code?: string; detail?: string; title?: string };
+        code = problem.code ?? code;
+        message = problem.detail || problem.title || message;
+      } catch {
+        // Not a problem+json body.
+      }
+      throw new OpenDeskError(response.status, code, message);
+    }
+
+    if (response.status === 204 || !(response.headers.get('content-type') ?? '').includes('json')) {
+      return undefined as T;
+    }
+
+    return (await response.json()) as T;
+  }
+}
+
+function isBlob(file: UploadFile): file is Blob {
+  return typeof Blob !== 'undefined' && file instanceof Blob;
+}