@chatbotkit/react 0.8.0 → 1.1.5

package/dist/esm/components/AutoScroller.js

@@ -1,62 +1,51 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useRef, useEffect } from 'react';
-export function AutoScrollAnchor() {
-    return React.createElement("div", { className: "auto-scroll-anchor ![height:1px]" });
+function AutoScrollAnchor() {
+    return _jsx("div", { className: "auto-scroll-anchor", style: { height: '1px' } });
 }
-/**
- * @param {{
- *   anchor?: 'top'|'bottom',
- *   childList?: boolean,
- *   subtree?: boolean,
- *   block?: 'start'|'end',
- *   delay?: number,
- *   [name: string]: any
- * }} props
- */
-export default function AutoScroller({ anchor = 'bottom', childList = true, subtree = false, block = 'end', delay = 3000, disabled, children, ...props }) {
-    const rootRef = useRef();
+export function AutoScroller(props) {
+    const { anchor = 'bottom', childList = true, subtree = false, block = 'end', delay = 3000, disabled, children, ...rest } = props || {};
+    const rootRef = (useRef());
     useEffect(() => {
         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 = rootRef.current?.querySelector('.auto-scroll-anchor');
+        if (anchor) {
+            io.observe(anchor);
+        }
         const mo = new MutationObserver(() => {
             if (!visible) {
                 return;
             }
             pause = true;
             rootRef.current
-                // @ts-ignore
                 ?.querySelector('.auto-scroll-anchor')
                 ?.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.createElement("div", { ref: rootRef, ...props },
-        anchor === 'top' ? React.createElement(AutoScrollAnchor, { key: "top" }) : null,
-        children,
-        anchor === 'bottom' ? React.createElement(AutoScrollAnchor, { key: "bottom" }) : null));
+    return (_jsxs("div", { ref: rootRef, ...rest, children: [anchor === 'top' ? _jsx(AutoScrollAnchor, {}, "top") : null, children, anchor === 'bottom' ? _jsx(AutoScrollAnchor, {}, "bottom") : null] }));
 }
+export default AutoScroller;

package/dist/esm/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/esm/components/AutoTextarea.js

@@ -1,18 +1,7 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-/**
- * @typedef {(event: React.ChangeEvent<HTMLTextAreaElement>) => any} onInputFn
- *
- * @param {{
- *   onInput?: onInputFn?,
- *   [name: string]: any
- * }} [props]
- */
-// @ts-ignore
-export default function AutoTextarea({ onInput, ...props } = {}) {
-    /**
-     * @param {React.ChangeEvent<HTMLTextAreaElement>} event
-     */
+export function AutoTextarea(props) {
+    const { onInput, ...rest } = props || {};
     function handleOnInput(event) {
         const adjustment = `calc(${[event.target.style.paddingTop, event.target.style.paddingBottom]
             .filter((f) => f)
@@ -23,5 +12,6 @@ export default function AutoTextarea({ onInput, ...props } = {}) {
             onInput(event);
         }
     }
-    return React.createElement("textarea", { ...props, rows: 1, onInput: handleOnInput });
+    return _jsx("textarea", { ...rest, rows: 1, onInput: handleOnInput });
 }
+export default AutoTextarea;

package/dist/esm/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/esm/hooks/useConversationManager.js

@@ -1,301 +1,121 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import { useState, useEffect } from 'react';
-import { ConversationClient } from '@chatbotkit/sdk/conversation/index.js';
-import { getRandomId, replaceWithCoordinates } from '../utils/string.js';
-/**
- * @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
-export default function useConversationManager({ conversationId: _conversationId = '', token: _token = '', messages: _messages = [], stream = false, verbose = false, onError = null, onSend = null, onReceive = null, } = {}) {
-    // general states
-    const [conversationId, setConversationId] = useState(_conversationId);
+import { useMemo, useState } from 'react';
+import { ConversationClient } from '@chatbotkit/sdk';
+import { cloneAndExtend } from '../utils/object.js';
+export function useConversationManager(options) {
+    const { client: _client, endpoint, token: _token, conversationId: _conversationId, backstory: _backstory, model: _model, datasetId: _datasetId, skillsetId: _skillsetId, ...rest } = options;
     const [token, setToken] = useState(_token);
-    const [messages, setMessages] = useState(_messages);
-    const [text, setText] = useState('');
-    const [entities, setEntities] = useState({});
-    const [outgoingMessage, setOutgoingMessage] = useState('');
-    // loading & thinking state
-    const [loading, setLoading] = useState(false);
-    const [thinking, setThinking] = useState(false);
-    useEffect(() => {
-        // NOTE: if we are loading we must be thinking
-        if (loading) {
-            setThinking(true);
+    const [conversationId, setConversationId] = useState(_conversationId);
+    const [backstory, setBackstory] = useState(_backstory);
+    const [model, setModel] = useState(_model);
+    const [datasetId, setDatasetId] = useState(_datasetId);
+    const [skillsetId, setSkillsetId] = useState(_skillsetId);
+    const client = useMemo(() => {
+        const options = { ...rest, secret: token || '' };
+        let thisClient = _client || new ConversationClient(options);
+        const extension = {};
+        if (endpoint) {
+            extension.url = new URL(globalThis.window?.location?.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 = 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 cloneAndExtend(thisClient, extension);
+    }, [_client, endpoint, token]);
+    const [text, setText] = useState((''));
+    const [messages, setMessages] = useState(([]));
+    const [thinking, setThinking] = useState(false);
+    const [writing, setWriting] = useState(false);
+    const [error, setError] = useState((null));
+    async function submit() {
         if (!text) {
             return;
         }
         setText('');
-        setOutgoingMessage(text);
-        let newMessages = messages.slice(0);
-        newMessages = newMessages.concat({
-            id: getRandomId('message-'),
+        const userMessage = {
             type: 'user',
-            text,
-            createdAt: Date.now(),
-        });
-        setMessages(newMessages);
-    }
-    // utility states
-    const [nextStep, setNextStep] = useState(null);
-    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: 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 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 = 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 = 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,
     };
 }
+export default useConversationManager;

package/dist/esm/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/esm/index.js

@@ -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/esm/utils/object.d.ts

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

package/dist/esm/utils/object.js

@@ -0,0 +1,3 @@
+export function cloneAndExtend(object, extension) {
+    return Object.assign(Object.assign(Object.create(Object.getPrototypeOf(object)), object), extension);
+}

package/dist/esm/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;