@chatbotkit/react 1.6.0 → 1.7.0

package/dist/cjs/actions/complete.cjs

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.streamComplete = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const stream_js_1 = require("../utils/stream.cjs");
+async function* complete({ client, messages, functions, maxRecusion = 3, ...options }) {
+    var _a, _b, _c, _d;
+    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 === null || functions === void 0 ? void 0 : 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 (((_b = (_a = message.meta) === null || _a === void 0 ? void 0 : _a.activity) === null || _b === void 0 ? void 0 : _b.type) === 'request') {
+                const name = (_c = message.meta.activity.function) === null || _c === void 0 ? void 0 : _c.name;
+                const args = (_d = message.meta.activity.function) === null || _d === void 0 ? void 0 : _d.arguments;
+                const fn = functions === null || functions === void 0 ? void 0 : 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 ((0, react_1.isValidElement)(output)) {
+                        text = '';
+                        children = output;
+                        result = undefined;
+                    }
+                    else {
+                        if (typeof (output === null || output === void 0 ? void 0 : output.text) === 'string') {
+                            text = output.text;
+                        }
+                        if ((0, react_1.isValidElement)(output === null || output === void 0 ? void 0 : output.children)) {
+                            children = output.children;
+                        }
+                        if (output === null || output === void 0 ? void 0 : output.result) {
+                            result = output.result;
+                        }
+                    }
+                    if (text || children) {
+                        yield {
+                            type: 'message',
+                            data: {
+                                type: 'bot',
+                                text: text ? text : '',
+                                children: children ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.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,
+                        });
+                    }
+                }
+            }
+        }
+    }
+}
+function streamComplete(options) {
+    return (0, stream_js_1.stream)(complete(options));
+}
+exports.streamComplete = streamComplete;
+exports.default = complete;

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

@@ -0,0 +1,24 @@
+export function streamComplete(options: Options): import('../utils/stream.cjs').StreamResult;
+export default complete;
+export type InputMessage = {
+    type: 'bot' | 'user' | 'context' | 'instruction' | 'backstory' | 'activity';
+    text: string;
+    meta?: Record<string, 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;
+    }>;
+};
+export type Options = Omit<any, 'messages' | 'functions'> & {
+    client: import('@chatbotkit/sdk').ConversationClient;
+    messages: InputMessage[];
+    functions?: InputFunction[];
+    maxRecusion?: number;
+};
+declare function complete({ client, messages, functions, maxRecusion, ...options }: Options): any;

package/dist/cjs/components/ConversationManager.cjs

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConversationManager = exports.ConversationContext = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useConversationManager_js_1 = tslib_1.__importDefault(require("../hooks/useConversationManager.cjs"));
+exports.ConversationContext = (0, react_1.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: () => { },
+}));
+function ConversationManager({ children, ...options }) {
+    const manager = (0, useConversationManager_js_1.default)(options);
+    return ((0, jsx_runtime_1.jsx)(exports.ConversationContext.Provider, { value: manager, children: children }));
+}
+exports.ConversationManager = ConversationManager;
+exports.default = ConversationManager;

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

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

package/dist/cjs/hooks/useConversationManager.cjs

@@ -2,14 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useConversationManager = void 0;
 const react_1 = require("react");
-const sdk_1 = require("@chatbotkit/sdk");
-const string_js_1 = require("../utils/string.cjs");
 const object_js_1 = require("../utils/object.cjs");
 const stream_js_1 = require("../utils/stream.cjs");
+const string_js_1 = require("../utils/string.cjs");
+const sdk_1 = require("@chatbotkit/sdk");
 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] = (0, react_1.useState)(_token);
     const [conversationId, setConversationId] = (0, react_1.useState)(_conversationId);
+    const [botId, setBotId] = (0, react_1.useState)(_botId);
     const [backstory, setBackstory] = (0, react_1.useState)(_backstory);
     const [model, setModel] = (0, react_1.useState)(_model);
     const [datasetId, setDatasetId] = (0, react_1.useState)(_datasetId);
@@ -51,19 +52,7 @@ function useConversationManager(options) {
     const [thinking, setThinking] = (0, react_1.useState)(false);
     const [typing, setTyping] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)((null));
-    async function submit() {
-        if (!text) {
-            return;
-        }
-        setText('');
-        const userMessage = {
-            id: (0, string_js_1.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 {
@@ -76,7 +65,9 @@ function useConversationManager(options) {
                     model: model,
                     datasetId: datasetId,
                     skillsetId: skillsetId,
-                    messages: newMessages.slice(-100),
+                    messages: newMessages
+                        .slice(-100)
+                        .map(({ type, text, meta }) => ({ type, text, meta })),
                 });
             }
         }
@@ -93,16 +84,37 @@ 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: (0, string_js_1.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]);
                 }
             }
         }
@@ -113,11 +125,47 @@ function useConversationManager(options) {
             setTyping(false);
         }
     }
+    async function submit() {
+        if (!text) {
+            return;
+        }
+        setText('');
+        const userMessage = {
+            id: (0, string_js_1.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,
@@ -137,6 +185,7 @@ function useConversationManager(options) {
         error,
         setError,
         submit,
+        trigger,
     };
 }
 exports.useConversationManager = useConversationManager;

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

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useConversationManager = exports.AutoTextarea = exports.ChatMessages = exports.ChatMessage = exports.ChatInput = void 0;
+exports.useConversationManager = exports.ConversationContext = exports.ConversationManager = exports.AutoTextarea = exports.ChatMessages = exports.ChatMessage = exports.ChatInput = void 0;
 var ChatInput_js_1 = require("./components/ChatInput.cjs");
 Object.defineProperty(exports, "ChatInput", { enumerable: true, get: function () { return ChatInput_js_1.ChatInput; } });
 var ChatMessage_js_1 = require("./components/ChatMessage.cjs");
@@ -9,5 +9,8 @@ var ChatMessages_js_1 = require("./components/ChatMessages.cjs");
 Object.defineProperty(exports, "ChatMessages", { enumerable: true, get: function () { return ChatMessages_js_1.ChatMessages; } });
 var AutoTextarea_js_1 = require("./components/AutoTextarea.cjs");
 Object.defineProperty(exports, "AutoTextarea", { enumerable: true, get: function () { return AutoTextarea_js_1.AutoTextarea; } });
+var ConversationManager_js_1 = require("./components/ConversationManager.cjs");
+Object.defineProperty(exports, "ConversationManager", { enumerable: true, get: function () { return ConversationManager_js_1.ConversationManager; } });
+Object.defineProperty(exports, "ConversationContext", { enumerable: true, get: function () { return ConversationManager_js_1.ConversationContext; } });
 var useConversationManager_js_1 = require("./hooks/useConversationManager.cjs");
 Object.defineProperty(exports, "useConversationManager", { enumerable: true, get: function () { return useConversationManager_js_1.useConversationManager; } });

package/dist/cjs/index.d.ts

@@ -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/cjs/utils/stream.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.consume = exports.stream = void 0;
-async function stream(source) {
+function stream(source) {
     let it;
     if ('next' in source && typeof source.next === 'function') {
         it = source.next();
@@ -10,7 +10,7 @@ async function stream(source) {
         return stream(source.stream());
     }
     else {
-        throw new Error('Invald source');
+        throw new Error('Invalid source');
     }
     return new Promise((resolve, reject) => {
         it.then((res) => {

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,24 @@
+export function streamComplete(options: Options): import('../utils/stream.js').StreamResult;
+export default complete;
+export type InputMessage = {
+    type: 'bot' | 'user' | 'context' | 'instruction' | 'backstory' | 'activity';
+    text: string;
+    meta?: Record<string, 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;
+};
+export type Options = Omit<import('@chatbotkit/sdk/conversation/v1.js').ConversationCompleteRequest, 'messages' | 'functions'> & {
+    client: import('@chatbotkit/sdk').ConversationClient;
+    messages: InputMessage[];
+    functions?: InputFunction[];
+    maxRecusion?: number;
+};
+declare function complete({ client, messages, functions, maxRecusion, ...options }: Options): any;

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/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;