(feat): add replys

(feat): move to SenderId
(feat): other chat improvements

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 { Plus, Laugh, FileVideo, Forward, X } from "lucide-react";
-import { useChat } from "../context";
+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 gifPopoverRef = useRef<HTMLDivElement>(null);
-  const [gifPopoverOpen, setGifPopoverOpen] = React.useState(false);
+  const [gifPopoverOpen, setGifPopoverOpen] = useState(false);
-  const [gifPopoverSize, setGifPopoverSize] = React.useState<{
+  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(
+    const encryptedContent = await encryptChatText(
-      (err) => {
+      chatSecret,
-        toast("error", "Failed to encrypt message", String(err));
+      currentValue,
-        reference.setFailed(true);
+    ).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
+    <div className="flex flex-col">
-      ref={inputBoxRef}
+      {replyTo !== undefined && (
-      className={cn(
+        <div className="self-center rounded-t-lg bg-background border-t border-x flex items-center justify-start w-[90%] p-1">
-        "ring-0! rounded-none border-b-0 border-t border-x border-input/70 pt-0 pb-[env(safe-area-inset-bottom)] mx-2",
+          <div className="flex gap-1 w-full items-center">
-        isMobile ? "border-0 border-x-0! w-full mx-0 px-2" : "rounded-t-xl",
+            <Forward
-      )}
+              color="var(--muted-foreground)"
-    >
+              className="opacity-60"
-      <CardHeader className="relative p-0 flex flex-col">
+              size={18}
-        <Input
+            />
-          className="w-full"
+            {replyMessage ? (
-          paddingY="13px"
+              <>
-          paddingX="13px"
+                <Wrapper
-          placeholder="Send a message..."
+                  userId={replyUserId ?? ownId}
-          value={value}
+                  loading={<Skeleton className="rounded-full" />}
-          setValue={setValue}
+                  component={(user) => (
-          onSubmit={handleSubmit}
+                    <Avatar>
-          invertEnterBehavior={invertEnterBehavior}
+                      <AvatarImage src={user.Avatar} />
-        />
+                      <AvatarFallback>
-        <div className="w-full flex justify-between gap-1 p-1 pt-0">
+                        {user.Display.slice(2, 0).toUpperCase()}
-          <div className="flex gap-1">
+                      </AvatarFallback>
-            <Button className="w-9 h-9 p-0" variant="ghost">
+                    </Avatar>
-              <Plus size={20} />
+                  )}
-            </Button>
+                />
-            <div className="w-auto flex text-red-500">
+                <div className="max-w-full max-h-5 h-5 text-xs truncate">
-              <p>Files list</p>
+                  <Text value={replyMessage.Content} />
-            </div>
+                </div>
-          </div>
+              </>
-          <div className="flex gap-1">
+            ) : (
-            <Button className="w-9 h-9 p-0" variant="ghost">
+              <>
-              <Laugh size={20} />
+                <Skeleton className="w-5 h-5 aspect-square rounded-full" />
-            </Button>
+                <Skeleton className="w-full h-5" />
-            <Popover open={gifPopoverOpen} onOpenChange={setGifPopoverOpen}>
+              </>
-              <PopoverTrigger
+            )}
-                render={
+            <Button
-                  <Button className="w-9 h-9 p-0" variant="ghost">
+              onClick={() => {
-                    <FileVideo size={20} />
+                setReplyTo(undefined);
-                  </Button>
+              }}
-                }
+              className="w-5 h-5 rounded-md! p-0!"
+              size="xs"
+              variant="ghost"
+            >
+              <X
+                color="var(--muted-foreground)"
+                className="opacity-60"
+                size={18}
               />
-              <PopoverContent
+            </Button>
-                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>
+      <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>
   );
 }

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 ? (
+      {user && message.Content ? (
-        <div
+        <MessageContextMenu
-          className={cn(
+          content={message.Content}
-            "group hover:bg-muted/50 select-text! relative justify-start flex gap-1 items-center w-full px-2 whitespace-pre-wrap break-all",
+          messageId={message.SendTime}
-            {
-              "bg-(--destructive)/10 text-destructive-foreground hover:bg-(--destructive)/15":
-                actuallyFailed,
-            },
-          )}
         >
-          <>
+          <div
-            {grouped ? (
+            className={cn(
-              <p className="w-9 text-xs group-hover:visible invisible text-muted-foreground">
+              "group hover:bg-muted/50 select-text! relative justify-start flex gap-1 items-center w-full px-2 whitespace-pre-wrap break-all",
-                {new Date(message.SendTime).toLocaleString([], {
+              {
-                  hour: "2-digit",
+                "bg-(--destructive)/10 text-destructive-foreground hover:bg-(--destructive)/15":
-                  minute: "2-digit",
+                  actuallyFailed,
-                })}
+              },
-              </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="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) => (
+              {grouped ? (
-                  <Button key={item} variant="ghost" className="h-8 w-8">
+                <p className="w-9 text-xs group-hover:visible invisible text-muted-foreground">
-                    {item === 0 && "👍"}
+                  {new Date(message.SendTime).toLocaleString([], {
-                    {item === 1 && "🔥"}
+                    hour: "2-digit",
-                    {item === 2 && "✅"}
+                    minute: "2-digit",
-                  </Button>
+                  })}
-                ))}
+                </p>
-                <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>
               ) : (
-                <Skeleton
+                <Avatar className="mr-1 mb-auto mt-1 w-10">
-                  className={`w-25 h-5 ${grouped ? "my-1" : "mb-1"} rounded-sm!`}
+                  <AvatarImage src={user.Avatar} />
-                />
+                  <AvatarFallback>
+                    {user.Display.slice(0, 2).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
               )}
-            </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!">
-        </div>
+                  {[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 &&

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">

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,
+  };
+}

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
+                          <Wrapper
-                            key={getMessageRenderKey(message)}
+                            userId={message.SenderId}
-                            grouped={isGrouped}
+                            loading={<Skeleton className="w-30 h-5" />}
-                            message={message}
+                            component={(user) => (
-                            user={
+                              <Message
-                              message.SentBySelf
+                                key={getMessageRenderKey(message)}
-                                ? (messageUsers.own ?? null)
+                                grouped={isGrouped}
-                                : (messageUsers.peer ?? null)
+                                message={message}
-                            }
+                                user={user}
+                              />
+                            )}
                           />
                         );
                       })}

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;
             }

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(),

type-maps.yaml

@@ -71,6 +71,7 @@ type_maps:
       MessageLive: 59
       MessageOtherIota: 60
       MessageChunk: 61
+      MessageGet: 143
       MessagesGet: 62
       PushNotification: 63
       ReadNotification: 64