@ably/ai-transport 0.0.1 → 0.1.0

package/src/react/use-client-transport.ts

@@ -1,37 +1,197 @@
 /**
- * useClientTransport: creates and memoizes a core ClientTransport instance
- * across renders.
+ * useClientTransport — read a ClientTransport from the nearest TransportProvider.
  *
- * Stores the instance in a ref so the same transport is returned on every render.
- * The transport manages its own Ably channel subscription in the constructor —
- * this hook adds no subscription logic.
+ * The transport is created by {@link TransportProvider}, which also wraps the subtree
+ * with Ably's `ChannelProvider`. This hook is a thin context reader — it does not
+ * create or manage transport state.
  *
- * The hook does NOT auto-close the transport on unmount. Channel lifecycle is
- * managed by the Ably provider (useChannel), which detaches the channel and
- * clears all subscriptions. Auto-closing would break React Strict Mode
- * (double-mount calls close() on the first cleanup, leaving a dead transport
- * on the second mount). Call transport.close() explicitly if you need to tear
- * down the transport independently of the channel lifecycle.
+ * **Provider lookup**
+ * - Omit `channelName` to use the innermost `TransportProvider` in the tree.
+ * - Pass `channelName` to look up a specific provider by name.
+ * - Pass `skip: true` to receive a stub transport that throws on any access —
+ *   safe to hold in state before auth or other conditions are ready.
+ *
+ * **Error handling**
+ * - When no matching provider is found, or when the provider's `createClientTransport`
+ *   call threw, `transportError` is set on the returned object instead of throwing.
+ *   The component can render an error state without an error boundary.
+ * - Pass `onError` to receive post-construction transport errors (e.g. send failures,
+ *   channel continuity loss) without wiring `transport.on('error', ...)` manually.
  */
 
-import { useRef } from 'react';
+import * as Ably from 'ably';
+import { useContext, useEffect, useRef } from 'react';
+
+import type { ClientTransport, Tree, View } from '../core/transport/types.js';
+import { ErrorCode } from '../errors.js';
+import { NearestTransportContext, TransportContext } from './contexts/transport-context.js';
 
-import { createClientTransport } from '../core/transport/client-transport.js';
-import type { ClientTransport, ClientTransportOptions } from '../core/transport/types.js';
+const SKIPPED_TRANSPORT: ClientTransport<unknown, unknown> = {
+  get tree(): Tree<unknown> {
+    throw new Ably.ErrorInfo('unable to access tree; hook is skipped', ErrorCode.InvalidArgument, 400);
+  },
+  get view(): View<unknown, unknown> {
+    throw new Ably.ErrorInfo('unable to access view; hook is skipped', ErrorCode.InvalidArgument, 400);
+  },
+  createView: (): View<unknown, unknown> => {
+    throw new Ably.ErrorInfo('unable to create view; hook is skipped', ErrorCode.InvalidArgument, 400);
+  },
+  cancel: () => {
+    throw new Ably.ErrorInfo('unable to cancel; hook is skipped', ErrorCode.InvalidArgument, 400);
+  },
+  stageEvents: () => {
+    throw new Ably.ErrorInfo('unable to stage events; hook is skipped', ErrorCode.InvalidArgument, 400);
+  },
+  stageMessage: () => {
+    throw new Ably.ErrorInfo('unable to stage message; hook is skipped', ErrorCode.InvalidArgument, 400);
+  },
+  waitForTurn: () => {
+    throw new Ably.ErrorInfo('unable to wait for turn; hook is skipped', ErrorCode.InvalidArgument, 400);
+  },
+  on: () => {
+    throw new Ably.ErrorInfo('unable to subscribe; hook is skipped', ErrorCode.InvalidArgument, 400);
+  },
+  close: () => {
+    throw new Ably.ErrorInfo('unable to close; hook is skipped', ErrorCode.InvalidArgument, 400);
+  },
+};
 
 /**
- * Create and memoize a {@link ClientTransport} across renders.
- * @param options - Configuration for the client transport.
- * @returns The memoized transport instance.
+ * Return value of {@link useClientTransport}.
+ *
+ * `transport` is always a valid object. When `skip` is `true`, when no provider was
+ * found, or when the provider's transport construction failed, `transport` is a stub
+ * that throws {@link Ably.ErrorInfo} on every access.
+ * Check `transportError` before using `transport` to avoid those throws.
  */
-export const useClientTransport = <TEvent, TMessage>(
-  options: ClientTransportOptions<TEvent, TMessage>,
-): ClientTransport<TEvent, TMessage> => {
-  const transportRef = useRef<ClientTransport<TEvent, TMessage> | null>(null);
+export interface ClientTransportHandle<TEvent, TMessage> {
+  /**
+   * The resolved transport.
+   *
+   * A throwing stub when `skip` is `true`, when no matching {@link TransportProvider}
+   * was found in the tree, or when transport construction failed.
+   */
+  transport: ClientTransport<TEvent, TMessage>;
+  /**
+   * Set when no matching {@link TransportProvider} was found, when transport
+   * construction failed, and `skip` is `false`.
+   * `undefined` when the transport resolved successfully or when `skip` is `true`.
+   */
+  transportError?: Ably.ErrorInfo | undefined;
+}
+
+/**
+ * Read a {@link ClientTransport} from the nearest {@link TransportProvider}.
+ *
+ * Returns `{ transport, transportError }`. When no provider is found or transport
+ * construction failed, `transportError` is set and `transport` is a stub that throws
+ * on access — the hook never throws during render.
+ *
+ * Pass `onError` to subscribe to post-construction transport errors
+ * (e.g. {@link ErrorCode.TransportSendFailed}, {@link ErrorCode.ChannelContinuityLost})
+ * without calling `transport.on('error', …)` manually. The subscription is
+ * created when the transport resolves and removed on unmount.
+ * @param props - Hook options.
+ * @param props.channelName - Look up a specific provider by channel name; omit for the nearest.
+ * @param props.skip - When `true`, return the stub transport immediately without reading context.
+ * @param props.onError - Called whenever the resolved transport emits an error event.
+ * @returns `{ transport, transportError }`.
+ */
+export const useClientTransport = <TEvent, TMessage>({
+  channelName,
+  skip,
+  onError,
+}: {
+  /**
+   * Channel name passed to the enclosing {@link TransportProvider}.
+   * Omit to use the nearest provider in the tree.
+   */
+  channelName?: string;
+  /**
+   * When `true`, skip context lookup and return a stub transport that throws on
+   * any access. Use when a condition (auth, feature flag) is not yet resolved.
+   */
+  skip?: boolean;
+  /**
+   * Called whenever the resolved transport emits an error event.
+   * The subscription is established once the transport resolves and
+   * automatically removed on unmount or when the transport changes.
+   */
+  onError?: (error: Ably.ErrorInfo) => void;
+} = {}): ClientTransportHandle<TEvent, TMessage> => {
+  const registry = useContext(TransportContext);
+  const nearestSlot = useContext(NearestTransportContext);
+  const errorCallbackRef = useRef(onError);
+  errorCallbackRef.current = onError;
+
+  // Compute the transport for the onError subscription *before* any conditional
+  // returns to satisfy React's rules of hooks (no hooks in branches).
+  // Erased generics — this ref is only used in the useEffect below.
+  const resolvedForEffect: ClientTransport<unknown, unknown> | undefined = skip
+    ? undefined
+    : channelName === undefined
+      ? nearestSlot?.transport
+      : registry[channelName]?.transport;
+
+  useEffect(() => {
+    if (!resolvedForEffect) return;
+    return resolvedForEffect.on('error', (errorInfo) => {
+      errorCallbackRef.current?.(errorInfo);
+    });
+  }, [resolvedForEffect]);
+
+  if (skip) {
+    return {
+      transport: SKIPPED_TRANSPORT as unknown as ClientTransport<TEvent, TMessage>,
+    };
+  }
+
+  if (channelName !== undefined) {
+    const slot = registry[channelName];
+    if (slot) {
+      if (slot.transport) {
+        // CAST: TransportContext stores transports with erased generics.
+        // The caller is responsible for using type parameters matching those of the TransportProvider.
+        return {
+          transport: slot.transport as unknown as ClientTransport<TEvent, TMessage>,
+        };
+      }
+      // Provider exists but construction failed.
+      return {
+        transport: SKIPPED_TRANSPORT as unknown as ClientTransport<TEvent, TMessage>,
+        transportError: slot.error,
+      };
+    }
+    return {
+      transport: SKIPPED_TRANSPORT as unknown as ClientTransport<TEvent, TMessage>,
+      transportError: new Ably.ErrorInfo(
+        `unable to use transport; no TransportProvider found for channelName "${channelName}"`,
+        ErrorCode.BadRequest,
+        400,
+      ),
+    };
+  }
 
-  if (transportRef.current === null) {
-    transportRef.current = createClientTransport(options);
+  if (nearestSlot) {
+    if (nearestSlot.transport) {
+      // CAST: NearestTransportContext stores transport with erased generics; types fixed at call site.
+      return {
+        transport: nearestSlot.transport as unknown as ClientTransport<TEvent, TMessage>,
+      };
+    }
+    // Nearest provider exists but construction failed.
+    return {
+      transport: SKIPPED_TRANSPORT as unknown as ClientTransport<TEvent, TMessage>,
+      transportError: nearestSlot.error,
+    };
   }
 
-  return transportRef.current;
+  return {
+    transport: SKIPPED_TRANSPORT as unknown as ClientTransport<TEvent, TMessage>,
+    transportError: new Ably.ErrorInfo(
+      'unable to use transport; no TransportProvider found in the tree',
+      ErrorCode.BadRequest,
+      400,
+    ),
+  };
 };

package/src/react/use-create-view.ts

@@ -0,0 +1,68 @@
+/**
+ * useCreateView — create an independent view with the same API as useView.
+ *
+ * Calls {@link ClientTransport.createView} to create an independent view over
+ * the same conversation tree, then subscribes to it exactly like
+ * {@link useView}. The view is closed automatically on unmount or when the
+ * transport reference changes.
+ *
+ * Pass `null` or omit `transport` to defer creation (e.g. when a split pane is
+ * collapsed). The returned handle has empty state until a transport is provided.
+ * When `transport` is omitted entirely, defaults to the nearest
+ * {@link TransportProvider}'s transport via context.
+ * Pass `skip: true` to bypass all context reads and view creation entirely.
+ */
+
+import { useContext, useEffect, useState } from 'react';
+
+import type { ClientTransport, View } from '../core/transport/types.js';
+import { NearestTransportContext } from './contexts/transport-context.js';
+import type { ViewHandle } from './use-view.js';
+import { useView } from './use-view.js';
+
+/**
+ * Create an independent {@link View} and subscribe to it.
+ * Returns the same {@link ViewHandle} as {@link useView}, but backed by a
+ * newly created view with its own branch selections and pagination state.
+ * The view is closed on unmount or when the transport changes.
+ * When `transport` is omitted, uses the nearest {@link TransportProvider}'s transport via context.
+ * @param props - Options including optional `transport`, `limit` for auto-load, and `skip`.
+ * @param props.transport - Transport to create a view from; defaults to the nearest provider.
+ * @param props.limit - Max older messages per page; when provided, auto-loads on mount.
+ * @param props.skip - When `true`, skip view creation and return an empty handle.
+ * @returns A {@link ViewHandle} with nodes, pagination, navigation, and write operations.
+ */
+export const useCreateView = <TEvent, TMessage>({
+  transport,
+  limit,
+  skip,
+}: {
+  /** The transport to create a view from, or null/undefined to use the nearest provider. */
+  transport?: ClientTransport<TEvent, TMessage> | null;
+  /** When provided, auto-loads the first page on mount. Omit for manual load. */
+  limit?: number;
+  /** When `true`, skip view creation and return an empty handle immediately. */
+  skip?: boolean;
+} = {}): ViewHandle<TEvent, TMessage> => {
+  const nearestSlot = useContext(NearestTransportContext);
+  // CAST: NearestTransportContext stores transport with erased generics; types fixed at call site.
+  const resolved = skip
+    ? undefined
+    : ((transport ?? nearestSlot?.transport) as ClientTransport<TEvent, TMessage> | null | undefined);
+
+  const [view, setView] = useState<View<TEvent, TMessage> | undefined>();
+
+  useEffect(() => {
+    if (!resolved) {
+      setView(undefined);
+      return;
+    }
+    const v = resolved.createView();
+    setView(v);
+    return () => {
+      v.close();
+    };
+  }, [resolved]);
+
+  return useView({ view, limit, skip });
+};

package/src/react/use-tree.ts

@@ -0,0 +1,53 @@
+/**
+ * useTree — stable structural query callbacks for a ClientTransport's tree.
+ *
+ * Returns a {@link TreeHandle} with methods to inspect the tree structure.
+ * These are thin `useCallback` wrappers around `transport.tree` — no local
+ * state or subscriptions. Branch navigation (select, getSelectedIndex) is
+ * on {@link ViewHandle} from {@link useView}.
+ *
+ * When `transport` is omitted, defaults to the nearest
+ * {@link TransportProvider}'s transport via context.
+ */
+
+import { useCallback, useContext } from 'react';
+
+import type { ClientTransport, MessageNode } from '../core/transport/types.js';
+import { NearestTransportContext } from './contexts/transport-context.js';
+
+/** Handle for querying the conversation tree structure. */
+export interface TreeHandle<TMessage> {
+  /** Get all sibling messages at a fork point, ordered chronologically by serial. */
+  getSiblings: (msgId: string) => TMessage[];
+  /** Whether a message has sibling alternatives (i.e., show navigation arrows). */
+  hasSiblings: (msgId: string) => boolean;
+  /** Get a node by msgId, or undefined if not found. */
+  getNode: (msgId: string) => MessageNode<TMessage> | undefined;
+}
+
+/**
+ * Provide stable structural query callbacks backed by the transport's tree.
+ * When `transport` is omitted, uses the nearest {@link TransportProvider}'s transport via context.
+ * @param props - Options including optional `transport`.
+ * @param props.transport - Transport to read tree structure from; defaults to the nearest provider.
+ * @returns A {@link TreeHandle} with structural query methods.
+ */
+export const useTree = <TEvent, TMessage>({
+  transport,
+}: { transport?: ClientTransport<TEvent, TMessage> } = {}): TreeHandle<TMessage> => {
+  const nearestSlot = useContext(NearestTransportContext);
+  // CAST: NearestTransportContext stores transport with erased generics; types fixed at call site.
+  const resolved = (transport ?? nearestSlot?.transport) as ClientTransport<TEvent, TMessage> | undefined;
+
+  const getSiblings = useCallback((msgId: string) => resolved?.tree.getSiblings(msgId) ?? [], [resolved]);
+
+  const hasSiblings = useCallback((msgId: string) => resolved?.tree.hasSiblings(msgId) ?? false, [resolved]);
+
+  const getNode = useCallback((msgId: string) => resolved?.tree.getNode(msgId), [resolved]);
+
+  return {
+    getSiblings,
+    hasSiblings,
+    getNode,
+  };
+};

package/src/react/use-view.ts

@@ -0,0 +1,233 @@
+/**
+ * useView — reactive paginated view of the conversation.
+ *
+ * Subscribes to view updates and exposes the visible nodes, branch navigation,
+ * write operations, pagination state, and a `loadOlder` callback. Pass `transport`
+ * to use a transport's default view, or `view` to subscribe to a specific
+ * {@link View} directly. When both are omitted, defaults to the nearest
+ * {@link TransportProvider}'s transport via context.
+ */
+
+import * as Ably from 'ably';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+
+import type { ActiveTurn, ClientTransport, MessageNode, SendOptions, View } from '../core/transport/types.js';
+import { ErrorCode } from '../errors.js';
+import { NearestTransportContext } from './contexts/transport-context.js';
+
+/** Options for configuring the view's initial load behavior. */
+export interface UseViewOptions {
+  /** Maximum number of older messages to load per page. Defaults to 100. */
+  limit?: number;
+}
+
+/** Handle for the paginated, branch-aware conversation view. */
+export interface ViewHandle<TEvent, TMessage> {
+  /** The visible domain messages along the selected branch. */
+  messages: TMessage[];
+  /** Visible conversation nodes along the selected branch. */
+  nodes: MessageNode<TMessage>[];
+  /** Whether there are older messages that can be revealed via `loadOlder`. */
+  hasOlder: boolean;
+  /** Whether a page load is currently in progress. */
+  loading: boolean;
+  /**
+   * Set when the most recent `loadOlder` call failed.
+   * Cleared automatically on the next successful load.
+   * `undefined` when no error has occurred or when `skip` is `true`.
+   */
+  loadError: Ably.ErrorInfo | undefined;
+  /**
+   * Load older messages into the view. No-op if already loading.
+   * On failure, `error` is set; on success, `error` is cleared.
+   */
+  loadOlder: () => Promise<void>;
+  /** Select a sibling at a fork point by index. Triggers a view update with the new branch. */
+  select: (msgId: string, index: number) => void;
+  /** Index of the currently selected sibling at a fork point. */
+  getSelectedIndex: (msgId: string) => number;
+  /** Get all sibling messages at a fork point, ordered chronologically by serial. */
+  getSiblings: (msgId: string) => TMessage[];
+  /** Whether a message has sibling alternatives (i.e., show navigation arrows). */
+  hasSiblings: (msgId: string) => boolean;
+  /** Get a node by msgId, or undefined if not found. */
+  getNode: (msgId: string) => MessageNode<TMessage> | undefined;
+  /** Send one or more messages in the context of this view's selected branch. */
+  send: (messages: TMessage | TMessage[], options?: SendOptions) => Promise<ActiveTurn<TEvent>>;
+  /** Regenerate an assistant message, using this view's branch for history. */
+  regenerate: (messageId: string, options?: SendOptions) => Promise<ActiveTurn<TEvent>>;
+  /** Edit a user message, forking from this view's branch. */
+  edit: (messageId: string, newMessages: TMessage | TMessage[], options?: SendOptions) => Promise<ActiveTurn<TEvent>>;
+  /** Amend an existing message and start a continuation turn (e.g. tool results). */
+  update: (msgId: string, events: TEvent[], options?: SendOptions) => Promise<ActiveTurn<TEvent>>;
+}
+
+/**
+ * Subscribe to a view and return the visible node list with pagination, navigation, and write operations.
+ *
+ * `view` takes priority over `transport`. When neither is provided, the nearest
+ * {@link TransportProvider}'s transport is used. When `limit` is provided, auto-loads
+ * the first page on mount (SWR-style).
+ * @param props - Options for selecting the view source and configuring auto-load.
+ * @param props.transport - Client transport whose default view to subscribe to; defaults to the nearest provider.
+ * @param props.view - A specific {@link View} to subscribe to directly. Takes priority over `transport`.
+ * @param props.limit - Max older messages per page; when provided, auto-loads on mount.
+ * @param props.skip - When `true`, skip all subscriptions and return an empty handle.
+ * @returns A {@link ViewHandle} with nodes, pagination state, navigation, write operations, and loadOlder.
+ */
+export const useView = <TEvent, TMessage>({
+  transport,
+  view,
+  limit,
+  skip,
+}: {
+  /** Client transport whose default view to subscribe to; defaults to the nearest provider when omitted. */
+  transport?: ClientTransport<TEvent, TMessage> | null;
+  /** A specific {@link View} to subscribe to directly. Takes priority over `transport`. */
+  view?: View<TEvent, TMessage> | null;
+  /** When provided, auto-loads the first page on mount. Omit for manual loading. */
+  limit?: number;
+  /** When `true`, skip all subscriptions and return an empty handle immediately. */
+  skip?: boolean;
+} = {}): ViewHandle<TEvent, TMessage> => {
+  const nearestSlot = useContext(NearestTransportContext);
+  // CAST: NearestTransportContext stores transport with erased generics; types fixed at call site.
+  const resolvedTransport = skip
+    ? undefined
+    : (transport ?? (nearestSlot?.transport as unknown as ClientTransport<TEvent, TMessage> | undefined));
+  const resolvedView = skip ? undefined : (view ?? resolvedTransport?.view);
+
+  const [nodes, setNodes] = useState<MessageNode<TMessage>[]>(() => resolvedView?.flattenNodes() ?? []);
+  const [hasOlder, setHasOlder] = useState(() => resolvedView?.hasOlder() ?? false);
+  const [loading, setLoading] = useState(false);
+  const [loadError, setLoadError] = useState<Ably.ErrorInfo | undefined>();
+  const loadingRef = useRef(false);
+
+  // Auto-load first page on mount when limit is provided (SWR-style).
+  // Fires once per view instance — subsequent changes to limit
+  // only affect manual loadOlder() calls, not the initial auto-load.
+  const autoLoad = limit !== undefined;
+  const autoLoadedRef = useRef(false);
+
+  // Subscribe to view updates
+  useEffect(() => {
+    if (!resolvedView) {
+      setNodes([]);
+      setHasOlder(false);
+      setLoadError(undefined);
+      return;
+    }
+
+    // Reset auto-load flag so the new view gets its first page loaded
+    autoLoadedRef.current = false;
+
+    // Sync initial state
+    setNodes(resolvedView.flattenNodes());
+    setHasOlder(resolvedView.hasOlder());
+    setLoadError(undefined);
+
+    const unsub = resolvedView.on('update', () => {
+      setNodes(resolvedView.flattenNodes());
+      setHasOlder(resolvedView.hasOlder());
+    });
+    return unsub;
+  }, [resolvedView]);
+
+  const loadOlder = useCallback(async () => {
+    if (!resolvedView || loadingRef.current) return;
+    loadingRef.current = true;
+    setLoading(true);
+    try {
+      await resolvedView.loadOlder(limit);
+      setLoadError(undefined);
+    } catch (error) {
+      if (error instanceof Ably.ErrorInfo) {
+        setLoadError(error);
+      } else {
+        setLoadError(new Ably.ErrorInfo('Unknown error loading older messages', ErrorCode.BadRequest, 400));
+      }
+    } finally {
+      loadingRef.current = false;
+      setLoading(false);
+    }
+  }, [resolvedView, limit]);
+
+  useEffect(() => {
+    if (!autoLoad || autoLoadedRef.current || !resolvedView) return;
+    autoLoadedRef.current = true;
+    void loadOlder();
+  }, [autoLoad, resolvedView, loadOlder]);
+
+  const messages = useMemo(() => nodes.map((n) => n.message), [nodes]);
+
+  // Branch navigation callbacks
+  const select = useCallback(
+    (msgId: string, index: number) => {
+      resolvedView?.select(msgId, index);
+    },
+    [resolvedView],
+  );
+
+  const getSelectedIndex = useCallback((msgId: string) => resolvedView?.getSelectedIndex(msgId) ?? 0, [resolvedView]);
+
+  const getSiblings = useCallback((msgId: string) => resolvedView?.getSiblings(msgId) ?? [], [resolvedView]);
+
+  const hasSiblings = useCallback((msgId: string) => resolvedView?.hasSiblings(msgId) ?? false, [resolvedView]);
+
+  const getNode = useCallback((msgId: string) => resolvedView?.getNode(msgId), [resolvedView]);
+
+  // Write operation callbacks
+  const send = useCallback(
+    async (msgs: TMessage | TMessage[], opts?: SendOptions) => {
+      if (!resolvedView)
+        throw new Ably.ErrorInfo('unable to send; view is not available', ErrorCode.InvalidArgument, 400);
+      return resolvedView.send(msgs, opts);
+    },
+    [resolvedView],
+  );
+
+  const regenerate = useCallback(
+    async (messageId: string, opts?: SendOptions) => {
+      if (!resolvedView)
+        throw new Ably.ErrorInfo('unable to regenerate; view is not available', ErrorCode.InvalidArgument, 400);
+      return resolvedView.regenerate(messageId, opts);
+    },
+    [resolvedView],
+  );
+
+  const edit = useCallback(
+    async (messageId: string, newMessages: TMessage | TMessage[], opts?: SendOptions) => {
+      if (!resolvedView)
+        throw new Ably.ErrorInfo('unable to edit; view is not available', ErrorCode.InvalidArgument, 400);
+      return resolvedView.edit(messageId, newMessages, opts);
+    },
+    [resolvedView],
+  );
+
+  const update = useCallback(
+    async (msgId: string, events: TEvent[], opts?: SendOptions) => {
+      if (!resolvedView)
+        throw new Ably.ErrorInfo('unable to update; view is not available', ErrorCode.InvalidArgument, 400);
+      return resolvedView.update(msgId, events, opts);
+    },
+    [resolvedView],
+  );
+
+  return {
+    messages,
+    nodes,
+    hasOlder,
+    loading,
+    loadError,
+    loadOlder,
+    select,
+    getSelectedIndex,
+    getSiblings,
+    hasSiblings,
+    getNode,
+    send,
+    regenerate,
+    edit,
+    update,
+  };
+};

package/src/react/vite.config.ts

@@ -19,11 +19,14 @@ export default defineConfig({
       formats: ['es', 'umd'],
     },
     rollupOptions: {
-      external: ['ably', 'react'],
+      external: ['ably', 'ably/react', 'react', 'react/jsx-runtime', 'react/jsx-dev-runtime'],
       output: {
         globals: {
           ably: 'Ably',
+          'ably/react': 'AblyReact',
           react: 'React',
+          'react/jsx-runtime': 'ReactJsxRuntime',
+          'react/jsx-dev-runtime': 'ReactJsxDevRuntime',
         },
       },
     },