@chatbotkit/react 1.7.0 → 1.8.1

package/dist/esm/actions/complete.d.ts

@@ -1,24 +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: Record<string, any>;
-    handler?: ((args: any) => Promise<string | import('react').ReactElement | {
-        text?: string;
-        children?: import('react').ReactElement;
-        result?: any;
-    }>) | undefined;
+    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[];
+    functions?: (InputFunction | (() => InputFunction))[];
     maxRecusion?: number;
 };
 declare function complete({ client, messages, functions, maxRecusion, ...options }: Options): any;

package/dist/esm/actions/complete.js

@@ -1,30 +1,57 @@
 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 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();
+    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;
@@ -34,20 +61,29 @@ async function* complete({ client, messages, functions, maxRecusion = 3, ...opti
             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);
+                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 {
@@ -57,6 +93,9 @@ async function* complete({ client, messages, functions, maxRecusion = 3, ...opti
                         if (isValidElement(output?.children)) {
                             children = output.children;
                         }
+                        if (typeof output?.render === 'function') {
+                            render = output.render;
+                        }
                         if (output?.result) {
                             result = output.result;
                         }
@@ -71,6 +110,33 @@ async function* complete({ client, messages, functions, maxRecusion = 3, ...opti
                             },
                         };
                     }
+                    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',

package/dist/esm/components/AutoScroller.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef } from 'react';
 function AutoScrollAnchor() {

package/dist/esm/components/AutoTextarea.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useRef } from 'react';
 export function AutoTextarea(props) {

package/dist/esm/components/ChatInput.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import AutoTextarea from './AutoTextarea.js';
 export function ChatInput(props) {

package/dist/esm/components/ChatMessage.js

@@ -1,3 +1,4 @@
+'use any';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import Markdown from 'react-markdown';

package/dist/esm/components/ChatMessages.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import AutoScroller from './AutoScroller.js';
 export function ChatMessages(props) {

package/dist/esm/components/ConversationManager.js

@@ -1,33 +1,19 @@
+'use client';
 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: () => { },
+    message: null,
     messages: [],
-    setMessages: () => { },
     thinking: false,
-    setThinking: () => { },
     typing: false,
-    setTyping: () => { },
+    text: '',
+    setText: () => { },
     error: null,
     setError: () => { },
-    submit: () => { },
-    trigger: () => { },
+    submit: async () => false,
+    trigger: async () => false,
+    request: async () => false,
 }));
 export function ConversationManager({ children, ...options }) {
     const manager = useConversationManager(options);

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

@@ -1,63 +1,25 @@
-export function useConversationManager(options: UseConversationManagerOptions): UseConversationManagerResult;
+export function useConversationManager({ ...conversationManagerRemoteOptions }: UseConversationManagerOptions): UseConversationManagerResult;
 export default useConversationManager;
-export type ModelConfig = {
-    maxTokens?: number;
-    temperature?: number;
-    frequencyPenalty?: number;
-    presencePenalty?: number;
-    seed?: number;
-    interactionMaxMessages?: number;
-    region?: 'us' | 'eu';
+export type Message = import('@chatbotkit/sdk/conversation/v1').Message;
+export type SimpleMessage = Message & {
+    id: string;
 };
-export type Model = string | {
-    name: string;
-    config?: ModelConfig;
-};
-export type Message = {
-    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 ComplexMessage = Message & {
+    id: string;
+    children?: import('react').ReactNode;
 };
+export type UseConversationManagerRemoteOptions = import('./useConversationManagerRemote.js').UseConversationManagerRemoteOptions;
+export type UseConversationManagerOptions = UseConversationManagerRemoteOptions & {};
 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;
+    message: SimpleMessage | null;
+    messages: ComplexMessage[];
     thinking: boolean;
-    setThinking: (thinking: boolean) => void;
     typing: boolean;
-    setTyping: (typing: boolean) => void;
+    text: string;
+    setText: (text: string) => void;
     error: any;
     setError: (error: any) => void;
-    submit: () => void;
-    trigger: (name: string, ...args: any) => void;
+    submit: () => Promise<boolean>;
+    trigger: (name: string) => Promise<boolean>;
+    request: (name: string, args: any) => Promise<boolean>;
 };
-import { ConversationClient } from '@chatbotkit/sdk';

package/dist/esm/hooks/useConversationManager.js

@@ -1,187 +1,127 @@
-import { useMemo, useState } from 'react';
-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, 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 (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]);
+'use client';
+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 stream(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)
-                        .map(({ type, text, meta }) => ({ type, text, meta })),
-                });
-            }
-        }
-        catch (e) {
-            setThinking(false);
-            setError(e);
-            return;
-        }
-        const botMessage = {
-            id: getRandomId('message-'),
-            type: 'bot',
-            text: '',
-        };
-        let alreadyStreaming = false;
+        const allMessages = [
+            ...messages.map(({ type, text, meta }) => {
+                return {
+                    type,
+                    text,
+                    meta,
+                };
+            }),
+            ...(newMessages?.map(({ type, text, meta }) => {
+                return {
+                    type,
+                    text,
+                    meta,
+                };
+            }) || []),
+        ].slice(-100);
         try {
-            for await (const event of it.stream()) {
-                switch (event.type) {
+            setThinking(true);
+            setError(null);
+            for await (const item of remote(allMessages)) {
+                switch (item.type) {
                     case 'token': {
-                        if (!alreadyStreaming) {
-                            alreadyStreaming = true;
-                            newMessages = [...newMessages, botMessage];
-                            setMessages(newMessages);
-                            setThinking(false);
-                            setTyping(true);
-                        }
-                        botMessage.text += event.data.token;
-                        setMessages([...newMessages]);
+                        appendText(item.data.token);
                         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]);
-                        }
+                        appendMessage(item.data);
                         break;
                     }
-                    case 'result': {
-                        setThinking(false);
-                        setTyping(false);
-                    }
                 }
             }
         }
         catch (e) {
             setError(e);
+            if (typeof process !== 'undefined' &&
+                process.env.NODE_ENV === 'development') {
+                console.error(e);
+            }
         }
         finally {
+            setThinking(false);
             setTyping(false);
         }
     }
-    async function submit() {
-        if (!text) {
-            return;
+    async function submit(thisText) {
+        if (thinking || typing) {
+            return false;
+        }
+        if (!thisText) {
+            if (!text) {
+                return false;
+            }
+            thisText = text;
+            setText('');
         }
-        setText('');
         const userMessage = {
-            id: getRandomId('message-'),
             type: 'user',
-            text: text,
+            text: thisText,
         };
-        let newMessages = messages.slice(0);
-        newMessages = [...newMessages, userMessage];
-        setMessages([...newMessages]);
-        await stream(newMessages);
+        appendMessage(userMessage);
+        await stream([userMessage]);
+        return true;
     }
-    async function trigger(name, ...args) {
-        const newMessages = [
-            ...messages,
-            ({
-                type: 'activity',
-                text: '',
-                meta: {
-                    activity: {
-                        type: 'trigger',
-                        function: {
-                            name: name,
-                            arguments: args,
-                        },
+    async function trigger(name) {
+        if (thinking || typing) {
+            return false;
+        }
+        const activityMessage = {
+            type: 'activity',
+            text: '',
+            meta: {
+                activity: {
+                    type: 'trigger',
+                    function: {
+                        name: name,
                     },
                 },
-            }),
-        ];
-        await stream(newMessages);
+            },
+        };
+        await stream([activityMessage]);
+        return true;
+    }
+    async function request(name, args) {
+        if (thinking || typing) {
+            return false;
+        }
+        const activityMessage = {
+            type: 'activity',
+            text: '',
+            meta: {
+                activity: {
+                    type: 'request',
+                    function: {
+                        name: name,
+                        arguments: args,
+                    },
+                },
+            },
+        };
+        await stream([activityMessage]);
+        return true;
     }
     return {
-        token,
-        setToken,
-        conversationId,
-        setConversationId,
-        botId,
-        setBotId,
-        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';