Embedded Chat (React)

Overview

An "embedded chat" is a chat UI that is directly incorporated into a page instead of within a pop-up modal.

Scenarios

You may want to add an embedded chat in places where you want to encourage the user to interact with the AI chat directly. For example, an embedded chat can be useful to:

Deflect questions in your help center site
Provide an AI chat experience if your documentation site doesn't allow third party components, like for GitBook and ReadMe.
Create a place for sharable chat sessions

You can incorporate the embedded chat directly on an existing page like help.domain.com or create a dedicated one like domain.com/ask-ai.

Quick Start

Install the component library

npm install @inkeep/cxkit-react

yarn add @inkeep/cxkit-react

Define the component

import {
  InkeepEmbeddedChat,
  type InkeepEmbeddedChatProps,
} from "@inkeep/cxkit-react";
 
const config: InkeepEmbeddedChatProps = {
  baseSettings: {
    apiKey: "YOUR_API_KEY",
  },
  aiChatSettings: {
    aiAssistantName: "Keepie",
  },
};
 
const App = () => {
  return <InkeepEmbeddedChat {...config} />;
};

Embedded Chat Props

This type represents the configuration for the Inkeep embedded chat widget.

Prop	Type	Required	Description
`baseSettings`	`object`	Yes	Core configuration settings. See Base Settings for details.
`aiChatSettings`	`object`	No	AI chat configuration settings. See AI Chat Settings for details.
`isHidden`	`boolean`	No	Whether to hide the chat interface. Defaults to false.
`shouldAutoFocusInput`	`boolean`	No	Whether to auto focus the input. Defaults to true.

Examples

Auto Focus Input

const App = () => {
  const config: InkeepEmbeddedChatProps = {
    // ... other config
    shouldAutoFocusInput: true,
  };
 
  return <InkeepEmbeddedChat {...config} />;
};

With AI Chat Settings

const App = () => {
  const config: InkeepEmbeddedChatProps = {
    // ... other config
    aiChatSettings: {
      aiAssistantName: "Support Assistant",
      introMessage: "👋 Hi! How can I help you today?",
    },
  };
 
  return <InkeepEmbeddedChat {...config} />;
};

Accessing Component Methods

The aiChatSettings config accepts a chatFunctionsRef prop that allows you to access the chat methods.

const App = () => {
  import type { AIChatFunctions } from "@inkeep/cxkit-types";
 
  const chatFunctionsRef = useRef<AIChatFunctions | null>(null);
 
  const config: InkeepEmbeddedChatProps = {
    // ... other config
    aiChatSettings: {
      chatFunctionsRef,
    },
  };
 
  const clearChat = () => {
    chatFunctionsRef.current?.clearChat();
  };
 
  const submitMessage = () => {
    chatFunctionsRef.current?.submitMessage("Hello!");
  };
 
  return (
    <>
      <InkeepEmbeddedChat {...config} />
      <button onClick={clearChat}>Clear Chat</button>
      <button onClick={submitMessage}>Send Message</button>
    </>
  );
};

Method	Description
`submitMessage(message?: string)`	Programmatically sends a message in chat. If message is omitted, sends the current input value.
`updateInputMessage(message: string)`	Updates the text in chat input field
`clearChat()`	Resets the chat to its initial state
`openForm(formSettings: FormSettings)`	Displays a form overlay in chat interface
`focusInput()`	Sets focus to the chat input field

Refer to the Form Settings reference docs for more details on the available properties for the openForm method.

FAQ

If you use a webpack build. You could come across this error. To fix this you need to create a custom loader for your webpack configuration to disable this behavior.

Since webpack 5.0.0-beta.30, you're required to specify extensions when using imports in .mjs files or any .js files with a package.json with "type": "module". You can still disable the behavior with resolve.fullySpecified set to false if you see any related errors in your project.

We can add a new rule to our webpack configuration to disable this behavior.

module.exports = {
    module: {
        rules: [
            {
                test: /\.m?js/,
                resolve: {
                    fullySpecified: false,
                },
            },
        ],
    },
};

Then add this to your webpack.config.js file.

If you use docusaurus, you can add this to your docusaurus.config.js file as a webpack config override with plugins.

/** @type {import('@docusaurus/types').Config} */
const config = {
// ...
plugins: [
    () => {
    return {
        name: "loader",
        configureWebpack() {
        return {
            module: {
            rules: [
                {
                test: /\.m?js/,
                resolve: {
                    fullySpecified: false,
                },
                },
            ],
            },
        };
        },
    };
    },
],
// ...
};
 
module.exports = config;

Embedded Chat (React)

Can't resolve 'react/jsx-runtime'

On this page