@dropby/react 0.4.0

package/dist/index.d.ts

@@ -0,0 +1,124 @@
+import { ReactNode } from "react";
+import { AsksActions, AsksActions as AsksActions$1, AsksState, AsyncResource, BootstrapState, CapabilityState, ChatActions, ChatActions as ChatActions$1, ChatHistoryLoadState, ChatState, ChatThread, ChatThreadActions, ChatThreadActions as ChatThreadActions$1, ChatThreadsCollection, ChatUnread, ConnectionState, DropBy, DropById, DropByOptions, FlagValue, Idea, IdeasActions, IdeasActions as IdeasActions$1, IdeasState, PagedCollection, PendingAsksCollection, ResolvedFeatureConfig } from "@dropby/browser";
+type OwnsCoreProps = {
+  /** Options for the instance the provider creates, starts and destroys. Read once. */
+  options: DropByOptions;
+  /** Pass `options` or `dropby`, not both. */
+  dropby?: undefined;
+  /** The part of your app that uses DropBy. */
+  children: ReactNode;
+};
+type ExternalCoreProps = {
+  /** An instance you created; you start and destroy it. */
+  dropby: DropBy;
+  /** Pass `options` or `dropby`, not both. */
+  options?: undefined;
+  /** The part of your app that uses DropBy. */
+  children: ReactNode;
+};
+/**
+ * Props for `DropByProvider`: the `options` to create an instance from, or an
+ * instance of your own.
+ */
+type DropByProviderProps = OwnsCoreProps | ExternalCoreProps;
+/**
+ * Makes a DropBy instance available to the hooks and components below it. With
+ * `options` it creates the instance, starts it once mounted and destroys it on
+ * unmount; give it a `key` of the signed-in user's and account's ids so a new
+ * identity gets a new instance. With `dropby` it only provides yours.
+ */
+export declare function DropByProvider(props: DropByProviderProps): ReactNode;
+/** The DropBy instance from the nearest `DropByProvider`. Throws outside one. */
+export declare function useDropBy(): DropBy;
+/** The instance's live state, from `useDropByState`. */
+interface UseDropByStateResult {
+  /** How live updates arrive. */
+  connection: ConnectionState;
+  /** What the session may do, with your team's widget settings applied. */
+  capabilities: CapabilityState;
+  /** The signed-in session, with its feature flags. */
+  bootstrap: BootstrapState;
+}
+/** The instance's connection, capabilities and session, re-rendering when any of them changes. */
+export declare function useDropByState(): UseDropByStateResult;
+/** What `useChatThreads` returns. */
+interface UseChatThreadsResult<Data> {
+  /** The conversation list, or what your selector picked from chat's state. */
+  data: Data;
+  /** Chat's actions; the same object on every render. */
+  actions: ChatActions$1;
+}
+/**
+ * The conversation list and chat's actions. Load it with
+ * `actions.listThreads()`. Pass a selector to read another part of chat's
+ * state; the component then re-renders only when that part changes, compared
+ * with `isEqual` when you give one.
+ */
+export declare function useChatThreads(): UseChatThreadsResult<ChatThreadsCollection>;
+export declare function useChatThreads<Selected>(selector: (state: ChatState) => Selected, isEqual?: (a: Selected, b: Selected) => boolean): UseChatThreadsResult<Selected>;
+/** What `useChatThread` returns. */
+interface UseChatThreadResult<Data> {
+  /** The conversation as loaded, or what your selector picked from chat's state. */
+  data: Data;
+  /** The load of older messages, once one started. */
+  olderMessages: ChatHistoryLoadState | undefined;
+  /** The load of the newest messages, once one started. */
+  latestMessages: ChatHistoryLoadState | undefined;
+  /** The conversation's actions, its id bound; the same object while the id is. */
+  actions: ChatThreadActions$1;
+}
+/**
+ * One conversation and its actions. Load it with `actions.open()`. While the
+ * component is mounted its live updates are applied. Pass a selector to read
+ * another part of chat's state.
+ */
+export declare function useChatThread(id: DropById<"thr_">): UseChatThreadResult<AsyncResource<ChatThread> | undefined>;
+export declare function useChatThread<Selected>(id: DropById<"thr_">, selector: (state: ChatState) => Selected, isEqual?: (a: Selected, b: Selected) => boolean): UseChatThreadResult<Selected>;
+/**
+ * Unread replies across the user's conversations, and chat's actions. Load with
+ * `actions.refreshUnread()`.
+ */
+export declare function useChatUnread(): {
+  data: AsyncResource<ChatUnread>;
+  actions: ChatActions$1;
+};
+/** What `useIdeas` returns. */
+interface UseIdeasResult<Data> {
+  /** The ideas list, or what your selector picked from the board's state. */
+  data: Data;
+  /** The board's actions; the same object on every render. */
+  actions: IdeasActions$1;
+}
+/**
+ * The ideas list and the board's actions. It loads nothing itself: list with
+ * `actions.list({ view })`. Pass a selector to read another part of the board's
+ * state, such as the idea opened.
+ */
+export declare function useIdeas(): UseIdeasResult<PagedCollection<Idea>>;
+export declare function useIdeas<Selected>(selector: (state: IdeasState) => Selected, isEqual?: (a: Selected, b: Selected) => boolean): UseIdeasResult<Selected>;
+/** What `usePendingAsks` returns. */
+interface UsePendingAsksResult<Data> {
+  /** The asks waiting for the user, or what your selector picked from the asks state. */
+  data: Data;
+  /** The asks' actions; the same object on every render. */
+  actions: AsksActions$1;
+}
+/**
+ * The asks waiting for the user, and their actions. Load them with
+ * `actions.listPending()`. Pass a selector to read another part of the asks
+ * state.
+ */
+export declare function usePendingAsks(): UsePendingAsksResult<PendingAsksCollection>;
+export declare function usePendingAsks<Selected>(selector: (state: AsksState) => Selected, isEqual?: (a: Selected, b: Selected) => boolean): UsePendingAsksResult<Selected>;
+/**
+ * Every feature flag for the signed-in user, empty until the session has loaded.
+ * Re-renders when any flag changes, and after a session renewal even when none
+ * did; for one flag prefer `useFeatureFlag`.
+ */
+export declare function useFeatureConfig(): ResolvedFeatureConfig;
+/**
+ * One feature flag's value; undefined for a flag that does not exist or until the
+ * session has loaded. Re-renders only when this flag's value changes.
+ */
+export declare function useFeatureFlag(key: string): FlagValue | undefined;
+export type { AsksActions, ChatActions, ChatThreadActions, DropByProviderProps, IdeasActions, UseChatThreadResult, UseChatThreadsResult, UseDropByStateResult, UseIdeasResult, UsePendingAsksResult };

package/dist/index.js

@@ -0,0 +1,47 @@
+"use client";
+import { c as DropByContext, n as useDropByState, t as useDropBy } from "./chunks/use-dropby-BW4iKpiA.js";
+import { a as useChatThread, i as useIdeas, n as useFeatureFlag, o as useChatThreads, r as usePendingAsks, s as useChatUnread, t as useFeatureConfig } from "./chunks/use-feature-gByQaSp1.js";
+import { useEffect, useReducer, useRef } from "react";
+import { createDropBy } from "@dropby/browser";
+import { jsx } from "react/jsx-runtime";
+function DropByProvider(props) {
+	if (props.dropby !== void 0) return /* @__PURE__ */ jsx(ExternalCoreProvider, {
+		core: props.dropby,
+		children: props.children
+	});
+	return /* @__PURE__ */ jsx(OwnedCoreProvider, {
+		options: props.options,
+		children: props.children
+	});
+}
+function ExternalCoreProvider({ core, children }) {
+	return /* @__PURE__ */ jsx(DropByContext.Provider, {
+		value: core,
+		children
+	});
+}
+function OwnedCoreProvider({ options, children }) {
+	const [, forceRender] = useReducer((tick) => tick + 1, 0);
+	const ref = useRef(null);
+	if (ref.current === null || ref.current.destroyed) ref.current = {
+		core: createDropBy(options),
+		destroyed: false
+	};
+	const entry = ref.current;
+	useEffect(() => {
+		if (entry.destroyed) {
+			forceRender();
+			return;
+		}
+		entry.core.start();
+		return () => {
+			entry.destroyed = true;
+			entry.core.destroy();
+		};
+	}, [entry]);
+	return /* @__PURE__ */ jsx(DropByContext.Provider, {
+		value: entry.core,
+		children
+	});
+}
+export { DropByProvider, useChatThread, useChatThreads, useChatUnread, useDropBy, useDropByState, useFeatureConfig, useFeatureFlag, useIdeas, usePendingAsks };

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@dropby/react",
+  "version": "0.4.0",
+  "private": false,
+  "description": "React bindings for DropBy: a provider, hooks and accessible components for chat, ideas and asks.",
+  "keywords": [
+    "dropby",
+    "react",
+    "customer-support",
+    "chat",
+    "feedback",
+    "feature-requests",
+    "surveys",
+    "sdk"
+  ],
+  "license": "MIT",
+  "author": "Simpllyf Software",
+  "homepage": "https://dropby.chat",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js",
+      "default": "./dist/components/index.js"
+    },
+    "./components/chat-attachments": {
+      "types": "./dist/components/chat-attachments/index.d.ts",
+      "import": "./dist/components/chat-attachments/index.js",
+      "default": "./dist/components/chat-attachments/index.js"
+    }
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@dropby/browser": "0.4.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "714b80e34a96081832e3c6e66ede69b925c9b851",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js"
+}