Updated zudoku to latest (#454)

* Updated zudoku to latest, use cdn chat widget

* updated zudoku

* updated zudoku

.tool-versions

@@ -0,0 +1 @@
+nodejs 22.12.0

.vercelignore

@@ -9,3 +9,5 @@ checkly.config.ts
 CONTRIBUTING.md
 prettier.config.js
 __checks__
+
+dist/docs/server/*

package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "version": "0.0.0",
   "engines": {
-    "node": ">=20"
+    "node": "22.x"
   },
   "scripts": {
     "dev": "zudoku dev",
@@ -23,33 +23,32 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@inkeep/widgets": "0.2.289",
     "@sentry/react": "^8.46.0",
     "@sentry/vite-plugin": "^2.22.7",
     "@xyflow/react": "^12.3.6",
     "d3-hierarchy": "^3.1.2",
     "elkjs": "^0.9.3",
     "posthog-js": "^1.139.3",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "safe-marked": "16.0.0",
-    "typescript": "5.6.3",
-    "zudoku": "^0.22.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zudoku": "^0.23.3"
   },
   "devDependencies": {
     "@types/d3-hierarchy": "^3.1.7",
     "@types/json-schema": "7.0.15",
     "@types/node": "22.7.5",
-    "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@typescript-eslint/parser": "^6.19.0",
     "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "glob": "11.0.0",
     "gray-matter": "4.0.3",
     "prettier": "3.3.3",
+    "safe-marked": "16.0.0",
     "tsx": "4.19.1",
+    "typescript": "5.6.3",
     "unified": "^11.0.5",
     "vfile": "^6.0.3"
   }

src/EmbeddedChat.tsx

@@ -1,10 +1,8 @@
-import {
-  type InkeepAIChatSettings,
-  InkeepEmbeddedChat,
-  type InkeepWidgetBaseSettings,
-} from "@inkeep/widgets";
+import React, { useEffect, useRef } from "react";
 
-const baseSettings: InkeepWidgetBaseSettings = {
+type _react = typeof React;
+
+const baseSettings = {
   apiKey: "499c156cf7a9798343949c8bb5665ac95e48132c6d68c42e",
   integrationId: "clot3asdz0000s601nc8jwnzx",
   organizationId: "org_dDOlt2uJlMWM8oIS",
@@ -28,7 +26,7 @@ const baseSettings: InkeepWidgetBaseSettings = {
   },
 };
 
-const aiChatSettings: InkeepAIChatSettings = {
+const aiChatSettings = {
   shareChatUrlBasePath: `${process.env.NODE_ENV === "development" ? "http://localhost:9000" : "https://zuplo.com"}/docs/ask`,
   isChatSharingEnabled: true,
   quickQuestions: [
@@ -39,22 +37,38 @@ const aiChatSettings: InkeepAIChatSettings = {
   ],
 };
 
+interface InkeepWidget {
+  render: (config: any & { isOpen: boolean }) => void;
+}
+
+declare global {
+  let Inkeep: () => {
+    embed: (config: any) => InkeepWidget;
+  };
+}
+
 const EmbeddedChat = () => {
-  return (
-    <div>
-      <InkeepEmbeddedChat
-        stylesheetUrls={["/docs/styles/inkeep.css"]}
-        baseSettings={{
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    Inkeep().embed({
+      componentType: "EmbeddedChat",
+      targetElement: ref.current!,
+      properties: {
+        stylesheetUrls: ["/docs/styles/inkeep.css"],
+        baseSettings: {
           ...baseSettings,
           colorMode: {
-            ...baseSettings.colorMode,
+            // ...baseSettings.colorMode,
             forcedColorMode: "dark",
           },
-        }}
-        aiChatSettings={aiChatSettings}
-      />
-    </div>
-  );
+        },
+        aiChatSettings,
+      },
+    });
+  }, [ref]);
+
+  return <div ref={ref} />;
 };
 
 export default EmbeddedChat;

src/diagrams/CustomerIngressWithManagedDedicated.tsx

@@ -1,14 +1,14 @@
 import { Position } from "@xyflow/react";
 import React from "react";
 import Diagram, { DiagramNode, Edge } from "./common/Diagram.js";
-import { createIngressEdgressEdge } from "./edges.js";
+import { createIngressEdgressEdge } from "./helpers/edges.js";
 import {
   createBackend,
   createClient,
   createCustomNode,
   createVpcGroupNode,
   createZuploApiNode,
-} from "./nodes.js";
+} from "./helpers/nodes.js";
 
 type _react = typeof React;
 

src/diagrams/ZuploIngressWithManagedDedicated.tsx

@@ -2,13 +2,13 @@ import Diagram, { DiagramNode, Edge } from "./common/Diagram.js";
 
 import { Position } from "@xyflow/react";
 import React from "react";
-import { createIngressEdgressEdge } from "./edges.js";
+import { createIngressEdgressEdge } from "./helpers/edges.js";
 import {
   createBackend,
   createClient,
   createVpcGroupNode,
   createZuploApiNode,
-} from "./nodes.js";
+} from "./helpers/nodes.js";
 type _react = typeof React;
 
 const clientNode = createClient({ position: { x: 10, y: 90 } });

src/diagrams/common/BaseNode.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { cn } from "../../utils";
-type _react = typeof React;
 
 export const BaseNode = React.forwardRef<
   HTMLDivElement,

src/diagrams/common/CustomNode.tsx

@@ -1,11 +1,10 @@
 import { Handle, HandleProps } from "@xyflow/react";
-import React, { memo } from "react";
+import React from "react";
 import { BaseNode } from "./BaseNode";
-type _react = typeof React;
 
 export type CustomHandleProps = Pick<HandleProps, "position" | "type" | "id">;
 
-export const CustomNode = memo(
+export const CustomNode = React.memo(
   ({ data }: { data: { label: string; handles?: CustomHandleProps[] } }) => {
     return (
       <BaseNode title={data.label}>

src/diagrams/common/Diagram.tsx

@@ -52,7 +52,7 @@ const proOptions = {
   hideAttribution: true,
 };
 
-function Diagram({ className, nodes, edges }: DiagramProps) {
+export default function Diagram({ className, nodes, edges }: DiagramProps) {
   return (
     <div className={className}>
       <ReactFlow
@@ -81,5 +81,3 @@ function Diagram({ className, nodes, edges }: DiagramProps) {
     </div>
   );
 }
-
-export default Diagram;

src/diagrams/common/DiagramAuto.tsx

@@ -0,0 +1,31 @@
+import { Node, ReactFlowProvider } from "@xyflow/react";
+import React from "react";
+import { CustomHandleProps } from "./CustomNode";
+import Diagram, { DiagramProps } from "./Diagram";
+import useAutoLayout, { LayoutOptions } from "./useAutoLayout";
+export { LabeledGroupNode } from "./LabeledGroup";
+
+// import "@xyflow/react/dist/style.css";
+
+export type DiagramNode = Node & {
+  data: {
+    label: string;
+    handles?: CustomHandleProps[];
+  };
+};
+
+export type DiagramAutoProps = DiagramProps & Partial<LayoutOptions>;
+
+export default function DiagramAuto({
+  direction = "BT",
+  spacing = [50, 50],
+  algorithm = "dagre",
+  ...props
+}: DiagramAutoProps) {
+  useAutoLayout({ direction, spacing, algorithm });
+  return (
+    <ReactFlowProvider>
+      <Diagram {...props} />
+    </ReactFlowProvider>
+  );
+}

src/diagrams/common/ZuploApiNode.tsx

@@ -1,10 +1,8 @@
 import { Handle, HandleProps } from "@xyflow/react";
-import React, { memo } from "react";
+import React from "react";
 import { BaseNode } from "./BaseNode";
 
-type _react = typeof React;
-
-export const ZuploApiNode = memo(
+export const ZuploApiNode = React.memo(
   ({ data }: { data: { handles?: Pick<HandleProps, "position">[] } }) => {
     return (
       <BaseNode title="Zuplo API Gateway" className="bg-[#ff00bd]">

src/diagrams/edges.ts → src/diagrams/helpers/edges.ts

@@ -1,4 +1,4 @@
-import { DiagramNode, Edge } from "./common/Diagram.js";
+import { DiagramNode, Edge } from "../common/Diagram.js";
 
 export const createIngressEdgressEdge = ({
   egress,

src/diagrams/nodes.ts → src/diagrams/helpers/nodes.ts

@@ -1,6 +1,6 @@
 import { Position, XYPosition } from "@xyflow/react";
-import { CustomHandleProps } from "./common/CustomNode.js";
-import { DiagramNode } from "./common/Diagram.js";
+import { CustomHandleProps } from "../common/CustomNode.js";
+import { DiagramNode } from "../common/Diagram.js";
 
 export const createClient = ({
   position,

src/mdx.tsx

@@ -1,4 +1,4 @@
-import { lazy, Suspense } from "react";
+import React, { lazy, Suspense } from "react";
 import { CogIcon, CopyIcon, FileTextIcon, ListEndIcon } from "zudoku/icons";
 import { BundlesTable } from "./BundlesTable";
 import { DocusaurusDocsLicense } from "./DocusaurusDocsLicense";
@@ -7,6 +7,8 @@ import { GithubButton } from "./GithubButton";
 import { PolicyOverview } from "./PolicyOverview";
 import ZupIt from "./ZupIt.js";
 
+type _react = typeof React;
+
 const iconStyle = { display: "inline", verticalAlign: "-0.125em" };
 
 const EmbeddedChat = lazy(() => import("./EmbeddedChat"));
@@ -28,8 +30,6 @@ export const mdxComponents = {
   PolicyOverview,
   EnterpriseFeature,
   EmbeddedChat: () => {
-    if (typeof window === "undefined") return null;
-
     return (
       <Suspense fallback={<div>Loading…</div>}>
         <EmbeddedChat />

zudoku.config.tsx

@@ -4,6 +4,7 @@ import { diagramPlugin } from "./src/diagrams/common/plugin.js";
 import { HeadNavigation } from "./src/HeadNavigation";
 import { mdxComponents } from "./src/mdx.js";
 import rehypeStaticImages from "./src/mdx/static-images.js";
+
 const config: ZudokuConfig = {
   basePath: "/docs",
   page: {