zudoku 0.3.0-dev.96 → 0.3.0-dev.98

package/lib/zudoku.plugin-search-inkeep.js

@@ -0,0 +1,56 @@
+import { j as n } from "./jsx-runtime-B6kdoens.js";
+import { lazy as a } from "react";
+const r = {
+  apiKey: "499c156cf7a9798343949c8bb5665ac95e48132c6d68c42e",
+  integrationId: "clot3asdz0000s601nc8jwnzx",
+  organizationId: "org_dDOlt2uJlMWM8oIS",
+  primaryBrandColor: "#ff00bd",
+  organizationDisplayName: "Zuplo",
+  theme: {
+    components: {
+      AIChatPageWrapper: {
+        defaultProps: {
+          size: "shrink-vertically",
+          variant: "no-shadow"
+        }
+      },
+      SearchBarTrigger: {
+        defaultProps: {
+          size: "expand",
+          variant: "subtle"
+          // Choose from 'emphasized' or 'subtle'
+        }
+      }
+    }
+  }
+}, s = {
+  shareChatUrlBasePath: `${process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://zuplo.com"}/docs/ask`,
+  isChatSharingEnabled: !0,
+  quickQuestions: [
+    "How do I create a custom policy?",
+    "What is the difference between production and preview environments?",
+    "How do I set a custom domain?",
+    "How do I use environment variables?"
+  ]
+}, i = a(() => import("./InkeepCustomTrigger-CE5-K5ex.js")), c = ({
+  prefilledQuery: t,
+  isOpen: e,
+  onClose: o
+}) => /* @__PURE__ */ n.jsx(
+  i,
+  {
+    isOpen: e,
+    onClose: o,
+    baseSettings: r,
+    aiChatSettings: s,
+    searchSettings: {
+      prefilledQuery: t || void 0
+    }
+  }
+), d = (t) => ({
+  onRequestSearch: (e) => typeof window > "u" ? null : /* @__PURE__ */ n.jsx(c, { isOpen: e.isOpen, onClose: e.onClose, ...t })
+});
+export {
+  d as inkeepSearchPlugin
+};
+//# sourceMappingURL=zudoku.plugin-search-inkeep.js.map

package/lib/zudoku.plugin-search-inkeep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zudoku.plugin-search-inkeep.js","sources":["../src/lib/plugins/search-inkeep/inkeep.ts","../src/lib/plugins/search-inkeep/index.tsx"],"sourcesContent":["import {\n  InkeepAIChatSettings,\n  InkeepModalSettings,\n  InkeepSearchSettings,\n  InkeepWidgetBaseSettings,\n} from \"@inkeep/widgets\";\n\nconst baseSettings: InkeepWidgetBaseSettings = {\n  apiKey: \"499c156cf7a9798343949c8bb5665ac95e48132c6d68c42e\",\n  integrationId: \"clot3asdz0000s601nc8jwnzx\",\n  organizationId: \"org_dDOlt2uJlMWM8oIS\",\n  primaryBrandColor: \"#ff00bd\",\n  organizationDisplayName: \"Zuplo\",\n  theme: {\n    components: {\n      AIChatPageWrapper: {\n        defaultProps: {\n          size: \"shrink-vertically\",\n          variant: \"no-shadow\",\n        },\n      },\n      SearchBarTrigger: {\n        defaultProps: {\n          size: \"expand\",\n          variant: \"subtle\", // Choose from 'emphasized' or 'subtle'\n        },\n      },\n    },\n  },\n};\n\nconst modalSettings: InkeepModalSettings = {};\n\nconst searchSettings: InkeepSearchSettings = {};\n\nconst aiChatSettings: InkeepAIChatSettings = {\n  shareChatUrlBasePath: `${process.env.NODE_ENV === \"development\" ? \"http://localhost:3000\" : \"https://zuplo.com\"}/docs/ask`,\n  isChatSharingEnabled: true,\n  quickQuestions: [\n    \"How do I create a custom policy?\",\n    \"What is the difference between production and preview environments?\",\n    \"How do I set a custom domain?\",\n    \"How do I use environment variables?\",\n  ],\n};\n\nexport { aiChatSettings, baseSettings, modalSettings, searchSettings };\n","import type { InkeepWidgetBaseSettings } from \"@inkeep/widgets\";\nimport { lazy } from \"react\";\nimport type { DevPortalPlugin } from \"../../core/plugins.js\";\nimport { aiChatSettings, baseSettings } from \"./inkeep.js\";\n\ntype PickedPluginInkeepBaseSettings =\n  | \"apiKey\"\n  | \"integrationId\"\n  | \"organizationId\"\n  | \"primaryBrandColor\"\n  | \"organizationDisplayName\";\n\ntype PluginInkeepBaseSettings = Pick<\n  InkeepWidgetBaseSettings,\n  PickedPluginInkeepBaseSettings\n>;\n\nconst Inkeep = lazy(() => import(\"./InkeepCustomTrigger.js\"));\n//.then((module) => module.InkeepCustomTrigger)\nconst InkeepSearch = ({\n  prefilledQuery,\n  isOpen,\n  onClose,\n}: {\n  isOpen: boolean;\n  onClose: () => void;\n  prefilledQuery?: string | null;\n} & PluginInkeepBaseSettings) => {\n  return (\n    <Inkeep\n      isOpen={isOpen}\n      onClose={onClose}\n      baseSettings={baseSettings}\n      aiChatSettings={aiChatSettings}\n      searchSettings={{\n        prefilledQuery: prefilledQuery || undefined,\n      }}\n    />\n  );\n};\n\nexport const inkeepSearchPlugin = (\n  settings: PluginInkeepBaseSettings,\n): DevPortalPlugin => {\n  return {\n    onRequestSearch: (o: { isOpen: boolean; onClose: () => void }) => {\n      if (typeof window === \"undefined\") {\n        return null;\n      }\n      return (\n        <InkeepSearch isOpen={o.isOpen} onClose={o.onClose} {...settings} />\n      );\n    },\n  };\n};\n"],"names":["baseSettings","aiChatSettings","Inkeep","lazy","InkeepSearch","prefilledQuery","isOpen","onClose","jsx","inkeepSearchPlugin","settings","o"],"mappings":";;AAOA,MAAMA,IAAyC;AAAA,EAC7C,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,yBAAyB;AAAA,EACzB,OAAO;AAAA,IACL,YAAY;AAAA,MACV,mBAAmB;AAAA,QACjB,cAAc;AAAA,UACZ,MAAM;AAAA,UACN,SAAS;AAAA,QACX;AAAA,MACF;AAAA,MACA,kBAAkB;AAAA,QAChB,cAAc;AAAA,UACZ,MAAM;AAAA,UACN,SAAS;AAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,GAMMC,IAAuC;AAAA,EAC3C,sBAAsB,GAAG,QAAQ,IAAI,aAAa,gBAAgB,0BAA0B,mBAAmB;AAAA,EAC/G,sBAAsB;AAAA,EACtB,gBAAgB;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF,GC3BMC,IAASC,EAAK,MAAM,OAAO,mCAA0B,CAAC,GAEtDC,IAAe,CAAC;AAAA,EACpB,gBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AACF,MAMIC,gBAAAA,EAAA;AAAA,EAACN;AAAA,EAAA;AAAA,IACC,QAAAI;AAAA,IACA,SAAAC;AAAA,IACA,cAAAP;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAgB;AAAA,MACd,gBAAgBI,KAAkB;AAAA,IACpC;AAAA,EAAA;AAAA,GAKOI,IAAqB,CAChCC,OAEO;AAAA,EACL,iBAAiB,CAACC,MACZ,OAAO,SAAW,MACb,OAGPH,gBAAAA,MAACJ,KAAa,QAAQO,EAAE,QAAQ,SAASA,EAAE,SAAU,GAAGD,EAAU,CAAA;AAEtE;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.3.0-dev.96",
+  "version": "0.3.0-dev.98",
   "type": "module",
   "files": [
     "dist",
@@ -54,6 +54,10 @@
       "import": "./lib/zudoku.plugin-custom-page.js",
       "types": "./dist/lib/plugins/custom-page/index.d.ts"
     },
+    "./plugins/search-inkeep": {
+      "import": "./lib/zudoku.plugin-search-inkeep.js",
+      "types": "./dist/lib/plugins/search-inkeep/index.d.ts"
+    },
     "./openapi-worker": {
       "import": "./lib/zudoku.openapi-worker.js",
       "types": "./dist/lib/plugins/openapi-worker.d.ts"
@@ -180,7 +184,8 @@
     "react-dom": ">18.0.0"
   },
   "optionalDependencies": {
-    "@clerk/clerk-js": "5.11.0"
+    "@clerk/clerk-js": "5.11.0",
+    "@inkeep/widgets": "^0.2.289"
   },
   "scripts": {
     "build": "tsc --project tsconfig.json",

package/src/app/main.tsx

@@ -11,6 +11,7 @@ import { isNavigationPlugin } from "zudoku/internal";
 import { customPagePlugin } from "zudoku/plugins/custom-page";
 import type { ZudokuConfig } from "../config/config.js";
 import type { ZudokuContextOptions } from "../lib/core/DevPortalContext.js";
+import { inkeepSearchPlugin } from "../lib/plugins/search-inkeep/index.js";
 
 export const convertZudokuConfigToOptions = (
   config: ZudokuConfig,
@@ -41,6 +42,9 @@ export const convertZudokuConfigToOptions = (
     mdx: config.mdx,
     authentication: configuredAuthProvider,
     plugins: [
+      ...(config.search?.type === "inkeep"
+        ? [inkeepSearchPlugin(config.search)]
+        : []),
       ...configuredDocsPlugins,
       ...configuredApiPlugins,
       ...(configuredRedirectPlugin ? [configuredRedirectPlugin] : []),

package/src/lib/components/Header.tsx

@@ -18,9 +18,10 @@ import {
   DropdownMenuTrigger,
 } from "../ui/DropdownMenu.js";
 import { cn } from "../util/cn.js";
-import { TopNavigation } from "./TopNavigation.js";
 import { useTheme } from "./context/ThemeContext.js";
 import { useZudoku } from "./context/ZudokuContext.js";
+import { Search } from "./Search.js";
+import { TopNavigation } from "./TopNavigation.js";
 
 const RecursiveMenu = ({ item }: { item: ProfileNavigationItem }) => {
   return item.children ? (
@@ -89,15 +90,7 @@ export const Header = memo(function HeaderInner() {
           </div>
           <div className="grid grid-cols-[--sidecar-grid-cols] items-center gap-8">
             <div className="w-full max-w-prose">
-              {/*<button className="flex items-center border border-input hover:bg-accent hover:text-accent-foreground p-4 relative h-8 justify-start rounded-lg bg-background text-sm text-muted-foreground shadow-none w-40 sm:w-72">
-                <div className="flex items-center gap-2 flex-grow">
-                  <SearchIcon size={14} />
-                  Search
-                </div>
-                <kbd className="absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[11px] font-medium opacity-100 sm:flex">
-                  ⌘K
-                </kbd>
-              </button>*/}
+              <Search />
             </div>
 
             <div className="items-center justify-self-end text-sm hidden lg:flex gap-2">

package/src/lib/components/Search.tsx

@@ -0,0 +1,60 @@
+import { SearchIcon } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { isSearchPlugin } from "../core/plugins.js";
+import { useZudoku } from "./context/ZudokuContext.js";
+
+export const Search = () => {
+  const ctx = useZudoku();
+  const [isOpen, setIsOpen] = useState(true);
+
+  const onClose = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      return;
+    }
+
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        setIsOpen(true);
+      }
+    }
+
+    window.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [isOpen, setIsOpen]);
+
+  const searchPlugin = ctx.plugins.find(isSearchPlugin);
+
+  if (!searchPlugin) {
+    return null;
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        className="flex items-center border border-input hover:bg-accent hover:text-accent-foreground p-4 relative h-8 justify-start rounded-lg bg-background text-sm text-muted-foreground shadow-none w-40 sm:w-72"
+      >
+        <div className="flex items-center gap-2 flex-grow">
+          <SearchIcon size={14} />
+          Search
+        </div>
+        <kbd className="absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[11px] font-medium opacity-100 sm:flex">
+          ⌘K
+        </kbd>
+      </button>
+      {isOpen &&
+        searchPlugin.onRequestSearch({
+          isOpen,
+          onClose,
+        })}
+    </>
+  );
+};

package/src/lib/core/plugins.ts

@@ -8,7 +8,8 @@ export type DevPortalPlugin =
   | CommonPlugin
   | ProfileMenuPlugin
   | NavigationPlugin
-  | ApiIdentityPlugin;
+  | ApiIdentityPlugin
+  | SearchProviderPlugin;
 
 export interface NavigationPlugin {
   getRoutes: () => RouteObject[];
@@ -19,6 +20,13 @@ export interface ApiIdentityPlugin {
   getIdentities: (context: DevPortalContext) => Promise<ApiIdentity[]>;
 }
 
+export interface SearchProviderPlugin {
+  onRequestSearch: (o: {
+    isOpen: boolean;
+    onClose: () => void;
+  }) => React.JSX.Element | null;
+}
+
 export interface ProfileMenuPlugin {
   getProfileMenuItems: (context: DevPortalContext) => ProfileNavigationItem[];
 }
@@ -48,6 +56,11 @@ export const isNavigationPlugin = (
 ): obj is NavigationPlugin =>
   "getRoutes" in obj && typeof obj.getRoutes === "function";
 
+export const isSearchPlugin = (
+  obj: DevPortalPlugin,
+): obj is SearchProviderPlugin =>
+  "onRequestSearch" in obj && typeof obj.onRequestSearch === "function";
+
 export const needsInitialization = (
   obj: DevPortalPlugin,
 ): obj is CommonPlugin =>

package/src/lib/plugins/search-inkeep/InkeepCustomTrigger.tsx

@@ -0,0 +1,3 @@
+import { InkeepCustomTrigger } from "@inkeep/widgets";
+
+export default InkeepCustomTrigger;

package/src/lib/plugins/search-inkeep/index.tsx

@@ -0,0 +1,55 @@
+import type { InkeepWidgetBaseSettings } from "@inkeep/widgets";
+import { lazy } from "react";
+import type { DevPortalPlugin } from "../../core/plugins.js";
+import { aiChatSettings, baseSettings } from "./inkeep.js";
+
+type PickedPluginInkeepBaseSettings =
+  | "apiKey"
+  | "integrationId"
+  | "organizationId"
+  | "primaryBrandColor"
+  | "organizationDisplayName";
+
+type PluginInkeepBaseSettings = Pick<
+  InkeepWidgetBaseSettings,
+  PickedPluginInkeepBaseSettings
+>;
+
+const Inkeep = lazy(() => import("./InkeepCustomTrigger.js"));
+//.then((module) => module.InkeepCustomTrigger)
+const InkeepSearch = ({
+  prefilledQuery,
+  isOpen,
+  onClose,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  prefilledQuery?: string | null;
+} & PluginInkeepBaseSettings) => {
+  return (
+    <Inkeep
+      isOpen={isOpen}
+      onClose={onClose}
+      baseSettings={baseSettings}
+      aiChatSettings={aiChatSettings}
+      searchSettings={{
+        prefilledQuery: prefilledQuery || undefined,
+      }}
+    />
+  );
+};
+
+export const inkeepSearchPlugin = (
+  settings: PluginInkeepBaseSettings,
+): DevPortalPlugin => {
+  return {
+    onRequestSearch: (o: { isOpen: boolean; onClose: () => void }) => {
+      if (typeof window === "undefined") {
+        return null;
+      }
+      return (
+        <InkeepSearch isOpen={o.isOpen} onClose={o.onClose} {...settings} />
+      );
+    },
+  };
+};

package/src/lib/plugins/search-inkeep/inkeep.ts

@@ -0,0 +1,47 @@
+import {
+  InkeepAIChatSettings,
+  InkeepModalSettings,
+  InkeepSearchSettings,
+  InkeepWidgetBaseSettings,
+} from "@inkeep/widgets";
+
+const baseSettings: InkeepWidgetBaseSettings = {
+  apiKey: "499c156cf7a9798343949c8bb5665ac95e48132c6d68c42e",
+  integrationId: "clot3asdz0000s601nc8jwnzx",
+  organizationId: "org_dDOlt2uJlMWM8oIS",
+  primaryBrandColor: "#ff00bd",
+  organizationDisplayName: "Zuplo",
+  theme: {
+    components: {
+      AIChatPageWrapper: {
+        defaultProps: {
+          size: "shrink-vertically",
+          variant: "no-shadow",
+        },
+      },
+      SearchBarTrigger: {
+        defaultProps: {
+          size: "expand",
+          variant: "subtle", // Choose from 'emphasized' or 'subtle'
+        },
+      },
+    },
+  },
+};
+
+const modalSettings: InkeepModalSettings = {};
+
+const searchSettings: InkeepSearchSettings = {};
+
+const aiChatSettings: InkeepAIChatSettings = {
+  shareChatUrlBasePath: `${process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://zuplo.com"}/docs/ask`,
+  isChatSharingEnabled: true,
+  quickQuestions: [
+    "How do I create a custom policy?",
+    "What is the difference between production and preview environments?",
+    "How do I set a custom domain?",
+    "How do I use environment variables?",
+  ],
+};
+
+export { aiChatSettings, baseSettings, modalSettings, searchSettings };