Add Search Bar to Gatsby

const baseSettings = {
  apiKey,
  primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
  organizationDisplayName: "Inkeep",
  // ...optional settings
};
 
const modalSettings = {
  // optional settings
};
 
const searchSettings = {
  // optional settings
};
 
const aiChatSettings = {
  // optional settings
  aiAssistantAvatar: "/img/logo.svg", // use your own AI assistant avatar
  exampleQuestions: [
    "Example question 1?",
    "Example question 2?",
    "Example question 3?",
  ],
};

import type {
  InkeepAIChatSettings,
  InkeepSearchSettings,
  InkeepBaseSettings,
  InkeepModalSettings,
} from "@inkeep/cxkit-react";
 
const baseSettings: InkeepBaseSettings = {
  apiKey,
  primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
  organizationDisplayName: "Inkeep",
  // ...optional settings
};
 
const modalSettings: InkeepModalSettings = {
  // optional settings
};
 
const searchSettings: InkeepSearchSettings = {
  // optional settings
};
 
const aiChatSettings: InkeepAIChatSettings = {
  // optional settings
  aiAssistantAvatar: "/img/logo.svg", // use your own AI assistant avatar
  exampleQuestions: [
    "Example question 1?",
    "Example question 2?",
    "Example question 3?",
  ],
};

import * as React from "react";
import { useEffect, useState } from "react";
 
export default function InkeepSearchBar() {
  const [SearchBar, setSearchBar] = useState(null);
 
  //...
 
  // load the library asynchronously
  useEffect(() => {
    const loadSearchBar = async () => {
      try {
        const { InkeepSearchBar } = await import("@inkeep/cxkit-react");
        setSearchBar(() => InkeepSearchBar);
      } catch (error) {
        console.error("Failed to load SearchBar:", error);
      }
    };
 
    loadSearchBar();
  }, []);
 
  const searchBarProps = {
    baseSettings,
    aiChatSettings,
    searchSettings,
    modalSettings,
  };
 
  return SearchBar && <SearchBar {...searchBarProps} />;
}

import * as React from "react";
import { useEffect, useState } from "react";
import type { InkeepSearchBarProps } from "@inkeep/cxkit-react";
 
export default function InkeepSearchBar() {
  const [SearchBar, setSearchBar] =
    useState<(e: InkeepSearchBarProps) => JSX.Element>();
 
  //...
 
  // load the library asynchronously
  useEffect(() => {
    const loadSearchBar = async () => {
      try {
        const { InkeepSearchBar } = await import("@inkeep/cxkit-react");
        setSearchBar(() => InkeepSearchBar);
      } catch (error) {
        console.error("Failed to load SearchBar:", error);
      }
    };
 
    loadSearchBar();
  }, []);
 
  const searchBarProps: InkeepSearchBarProps = {
    baseSettings,
    aiChatSettings,
    searchSettings,
    modalSettings,
  };
 
  return SearchBar && <SearchBar {...searchBarProps} />;
}