@chatbotkit/react 1.18.4 → 1.19.0

package/dist/cjs/utils/string.cjs

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.replaceWithCoordinates = exports.replaceBetween = exports.getRandomId = void 0;
+exports.getRandomId = getRandomId;
+exports.replaceBetween = replaceBetween;
+exports.replaceWithCoordinates = replaceWithCoordinates;
 function getRandomId(prefix) {
     return `${prefix || ''}${Math.random().toString(32).slice(2)}`;
 }
-exports.getRandomId = getRandomId;
 function replaceBetween(input, begin, end, replacement) {
     return input.substring(0, begin) + replacement + input.substring(end);
 }
-exports.replaceBetween = replaceBetween;
 function replaceWithCoordinates(input, replacements) {
     const output = [];
     let currentIndex = 0;
@@ -37,4 +37,3 @@ function replaceWithCoordinates(input, replacements) {
     output.push(input);
     return output;
 }
-exports.replaceWithCoordinates = replaceWithCoordinates;

package/dist/cjs/utils/string.d.ts

@@ -1,8 +1,8 @@
 export function getRandomId(prefix?: string): string;
 export function replaceBetween(input: string, begin: number, end: number, replacement: string): string;
-export function replaceWithCoordinates(input: string, replacements: [string, string][]): (string | {
+export function replaceWithCoordinates(input: string, replacements: [string, string][]): ({
     begin: number;
     end: number;
     input: string;
     output: string;
-})[];
+} | string)[];

package/dist/esm/actions/complete.d.ts

@@ -1,7 +1,7 @@
-export function streamComplete(options: Options): import('../utils/stream.js').StreamResult;
+export function streamComplete(options: Options): import("../utils/stream.js").StreamResult;
 export default complete;
-export type ReactElement = import('react').ReactElement;
-export type ReactNode = import('react').ReactNode;
+export type ReactElement = import("react").ReactElement;
+export type ReactNode = import("react").ReactNode;
 export type Item = {
     type: string;
     data: object;
@@ -15,12 +15,12 @@ export type ValidatingParametersSchema = {
     }>;
 };
 export type InputMessage = {
-    type: 'bot' | 'user' | 'reasoning' | 'context' | 'instruction' | 'backstory' | 'activity';
+    type: "bot" | "user" | "reasoning" | "context" | "instruction" | "backstory" | "activity";
     text: string;
     meta?: Record<string, any>;
 };
 export type OutputMessage = {
-    type: 'bot' | 'activity';
+    type: "bot" | "activity";
     text: string;
     meta?: Record<string, any>;
 };
@@ -47,15 +47,15 @@ export type InputFunction = {
     name: string;
     description: string;
     parameters: BasicParametersSchema | ValidatingParametersSchema;
-    handler?: ((args: HandlerArgs, options: HandlerOptions) => Promise<HandlerResult>) | undefined;
+    handler?: (args: HandlerArgs, options: HandlerOptions) => Promise<HandlerResult>;
 };
 export type OnItemHandler = (arg0: Item) => any;
 export type OnStartHandler = () => any;
 export type OnFinishHandler = (arg0: {
     messages: Message[];
 }) => any;
-export type Options = Omit<import('@chatbotkit/sdk/conversation/v1.js').ConversationCompleteRequest, 'messages' | 'functions'> & {
-    client: import('@chatbotkit/sdk').ConversationClient;
+export type Options = Omit<import("@chatbotkit/sdk/conversation/v1.js").ConversationCompleteRequest, "messages" | "functions"> & {
+    client: import("@chatbotkit/sdk").ConversationClient;
     messages: InputMessage[];
     functions?: (InputFunction | (() => InputFunction | Promise<InputFunction>))[];
     maxRecusion?: number;

package/dist/esm/components/AutoScroller.d.ts

@@ -1,9 +1,9 @@
 export function AutoScroller(props?: {
+    anchor?: "top" | "bottom";
+    childList?: boolean;
+    subtree?: boolean;
+    block?: "start" | "end";
+    delay?: number;
     [name: string]: any;
-    anchor?: "bottom" | "top" | undefined;
-    childList?: boolean | undefined;
-    subtree?: boolean | undefined;
-    block?: "end" | "start" | undefined;
-    delay?: number | undefined;
-} | undefined): import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export default AutoScroller;

package/dist/esm/components/AutoTextarea.d.ts

@@ -1,6 +1,6 @@
 export function AutoTextarea(props?: {
     [name: string]: any;
-} | undefined, forwardedRef?: React.Ref<HTMLTextAreaElement> | undefined): import("react/jsx-runtime").JSX.Element;
+}, forwardedRef?: React.Ref<HTMLTextAreaElement>): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.ForwardRefExoticComponent<Omit<{
     [name: string]: any;
 }, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/esm/components/ChatInput.d.ts

@@ -1,6 +1,6 @@
 export function ChatInput(props: {
-    [name: string]: any;
     onSubmit: () => void;
-    modifierKey?: boolean | undefined;
+    modifierKey?: boolean;
+    [name: string]: any;
 }): import("react/jsx-runtime").JSX.Element;
 export default ChatInput;

package/dist/esm/components/ChatMessage.d.ts

@@ -1,3 +1,3 @@
 export function ChatMessage(props: {
     text: string;
-} & Pick<import("../../node_modules/react-markdown/lib/index.js").Options, "components" | "rehypePlugins" | "remarkPlugins"> & import("react").HTMLProps<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+} & Pick<import("react-markdown").Options, "remarkPlugins" | "rehypePlugins" | "components"> & import("react").HTMLProps<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ConversationManager.d.ts

@@ -1,5 +1,5 @@
-export function ConversationManager({ children, ...options }: import('../hooks/useConversationManager.js').UseConversationManagerOptions & {
-    children: import('react').ReactNode;
-}): import('react').ReactElement;
+export function ConversationManager({ children, ...options }: import("../hooks/useConversationManager.js").UseConversationManagerOptions & {
+    children: import("react").ReactNode;
+}): import("react").ReactElement;
 export const ConversationContext: import("react").Context<import("../hooks/useConversationManager.js").UseConversationManagerResult>;
 export default ConversationManager;

package/dist/esm/hooks/useConversationManager.d.ts

@@ -1,6 +1,6 @@
 export function useConversationManager({ interactionMaxMessages, ...conversationManagerRemoteOptions }: UseConversationManagerOptions): UseConversationManagerResult;
 export default useConversationManager;
-export type Message = import('@chatbotkit/sdk/conversation/v1').Message;
+export type Message = import("@chatbotkit/sdk/conversation/v1").Message;
 export type SimpleMessage = Message & {
     id: string;
     createdAt: Date;
@@ -8,9 +8,9 @@ export type SimpleMessage = Message & {
 export type ComplexMessage = Message & {
     id: string;
     createdAt: Date;
-    children?: import('react').ReactNode;
+    children?: import("react").ReactNode;
 };
-export type UseConversationManagerRemoteOptions = import('./useConversationManagerRemote.js').UseConversationManagerRemoteOptions;
+export type UseConversationManagerRemoteOptions = import("./useConversationManagerRemote.js").UseConversationManagerRemoteOptions;
 export type UseConversationManagerOptions = UseConversationManagerRemoteOptions & {
     interactionMaxMessages?: number;
 };

package/dist/esm/hooks/useConversationManagerRemote.d.ts

@@ -1,7 +1,7 @@
 export function useConversationManagerRemote({ client: _client, endpoint, token, conversationId, stateful, botId, backstory, model, datasetId, skillsetId, privacy, moderation, ...rest }: UseConversationManagerRemoteOptions): UseConversationManagerRemoteResult;
 export default useConversationManagerRemote;
-export type Message = import('@chatbotkit/sdk/conversation/v1').Message;
-export type Model = import('@chatbotkit/sdk/model/v1').Model;
+export type Message = import("@chatbotkit/sdk/conversation/v1").Message;
+export type Model = import("@chatbotkit/sdk/model/v1").Model;
 export type EndpointURL = string;
 export type EndpointFunction = (options: any) => AsyncGenerator<any>;
 export type UseConversationManagerRemoteOptions = {

package/dist/esm/hooks/useConversationManagerState.d.ts

@@ -1,9 +1,9 @@
-export function useConversationManagerState(state?: Partial<import("./useConversationManagerStateReducer.js").State> | undefined): [State, StateFunctions];
+export function useConversationManagerState(state?: Partial<State>): [State, StateFunctions];
 export default useConversationManagerState;
-export type State = import('./useConversationManagerStateReducer.js').State;
+export type State = import("./useConversationManagerStateReducer.js").State;
 export type StateFunctions = {
-    setThinking: (thinking: import('./useConversationManagerStateReducer.js').SetThinkingAction['data']['thinking']) => void;
-    setTyping: (typing: import('./useConversationManagerStateReducer.js').SetTypingAction['data']['typing']) => void;
-    appendText: (text: import('./useConversationManagerStateReducer.js').AppendTextAction['data']['text']) => void;
-    appendMessage: (message: import('./useConversationManagerStateReducer.js').AppendMessageAction['data']['message']) => void;
+    setThinking: (thinking: import("./useConversationManagerStateReducer.js").SetThinkingAction["data"]["thinking"]) => void;
+    setTyping: (typing: import("./useConversationManagerStateReducer.js").SetTypingAction["data"]["typing"]) => void;
+    appendText: (text: import("./useConversationManagerStateReducer.js").AppendTextAction["data"]["text"]) => void;
+    appendMessage: (message: import("./useConversationManagerStateReducer.js").AppendMessageAction["data"]["message"]) => void;
 };

package/dist/esm/hooks/useConversationManagerStateReducer.d.ts

@@ -1,8 +1,8 @@
 export function conversationManagerStateReducer(state: State, action: Action): State;
-export function conversationManagerStateInitial(state?: Partial<State> | undefined): State;
-export function useConversationManagerStateReducer(state?: Partial<State> | undefined): [State, import('react').Dispatch<Action>];
+export function conversationManagerStateInitial(state?: Partial<State>): State;
+export function useConversationManagerStateReducer(state?: Partial<State>): [State, import("react").Dispatch<Action>];
 export default useConversationManagerStateReducer;
-export type Message = import('@chatbotkit/sdk/conversation/v1').Message & {
+export type Message = import("@chatbotkit/sdk/conversation/v1").Message & {
     id: string;
     createdAt: Date;
 };
@@ -13,27 +13,27 @@ export type State = {
     messages: Message[];
 };
 export type SetThinkingAction = {
-    type: 'setThinking';
+    type: "setThinking";
     data: {
         thinking: boolean;
     };
 };
 export type SetTypingAction = {
-    type: 'setTyping';
+    type: "setTyping";
     data: {
         typing: boolean;
     };
 };
 export type AppendTextAction = {
-    type: 'appendText';
+    type: "appendText";
     data: {
         text: string;
     };
 };
 export type AppendMessageAction = {
-    type: 'appendMessage';
+    type: "appendMessage";
     data: {
-        message: Omit<Message, 'id' | 'createdAt'> & {
+        message: Omit<Message, "id" | "createdAt"> & {
             id?: string;
             createdAt?: Date;
         };

package/dist/esm/hooks/useDOMQuerySelector.d.ts

@@ -1,4 +1,5 @@
-export function useDOMQuerySelector<T>(selector: string, options?: {
-    waitForElements?: boolean | undefined;
-} | undefined): T[];
-export default useDOMQuerySelector;
+export default function useDOMQuerySelector(selector: string | null | undefined, options?: {
+    waitForElements?: boolean;
+    disconnectOnFirstMatch?: boolean;
+    parent?: ParentNode;
+}, deps?: any[]): Element[];

package/dist/esm/hooks/useDOMQuerySelector.js

@@ -1,25 +1,46 @@
 import { useEffect, useState } from 'react';
-export function useDOMQuerySelector(selector, options) {
-    const { waitForElements = false } = options || {};
+import useDeps from './useDeps.js';
+export default function useDOMQuerySelector(selector, options, deps) {
+    const { waitForElements = false, disconnectOnFirstMatch = true, parent = typeof document !== 'undefined'
+        ? document.documentElement
+        : undefined, } = options || {};
+    const thisDeps = useDeps(deps);
     const [elements, setElements] = useState(([]));
     useEffect(() => {
-        const elements = document.querySelectorAll(selector);
-        setElements((Array.from(elements)));
-        if (!elements.length && waitForElements) {
+        if (!selector) {
+            return;
+        }
+        if (!parent) {
+            return;
+        }
+        const initialElements = parent.querySelectorAll(selector);
+        setElements(Array.from(initialElements));
+        if (!initialElements.length && waitForElements) {
             const observer = new MutationObserver(() => {
-                const elements = document.querySelectorAll(selector);
+                const elements = parent.querySelectorAll(selector);
                 if (elements.length) {
-                    observer.disconnect();
+                    setElements(Array.from(elements));
+                    if (disconnectOnFirstMatch) {
+                        try {
+                            observer.disconnect();
+                        }
+                        catch {
+                        }
+                    }
                 }
-                setElements((Array.from(elements)));
             });
-            observer.observe(document.body, {
+            observer.observe(parent, {
                 childList: true,
                 subtree: true,
             });
-            return () => observer.disconnect();
+            return () => {
+                try {
+                    observer.disconnect();
+                }
+                catch {
+                }
+            };
         }
-    }, [selector, waitForElements]);
+    }, [selector, waitForElements, disconnectOnFirstMatch, parent, thisDeps]);
     return elements;
 }
-export default useDOMQuerySelector;

package/dist/esm/hooks/useDeps.d.ts

@@ -0,0 +1 @@
+export default function useDeps(deps?: any[]): number;

package/dist/esm/hooks/useDeps.js

@@ -0,0 +1,8 @@
+import { useEffect, useState } from 'react';
+export default function useDeps(deps = []) {
+    const [depsId, setDepsId] = useState(0);
+    useEffect(() => {
+        setDepsId((prevId) => prevId + 1);
+    }, deps);
+    return depsId;
+}

package/dist/esm/hooks/useWidgetInstance.d.ts

@@ -1,4 +1,4 @@
-export function useWidgetInstance(): ChatBotKitWidgetInstance | null;
+export function useWidgetInstance(selector?: string, deps?: any[]): ChatBotKitWidgetInstance | null;
 export default useWidgetInstance;
 export type WidgetMessage = {
     id: string;
@@ -21,7 +21,7 @@ export type WidgetFunctionWithHandler = WidgetFunctionBase & {
     handler: (args: any) => any;
 };
 export type WidgetFunction = WidgetFunctionWithResult | WidgetFunctionWithHandler;
-export type WidgteRestartConversationFn = () => void;
+export type WidgetRestartConversationFn = () => void;
 export type WidgetSendMessageFn = (options: string | (({
     message: string;
 } | {
@@ -36,6 +36,6 @@ export type ChatBotKitWidgetInstance = HTMLElement & {
     messages?: WidgetMessage[] | null;
     notifications?: Record<string, WidgetNotification> | null;
     functions?: Record<string, WidgetFunction> | null;
-    restartConversation: WidgteRestartConversationFn;
+    restartConversation: WidgetRestartConversationFn;
     sendMessage: WidgetSendMessageFn;
 };

package/dist/esm/hooks/useWidgetInstance.js

@@ -1,8 +1,27 @@
 'use client';
 import { useEffect, useState } from 'react';
-export function useWidgetInstance() {
-    const [instance, setInstance] = useState(null);
+import useDOMQuerySelector from './useDOMQuerySelector.js';
+export function useWidgetInstance(selector, deps) {
+    const [instance, setInstance] = useState((null));
+    const [element] = useDOMQuerySelector(selector, { waitForElements: true }, deps);
     useEffect(() => {
+        if (element) {
+            const widgetElement = (element);
+            if (widgetElement.readyPromise) {
+                widgetElement.readyPromise.then(() => setInstance(widgetElement));
+                return;
+            }
+            {
+                const onReady = () => {
+                    widgetElement.removeEventListener('ready', onReady);
+                    setInstance(widgetElement);
+                };
+                widgetElement.addEventListener('ready', onReady);
+                return () => {
+                    widgetElement?.removeEventListener?.('ready', onReady);
+                };
+            }
+        }
         if (window.chatbotkitWidget) {
             window.chatbotkitWidget.instancePromise.then((instance) => setInstance(instance));
             return;
@@ -14,7 +33,7 @@ export function useWidgetInstance() {
         return () => {
             window.removeEventListener('chatbotkitWidgetInit', onInit);
         };
-    }, []);
+    }, [element]);
     return instance;
 }
 export default useWidgetInstance;

package/dist/esm/hooks/useWidgetInstanceFunctions.d.ts

@@ -1,5 +1,6 @@
 export function useWidgetInstanceFunctions(params?: {
-    functions?: Record<string, import("./useWidgetInstance.js").WidgetFunction> | null | undefined;
-} | undefined): void;
+    selector?: string;
+    functions?: Record<string, WidgetFunction> | null;
+}, deps?: any[]): import("./useWidgetInstance.js").ChatBotKitWidgetInstance | null;
 export default useWidgetInstanceFunctions;
-export type WidgetFunction = import('./useWidgetInstance.js').WidgetFunction;
+export type WidgetFunction = import("./useWidgetInstance.js").WidgetFunction;

package/dist/esm/hooks/useWidgetInstanceFunctions.js

@@ -1,8 +1,8 @@
 'use client';
 import { useEffect } from 'react';
 import useWidgetInstance from './useWidgetInstance.js';
-export function useWidgetInstanceFunctions(params) {
-    const instance = useWidgetInstance();
+export function useWidgetInstanceFunctions(params, deps) {
+    const instance = useWidgetInstance(params?.selector, deps);
     useEffect(() => {
         if (!instance) {
             return;
@@ -14,5 +14,6 @@ export function useWidgetInstanceFunctions(params) {
             ...params?.functions,
         };
     }, [params?.functions, instance]);
+    return instance;
 }
 export default useWidgetInstanceFunctions;

package/dist/esm/hooks/useWidgetInstanceNotifications.d.ts

@@ -1,5 +1,6 @@
 export function useWidgetInstanceNotifications(params?: {
-    notifications?: Record<string, import("./useWidgetInstance.js").WidgetNotification> | null | undefined;
-} | undefined): void;
+    selector?: string;
+    notifications?: Record<string, WidgetNotification> | null;
+}, deps?: any[]): import("./useWidgetInstance.js").ChatBotKitWidgetInstance | null;
 export default useWidgetInstanceNotifications;
-export type WidgetNotification = import('./useWidgetInstance.js').WidgetNotification;
+export type WidgetNotification = import("./useWidgetInstance.js").WidgetNotification;

package/dist/esm/hooks/useWidgetInstanceNotifications.js

@@ -1,8 +1,8 @@
 'use client';
 import { useEffect } from 'react';
 import useWidgetInstance from './useWidgetInstance.js';
-export function useWidgetInstanceNotifications(params) {
-    const instance = useWidgetInstance();
+export function useWidgetInstanceNotifications(params, deps) {
+    const instance = useWidgetInstance(params?.selector, deps);
     useEffect(() => {
         if (!instance) {
             return;
@@ -14,5 +14,6 @@ export function useWidgetInstanceNotifications(params) {
             ...params?.notifications,
         };
     }, [params?.notifications, instance]);
+    return instance;
 }
 export default useWidgetInstanceNotifications;

package/dist/esm/utils/stream.d.ts

@@ -1,5 +1,5 @@
-export function stream(source: StreamSource, options?: Handlers | undefined): StreamResult;
-export function consume(source: ConsumeSource, options?: Handlers | undefined): ConsumeResult;
+export function stream(source: StreamSource, options?: StreamOptions): StreamResult;
+export function consume(source: ConsumeSource, options?: ConsumeOptions): ConsumeResult;
 export class StreamError extends Error {
     constructor(message: string, code: string);
     public code: string;

package/dist/esm/utils/stream.js

@@ -41,7 +41,11 @@ function consumeIt(source) {
             return {
                 current: source,
                 async next() {
-                    const { iteratorResult, next, error } = await this.current;
+                    const result = await this.current;
+                    if (!result || typeof result !== 'object') {
+                        throw new StreamError('Invalid stream result', 'INVALID_STREAM_RESULT');
+                    }
+                    const { iteratorResult, next, error } = result;
                     if (error) {
                         if (typeof error === 'object') {
                             throw new StreamError(error.message, error.code);

package/dist/esm/utils/string.d.ts

@@ -1,8 +1,8 @@
-export function getRandomId(prefix?: string | undefined): string;
+export function getRandomId(prefix?: string): string;
 export function replaceBetween(input: string, begin: number, end: number, replacement: string): string;
-export function replaceWithCoordinates(input: string, replacements: [string, string][]): (string | {
+export function replaceWithCoordinates(input: string, replacements: [string, string][]): ({
     begin: number;
     end: number;
     input: string;
     output: string;
-})[];
+} | string)[];