@chatbotkit/react 1.5.3 → 1.7.0

package/dist/cjs/actions/complete.cjs

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.streamComplete = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const stream_js_1 = require("../utils/stream.cjs");
+async function* complete({ client, messages, functions, maxRecusion = 3, ...options }) {
+    var _a, _b, _c, _d;
+    if (maxRecusion <= 0) {
+        return;
+    }
+    messages = messages.slice(0);
+    const it = client
+        .complete(null, {
+        ...options,
+        messages: messages.map(({ type, text, meta }) => {
+            return {
+                type,
+                text,
+                meta,
+            };
+        }),
+        functions: functions === null || functions === void 0 ? void 0 : functions.map(({ name, description, parameters }) => {
+            return {
+                name,
+                description,
+                parameters,
+            };
+        }),
+    })
+        .stream();
+    for await (const item of it) {
+        yield item;
+        const { type, data } = item;
+        if (type === 'message') {
+            const message = data;
+            messages.push(message);
+            if (((_b = (_a = message.meta) === null || _a === void 0 ? void 0 : _a.activity) === null || _b === void 0 ? void 0 : _b.type) === 'request') {
+                const name = (_c = message.meta.activity.function) === null || _c === void 0 ? void 0 : _c.name;
+                const args = (_d = message.meta.activity.function) === null || _d === void 0 ? void 0 : _d.arguments;
+                const fn = functions === null || functions === void 0 ? void 0 : functions.find((fn) => fn.name === name);
+                if (fn && typeof fn.handler === 'function') {
+                    const output = await fn.handler(args);
+                    let text;
+                    let children;
+                    let result;
+                    if (typeof output === 'string') {
+                        text = undefined;
+                        children = undefined;
+                        result = output;
+                    }
+                    else if ((0, react_1.isValidElement)(output)) {
+                        text = '';
+                        children = output;
+                        result = undefined;
+                    }
+                    else {
+                        if (typeof (output === null || output === void 0 ? void 0 : output.text) === 'string') {
+                            text = output.text;
+                        }
+                        if ((0, react_1.isValidElement)(output === null || output === void 0 ? void 0 : output.children)) {
+                            children = output.children;
+                        }
+                        if (output === null || output === void 0 ? void 0 : output.result) {
+                            result = output.result;
+                        }
+                    }
+                    if (text || children) {
+                        yield {
+                            type: 'message',
+                            data: {
+                                type: 'bot',
+                                text: text ? text : '',
+                                children: children ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }) : undefined,
+                            },
+                        };
+                    }
+                    if (result) {
+                        const activityMessage = {
+                            type: 'activity',
+                            text: '',
+                            meta: {
+                                activity: {
+                                    type: 'response',
+                                    function: {
+                                        name,
+                                        arguments: args,
+                                        result: JSON.stringify(result),
+                                    },
+                                },
+                            },
+                        };
+                        yield { type: 'message', data: activityMessage };
+                        messages.push(activityMessage);
+                        yield* complete({
+                            ...options,
+                            client,
+                            messages,
+                            functions,
+                            maxRecusion: maxRecusion - 1,
+                        });
+                    }
+                }
+            }
+        }
+    }
+}
+function streamComplete(options) {
+    return (0, stream_js_1.stream)(complete(options));
+}
+exports.streamComplete = streamComplete;
+exports.default = complete;

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

@@ -0,0 +1,24 @@
+export function streamComplete(options: Options): import('../utils/stream.cjs').StreamResult;
+export default complete;
+export type InputMessage = {
+    type: 'bot' | 'user' | 'context' | 'instruction' | 'backstory' | 'activity';
+    text: string;
+    meta?: Record<string, any>;
+};
+export type InputFunction = {
+    name: string;
+    description: string;
+    parameters: Record<string, any>;
+    handler?: (args: any) => Promise<string | import('react').ReactElement | {
+        text?: string;
+        children?: import('react').ReactElement;
+        result?: any;
+    }>;
+};
+export type Options = Omit<any, 'messages' | 'functions'> & {
+    client: import('@chatbotkit/sdk').ConversationClient;
+    messages: InputMessage[];
+    functions?: InputFunction[];
+    maxRecusion?: number;
+};
+declare function complete({ client, messages, functions, maxRecusion, ...options }: Options): any;

package/dist/cjs/components/AutoTextarea.cjs

@@ -3,33 +3,37 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoTextarea = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 function AutoTextarea(props) {
-    const { onInput, onFocus, adjustOnInput = true, adjustOnFocus = false, ...rest } = props || {};
-    function handleEvent(event) {
-        const adjustment = `calc(${[event.target.style.paddingTop, event.target.style.paddingBottom]
+    const ref = (0, react_1.useRef)(null);
+    function recalibrate(textarea) {
+        const adjustment = `calc(${[textarea.style.paddingTop, textarea.style.paddingBottom]
             .filter((f) => f)
             .join(' + ') || '0px'})`;
-        event.target.style.height = 'auto';
-        event.target.style.height = `calc(${event.target.scrollHeight}px - ${adjustment})`;
+        textarea.style.height = 'auto';
+        textarea.style.height = `calc(${textarea.scrollHeight}px - ${adjustment})`;
     }
-    function handleOnInput(event) {
-        if (adjustOnInput) {
-            handleEvent(event);
+    (0, react_1.useEffect)(() => {
+        const textarea = ref.current;
+        if (textarea) {
+            recalibrate(textarea);
+            const observer = new MutationObserver((mutationsList) => {
+                for (const mutation of mutationsList) {
+                    if (mutation.type === 'childList' ||
+                        mutation.type === 'characterData') {
+                        recalibrate(textarea);
+                    }
+                }
+            });
+            observer.observe(textarea, {
+                childList: true,
+                subtree: true,
+                characterData: true,
+            });
+            return () => observer.disconnect();
         }
-        if (onInput) {
-            onInput(event);
-        }
-    }
-    function handleOnFocus(event) {
-        if (adjustOnFocus) {
-            handleEvent(event);
-        }
-        if (onFocus) {
-            onFocus(event);
-        }
-    }
-    return ((0, jsx_runtime_1.jsx)("textarea", { ...rest, rows: 1, onInput: handleOnInput, onFocus: handleOnFocus }));
+    }, []);
+    return (0, jsx_runtime_1.jsx)("textarea", { ref: ref, rows: 1, ...props });
 }
 exports.AutoTextarea = AutoTextarea;
 exports.default = AutoTextarea;

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

@@ -1,11 +1,4 @@
 export function AutoTextarea(props?: {
     [name: string]: any;
-    onInput?: onInputFn | null;
-    onFocus?: onFocusFn | null;
-    adjustOnInput?: boolean | null;
-    adjustOnFocus?: boolean | null;
 }): import("react/jsx-runtime").JSX.Element;
 export default AutoTextarea;
-export type onInputFn = (event: React.ChangeEvent<HTMLTextAreaElement>) => any;
-export type onFocusFn = (event: React.ChangeEvent<HTMLTextAreaElement>) => any;
-import React from 'react';

package/dist/cjs/components/ConversationManager.cjs

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConversationManager = exports.ConversationContext = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useConversationManager_js_1 = tslib_1.__importDefault(require("../hooks/useConversationManager.cjs"));
+exports.ConversationContext = (0, react_1.createContext)(({
+    token: undefined,
+    setToken: () => { },
+    conversationId: undefined,
+    setConversationId: () => { },
+    botId: undefined,
+    setBotId: () => { },
+    backstory: undefined,
+    setBackstory: () => { },
+    model: undefined,
+    setModel: () => { },
+    datasetId: undefined,
+    setDatasetId: () => { },
+    skillsetId: undefined,
+    setSkillsetId: () => { },
+    text: '',
+    setText: () => { },
+    messages: [],
+    setMessages: () => { },
+    thinking: false,
+    setThinking: () => { },
+    typing: false,
+    setTyping: () => { },
+    error: null,
+    setError: () => { },
+    submit: () => { },
+    trigger: () => { },
+}));
+function ConversationManager({ children, ...options }) {
+    const manager = (0, useConversationManager_js_1.default)(options);
+    return ((0, jsx_runtime_1.jsx)(exports.ConversationContext.Provider, { value: manager, children: children }));
+}
+exports.ConversationManager = ConversationManager;
+exports.default = ConversationManager;

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

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

package/dist/cjs/hooks/useConversationManager.cjs

@@ -2,23 +2,36 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useConversationManager = void 0;
 const react_1 = require("react");
-const sdk_1 = require("@chatbotkit/sdk");
-const string_js_1 = require("../utils/string.cjs");
 const object_js_1 = require("../utils/object.cjs");
+const stream_js_1 = require("../utils/stream.cjs");
+const string_js_1 = require("../utils/string.cjs");
+const sdk_1 = require("@chatbotkit/sdk");
 function useConversationManager(options) {
-    const { client: _client, endpoint, token: _token, conversationId: _conversationId, backstory: _backstory, model: _model, datasetId: _datasetId, skillsetId: _skillsetId, ...rest } = options;
+    const { client: _client, endpoint, token: _token, conversationId: _conversationId, botId: _botId, backstory: _backstory, model: _model, datasetId: _datasetId, skillsetId: _skillsetId, ...rest } = options;
     const [token, setToken] = (0, react_1.useState)(_token);
     const [conversationId, setConversationId] = (0, react_1.useState)(_conversationId);
+    const [botId, setBotId] = (0, react_1.useState)(_botId);
     const [backstory, setBackstory] = (0, react_1.useState)(_backstory);
     const [model, setModel] = (0, react_1.useState)(_model);
     const [datasetId, setDatasetId] = (0, react_1.useState)(_datasetId);
     const [skillsetId, setSkillsetId] = (0, react_1.useState)(_skillsetId);
     const client = (0, react_1.useMemo)(() => {
         var _a, _b;
+        if (typeof endpoint === 'function') {
+            return {
+                complete(conversationId, options) {
+                    return {
+                        async *stream() {
+                            yield* (0, stream_js_1.consume)(endpoint(conversationId, options));
+                        },
+                    };
+                },
+            };
+        }
         const options = { ...rest, secret: token || '' };
         let thisClient = _client || new sdk_1.ConversationClient(options);
         const extension = {};
-        if (endpoint) {
+        if (typeof endpoint === 'string') {
             extension.url = new URL(((_b = (_a = globalThis.window) === null || _a === void 0 ? void 0 : _a.location) === null || _b === void 0 ? void 0 : _b.origin) || 'about:blank');
             extension.endpoints = {
                 '/api/v1/conversation/complete': endpoint,
@@ -30,26 +43,16 @@ function useConversationManager(options) {
         if (Object.keys(extension).length === 0) {
             return thisClient;
         }
-        return (0, object_js_1.cloneAndExtend)(thisClient, extension);
+        else {
+            return (0, object_js_1.cloneAndExtend)(thisClient, extension);
+        }
     }, [_client, endpoint, token]);
     const [text, setText] = (0, react_1.useState)((''));
     const [messages, setMessages] = (0, react_1.useState)(([]));
     const [thinking, setThinking] = (0, react_1.useState)(false);
     const [typing, setTyping] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)((null));
-    async function submit() {
-        if (!text) {
-            return;
-        }
-        setText('');
-        const userMessage = {
-            id: (0, string_js_1.getRandomId)('message-'),
-            type: 'user',
-            text: text,
-        };
-        let newMessages = messages.slice(0);
-        newMessages = [...newMessages, userMessage];
-        setMessages([...newMessages]);
+    async function stream(newMessages) {
         setThinking(true);
         let it;
         try {
@@ -62,7 +65,9 @@ function useConversationManager(options) {
                     model: model,
                     datasetId: datasetId,
                     skillsetId: skillsetId,
-                    messages: newMessages.slice(-100),
+                    messages: newMessages
+                        .slice(-100)
+                        .map(({ type, text, meta }) => ({ type, text, meta })),
                 });
             }
         }
@@ -79,16 +84,37 @@ function useConversationManager(options) {
         let alreadyStreaming = false;
         try {
             for await (const event of it.stream()) {
-                if (event.type === 'token') {
-                    if (!alreadyStreaming) {
-                        alreadyStreaming = true;
-                        newMessages = [...newMessages, botMessage];
-                        setMessages(newMessages);
+                switch (event.type) {
+                    case 'token': {
+                        if (!alreadyStreaming) {
+                            alreadyStreaming = true;
+                            newMessages = [...newMessages, botMessage];
+                            setMessages(newMessages);
+                            setThinking(false);
+                            setTyping(true);
+                        }
+                        botMessage.text += event.data.token;
+                        setMessages([...newMessages]);
+                        break;
+                    }
+                    case 'message': {
+                        const message = event.data;
+                        if (botMessage.text !== message.text ||
+                            message.type === 'activity' ||
+                            typeof message.children !== 'undefined') {
+                            const newMessage = {
+                                id: (0, string_js_1.getRandomId)('message-'),
+                                ...event.data,
+                            };
+                            newMessages = [...newMessages, newMessage];
+                            setMessages([...newMessages]);
+                        }
+                        break;
+                    }
+                    case 'result': {
                         setThinking(false);
-                        setTyping(true);
+                        setTyping(false);
                     }
-                    botMessage.text += event.data.token;
-                    setMessages([...newMessages]);
                 }
             }
         }
@@ -99,11 +125,47 @@ function useConversationManager(options) {
             setTyping(false);
         }
     }
+    async function submit() {
+        if (!text) {
+            return;
+        }
+        setText('');
+        const userMessage = {
+            id: (0, string_js_1.getRandomId)('message-'),
+            type: 'user',
+            text: text,
+        };
+        let newMessages = messages.slice(0);
+        newMessages = [...newMessages, userMessage];
+        setMessages([...newMessages]);
+        await stream(newMessages);
+    }
+    async function trigger(name, ...args) {
+        const newMessages = [
+            ...messages,
+            ({
+                type: 'activity',
+                text: '',
+                meta: {
+                    activity: {
+                        type: 'trigger',
+                        function: {
+                            name: name,
+                            arguments: args,
+                        },
+                    },
+                },
+            }),
+        ];
+        await stream(newMessages);
+    }
     return {
         token,
         setToken,
         conversationId,
         setConversationId,
+        botId,
+        setBotId,
         backstory,
         setBackstory,
         model,
@@ -123,6 +185,7 @@ function useConversationManager(options) {
         error,
         setError,
         submit,
+        trigger,
     };
 }
 exports.useConversationManager = useConversationManager;

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

@@ -1,38 +1,4 @@
-export function useConversationManager(options: {
-    [key: string]: any;
-    client?: ConversationClient;
-    endpoint?: string;
-    token?: string;
-    conversationId?: string;
-    backstory?: string;
-    Model?: string;
-    datasetId?: string;
-    skillsetId?: string;
-}): {
-    token: string;
-    setToken: import("react").Dispatch<import("react").SetStateAction<string>>;
-    conversationId: string;
-    setConversationId: import("react").Dispatch<import("react").SetStateAction<string>>;
-    backstory: string;
-    setBackstory: import("react").Dispatch<import("react").SetStateAction<string>>;
-    model: any;
-    setModel: import("react").Dispatch<any>;
-    datasetId: string;
-    setDatasetId: import("react").Dispatch<import("react").SetStateAction<string>>;
-    skillsetId: string;
-    setSkillsetId: import("react").Dispatch<import("react").SetStateAction<string>>;
-    text: string;
-    setText: import("react").Dispatch<import("react").SetStateAction<string>>;
-    messages: Message[];
-    setMessages: import("react").Dispatch<import("react").SetStateAction<Message[]>>;
-    thinking: boolean;
-    setThinking: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    typing: boolean;
-    setTyping: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    error: any;
-    setError: import("react").Dispatch<any>;
-    submit: () => Promise<void>;
-};
+export function useConversationManager(options: UseConversationManagerOptions): UseConversationManagerResult;
 export default useConversationManager;
 export type ModelConfig = {
     maxTokens?: number;
@@ -48,8 +14,50 @@ export type Model = string | {
     config?: ModelConfig;
 };
 export type Message = {
-    id: string;
-    type: 'bot' | 'user';
+    id?: string;
+    type: 'bot' | 'user' | 'context' | 'instruction' | 'backstory' | 'activity';
+    text: string;
+    meta?: Record<string, any>;
+};
+export type EndpointURL = string;
+export type EndpointFunction = (conversationId: any, request: any) => AsyncGenerator<any>;
+export type UseConversationManagerOptions = {
+    [key: string]: any;
+    client?: ConversationClient;
+    endpoint?: EndpointURL | EndpointFunction;
+    token?: string;
+    conversationId?: string;
+    backstory?: string;
+    Model?: string;
+    datasetId?: string;
+    skillsetId?: string;
+};
+export type UseConversationManagerResult = {
+    token?: string;
+    setToken: (token: string) => void;
+    conversationId?: string;
+    setConversationId: (conversationId: string) => void;
+    botId?: string;
+    setBotId: (botId: string) => void;
+    backstory?: string;
+    setBackstory: (backstory: string) => void;
+    model?: Model;
+    setModel: (model: Model) => void;
+    datasetId?: string;
+    setDatasetId: (datasetId: string) => void;
+    skillsetId?: string;
+    setSkillsetId: (skillsetId: string) => void;
     text: string;
+    setText: (text: string) => void;
+    messages: Message[];
+    setMessages: (messages: Message[]) => void;
+    thinking: boolean;
+    setThinking: (thinking: boolean) => void;
+    typing: boolean;
+    setTyping: (typing: boolean) => void;
+    error: any;
+    setError: (error: any) => void;
+    submit: () => void;
+    trigger: (name: string, ...args: any) => void;
 };
 import { ConversationClient } from '@chatbotkit/sdk';

package/dist/cjs/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useConversationManager = exports.AutoTextarea = exports.ChatMessages = exports.ChatMessage = exports.ChatInput = void 0;
+exports.useConversationManager = exports.ConversationContext = exports.ConversationManager = exports.AutoTextarea = exports.ChatMessages = exports.ChatMessage = exports.ChatInput = void 0;
 var ChatInput_js_1 = require("./components/ChatInput.cjs");
 Object.defineProperty(exports, "ChatInput", { enumerable: true, get: function () { return ChatInput_js_1.ChatInput; } });
 var ChatMessage_js_1 = require("./components/ChatMessage.cjs");
@@ -9,5 +9,8 @@ var ChatMessages_js_1 = require("./components/ChatMessages.cjs");
 Object.defineProperty(exports, "ChatMessages", { enumerable: true, get: function () { return ChatMessages_js_1.ChatMessages; } });
 var AutoTextarea_js_1 = require("./components/AutoTextarea.cjs");
 Object.defineProperty(exports, "AutoTextarea", { enumerable: true, get: function () { return AutoTextarea_js_1.AutoTextarea; } });
+var ConversationManager_js_1 = require("./components/ConversationManager.cjs");
+Object.defineProperty(exports, "ConversationManager", { enumerable: true, get: function () { return ConversationManager_js_1.ConversationManager; } });
+Object.defineProperty(exports, "ConversationContext", { enumerable: true, get: function () { return ConversationManager_js_1.ConversationContext; } });
 var useConversationManager_js_1 = require("./hooks/useConversationManager.cjs");
 Object.defineProperty(exports, "useConversationManager", { enumerable: true, get: function () { return useConversationManager_js_1.useConversationManager; } });

package/dist/cjs/index.d.ts

@@ -3,3 +3,4 @@ export { ChatMessage } from "./components/ChatMessage.js";
 export { ChatMessages } from "./components/ChatMessages.js";
 export { AutoTextarea } from "./components/AutoTextarea.js";
 export { useConversationManager } from "./hooks/useConversationManager.js";
+export { ConversationManager, ConversationContext } from "./components/ConversationManager.js";

package/dist/cjs/utils/stream.cjs

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.consume = exports.stream = void 0;
+function stream(source) {
+    let it;
+    if ('next' in source && typeof source.next === 'function') {
+        it = source.next();
+    }
+    else if ('stream' in source && typeof source.stream === 'function') {
+        return stream(source.stream());
+    }
+    else {
+        throw new Error('Invalid source');
+    }
+    return new Promise((resolve, reject) => {
+        it.then((res) => {
+            if (res.done) {
+                resolve({ iteratorResult: res });
+            }
+            else {
+                resolve({ iteratorResult: res, next: stream(source) });
+            }
+        });
+        it.catch((error) => reject(error));
+    });
+}
+exports.stream = stream;
+function consume(source) {
+    return {
+        [Symbol.asyncIterator]: function () {
+            return {
+                current: source,
+                async next() {
+                    const { iteratorResult, next } = await this.current;
+                    if (next) {
+                        this.current = next;
+                    }
+                    else {
+                        iteratorResult.done = true;
+                    }
+                    return iteratorResult;
+                },
+            };
+        },
+    };
+}
+exports.consume = consume;

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

@@ -0,0 +1,6 @@
+export function stream(source: StreamSource): StreamResult;
+export function consume(source: ConsumeSource): ConsumeResult;
+export type StreamSource = any;
+export type StreamResult = any;
+export type ConsumeSource = any;
+export type ConsumeResult = any;

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

@@ -0,0 +1,24 @@
+export function streamComplete(options: Options): import('../utils/stream.js').StreamResult;
+export default complete;
+export type InputMessage = {
+    type: 'bot' | 'user' | 'context' | 'instruction' | 'backstory' | 'activity';
+    text: string;
+    meta?: Record<string, any>;
+};
+export type InputFunction = {
+    name: string;
+    description: string;
+    parameters: Record<string, any>;
+    handler?: ((args: any) => Promise<string | import('react').ReactElement | {
+        text?: string;
+        children?: import('react').ReactElement;
+        result?: any;
+    }>) | undefined;
+};
+export type Options = Omit<import('@chatbotkit/sdk/conversation/v1.js').ConversationCompleteRequest, 'messages' | 'functions'> & {
+    client: import('@chatbotkit/sdk').ConversationClient;
+    messages: InputMessage[];
+    functions?: InputFunction[];
+    maxRecusion?: number;
+};
+declare function complete({ client, messages, functions, maxRecusion, ...options }: Options): any;