@chatbotkit/react 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @chatbotkit/react
+
+## 0.2.0
+
+### Minor Changes
+
+- Now with a functional React SDK.
+
+### Patch Changes
+
+- Updated dependencies
+  - @chatbotkit/sdk@0.8.0

package/README.md

@@ -0,0 +1,136 @@
+[![Follow on Twitter](https://img.shields.io/twitter/follow/chatbotkit.svg?logo=twitter)](https://twitter.com/chatbotkit)
+[![NPM](https://img.shields.io/npm/v/@chatbotkit/react.svg)](https://www.npmjs.com/package/@chatbotkit/react)
+[![ChatBotKit](https://img.shields.io/badge/credits-ChatBotKit-blue.svg)](https://chatbotkit.com)
+
+# ChatBotKit React SDK
+
+Welcome to the ChatBotKit React SDK. This SDK is a React solution for building conversational AI chatbots with ease. With [ChatBotKit](https://chatbotkit.com), you can quickly develop and deploy chatbots that can interact with users in natural language.
+
+## React SDK Features
+
+- **Easy setup** - The ChatBotKit React SDK is easy to install and set up. You can have your first chatbot up and running in minutes.
+- **No styles** - ChatBotKit React SDK does not enforce any styles. You can easily style your applications just the way you want them.
+- **Modern** - A modern SDK with built-in support for CommonJS, ECMAScript Modules, async/await, streams and much more.
+- **Customizable** - You can easily customize the chatbot's behavior and responses to fit your specific use case.
+
+## ChatBotKit Features
+
+- 🗨 **Chat History**: Easily review and reference previous conversations with your bots, ensuring that it has all the information it needs.
+- 💾 **Custom Datasets**: Manage and organize the data that your chat bots use to respond to user input with bespoke datasets.
+- 🎬 **Media File Importing**: Import MP3, MP4, MPEG, WAV and many other media files directly into your your chatbot datasets
+- 🌐 **Widget Integration**: Embed ChatBotKit chatbots directly on any website using advanced customization options and theming.
+- 💬 **Slack Bot Integration**: Create and deploy wide-range of Slack bot integrations with just a few click.
+- 🎮 **Discord Bot Integration**: Create and deploy wide-range of Discord chat bot with just a few click.
+- 📱 **WhatsApp Bot Integration**: Connect with your audience instantly on the world’s most popular AI bot platform.
+- 🗺 **Sitemap Integration**: Automatically ingest website content into a searchable knowledge base for your chatbot to reference.
+- 🤖 **GPT-3.5 Support**: State-of-the-art language models to power your conversations.
+- 🚀 **GPT-4 Support**: The latest and best language model now can power all chatbots.
+- 🎥 **Streaming**: You can turn on and off streaming capabilities for your chatbots.
+- 🎨 **Widget Themes**: Customize the appearance of your chatbot widget with different themes to match your website branding or personal preferences.
+- 💡 **ChatGPT Extended**: Create your own own ChatGPT bot on variety of skills and domain-specific knowledge.
+- 🔄 **Multiple AI Models**: Leverage diverse models from various AI providers to enhance performance and accuracy.
+- 🔒 **Data Security**: Ensuring the security of user data, with robust measures in place to protect against unauthorized access.
+- 🕵 **Focus on Privacy**: Get strong privacy controls out of the box. Privide confindence that your customers' data is being handled responsibly.
+- 🚫 **Content Moderation**: All messages are automatically scanned for abusive content and automatically flagged by the system.
+- 🔍 **Semantic Search**: Your chat bot can provide more relevant and accurate responses.
+- ⚙️ **AI Playgrounds**: Interactive environments that provide a safe and controlled space to experiment, explore, and learn.
+- ⚒️ **No-Code Platform**: Easily build, customize and deploy chatbots without needing to write any code.
+- 💵 **Simple Pricing**: Our pricing is straightforward and easy to understand, with no hidden fees or surprises.
+- 📱 **App Platform**: Our platform provides capabilities for building and deploying chatbots for a wide range of applications.
+- 🔧 **Extreme Customization**: Customize your chatbots' responses and behavior based on variety of preferences.
+- 🌟 **Expanding Feature Set**: We are constantly adding new features to so you can always stay up-to-date with the latest AI capabilities.
+
+## Getting Started
+
+To get started with ChatBotKit, follow these simple steps:
+
+1. Install the SDK using npm: `npm install @chatbotkit/react`.
+2. Use the SDK to setup or interact with your chatbot.
+
+Here is a simple example for the next.js framework. Within the body of our component we invoke the `useConversationManager` React Hook which setups a simple utility to manage the conversation flow.
+
+```js
+import { AutoTextarea, useConversationManager } from '@chatbotkit/react'
+
+export default function Home() {
+  const {
+    conversationId,
+    setConversationId,
+
+    token,
+    setToken,
+
+    text,
+    setText,
+
+    messages,
+
+    thinking,
+
+    interact,
+  } = useConversationManager({ stream: true })
+
+  async function createSession() {
+    const response = await fetch(`/api/session/create`)
+
+    if (!response.ok) {
+      throw new Error(`Unexpected error`)
+    }
+
+    const { conversationId, token } = await response.json()
+
+    setConversationId(conversationId)
+    setToken(token)
+  }
+
+  function handleOnKeyDown(event) {
+    if (event.keyCode === 13) {
+      event.preventDefault()
+
+      interact()
+    }
+  }
+
+  return (
+    <div>
+      {conversationId && token ? (
+        <>
+          <div>
+            {messages.map(({ id, type, text }) => {
+              switch (type) {
+                case 'user':
+                  return <div key={id}>user: {text}</div>
+
+                case 'bot':
+                  return <div key={id}>bot: {text}</div>
+              }
+            })}
+            {thinking ? <div key="thinking">bot: thinking...</div> : null}
+          </div>
+          <AutoTextarea
+            value={text}
+            onChange={(e) => setText(event.target.value)}
+            onKeyDown={handleOnKeyDown}
+          />
+        </>
+      ) : (
+        <button onClick={() => createSession()}>Start Chat</button>
+      )}
+    </div>
+  )
+}
+```
+
+## Examples
+
+You can find a wide-range of examples at [here](https://github.com/chatbotkit/node-sdk/tree/main/examples).
+
+## Documentation
+
+For detailed documentation on available types, please refer to the [type documentation](https://github.com/chatbotkit/node-sdk/blob/main/docs/react/modules.md).
+
+Checkout the [ChatBotKit Documentation](https://chatbotkit.com/docs/react-sdk) for more information about the platform.
+
+## Contributing
+
+If you find a bug or would like to contribute to the ChatBotKit SDK, please open an issue or submit a pull request on the [official GitHub repository](https://github.com/chatbotkit/node-sdk).

package/dist/cjs/components/AutoTextarea.cjs

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+/**
+ * @typedef {(event: React.ChangeEvent<HTMLTextAreaElement>) => any} onInputFn
+ *
+ * @param {{
+ *   onInput?: onInputFn?,
+ *   [name: string]: any
+ * }} [props]
+ */
+// @ts-ignore
+function AutoTextarea({ onInput, ...props } = {}) {
+    /**
+     * @param {React.ChangeEvent<HTMLTextAreaElement>} event
+     */
+    function handleOnInput(event) {
+        const adjustment = `calc(${[event.target.style.paddingTop, event.target.style.paddingBottom]
+            .filter((f) => f)
+            .join(' + ') || '0px'})`;
+        event.target.style.height = 'auto';
+        event.target.style.height = `calc(${event.target.scrollHeight}px - ${adjustment})`;
+        if (onInput) {
+            onInput(event);
+        }
+    }
+    return react_1.default.createElement("textarea", { ...props, rows: 1, onInput: handleOnInput });
+}
+exports.default = AutoTextarea;

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

@@ -0,0 +1,14 @@
+/**
+ * @typedef {(event: React.ChangeEvent<HTMLTextAreaElement>) => any} onInputFn
+ *
+ * @param {{
+ *   onInput?: onInputFn?,
+ *   [name: string]: any
+ * }} [props]
+ */
+export default function AutoTextarea({ onInput, ...props }?: {
+    [name: string]: any;
+    onInput?: onInputFn | null | undefined;
+} | undefined): React.JSX.Element;
+export type onInputFn = (event: React.ChangeEvent<HTMLTextAreaElement>) => any;
+import React from 'react';

package/dist/cjs/hooks/useConversationManager.cjs

@@ -0,0 +1,306 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const index_js_1 = require("@chatbotkit/sdk/conversation/index.cjs");
+const string_js_1 = require("../utils/string.cjs");
+/**
+ * @typedef {{
+ *   id: string,
+ *   type: string,
+ *   text: string,
+ *   createdAt: number,
+ *   meta?: Record<string,any>
+ * }} Message
+ *
+ * @typedef {(error: any) => any} onErrorFn
+ * @typedef {(conversationId: string, messages: Message[], data: Record<string,any>) => any} onSendFn
+ * @typedef {(conversationId: string, messages: Message[], data: Record<string,any>) => any} onReceiveFn
+ *
+ * @param {{
+ *   conversationId?: string,
+ *   token?: string,
+ *   messages?: Message[],
+ *   parse?: boolean,
+ *   stream?: boolean,
+ *   verbose?: boolean,
+ *   onError?: onErrorFn?,
+ *   onSend?: onSendFn?,
+ *   onReceive?: onReceiveFn?,
+ * }}[options]
+ */
+// @ts-ignore
+function useConversationManager({ conversationId: _conversationId = '', token: _token = '', messages: _messages = [], parse = false, stream = false, verbose = false, onError = null, onSend = null, onReceive = null, } = {}) {
+    // general states
+    const [conversationId, setConversationId] = (0, react_1.useState)(_conversationId);
+    const [token, setToken] = (0, react_1.useState)(_token);
+    const [messages, setMessages] = (0, react_1.useState)(_messages);
+    const [text, setText] = (0, react_1.useState)('');
+    const [entities, setEntities] = (0, react_1.useState)({});
+    const [outgoingMessage, setOutgoingMessage] = (0, react_1.useState)('');
+    // loading & thinking state
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [thinking, setThinking] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        // NOTE: if we are loading we must be thinking
+        if (loading) {
+            setThinking(true);
+        }
+    }, [loading]);
+    // entity methods
+    /**
+     * @param {string} text
+     * @param {Record<string,string>} en
+     */
+    function redactEnitities(text, en = entities) {
+        const steps = (0, string_js_1.replaceWithCoordinates)(text, Object.entries(en));
+        const output = steps.pop();
+        steps.forEach((step) => {
+            // @ts-ignore
+            delete step.input;
+            // @ts-ignore
+            delete step.output;
+        });
+        return [output, ...steps];
+    }
+    /**
+     * @param {string} text
+     * @param {Record<string,string>} en
+     */
+    function unredactEnitities(text, en = entities) {
+        Object.entries(en).forEach(([real, redacted]) => {
+            text = text.split(redacted).join(real);
+        });
+        return text;
+    }
+    // state utility methods
+    /**
+     * @returns {Promise<void>}
+     */
+    async function flushUserMessage() {
+        if (!text) {
+            return;
+        }
+        setText('');
+        setOutgoingMessage(text);
+        let newMessages = messages.slice(0);
+        newMessages = newMessages.concat({
+            id: (0, string_js_1.getRandomId)('message-'),
+            type: 'user',
+            text,
+            createdAt: Date.now(),
+        });
+        setMessages(newMessages);
+    }
+    // utility states
+    const [nextStep, setNextStep] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!nextStep) {
+            return;
+        }
+        setNextStep(null);
+        // @ts-ignore
+        switch (nextStep.fn) {
+            case 'continueConversation':
+                // @ts-ignore
+                continueConversation(nextStep.options);
+                break;
+            default:
+                // @ts-ignore
+                throw new Error(`Unrecognised fn: ${nextStep.fn}`);
+        }
+    }, [nextStep]);
+    // base methods
+    /**
+     * @param {{
+     *   token?: string,
+     * }} [options]
+     * @returns {Promise<void>}
+     */
+    async function continueConversation(options) {
+        let newMessages = messages.slice(0);
+        let thisText;
+        if (text) {
+            thisText = text;
+            const message = {
+                id: (0, string_js_1.getRandomId)('message-'),
+                text: text,
+                type: 'user',
+                createdAt: Date.now(),
+            };
+            newMessages = newMessages.concat([message]);
+            setText('');
+        }
+        else if (outgoingMessage) {
+            thisText = outgoingMessage;
+            setOutgoingMessage('');
+        }
+        else {
+            return;
+        }
+        setMessages(newMessages);
+        setLoading(true);
+        const [redactedText, ...redactedEntities] = redactEnitities(thisText, entities);
+        const secret = options?.token || token;
+        const client = new index_js_1.ConversationClient({ secret });
+        const completion = client.complete(conversationId, {
+            // @ts-ignore
+            text: redactedText,
+            // @ts-ignore
+            entities: redactedEntities,
+            parse: parse,
+        });
+        let iter;
+        if (stream) {
+            iter = completion.stream();
+        }
+        else {
+            iter = (async function* () {
+                yield { type: 'receiveResult', data: await completion };
+            })();
+        }
+        try {
+            if (onSend) {
+                await onSend(conversationId, newMessages, {});
+            }
+            const tempId = (0, string_js_1.getRandomId)('tmp-');
+            let tempText = '';
+            for await (let { type, data } of iter) {
+                switch (type) {
+                    case 'intentDetectionEnd': {
+                        if (!verbose) {
+                            break;
+                        }
+                        const { action } = data;
+                        if (!action) {
+                            break;
+                        }
+                        const { name, input } = action;
+                        switch (name) {
+                            case 'search': {
+                                const id = (0, string_js_1.getRandomId)('tmp-');
+                                newMessages = newMessages.concat([
+                                    {
+                                        id: id,
+                                        text: '',
+                                        type: 'context',
+                                        createdAt: Date.now(),
+                                        meta: {
+                                            search: input,
+                                        },
+                                    },
+                                ]);
+                                setMessages(newMessages);
+                                break;
+                            }
+                        }
+                        break;
+                    }
+                    case 'token': {
+                        if (!stream) {
+                            break;
+                        }
+                        const { token } = data;
+                        tempText += token;
+                        setMessages([
+                            ...newMessages,
+                            {
+                                id: tempId,
+                                text: tempText,
+                                type: 'bot',
+                                createdAt: Date.now(),
+                                meta: {},
+                            },
+                        ]);
+                        if (text.length) {
+                            setThinking(false);
+                        }
+                        break;
+                    }
+                    case 'sendResult': {
+                        const { entities: newEntities } = data;
+                        setEntities({ ...entities, ...newEntities });
+                        break;
+                    }
+                    case 'receiveResult': {
+                        const { id, text, parse } = data;
+                        setMessages([
+                            ...newMessages,
+                            {
+                                id: id,
+                                text: unredactEnitities((parse ? parse.stripped : text).trim(), entities),
+                                type: 'bot',
+                                createdAt: Date.now(),
+                            },
+                        ]);
+                        setThinking(false);
+                        if (onReceive) {
+                            await onReceive(conversationId, newMessages, data);
+                        }
+                        break;
+                    }
+                }
+            }
+        }
+        catch (e) {
+            if (onError) {
+                onError(e);
+            }
+        }
+        setLoading(false);
+    }
+    // helper methods
+    /**
+     * @param {{
+     *   token?: string,
+     *   conversationId?: string
+     *   messages?: Message[]
+     * }} [options]
+     * @returns {void}
+     */
+    function interact(options) {
+        if (options?.token) {
+            setToken(options.token);
+        }
+        if (options?.conversationId) {
+            setConversationId(options.conversationId);
+        }
+        if (options?.messages) {
+            setMessages(options.messages);
+        }
+        if (options?.conversationId || conversationId) {
+            setNextStep({
+                // @ts-ignore
+                fn: 'continueConversation',
+                options,
+            });
+        }
+        else {
+            throw new Error(`No conversation id specified`);
+        }
+    }
+    /**
+     * @returns {void}
+     */
+    function reset() {
+        setMessages([]);
+        setConversationId('');
+    }
+    // final
+    return {
+        text,
+        setText,
+        token,
+        setToken,
+        conversationId,
+        setConversationId,
+        messages,
+        setMessages,
+        flushUserMessage,
+        continueConversation,
+        interact,
+        reset,
+        loading,
+        thinking,
+    };
+}
+exports.default = useConversationManager;

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

@@ -0,0 +1,67 @@
+/**
+ * @typedef {{
+ *   id: string,
+ *   type: string,
+ *   text: string,
+ *   createdAt: number,
+ *   meta?: Record<string,any>
+ * }} Message
+ *
+ * @typedef {(error: any) => any} onErrorFn
+ * @typedef {(conversationId: string, messages: Message[], data: Record<string,any>) => any} onSendFn
+ * @typedef {(conversationId: string, messages: Message[], data: Record<string,any>) => any} onReceiveFn
+ *
+ * @param {{
+ *   conversationId?: string,
+ *   token?: string,
+ *   messages?: Message[],
+ *   parse?: boolean,
+ *   stream?: boolean,
+ *   verbose?: boolean,
+ *   onError?: onErrorFn?,
+ *   onSend?: onSendFn?,
+ *   onReceive?: onReceiveFn?,
+ * }}[options]
+ */
+export default function useConversationManager({ conversationId: _conversationId, token: _token, messages: _messages, parse, stream, verbose, onError, onSend, onReceive, }?: {
+    conversationId?: string | undefined;
+    token?: string | undefined;
+    messages?: Message[] | undefined;
+    parse?: boolean | undefined;
+    stream?: boolean | undefined;
+    verbose?: boolean | undefined;
+    onError?: onErrorFn | null | undefined;
+    onSend?: onSendFn | null | undefined;
+    onReceive?: onReceiveFn | null | undefined;
+} | undefined): {
+    text: string;
+    setText: import("react").Dispatch<import("react").SetStateAction<string>>;
+    token: string;
+    setToken: import("react").Dispatch<import("react").SetStateAction<string>>;
+    conversationId: string;
+    setConversationId: import("react").Dispatch<import("react").SetStateAction<string>>;
+    messages: Message[];
+    setMessages: import("react").Dispatch<import("react").SetStateAction<Message[]>>;
+    flushUserMessage: () => Promise<void>;
+    continueConversation: (options?: {
+        token?: string | undefined;
+    } | undefined) => Promise<void>;
+    interact: (options?: {
+        token?: string | undefined;
+        conversationId?: string | undefined;
+        messages?: Message[] | undefined;
+    } | undefined) => void;
+    reset: () => void;
+    loading: boolean;
+    thinking: boolean;
+};
+export type Message = {
+    id: string;
+    type: string;
+    text: string;
+    createdAt: number;
+    meta?: Record<string, any>;
+};
+export type onErrorFn = (error: any) => any;
+export type onSendFn = (conversationId: string, messages: Message[], data: Record<string, any>) => any;
+export type onReceiveFn = (conversationId: string, messages: Message[], data: Record<string, any>) => any;

package/dist/cjs/index.cjs

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConversationManager = exports.AutoTextarea = void 0;
+var AutoTextarea_js_1 = require("./components/AutoTextarea.cjs");
+Object.defineProperty(exports, "AutoTextarea", { enumerable: true, get: function () { return __importDefault(AutoTextarea_js_1).default; } });
+var useConversationManager_js_1 = require("./hooks/useConversationManager.cjs");
+Object.defineProperty(exports, "useConversationManager", { enumerable: true, get: function () { return __importDefault(useConversationManager_js_1).default; } });

package/dist/cjs/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AutoTextarea } from "./components/AutoTextarea.cjs";
+export { default as useConversationManager } from "./hooks/useConversationManager.cjs";

package/dist/cjs/utils/string.cjs

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.replaceWithCoordinates = exports.replaceBetween = exports.getRandomId = void 0;
+/**
+ * @param {string} [prefix]
+ * @returns {string}
+ */
+function getRandomId(prefix) {
+    return `${prefix || ''}${Math.random().toString(32).slice(2)}`;
+}
+exports.getRandomId = getRandomId;
+/**
+ * @param {string} input
+ * @param {number} begin
+ * @param {number} end
+ * @param {string} replacement
+ * @returns {string}
+ */
+function replaceBetween(input, begin, end, replacement) {
+    return input.substring(0, begin) + replacement + input.substring(end);
+}
+exports.replaceBetween = replaceBetween;
+/**
+ * @param {string} input
+ * @param {[string, string][]} replacements
+ * @returns {({begin: number, end: number, input: string, output: string}|string)[]}
+ */
+function replaceWithCoordinates(input, replacements) {
+    const output = [];
+    let currentIndex = 0;
+    while (currentIndex < input.length) {
+        let found = false;
+        for (const [search, replacement] of replacements) {
+            if (input.startsWith(search, currentIndex)) {
+                const origInput = input;
+                const resultOutput = replaceBetween(input, currentIndex, currentIndex + search.length, replacement);
+                output.push({
+                    begin: currentIndex,
+                    end: currentIndex + replacement.length,
+                    input: origInput,
+                    output: resultOutput,
+                });
+                input = resultOutput;
+                currentIndex += replacement.length;
+                found = true;
+                break;
+            }
+        }
+        if (!found) {
+            currentIndex += 1;
+        }
+    }
+    output.push(input);
+    return output;
+}
+exports.replaceWithCoordinates = replaceWithCoordinates;

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

@@ -0,0 +1,24 @@
+/**
+ * @param {string} [prefix]
+ * @returns {string}
+ */
+export function getRandomId(prefix?: string | undefined): string;
+/**
+ * @param {string} input
+ * @param {number} begin
+ * @param {number} end
+ * @param {string} replacement
+ * @returns {string}
+ */
+export function replaceBetween(input: string, begin: number, end: number, replacement: string): string;
+/**
+ * @param {string} input
+ * @param {[string, string][]} replacements
+ * @returns {({begin: number, end: number, input: string, output: string}|string)[]}
+ */
+export function replaceWithCoordinates(input: string, replacements: [string, string][]): (string | {
+    begin: number;
+    end: number;
+    input: string;
+    output: string;
+})[];

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

@@ -0,0 +1,14 @@
+/**
+ * @typedef {(event: React.ChangeEvent<HTMLTextAreaElement>) => any} onInputFn
+ *
+ * @param {{
+ *   onInput?: onInputFn?,
+ *   [name: string]: any
+ * }} [props]
+ */
+export default function AutoTextarea({ onInput, ...props }?: {
+    [name: string]: any;
+    onInput?: onInputFn | null | undefined;
+} | undefined): React.JSX.Element;
+export type onInputFn = (event: React.ChangeEvent<HTMLTextAreaElement>) => any;
+import React from 'react';

package/dist/esm/components/AutoTextarea.js

@@ -0,0 +1,26 @@
+import React from 'react';
+/**
+ * @typedef {(event: React.ChangeEvent<HTMLTextAreaElement>) => any} onInputFn
+ *
+ * @param {{
+ *   onInput?: onInputFn?,
+ *   [name: string]: any
+ * }} [props]
+ */
+// @ts-ignore
+export default function AutoTextarea({ onInput, ...props } = {}) {
+    /**
+     * @param {React.ChangeEvent<HTMLTextAreaElement>} event
+     */
+    function handleOnInput(event) {
+        const adjustment = `calc(${[event.target.style.paddingTop, event.target.style.paddingBottom]
+            .filter((f) => f)
+            .join(' + ') || '0px'})`;
+        event.target.style.height = 'auto';
+        event.target.style.height = `calc(${event.target.scrollHeight}px - ${adjustment})`;
+        if (onInput) {
+            onInput(event);
+        }
+    }
+    return React.createElement("textarea", { ...props, rows: 1, onInput: handleOnInput });
+}

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

@@ -0,0 +1,67 @@
+/**
+ * @typedef {{
+ *   id: string,
+ *   type: string,
+ *   text: string,
+ *   createdAt: number,
+ *   meta?: Record<string,any>
+ * }} Message
+ *
+ * @typedef {(error: any) => any} onErrorFn
+ * @typedef {(conversationId: string, messages: Message[], data: Record<string,any>) => any} onSendFn
+ * @typedef {(conversationId: string, messages: Message[], data: Record<string,any>) => any} onReceiveFn
+ *
+ * @param {{
+ *   conversationId?: string,
+ *   token?: string,
+ *   messages?: Message[],
+ *   parse?: boolean,
+ *   stream?: boolean,
+ *   verbose?: boolean,
+ *   onError?: onErrorFn?,
+ *   onSend?: onSendFn?,
+ *   onReceive?: onReceiveFn?,
+ * }}[options]
+ */
+export default function useConversationManager({ conversationId: _conversationId, token: _token, messages: _messages, parse, stream, verbose, onError, onSend, onReceive, }?: {
+    conversationId?: string | undefined;
+    token?: string | undefined;
+    messages?: Message[] | undefined;
+    parse?: boolean | undefined;
+    stream?: boolean | undefined;
+    verbose?: boolean | undefined;
+    onError?: onErrorFn | null | undefined;
+    onSend?: onSendFn | null | undefined;
+    onReceive?: onReceiveFn | null | undefined;
+} | undefined): {
+    text: string;
+    setText: import("react").Dispatch<import("react").SetStateAction<string>>;
+    token: string;
+    setToken: import("react").Dispatch<import("react").SetStateAction<string>>;
+    conversationId: string;
+    setConversationId: import("react").Dispatch<import("react").SetStateAction<string>>;
+    messages: Message[];
+    setMessages: import("react").Dispatch<import("react").SetStateAction<Message[]>>;
+    flushUserMessage: () => Promise<void>;
+    continueConversation: (options?: {
+        token?: string | undefined;
+    } | undefined) => Promise<void>;
+    interact: (options?: {
+        token?: string | undefined;
+        conversationId?: string | undefined;
+        messages?: Message[] | undefined;
+    } | undefined) => void;
+    reset: () => void;
+    loading: boolean;
+    thinking: boolean;
+};
+export type Message = {
+    id: string;
+    type: string;
+    text: string;
+    createdAt: number;
+    meta?: Record<string, any>;
+};
+export type onErrorFn = (error: any) => any;
+export type onSendFn = (conversationId: string, messages: Message[], data: Record<string, any>) => any;
+export type onReceiveFn = (conversationId: string, messages: Message[], data: Record<string, any>) => any;

package/dist/esm/hooks/useConversationManager.js

@@ -0,0 +1,303 @@
+import { useState, useEffect } from 'react';
+import { ConversationClient } from '@chatbotkit/sdk/conversation/index.js';
+import { getRandomId, replaceWithCoordinates } from '../utils/string.js';
+/**
+ * @typedef {{
+ *   id: string,
+ *   type: string,
+ *   text: string,
+ *   createdAt: number,
+ *   meta?: Record<string,any>
+ * }} Message
+ *
+ * @typedef {(error: any) => any} onErrorFn
+ * @typedef {(conversationId: string, messages: Message[], data: Record<string,any>) => any} onSendFn
+ * @typedef {(conversationId: string, messages: Message[], data: Record<string,any>) => any} onReceiveFn
+ *
+ * @param {{
+ *   conversationId?: string,
+ *   token?: string,
+ *   messages?: Message[],
+ *   parse?: boolean,
+ *   stream?: boolean,
+ *   verbose?: boolean,
+ *   onError?: onErrorFn?,
+ *   onSend?: onSendFn?,
+ *   onReceive?: onReceiveFn?,
+ * }}[options]
+ */
+// @ts-ignore
+export default function useConversationManager({ conversationId: _conversationId = '', token: _token = '', messages: _messages = [], parse = false, stream = false, verbose = false, onError = null, onSend = null, onReceive = null, } = {}) {
+    // general states
+    const [conversationId, setConversationId] = useState(_conversationId);
+    const [token, setToken] = useState(_token);
+    const [messages, setMessages] = useState(_messages);
+    const [text, setText] = useState('');
+    const [entities, setEntities] = useState({});
+    const [outgoingMessage, setOutgoingMessage] = useState('');
+    // loading & thinking state
+    const [loading, setLoading] = useState(false);
+    const [thinking, setThinking] = useState(false);
+    useEffect(() => {
+        // NOTE: if we are loading we must be thinking
+        if (loading) {
+            setThinking(true);
+        }
+    }, [loading]);
+    // entity methods
+    /**
+     * @param {string} text
+     * @param {Record<string,string>} en
+     */
+    function redactEnitities(text, en = entities) {
+        const steps = replaceWithCoordinates(text, Object.entries(en));
+        const output = steps.pop();
+        steps.forEach((step) => {
+            // @ts-ignore
+            delete step.input;
+            // @ts-ignore
+            delete step.output;
+        });
+        return [output, ...steps];
+    }
+    /**
+     * @param {string} text
+     * @param {Record<string,string>} en
+     */
+    function unredactEnitities(text, en = entities) {
+        Object.entries(en).forEach(([real, redacted]) => {
+            text = text.split(redacted).join(real);
+        });
+        return text;
+    }
+    // state utility methods
+    /**
+     * @returns {Promise<void>}
+     */
+    async function flushUserMessage() {
+        if (!text) {
+            return;
+        }
+        setText('');
+        setOutgoingMessage(text);
+        let newMessages = messages.slice(0);
+        newMessages = newMessages.concat({
+            id: getRandomId('message-'),
+            type: 'user',
+            text,
+            createdAt: Date.now(),
+        });
+        setMessages(newMessages);
+    }
+    // utility states
+    const [nextStep, setNextStep] = useState(null);
+    useEffect(() => {
+        if (!nextStep) {
+            return;
+        }
+        setNextStep(null);
+        // @ts-ignore
+        switch (nextStep.fn) {
+            case 'continueConversation':
+                // @ts-ignore
+                continueConversation(nextStep.options);
+                break;
+            default:
+                // @ts-ignore
+                throw new Error(`Unrecognised fn: ${nextStep.fn}`);
+        }
+    }, [nextStep]);
+    // base methods
+    /**
+     * @param {{
+     *   token?: string,
+     * }} [options]
+     * @returns {Promise<void>}
+     */
+    async function continueConversation(options) {
+        let newMessages = messages.slice(0);
+        let thisText;
+        if (text) {
+            thisText = text;
+            const message = {
+                id: getRandomId('message-'),
+                text: text,
+                type: 'user',
+                createdAt: Date.now(),
+            };
+            newMessages = newMessages.concat([message]);
+            setText('');
+        }
+        else if (outgoingMessage) {
+            thisText = outgoingMessage;
+            setOutgoingMessage('');
+        }
+        else {
+            return;
+        }
+        setMessages(newMessages);
+        setLoading(true);
+        const [redactedText, ...redactedEntities] = redactEnitities(thisText, entities);
+        const secret = options?.token || token;
+        const client = new ConversationClient({ secret });
+        const completion = client.complete(conversationId, {
+            // @ts-ignore
+            text: redactedText,
+            // @ts-ignore
+            entities: redactedEntities,
+            parse: parse,
+        });
+        let iter;
+        if (stream) {
+            iter = completion.stream();
+        }
+        else {
+            iter = (async function* () {
+                yield { type: 'receiveResult', data: await completion };
+            })();
+        }
+        try {
+            if (onSend) {
+                await onSend(conversationId, newMessages, {});
+            }
+            const tempId = getRandomId('tmp-');
+            let tempText = '';
+            for await (let { type, data } of iter) {
+                switch (type) {
+                    case 'intentDetectionEnd': {
+                        if (!verbose) {
+                            break;
+                        }
+                        const { action } = data;
+                        if (!action) {
+                            break;
+                        }
+                        const { name, input } = action;
+                        switch (name) {
+                            case 'search': {
+                                const id = getRandomId('tmp-');
+                                newMessages = newMessages.concat([
+                                    {
+                                        id: id,
+                                        text: '',
+                                        type: 'context',
+                                        createdAt: Date.now(),
+                                        meta: {
+                                            search: input,
+                                        },
+                                    },
+                                ]);
+                                setMessages(newMessages);
+                                break;
+                            }
+                        }
+                        break;
+                    }
+                    case 'token': {
+                        if (!stream) {
+                            break;
+                        }
+                        const { token } = data;
+                        tempText += token;
+                        setMessages([
+                            ...newMessages,
+                            {
+                                id: tempId,
+                                text: tempText,
+                                type: 'bot',
+                                createdAt: Date.now(),
+                                meta: {},
+                            },
+                        ]);
+                        if (text.length) {
+                            setThinking(false);
+                        }
+                        break;
+                    }
+                    case 'sendResult': {
+                        const { entities: newEntities } = data;
+                        setEntities({ ...entities, ...newEntities });
+                        break;
+                    }
+                    case 'receiveResult': {
+                        const { id, text, parse } = data;
+                        setMessages([
+                            ...newMessages,
+                            {
+                                id: id,
+                                text: unredactEnitities((parse ? parse.stripped : text).trim(), entities),
+                                type: 'bot',
+                                createdAt: Date.now(),
+                            },
+                        ]);
+                        setThinking(false);
+                        if (onReceive) {
+                            await onReceive(conversationId, newMessages, data);
+                        }
+                        break;
+                    }
+                }
+            }
+        }
+        catch (e) {
+            if (onError) {
+                onError(e);
+            }
+        }
+        setLoading(false);
+    }
+    // helper methods
+    /**
+     * @param {{
+     *   token?: string,
+     *   conversationId?: string
+     *   messages?: Message[]
+     * }} [options]
+     * @returns {void}
+     */
+    function interact(options) {
+        if (options?.token) {
+            setToken(options.token);
+        }
+        if (options?.conversationId) {
+            setConversationId(options.conversationId);
+        }
+        if (options?.messages) {
+            setMessages(options.messages);
+        }
+        if (options?.conversationId || conversationId) {
+            setNextStep({
+                // @ts-ignore
+                fn: 'continueConversation',
+                options,
+            });
+        }
+        else {
+            throw new Error(`No conversation id specified`);
+        }
+    }
+    /**
+     * @returns {void}
+     */
+    function reset() {
+        setMessages([]);
+        setConversationId('');
+    }
+    // final
+    return {
+        text,
+        setText,
+        token,
+        setToken,
+        conversationId,
+        setConversationId,
+        messages,
+        setMessages,
+        flushUserMessage,
+        continueConversation,
+        interact,
+        reset,
+        loading,
+        thinking,
+    };
+}

package/dist/esm/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AutoTextarea } from "./components/AutoTextarea.js";
+export { default as useConversationManager } from "./hooks/useConversationManager.js";

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export { default as AutoTextarea } from './components/AutoTextarea.js';
+export { default as useConversationManager } from './hooks/useConversationManager.js';

package/dist/esm/utils/string.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @param {string} [prefix]
+ * @returns {string}
+ */
+export function getRandomId(prefix?: string | undefined): string;
+/**
+ * @param {string} input
+ * @param {number} begin
+ * @param {number} end
+ * @param {string} replacement
+ * @returns {string}
+ */
+export function replaceBetween(input: string, begin: number, end: number, replacement: string): string;
+/**
+ * @param {string} input
+ * @param {[string, string][]} replacements
+ * @returns {({begin: number, end: number, input: string, output: string}|string)[]}
+ */
+export function replaceWithCoordinates(input: string, replacements: [string, string][]): (string | {
+    begin: number;
+    end: number;
+    input: string;
+    output: string;
+})[];

package/dist/esm/utils/string.js

@@ -0,0 +1,50 @@
+/**
+ * @param {string} [prefix]
+ * @returns {string}
+ */
+export function getRandomId(prefix) {
+    return `${prefix || ''}${Math.random().toString(32).slice(2)}`;
+}
+/**
+ * @param {string} input
+ * @param {number} begin
+ * @param {number} end
+ * @param {string} replacement
+ * @returns {string}
+ */
+export function replaceBetween(input, begin, end, replacement) {
+    return input.substring(0, begin) + replacement + input.substring(end);
+}
+/**
+ * @param {string} input
+ * @param {[string, string][]} replacements
+ * @returns {({begin: number, end: number, input: string, output: string}|string)[]}
+ */
+export function replaceWithCoordinates(input, replacements) {
+    const output = [];
+    let currentIndex = 0;
+    while (currentIndex < input.length) {
+        let found = false;
+        for (const [search, replacement] of replacements) {
+            if (input.startsWith(search, currentIndex)) {
+                const origInput = input;
+                const resultOutput = replaceBetween(input, currentIndex, currentIndex + search.length, replacement);
+                output.push({
+                    begin: currentIndex,
+                    end: currentIndex + replacement.length,
+                    input: origInput,
+                    output: resultOutput,
+                });
+                input = resultOutput;
+                currentIndex += replacement.length;
+                found = true;
+                break;
+            }
+        }
+        if (!found) {
+            currentIndex += 1;
+        }
+    }
+    output.push(input);
+    return output;
+}

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "@chatbotkit/react",
+  "version": "0.2.0",
+  "description": "The fastest way to build advanced AI chat bots",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chatbotkit/node-sdk.git"
+  },
+  "bugs": {
+    "url": "https://github.com/chatbotkit/node-sdk/issues"
+  },
+  "homepage": "https://github.com/chatbotkit/node-sdk#readme",
+  "author": "",
+  "keywords": [
+    "gpt3",
+    "gpt4",
+    "chat",
+    "chatbot",
+    "chatbotkit",
+    "react"
+  ],
+  "type": "module",
+  "main": "./dist/esm/index.js",
+  "exports": {
+    ".": {
+      "require": {
+        "types": "./dist/cjs/index.d.ts",
+        "default": "./dist/cjs/index.cjs"
+      },
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
+    },
+    "./components/AutoTextarea.js": {
+      "require": {
+        "types": "./dist/cjs/components/AutoTextarea.d.ts",
+        "default": "./dist/cjs/components/AutoTextarea.cjs"
+      },
+      "import": {
+        "types": "./dist/esm/components/AutoTextarea.d.ts",
+        "default": "./dist/esm/components/AutoTextarea.js"
+      }
+    },
+    "./hooks/useConversationManager.js": {
+      "require": {
+        "types": "./dist/cjs/hooks/useConversationManager.d.ts",
+        "default": "./dist/cjs/hooks/useConversationManager.cjs"
+      },
+      "import": {
+        "types": "./dist/esm/hooks/useConversationManager.d.ts",
+        "default": "./dist/esm/hooks/useConversationManager.js"
+      }
+    },
+    "./index.js": {
+      "require": {
+        "types": "./dist/cjs/index.d.ts",
+        "default": "./dist/cjs/index.cjs"
+      },
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
+    },
+    "./utils/string.js": {
+      "require": {
+        "types": "./dist/cjs/utils/string.d.ts",
+        "default": "./dist/cjs/utils/string.cjs"
+      },
+      "import": {
+        "types": "./dist/esm/utils/string.d.ts",
+        "default": "./dist/esm/utils/string.js"
+      }
+    }
+  },
+  "scripts": {
+    "build": "run-s build:*",
+    "build:cjs": "tsc -p tsconfig.cjs.json",
+    "build:cjs_rename": "find ./dist/cjs -name '*.js' -exec rename .js .cjs {} +",
+    "build:cjs_rewrite_cjs": "find ./dist/cjs -name '*.cjs' -exec sed -i 's/require(\"\\(.*\\)\\.js\")/require(\"\\1.cjs\")/g' {} +",
+    "build:cjs_rewrite_ts": "find ./dist/cjs -name '*.ts' -exec sed -i 's/from \"\\(.*\\)\\.js\"/from \"\\1.cjs\"/g' {} +",
+    "build:esm": "tsc -p tsconfig.esm.json",
+    "build:exports": "node scripts/build-exports.js",
+    "test": "true"
+  },
+  "types": "./dist/esm/index.d.ts",
+  "dependencies": {
+    "@chatbotkit/sdk": "*"
+  },
+  "devDependencies": {
+    "@tsconfig/recommended": "^1.0.2",
+    "@types/react": "^18.2.6",
+    "npm-run-all": "^4.1.5",
+    "typescript": "^5.0.4"
+  }
+}