Merge pull request #36 from orus-dev/message-actions

Message actions

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

@@ -19,13 +19,13 @@ export default function DMs() {
   useEffect(() => {
     async function connectTargetNode() {
       if (!target) return;
-      auth(
+      auth({
-        target.node_address,
+        id: target.node_address,
-        targetNode,
+        wsRef: targetNode,
-        () => {},
+        addMessage: app.addMessage,
-        app.addMessage,
+        deleteMessage: app.deleteMessage,
-        () => {}
+        editMessage: app.editMessage,
-      );
+      });
     }
 
     connectTargetNode();
@@ -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/app/server/[ip]/page.tsx

@@ -16,20 +16,23 @@ export default function Server() {
   const searchParams = useSearchParams();
   const serverRef = useRef<WebSocket | null>(null);
   const app = useApp();
-  const { messages, addMessage } = useServerMessages();
+  const { messages, addMessage, editMessage, deleteMessage } =
+    useServerMessages();
 
   useEffectOnceWhenReady(
     () => {
       if (!ip) return;
       const msgs = messages[ip];
-      auth(
+      auth({
-        ip,
+        id: ip,
-        serverRef,
+        wsRef: serverRef,
-        app.setServer,
+        setServer: app.setServer,
-        (m) => addMessage(ip, m),
+        lastMessage: msgs ? msgs[msgs.length - 1]?.id : undefined,
-        () => {},
+
-        msgs ? msgs[msgs.length - 1]?.id : undefined
+        addMessage: (m) => addMessage(ip, m),
-      );
+        editMessage: (msg_id, contents) => editMessage(ip, msg_id, contents),
+        deleteMessage: (msg_id) => deleteMessage(ip, msg_id),
+      });
     },
     [ip, messages],
     [undefined, (v) => v]

src/components/app/AppLayout.tsx

@@ -7,7 +7,7 @@ import { toast } from "sonner";
 import auth from "@/lib/auth";
 import { useIsMobile } from "@/hooks/is-mobile";
 import App from "@/types/app";
-import { Server, Message } from "@/types/types";
+import { Message } from "@/types/types";
 
 import SidebarServers from "./SidebarServers";
 import SidebarDMs from "./SidebarDMs";
@@ -31,12 +31,10 @@ export default function AppLayout({
   useEffect(() => {
     if (!app.profile?.node_address) return;
 
-    auth(
+    auth({
-      app.profile.node_address,
+      id: app.profile.node_address,
-      app.node,
+      wsRef: app.node,
-      () => {},
+      onNewMessage: (m) => {
-      app.addMessage,
-      (m) => {
         if (m.from !== chatWith && m.from !== app.profile?.id)
           toast(
             `New message from ${app.profiles[m.from]?.display_name || m.from}`,
@@ -52,8 +50,12 @@ export default function AppLayout({
 
         if (onNewMessage) onNewMessage(m);
       },
-      app.messages?.[app.messages.length - 1]?.id
+      lastMessage: app.messages?.[app.messages.length - 1]?.id,
-    );
+
+      addMessage: app.addMessage,
+      deleteMessage: app.deleteMessage,
+      editMessage: app.editMessage,
+    });
 
     app.setProfiles((prev) => {
       if (app.profile) prev[app.profile.id] = app.profile;

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

@@ -11,21 +11,51 @@ import {
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
 import { ChevronLeftIcon, SendIcon, SmilePlusIcon } from "lucide-react";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { format, isToday, isYesterday } from "date-fns";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { UserProfile } from "@/hooks/get-user";
 import ProfilePicture from "../ProfilePicture";
-import App from "@/types/app";
+import App, { SetState } from "@/types/app";
 import { Textarea } from "../ui/textarea";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import { ClientMessage } from "@/types/protocol";
+import { AnimatePresence, motion } from "framer-motion";
 
-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>();
+  const [isEditing, setIsEditing] = useState(false);
+  const [editText, setEditText] = useState(message.contents);
 
-  app.getUserById(message.from).then(setProfile);
+  useEffect(() => {
+    let mounted = true;
+
+    app.getUserById(message.from).then((p) => {
+      if (mounted) setProfile(p);
+    });
+
+    return () => {
+      mounted = false;
+    };
+  }, [app, message.from]);
 
   return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
         <div className="flex flex-col gap-3 rounded-lg p-4 hover:bg-accent">
           <div className="flex gap-2">
             {/* <div className="w-8 h-8 rounded-full bg-gray-400" /> */}
@@ -34,7 +64,7 @@ function MessageContainer({ message, app }: { message: Message; app: App }) {
               name={profile?.display_name || message.from}
             />
             <div className="flex flex-col flex-1">
-          <span className="font-bold flex gap-1 items-center">
+              <span className="font-bold flex gap-1 items-center select-none">
                 {profile?.display_name || message.from}
 
                 <p className="text-neutral-500 text-xs">
@@ -46,9 +76,34 @@ function MessageContainer({ message, app }: { message: Message; app: App }) {
                 </p>
               </span>
 
-          <div className="text-foreground/85 flex flex-col break-words whitespace-pre-wrap">
+              <div
-            {message.contents.split("\n\n").map((line, index) => (
+                className="text-foreground/85 flex flex-col break-words whitespace-pre-wrap"
-              <div key={index} className="h-max break-words">
+                onKeyDown={(e) => {
+                  if (e.key === "Escape" && isEditing) {
+                    setIsEditing(false);
+                    setEditText(message.contents);
+                  }
+                }}
+              >
+                {isEditing ? (
+                  <MessageInput
+                    text={editText}
+                    setText={setEditText}
+                    onEnter={() => {
+                      sendRequest({
+                        type: "edit_message",
+                        params: {
+                          message_id: message.id,
+                          new_contents: editText,
+                        },
+                      });
+
+                      setIsEditing(false);
+                    }}
+                  />
+                ) : (
+                  message.contents.split("\n\n").map((line, index) => (
+                    <div key={index} className="h-max break-words select-none">
                       {index > 0 && <br />}
                       <ReactMarkdown
                         remarkPlugins={[remarkGfm]}
@@ -108,29 +163,143 @@ function MessageContainer({ message, app }: { message: Message; app: App }) {
                         {line}
                       </ReactMarkdown>
                     </div>
-            ))}
+                  ))
+                )}
               </div>
             </div>
           </div>
         </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-52">
+        <ContextMenuItem inset>Copy message</ContextMenuItem>
+        <ContextMenuItem
+          inset
+          onClick={() => {
+            setEditText(message.contents);
+            setIsEditing(true);
+          }}
+          disabled={message.from !== app.profile?.id}
+        >
+          Edit
+        </ContextMenuItem>
+        <ContextMenuItem
+          inset
+          variant="destructive"
+          onClick={() => {
+            sendRequest({
+              type: "delete_message",
+              params: {
+                message_id: message.id,
+              },
+            });
+          }}
+          disabled={message.from !== app.profile?.id}
+        >
+          Delete
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
+
+function MessageInput({
+  text,
+  setText,
+  onEnter,
+}: {
+  text: string;
+  setText: SetState<string>;
+  onEnter: () => void;
+}) {
+  const inputRef = useRef<any>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [inputRef]);
+
+  return text.includes("\n") ? (
+    <Textarea
+      ref={inputRef}
+      className="resize-none"
+      placeholder="Type a message..."
+      value={text}
+      onChange={(e) => {
+        if (!e.target.value.includes("\n") && text.includes("\n")) {
+          setTimeout(() => {
+            if (inputRef.current) {
+              inputRef.current.selectionStart = text.length + 1;
+              inputRef.current.selectionEnd = text.length + 1;
+              inputRef.current.focus();
+            }
+          }, 10);
+        }
+
+        setText(e.target.value);
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          if (!e.shiftKey) {
+            e.preventDefault();
+            onEnter();
+          }
+        }
+      }}
+    />
+  ) : (
+    <Input
+      placeholder="Type a message..."
+      ref={inputRef}
+      value={text}
+      onChange={(e) => setText(e.target.value)}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          if (e.shiftKey) {
+            setText((p) => p + "\n");
+            setTimeout(() => {
+              if (inputRef.current) {
+                inputRef.current.selectionStart = text.length + 1;
+                inputRef.current.selectionEnd = text.length + 1;
+                inputRef.current.focus();
+              }
+            }, 10);
+          } else {
+            onEnter();
+          }
+        }
+      }}
+    />
   );
 }
 
 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[];
 }) {
   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">
@@ -155,65 +324,32 @@ export default function MessageBox({
         </header>
       )}
       <div className="mt-auto flex flex-col-reverse overflow-y-scroll">
+        <AnimatePresence>
           {messages.toReversed().map((msg) => (
-          <MessageContainer key={msg.id} message={msg} app={app} />
+            <motion.div
+              key={msg.id}
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{
+                opacity: 0,
+                scale: 0.95,
+                height: 0,
+                margin: 0,
+                padding: 0,
+              }}
+              transition={{ duration: 0.2 }}
+            >
+              <MessageContainer
+                message={msg}
+                app={app}
+                sendRequest={sendRequest}
+              />
+            </motion.div>
           ))}
+        </AnimatePresence>
       </div>
       <footer className="flex gap-3 pr-5 w-full h-max">
-        {text.includes("\n") ? (
+        <MessageInput text={text} setText={setText} onEnter={sendMessage} />
-          <Textarea
-            ref={inputRef}
-            className="resize-none"
-            placeholder="Type a message..."
-            value={text}
-            onChange={(e) => {
-              if (!e.target.value.includes("\n") && text.includes("\n")) {
-                setTimeout(() => {
-                  if (inputRef.current) {
-                    inputRef.current.selectionStart = text.length + 1;
-                    inputRef.current.selectionEnd = text.length + 1;
-                    inputRef.current.focus();
-                  }
-                }, 10);
-              }
-
-              setText(e.target.value);
-            }}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                if (!e.shiftKey) {
-                  e.preventDefault();
-                  sendMessage(text);
-                  setText("");
-                }
-              }
-            }}
-          />
-        ) : (
-          <Input
-            placeholder="Type a message..."
-            ref={inputRef}
-            value={text}
-            onChange={(e) => setText(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                if (e.shiftKey) {
-                  setText((p) => p + "\n");
-                  setTimeout(() => {
-                    if (inputRef.current) {
-                      inputRef.current.selectionStart = text.length + 1;
-                      inputRef.current.selectionEnd = text.length + 1;
-                      inputRef.current.focus();
-                    }
-                  }, 10);
-                } else {
-                  sendMessage(text.trim());
-                  setText("");
-                }
-              }
-            }}
-          />
-        )}
 
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -237,8 +373,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

@@ -12,7 +12,7 @@ import { toast } from "sonner";
 export default function useApp(): App {
   const node = useRef<WebSocket | null>(null);
   const [profiles, setProfiles] = useState<StringMap<UserProfile | null>>({});
-  const { messages, addMessage } = useMessages();
+  const { messages, addMessage, deleteMessage, editMessage } = useMessages();
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const profile = useUser();
   const [clientSettings, setClientSettings] = useClientSettings();
@@ -38,6 +38,8 @@ export default function useApp(): App {
   }, []);
 
   return {
+    editMessage,
+    deleteMessage,
     currentChannel,
     setCurrentChannel,
     server,
@@ -61,6 +63,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/hooks/use-messages.ts

@@ -6,6 +6,8 @@ interface MessageStore {
   messages: Message[];
   setMessages: (msgs: Message[]) => void;
   addMessage: (msg: Message) => void;
+  deleteMessage: (id: number) => void;
+  editMessage: (id: number, contents: string) => void;
   clearMessages: () => void;
 }
 
@@ -13,6 +15,8 @@ type ServerMessageStore = {
   messages: Record<string, Message[]>; // server_id → messages
   setMessages: (serverId: string, msgs: Message[]) => void;
   addMessage: (serverId: string, msg: Message) => void;
+  deleteMessage: (serverId: string, id: number) => void;
+  editMessage: (serverId: string, id: number, contents: string) => void;
   clearMessages: (serverId?: string) => void;
 };
 
@@ -27,6 +31,16 @@ export const useMessages = create<MessageStore>()(
             ? state
             : { messages: [...state.messages, msg] }
         ),
+      deleteMessage: (id: number) =>
+        set((state) => ({
+          messages: state.messages.filter((m) => m.id !== id),
+        })),
+      editMessage: (id: number, contents) =>
+        set((state) => ({
+          messages: state.messages.map((m) =>
+            m.id === id ? { ...m, contents } : m
+          ),
+        })),
       clearMessages: () => set({ messages: [] }),
     }),
     { name: "chat-messages" }
@@ -47,7 +61,6 @@ export const useServerMessages = create<ServerMessageStore>()(
         set((state) => {
           const serverMsgs = state.messages[serverId] || [];
 
-          // avoid duplicates
           if (serverMsgs.some((m) => m.id === msg.id)) return state;
 
           return {
@@ -58,6 +71,26 @@ export const useServerMessages = create<ServerMessageStore>()(
           };
         }),
 
+      deleteMessage: (serverId, id) =>
+        set((state) => ({
+          messages: {
+            ...state.messages,
+            [serverId]: (state.messages[serverId] || []).filter(
+              (m) => m.id !== id
+            ),
+          },
+        })),
+
+      editMessage: (serverId, id, contents) =>
+        set((state) => ({
+          messages: {
+            ...state.messages,
+            [serverId]: (state.messages[serverId] || []).map((m) =>
+              m.id === id ? { ...m, contents } : m
+            ),
+          },
+        })),
+
       clearMessages: (serverId) =>
         set((state) =>
           serverId

src/lib/auth.ts

@@ -4,14 +4,28 @@ import { Dispatch, RefObject, SetStateAction } from "react";
 import { get } from "./request";
 import { toast } from "sonner";
 
-export default async function auth(
+type AuthParams = {
-  id: string,
+  id: string;
-  wsRef: RefObject<WebSocket | null>,
+  wsRef: RefObject<WebSocket | null>;
-  setServer: Dispatch<SetStateAction<Server | undefined>>,
+  setServer?: Dispatch<SetStateAction<Server | undefined>>;
-  addMessage: (m: Message) => void,
+  onNewMessage?: (m: Message) => void;
-  onNewMessage?: (m: Message) => void,
+  lastMessage?: number;
-  lastMessage?: number
+
-) {
+  addMessage: (m: Message) => void;
+  deleteMessage: (id: number) => void;
+  editMessage: (id: number, contents: string) => void;
+};
+
+export default async function auth({
+  id,
+  wsRef,
+  setServer,
+  addMessage,
+  onNewMessage,
+  lastMessage,
+  deleteMessage,
+  editMessage,
+}: AuthParams) {
   console.log("Authenticating with server id:", id);
 
   if (!id) return;
@@ -45,7 +59,7 @@ export default async function auth(
     }
 
     if (data.version) {
-      setServer({ channels: [], ...data });
+      if (setServer) setServer({ channels: [], ...data });
       ws.send(
         JSON.stringify({
           version: "0.0.1",
@@ -66,6 +80,14 @@ export default async function auth(
         if (onNewMessage) onNewMessage(data.params as Message);
         addMessage(data.params as Message);
         break;
+
+      case "message_delete":
+        deleteMessage(data.params.message_id);
+        break;
+
+      case "message_update":
+        editMessage(data.params.message_id, data.params.contents);
+        break;
     }
   };
 

src/types/app.ts

@@ -24,6 +24,8 @@ export default interface App {
 
   messages: Message[];
   addMessage: (v: Message) => void;
+  deleteMessage: (id: number) => void;
+  editMessage: (id: number, v: string) => void;
 
   sidebarOpen: boolean;
   setSidebarOpen: SetState<boolean>;

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 }>
+  | MessageType<"delete_message", { message_id: number }>
+  | MessageType<"edit_message", { message_id: number; new_contents: string }>;