@chatbotkit/react 0.8.0 → 1.1.4

package/dist/cjs/components/AutoScroller.cjs

@@ -1,90 +1,57 @@
 "use strict";
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AutoScrollAnchor = void 0;
-const react_1 = __importStar(require("react"));
+exports.AutoScroller = exports.AutoScrollAnchor = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
 function AutoScrollAnchor() {
-    return react_1.default.createElement("div", { className: "auto-scroll-anchor ![height:1px]" });
+    return (0, jsx_runtime_1.jsx)("div", { className: "auto-scroll-anchor ![height:1px]" });
 }
 exports.AutoScrollAnchor = AutoScrollAnchor;
-/**
- * @param {{
- *   anchor?: 'top'|'bottom',
- *   childList?: boolean,
- *   subtree?: boolean,
- *   block?: 'start'|'end',
- *   delay?: number,
- *   [name: string]: any
- * }} props
- */
-function AutoScroller({ anchor = 'bottom', childList = true, subtree = false, block = 'end', delay = 3000, disabled, children, ...props }) {
-    const rootRef = (0, react_1.useRef)();
+function AutoScroller(props) {
+    const { anchor = 'bottom', childList = true, subtree = false, block = 'end', delay = 3000, disabled, children, ...rest } = props || {};
+    const rootRef = ((0, react_1.useRef)());
     (0, react_1.useEffect)(() => {
+        var _a;
         if (disabled) {
             return;
         }
         let visible = false;
         let pause = false;
-        let timeout = 0;
+        let timeout;
         const io = new IntersectionObserver((entries) => {
             if (pause) {
                 return;
             }
             visible = entries.some((entry) => entry.isIntersecting);
         });
-        // @ts-ignore
-        io.observe(rootRef.current?.querySelector('.auto-scroll-anchor'));
+        const anchor = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.auto-scroll-anchor');
+        if (anchor) {
+            io.observe(anchor);
+        }
         const mo = new MutationObserver(() => {
+            var _a, _b;
             if (!visible) {
                 return;
             }
             pause = true;
-            rootRef.current
-                // @ts-ignore
-                ?.querySelector('.auto-scroll-anchor')
-                ?.scrollIntoView({ behavior: 'smooth', block });
+            (_b = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.auto-scroll-anchor')) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ behavior: 'smooth', block });
             clearTimeout(timeout);
-            // @ts-ignore
             timeout = setTimeout(() => {
                 visible = true;
                 pause = false;
             }, delay);
         });
-        // @ts-ignore
-        mo.observe(rootRef.current, { childList, subtree });
+        const root = rootRef.current;
+        if (root) {
+            mo.observe(root, { childList, subtree });
+        }
         return () => {
             io.disconnect();
             mo.disconnect();
         };
     }, [disabled]);
-    return (
-    // @ts-ignore
-    react_1.default.createElement("div", { ref: rootRef, ...props },
-        anchor === 'top' ? react_1.default.createElement(AutoScrollAnchor, { key: "top" }) : null,
-        children,
-        anchor === 'bottom' ? react_1.default.createElement(AutoScrollAnchor, { key: "bottom" }) : null));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, ...rest, children: [anchor === 'top' ? (0, jsx_runtime_1.jsx)(AutoScrollAnchor, {}, "top") : null, children, anchor === 'bottom' ? (0, jsx_runtime_1.jsx)(AutoScrollAnchor, {}, "bottom") : null] }));
 }
+exports.AutoScroller = AutoScroller;
 exports.default = AutoScroller;

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

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

package/dist/cjs/components/AutoTextarea.cjs

@@ -1,23 +1,11 @@
 "use strict";
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-/**
- * @typedef {(event: React.ChangeEvent<HTMLTextAreaElement>) => any} onInputFn
- *
- * @param {{
- *   onInput?: onInputFn?,
- *   [name: string]: any
- * }} [props]
- */
-// @ts-ignore
-function AutoTextarea({ onInput, ...props } = {}) {
-    /**
-     * @param {React.ChangeEvent<HTMLTextAreaElement>} event
-     */
+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"));
+function AutoTextarea(props) {
+    const { onInput, ...rest } = props || {};
     function handleOnInput(event) {
         const adjustment = `calc(${[event.target.style.paddingTop, event.target.style.paddingBottom]
             .filter((f) => f)
@@ -28,6 +16,7 @@ function AutoTextarea({ onInput, ...props } = {}) {
             onInput(event);
         }
     }
-    return react_1.default.createElement("textarea", { ...props, rows: 1, onInput: handleOnInput });
+    return (0, jsx_runtime_1.jsx)("textarea", { ...rest, rows: 1, onInput: handleOnInput });
 }
+exports.AutoTextarea = AutoTextarea;
 exports.default = AutoTextarea;

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

@@ -1,14 +1,7 @@
-/**
- * @typedef {(event: React.ChangeEvent<HTMLTextAreaElement>) => any} onInputFn
- *
- * @param {{
- *   onInput?: onInputFn?,
- *   [name: string]: any
- * }} [props]
- */
-export default function AutoTextarea({ onInput, ...props }?: {
+export function AutoTextarea(props?: {
     [name: string]: any;
     onInput?: onInputFn | null | undefined;
-} | undefined): React.JSX.Element;
+} | undefined): import("react/jsx-runtime").JSX.Element;
+export default AutoTextarea;
 export type onInputFn = (event: React.ChangeEvent<HTMLTextAreaElement>) => any;
 import React from 'react';

package/dist/cjs/hooks/useConversationManager.cjs

@@ -1,304 +1,126 @@
 "use strict";
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConversationManager = void 0;
 const react_1 = require("react");
-const index_js_1 = require("@chatbotkit/sdk/conversation/index.cjs");
-const string_js_1 = require("../utils/string.cjs");
-/**
- * @typedef {{
- *   id: string,
- *   type: string,
- *   text: string,
- *   createdAt: number,
- *   meta?: Record<string,any>
- * }} Message
- *
- * @typedef {(error: any) => any} onErrorFn
- * @typedef {(conversationId: string, messages: Message[], data: Record<string,any>) => any} onSendFn
- * @typedef {(conversationId: string, messages: Message[], data: Record<string,any>) => any} onReceiveFn
- *
- * @param {{
- *   conversationId?: string,
- *   token?: string,
- *   messages?: Message[],
- *   stream?: boolean,
- *   verbose?: boolean,
- *   onError?: onErrorFn?,
- *   onSend?: onSendFn?,
- *   onReceive?: onReceiveFn?,
- * }}[options]
- */
-// @ts-ignore
-function useConversationManager({ conversationId: _conversationId = '', token: _token = '', messages: _messages = [], stream = false, verbose = false, onError = null, onSend = null, onReceive = null, } = {}) {
-    // general states
-    const [conversationId, setConversationId] = (0, react_1.useState)(_conversationId);
+const sdk_1 = require("@chatbotkit/sdk");
+const object_js_1 = require("../utils/object..cjs");
+function useConversationManager(options) {
+    const { client: _client, endpoint, token: _token, conversationId: _conversationId, backstory: _backstory, model: _model, datasetId: _datasetId, skillsetId: _skillsetId, ...rest } = options;
     const [token, setToken] = (0, react_1.useState)(_token);
-    const [messages, setMessages] = (0, react_1.useState)(_messages);
-    const [text, setText] = (0, react_1.useState)('');
-    const [entities, setEntities] = (0, react_1.useState)({});
-    const [outgoingMessage, setOutgoingMessage] = (0, react_1.useState)('');
-    // loading & thinking state
-    const [loading, setLoading] = (0, react_1.useState)(false);
-    const [thinking, setThinking] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        // NOTE: if we are loading we must be thinking
-        if (loading) {
-            setThinking(true);
+    const [conversationId, setConversationId] = (0, react_1.useState)(_conversationId);
+    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;
+        const options = { ...rest, secret: token || '' };
+        let thisClient = _client || new sdk_1.ConversationClient(options);
+        const extension = {};
+        if (endpoint) {
+            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,
+            };
         }
-    }, [loading]);
-    // entity methods
-    /**
-     * @param {string} text
-     * @param {Record<string,string>} en
-     */
-    function redactEnitities(text, en = entities) {
-        const steps = (0, string_js_1.replaceWithCoordinates)(text, Object.entries(en));
-        const output = steps.pop();
-        steps.forEach((step) => {
-            // @ts-ignore
-            delete step.input;
-            // @ts-ignore
-            delete step.output;
-        });
-        return [output, ...steps];
-    }
-    /**
-     * @param {string} text
-     * @param {Record<string,string>} en
-     */
-    function unredactEnitities(text, en = entities) {
-        Object.entries(en).forEach(([real, redacted]) => {
-            text = text.split(redacted).join(real);
-        });
-        return text;
-    }
-    // state utility methods
-    /**
-     * @returns {Promise<void>}
-     */
-    async function flushUserMessage() {
+        if (token) {
+            extension.secret = token;
+        }
+        if (Object.keys(extension).length === 0) {
+            return thisClient;
+        }
+        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 [writing, setWriting] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)((null));
+    async function submit() {
         if (!text) {
             return;
         }
         setText('');
-        setOutgoingMessage(text);
-        let newMessages = messages.slice(0);
-        newMessages = newMessages.concat({
-            id: (0, string_js_1.getRandomId)('message-'),
+        const userMessage = {
             type: 'user',
-            text,
-            createdAt: Date.now(),
-        });
-        setMessages(newMessages);
-    }
-    // utility states
-    const [nextStep, setNextStep] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        if (!nextStep) {
-            return;
-        }
-        setNextStep(null);
-        // @ts-ignore
-        switch (nextStep.fn) {
-            case 'continueConversation':
-                // @ts-ignore
-                continueConversation(nextStep.options);
-                break;
-            default:
-                // @ts-ignore
-                throw new Error(`Unrecognised fn: ${nextStep.fn}`);
-        }
-    }, [nextStep]);
-    // base methods
-    /**
-     * @param {{
-     *   token?: string,
-     * }} [options]
-     * @returns {Promise<void>}
-     */
-    async function continueConversation(options) {
+            text: text,
+        };
         let newMessages = messages.slice(0);
-        let thisText;
-        if (text) {
-            thisText = text;
-            const message = {
-                id: (0, string_js_1.getRandomId)('message-'),
-                text: text,
-                type: 'user',
-                createdAt: Date.now(),
-            };
-            newMessages = newMessages.concat([message]);
-            setText('');
-        }
-        else if (outgoingMessage) {
-            thisText = outgoingMessage;
-            setOutgoingMessage('');
+        newMessages = [...newMessages, userMessage];
+        setMessages([...newMessages]);
+        setThinking(true);
+        let it;
+        try {
+            if (conversationId) {
+                it = client.complete(conversationId, { text });
+            }
+            else {
+                it = client.complete(null, {
+                    backstory: backstory,
+                    model: model,
+                    datasetId: datasetId,
+                    skillsetId: skillsetId,
+                    messages: newMessages.slice(-100),
+                });
+            }
         }
-        else {
+        catch (e) {
+            setThinking(false);
+            setError(e);
             return;
         }
-        setMessages(newMessages);
-        setLoading(true);
-        const [redactedText, ...redactedEntities] = redactEnitities(thisText, entities);
-        const secret = options?.token || token;
-        const client = new index_js_1.ConversationClient({ secret });
-        // @ts-ignore
-        const completion = client.complete(conversationId, {
-            text: redactedText,
-            entities: redactedEntities,
-        });
-        let iter;
-        if (stream) {
-            iter = completion.stream();
-        }
-        else {
-            iter = (async function* () {
-                yield { type: 'receiveResult', data: await completion };
-            })();
-        }
+        const botMessage = {
+            type: 'bot',
+            text: '',
+        };
+        let alreadyStreaming = false;
         try {
-            if (onSend) {
-                await onSend(conversationId, newMessages, {});
-            }
-            const tempId = (0, string_js_1.getRandomId)('tmp-');
-            let tempText = '';
-            for await (let { type, data } of iter) {
-                switch (type) {
-                    case 'intentDetectionEnd': {
-                        if (!verbose) {
-                            break;
-                        }
-                        const { action } = data;
-                        if (!action) {
-                            break;
-                        }
-                        const { name, input } = action;
-                        switch (name) {
-                            case 'search': {
-                                const id = (0, string_js_1.getRandomId)('tmp-');
-                                newMessages = newMessages.concat([
-                                    {
-                                        id: id,
-                                        text: '',
-                                        type: 'context',
-                                        createdAt: Date.now(),
-                                        meta: {
-                                            search: input,
-                                        },
-                                    },
-                                ]);
-                                setMessages(newMessages);
-                                break;
-                            }
-                        }
-                        break;
-                    }
-                    case 'token': {
-                        if (!stream) {
-                            break;
-                        }
-                        const { token } = data;
-                        tempText += token;
-                        setMessages([
-                            ...newMessages,
-                            {
-                                id: tempId,
-                                text: tempText,
-                                type: 'bot',
-                                createdAt: Date.now(),
-                                meta: {},
-                            },
-                        ]);
-                        if (tempText.length) {
-                            setThinking(false);
-                        }
-                        break;
-                    }
-                    case 'sendResult': {
-                        const { entities: newEntities } = data;
-                        setEntities({ ...entities, ...newEntities });
-                        break;
-                    }
-                    case 'receiveResult': {
-                        const { id, text, parse } = data;
-                        setMessages([
-                            ...newMessages,
-                            {
-                                id: id,
-                                text: unredactEnitities((parse ? parse.stripped : text).trim(), entities),
-                                type: 'bot',
-                                createdAt: Date.now(),
-                            },
-                        ]);
+            for await (const event of it.stream()) {
+                if (event.type === 'token') {
+                    if (!alreadyStreaming) {
+                        alreadyStreaming = true;
+                        newMessages = [...newMessages, botMessage];
+                        setMessages(newMessages);
                         setThinking(false);
-                        if (onReceive) {
-                            await onReceive(conversationId, newMessages, data);
-                        }
-                        break;
+                        setWriting(true);
                     }
+                    botMessage.text += event.data.token;
+                    setMessages([...newMessages]);
                 }
             }
         }
         catch (e) {
-            if (onError) {
-                onError(e);
-            }
-        }
-        setLoading(false);
-    }
-    // helper methods
-    /**
-     * @param {{
-     *   token?: string,
-     *   conversationId?: string
-     *   messages?: Message[]
-     * }} [options]
-     * @returns {void}
-     */
-    function interact(options) {
-        if (options?.token) {
-            setToken(options.token);
-        }
-        if (options?.conversationId) {
-            setConversationId(options.conversationId);
-        }
-        if (options?.messages) {
-            setMessages(options.messages);
+            setError(e);
         }
-        if (options?.conversationId || conversationId) {
-            setNextStep({
-                // @ts-ignore
-                fn: 'continueConversation',
-                options,
-            });
+        finally {
+            setWriting(false);
         }
-        else {
-            throw new Error(`No conversation id specified`);
-        }
-    }
-    /**
-     * @returns {void}
-     */
-    function reset() {
-        setMessages([]);
-        setConversationId('');
     }
-    // final
     return {
-        text,
-        setText,
         token,
         setToken,
         conversationId,
         setConversationId,
+        backstory,
+        setBackstory,
+        model,
+        setModel,
+        datasetId,
+        setDatasetId,
+        skillsetId,
+        setSkillsetId,
+        text,
+        setText,
         messages,
         setMessages,
-        flushUserMessage,
-        continueConversation,
-        interact,
-        reset,
-        loading,
         thinking,
+        setThinking,
+        writing,
+        setWriting,
+        error,
+        setError,
+        submit,
     };
 }
+exports.useConversationManager = useConversationManager;
 exports.default = useConversationManager;