Embedded Search (React)

Overview

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

Quick Start

Install the component library

npm install @inkeep/cxkit-react

yarn add @inkeep/cxkit-react

Define the component

import {
  InkeepEmbeddedSearch,
  type InkeepEmbeddedSearchProps,
} from "@inkeep/cxkit-react";
 
const config: InkeepEmbeddedSearchProps = {
  baseSettings: {
    apiKey: "YOUR_API_KEY",
  },
  searchSettings: {
    placeholder: "Search...",
  },
};
 
const App = () => {
  return <InkeepEmbeddedSearch {...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

Examples

Auto Focus Input

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

With Search Settings

const App = () => {
  const config: InkeepEmbeddedSearchProps = {
    // ... other config
    searchSettings: {
      placeholder: "Search...",
      debounceTimeMs: 300,
    },
  };
 
  return <InkeepEmbeddedSearch {...config} />;
};

Accessing Component Methods

The searchSettings config accepts a searchFunctionsRef prop that allows you to access the search methods.

const App = () => {
  import type { SearchFunctions } from "@inkeep/cxkit-types";
 
  const searchFunctionsRef = useRef<SearchFunctions | null>(null);
 
  const config: InkeepEmbeddedSearchProps = {
    // ... other config
    searchSettings: {
      searchFunctionsRef,
    },
  };
 
  const updateQuery = () => {
    searchFunctionsRef.current?.updateQuery("Hello!");
  };
 
  const focusInput = () => {
    searchFunctionsRef.current?.focusInput();
  };
 
  return (
    <>
      <InkeepEmbeddedSearch {...config} />
      <button onClick={updateQuery}>Update Query</button>
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
};

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

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 Search (React)

Can't resolve 'react/jsx-runtime'

On this page