@chatbotkit/react 1.5.3 → 1.7.0

package/dist/esm/actions/complete.js

@@ -0,0 +1,107 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { isValidElement } from 'react';
+import { stream } from '../utils/stream.js';
+async function* complete({ client, messages, functions, maxRecusion = 3, ...options }) {
+    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?.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 (message.meta?.activity?.type === 'request') {
+                const name = message.meta.activity.function?.name;
+                const args = message.meta.activity.function?.arguments;
+                const fn = 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 (isValidElement(output)) {
+                        text = '';
+                        children = output;
+                        result = undefined;
+                    }
+                    else {
+                        if (typeof output?.text === 'string') {
+                            text = output.text;
+                        }
+                        if (isValidElement(output?.children)) {
+                            children = output.children;
+                        }
+                        if (output?.result) {
+                            result = output.result;
+                        }
+                    }
+                    if (text || children) {
+                        yield {
+                            type: 'message',
+                            data: {
+                                type: 'bot',
+                                text: text ? text : '',
+                                children: children ? _jsx(_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,
+                        });
+                    }
+                }
+            }
+        }
+    }
+}
+export function streamComplete(options) {
+    return stream(complete(options));
+}
+export default complete;

package/dist/esm/components/AutoScroller.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useRef, useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 function AutoScrollAnchor() {
     return _jsx("div", { className: "auto-scroll-anchor", style: { height: '1px' } });
 }

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

@@ -1,11 +1,4 @@
 export function AutoTextarea(props?: {
     [name: string]: any;
-    onInput?: onInputFn | null | undefined;
-    onFocus?: onFocusFn | null | undefined;
-    adjustOnInput?: boolean | null | undefined;
-    adjustOnFocus?: boolean | null | undefined;
 } | undefined): 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/esm/components/AutoTextarea.js

@@ -1,30 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 export 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 = 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);
+    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 (_jsx("textarea", { ...rest, rows: 1, onInput: handleOnInput, onFocus: handleOnFocus }));
+    }, []);
+    return _jsx("textarea", { ref: ref, rows: 1, ...props });
 }
 export default AutoTextarea;

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

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

package/dist/esm/components/ConversationManager.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext } from 'react';
+import useConversationManager from '../hooks/useConversationManager.js';
+export const ConversationContext = 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: () => { },
+}));
+export function ConversationManager({ children, ...options }) {
+    const manager = useConversationManager(options);
+    return (_jsx(ConversationContext.Provider, { value: manager, children: children }));
+}
+export default ConversationManager;

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

@@ -1,38 +1,4 @@
-export function useConversationManager(options: {
-    [key: string]: any;
-    client?: ConversationClient | undefined;
-    endpoint?: string | undefined;
-    token?: string | 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: any;
-    setModel: import("react").Dispatch<any>;
-    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>>;
-    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 | undefined;
+    endpoint?: string | EndpointFunction | undefined;
+    token?: string | undefined;
+    conversationId?: string | undefined;
+    backstory?: string | undefined;
+    Model?: string | undefined;
+    datasetId?: string | undefined;
+    skillsetId?: string | undefined;
+};
+export type UseConversationManagerResult = {
+    token?: string | undefined;
+    setToken: (token: string) => void;
+    conversationId?: string | undefined;
+    setConversationId: (conversationId: string) => void;
+    botId?: string | undefined;
+    setBotId: (botId: string) => void;
+    backstory?: string | undefined;
+    setBackstory: (backstory: string) => void;
+    model?: Model | undefined;
+    setModel: (model: Model) => void;
+    datasetId?: string | undefined;
+    setDatasetId: (datasetId: string) => void;
+    skillsetId?: string | undefined;
+    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/esm/hooks/useConversationManager.js

@@ -1,20 +1,33 @@
 import { useMemo, useState } from 'react';
-import { ConversationClient } from '@chatbotkit/sdk';
-import { getRandomId } from '../utils/string.js';
 import { cloneAndExtend } from '../utils/object.js';
+import { consume } from '../utils/stream.js';
+import { getRandomId } from '../utils/string.js';
+import { ConversationClient } from '@chatbotkit/sdk';
 export 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] = useState(_token);
     const [conversationId, setConversationId] = useState(_conversationId);
+    const [botId, setBotId] = useState(_botId);
     const [backstory, setBackstory] = useState(_backstory);
     const [model, setModel] = useState(_model);
     const [datasetId, setDatasetId] = useState(_datasetId);
     const [skillsetId, setSkillsetId] = useState(_skillsetId);
     const client = useMemo(() => {
+        if (typeof endpoint === 'function') {
+            return {
+                complete(conversationId, options) {
+                    return {
+                        async *stream() {
+                            yield* consume(endpoint(conversationId, options));
+                        },
+                    };
+                },
+            };
+        }
         const options = { ...rest, secret: token || '' };
         let thisClient = _client || new ConversationClient(options);
         const extension = {};
-        if (endpoint) {
+        if (typeof endpoint === 'string') {
             extension.url = new URL(globalThis.window?.location?.origin || 'about:blank');
             extension.endpoints = {
                 '/api/v1/conversation/complete': endpoint,
@@ -26,26 +39,16 @@ export function useConversationManager(options) {
         if (Object.keys(extension).length === 0) {
             return thisClient;
         }
-        return cloneAndExtend(thisClient, extension);
+        else {
+            return cloneAndExtend(thisClient, extension);
+        }
     }, [_client, endpoint, token]);
     const [text, setText] = useState((''));
     const [messages, setMessages] = useState(([]));
     const [thinking, setThinking] = useState(false);
     const [typing, setTyping] = useState(false);
     const [error, setError] = useState((null));
-    async function submit() {
-        if (!text) {
-            return;
-        }
-        setText('');
-        const userMessage = {
-            id: 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 {
@@ -58,7 +61,9 @@ export function useConversationManager(options) {
                     model: model,
                     datasetId: datasetId,
                     skillsetId: skillsetId,
-                    messages: newMessages.slice(-100),
+                    messages: newMessages
+                        .slice(-100)
+                        .map(({ type, text, meta }) => ({ type, text, meta })),
                 });
             }
         }
@@ -75,16 +80,37 @@ export 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: 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]);
                 }
             }
         }
@@ -95,11 +121,47 @@ export function useConversationManager(options) {
             setTyping(false);
         }
     }
+    async function submit() {
+        if (!text) {
+            return;
+        }
+        setText('');
+        const userMessage = {
+            id: 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,
@@ -119,6 +181,7 @@ export function useConversationManager(options) {
         error,
         setError,
         submit,
+        trigger,
     };
 }
 export default useConversationManager;

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

@@ -2,4 +2,5 @@ export { ChatInput } from './components/ChatInput.js';
 export { ChatMessage } from './components/ChatMessage.js';
 export { ChatMessages } from './components/ChatMessages.js';
 export { AutoTextarea } from './components/AutoTextarea.js';
+export { ConversationManager, ConversationContext, } from './components/ConversationManager.js';
 export { useConversationManager } from './hooks/useConversationManager.js';

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

@@ -0,0 +1,42 @@
+export 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));
+    });
+}
+export 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;
+                },
+            };
+        },
+    };
+}