@chatbotkit/react 1.6.0 → 1.8.0

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

@@ -0,0 +1,178 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.streamComplete = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const 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, _e, _f;
+    if (maxRecusion <= 0) {
+        return;
+    }
+    messages = messages.slice(0);
+    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 (((_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 {
+                        if (typeof (output === null || output === void 0 ? void 0 : output.text) === 'string') {
+                            text = output.text;
+                        }
+                        if ((0, react_1.isValidElement)(output === null || output === void 0 ? void 0 : output.children)) {
+                            children = output.children;
+                        }
+                        if (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;
+                        }
+                    }
+                    if (text || children) {
+                        yield {
+                            type: 'message',
+                            data: {
+                                type: 'bot',
+                                text: text ? text : '',
+                                children: children ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }) : undefined,
+                            },
+                        };
+                    }
+                    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',
+                            text: '',
+                            meta: {
+                                activity: {
+                                    type: 'response',
+                                    function: {
+                                        name,
+                                        arguments: args,
+                                        result: JSON.stringify(result),
+                                    },
+                                },
+                            },
+                        };
+                        yield { type: 'message', data: activityMessage };
+                        messages.push(activityMessage);
+                        yield* complete({
+                            ...options,
+                            client,
+                            messages,
+                            functions,
+                            maxRecusion: maxRecusion - 1,
+                        });
+                    }
+                }
+            }
+        }
+    }
+}
+function streamComplete(options) {
+    return (0, stream_js_1.stream)(complete(options));
+}
+exports.streamComplete = streamComplete;
+exports.default = complete;

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

@@ -0,0 +1,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: BasicParametersSchema | ValidatingParametersSchema;
+    handler?: (args: HandlerArgs) => Promise<HandlerResult>;
+};
+export type Options = Omit<any, 'messages' | 'functions'> & {
+    client: import('@chatbotkit/sdk').ConversationClient;
+    messages: InputMessage[];
+    functions?: (InputFunction | (() => InputFunction))[];
+    maxRecusion?: number;
+};
+declare function complete({ client, messages, functions, maxRecusion, ...options }: Options): any;

package/dist/cjs/components/ConversationManager.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConversationManager = exports.ConversationContext = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useConversationManager_js_1 = tslib_1.__importDefault(require("../hooks/useConversationManager.cjs"));
+exports.ConversationContext = (0, react_1.createContext)(({
+    message: null,
+    messages: [],
+    thinking: false,
+    typing: false,
+    text: '',
+    setText: () => { },
+    error: null,
+    setError: () => { },
+    submit: () => { },
+    trigger: () => { },
+    request: () => { },
+}));
+function ConversationManager({ children, ...options }) {
+    const manager = (0, useConversationManager_js_1.default)(options);
+    return ((0, jsx_runtime_1.jsx)(exports.ConversationContext.Provider, { value: manager, children: children }));
+}
+exports.ConversationManager = ConversationManager;
+exports.default = ConversationManager;

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

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