@chatbotkit/react 1.6.0 → 1.8.0

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

@@ -1,7 +1,6 @@
-export function stream(source: any): Promise<any>;
-export function consume(source: any): {
-    [Symbol.asyncIterator]: () => {
-        current: any;
-        next(): Promise<any>;
-    };
-};
+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,38 @@
+export function streamComplete(options: Options): import('../utils/stream.js').StreamResult;
+export default complete;
+export type ReactElement = import('react').ReactElement;
+export type ReactNode = import('react').ReactNode;
+export type BasicParametersSchema = Record<string, any>;
+export type ValidatingParametersSchema = {
+    schema: BasicParametersSchema;
+    validate(value: any): Promise<{
+        valid: boolean;
+        error?: Error;
+    }>;
+};
+export type InputMessage = {
+    type: 'bot' | 'user' | 'context' | 'instruction' | 'backstory' | 'activity';
+    text: string;
+    meta?: Record<string, any>;
+};
+export type RenderFunction = () => AsyncGenerator<ReactNode> | ReactNode | Promise<ReactNode>;
+export type HandlerArgs = any;
+export type HandlerResult = string | ReactElement | {
+    text?: string;
+    children?: ReactNode;
+    render: RenderFunction;
+    result?: any;
+};
+export type InputFunction = {
+    name: string;
+    description: string;
+    parameters: BasicParametersSchema | ValidatingParametersSchema;
+    handler?: ((args: HandlerArgs) => Promise<HandlerResult>) | undefined;
+};
+export type Options = Omit<import('@chatbotkit/sdk/conversation/v1.js').ConversationCompleteRequest, 'messages' | 'functions'> & {
+    client: import('@chatbotkit/sdk').ConversationClient;
+    messages: InputMessage[];
+    functions?: (InputFunction | (() => InputFunction))[];
+    maxRecusion?: number;
+};
+declare function complete({ client, messages, functions, maxRecusion, ...options }: Options): any;

package/dist/esm/actions/complete.js

@@ -0,0 +1,173 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { isValidElement } from 'react';
+import { isAsyncGenerator } from '../utils/it.js';
+import { stream } from '../utils/stream.js';
+import { getRandomId } from '../utils/string.js';
+async function* complete({ client, messages, functions, maxRecusion = 3, ...options }) {
+    if (maxRecusion <= 0) {
+        return;
+    }
+    messages = messages.slice(0);
+    const functionDefinitions = functions?.map((fn) => {
+        if (typeof fn === 'function') {
+            return fn();
+        }
+        else {
+            return fn;
+        }
+    });
+    let it;
+    if (!it) {
+        const lastMessage = messages[messages.length - 1];
+        if (lastMessage) {
+            if (lastMessage.type === 'activity') {
+                if (lastMessage.meta?.activity?.type === 'request') {
+                    messages.pop();
+                    it = [{ type: 'message', data: lastMessage }];
+                }
+            }
+        }
+    }
+    if (!it) {
+        it = client
+            .complete(null, {
+            ...options,
+            messages: messages.map(({ type, text, meta }) => {
+                return {
+                    type,
+                    text,
+                    meta,
+                };
+            }),
+            functions: functionDefinitions?.map(({ name, description, parameters }) => {
+                return {
+                    name,
+                    description,
+                    parameters: parameters.schema ? parameters.schema : parameters,
+                };
+            }),
+        })
+            .stream();
+    }
+    if (!it) {
+        throw new Error('No stream iterator');
+    }
+    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 = functionDefinitions?.find((fn) => fn.name === name);
+                if (fn && typeof fn.handler === 'function') {
+                    if (fn.parameters.validate) {
+                        const { valid, error } = await fn.parameters.validate(args);
+                        if (!valid) {
+                            throw error || new Error('Invalid arguments');
+                        }
+                    }
+                    const output = await fn.handler(args);
+                    let text;
+                    let children;
+                    let result;
+                    let render;
+                    if (typeof output === 'string') {
+                        text = undefined;
+                        children = undefined;
+                        render = undefined;
+                        result = output;
+                    }
+                    else if (isValidElement(output)) {
+                        text = '';
+                        children = output;
+                        render = undefined;
+                        result = undefined;
+                    }
+                    else {
+                        if (typeof output?.text === 'string') {
+                            text = output.text;
+                        }
+                        if (isValidElement(output?.children)) {
+                            children = output.children;
+                        }
+                        if (typeof output?.render === 'function') {
+                            render = output.render;
+                        }
+                        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,
+                            },
+                        };
+                    }
+                    else if (text || render) {
+                        const result = await render?.();
+                        if (isAsyncGenerator(result)) {
+                            const id = getRandomId('tmp-');
+                            for await (const item of (result)) {
+                                yield {
+                                    type: 'message',
+                                    data: {
+                                        id: id,
+                                        type: 'bot',
+                                        text: text ? text : '',
+                                        children: item,
+                                    },
+                                };
+                            }
+                        }
+                        else {
+                            yield {
+                                type: 'message',
+                                data: {
+                                    type: 'bot',
+                                    text: text ? text : '',
+                                    children: _jsx(_Fragment, { children: result }),
+                                },
+                            };
+                        }
+                    }
+                    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/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,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext } from 'react';
+import useConversationManager from '../hooks/useConversationManager.js';
+export const ConversationContext = createContext(({
+    message: null,
+    messages: [],
+    thinking: false,
+    typing: false,
+    text: '',
+    setText: () => { },
+    error: null,
+    setError: () => { },
+    submit: () => { },
+    trigger: () => { },
+    request: () => { },
+}));
+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,57 +1,18 @@
-export function useConversationManager(options: {
-    [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;
-}): {
-    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>>;
+export function useConversationManager({ ...conversationManagerRemoteOptions }: UseConversationManagerOptions): UseConversationManagerResult;
+export default useConversationManager;
+export type Message = import('@chatbotkit/sdk/conversation/v1').Message;
+export type UseConversationManagerRemoteOptions = import('./useConversationManagerRemote.js').UseConversationManagerRemoteOptions;
+export type UseConversationManagerOptions = UseConversationManagerRemoteOptions & {};
+export type UseConversationManagerResult = {
+    message: Message | null;
     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 default useConversationManager;
-export type ModelConfig = {
-    maxTokens?: number;
-    temperature?: number;
-    frequencyPenalty?: number;
-    presencePenalty?: number;
-    seed?: number;
-    interactionMaxMessages?: number;
-    region?: 'us' | 'eu';
-};
-export type Model = string | {
-    name: string;
-    config?: ModelConfig;
-};
-export type Message = {
-    id: string;
-    type: 'bot' | 'user';
     text: string;
+    setText: (text: string) => void;
+    error: any;
+    setError: (error: any) => void;
+    submit: () => void;
+    trigger: (name: string) => void;
+    request: (name: string, args: any) => void;
 };
-export type EndpointURL = string;
-export type EndpointFunction = (conversationId: any, request: any) => AsyncGenerator<any>;
-import { ConversationClient } from '@chatbotkit/sdk';

package/dist/esm/hooks/useConversationManager.js

@@ -1,138 +1,123 @@
-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';
-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 [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(() => {
-        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 (typeof endpoint === 'string') {
-            extension.url = new URL(globalThis.window?.location?.origin || 'about:blank');
-            extension.endpoints = {
-                '/api/v1/conversation/complete': endpoint,
-            };
-        }
-        if (token) {
-            extension.secret = token;
-        }
-        if (Object.keys(extension).length === 0) {
-            return thisClient;
-        }
-        else {
-            return cloneAndExtend(thisClient, extension);
-        }
-    }, [_client, endpoint, token]);
+import { useState } from 'react';
+import useConversationManagerRemote from './useConversationManagerRemote.js';
+import { useConversationManagerState } from './useConversationManagerState.js';
+export function useConversationManager({ ...conversationManagerRemoteOptions }) {
+    const remote = useConversationManagerRemote(conversationManagerRemoteOptions);
+    const [{ thinking, typing, message, messages, }, { setThinking, setTyping, appendText, appendMessage, },] = useConversationManagerState();
     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]);
-        setThinking(true);
-        let it;
+    async function stream(newMessages) {
+        const allMessages = [
+            ...messages.map(({ type, text, meta }) => {
+                return {
+                    type,
+                    text,
+                    meta,
+                };
+            }),
+            ...(newMessages?.map(({ type, text, meta }) => {
+                return {
+                    type,
+                    text,
+                    meta,
+                };
+            }) || []),
+        ].slice(-100);
         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),
-                });
-            }
-        }
-        catch (e) {
-            setThinking(false);
-            setError(e);
-            return;
-        }
-        const botMessage = {
-            id: getRandomId('message-'),
-            type: 'bot',
-            text: '',
-        };
-        let alreadyStreaming = false;
-        try {
-            for await (const event of it.stream()) {
-                if (event.type === 'token') {
-                    if (!alreadyStreaming) {
-                        alreadyStreaming = true;
-                        newMessages = [...newMessages, botMessage];
-                        setMessages(newMessages);
-                        setThinking(false);
-                        setTyping(true);
+            setThinking(true);
+            setError(null);
+            for await (const item of remote(allMessages)) {
+                switch (item.type) {
+                    case 'token': {
+                        appendText(item.data.token);
+                        break;
+                    }
+                    case 'message': {
+                        appendMessage(item.data);
+                        break;
                     }
-                    botMessage.text += event.data.token;
-                    setMessages([...newMessages]);
                 }
             }
         }
         catch (e) {
             setError(e);
+            if (typeof process !== 'undefined' &&
+                process.env.NODE_ENV === 'development') {
+                console.error(e);
+            }
         }
         finally {
+            setThinking(false);
             setTyping(false);
         }
     }
+    async function submit(thisText) {
+        if (thinking || typing) {
+            return;
+        }
+        if (!thisText) {
+            if (!text) {
+                return;
+            }
+            thisText = text;
+            setText('');
+        }
+        const userMessage = {
+            type: 'user',
+            text: thisText,
+        };
+        appendMessage(userMessage);
+        await stream([userMessage]);
+    }
+    async function trigger(name) {
+        if (thinking || typing) {
+            return;
+        }
+        const activityMessage = {
+            type: 'activity',
+            text: '',
+            meta: {
+                activity: {
+                    type: 'trigger',
+                    function: {
+                        name: name,
+                    },
+                },
+            },
+        };
+        await stream([activityMessage]);
+    }
+    async function request(name, args) {
+        if (thinking || typing) {
+            return;
+        }
+        const activityMessage = {
+            type: 'activity',
+            text: '',
+            meta: {
+                activity: {
+                    type: 'request',
+                    function: {
+                        name: name,
+                        arguments: args,
+                    },
+                },
+            },
+        };
+        await stream([activityMessage]);
+    }
     return {
-        token,
-        setToken,
-        conversationId,
-        setConversationId,
-        backstory,
-        setBackstory,
-        model,
-        setModel,
-        datasetId,
-        setDatasetId,
-        skillsetId,
-        setSkillsetId,
-        text,
-        setText,
+        message,
         messages,
-        setMessages,
         thinking,
-        setThinking,
         typing,
-        setTyping,
+        text,
+        setText,
         error,
         setError,
         submit,
+        trigger,
+        request,
     };
 }
 export default useConversationManager;

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

@@ -0,0 +1,20 @@
+export function useConversationManagerRemote({ client: _client, endpoint, conversationId, token, backstory, model, datasetId, skillsetId, privacy, moderation, ...rest }: UseConversationManagerRemoteOptions): UseConversationManagerRemoteResult;
+export default useConversationManagerRemote;
+export type Message = import('@chatbotkit/sdk/conversation/v1').Message;
+export type Model = import('@chatbotkit/sdk/model/v1').Model;
+export type EndpointURL = string;
+export type EndpointFunction = (options: any) => AsyncGenerator<any>;
+export type UseConversationManagerRemoteOptions = {
+    client?: ConversationClient;
+    endpoint?: EndpointURL | EndpointFunction;
+    conversationId?: string;
+    token?: string;
+    backstory?: string;
+    model?: Model;
+    datasetId?: string;
+    skillsetId?: string;
+    privacy?: boolean;
+    moderation?: boolean;
+};
+export type UseConversationManagerRemoteResult = (messages: Message[]) => AsyncGenerator<any, void, any>;
+import { ConversationClient } from '@chatbotkit/sdk';

package/dist/esm/hooks/useConversationManagerRemote.js

@@ -0,0 +1,78 @@
+import { useMemo } from 'react';
+import { cloneAndExtend } from '../utils/object.js';
+import { consume } from '../utils/stream.js';
+import { ConversationClient } from '@chatbotkit/sdk';
+export function useConversationManagerRemote({ client: _client, endpoint, conversationId, token, backstory, model, datasetId, skillsetId, privacy, moderation, ...rest }) {
+    const client = useMemo(() => {
+        if (typeof endpoint === 'function') {
+            return {
+                complete(conversationId, options) {
+                    return {
+                        async *stream() {
+                            yield* consume(endpoint(options));
+                        },
+                    };
+                },
+            };
+        }
+        const options = { ...rest, secret: token || '' };
+        let thisClient = _client || new ConversationClient(options);
+        const extension = {};
+        if (typeof endpoint === 'string') {
+            extension.url = new URL(globalThis.window?.location?.origin || 'about:blank');
+            extension.endpoints = {
+                '/api/v1/conversation/complete': endpoint,
+            };
+        }
+        if (token) {
+            extension.secret = token;
+        }
+        if (Object.keys(extension).length === 0) {
+            return thisClient;
+        }
+        else {
+            return cloneAndExtend(thisClient, extension);
+        }
+    }, [_client, endpoint, token]);
+    const remote = useMemo(() => {
+        if (conversationId) {
+            return (async function* (messages) {
+                const lastUserMessage = [...messages]
+                    .reverse()
+                    .find((message) => message.type === 'user');
+                if (!lastUserMessage) {
+                    throw new Error('No user message found');
+                }
+                yield* client
+                    .complete(conversationId, { text: lastUserMessage.text })
+                    .stream();
+            });
+        }
+        else {
+            return (async function* (messages) {
+                yield* client
+                    .complete(null, {
+                    backstory: backstory,
+                    model: model,
+                    datasetId: datasetId,
+                    skillsetId: skillsetId,
+                    privacy: privacy,
+                    moderation: moderation,
+                    messages: messages,
+                })
+                    .stream();
+            });
+        }
+    }, [
+        client,
+        conversationId,
+        backstory,
+        model,
+        datasetId,
+        skillsetId,
+        privacy,
+        moderation,
+    ]);
+    return remote;
+}
+export default useConversationManagerRemote;