feat: add WebSocket welcome message and enhance message handling

Author: PriyanshuPz

apps/platform/src/components/map/mark.tsx

@@ -14,6 +14,7 @@ import React from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import Link from "next/link";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 
 interface MarkdownTextProps {
   content: string;
@@ -22,19 +23,53 @@ interface MarkdownTextProps {
   maxLength?: number;
 }
 // Custom NodeLink component
-interface NodeLinkProps {
-  id: string;
-}
 
-const NodeLink: React.FC<NodeLinkProps> = ({ id }) => {
-  return (
-    <span className="text-blue-600 underline cursor-pointer">Node: {id}</span>
-  );
+const config = {
+  node: {
+    prefix: ["nodes", "appdb_ds.nodes"],
+    url: "/nodes/",
+    text: "[🧩]", // Puzzle piece: represents a connected unit
+  },
+  map: {
+    prefix: ["maps", "appdb_ds.maps"],
+    url: "/maps/",
+    text: "[🗺️]", // Map emoji: represents navigation or overview
+  },
+  rel: {
+    prefix: ["node_relationships", "appdb_ds.node_relationships"],
+    url: "/relationships/",
+    text: "[🔗]", // Link emoji: represents connection
+  },
+  step: {
+    prefix: ["navigation_steps", "appdb_ds.navigation_steps"],
+    url: "/steps/",
+    text: "[🚶]", // Walking emoji: represents a step or progress
+  },
 };
+
+function extractItem(content: string) {
+  const match = Object.entries(config).find(([_, value]) =>
+    value.prefix.some((prefix) => content.startsWith(prefix))
+  );
+
+  if (match) {
+    const [_, itemConfig] = match;
+    return `${itemConfig.text}(${itemConfig.url}${content.split(":")[1]})`;
+  }
+
+  return content;
+}
+
+function processText(text: string) {
+  return text.replace(/<([^>]+)>/g, (_, innerContent) => {
+    return extractItem(innerContent);
+  });
+}
+
 export function MarkdownText({ content, className }: MarkdownTextProps) {
   return (
     <ReactMarkdown components={defaultComponents} remarkPlugins={[remarkGfm]}>
-      {content}
+      {processText(content)}
     </ReactMarkdown>
   );
 }
@@ -182,30 +217,21 @@ const defaultComponents = memoizeMarkdownComponents({
   },
 
   a: ({ className, ...props }) => {
-    const node = props.children?.toString() || "";
-    const isNode = node.startsWith("nodes");
-    if (isNode) {
-      const nodeId = node.substring(6); // Extract node ID from the URL
-      return (
-        <Link
-          className="text-primary font-medium underline underline-offset-4"
-          href={`/nodes/${nodeId}`}
-        >
-          [Node]
-        </Link>
-      );
-    }
-
     return (
-      <a
-        className={cn(
-          "text-primary font-medium underline underline-offset-4",
-          className
-        )}
-        {...props}
-      >
-        {props.children}
-      </a>
+      <Tooltip>
+        <TooltipTrigger>
+          <a
+            className={cn(
+              "text-primary font-medium underline underline-offset-4",
+              className
+            )}
+            {...props}
+          >
+            {props.children}
+          </a>
+        </TooltipTrigger>
+        <TooltipContent>{props.href}</TooltipContent>
+      </Tooltip>
     );
   },
 });

apps/platform/src/components/summary/summary-content.tsx

@@ -11,6 +11,7 @@ import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { ChevronLeft } from "lucide-react";
 import { authClient } from "@/lib/auth-client";
+import { SERVER_URL } from "@/lib/utils";
 
 interface SummaryContentProps {
   mapId: string;

apps/platform/src/lib/wsHandler.ts

@@ -3,6 +3,7 @@ import {
   AchievementNotification,
   MessageType,
   NewMapResult,
+  pack,
   UserStats,
 } from "@kbnet/shared";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
@@ -24,6 +25,10 @@ export async function wsHandler(
     }
 
     switch (type) {
+      case MessageType.WELCOME:
+        state.send(pack(MessageType.GET_USER_STAT, {}));
+        break;
+
       case MessageType.PONG:
         console.log("Echo message received:", payload);
       case MessageType.MAP_CREATED:

apps/platform/src/providers/ws.tsx

@@ -38,8 +38,6 @@ export function WSProvider({ children }: { children: React.ReactNode }) {
       state.setConnectionStatus("connected");
       state.setError(null);
       console.log("WebSocket connected");
-
-      ws.send(pack(MessageType.GET_USER_STAT, {}));
     };
     ws.onclose = () => {
       console.log("WebSocket disconnected");

apps/server/src/api/index.ts

@@ -103,7 +103,7 @@ router.post("/maps/trigger/summary", async (c) => {
   }
 });
 
-router.get("status", async (c) => {
+router.get("/status", async (c) => {
   try {
     const user = c.get("user");
     if (!user) {

apps/server/src/index.ts

@@ -1,11 +1,13 @@
-import { serve } from "@hono/node-server";
 import { Hono } from "hono";
 import { cors } from "hono/cors";
 import { createNodeWebSocket } from "@hono/node-ws";
 import { handler } from "./handler";
 import { config } from "dotenv";
 import router from "./api";
 import { authClient, tokenToSession } from "./lib/auth-client";
+import { createServer } from "http";
+import { MessageType, pack } from "@kbnet/shared";
+import { serve } from "@hono/node-server";
 
 config();
 
@@ -28,7 +30,7 @@ app.get("/", (c) => {
   });
 });
 
-app.use("*", async (c, next) => {
+app.use("/api/*", async (c, next) => {
   if (c.req.path.startsWith("/ws")) {
     return next();
   }
@@ -52,13 +54,6 @@ app.use("*", async (c, next) => {
   }
 });
 
-app.use(
-  "/api/*",
-  cors({
-    origin: "*", // Allow all origins for API routes
-  })
-);
-
 app.route("/api", router);
 
 app.get(
@@ -69,9 +64,11 @@ app.get(
       onOpen: async (evt, ws) => {
         const token = c.req.query("token");
         try {
-          await tokenToSession(c, token);
+          const { session, user } = await tokenToSession(c, token);
+
+          c.set("user", user);
+          c.set("session", session);
         } catch (error: any) {
-          console.error("WebSocket authentication failed:", error);
           ws.send(
             JSON.stringify({
               type: "error",
@@ -83,11 +80,13 @@ app.get(
           return;
         }
         console.log("WebSocket connection opened", evt.type);
-        ws.send("Welcome to KBNet WebSocket!");
+        ws.send(
+          pack(MessageType.WELCOME, { message: "Welcome to KBNet WebSocket!" })
+        );
 
         // Send ping every 30 seconds
         pingInterval = setInterval(() => {
-          if (ws.readyState === WebSocket.OPEN) {
+          if (ws.readyState === 1) {
             ws.send(JSON.stringify({ type: "ping" }));
           }
         }, 30000);
@@ -100,12 +99,6 @@ app.get(
         handler.cleanUpSocket(ws);
       },
       onMessage: (evt, ws) => {
-        const session = c.get("session");
-        const user = c.get("user");
-        if (!session || !user) {
-          console.warn("Session or user not found on message");
-          return;
-        }
         handler.handle(c, evt, ws);
       },
       onError(evt, ws) {
@@ -118,15 +111,23 @@ app.get(
 );
 
 const PORT = parseInt(process.env.PORT || "8000");
+
+// const server = createServer(app);
+
 const server = serve(
   {
     fetch: app.fetch,
     port: PORT,
     hostname: "0.0.0.0",
+    createServer,
   },
   (info) => {
     console.log(`Server is running on http://localhost:${info.port}`);
   }
 );
 
 injectWebSocket(server);
+
+// server.listen(PORT, "0.0.0.0", () => {
+//   console.log(`Server running at http://0.0.0.0:${PORT}/`);
+// });

packages/shared/src/lib/constants.ts

@@ -1,4 +1,6 @@
 export enum MessageType {
+  WELCOME = "welcome",
+
   START_SEARCH = "start_search",
   SEARCH_RESULT = "search_result",
   ERROR = "error",