@chatbotkit/react 0.8.0 → 1.1.5

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;

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

@@ -1,65 +1,41 @@
-/**
- * @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]
- */
-export default function useConversationManager({ conversationId: _conversationId, token: _token, messages: _messages, stream, verbose, onError, onSend, onReceive, }?: {
-    conversationId?: string | undefined;
+export function useConversationManager(options: {
+    [key: string]: any;
+    client?: ConversationClient | undefined;
+    endpoint?: string | undefined;
     token?: string | undefined;
-    messages?: Message[] | undefined;
-    stream?: boolean | undefined;
-    verbose?: boolean | undefined;
-    onError?: onErrorFn | null | undefined;
-    onSend?: onSendFn | null | undefined;
-    onReceive?: onReceiveFn | null | undefined;
-} | undefined): {
+    conversationId?: string | undefined;
+    backstory?: string | undefined;
+    model?: string | undefined;
+    datasetId?: string | undefined;
+    skillsetId?: string | undefined;
+}): {
+    token: string | undefined;
+    setToken: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    conversationId: string | undefined;
+    setConversationId: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    backstory: string | undefined;
+    setBackstory: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    model: string | undefined;
+    setModel: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    datasetId: string | undefined;
+    setDatasetId: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    skillsetId: string | undefined;
+    setSkillsetId: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     text: string;
     setText: import("react").Dispatch<import("react").SetStateAction<string>>;
-    token: string;
-    setToken: import("react").Dispatch<import("react").SetStateAction<string>>;
-    conversationId: string;
-    setConversationId: import("react").Dispatch<import("react").SetStateAction<string>>;
     messages: Message[];
     setMessages: import("react").Dispatch<import("react").SetStateAction<Message[]>>;
-    flushUserMessage: () => Promise<void>;
-    continueConversation: (options?: {
-        token?: string | undefined;
-    } | undefined) => Promise<void>;
-    interact: (options?: {
-        token?: string | undefined;
-        conversationId?: string | undefined;
-        messages?: Message[] | undefined;
-    } | undefined) => void;
-    reset: () => void;
-    loading: boolean;
     thinking: boolean;
+    setThinking: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    writing: boolean;
+    setWriting: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    error: any;
+    setError: import("react").Dispatch<any>;
+    submit: () => Promise<void>;
 };
+export default useConversationManager;
 export type Message = {
-    id: string;
-    type: string;
+    type: 'bot' | 'user';
     text: string;
-    createdAt: number;
-    meta?: Record<string, any>;
 };
-export type onErrorFn = (error: any) => any;
-export type onSendFn = (conversationId: string, messages: Message[], data: Record<string, any>) => any;
-export type onReceiveFn = (conversationId: string, messages: Message[], data: Record<string, any>) => any;
+import { ConversationClient } from '@chatbotkit/sdk';

package/dist/cjs/index.cjs

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useConversationManager = exports.AutoTextarea = void 0;
-var AutoTextarea_js_1 = require("./components/AutoTextarea.cjs");
-Object.defineProperty(exports, "AutoTextarea", { enumerable: true, get: function () { return __importDefault(AutoTextarea_js_1).default; } });
-var useConversationManager_js_1 = require("./hooks/useConversationManager.cjs");
-Object.defineProperty(exports, "useConversationManager", { enumerable: true, get: function () { return __importDefault(useConversationManager_js_1).default; } });
+var AutoTextarea_js_1 = require("./components/AutoTextarea...cjs");
+Object.defineProperty(exports, "AutoTextarea", { enumerable: true, get: function () { return AutoTextarea_js_1.AutoTextarea; } });
+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

@@ -1,2 +1,2 @@
-export { default as AutoTextarea } from "./components/AutoTextarea.js";
-export { default as useConversationManager } from "./hooks/useConversationManager.js";
+export { AutoTextarea } from "./components/AutoTextarea.js";
+export { useConversationManager } from "./hooks/useConversationManager.js";

package/dist/cjs/utils/object.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cloneAndExtend = void 0;
+function cloneAndExtend(object, extension) {
+    return Object.assign(Object.assign(Object.create(Object.getPrototypeOf(object)), object), extension);
+}
+exports.cloneAndExtend = cloneAndExtend;

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

@@ -0,0 +1 @@
+export function cloneAndExtend<T>(object: T, extension: object): T;

package/dist/cjs/utils/string.cjs

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

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

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

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

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