bump inkeep widgets

components/Search/InkeepSearch.module.css

@@ -12,7 +12,7 @@
 
 .search-input {
   width: 100%;
-  color: var(--color-black);
+  color: var(--color-text);
   background: transparent;
   border: none;
   font-size: 14px;
@@ -23,6 +23,7 @@
 
   @media (max-width: 560px) {
     width: 100%;
+    font-size: 16px;
   }
 }
 

components/Search/InkeepSearch.tsx

@@ -1,24 +1,34 @@
 import React, { useContext, useState, useRef, useCallback } from "react";
 import dynamic from "next/dynamic";
 import {
-  InkeepAIChatSettings,
-  InkeepSearchSettings,
-  InkeepCustomTriggerProps,
-  InkeepWidgetBaseSettings,
-  RemoteErrorLogsLevel,
-  ConsoleDebugLevel,
-  AIChatFunctions,
-  SearchFunctions,
+  type InkeepAIChatSettings,
+  type InkeepSearchSettings,
+  type InkeepCustomTriggerProps,
+  type InkeepWidgetBaseSettings,
+  type AIChatFunctions,
+  type SearchFunctions,
 } from "@inkeep/widgets";
 
 import { DocsContext } from "layouts/DocsPage/context";
 
 import styles from "./InkeepSearch.module.css";
 import InkeepSearchIconSvg from "./inkeepIcon.svg?react";
+import { lato } from "../../pages/_app";
 
 const API_KEY = process.env.NEXT_PUBLIC_INKEEP_API_KEY;
 const INTEGRATION_ID = process.env.NEXT_PUBLIC_INKEEP_INTEGRATION_ID;
 
+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>];
+
 const InkeepCustomTrigger = dynamic<InkeepCustomTriggerProps>(
   () => import("@inkeep/widgets").then((mod) => mod.InkeepCustomTrigger),
   { ssr: false }
@@ -49,11 +59,17 @@ export function InkeepSearch() {
   const inkeepCustomTriggerProps: InkeepCustomTriggerProps = {
     isOpen,
     onClose: handleClose,
-    baseSettings: { ...inkeepBaseSettings, productVersion: version },
+    stylesheets,
+    baseSettings: {
+      ...inkeepBaseSettings,
+    },
     aiChatSettings: {
       ...inkeepAIChatSettings,
       chatFunctionsRef: chatCallableFunctionsRef,
       handleMessageChange: handleChange,
+      messageAttributes: {
+        productVersion: version,
+      },
     },
     searchSettings: {
       ...inkeepSearchSettings,
@@ -90,12 +106,10 @@ const inkeepBaseSettings: InkeepWidgetBaseSettings = {
   organizationId: "teleport",
   organizationDisplayName: "Teleport",
   primaryBrandColor: "#512FC9",
-  product: "Teleport",
-  isInkeepMentionEnabled: true,
-  apiProxyDomain: "goteleport.com/inkeep-proxy",
-  remoteErrorLogsLevel: RemoteErrorLogsLevel.AnonymousErrors,
+  chatApiProxyDomain: "goteleport.com/inkeep-proxy",
+  remoteErrorLogsLevel: 1,
   optOutAllAnalytics: true,
-  consoleDebugLevel: ConsoleDebugLevel.None,
+  consoleDebugLevel: 0,
   customCardSettings: [
     {
       filters: {
@@ -106,24 +120,21 @@ const inkeepBaseSettings: InkeepWidgetBaseSettings = {
     },
   ],
   theme: {
-    zIndices: {
-      overlay: "2100",
-      modal: "2200",
-      popover: "2300",
-      skipLink: "2400",
-      toast: "2500",
-      tooltip: "2600",
+    colorMode: {
+      forcedColorMode: "light",
     },
-    components: {
-      InkeepWidgetModal: {
-        ModalContent: {
-          styles: {
-            border: "2px solid #512FC9",
-            borderRadius: "xl",
-            top: "88px",
-            left: "12px",
-          },
-        },
+    tokens: {
+      fonts: {
+        heading: lato?.style?.fontFamily,
+        body: lato?.style?.fontFamily,
+      },
+      zIndex: {
+        overlay: "2100",
+        modal: "2200",
+        popover: "2300",
+        skipLink: "2400",
+        toast: "2500",
+        tooltip: "2600",
       },
     },
   },

layouts/DocsPage/Scopes.module.css

@@ -5,6 +5,7 @@
   margin-left: var(--m-4);
   padding-left: 0;
   list-style: none;
+  flex-wrap: wrap;
 
   @media (--sm-scr) {
     margin-left: 0;

package.json

@@ -50,7 +50,7 @@
     "@chakra-ui/theme-tools": "^2.0.16",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@inkeep/widgets": "^0.2.186",
+    "@inkeep/widgets": "^0.2.220",
     "@mermaid-js/mermaid-cli": "^10.2.4",
     "@next/font": "13.3.0",
     "@reach/listbox": "^0.17.0",
@@ -156,6 +156,8 @@
     "webpack": "^5.88.1"
   },
   "resolutions": {
-    "semver": "^7.5.2"
+    "semver": "^7.5.2",
+    "next/@swc/helpers": "0.4.36",
+    "@zag-js/store": "0.19.0"
   }
 }

pages/_app.tsx

@@ -15,7 +15,7 @@ const ubuntu = localUbuntu({
   variable: "--font-ubunt",
   display: "swap",
 });
-const lato = localLato({
+export const lato = localLato({
   src: [
     {
       path: "../styles/assets/lato-400.woff2",