Updated zudoku to latest (#454)

* Updated zudoku to latest, use cdn chat widget

* updated zudoku

* updated zudoku

Author: ntotten

.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-lock.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"
   }

package.json

@@ -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/EmbeddedChat.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/CustomerIngressWithManagedDedicated.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/ZuploIngressWithManagedDedicated.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/BaseNode.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/CustomNode.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;