@chatbotkit/react 1.6.0 → 1.8.0

package/dist/cjs/hooks/useConversationManager.cjs

@@ -1,142 +1,127 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useConversationManager = void 0;
+const tslib_1 = require("tslib");
 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");
-function useConversationManager(options) {
-    const { client: _client, endpoint, token: _token, conversationId: _conversationId, 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 [backstory, setBackstory] = (0, react_1.useState)(_backstory);
-    const [model, setModel] = (0, react_1.useState)(_model);
-    const [datasetId, setDatasetId] = (0, react_1.useState)(_datasetId);
-    const [skillsetId, setSkillsetId] = (0, react_1.useState)(_skillsetId);
-    const client = (0, react_1.useMemo)(() => {
-        var _a, _b;
-        if (typeof endpoint === 'function') {
-            return {
-                complete(conversationId, options) {
-                    return {
-                        async *stream() {
-                            yield* (0, stream_js_1.consume)(endpoint(conversationId, options));
-                        },
-                    };
-                },
-            };
-        }
-        const options = { ...rest, secret: token || '' };
-        let thisClient = _client || new sdk_1.ConversationClient(options);
-        const extension = {};
-        if (typeof endpoint === 'string') {
-            extension.url = new URL(((_b = (_a = globalThis.window) === null || _a === void 0 ? void 0 : _a.location) === null || _b === void 0 ? void 0 : _b.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 (0, object_js_1.cloneAndExtend)(thisClient, extension);
-        }
-    }, [_client, endpoint, token]);
+const useConversationManagerRemote_js_1 = tslib_1.__importDefault(require("./useConversationManagerRemote.cjs"));
+const useConversationManagerState_js_1 = require("./useConversationManagerState.cjs");
+function useConversationManager({ ...conversationManagerRemoteOptions }) {
+    const remote = (0, useConversationManagerRemote_js_1.default)(conversationManagerRemoteOptions);
+    const [{ thinking, typing, message, messages, }, { setThinking, setTyping, appendText, appendMessage, },] = (0, useConversationManagerState_js_1.useConversationManagerState)();
     const [text, setText] = (0, react_1.useState)((''));
-    const [messages, setMessages] = (0, react_1.useState)(([]));
-    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]);
-        setThinking(true);
-        let it;
+    async function stream(newMessages) {
+        const allMessages = [
+            ...messages.map(({ type, text, meta }) => {
+                return {
+                    type,
+                    text,
+                    meta,
+                };
+            }),
+            ...((newMessages === null || newMessages === void 0 ? void 0 : 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: (0, string_js_1.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,
     };
 }
 exports.useConversationManager = useConversationManager;

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

@@ -1,57 +1,18 @@
-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>>;
+export function useConversationManager({ ...conversationManagerRemoteOptions }: UseConversationManagerOptions): UseConversationManagerResult;
+export default useConversationManager;
+export type Message = any;
+export type UseConversationManagerRemoteOptions = import('./useConversationManagerRemote.cjs').UseConversationManagerRemoteOptions;
+export type UseConversationManagerOptions = UseConversationManagerRemoteOptions & {};
+export type UseConversationManagerResult = {
+    message: any;
     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/cjs/hooks/useConversationManagerRemote.cjs

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConversationManagerRemote = void 0;
+const react_1 = require("react");
+const object_js_1 = require("../utils/object.cjs");
+const stream_js_1 = require("../utils/stream.cjs");
+const sdk_1 = require("@chatbotkit/sdk");
+function useConversationManagerRemote({ client: _client, endpoint, conversationId, token, backstory, model, datasetId, skillsetId, privacy, moderation, ...rest }) {
+    const client = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if (typeof endpoint === 'function') {
+            return {
+                complete(conversationId, options) {
+                    return {
+                        async *stream() {
+                            yield* (0, stream_js_1.consume)(endpoint(options));
+                        },
+                    };
+                },
+            };
+        }
+        const options = { ...rest, secret: token || '' };
+        let thisClient = _client || new sdk_1.ConversationClient(options);
+        const extension = {};
+        if (typeof endpoint === 'string') {
+            extension.url = new URL(((_b = (_a = globalThis.window) === null || _a === void 0 ? void 0 : _a.location) === null || _b === void 0 ? void 0 : _b.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 (0, object_js_1.cloneAndExtend)(thisClient, extension);
+        }
+    }, [_client, endpoint, token]);
+    const remote = (0, react_1.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;
+}
+exports.useConversationManagerRemote = useConversationManagerRemote;
+exports.default = useConversationManagerRemote;

package/dist/cjs/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 = any;
+export type Model = any;
+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/cjs/hooks/useConversationManagerState.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConversationManagerState = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const useConversationManagerStateReducer_js_1 = tslib_1.__importDefault(require("./useConversationManagerStateReducer.cjs"));
+function useConversationManagerState(state) {
+    const [_, dispatch] = (0, useConversationManagerStateReducer_js_1.default)(state);
+    const setThinking = (0, react_1.useCallback)((thinking) => {
+        dispatch({ type: 'setThinking', data: { thinking } });
+    }, [dispatch]);
+    const setTyping = (0, react_1.useCallback)((typing) => {
+        dispatch({ type: 'setTyping', data: { typing } });
+    }, [dispatch]);
+    const appendText = (0, react_1.useCallback)((text) => {
+        dispatch({ type: 'appendText', data: { text } });
+    }, [dispatch]);
+    const appendMessage = (0, react_1.useCallback)((message) => {
+        dispatch({ type: 'appendMessage', data: { message } });
+    }, [dispatch]);
+    return [
+        _,
+        {
+            setThinking,
+            setTyping,
+            appendText,
+            appendMessage,
+        },
+    ];
+}
+exports.useConversationManagerState = useConversationManagerState;
+exports.default = useConversationManagerState;

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

@@ -0,0 +1,10 @@
+export function useConversationManagerState(state?: Partial<State>): [State, StateFunctions];
+export default useConversationManagerState;
+export type Message = any;
+export type State = import('./useConversationManagerStateReducer.cjs').State;
+export type StateFunctions = {
+    setThinking: (thinking: boolean) => void;
+    setTyping: (typing: boolean) => void;
+    appendText: (text: string) => void;
+    appendMessage: (message: any) => void;
+};

package/dist/cjs/hooks/useConversationManagerStateReducer.cjs

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConversationManagerStateReducer = exports.conversationManagerStateInitial = exports.conversationManagerStateReducer = void 0;
+const react_1 = require("react");
+const string_js_1 = require("../utils/string.cjs");
+function conversationManagerStateReducer(state, action) {
+    var _a;
+    switch (action.type) {
+        case 'setThinking': {
+            const { thinking } = action.data;
+            const extra = {};
+            if (thinking) {
+                extra.typing = false;
+                extra.message = null;
+            }
+            return {
+                ...state,
+                ...extra,
+                thinking,
+            };
+        }
+        case 'setTyping': {
+            const { typing } = action.data;
+            const extra = {};
+            if (typing) {
+                extra.thinking = false;
+                extra.message = null;
+            }
+            return {
+                ...state,
+                ...extra,
+                typing,
+            };
+        }
+        case 'appendText': {
+            const { text } = action.data;
+            const extra = {
+                thinking: false,
+                typing: true,
+            };
+            const message = state.message
+                ? ({ ...state.message })
+                : ({
+                    id: (0, string_js_1.getRandomId)('tmp-'),
+                    type: 'bot',
+                    text: '',
+                });
+            message.text += text;
+            return {
+                ...state,
+                ...extra,
+                message,
+            };
+        }
+        case 'appendMessage': {
+            const { message } = action.data;
+            const extra = {};
+            if (message.type === 'bot') {
+                if (message.text === ((_a = state.message) === null || _a === void 0 ? void 0 : _a.text)) {
+                    extra.typing = false;
+                    extra.message = null;
+                }
+            }
+            const messages = state.messages.slice(0);
+            if (message.id) {
+                const index = messages.findIndex((m) => m.id === message.id);
+                if (index !== -1) {
+                    messages[index] = {
+                        ...messages[index],
+                        ...message,
+                    };
+                }
+                else {
+                    messages.push({
+                        ...message,
+                        id: message.id || (0, string_js_1.getRandomId)('tmp-'),
+                    });
+                }
+            }
+            else {
+                messages.push({
+                    ...message,
+                    id: (0, string_js_1.getRandomId)('tmp-'),
+                });
+            }
+            return {
+                ...state,
+                ...extra,
+                messages,
+            };
+        }
+        default: {
+            throw new Error(`Unhandled action`);
+        }
+    }
+}
+exports.conversationManagerStateReducer = conversationManagerStateReducer;
+function conversationManagerStateInitial(state) {
+    return {
+        message: null,
+        messages: [],
+        thinking: false,
+        typing: false,
+        ...state,
+    };
+}
+exports.conversationManagerStateInitial = conversationManagerStateInitial;
+function useConversationManagerStateReducer(state) {
+    return (0, react_1.useReducer)(conversationManagerStateReducer, state, conversationManagerStateInitial);
+}
+exports.useConversationManagerStateReducer = useConversationManagerStateReducer;
+exports.default = useConversationManagerStateReducer;

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

@@ -0,0 +1,42 @@
+export function conversationManagerStateReducer(state: State, action: Action): State;
+export function conversationManagerStateInitial(state?: Partial<State>): State;
+export function useConversationManagerStateReducer(state?: Partial<State>): [State, import('react').Dispatch<Action>];
+export default useConversationManagerStateReducer;
+export type Message = any;
+export type MessageWithId = {
+    id: string;
+} & Message;
+export type MessageWithOptionalId = {
+    id?: string;
+} & Message;
+export type State = {
+    thinking: boolean;
+    typing: boolean;
+    message: MessageWithId | null;
+    messages: MessageWithId[];
+};
+export type SetThinkingAction = {
+    type: 'setThinking';
+    data: {
+        thinking: boolean;
+    };
+};
+export type SetTypingAction = {
+    type: 'setTyping';
+    data: {
+        typing: boolean;
+    };
+};
+export type AppendTextAction = {
+    type: 'appendText';
+    data: {
+        text: string;
+    };
+};
+export type AppendMessageAction = {
+    type: 'appendMessage';
+    data: {
+        message: MessageWithOptionalId;
+    };
+};
+export type Action = SetThinkingAction | SetTypingAction | AppendTextAction | AppendMessageAction;

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/it.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isAsyncGenerator = void 0;
+function isAsyncGenerator(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        typeof value[Symbol.asyncIterator] === 'function');
+}
+exports.isAsyncGenerator = isAsyncGenerator;

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

@@ -0,0 +1 @@
+export function isAsyncGenerator(value: any): boolean;

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) => {