Custom Trigger for a modal (React)

Use the "Custom Trigger" if you want to use a custom button, search bar, link, or any other UI element for opening and closing Inkeep's modal components.

Overview

Modal components are extensions of their embedded counterparts, providing the same functionality in a modal interface. Examples:

Quick Start

Install the component library

npm install @inkeep/cxkit-react

yarn add @inkeep/cxkit-react

Define the component

Let's use the Modal version of the Search and Chat component as an example.

import React, { useState, useRef, useCallback } from "react";
import {
  InkeepModalSearchAndChat,
  type InkeepModalSearchAndChatProps,
} from "@inkeep/cxkit-react";
 
const App = () => {
  const [isOpen, setIsOpen] = useState(false);
 
  const config: InkeepModalSearchAndChatProps = {
    baseSettings: {
      apiKey: "YOUR_API_KEY",
      primaryBrandColor: '#000000',
    },
    modalSettings: {
      isOpen,
      onOpenChange: handleOpenChange,
    },
    aiChatSettings: {
      aiAssistantName: "Keepie",
    },
    searchSettings: {
      placeholder: "Search...",
    },
  };
 
  const handleOpenChange = useCallback((newOpen: boolean) => {
    setIsOpen(newOpen);
  }, []);
 
  return (
    <>
      {/* Custom Trigger */}
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
 
      {/* Modal Component */}
      <InkeepModalSearchAndChat {...config} />
    </>
  );
};

Modal settings control the behavior and interaction of modal components. These settings are passed in the modalSettings prop.

Setting	Type	Default	Description
`isOpen`	`boolean`	`false`	Controls the visibility of the modal. Set to `true` to show the modal, `false` to hide it.
`onOpenChange`	`(isOpen: boolean) => void`	-	Callback function triggered when the modal's open state changes. Useful for syncing state with your application.
`shortcutKey`	`string \| null`	`'k'`	The keyboard key that triggers the modal when pressed with Cmd (Mac) or Ctrl (Windows). Set to `null` to disable the shortcut.

Basically means the modal extensions of the following components:

A modal version of the embedded search component. For detailed information about search functionality and available settings, see Embedded Search.

import React, { useState, useRef, useCallback } from "react";
import {
  InkeepModalSearch,
  type InkeepModalSearchProps,
} from "@inkeep/cxkit-react";
 
const App = () => {
  const [isOpen, setIsOpen] = useState(false);
  const searchFunctionsRef = useRef<SearchFunctions | null>(null);
 
  const config: InkeepModalSearchProps = {
    baseSettings: {
      apiKey: "YOUR_API_KEY",
      primaryBrandColor: '#000000',
    },
    searchSettings: {
      placeholder: "Search...",
      searchFunctionsRef,
    },
    modalSettings: {
      isOpen,
      onOpenChange: handleOpenChange,
    },
  };
 
  const handleOpenChange = useCallback((newOpen: boolean) => {
    setIsOpen(newOpen);
  }, []);
 
  // Access search methods
  const updateQuery = () => {
    searchFunctionsRef.current?.updateQuery("Hello!");
  };
 
  return (
    <>
      {/* Custom Trigger */}
      <button onClick={() => setIsOpen(true)}>Open Search Modal</button>
 
      {/* Modal Component */}
      <InkeepModalSearch {...config} />
 
      {/* Update Query */}
      <button onClick={updateQuery}>Update Query</button>
    </>
  );
};

A modal version of the embedded chat component. For detailed information about chat functionality and available settings, see Embedded Chat.

import React, { useState, useRef, useCallback } from "react";
import {
  InkeepModalChat,
  type InkeepModalChatProps,
} from "@inkeep/cxkit-react";
 
const App = () => {
  const [isOpen, setIsOpen] = useState(false);
  const chatFunctionsRef = useRef<ChatFunctions | null>(null);
 
  const config: InkeepModalChatProps = {
    baseSettings: {
      apiKey: "YOUR_API_KEY",
      primaryBrandColor: '#000000',
    },
    aiChatSettings: {
      aiAssistantName: "Keepie",
    },
    modalSettings: {
      isOpen,
      onOpenChange: handleOpenChange,
    },
  };
 
  const handleOpenChange = useCallback((newOpen: boolean) => {
    setIsOpen(newOpen);
  }, []);
 
  // Access chat methods
  const clearChat = () => {
    chatFunctionsRef.current?.clearChat();
  };
 
  return (
    <>
      {/* Custom Trigger */}
      <button onClick={() => setIsOpen(true)}>Open Chat Modal</button>
 
      {/* Modal Component */}
      <InkeepModalChat {...config} />
 
      {/* Clear Chat */}
      <button onClick={clearChat}>Clear Chat</button>
    </>
  );
};

A modal version of the embedded search and chat component. For detailed information about search and chat functionality and available settings, see Embedded Search and Chat.

import React, { useState, useRef, useCallback } from "react";
import {
  InkeepModalSearchAndChat,
  type InkeepModalSearchAndChatProps,
} from "@inkeep/cxkit-react";
 
const App = () => {
  const [isOpen, setIsOpen] = useState(false);
  const searchFunctionsRef = useRef<SearchFunctions | null>(null);
  const chatFunctionsRef = useRef<ChatFunctions | null>(null);
 
  const config: InkeepModalSearchAndChatProps = {
    baseSettings: {
      apiKey: "YOUR_API_KEY",
      primaryBrandColor: '#000000',
    },
    searchSettings: {
      placeholder: "Search...",
      searchFunctionsRef,
    },
    aiChatSettings: {
      aiAssistantName: "Keepie",
      chatFunctionsRef,
    },
    modalSettings: {
      isOpen,
      onOpenChange: handleOpenChange,
    },
  };
 
  const handleOpenChange = useCallback((newOpen: boolean) => {
    setIsOpen(newOpen);
  }, []);
 
  // Access search methods
  const updateQuery = () => {
    searchFunctionsRef.current?.updateQuery("Hello!");
  };
 
  // Access chat methods
  const clearChat = () => {
    chatFunctionsRef.current?.clearChat();
  };
 
  return (
    <>
      {/* Custom Trigger */}
      <button onClick={() => setIsOpen(true)}>
        Open Search and Chat Modal
      </button>
 
      {/* Modal Component */}
      <InkeepModalSearchAndChat {...config} />
 
      {/* Update Query */}
      <button onClick={updateQuery}>Update Query</button>
 
      {/* Clear Chat */}
      <button onClick={clearChat}>Clear Chat</button>
    </>
  );
};

Component Methods

Chat Methods

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.

Search methods

Method	Description
`updateQuery(query: string)`	Programmatically updates the search query.
`focusInput()`	Sets focus to the search input field

type ModalViewTypes = "search" | "chat";

Method	Description
`setView(view: ModalViewTypes)`	Set the view of the widget to either search or chat

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;

Custom Trigger for a modal (React)

Overview

Quick Start

Install the component library

Define the component

Component Methods

Chat Methods

Search methods

Widget methods

FAQ

On this page

Custom Trigger for a modal (React)

Can't resolve 'react/jsx-runtime'

On this page