@chatbotkit/react 0.8.0 → 1.1.5

package/README.md

@@ -4,72 +4,39 @@
 
 # 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.
+Welcome to the ChatBotKit React SDK! This SDK is your go-to React solution for creating conversational AI chatbots with ease. Leveraging the power of [ChatBotKit](https://chatbotkit.com), this SDK enables the rapid development and deployment of chatbots capable of natural language interactions.
 
 ## Getting Started
 
-To get started with ChatBotKit, follow these simple steps:
+Embark on your ChatBotKit journey with these easy steps:
 
-1. Install the SDK using npm: `npm install @chatbotkit/react`.
-2. Use the SDK to setup or interact with your chatbot.
+1. **Installation**: Add the SDK to your React project:
+   ```bash
+   npm install @chatbotkit/react
+   ```
+2. **Implementation**: Utilize the SDK to build or manage 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.
+### A Basic Example for Next.js
 
-```js
+Here's a straightforward example using the `useConversationManager` React Hook to manage conversation flow within a Next.js application:
+
+```javascript
 import { AutoTextarea, useConversationManager } from '@chatbotkit/react'
 
-export default function Home() {
+export default function Index() {
   const {
     conversationId,
     setConversationId,
-
     token,
     setToken,
-
     text,
     setText,
-
     messages,
-
     thinking,
-
-    interact,
+    submit,
   } = useConversationManager({ stream: true })
 
+  // Function to create a new chat session
   async function createSession() {
     const response = await fetch(`/api/session/create`)
 
@@ -83,54 +50,58 @@ export default function Home() {
     setToken(token)
   }
 
+  // Handle text submission
   function handleOnKeyDown(event) {
     if (event.keyCode === 13) {
       event.preventDefault()
 
-      interact()
+      submit()
     }
   }
 
+  // Render chat interface
   return (
-    <div>
+    <div style={{ fontFamily: 'monospace', padding: '10px' }}>
       {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>
+          {messages.map(({ id, type, text }) => (
+            <div key={id}>
+              <strong>{type}:</strong> {text}
+            </div>
+          ))}
+          {thinking && (
+            <div key="thinking">
+              <strong>bot:</strong> thinking...
+            </div>
+          )}
           <AutoTextarea
             value={text}
-            onChange={(e) => setText(event.target.value)}
+            onChange={(e) => setText(e.target.value)}
             onKeyDown={handleOnKeyDown}
+            placeholder="Type something..."
+            style={{
+              border: 0,
+              outline: 'none',
+              resize: 'none',
+              width: '100%',
+              marginTop: '10px',
+            }}
           />
         </>
       ) : (
-        <button onClick={() => createSession()}>Start Chat</button>
+        <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).
+Discover a complete example with advanced features [here](https://github.com/chatbotkit/node-sdk/tree/main/examples/nextjs/basic-chat).
 
 ## 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.
+For a comprehensive understanding of the ChatBotKit React SDK, including detailed insights into its capabilities and configuration for various environments, please visit our [official documentation page](https://chatbotkit.github.io/node-sdk/modules/_chatbotkit_react.html).
 
 ## 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).
+Found a bug or wish to contribute? We welcome your input! Please open an issue or submit a pull request on our [official GitHub repository](https://github.com/chatbotkit/node-sdk).

package/dist/cjs/components/AutoScroller.cjs

@@ -1,90 +1,56 @@
 "use strict";
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AutoScrollAnchor = void 0;
-const react_1 = __importStar(require("react"));
+exports.AutoScroller = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
 function AutoScrollAnchor() {
-    return react_1.default.createElement("div", { className: "auto-scroll-anchor ![height:1px]" });
+    return (0, jsx_runtime_1.jsx)("div", { className: "auto-scroll-anchor", style: { height: '1px' } });
 }
-exports.AutoScrollAnchor = AutoScrollAnchor;
-/**
- * @param {{
- *   anchor?: 'top'|'bottom',
- *   childList?: boolean,
- *   subtree?: boolean,
- *   block?: 'start'|'end',
- *   delay?: number,
- *   [name: string]: any
- * }} props
- */
-function AutoScroller({ anchor = 'bottom', childList = true, subtree = false, block = 'end', delay = 3000, disabled, children, ...props }) {
-    const rootRef = (0, react_1.useRef)();
+function AutoScroller(props) {
+    const { anchor = 'bottom', childList = true, subtree = false, block = 'end', delay = 3000, disabled, children, ...rest } = props || {};
+    const rootRef = ((0, react_1.useRef)());
     (0, react_1.useEffect)(() => {
+        var _a;
         if (disabled) {
             return;
         }
         let visible = false;
         let pause = false;
-        let timeout = 0;
+        let timeout;
         const io = new IntersectionObserver((entries) => {
             if (pause) {
                 return;
             }
             visible = entries.some((entry) => entry.isIntersecting);
         });
-        // @ts-ignore
-        io.observe(rootRef.current?.querySelector('.auto-scroll-anchor'));
+        const anchor = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.auto-scroll-anchor');
+        if (anchor) {
+            io.observe(anchor);
+        }
         const mo = new MutationObserver(() => {
+            var _a, _b;
             if (!visible) {
                 return;
             }
             pause = true;
-            rootRef.current
-                // @ts-ignore
-                ?.querySelector('.auto-scroll-anchor')
-                ?.scrollIntoView({ behavior: 'smooth', block });
+            (_b = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.auto-scroll-anchor')) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ behavior: 'smooth', block });
             clearTimeout(timeout);
-            // @ts-ignore
             timeout = setTimeout(() => {
                 visible = true;
                 pause = false;
             }, delay);
         });
-        // @ts-ignore
-        mo.observe(rootRef.current, { childList, subtree });
+        const root = rootRef.current;
+        if (root) {
+            mo.observe(root, { childList, subtree });
+        }
         return () => {
             io.disconnect();
             mo.disconnect();
         };
     }, [disabled]);
-    return (
-    // @ts-ignore
-    react_1.default.createElement("div", { ref: rootRef, ...props },
-        anchor === 'top' ? react_1.default.createElement(AutoScrollAnchor, { key: "top" }) : null,
-        children,
-        anchor === 'bottom' ? react_1.default.createElement(AutoScrollAnchor, { key: "bottom" }) : null));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, ...rest, children: [anchor === 'top' ? (0, jsx_runtime_1.jsx)(AutoScrollAnchor, {}, "top") : null, children, anchor === 'bottom' ? (0, jsx_runtime_1.jsx)(AutoScrollAnchor, {}, "bottom") : null] }));
 }
+exports.AutoScroller = AutoScroller;
 exports.default = AutoScroller;

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

@@ -1,20 +1,9 @@
-export function AutoScrollAnchor(): React.JSX.Element;
-/**
- * @param {{
- *   anchor?: 'top'|'bottom',
- *   childList?: boolean,
- *   subtree?: boolean,
- *   block?: 'start'|'end',
- *   delay?: number,
- *   [name: string]: any
- * }} props
- */
-export default function AutoScroller({ anchor, childList, subtree, block, delay, disabled, children, ...props }: {
+export function AutoScroller(props?: {
     [name: string]: any;
     anchor?: "top" | "bottom" | undefined;
     childList?: boolean | undefined;
     subtree?: boolean | undefined;
-    block?: "end" | "start" | undefined;
+    block?: "start" | "end" | undefined;
     delay?: number | undefined;
-}): React.JSX.Element;
-import React from 'react';
+} | undefined): import("react/jsx-runtime").JSX.Element;
+export default AutoScroller;

package/dist/cjs/components/AutoTextarea.cjs

@@ -1,23 +1,11 @@
 "use strict";
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-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
-     */
+exports.AutoTextarea = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+function AutoTextarea(props) {
+    const { onInput, ...rest } = props || {};
     function handleOnInput(event) {
         const adjustment = `calc(${[event.target.style.paddingTop, event.target.style.paddingBottom]
             .filter((f) => f)
@@ -28,6 +16,7 @@ function AutoTextarea({ onInput, ...props } = {}) {
             onInput(event);
         }
     }
-    return react_1.default.createElement("textarea", { ...props, rows: 1, onInput: handleOnInput });
+    return (0, jsx_runtime_1.jsx)("textarea", { ...rest, rows: 1, onInput: handleOnInput });
 }
+exports.AutoTextarea = AutoTextarea;
 exports.default = AutoTextarea;

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

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