(feat): add replys

(feat): move to SenderId (feat): other chat improvements
2026-07-06 23:08:55 +02:00 · 2026-07-06 23:08:55 +02:00 · e0843a11a6
commit e0843a11a6
parent 95a79892c6
9 changed files with 6138 additions and 3234 deletions
--- a/packages/chat/src/components/input.tsx
+++ b/packages/chat/src/components/input.tsx
@ -1,17 +1,21 @@
 import Input from "@tensamin/markdown/input";
 import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
  Card,
  CardHeader,
  Popover,
  PopoverContent,
  PopoverTrigger,
+  Skeleton,
 } from "@tensamin/ui";
 import { useStorage } from "@tensamin/storage/context";
-import * as React from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { Button } from "@tensamin/ui";

-import { Plus, Laugh, FileVideo } from "lucide-react";
-import { useChat } from "../context";
+import { Plus, Laugh, FileVideo, Forward, X } from "lucide-react";
+import { useChat, useReplyMessage } from "../context";
 import { useMTP } from "@tensamin/mtp";
 import { log, toast } from "@tensamin/shared/log";
 import { cn, useIsMobile } from "@tensamin/ui";
@ -19,6 +23,8 @@ import { encryptChatText } from "@tensamin/crypto/chatSecret";

 import { useSession } from "@tensamin/storage/session";
 import GifPicker from "./gifPicker";
+import Wrapper from "@tensamin/user/wrapper";
+import Text from "@tensamin/markdown/text";

 export default function InputComponent({
  value,
@ -27,26 +33,33 @@ export default function InputComponent({
  value: string;
  setValue: (value: string) => void;
 }) {
-  const [invertEnterBehavior, setInvertEnterBehavior] = React.useState(false);
+  const [invertEnterBehavior, setInvertEnterBehavior] = useState(false);

  const { send } = useMTP();
-  const { addLiveMessage, chatSecret, userId, inputBoxRef } = useChat();
+  const {
+    addLiveMessage,
+    chatSecret,
+    userId,
+    inputBoxRef,
+    replyTo,
+    setReplyTo,
+  } = useChat();
  const { load, save } = useStorage();
  const { moveUserIdToTop } = useSession();
-  const gifPopoverRef = React.useRef<HTMLDivElement>(null);
-  const [gifPopoverOpen, setGifPopoverOpen] = React.useState(false);
-  const [gifPopoverSize, setGifPopoverSize] = React.useState<{
+  const gifPopoverRef = useRef<HTMLDivElement>(null);
+  const [gifPopoverOpen, setGifPopoverOpen] = useState(false);
+  const [gifPopoverSize, setGifPopoverSize] = useState<{
    width: number;
    height: number;
  }>();

-  React.useEffect(() => {
+  useEffect(() => {
    void load("settings.reverse_enter_behavior").then((shouldInvert) => {
      setInvertEnterBehavior(shouldInvert);
    });
  }, [load]);

-  React.useEffect(() => {
+  useEffect(() => {
    void load("chat_picker_size").then((size) => {
      if (size) {
        setGifPopoverSize(size);
@ -57,7 +70,7 @@ export default function InputComponent({
  async function handleSubmit(content = value, preserveContent = false) {
    if (content.trim() === "") return;

-    const time = Date.now();
+    const time = new Date().getTime();
    const currentValue = content;

    if (!Number.isSafeInteger(userId) || userId <= 0) {
@ -76,18 +89,20 @@ export default function InputComponent({
      NotEncrypted: true,
      SendTime: time,
      Content: currentValue,
-      SentBySelf: true,
+      SenderId: ownId,
      MessageState: "awaiting",
+      ...(replyTo && { ReplyId: replyTo }),
    });

    log(3, "chat", "purple", "Live message added, encrypting...");

-    const encryptedContent = await encryptChatText(chatSecret, currentValue).catch(
-      (err) => {
-        toast("error", "Failed to encrypt message", String(err));
-        reference.setFailed(true);
-      },
-    );
+    const encryptedContent = await encryptChatText(
+      chatSecret,
+      currentValue,
+    ).catch((err) => {
+      toast("error", "Failed to encrypt message", String(err));
+      reference.setFailed(true);
+    });

    if (!encryptedContent) return;

@ -106,6 +121,10 @@ export default function InputComponent({
      toast("error", "Failed to send message");
    });

+    if (replyTo) {
+      setReplyTo(undefined);
+    }
+
    log(3, "chat", "purple", "Message sent");

    moveUserIdToTop(userId);
@ -168,73 +187,126 @@ export default function InputComponent({
    window.addEventListener("pointerup", handlePointerUp);
  }

+  const { ownId, replyMessage, replyUserId } = useReplyMessage();
+
  return (
-    <Card
-      ref={inputBoxRef}
-      className={cn(
-        "ring-0! rounded-none border-b-0 border-t border-x border-input/70 pt-0 pb-[env(safe-area-inset-bottom)] mx-2",
-        isMobile ? "border-0 border-x-0! w-full mx-0 px-2" : "rounded-t-xl",
-      )}
-    >
-      <CardHeader className="relative p-0 flex flex-col">
-        <Input
-          className="w-full"
-          paddingY="13px"
-          paddingX="13px"
-          placeholder="Send a message..."
-          value={value}
-          setValue={setValue}
-          onSubmit={handleSubmit}
-          invertEnterBehavior={invertEnterBehavior}
-        />
-        <div className="w-full flex justify-between gap-1 p-1 pt-0">
-          <div className="flex gap-1">
-            <Button className="w-9 h-9 p-0" variant="ghost">
-              <Plus size={20} />
-            </Button>
-            <div className="w-auto flex text-red-500">
-              <p>Files list</p>
-            </div>
-          </div>
-          <div className="flex gap-1">
-            <Button className="w-9 h-9 p-0" variant="ghost">
-              <Laugh size={20} />
-            </Button>
-            <Popover open={gifPopoverOpen} onOpenChange={setGifPopoverOpen}>
-              <PopoverTrigger
-                render={
-                  <Button className="w-9 h-9 p-0" variant="ghost">
-                    <FileVideo size={20} />
-                  </Button>
-                }
+    <div className="flex flex-col">
+      {replyTo !== undefined && (
+        <div className="self-center rounded-t-lg bg-background border-t border-x flex items-center justify-start w-[90%] p-1">
+          <div className="flex gap-1 w-full items-center">
+            <Forward
+              color="var(--muted-foreground)"
+              className="opacity-60"
+              size={18}
+            />
+            {replyMessage ? (
+              <>
+                <Wrapper
+                  userId={replyUserId ?? ownId}
+                  loading={<Skeleton className="rounded-full" />}
+                  component={(user) => (
+                    <Avatar>
+                      <AvatarImage src={user.Avatar} />
+                      <AvatarFallback>
+                        {user.Display.slice(2, 0).toUpperCase()}
+                      </AvatarFallback>
+                    </Avatar>
+                  )}
+                />
+                <div className="max-w-full max-h-5 h-5 text-xs truncate">
+                  <Text value={replyMessage.Content} />
+                </div>
+              </>
+            ) : (
+              <>
+                <Skeleton className="w-5 h-5 aspect-square rounded-full" />
+                <Skeleton className="w-full h-5" />
+              </>
+            )}
+            <Button
+              onClick={() => {
+                setReplyTo(undefined);
+              }}
+              className="w-5 h-5 rounded-md! p-0!"
+              size="xs"
+              variant="ghost"
+            >
+              <X
+                color="var(--muted-foreground)"
+                className="opacity-60"
+                size={18}
              />
-              <PopoverContent
-                ref={gifPopoverRef}
-                className="relative min-h-80 max-h-180 min-w-80 max-w-180 overflow-hidden"
-                onTouchMoveCapture={(event) => event.stopPropagation()}
-                onWheelCapture={(event) => event.stopPropagation()}
-                style={{
-                  ...gifPopoverSize,
-                  maxHeight: gifPopoverSize?.height,
-                }}
-              >
-                <div
-                  className="absolute left-0 top-0 z-10 h-4 w-4 cursor-nwse-resize"
-                  onPointerDown={handleGifPopoverResizeStart}
-                />
-                <GifPicker
-                  resizeHeight={gifPopoverSize?.height}
-                  resizeWidth={gifPopoverSize?.width}
-                  onSelect={(url) => {
-                    void handleSubmit(url, true);
-                    setGifPopoverOpen(false);
-                  }}
-                />
-              </PopoverContent>
-            </Popover>
+            </Button>
          </div>
        </div>
-      </CardHeader>
-    </Card>
+      )}
+      <Card
+        ref={inputBoxRef}
+        className={cn(
+          "ring-0! rounded-none border-b-0 border-t border-x border-input/70 pt-0 pb-[env(safe-area-inset-bottom)] mx-2",
+          isMobile ? "border-0 border-x-0! w-full mx-0 px-2" : "rounded-t-xl",
+        )}
+      >
+        <CardHeader className="relative p-0 flex flex-col">
+          <Input
+            className="w-full"
+            paddingY="13px"
+            paddingX="13px"
+            placeholder="Send a message..."
+            value={value}
+            setValue={setValue}
+            onSubmit={handleSubmit}
+            invertEnterBehavior={invertEnterBehavior}
+          />
+          <div className="w-full flex justify-between gap-1 p-1 pt-0">
+            <div className="flex gap-1">
+              <Button className="w-9 h-9 p-0" variant="ghost">
+                <Plus size={20} />
+              </Button>
+              <div className="w-auto flex text-red-500">
+                <p>Files list</p>
+              </div>
+            </div>
+            <div className="flex gap-1">
+              <Button className="w-9 h-9 p-0" variant="ghost">
+                <Laugh size={20} />
+              </Button>
+              <Popover open={gifPopoverOpen} onOpenChange={setGifPopoverOpen}>
+                <PopoverTrigger
+                  render={
+                    <Button className="w-9 h-9 p-0" variant="ghost">
+                      <FileVideo size={20} />
+                    </Button>
+                  }
+                />
+                <PopoverContent
+                  ref={gifPopoverRef}
+                  className="relative min-h-80 max-h-180 min-w-80 max-w-180 overflow-hidden"
+                  onTouchMoveCapture={(event) => event.stopPropagation()}
+                  onWheelCapture={(event) => event.stopPropagation()}
+                  style={{
+                    ...gifPopoverSize,
+                    maxHeight: gifPopoverSize?.height,
+                  }}
+                >
+                  <div
+                    className="absolute left-0 top-0 z-10 h-4 w-4 cursor-nwse-resize"
+                    onPointerDown={handleGifPopoverResizeStart}
+                  />
+                  <GifPicker
+                    resizeHeight={gifPopoverSize?.height}
+                    resizeWidth={gifPopoverSize?.width}
+                    onSelect={(url) => {
+                      void handleSubmit(url, true);
+                      setGifPopoverOpen(false);
+                    }}
+                  />
+                </PopoverContent>
+              </Popover>
+            </div>
+          </div>
+        </CardHeader>
+      </Card>
+    </div>
  );
 }
--- a/packages/chat/src/components/message.tsx
+++ b/packages/chat/src/components/message.tsx
@ -64,6 +64,10 @@ function MessageComponent({
  // Message states
  const { load } = useStorage();
  const { send } = useMTP();
+  const [ownId, setOwnId] = useState(0);
+  useEffect(() => {
+    load("user_id").then(setOwnId);
+  }, [load]);
  const messageStateReadUpdate = useCallback(async () => {
    const readConfirmations = await load("settings.read_confirmations");

@ -84,7 +88,7 @@ function MessageComponent({
    }
  }, [load, message.SendTime, user?.UserId, send]);
  useEffect(() => {
-    if (message.SentBySelf) return;
+    if (message.SenderId === ownId || ownId === 0) return;

    let cancelled = false;

@ -113,7 +117,13 @@ function MessageComponent({
    return () => {
      cancelled = true;
    };
-  }, [message.MessageState, load, messageStateReadUpdate, message.SentBySelf]);
+  }, [
+    message.MessageState,
+    load,
+    messageStateReadUpdate,
+    message.SenderId,
+    ownId,
+  ]);

  // Check if message is a url
  const [isValidURL, setIsValidURL] = useState(false);
@ -133,97 +143,93 @@ function MessageComponent({
      // pt-3 is to get a gap between messages
      className={`${grouped ? "" : "pt-3"} w-full flex justify-start transition-opacity duration-150 ${opacityClass}`}
    >
-      {user ? (
-        <div
-          className={cn(
-            "group hover:bg-muted/50 select-text! relative justify-start flex gap-1 items-center w-full px-2 whitespace-pre-wrap break-all",
-            {
-              "bg-(--destructive)/10 text-destructive-foreground hover:bg-(--destructive)/15":
-                actuallyFailed,
-            },
-          )}
+      {user && message.Content ? (
+        <MessageContextMenu
+          content={message.Content}
+          messageId={message.SendTime}
        >
-          <>
-            {grouped ? (
-              <p className="w-9 text-xs group-hover:visible invisible text-muted-foreground">
-                {new Date(message.SendTime).toLocaleString([], {
-                  hour: "2-digit",
-                  minute: "2-digit",
-                })}
-              </p>
-            ) : (
-              <Avatar className="mr-1 mb-auto mt-1 w-10">
-                <AvatarImage src={user.Avatar} />
-                <AvatarFallback>
-                  {user.Display.slice(0, 2).toUpperCase()}
-                </AvatarFallback>
-              </Avatar>
+          <div
+            className={cn(
+              "group hover:bg-muted/50 select-text! relative justify-start flex gap-1 items-center w-full px-2 whitespace-pre-wrap break-all",
+              {
+                "bg-(--destructive)/10 text-destructive-foreground hover:bg-(--destructive)/15":
+                  actuallyFailed,
+              },
            )}
-            <div className="flex flex-col group">
-              <Card className="absolute right-4 -top-3 opacity-0 group-hover:opacity-100 flex flex-row justify-end gap-0! z-10 p-0! shadow-lg rounded-lg!">
-                {[0, 1, 2].map((item) => (
-                  <Button key={item} variant="ghost" className="h-8 w-8">
-                    {item === 0 && "👍"}
-                    {item === 1 && "🔥"}
-                    {item === 2 && "✅"}
-                  </Button>
-                ))}
-                <Separator orientation="vertical" className="my-1" />
-                <Button variant="ghost" className="h-8 w-8">
-                  <Laugh />
-                </Button>
-                <Button variant="ghost" className="h-8 w-8">
-                  <Reply />
-                </Button>
-                <Button variant="ghost" className="h-8 w-8">
-                  <Forward />
-                </Button>
-              </Card>
-              {!grouped && (
-                <div className="flex items-center gap-1">
-                  <p className="font-medium">{user.Display}</p>
-                  <p className="text-xs text-muted-foreground">
-                    {new Date(message.SendTime).toLocaleString([], {
-                      hour: "2-digit",
-                      minute: "2-digit",
-                    })}
-                  </p>
-                  <div className="flex items-center justify-start gap-1">
-                    {message.MessageState === "read" ? (
-                      <Check size={12} color="var(--primary-foreground-alt)" />
-                    ) : message.MessageState === "received" ? (
-                      <Check size={12} color="var(--muted-foreground)" />
-                    ) : message.MessageState === "sent" ? (
-                      <RefreshCw size={12} color="var(--muted-foreground)" />
-                    ) : message.MessageState === "sending" ? (
-                      <Ellipse size={12} color="var(--muted-foreground)" />
-                    ) : null}
-                    {actuallyFailed && (
-                      <AlertTriangle color="var(--destructive)" size={12} />
-                    )}
-                  </div>
-                </div>
-              )}
-
-              {message.Content ? (
-                <MessageContextMenu
-                  content={message.Content}
-                  messageId={message.SendTime}
-                >
-                  {isValidURL ? (
-                    <Media link={message.Content} />
-                  ) : (
-                    <Text value={message.Content} />
-                  )}
-                </MessageContextMenu>
+          >
+            <>
+              {grouped ? (
+                <p className="w-9 text-xs group-hover:visible invisible text-muted-foreground">
+                  {new Date(message.SendTime).toLocaleString([], {
+                    hour: "2-digit",
+                    minute: "2-digit",
+                  })}
+                </p>
              ) : (
-                <Skeleton
-                  className={`w-25 h-5 ${grouped ? "my-1" : "mb-1"} rounded-sm!`}
-                />
+                <Avatar className="mr-1 mb-auto mt-1 w-10">
+                  <AvatarImage src={user.Avatar} />
+                  <AvatarFallback>
+                    {user.Display.slice(0, 2).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
              )}
-            </div>
-          </>
-        </div>
+              <div className="flex flex-col group">
+                <Card className="absolute right-4 -top-3 opacity-0 group-hover:opacity-100 flex flex-row justify-end gap-0! z-10 p-0! shadow-lg rounded-lg!">
+                  {[0, 1, 2].map((item) => (
+                    <Button key={item} variant="ghost" className="h-8 w-8">
+                      {item === 0 && "👍"}
+                      {item === 1 && "🔥"}
+                      {item === 2 && "✅"}
+                    </Button>
+                  ))}
+                  <Separator orientation="vertical" className="my-1" />
+                  <Button variant="ghost" className="h-8 w-8">
+                    <Laugh />
+                  </Button>
+                  <Button variant="ghost" className="h-8 w-8">
+                    <Reply />
+                  </Button>
+                  <Button variant="ghost" className="h-8 w-8">
+                    <Forward />
+                  </Button>
+                </Card>
+                {!grouped && (
+                  <div className="flex items-center gap-1">
+                    <p className="font-medium">{user.Display}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {new Date(message.SendTime).toLocaleString([], {
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      })}
+                    </p>
+                    <div className="flex items-center justify-start gap-1">
+                      {message.MessageState === "read" ? (
+                        <Check
+                          size={12}
+                          color="var(--primary-foreground-alt)"
+                        />
+                      ) : message.MessageState === "received" ? (
+                        <Check size={12} color="var(--muted-foreground)" />
+                      ) : message.MessageState === "sent" ? (
+                        <RefreshCw size={12} color="var(--muted-foreground)" />
+                      ) : message.MessageState === "sending" ? (
+                        <Ellipse size={12} color="var(--muted-foreground)" />
+                      ) : null}
+                      {actuallyFailed && (
+                        <AlertTriangle color="var(--destructive)" size={12} />
+                      )}
+                    </div>
+                  </div>
+                )}
+                {isValidURL ? (
+                  <Media link={message.Content} />
+                ) : (
+                  <Text value={message.Content} />
+                )}
+              </div>
+            </>
+          </div>
+        </MessageContextMenu>
      ) : (
        <Skeleton className="h-10 w-30" />
      )}
@ -235,7 +241,7 @@ export default React.memo(MessageComponent, (prev, next) => {
  return (
    prev.message.SendTime === next.message.SendTime &&
    prev.message.Content === next.message.Content &&
-    prev.message.SentBySelf === next.message.SentBySelf &&
+    prev.message.SenderId === next.message.SenderId &&
    prev.message.MessageState === next.message.MessageState &&
    prev.message.failed === next.message.failed &&
    prev.message.decryptionFailed === next.message.decryptionFailed &&
--- a/packages/chat/src/components/messageContextMenu.tsx
+++ b/packages/chat/src/components/messageContextMenu.tsx
@ -19,6 +19,7 @@ import {
 import { Pin, Clipboard, Pen, Reply, Forward, Trash } from "lucide-react";
 import { useMemo, useState } from "react";
 import type { ReactElement, ReactNode } from "react";
+import { useChat } from "../context";

 async function copyText(text: string) {
  await navigator.clipboard.writeText(text);
@ -146,6 +147,8 @@ function MessageMenuContent({
  const { Content, Group, Item, Separator, Sub, SubContent, SubTrigger } =
    components;

+  const { setReplyTo } = useChat();
+
  return (
    <Content>
      <Group>
@ -172,7 +175,12 @@ function MessageMenuContent({
        <Item disabled className="flex justify-between">
          <p>Edit Message</p> <Pen />
        </Item>
-        <Item disabled className="flex justify-between">
+        <Item
+          className="flex justify-between"
+          onClick={() => {
+            setReplyTo(messageId);
+          }}
+        >
          <p>Reply</p> <Reply />
        </Item>
        <Item disabled className="flex justify-between">