@chatbotkit/react 1.7.0 → 1.8.1

package/README.md

@@ -10,9 +10,12 @@ Welcome to the ChatBotKit React SDK! This SDK is your go-to React solution for c
 
 The ChatBotKit React SDK offers a comprehensive set of features and capabilities, including:
 
+- **[streamComplete](https://chatbotkit.github.io/node-sdk/modules/_chatbotkit_react.actions_streamComplete.html#streamcomplete)**: A server-side reaction which allow for function calling and React component streaming.
 - **[userConversationManager](https://chatbotkit.github.io/node-sdk/modules/_chatbotkit_react.hooks_useConversationManager.html)**: A React Hook for managing conversation flow. Handles all the heavy lifting of sending and receiving messages, as well as thinking and typing indicators.
+- **[ConvesationManager](https://chatbotkit.github.io/node-sdk/modules/_chatbotkit_react.components_ConversationManager.html)**: A React component that provides a conversation manager interface. Useful for chat interfaces to manage conversation flow.
 - **[AutoTextarea](https://chatbotkit.github.io/node-sdk/modules/_chatbotkit_react.components_AutoTextarea.html)**: A React component that automatically resizes the textarea to fit the content. Useful for chat interfaces to allow users to type messages.
 - **[ChatInput](https://chatbotkit.github.io/node-sdk/modules/_chatbotkit_react.components_ChatInput.html)**: A React component that provides a chat input interface. Useful for chat interfaces to allow users to type messages. It automatically handles modifiers such as ctrl, cmd and shift.
+- **[ChatMessage](https://chatbotkit.github.io/node-sdk/modules/_chatbotkit_react.components_ChatMessage.html)**: A React component that provides a chat message interface. Useful for chat interfaces to display messages with rich formatting.
 - **[ChatMessages](https://chatbotkit.github.io/node-sdk/modules/_chatbotkit_react.components_ChatMessages.html)**: A React component that provides a chat messages interface. Useful for chat interfaces to display messages.
 
 ## Getting Started
@@ -25,27 +28,192 @@ Embark on your ChatBotKit journey with these easy steps:
    ```
 2. **Implementation**: Utilize the SDK to build or manage your chatbot.
 
+### A NextGen Example for Next.js
+
+This example showcases how to build advanced conversational AI with streaming, function calls, server-side rendering and much more in a Next.js project:
+
+```javascript
+// file: ./app/page.jsx
+import ChatArea from '../components/ChatArea.jsx'
+
+export default function Page() {
+  return <ChatArea />
+}
+
+// file: ./components/ChatArea.jsx
+'use client'
+
+import { useContext } from 'react'
+
+import { complete } from '../actions/conversation.js'
+
+import { ChatInput, ConversationContext } from '@chatbotkit/react'
+import ConversationManager from '@chatbotkit/react/components/ConversationManager'
+
+export function ChatMessages() {
+  const {
+    thinking,
+
+    text,
+    setText,
+
+    messages,
+
+    submit,
+  } = useContext(ConversationContext)
+
+  return (
+    <div>
+      <div>
+        {messages.map(({ id, type, text, children }) => {
+          switch (type) {
+            case 'user':
+              return (
+                <div key={id}>
+                  <div>
+                    <strong>user:</strong> {text}
+                  </div>
+                </div>
+              )
+
+            case 'bot':
+              return (
+                <div key={id}>
+                  <div>
+                    <strong>bot:</strong> {text}
+                  </div>
+                  {children ? <div>{children}</div> : null}
+                </div>
+              )
+          }
+        })}
+        {thinking ? (
+          <div key="thinking">
+            <strong>bot:</strong> thinking...
+          </div>
+        ) : null}
+      </div>
+      <ChatInput
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onSubmit={submit}
+        placeholder="Type something..."
+        style={{
+          border: 0,
+          outline: 'none',
+          resize: 'none',
+          width: '100%',
+          marginTop: '10px',
+        }}
+      />
+    </div>
+  )
+}
+
+export default function ChatArea() {
+  return (
+    <ConversationManager endpoint={complete}>
+      <ChatMessages />
+    </ConversationManager>
+  )
+}
+
+// file: ./actions/conversation.js
+'use server'
+
+import CalendarEvents from '../components/CalendarEvents.jsx'
+
+import { streamComplete } from '@chatbotkit/react/actions/complete'
+import { ChatBotKit } from '@chatbotkit/sdk'
+
+const cbk = new ChatBotKit({
+  secret: process.env.CHATBOTKIT_API_SECRET,
+})
+
+export async function complete(_, { messages }) {
+  return streamComplete({
+    client: cbk.conversation,
+
+    messages,
+
+    functions: [
+      {
+        name: 'getUserName',
+        description: 'Get the authenticated user name',
+        parameters: {},
+        handler: async () => {
+          return 'John Doe'
+        },
+      },
+
+      {
+        name: 'getCalendarEvents',
+        description: 'Get a list of calendar events',
+        parameters: {},
+        handler: async () => {
+          const events = [
+            { id: 1, title: 'Meeting with Jane Doe' },
+            { id: 2, title: 'Meeting with Jill Doe' },
+          ]
+
+          return {
+            children: <CalendarEvents events={events} />,
+
+            result: {
+              events,
+            },
+          }
+        },
+      },
+
+      {
+        name: 'declineCalendarEvent',
+        description: 'Decline a calendar event',
+        parameters: {
+          type: 'object',
+          properties: {
+            id: {
+              type: 'number',
+              description: 'The ID of the event to decline',
+            },
+          },
+          required: ['id'],
+        },
+        handler: async ({ id }) => {
+          return `You have declined the event with ID ${id}`
+        },
+      },
+    ],
+  })
+}
+```
+
 ### A Basic Example for Next.js
 
 Here's a straightforward example using the `useConversationManager` React Hook to manage conversation flow within a Next.js application:
 
 ```javascript
+// file: ./pages/index.jsx
+import { useState } from 'react'
+
 import { AutoTextarea, useConversationManager } from '@chatbotkit/react'
 
 export default function Index() {
+  const [conversationId, setConversationId] = useState(null)
+  const [token, setToken] = useState(null)
+
   const {
-    conversationId,
-    setConversationId,
-    token,
-    setToken,
     text,
     setText,
+
+    message,
     messages,
+
     thinking,
+
     submit,
-  } = useConversationManager({ stream: true })
+  } = useConversationManager({ conversationId, token })
 
-  // Function to create a new chat session
   async function createSession() {
     const response = await fetch(`/api/session/create`)
 
@@ -59,7 +227,6 @@ export default function Index() {
     setToken(token)
   }
 
-  // Handle text submission
   function handleOnKeyDown(event) {
     if (event.keyCode === 13) {
       event.preventDefault()
@@ -68,7 +235,6 @@ export default function Index() {
     }
   }
 
-  // Render chat interface
   return (
     <div style={{ fontFamily: 'monospace', padding: '10px' }}>
       {conversationId && token ? (
@@ -78,6 +244,11 @@ export default function Index() {
               <strong>{type}:</strong> {text}
             </div>
           ))}
+          {message ? (
+            <div key={message.id}>
+              <strong>bot:</strong> {message.text}
+            </div>
+          ) : null}
           {thinking && (
             <div key="thinking">
               <strong>bot:</strong> thinking...
@@ -103,9 +274,27 @@ export default function Index() {
     </div>
   )
 }
+
+// file: ./pages/api/conversation/complete.js
+import { ChatBotKit } from '@chatbotkit/sdk'
+import { stream } from '@chatbotkit/next/edge'
+
+const cbk = new ChatBotKit({
+  secret: process.env.CHATBOTKIT_API_SECRET,
+})
+
+export default async function handler(req) {
+  const { messages } = await req.json()
+
+  return stream(cbk.conversation.complete(null, { messages }))
+}
+
+export const config = {
+  runtime: 'edge',
+}
 ```
 
-Discover a complete example with advanced features [here](https://github.com/chatbotkit/node-sdk/tree/main/examples/nextjs/basic-chat).
+Discover more examples [here](https://github.com/chatbotkit/node-sdk/tree/main/examples/nextjs).
 
 ## Documentation
 

package/dist/cjs/actions/complete.cjs

@@ -3,55 +3,91 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.streamComplete = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const it_js_1 = require("../utils/it.cjs");
 const stream_js_1 = require("../utils/stream.cjs");
+const string_js_1 = require("../utils/string.cjs");
 async function* complete({ client, messages, functions, maxRecusion = 3, ...options }) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     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();
+    const functionDefinitions = functions === null || functions === void 0 ? void 0 : functions.map((fn) => {
+        if (typeof fn === 'function') {
+            return fn();
+        }
+        else {
+            return fn;
+        }
+    });
+    let it;
+    if (!it) {
+        const lastMessage = messages[messages.length - 1];
+        if (lastMessage) {
+            if (lastMessage.type === 'activity') {
+                if (((_b = (_a = lastMessage.meta) === null || _a === void 0 ? void 0 : _a.activity) === null || _b === void 0 ? void 0 : _b.type) === 'request') {
+                    messages.pop();
+                    it = [{ type: 'message', data: lastMessage }];
+                }
+            }
+        }
+    }
+    if (!it) {
+        it = client
+            .complete(null, {
+            ...options,
+            messages: messages.map(({ type, text, meta }) => {
+                return {
+                    type,
+                    text,
+                    meta,
+                };
+            }),
+            functions: functionDefinitions === null || functionDefinitions === void 0 ? void 0 : functionDefinitions.map(({ name, description, parameters }) => {
+                return {
+                    name,
+                    description,
+                    parameters: parameters.schema ? parameters.schema : parameters,
+                };
+            }),
+        })
+            .stream();
+    }
+    if (!it) {
+        throw new Error('No stream iterator');
+    }
     for await (const item of it) {
         yield item;
         const { type, data } = item;
         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 (((_d = (_c = message.meta) === null || _c === void 0 ? void 0 : _c.activity) === null || _d === void 0 ? void 0 : _d.type) === 'request') {
+                const name = (_e = message.meta.activity.function) === null || _e === void 0 ? void 0 : _e.name;
+                const args = (_f = message.meta.activity.function) === null || _f === void 0 ? void 0 : _f.arguments;
+                const fn = functionDefinitions === null || functionDefinitions === void 0 ? void 0 : functionDefinitions.find((fn) => fn.name === name);
                 if (fn && typeof fn.handler === 'function') {
+                    if (fn.parameters.validate) {
+                        const { valid, error } = await fn.parameters.validate(args);
+                        if (!valid) {
+                            throw error || new Error('Invalid arguments');
+                        }
+                    }
                     const output = await fn.handler(args);
                     let text;
                     let children;
                     let result;
+                    let render;
                     if (typeof output === 'string') {
                         text = undefined;
                         children = undefined;
+                        render = undefined;
                         result = output;
                     }
                     else if ((0, react_1.isValidElement)(output)) {
                         text = '';
                         children = output;
+                        render = undefined;
                         result = undefined;
                     }
                     else {
@@ -61,6 +97,9 @@ async function* complete({ client, messages, functions, maxRecusion = 3, ...opti
                         if ((0, react_1.isValidElement)(output === null || output === void 0 ? void 0 : output.children)) {
                             children = output.children;
                         }
+                        if (typeof (output === null || output === void 0 ? void 0 : output.render) === 'function') {
+                            render = output.render;
+                        }
                         if (output === null || output === void 0 ? void 0 : output.result) {
                             result = output.result;
                         }
@@ -75,6 +114,33 @@ async function* complete({ client, messages, functions, maxRecusion = 3, ...opti
                             },
                         };
                     }
+                    else if (text || render) {
+                        const result = await (render === null || render === void 0 ? void 0 : render());
+                        if ((0, it_js_1.isAsyncGenerator)(result)) {
+                            const id = (0, string_js_1.getRandomId)('tmp-');
+                            for await (const item of (result)) {
+                                yield {
+                                    type: 'message',
+                                    data: {
+                                        id: id,
+                                        type: 'bot',
+                                        text: text ? text : '',
+                                        children: item,
+                                    },
+                                };
+                            }
+                        }
+                        else {
+                            yield {
+                                type: 'message',
+                                data: {
+                                    type: 'bot',
+                                    text: text ? text : '',
+                                    children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: result }),
+                                },
+                            };
+                        }
+                    }
                     if (result) {
                         const activityMessage = {
                             type: 'activity',

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

@@ -1,24 +1,38 @@
 export function streamComplete(options: Options): import('../utils/stream.cjs').StreamResult;
 export default complete;
+export type ReactElement = import('react').ReactElement;
+export type ReactNode = import('react').ReactNode;
+export type BasicParametersSchema = Record<string, any>;
+export type ValidatingParametersSchema = {
+    schema: BasicParametersSchema;
+    validate(value: any): Promise<{
+        valid: boolean;
+        error?: Error;
+    }>;
+};
 export type InputMessage = {
     type: 'bot' | 'user' | 'context' | 'instruction' | 'backstory' | 'activity';
     text: string;
     meta?: Record<string, any>;
 };
+export type RenderFunction = () => AsyncGenerator<ReactNode> | ReactNode | Promise<ReactNode>;
+export type HandlerArgs = any;
+export type HandlerResult = string | ReactElement | {
+    text?: string;
+    children?: ReactNode;
+    render?: RenderFunction;
+    result?: any;
+};
 export type InputFunction = {
     name: string;
     description: string;
-    parameters: Record<string, any>;
-    handler?: (args: any) => Promise<string | import('react').ReactElement | {
-        text?: string;
-        children?: import('react').ReactElement;
-        result?: any;
-    }>;
+    parameters: BasicParametersSchema | ValidatingParametersSchema;
+    handler?: (args: HandlerArgs) => Promise<HandlerResult>;
 };
 export type Options = Omit<any, 'messages' | 'functions'> & {
     client: import('@chatbotkit/sdk').ConversationClient;
     messages: InputMessage[];
-    functions?: InputFunction[];
+    functions?: (InputFunction | (() => InputFunction))[];
     maxRecusion?: number;
 };
 declare function complete({ client, messages, functions, maxRecusion, ...options }: Options): any;

package/dist/cjs/components/AutoScroller.cjs

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoScroller = void 0;

package/dist/cjs/components/AutoTextarea.cjs

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoTextarea = void 0;

package/dist/cjs/components/ChatInput.cjs

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChatInput = void 0;

package/dist/cjs/components/ChatMessage.cjs

@@ -1,3 +1,4 @@
+'use any';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChatMessage = void 0;

package/dist/cjs/components/ChatMessages.cjs

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChatMessages = void 0;

package/dist/cjs/components/ConversationManager.cjs

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConversationManager = exports.ConversationContext = void 0;
@@ -6,32 +7,17 @@ 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: () => { },
+    message: null,
     messages: [],
-    setMessages: () => { },
     thinking: false,
-    setThinking: () => { },
     typing: false,
-    setTyping: () => { },
+    text: '',
+    setText: () => { },
     error: null,
     setError: () => { },
-    submit: () => { },
-    trigger: () => { },
+    submit: async () => false,
+    trigger: async () => false,
+    request: async () => false,
 }));
 function ConversationManager({ children, ...options }) {
     const manager = (0, useConversationManager_js_1.default)(options);