(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">
--- a/packages/chat/src/context.tsx
+++ b/packages/chat/src/context.tsx
@ -24,7 +24,7 @@ import {
 } from "@tensamin/crypto/chatSecret";
 import { useStorage } from "@tensamin/storage/context";
 import { useMTP } from "@tensamin/mtp";
-import { log } from "@tensamin/shared/log";
+import { log, toast } from "@tensamin/shared/log";
 import { useSession } from "@tensamin/storage/session";
 import { useUser } from "@tensamin/user/context";

@ -96,6 +96,44 @@ function protocolBytes(bytes: Uint8Array): Uint8Array<ArrayBuffer> {
  return new Uint8Array(bytes);
 }

+type SendMessageGet = (
+  type: "MessageGet",
+  data: { SendTime: number },
+) => Promise<{ data: RawMessage }>;
+
+type GetChatSecret = (userId: number) => Promise<Uint8Array | null>;
+
+export async function fetchReplyMessage({
+  replyTo,
+  send,
+  getChatSecret,
+}: {
+  replyTo: number;
+  ownId: number;
+  chatUserId: number;
+  send: SendMessageGet;
+  getChatSecret: GetChatSecret;
+}) {
+  const value = await send("MessageGet", {
+    SendTime: replyTo,
+  });
+  const chatSecret = await getChatSecret(value.data.SenderId);
+
+  if (!chatSecret) {
+    throw new Error("Missing chat secret");
+  }
+
+  const decryptedContent = await decryptChatText(
+    chatSecret,
+    value.data.Content,
+  );
+
+  return {
+    ...value.data,
+    Content: decryptedContent,
+  };
+}
+
 export default function Provider({ children }: { children: ReactNode }) {
  const { load } = useStorage();
  const { send, subscribePush } = useMTP();
@ -343,13 +381,17 @@ export default function Provider({ children }: { children: ReactNode }) {
    [currentChatSecret, send, userIdValue],
  );

+  const [ownId, setOwnId] = useState(0);
+  useEffect(() => {
+    load("user_id").then(setOwnId);
+  }, [load]);
  const addLiveMessage = useCallback(
    (message: RawMessage) => {
      const localId =
        globalThis.crypto?.randomUUID?.() ??
        `${Date.now()}-${Math.random().toString(36).slice(2)}`;

-      if (!message.SentBySelf) {
+      if (message.SenderId !== ownId) {
        moveUserIdToTop(userIdValue);
      }

@ -374,7 +416,7 @@ export default function Provider({ children }: { children: ReactNode }) {
        },
      };
    },
-    [userIdValue, moveUserIdToTop],
+    [userIdValue, moveUserIdToTop, ownId],
  );

  const clearLiveMessages = useCallback(() => {
@ -475,6 +517,9 @@ export default function Provider({ children }: { children: ReactNode }) {
    });
  }, [addLiveMessage, currentChatSecret, send, subscribePush, userIdValue]);

+  // Replys
+  const [replyTo, setReplyTo] = useState<number | undefined>(undefined);
+
  return (
    <QueryClientProvider client={queryClient}>
      <context.Provider
@ -489,6 +534,8 @@ export default function Provider({ children }: { children: ReactNode }) {
          inputBoxRef,
          error,
          errorDescription,
+          replyTo,
+          setReplyTo,
        }}
      >
        {children}
@ -510,6 +557,8 @@ type contextType = {
  inputBoxRef: React.RefObject<HTMLDivElement | null>;
  error: string;
  errorDescription: string;
+  replyTo: number | undefined;
+  setReplyTo: (value: number | undefined) => void;
 };

 export function useChat(): contextType {
@ -519,3 +568,66 @@ export function useChat(): contextType {
  }
  return ctx;
 }
+
+export function useReplyMessage() {
+  const { send } = useMTP();
+  const { load } = useStorage();
+  const { replyTo, setReplyTo, getChatSecret, userId } = useChat();
+  const [ownId, setOwnId] = useState(0);
+  const [replyMessage, setReplyMessage] = useState<RawMessage | undefined>();
+
+  const handleReplyError = useCallback(
+    (err: unknown) => {
+      log(1, "chat", "red", "Failed to get reply message", err);
+      toast("error", "Failed to get reply message", String(err));
+      setReplyTo(undefined);
+      setReplyMessage(undefined);
+    },
+    [setReplyTo],
+  );
+
+  useEffect(() => {
+    void load("user_id").then((value) => {
+      setOwnId(Number(value));
+    });
+  }, [load]);
+
+  useEffect(() => {
+    if (!replyTo || !ownId) {
+      setReplyMessage(undefined);
+      return;
+    }
+
+    let active = true;
+    setReplyMessage(undefined);
+
+    void fetchReplyMessage({
+      replyTo,
+      ownId,
+      chatUserId: userId,
+      send,
+      getChatSecret,
+    })
+      .then((message) => {
+        if (active) {
+          setReplyMessage(message);
+        }
+      })
+      .catch((err) => {
+        if (active) {
+          handleReplyError(err);
+        }
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [replyTo, ownId, userId, send, getChatSecret, handleReplyError]);
+
+  return {
+    ownId,
+    replyTo,
+    replyMessage,
+    replyUserId: replyMessage?.SenderId,
+  };
+}
--- a/packages/chat/src/screen.tsx
+++ b/packages/chat/src/screen.tsx
@ -1,9 +1,6 @@
 import * as React from "react";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { failedUser } from "@tensamin/shared/data";
-import { useStorage } from "@tensamin/storage/context";
-import { useUser, type User } from "@tensamin/user/context";

 import InputComponent from "./components/input";
 import Message from "./components/message";
@ -15,6 +12,8 @@ import {
  type LiveMessage,
  type RawMessage,
 } from "./values";
+import Wrapper from "@tensamin/user/wrapper";
+import { Skeleton } from "@tensamin/ui";

 type MessageChunk = {
  key: string;
@ -83,9 +82,6 @@ export default function Screen() {
    error,
    errorDescription,
  } = useChat();
-  const { get: getUser } = useUser();
-  const { load } = useStorage();
-
  const scrollRef = React.useRef<HTMLDivElement | null>(null);
  const topSentinelRef = React.useRef<HTMLDivElement | null>(null);
  const didInitialScrollRef = React.useRef(false);
@ -97,9 +93,6 @@ export default function Screen() {
  const isFetchingNextPageRef = React.useRef(false);
  const fetchNextPageRef = React.useRef<(() => void) | null>(null);

-  const [messageUsers, setMessageUsers] = React.useState<
-    Record<string, User | undefined>
-  >({});
  const [lastLiveMessageCount, setLastLiveMessageCount] = React.useState(0);
  const [didInitialScroll, setDidInitialScroll] = React.useState(false);
  const [viewportHeight, setViewportHeight] = React.useState(0);
@ -144,41 +137,6 @@ export default function Screen() {
    setLastLiveMessageCount(0);
  }, [clearLiveMessages, userId]);

-  React.useEffect(() => {
-    if (!hasValidChatUser) {
-      setMessageUsers({});
-      return;
-    }
-
-    let active = true;
-
-    const loadMessageUser = async (
-      key: string,
-      resolveUserId: () => Promise<number>,
-    ) => {
-      try {
-        const resolvedUserId = await resolveUserId();
-        const value = await getUser(resolvedUserId);
-
-        if (active) {
-          setMessageUsers((prev) => ({ ...prev, [key]: value }));
-        }
-      } catch {
-        if (active) {
-          setMessageUsers((prev) => ({ ...prev, [key]: failedUser }));
-        }
-      }
-    };
-
-    setMessageUsers({});
-    void loadMessageUser("peer", async () => userId);
-    void loadMessageUser("own", async () => Number(await load("user_id")));
-
-    return () => {
-      active = false;
-    };
-  }, [getUser, hasValidChatUser, load, userId]);
-
  const historicalMessages = React.useMemo(() => {
    const pages = messagesQuery.data?.pages ?? [];
    const seenSendTimes = new Set<number>();
@ -559,20 +517,22 @@ export default function Screen() {
                        const lastMessage = messages[messageIndex - 1];
                        const isGrouped =
                          lastMessage &&
-                          lastMessage.SentBySelf === message.SentBySelf &&
+                          lastMessage.SenderId === message.SenderId &&
                          Math.round(lastMessage.SendTime / 10000) ===
                            Math.round(message.SendTime / 10000);

                        return (
-                          <Message
-                            key={getMessageRenderKey(message)}
-                            grouped={isGrouped}
-                            message={message}
-                            user={
-                              message.SentBySelf
-                                ? (messageUsers.own ?? null)
-                                : (messageUsers.peer ?? null)
-                            }
+                          <Wrapper
+                            userId={message.SenderId}
+                            loading={<Skeleton className="w-30 h-5" />}
+                            component={(user) => (
+                              <Message
+                                key={getMessageRenderKey(message)}
+                                grouped={isGrouped}
+                                message={message}
+                                user={user}
+                              />
+                            )}
                          />
                        );
                      })}
--- a/packages/notifications/src/context.tsx
+++ b/packages/notifications/src/context.tsx
@ -61,7 +61,6 @@ export default function Provider(props: { children: React.ReactNode }) {
                ...data.Message,
                Content: content ?? "Failed to decrypt message",
                decryptionFailed: content === null,
-                SentBySelf: false,
              });
              return;
            }
--- a/packages/shared/src/data.ts
+++ b/packages/shared/src/data.ts
@ -68,13 +68,14 @@ const callSecretEnvelopeRequest = z.object({

 export const Message = z.object({
  NotEncrypted: z.boolean().optional(),
-  SentBySelf: z.boolean().optional(),
+  SenderId: z.number(),
  SendTime: z.number(),
  Content: z.base64(),
  Files: z.array(fileFromMessage).optional(),
  Tint: z.string().length(7).startsWith("#").optional(),
  Avatar: z.boolean().optional(),
  Display: z.boolean().optional(),
+  ReplyId: z.number().optional(),
  MessageState: z
    .enum(["read", "received", "sent", "sending", "awaiting"]) // awaiting for 'internal' use
    .default("received"),
@ -201,6 +202,12 @@ export const mtp = {
      Message,
    }),
  },
+  MessageGet: {
+    request: z.object({
+      SendTime: z.number(),
+    }),
+    response: Message,
+  },
  MessagesGet: {
    request: z.object({
      UserId: z.number(),
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/type-maps.yaml
+++ b/type-maps.yaml
@ -71,6 +71,7 @@ type_maps:
      MessageLive: 59
      MessageOtherIota: 60
      MessageChunk: 61
+      MessageGet: 143
      MessagesGet: 62
      PushNotification: 63
      ReadNotification: 64