Improved protocol

2025-12-22 12:45:48 +01:00
parent 75dfdac920
commit be4917ce80
8 changed files with 491 additions and 153 deletions
@@ -30,17 +30,7 @@ export default function ChannelView({
              (m) => m.channel_id === app.currentChannel?.id
            ) || []
          }
-          sendMessage={(message) => {
-            serverRef.current?.send(
-              JSON.stringify({
-                type: "send_message",
-                params: {
-                  channel_id: app.currentChannel?.id,
-                  contents: message,
-                },
-              })
-            );
-          }}
+          sendRequest={(req) => serverRef.current?.send(JSON.stringify(req))}
        />
      );

@@ -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">
-      <div className="flex gap-2">
-        {/* <div className="w-8 h-8 rounded-full bg-gray-400" /> */}
-        <ProfilePicture
-          url={profile?.avatar_url}
-          name={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}
+    <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" /> */}
+            <ProfilePicture
+              url={profile?.avatar_url}
+              name={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">
-              {isToday(message.timestamp * 1000)
-                ? format(message.timestamp * 1000, "p")
-                : isYesterday(message.timestamp * 1000)
-                ? "Yesterday, " + format(message.timestamp * 1000, "p")
-                : format(message.timestamp * 1000, "PP, p")}
-            </p>
-          </span>
+                <p className="text-neutral-500 text-xs">
+                  {isToday(message.timestamp * 1000)
+                    ? format(message.timestamp * 1000, "p")
+                    : isYesterday(message.timestamp * 1000)
+                    ? "Yesterday, " + format(message.timestamp * 1000, "p")
+                    : format(message.timestamp * 1000, "PP, p")}
+                </p>
+              </span>

-          <div className="text-foreground/85 flex flex-col break-words whitespace-pre-wrap">
-            {message.contents.split("\n\n").map((line, index) => (
-              <div key={index} className="h-max break-words">
-                {index > 0 && <br />}
-                <ReactMarkdown
-                  remarkPlugins={[remarkGfm]}
-                  components={{
-                    h1: ({ node, ...props }) => (
-                      <h1
-                        className="text-3xl font-bold my-2 break-words"
-                        {...props}
-                      />
-                    ),
-                    h2: ({ node, ...props }) => (
-                      <h2
-                        className="text-2xl font-bold my-2 break-words"
-                        {...props}
-                      />
-                    ),
-                    h3: ({ node, ...props }) => (
-                      <h3
-                        className="text-xl font-bold my-2 break-words"
-                        {...props}
-                      />
-                    ),
-                    h4: ({ node, ...props }) => (
-                      <h4
-                        className="text-lg font-bold my-2 break-words"
-                        {...props}
-                      />
-                    ),
-                    h5: ({ node, ...props }) => (
-                      <h5
-                        className="text-base font-bold my-2 break-words"
-                        {...props}
-                      />
-                    ),
-                    ul: ({ node, ...props }) => (
-                      <ul
-                        className="list-disc list-inside my-2 break-words"
-                        {...props}
-                      />
-                    ),
-                    ol: ({ node, ...props }) => (
-                      <ol
-                        className="list-decimal list-inside my-2 break-words"
-                        {...props}
-                      />
-                    ),
-                    a: ({ node, ...props }) => (
-                      <a
-                        className="text-accent-foreground underline underline-offset-2 break-all"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        {...props}
-                      />
-                    ),
-                  }}
-                >
-                  {line}
-                </ReactMarkdown>
+              <div className="text-foreground/85 flex flex-col break-words whitespace-pre-wrap">
+                {message.contents.split("\n\n").map((line, index) => (
+                  <div key={index} className="h-max break-words">
+                    {index > 0 && <br />}
+                    <ReactMarkdown
+                      remarkPlugins={[remarkGfm]}
+                      components={{
+                        h1: ({ node, ...props }) => (
+                          <h1
+                            className="text-3xl font-bold my-2 break-words"
+                            {...props}
+                          />
+                        ),
+                        h2: ({ node, ...props }) => (
+                          <h2
+                            className="text-2xl font-bold my-2 break-words"
+                            {...props}
+                          />
+                        ),
+                        h3: ({ node, ...props }) => (
+                          <h3
+                            className="text-xl font-bold my-2 break-words"
+                            {...props}
+                          />
+                        ),
+                        h4: ({ node, ...props }) => (
+                          <h4
+                            className="text-lg font-bold my-2 break-words"
+                            {...props}
+                          />
+                        ),
+                        h5: ({ node, ...props }) => (
+                          <h5
+                            className="text-base font-bold my-2 break-words"
+                            {...props}
+                          />
+                        ),
+                        ul: ({ node, ...props }) => (
+                          <ul
+                            className="list-disc list-inside my-2 break-words"
+                            {...props}
+                          />
+                        ),
+                        ol: ({ node, ...props }) => (
+                          <ol
+                            className="list-decimal list-inside my-2 break-words"
+                            {...props}
+                          />
+                        ),
+                        a: ({ node, ...props }) => (
+                          <a
+                            className="text-accent-foreground underline underline-offset-2 break-all"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            {...props}
+                          />
+                        ),
+                      }}
+                    >
+                      {line}
+                    </ReactMarkdown>
+                  </div>
+                ))}
              </div>
-            ))}
+            </div>
          </div>
        </div>
-      </div>
-    </div>
+      </ContextMenuTrigger>
+      <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);
-                  setText("");
+                  sendMessage();
                }
              }
            }}
@@ -207,8 +265,7 @@ export default function MessageBox({
                    }
                  }, 10);
                } else {
-                  sendMessage(text.trim());
-                  setText("");
+                  sendMessage();
                }
              }
            }}
@@ -237,8 +294,7 @@ export default function MessageBox({
        <Button
          variant="secondary"
          onClick={() => {
-            sendMessage(text.trim());
-            setText("");
+            sendMessage();
          }}
        >
          <SendIcon />
@@ -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,
+}