Improved protocol

package-lock.json

@@ -12,6 +12,7 @@
         "@lexical/rich-text": "^0.34.0",
         "@radix-ui/react-avatar": "^1.1.10",
         "@radix-ui/react-checkbox": "^1.3.3",
+        "@radix-ui/react-context-menu": "^2.2.16",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-label": "^2.1.7",
@@ -38,7 +39,7 @@
         "js-cookie": "^3.0.5",
         "lexical": "^0.34.0",
         "lucide-react": "^0.541.0",
-        "next": "15.5.0",
+        "next": "15.5.7",
         "next-themes": "^0.4.6",
         "pg": "^8.16.3",
         "react": "19.1.0",
@@ -883,15 +884,15 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "15.5.0",
+      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.7.tgz",
-      "integrity": "sha512-sDaprBAfzCQiOgo2pO+LhnV0Wt2wBgartjrr+dpcTORYVnnXD0gwhHhiiyIih9hQbq+JnbqH4odgcFWhqCGidw==",
+      "integrity": "sha512-4h6Y2NyEkIEN7Z8YxkA27pq6zTkS09bUSYC0xjd0NpwFxjnIKeZEeH591o5WECSmjpUhLn3H2QLJcDye3Uzcvg==",
       "license": "MIT"
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "15.5.0",
+      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.7.tgz",
-      "integrity": "sha512-v7Jj9iqC6enxIRBIScD/o0lH7QKvSxq2LM8UTyqJi+S2w2QzhMYjven4vgu/RzgsdtdbpkyCxBTzHl/gN5rTRg==",
+      "integrity": "sha512-IZwtxCEpI91HVU/rAUOOobWSZv4P2DeTtNaCdHqLcTJU4wdNXgAySvKa/qJCgR5m6KI8UsKDXtO2B31jcaw1Yw==",
       "cpu": [
         "arm64"
       ],
@@ -905,9 +906,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "15.5.0",
+      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.7.tgz",
-      "integrity": "sha512-s2Nk6ec+pmYmAb/utawuURy7uvyYKDk+TRE5aqLRsdnj3AhwC9IKUBmhfnLmY/+P+DnwqpeXEFIKe9tlG0p6CA==",
+      "integrity": "sha512-UP6CaDBcqaCBuiq/gfCEJw7sPEoX1aIjZHnBWN9v9qYHQdMKvCKcAVs4OX1vIjeE+tC5EIuwDTVIoXpUes29lg==",
       "cpu": [
         "x64"
       ],
@@ -921,9 +922,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "15.5.0",
+      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.7.tgz",
-      "integrity": "sha512-mGlPJMZReU4yP5fSHjOxiTYvZmwPSWn/eF/dcg21pwfmiUCKS1amFvf1F1RkLHPIMPfocxLViNWFvkvDB14Isg==",
+      "integrity": "sha512-NCslw3GrNIw7OgmRBxHtdWFQYhexoUCq+0oS2ccjyYLtcn1SzGzeM54jpTFonIMUjNbHmpKpziXnpxhSWLcmBA==",
       "cpu": [
         "arm64"
       ],
@@ -937,9 +938,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "15.5.0",
+      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.7.tgz",
-      "integrity": "sha512-biWqIOE17OW/6S34t1X8K/3vb1+svp5ji5QQT/IKR+VfM3B7GvlCwmz5XtlEan2ukOUf9tj2vJJBffaGH4fGRw==",
+      "integrity": "sha512-nfymt+SE5cvtTrG9u1wdoxBr9bVB7mtKTcj0ltRn6gkP/2Nu1zM5ei8rwP9qKQP0Y//umK+TtkKgNtfboBxRrw==",
       "cpu": [
         "arm64"
       ],
@@ -953,9 +954,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "15.5.0",
+      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.7.tgz",
-      "integrity": "sha512-zPisT+obYypM/l6EZ0yRkK3LEuoZqHaSoYKj+5jiD9ESHwdr6QhnabnNxYkdy34uCigNlWIaCbjFmQ8FY5AlxA==",
+      "integrity": "sha512-hvXcZvCaaEbCZcVzcY7E1uXN9xWZfFvkNHwbe/n4OkRhFWrs1J1QV+4U1BN06tXLdaS4DazEGXwgqnu/VMcmqw==",
       "cpu": [
         "x64"
       ],
@@ -969,9 +970,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "15.5.0",
+      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.7.tgz",
-      "integrity": "sha512-+t3+7GoU9IYmk+N+FHKBNFdahaReoAktdOpXHFIPOU1ixxtdge26NgQEEkJkCw2dHT9UwwK5zw4mAsURw4E8jA==",
+      "integrity": "sha512-4IUO539b8FmF0odY6/SqANJdgwn1xs1GkPO5doZugwZ3ETF6JUdckk7RGmsfSf7ws8Qb2YB5It33mvNL/0acqA==",
       "cpu": [
         "x64"
       ],
@@ -985,9 +986,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "15.5.0",
+      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.7.tgz",
-      "integrity": "sha512-d8MrXKh0A+c9DLiy1BUFwtg3Hu90Lucj3k6iKTUdPOv42Ve2UiIG8HYi3UAb8kFVluXxEfdpCoPPCSODk5fDcw==",
+      "integrity": "sha512-CpJVTkYI3ZajQkC5vajM7/ApKJUOlm6uP4BknM3XKvJ7VXAvCqSjSLmM0LKdYzn6nBJVSjdclx8nYJSa3xlTgQ==",
       "cpu": [
         "arm64"
       ],
@@ -1001,9 +1002,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "15.5.0",
+      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.7.tgz",
-      "integrity": "sha512-Fe1tGHxOWEyQjmygWkkXSwhFcTJuimrNu52JEuwItrKJVV4iRjbWp9I7zZjwqtiNnQmxoEvoisn8wueFLrNpvQ==",
+      "integrity": "sha512-gMzgBX164I6DN+9/PGA+9dQiwmTkE4TloBNx8Kv9UiGARsr9Nba7IpcBRA1iTV9vwlYnrE3Uy6I7Aj6qLjQuqw==",
       "cpu": [
         "x64"
       ],
@@ -1164,6 +1165,34 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-context-menu": {
+      "version": "2.2.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.16.tgz",
+      "integrity": "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dialog": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
@@ -4458,12 +4487,13 @@
       }
     },
     "node_modules/next": {
-      "version": "15.5.0",
+      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/next/-/next-15.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.5.7.tgz",
-      "integrity": "sha512-N1lp9Hatw3a9XLt0307lGB4uTKsXDhyOKQo7uYMzX4i0nF/c27grcGXkLdb7VcT8QPYLBa8ouIyEoUQJ2OyeNQ==",
+      "integrity": "sha512-+t2/0jIJ48kUpGKkdlhgkv+zPTEOoXyr60qXe68eB/pl3CMJaLeIGjzp5D6Oqt25hCBiBTt8wEeeAzfJvUKnPQ==",
+      "deprecated": "This version has a security vulnerability. Please upgrade to a patched version. See https://nextjs.org/blog/security-update-2025-12-11 for more details.",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "15.5.0",
+        "@next/env": "15.5.7",
         "@swc/helpers": "0.5.15",
         "caniuse-lite": "^1.0.30001579",
         "postcss": "8.4.31",
@@ -4476,14 +4506,14 @@
         "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "15.5.0",
+        "@next/swc-darwin-arm64": "15.5.7",
-        "@next/swc-darwin-x64": "15.5.0",
+        "@next/swc-darwin-x64": "15.5.7",
-        "@next/swc-linux-arm64-gnu": "15.5.0",
+        "@next/swc-linux-arm64-gnu": "15.5.7",
-        "@next/swc-linux-arm64-musl": "15.5.0",
+        "@next/swc-linux-arm64-musl": "15.5.7",
-        "@next/swc-linux-x64-gnu": "15.5.0",
+        "@next/swc-linux-x64-gnu": "15.5.7",
-        "@next/swc-linux-x64-musl": "15.5.0",
+        "@next/swc-linux-x64-musl": "15.5.7",
-        "@next/swc-win32-arm64-msvc": "15.5.0",
+        "@next/swc-win32-arm64-msvc": "15.5.7",
-        "@next/swc-win32-x64-msvc": "15.5.0",
+        "@next/swc-win32-x64-msvc": "15.5.7",
         "sharp": "^0.34.3"
       },
       "peerDependencies": {

package.json

@@ -15,6 +15,7 @@
     "@lexical/rich-text": "^0.34.0",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.7",

src/app/chat/[id]/page.tsx

@@ -42,16 +42,15 @@ export default function DMs() {
             (m.channel_id === id && m.from === app.profile?.id) ||
             (m.from === id && m.channel_id === app.profile?.id)
         )}
-        sendMessage={(message) => {
+        sendRequest={(req) => {
-          targetNode.current?.send(
+          switch (req.type) {
-            JSON.stringify({
+            case "send_message":
-              type: "send_message",
+              targetNode.current?.send(JSON.stringify(req));
-              params: {
+              break;
-                channel_id: id,
+            default:
-                contents: message,
+              app.node.current?.send(JSON.stringify(req));
-              },
+              break;
-            })
+          }
-          );
         }}
       />
     </AppLayout>

src/components/channel/ChannelView.tsx

@@ -30,17 +30,7 @@ export default function ChannelView({
               (m) => m.channel_id === app.currentChannel?.id
             ) || []
           }
-          sendMessage={(message) => {
+          sendRequest={(req) => serverRef.current?.send(JSON.stringify(req))}
-            serverRef.current?.send(
-              JSON.stringify({
-                type: "send_message",
-                params: {
-                  channel_id: app.currentChannel?.id,
-                  contents: message,
-                },
-              })
-            );
-          }}
         />
       );
 

src/components/channel/MessageBox.tsx

@@ -19,112 +19,151 @@ import { UserProfile } from "@/hooks/get-user";
 import ProfilePicture from "../ProfilePicture";
 import App from "@/types/app";
 import { Textarea } from "../ui/textarea";
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import { ClientMessage } from "@/types/protocol";
 
-function MessageContainer({ message, app }: { message: Message; app: App }) {
+function MessageContainer({
+  message,
+  app,
+  sendRequest,
+}: {
+  message: Message;
+  app: App;
+  sendRequest: (content: ClientMessage) => void;
+}) {
   const [profile, setProfile] = useState<UserProfile | null>();
 
   app.getUserById(message.from).then(setProfile);
 
   return (
-    <div className="flex flex-col gap-3 rounded-lg p-4 hover:bg-accent">
+    <ContextMenu>
-      <div className="flex gap-2">
+      <ContextMenuTrigger asChild>
-        {/* <div className="w-8 h-8 rounded-full bg-gray-400" /> */}
+        <div className="flex flex-col gap-3 rounded-lg p-4 hover:bg-accent">
-        <ProfilePicture
+          <div className="flex gap-2">
-          url={profile?.avatar_url}
+            {/* <div className="w-8 h-8 rounded-full bg-gray-400" /> */}
-          name={profile?.display_name || message.from}
+            <ProfilePicture
-        />
+              url={profile?.avatar_url}
-        <div className="flex flex-col flex-1">
+              name={profile?.display_name || message.from}
-          <span className="font-bold flex gap-1 items-center">
+            />
-            {profile?.display_name || message.from}
+            <div className="flex flex-col flex-1">
+              <span className="font-bold flex gap-1 items-center">
+                {profile?.display_name || message.from}
 
-            <p className="text-neutral-500 text-xs">
+                <p className="text-neutral-500 text-xs">
-              {isToday(message.timestamp * 1000)
+                  {isToday(message.timestamp * 1000)
-                ? format(message.timestamp * 1000, "p")
+                    ? format(message.timestamp * 1000, "p")
-                : isYesterday(message.timestamp * 1000)
+                    : isYesterday(message.timestamp * 1000)
-                ? "Yesterday, " + format(message.timestamp * 1000, "p")
+                    ? "Yesterday, " + format(message.timestamp * 1000, "p")
-                : format(message.timestamp * 1000, "PP, p")}
+                    : format(message.timestamp * 1000, "PP, p")}
-            </p>
+                </p>
-          </span>
+              </span>
 
-          <div className="text-foreground/85 flex flex-col break-words whitespace-pre-wrap">
+              <div className="text-foreground/85 flex flex-col break-words whitespace-pre-wrap">
-            {message.contents.split("\n\n").map((line, index) => (
+                {message.contents.split("\n\n").map((line, index) => (
-              <div key={index} className="h-max break-words">
+                  <div key={index} className="h-max break-words">
-                {index > 0 && <br />}
+                    {index > 0 && <br />}
-                <ReactMarkdown
+                    <ReactMarkdown
-                  remarkPlugins={[remarkGfm]}
+                      remarkPlugins={[remarkGfm]}
-                  components={{
+                      components={{
-                    h1: ({ node, ...props }) => (
+                        h1: ({ node, ...props }) => (
-                      <h1
+                          <h1
-                        className="text-3xl font-bold my-2 break-words"
+                            className="text-3xl font-bold my-2 break-words"
-                        {...props}
+                            {...props}
-                      />
+                          />
-                    ),
+                        ),
-                    h2: ({ node, ...props }) => (
+                        h2: ({ node, ...props }) => (
-                      <h2
+                          <h2
-                        className="text-2xl font-bold my-2 break-words"
+                            className="text-2xl font-bold my-2 break-words"
-                        {...props}
+                            {...props}
-                      />
+                          />
-                    ),
+                        ),
-                    h3: ({ node, ...props }) => (
+                        h3: ({ node, ...props }) => (
-                      <h3
+                          <h3
-                        className="text-xl font-bold my-2 break-words"
+                            className="text-xl font-bold my-2 break-words"
-                        {...props}
+                            {...props}
-                      />
+                          />
-                    ),
+                        ),
-                    h4: ({ node, ...props }) => (
+                        h4: ({ node, ...props }) => (
-                      <h4
+                          <h4
-                        className="text-lg font-bold my-2 break-words"
+                            className="text-lg font-bold my-2 break-words"
-                        {...props}
+                            {...props}
-                      />
+                          />
-                    ),
+                        ),
-                    h5: ({ node, ...props }) => (
+                        h5: ({ node, ...props }) => (
-                      <h5
+                          <h5
-                        className="text-base font-bold my-2 break-words"
+                            className="text-base font-bold my-2 break-words"
-                        {...props}
+                            {...props}
-                      />
+                          />
-                    ),
+                        ),
-                    ul: ({ node, ...props }) => (
+                        ul: ({ node, ...props }) => (
-                      <ul
+                          <ul
-                        className="list-disc list-inside my-2 break-words"
+                            className="list-disc list-inside my-2 break-words"
-                        {...props}
+                            {...props}
-                      />
+                          />
-                    ),
+                        ),
-                    ol: ({ node, ...props }) => (
+                        ol: ({ node, ...props }) => (
-                      <ol
+                          <ol
-                        className="list-decimal list-inside my-2 break-words"
+                            className="list-decimal list-inside my-2 break-words"
-                        {...props}
+                            {...props}
-                      />
+                          />
-                    ),
+                        ),
-                    a: ({ node, ...props }) => (
+                        a: ({ node, ...props }) => (
-                      <a
+                          <a
-                        className="text-accent-foreground underline underline-offset-2 break-all"
+                            className="text-accent-foreground underline underline-offset-2 break-all"
-                        target="_blank"
+                            target="_blank"
-                        rel="noopener noreferrer"
+                            rel="noopener noreferrer"
-                        {...props}
+                            {...props}
-                      />
+                          />
-                    ),
+                        ),
-                  }}
+                      }}
-                >
+                    >
-                  {line}
+                      {line}
-                </ReactMarkdown>
+                    </ReactMarkdown>
+                  </div>
+                ))}
               </div>
-            ))}
+            </div>
           </div>
         </div>
-      </div>
+      </ContextMenuTrigger>
-    </div>
+      <ContextMenuContent className="w-52">
+        <ContextMenuItem inset>Copy message</ContextMenuItem>
+        <ContextMenuItem
+          inset
+          variant="destructive"
+          onClick={() => {}}
+          disabled={message.from !== app.profile?.id}
+        >
+          Delete
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
   );
 }
 
 export default function MessageBox({
   app,
-  sendMessage,
+  sendRequest,
   channelName,
   channelIcon,
   messages,
 }: {
   app: App;
-  sendMessage: (m: string) => void;
+  sendRequest: (req: ClientMessage) => void;
   channelName?: string;
   channelIcon?: string;
   messages: Message[];
@@ -132,6 +171,21 @@ export default function MessageBox({
   const [text, setText] = useState("");
   const inputRef = useRef<any>(null);
 
+  const sendMessage = () => {
+    if (!app.currentChannel) {
+      return;
+    }
+
+    sendRequest({
+      type: "send_message",
+      params: {
+        channel_id: app.currentChannel?.id,
+        contents: text.trim(),
+      },
+    });
+    setText("");
+  };
+
   return (
     <div className="h-svh w-full max-h-svh flex flex-col pb-5 pl-5 gap-5">
       {channelName && (
@@ -156,7 +210,12 @@ export default function MessageBox({
       )}
       <div className="mt-auto flex flex-col-reverse overflow-y-scroll">
         {messages.toReversed().map((msg) => (
-          <MessageContainer key={msg.id} message={msg} app={app} />
+          <MessageContainer
+            key={msg.id}
+            message={msg}
+            app={app}
+            sendRequest={sendRequest}
+          />
         ))}
       </div>
       <footer className="flex gap-3 pr-5 w-full h-max">
@@ -183,8 +242,7 @@ export default function MessageBox({
               if (e.key === "Enter") {
                 if (!e.shiftKey) {
                   e.preventDefault();
-                  sendMessage(text);
+                  sendMessage();
-                  setText("");
                 }
               }
             }}
@@ -207,8 +265,7 @@ export default function MessageBox({
                     }
                   }, 10);
                 } else {
-                  sendMessage(text.trim());
+                  sendMessage();
-                  setText("");
                 }
               }
             }}
@@ -237,8 +294,7 @@ export default function MessageBox({
         <Button
           variant="secondary"
           onClick={() => {
-            sendMessage(text.trim());
+            sendMessage();
-            setText("");
           }}
         >
           <SendIcon />

src/components/ui/context-menu.tsx

@@ -0,0 +1,252 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+  )
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

src/hooks/use-app.ts

@@ -61,6 +61,7 @@ export default function useApp(): App {
 
       const onResponse = (res: Response<UserProfile>) => {
         setProfiles((prev) => {
+          console.log('test')
           prev[id] = res.data as UserProfile;
           return prev;
         });

src/types/protocol.ts

@@ -0,0 +1,9 @@
+export interface MessageType<T = string, P = object> {
+  type: T;
+  params: P;
+}
+
+export type ClientMessage = MessageType<
+  "send_message",
+  { channel_id: string; contents: string }
+>;