feat: add inkeep (for hume) (#1082)

packages/commons/search-utils/.depcheckrc.json

@@ -0,0 +1 @@
+{ "ignores": ["@fern-platform/configs", "@types/node", "vite", "@types/react"], "ignore-patterns": ["dist"] }

packages/commons/search-utils/.mrlint.json

@@ -0,0 +1,4 @@
+{
+  "type": "react-library",
+  "private": true
+}

packages/commons/search-utils/.prettierrc.cjs

@@ -0,0 +1 @@
+module.exports = require("../../../.prettierrc.json");

packages/commons/search-utils/.stylelintrc.json

@@ -0,0 +1 @@
+{ "extends": ["../../../shared/stylelintrc.shared.json"] }

packages/commons/search-utils/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@fern-ui/search-utils",
+  "version": "0.0.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fern-api/fern-platform.git",
+    "directory": "packages/commons/search-utils"
+  },
+  "private": true,
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "source": "src/index.ts",
+  "module": "src/index.ts",
+  "main": "src/index.ts",
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rm -rf ./lib && tsc --build --clean",
+    "compile": "tsc --build",
+    "test": "vitest --run --passWithNoTests --globals",
+    "lint:eslint": "eslint --max-warnings 0 . --ignore-path=../../../.eslintignore",
+    "lint:eslint:fix": "pnpm lint:eslint --fix",
+    "lint:style": "stylelint 'src/**/*.scss' --allow-empty-input --max-warnings 0",
+    "lint:style:fix": "pnpm lint:style --fix",
+    "format": "prettier --write --ignore-unknown --ignore-path ../../../shared/.prettierignore \"**\"",
+    "format:check": "prettier --check --ignore-unknown --ignore-path ../../../shared/.prettierignore \"**\"",
+    "organize-imports": "organize-imports-cli tsconfig.json",
+    "depcheck": "depcheck"
+  },
+  "dependencies": {
+    "@fern-api/fdr-sdk": "0.98.6-a0f252ba1",
+    "@fern-ui/core-utils": "workspace:*",
+    "@vercel/edge-config": "^1.1.0"
+  },
+  "devDependencies": {
+    "@fern-platform/configs": "workspace:*",
+    "@inkeep/widgets": "^0.2.288",
+    "@types/node": "^18.7.18",
+    "depcheck": "^1.4.3",
+    "eslint": "^8.56.0",
+    "organize-imports-cli": "^0.10.0",
+    "prettier": "^3.3.2",
+    "stylelint": "^16.1.0",
+    "ts-essentials": "^10.0.1",
+    "typescript": "5.4.3",
+    "vitest": "^1.5.0"
+  }
+}

packages/commons/search-utils/src/SearchConfig.ts

@@ -0,0 +1,143 @@
+import { Algolia, FdrClient } from "@fern-api/fdr-sdk";
+import { assertNonNullish } from "@fern-ui/core-utils";
+import type {
+    InkeepAIChatSettings,
+    InkeepModalSettings,
+    InkeepSearchSettings,
+    InkeepWidgetBaseSettings,
+} from "@inkeep/widgets";
+import { getAll } from "@vercel/edge-config";
+import type { DeepReadonly } from "ts-essentials";
+
+export const REGISTRY_SERVICE = new FdrClient({
+    environment: process.env.NEXT_PUBLIC_FDR_ORIGIN ?? "https://registry.buildwithfern.com",
+});
+
+const FEATURE_FLAGS = ["inkeep-enabled" as const];
+
+export type InkeepSharedSettings = DeepReadonly<{
+    baseSettings: InkeepWidgetBaseSettings;
+    aiChatSettings?: Partial<InkeepAIChatSettings>;
+    searchSettings?: Partial<InkeepSearchSettings>;
+    modalSettings?: Partial<InkeepModalSettings>;
+}>;
+
+interface EdgeConfigResponse {
+    "inkeep-enabled"?: Record<string, InkeepSharedSettings>;
+}
+
+export declare namespace SearchConfig {
+    interface Unversioned {
+        type: "unversioned";
+        value: string;
+    }
+
+    interface Versioned {
+        type: "versioned";
+        // keyed by version id
+        values: Record<string, string>;
+    }
+
+    interface Inkeep extends InkeepSharedSettings {
+        isAvailable: true;
+        type: "inkeep";
+    }
+
+    interface Algolia {
+        isAvailable: true;
+        type: "algolia";
+        appId: string;
+        searchApiKey: Unversioned | Versioned;
+        index: string;
+    }
+
+    interface Unavailable {
+        isAvailable: false;
+    }
+}
+
+export type SearchConfig = SearchConfig.Inkeep | SearchConfig.Algolia | SearchConfig.Unavailable;
+
+export interface SearchRequest {
+    searchInfo: Algolia.SearchInfo | undefined;
+}
+
+export async function getSearchConfig(domain: string, { searchInfo }: SearchRequest): Promise<SearchConfig> {
+    try {
+        const config = await getAll<EdgeConfigResponse>(FEATURE_FLAGS);
+        const maybeInkeep = config["inkeep-enabled"]?.[domain];
+
+        if (maybeInkeep?.baseSettings.integrationId != null) {
+            return {
+                isAvailable: true,
+                type: "inkeep",
+                ...maybeInkeep,
+            };
+        }
+    } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error("Error fetching edge config", e);
+    }
+
+    if (typeof searchInfo !== "object" || searchInfo.type === "legacyMultiAlgoliaIndex") {
+        return { isAvailable: false };
+    }
+
+    const algoliaAppId = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID;
+    const algoliaSearchIndex = process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_INDEX;
+
+    assertNonNullish(algoliaAppId, "Missing environment variable: NEXT_PUBLIC_ALGOLIA_APP_ID");
+    assertNonNullish(algoliaSearchIndex, "Missing environment variable: NEXT_PUBLIC_ALGOLIA_SEARCH_INDEX");
+
+    if (searchInfo.value.type === "unversioned") {
+        const resp = await REGISTRY_SERVICE.docs.v2.read.getSearchApiKeyForIndexSegment({
+            indexSegmentId: searchInfo.value.indexSegment.id,
+        });
+
+        if (!resp.ok) {
+            return { isAvailable: false };
+        }
+
+        return {
+            isAvailable: true,
+            type: "algolia",
+            appId: algoliaAppId,
+            searchApiKey: {
+                type: "unversioned",
+                value: resp.body.searchApiKey,
+            },
+            index: algoliaSearchIndex,
+        };
+    } else if (searchInfo.value.type === "versioned") {
+        const values: Record<string, string> = {};
+
+        for (const [versionId, indexSegment] of Object.entries(searchInfo.value.indexSegmentsByVersionId)) {
+            const resp = await REGISTRY_SERVICE.docs.v2.read.getSearchApiKeyForIndexSegment({
+                indexSegmentId: indexSegment.id,
+            });
+
+            if (!resp.ok) {
+                return { isAvailable: false };
+            }
+
+            values[versionId] = resp.body.searchApiKey;
+        }
+
+        if (Object.keys(values).length === 0) {
+            return { isAvailable: false };
+        }
+
+        return {
+            isAvailable: true,
+            type: "algolia",
+            appId: algoliaAppId,
+            searchApiKey: {
+                type: "versioned",
+                values,
+            },
+            index: algoliaSearchIndex,
+        };
+    }
+
+    return { isAvailable: false };
+}

packages/commons/search-utils/src/index.ts

@@ -0,0 +1 @@
+export * from "./SearchConfig";

packages/commons/search-utils/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@fern-platform/configs/tsconfig/react-library.json",
+  "compilerOptions": { "outDir": "./dist", "rootDir": "./src" },
+  "include": ["./src/**/*"],
+  "references": [{ "path": "../core-utils" }, { "path": "../fdr-utils" }, { "path": "../../fdr-sdk" }]
+}

packages/ui/app/package.json

@@ -45,7 +45,9 @@
     "@fern-ui/loadable": "workspace:*",
     "@fern-ui/next-seo": "workspace:*",
     "@fern-ui/react-commons": "workspace:*",
+    "@fern-ui/search-utils": "workspace:^",
     "@headlessui/react": "^1.7.18",
+    "@inkeep/widgets": "^0.2.288",
     "@next/third-parties": "^14.2.3",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-accordion": "^1.1.2",
@@ -59,6 +61,7 @@
     "@sentry/nextjs": "^7.105.0",
     "@shikijs/transformers": "^1.2.2",
     "@types/nprogress": "^0.2.3",
+    "@vercel/edge-config": "^1.1.0",
     "algoliasearch": "^4.22.1",
     "bezier-easing": "^2.1.0",
     "clsx": "^2.1.0",
@@ -158,6 +161,7 @@
     "storybook": "8.1.0-alpha.6",
     "stylelint": "^16.1.0",
     "tailwindcss": "^3.4.3",
+    "ts-essentials": "^10.0.1",
     "typescript": "5.4.3",
     "vite": "^5.2.6",
     "vitest": "^1.5.0"

packages/ui/app/src/css/components.scss

@@ -9,6 +9,7 @@
         @apply bg-tag-default;
         @apply hover:bg-tag-default-hover transition-[background,shadow];
         @apply ring-inset ring-default hover:ring-default ring-1;
+        @apply max-sm:h-10 max-sm:text-base;
 
         .search-placeholder {
             @apply inline-flex flex-1 items-center space-x-2.5;

packages/ui/app/src/docs/Docs.tsx

@@ -1,6 +1,4 @@
 import { DocsV1Read } from "@fern-api/fdr-sdk";
-import { PLATFORM } from "@fern-ui/core-utils";
-import { useKeyboardCommand, useKeyboardPress } from "@fern-ui/react-commons";
 import clsx from "clsx";
 import dynamic from "next/dynamic";
 import { memo } from "react";
@@ -10,9 +8,8 @@ import { useDocsContext } from "../contexts/docs-context/useDocsContext";
 import { useLayoutBreakpointValue } from "../contexts/layout-breakpoint/useLayoutBreakpoint";
 import { useNavigationContext } from "../contexts/navigation-context";
 import { FeedbackPopover } from "../custom-docs-page/FeedbackPopover";
-import { useCreateSearchService } from "../services/useSearchService";
 import { BuiltWithFern } from "../sidebar/BuiltWithFern";
-import { useIsMobileSidebarOpen, useMessageHandler, useOpenSearchDialog } from "../sidebar/atom";
+import { useIsMobileSidebarOpen, useMessageHandler } from "../sidebar/atom";
 import { DocsMainContent } from "./DocsMainContent";
 import { HeaderContainer } from "./HeaderContainer";
 
@@ -28,28 +25,13 @@ export const SearchDialog = dynamic(() => import("../search/SearchDialog").then(
 });
 
 export const Docs: React.FC<DocsProps> = memo<DocsProps>(function UnmemoizedDocs({ logoHeight, logoHref }) {
-    const { layout, colors, currentVersionId, sidebar } = useDocsContext();
-    const openSearchDialog = useOpenSearchDialog();
+    const { layout, colors, sidebar } = useDocsContext();
     const { isInlineFeedbackEnabled } = useFeatureFlags();
     const { resolvedPath } = useNavigationContext();
 
     // set up message handler to listen for messages from custom scripts
     useMessageHandler();
 
-    // set up search service
-    useCreateSearchService(currentVersionId);
-
-    useKeyboardCommand({ key: "K", platform: PLATFORM, onCommand: openSearchDialog });
-    useKeyboardPress({
-        key: "Slash",
-        onPress: () => {
-            const activeElementTag = document.activeElement?.tagName.toLowerCase();
-            if (activeElementTag !== "input" && activeElementTag !== "textarea" && activeElementTag !== "select") {
-                openSearchDialog();
-            }
-        },
-    });
-
     const isMobileSidebarOpen = useIsMobileSidebarOpen();
     const layoutBreakpoint = useLayoutBreakpointValue();
 

packages/ui/app/src/docs/Header.tsx

@@ -6,8 +6,8 @@ import { useAtomValue } from "jotai";
 import { CSSProperties, PropsWithChildren, forwardRef, memo } from "react";
 import { FernLinkButton } from "../components/FernLinkButton";
 import { useDocsContext } from "../contexts/docs-context/useDocsContext";
-import { SEARCH_BOX_MOUNTED } from "../search/SearchBox";
-import { useSearchService } from "../services/useSearchService";
+import { SEARCH_BOX_MOUNTED } from "../search/algolia/SearchBox";
+import { useSearchConfig } from "../services/useSearchService";
 import { SidebarSearchBar } from "../sidebar/SidebarSearchBar";
 import { useOpenSearchDialog } from "../sidebar/atom";
 import { HeaderLogoSection } from "./HeaderLogoSection";
@@ -44,7 +44,7 @@ const UnmemoizedHeader = forwardRef<HTMLDivElement, PropsWithChildren<Header.Pro
     const { colors } = useDocsContext();
     const openSearchDialog = useOpenSearchDialog();
     const isSearchBoxMounted = useAtomValue(SEARCH_BOX_MOUNTED);
-    const searchService = useSearchService();
+    const [searchService] = useSearchConfig();
 
     const navbarLinksSection = (
         <div className="hidden lg:block">
@@ -98,7 +98,7 @@ const UnmemoizedHeader = forwardRef<HTMLDivElement, PropsWithChildren<Header.Pro
                         invisible: isSearchBoxMounted,
                     })}
                 >
-                    <SidebarSearchBar onClick={openSearchDialog} className="w-full" />
+                    <SidebarSearchBar className="w-full" />
                 </div>
             )}
 

packages/ui/app/src/next-app/utils/getColorVariables.ts

@@ -13,7 +13,7 @@ interface ColorConfig {
     light: DocsV1Read.RgbaColor;
 }
 
-const DEFAULT_COLORS: {
+export const DEFAULT_COLORS: {
     accentPrimary: ColorConfig;
     background: ColorConfig;
 } = {