@inkeep/widgets -> @inkeep/cxkit-react (#151)

* Initial draft for inkeep migration

* Bump to latest

* Tweak transform source logic

* Remove excessive breadcrumb check

* Test against goteleport.dev

* Add inkeep package to the list of allowlisted dependencies

* update inkeep to 0.5.32

* update to 0.5.33

* Revert "Test against goteleport.dev"

This reverts commit cdb89c4.

* bump @inkeep/cxkit-react to 0.5.36

* Add `LicenseRef-scancode-public-domain AND Unlicense` license

---------

Co-authored-by: sarah_inkeep <sarah.niemiec@inkeep.com>

Author: taraspos

.github/workflows/dependency-review.yaml

@@ -9,4 +9,13 @@ jobs:
     permissions:
       contents: read
     with:
-      allow-dependencies-licenses: 'pkg:npm/%40inkeep/widgets, pkg:npm/domain-browser'
+      allow-additional-licenses: >
+        LicenseRef-scancode-public-domain AND Unlicense
+      allow-dependencies-licenses: >
+        pkg:npm/%40inkeep/cxkit-color-mode,
+        pkg:npm/%40inkeep/cxkit-primitives,
+        pkg:npm/%40inkeep/cxkit-react,
+        pkg:npm/%40inkeep/cxkit-styled,
+        pkg:npm/%40inkeep/cxkit-theme,
+        pkg:npm/%40inkeep/cxkit-types,
+        pkg:npm/domain-browser

README.md

@@ -35,7 +35,7 @@ Settings for AWS Amplify are following:
 1. `nodejs` 20 and `yarn` v1.22.22.
 2. Build command `yarn build`
 4. Build results folder `build`
-5. Following env variables should be set: `INKEEP_API_KEY`, `INKEEP_INTEGRATION_ID`, `INKEEP_ORGANIZATION_ID`, `YOUTUBE_API_KEY`, `SANITY_PROJECT_ID`, `SANITY_DATASET`.
+5. Following env variables should be set: `INKEEP_API_KEY`, `YOUTUBE_API_KEY`, `SANITY_PROJECT_ID`, `SANITY_DATASET`.
 6. This variable should be set increase nodejs memory `NODE_OPTIONS=--max-old-space-size=8192`
 7. Add the following redirect to make 404 work:
     - Source address: `/<*>` 

content/18.x

@@ -41,8 +41,6 @@ const config: Config = {
   customFields: {
     inkeepConfig: {
       apiKey: getFromSecretOrEnv("INKEEP_API_KEY"),
-      integrationId: getFromSecretOrEnv("INKEEP_INTEGRATION_ID"),
-      organizationId: getFromSecretOrEnv("INKEEP_ORGANIZATION_ID"),
     },
   },
   clientModules: [

docusaurus.config.ts

@@ -54,7 +54,7 @@
     "@docusaurus/plugin-svgr": "^3.7.0",
     "@docusaurus/theme-classic": "^3.7.0",
     "@docusaurus/tsconfig": "^3.7.0",
-    "@inkeep/widgets": "^0.2.292",
+    "@inkeep/cxkit-react": "^0.5.36",
     "@mdx-js/react": "^3.0.0",
     "classnames": "^2.3.1",
     "clsx": "^2.1.1",

package.json

@@ -1,84 +1,69 @@
 import React, { useState, useRef, useCallback, useEffect } from "react";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import BrowserOnly from "@docusaurus/BrowserOnly";
-import { useDocsVersion } from "@docusaurus/plugin-content-docs/client";
-import {
-  type InkeepAIChatSettings,
-  type InkeepSearchSettings,
-  type InkeepCustomTriggerProps,
-  type InkeepWidgetBaseSettings,
-  type AIChatFunctions,
-  type SearchFunctions,
-} from "@inkeep/widgets";
+import type {
+  InkeepAIChatSettings,
+  InkeepSearchSettings,
+  InkeepModalSearchAndChatProps,
+  InkeepBaseSettings,
+  AIChatFunctions,
+  SearchFunctions,
+} from "@inkeep/cxkit-react";
 
 import styles from "./InkeepSearch.module.css";
 import InkeepSearchIconSvg from "./inkeepIcon.svg";
 
-const cssOverrides = `
-  .ikp-modal-widget-content {
-    border: 2px solid #512FC9;
-    border-radius: 12px;
-    top: 88px;
-    left: 12px;
-  }
-`;
-
-const stylesheets = [<style key="inkeep-overrides">{cssOverrides}</style>];
 
 export function InkeepSearch() {
-  const versionMetadata = useDocsVersion();
-  const { version } = versionMetadata;
   const [isOpen, setIsOpen] = useState(false);
   const [message, setMessage] = useState("");
   const [CustomTrigger, setCustomTrigger] = useState(null);
 
   useEffect(() => {
     (async () => {
-      const { InkeepCustomTrigger } = await import("@inkeep/widgets");
-      setCustomTrigger(() => InkeepCustomTrigger);
+      const { InkeepModalSearchAndChat } = await import("@inkeep/cxkit-react");
+      setCustomTrigger(() => InkeepModalSearchAndChat);
     })();
   }, []);
 
   const { siteConfig } = useDocusaurusContext();
 
   const inkeepConfig = siteConfig.customFields.inkeepConfig as {
     apiKey: string;
-    integrationId: string;
-    organizationId: string;
   };
 
-  const inkeepBaseSettings: InkeepWidgetBaseSettings = {
-    apiKey: inkeepConfig.apiKey,
-    integrationId: inkeepConfig.integrationId,
-    organizationId: inkeepConfig.organizationId,
+  const inkeepBaseSettings: InkeepBaseSettings = {
+    apiKey: inkeepConfig.apiKey || '',
     organizationDisplayName: "Teleport",
     primaryBrandColor: "#512FC9",
-    chatApiProxyDomain: "goteleport.com/inkeep-proxy",
-    remoteErrorLogsLevel: 1,
-    optOutAllAnalytics: false,
-    consoleDebugLevel: 0,
-    customCardSettings: [
-      {
-        filters: {
-          ContentType: "docs",
-        },
-        searchTabLabel: "Docs",
-        icon: { builtIn: "IoDocumentTextOutline" },
-      },
-    ],
+    aiApiBaseUrl: "https://goteleport.com/inkeep-proxy",
+    privacyPreferences: {
+      optOutAllAnalytics: true,
+    },
+    transformSource: (source) => {
+      const isDocs =
+      source.contentType === 'docs' ||
+      source.type === 'documentation'
+      if (!isDocs) {
+        return source
+      }
+    return {
+      ...source,
+      tabs: ['Docs', ...(source.tabs ?? [])],
+      icon: { builtIn: 'IoDocumentTextOutline' },
+    }
+    },
+    colorMode: {
+      forcedColorMode: "light",
+    },
     theme: {
-      colorMode: {
-        forcedColorMode: "light",
-      },
-      tokens: {
-        zIndex: {
-          overlay: "2100",
-          modal: "2200",
-          popover: "2300",
-          skipLink: "2400",
-          toast: "2500",
-          tooltip: "2600",
-        },
+      zIndex: {
+        overlay: "2100",
+        modal: "2200",
+        popover: "2300",
+        skipLink: "2400",
+        toast: "2500",
+        tooltip: "2600",
       },
     },
   };
@@ -89,39 +74,33 @@ export function InkeepSearch() {
   const handleChange = useCallback(
     (str: string) => {
       chatCallableFunctionsRef.current?.updateInputMessage(str);
-      searchCallableFunctionsRef.current?.updateSearchQuery(str);
+      searchCallableFunctionsRef.current?.updateQuery(str);
       setMessage(str);
-      setIsOpen(true);
+      if (str) {
+        setIsOpen(true);
+      }
     },
-    [setMessage, chatCallableFunctionsRef, searchCallableFunctionsRef]
+    []
   );
 
-  const handleClose = useCallback(() => {
-    setIsOpen(false);
-  }, []);
 
-  const inkeepCustomTriggerProps: InkeepCustomTriggerProps = {
-    isOpen,
-    onClose: handleClose,
-    stylesheets,
+  const inkeepCustomTriggerProps: InkeepModalSearchAndChatProps = {
     baseSettings: {
       ...inkeepBaseSettings,
     },
     aiChatSettings: {
       ...inkeepAIChatSettings,
       chatFunctionsRef: chatCallableFunctionsRef,
-      handleMessageChange: handleChange,
-      messageAttributes: {
-        productVersion: version,
-      },
+      onInputMessageChange: handleChange,
     },
     searchSettings: {
       ...inkeepSearchSettings,
       searchFunctionsRef: searchCallableFunctionsRef,
-      handleSearchQueryChange: handleChange,
+      onQueryChange: handleChange,
     },
     modalSettings: {
-      closeOnBlur: true,
+      onOpenChange: setIsOpen,
+      isOpen: isOpen,
     },
   };
 
@@ -150,21 +129,16 @@ export function InkeepSearch() {
 }
 
 const inkeepAIChatSettings: InkeepAIChatSettings = {
-  botName: "Teleport",
-  botAvatarSrcUrl: "https://goteleport.com/static/pam-standing.svg",
-  isControlledMessage: true,
-  defaultChatMode: "AUTO",
+  aiAssistantName: 'Teleport',
+  aiAssistantAvatar: 'https://goteleport.com/static/pam-standing.svg',
 };
 
 const inkeepSearchSettings: InkeepSearchSettings = {
-  placeholder: "Search Docs",
-  tabSettings: {
-    isAllTabEnabled: false,
-    rootBreadcrumbsToUseAsTabs: ["Docs", "GitHub"],
-    tabOrderByLabel: ["Docs", "GitHub"],
-    alwaysDisplayedTabs: ["Docs", "GitHub"],
-    disabledDefaultTabs: undefined,
-  },
-  isControlledSearchQuery: true,
+  placeholder: 'Search Docs',
+  tabs: [
+    ['Docs', { isAlwaysVisible: true }],
+    ['GitHub', { isAlwaysVisible: true }],
+  ],
   shouldOpenLinksInNewTab: true,
+  view: 'dual-pane',
 };