Embedded Search and Chat (React)
Add a toggleable search and chat UI directly on a dedicated page
Overview
This is a toggleable chat / search UI that is directly incorporated into a page instead of within a pop-up modal.
It's a combination of the Embedded Chat and the Embedded Search components, allowing you to toggle between chat and search.
Quick Start
Install the component library
npm install @inkeep/cxkit-reactyarn add @inkeep/cxkit-reactDefine the component
import {
InkeepEmbeddedSearchAndChat,
type InkeepEmbeddedSearchAndChatProps,
} from "@inkeep/cxkit-react";
const config: InkeepEmbeddedSearchAndChatProps = {
baseSettings: {
apiKey: "YOUR_API_KEY",
},
aiChatSettings: {
aiAssistantName: "Keepie",
},
searchSettings: {
placeholder: "Search...",
},
};
const App = () => {
return <InkeepEmbeddedSearchAndChat {...config} />;
};Embedded Search Props
This type represents the configuration for the Inkeep embedded search widget.
| Prop | Type | Required | Description |
|---|---|---|---|
baseSettings | object | Yes | Core configuration settings. See Base Settings for details. |
searchSettings | object | No | Search configuration settings. See Search Settings for details. |
isHidden | boolean | No | Whether to hide the search interface. Defaults to false. |
shouldAutoFocusInput | boolean | No | Whether to auto focus the input. Defaults to true. |
askAILabel | string | No | The label for the Ask AI button in search, also shown in the search/chat toggle |
searchLabel | string | No | The label for the search item in the search/chat toggle. |
Examples
Set the default view
const App = () => {
const config: InkeepEmbeddedSearchAndChatProps = {
// ... other config
defaultView: "chat", // or "search"
};
return <InkeepEmbeddedSearchAndChat {...config} />;
};Force the default view
If you want to force the default view to be the search or the chat, you can use the forceDefaultView property. This is useful to ensure the widget always opens the defaultView instead of last used view.
const App = () => {
const config: InkeepEmbeddedSearchAndChatProps = {
// ... other config
forceDefaultView: true,
};
return <InkeepEmbeddedSearchAndChat {...config} />;
};Refer to the Search Settings and Chat Settings docs for more details on the available properties.
Accessing Component Methods
Exactly how you'd do it in the Embedded Search and Embedded Chat components respectively.
const App = () => {
import type { SearchFunctions } from "@inkeep/cxkit-types";
const searchFunctionsRef = useRef<SearchFunctions | null>(null);
const chatFunctionsRef = useRef<ChatFunctions | null>(null);
const config: InkeepEmbeddedSearchAndChatProps = {
// ... other config
searchSettings: {
searchFunctionsRef,
},
aiChatSettings: {
chatFunctionsRef,
},
};
const updateSearchQuery = () => {
searchFunctionsRef.current?.updateQuery("Hello!");
};
const clearChat = () => {
chatFunctionsRef.current?.clearChat();
};
return (
<>
<InkeepEmbeddedSearchAndChat {...config} />
<button onClick={updateSearchQuery}>Update Query</button>
<button onClick={clearChat}>Clear Chat</button>
</>
);
};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 |
Widget methods
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;