(feat): move decryption to getMessages instead of letting it get handled by the message component
This commit is contained in:
parent
2f0072f422
commit
de63b554c1
4 changed files with 31 additions and 230 deletions
|
|
@ -8,7 +8,6 @@ import { Plus, Laugh, Clapperboard } from "lucide-react";
|
|||
import { useChat } from "../context";
|
||||
import { useTTP } from "@tensamin/ttp";
|
||||
import { log, toast } from "@tensamin/shared/log";
|
||||
import Message from "./message";
|
||||
import { cn, useIsMobile } from "@tensamin/ui";
|
||||
import { encryptText } from "@tensamin/crypto/worker";
|
||||
|
||||
|
|
@ -20,7 +19,6 @@ export default function InputComponent({
|
|||
setValue: (value: string) => void;
|
||||
}) {
|
||||
const [invertEnterBehavior, setInvertEnterBehavior] = React.useState(false);
|
||||
const measurementRef = React.useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const { send } = useTTP();
|
||||
const { addLiveMessage, sharedSecret, userId } = useChat();
|
||||
|
|
@ -32,21 +30,6 @@ export default function InputComponent({
|
|||
});
|
||||
}, [load]);
|
||||
|
||||
const getRenderedHeight = React.useCallback(() => {
|
||||
const measuredHeight =
|
||||
measurementRef.current?.getBoundingClientRect().height;
|
||||
|
||||
if (
|
||||
typeof measuredHeight === "number" &&
|
||||
Number.isFinite(measuredHeight) &&
|
||||
measuredHeight > 0
|
||||
) {
|
||||
return Math.ceil(measuredHeight);
|
||||
}
|
||||
|
||||
return 40;
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Executes handleSubmit.
|
||||
* @param none This function has no parameters.
|
||||
|
|
@ -68,10 +51,8 @@ export default function InputComponent({
|
|||
return;
|
||||
}
|
||||
|
||||
const height = getRenderedHeight();
|
||||
|
||||
const reference = addLiveMessage({
|
||||
height,
|
||||
height: 0,
|
||||
not_encrypted: true,
|
||||
send_time: time,
|
||||
content: currentValue,
|
||||
|
|
@ -82,7 +63,7 @@ export default function InputComponent({
|
|||
const encryptedContext = await encryptText(sharedSecret, currentValue);
|
||||
|
||||
send("message_send", {
|
||||
height,
|
||||
height: 0,
|
||||
content: encryptedContext,
|
||||
receiver_id: userId,
|
||||
send_time: time,
|
||||
|
|
@ -112,24 +93,6 @@ export default function InputComponent({
|
|||
)}
|
||||
>
|
||||
<CardHeader className="relative p-0 flex flex-col">
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute left-0 top-0 w-full px-2.5 opacity-0"
|
||||
style={{ visibility: "hidden" }}
|
||||
>
|
||||
<Message
|
||||
measureRef={measurementRef}
|
||||
message={{
|
||||
height: 0,
|
||||
not_encrypted: true,
|
||||
send_time: 0,
|
||||
content: value,
|
||||
sent_by_self: true,
|
||||
message_state: "awaiting",
|
||||
}}
|
||||
notEncrypted
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
placeholder="Send a message..."
|
||||
value={value}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
import { useCrypto } from "@tensamin/crypto/context";
|
||||
import * as React from "react";
|
||||
import { useChat } from "../context";
|
||||
import type { RawMessage } from "../values";
|
||||
import { log } from "@tensamin/shared/log";
|
||||
import Text from "@tensamin/markdown/text";
|
||||
import { AlertTriangle, Clock } from "lucide-react";
|
||||
|
||||
|
|
@ -14,92 +11,18 @@ import {
|
|||
ContextMenuItem,
|
||||
ContextMenuTrigger,
|
||||
} from "@tensamin/ui";
|
||||
import { decryptText } from "@tensamin/crypto/worker";
|
||||
|
||||
function generateFixedLoadingSize(size: number, height: number) {
|
||||
return size * 3 - (height / 20) * 11;
|
||||
}
|
||||
|
||||
function getSafeMessageHeight(height: number | undefined) {
|
||||
if (typeof height === "number" && Number.isFinite(height) && height > 0) {
|
||||
return Math.ceil(height);
|
||||
}
|
||||
|
||||
return 40;
|
||||
}
|
||||
|
||||
/**
|
||||
* Executes Message.
|
||||
* @param props Parameter props.
|
||||
* @returns unknown.
|
||||
*/
|
||||
function MessageComponent({
|
||||
message,
|
||||
notEncrypted,
|
||||
measureRef,
|
||||
}: {
|
||||
message: RawMessage & {
|
||||
failed?: boolean;
|
||||
};
|
||||
notEncrypted?: boolean;
|
||||
measureRef?: React.Ref<HTMLDivElement>;
|
||||
}) {
|
||||
const { sharedSecret } = useChat();
|
||||
const { decrypt } = useCrypto();
|
||||
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
const [decodedContent, setDecodedContent] = React.useState("");
|
||||
const [isReady, setIsReady] = React.useState(false);
|
||||
const safeMessageHeight = getSafeMessageHeight(message.height);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (notEncrypted) {
|
||||
setDecodedContent(message.content);
|
||||
setIsReady(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const content = message.content;
|
||||
const secret = sharedSecret;
|
||||
let active = true;
|
||||
|
||||
if (!secret) {
|
||||
setIsReady(false);
|
||||
return;
|
||||
}
|
||||
|
||||
decryptText(secret, content)
|
||||
.then((value) => {
|
||||
if (!active) {
|
||||
return;
|
||||
}
|
||||
|
||||
setDecodedContent(value);
|
||||
setIsReady(true);
|
||||
})
|
||||
.catch((e) => {
|
||||
if (!active) {
|
||||
return;
|
||||
}
|
||||
|
||||
log(0, "Chat", "red", "Failed to decrypt message", e, {
|
||||
content,
|
||||
secret,
|
||||
});
|
||||
|
||||
setDecodedContent("Failed to decrypt");
|
||||
setIsReady(true);
|
||||
});
|
||||
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [decrypt, message.content, notEncrypted, sharedSecret]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={measureRef}
|
||||
className={`w-full flex justify-start transition-opacity duration-150 ${(message.failed || message.message_state === "awaiting") && "opacity-50"}`}
|
||||
>
|
||||
<ContextMenu>
|
||||
|
|
@ -112,7 +35,7 @@ function MessageComponent({
|
|||
? "bg-destructive/75 text-destructive-foreground"
|
||||
: "bg-primary text-primary-foreground"
|
||||
: "bg-muted"
|
||||
} ${!isReady && "animate-pulse"} ${isMobile && "select-none"}`}
|
||||
} ${isMobile && "select-none"}`}
|
||||
>
|
||||
{message.failed && message.message_state === "awaiting" && (
|
||||
<Tooltip>
|
||||
|
|
@ -125,26 +48,13 @@ function MessageComponent({
|
|||
{!message.failed && message.message_state === "awaiting" && (
|
||||
<Clock size={17} />
|
||||
)}
|
||||
{isReady ? (
|
||||
<Text value={decodedContent} />
|
||||
) : (
|
||||
<div
|
||||
className="block rounded-sm"
|
||||
style={{
|
||||
width: generateFixedLoadingSize(
|
||||
message.content.length,
|
||||
safeMessageHeight,
|
||||
),
|
||||
minHeight: safeMessageHeight,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Text value={message.content} />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<ContextMenuContent>
|
||||
<ContextMenuItem>
|
||||
<Text value={decodedContent} />
|
||||
<Text value={message.content} />
|
||||
</ContextMenuItem>
|
||||
</ContextMenuContent>
|
||||
</ContextMenu>
|
||||
|
|
@ -154,8 +64,6 @@ function MessageComponent({
|
|||
|
||||
export default React.memo(MessageComponent, (prev, next) => {
|
||||
return (
|
||||
prev.notEncrypted === next.notEncrypted &&
|
||||
prev.measureRef === next.measureRef &&
|
||||
prev.message.send_time === next.message.send_time &&
|
||||
prev.message.content === next.message.content &&
|
||||
prev.message.height === next.message.height &&
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ function updateMessageStateBySendTime<
|
|||
* @returns unknown.
|
||||
*/
|
||||
export default function Provider(props: { children: ReactNode }) {
|
||||
const { getSharedSecret } = useCrypto();
|
||||
const { getSharedSecret, decryptText } = useCrypto();
|
||||
const { get } = useUser();
|
||||
const { load } = useStorage();
|
||||
const { send, subscribePush } = useTTP();
|
||||
|
|
@ -128,7 +128,7 @@ export default function Provider(props: { children: ReactNode }) {
|
|||
};
|
||||
}, [get, getSharedSecret, load, userIdValue]);
|
||||
|
||||
const customGetMessages = useCallback(
|
||||
const getMessages = useCallback(
|
||||
async (amount: number, offset: number) => {
|
||||
const messages = await send("messages_get", {
|
||||
amount,
|
||||
|
|
@ -155,9 +155,20 @@ export default function Provider(props: { children: ReactNode }) {
|
|||
});
|
||||
}
|
||||
|
||||
return sorted;
|
||||
return await Promise.all(
|
||||
sorted.map(async (message) => {
|
||||
try {
|
||||
return {
|
||||
...message,
|
||||
content: await decryptText(currentSharedSecret, message.content),
|
||||
};
|
||||
} catch {
|
||||
return message;
|
||||
}
|
||||
}),
|
||||
);
|
||||
},
|
||||
[send, userIdValue],
|
||||
[send, userIdValue, currentSharedSecret, decryptText],
|
||||
);
|
||||
|
||||
const addLiveMessage = useCallback((message: RawMessage) => {
|
||||
|
|
@ -287,7 +298,7 @@ export default function Provider(props: { children: ReactNode }) {
|
|||
<QueryClientProvider client={queryClient}>
|
||||
<context.Provider
|
||||
value={{
|
||||
getMessages: customGetMessages,
|
||||
getMessages,
|
||||
liveMessages: () => liveMessagesState,
|
||||
addLiveMessage,
|
||||
clearLiveMessages,
|
||||
|
|
|
|||
|
|
@ -7,32 +7,23 @@ import InputComponent from "./components/input";
|
|||
import Message from "./components/message";
|
||||
|
||||
import { PAGE_SIZE } from "./values";
|
||||
import { useLayoutEffect } from "react";
|
||||
import { useIsMobile } from "@tensamin/ui";
|
||||
|
||||
function getDistanceFromBottom(element: HTMLDivElement) {
|
||||
return element.scrollHeight - (element.scrollTop + element.clientHeight);
|
||||
}
|
||||
|
||||
const FALLBACK_MESSAGE_HEIGHT = 40;
|
||||
const MESSAGE_ROW_HEIGHT = 48;
|
||||
const ROW_VERTICAL_PADDING = 8;
|
||||
|
||||
function getSafeMessageHeight(height: number | undefined) {
|
||||
if (typeof height === "number" && Number.isFinite(height) && height > 0) {
|
||||
return Math.ceil(height);
|
||||
}
|
||||
|
||||
return FALLBACK_MESSAGE_HEIGHT;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the chat screen with virtualized history and live message updates.
|
||||
* @returns Chat screen JSX.
|
||||
*/
|
||||
export default function Screen() {
|
||||
const { getMessages, liveMessages, clearLiveMessages, userId } = useChat();
|
||||
const { getMessages, liveMessages, clearLiveMessages, userId, sharedSecret } =
|
||||
useChat();
|
||||
|
||||
const inputBoxRef = React.useRef<HTMLDivElement | null>(null);
|
||||
const scrollRef = React.useRef<HTMLDivElement | null>(null);
|
||||
const isMobile = useIsMobile();
|
||||
const stickyBottomThreshold = isMobile ? 220 : 140;
|
||||
|
|
@ -46,12 +37,13 @@ export default function Screen() {
|
|||
} | null>(null);
|
||||
|
||||
const hasValidChatUser = Number.isSafeInteger(userId) && userId > 0;
|
||||
const hasSharedSecret = sharedSecret.length > 0;
|
||||
|
||||
const messagesQuery = useInfiniteQuery({
|
||||
queryKey: ["chat-messages", String(userId)],
|
||||
queryKey: ["chat-messages", String(userId), hasSharedSecret],
|
||||
initialPageParam: 0,
|
||||
queryFn: ({ pageParam }) => getMessages(PAGE_SIZE, Number(pageParam)),
|
||||
enabled: hasValidChatUser,
|
||||
enabled: hasValidChatUser && hasSharedSecret,
|
||||
getNextPageParam: (lastPage, allPages) => {
|
||||
if (lastPage.length < PAGE_SIZE) {
|
||||
return undefined;
|
||||
|
|
@ -105,10 +97,7 @@ export default function Screen() {
|
|||
count: messages.length,
|
||||
getScrollElement: () => scrollRef.current,
|
||||
getItemKey,
|
||||
estimateSize: (index) => {
|
||||
const message = messages[index];
|
||||
return getSafeMessageHeight(message?.height) + ROW_VERTICAL_PADDING;
|
||||
},
|
||||
estimateSize: () => MESSAGE_ROW_HEIGHT + ROW_VERTICAL_PADDING,
|
||||
overscan: isMobile ? 10 : 6,
|
||||
});
|
||||
|
||||
|
|
@ -195,72 +184,8 @@ export default function Screen() {
|
|||
void onScroll();
|
||||
}, [onScroll]);
|
||||
|
||||
/**
|
||||
* Input box height changes & state
|
||||
*/
|
||||
const [value, setValue] = React.useState("");
|
||||
|
||||
const updateMaxHeight = React.useCallback(() => {
|
||||
const el = inputBoxRef.current;
|
||||
const host = scrollRef.current;
|
||||
if (!host || !el || typeof window === "undefined") return;
|
||||
|
||||
const shouldStickToBottom =
|
||||
getDistanceFromBottom(host) <= stickyBottomThreshold;
|
||||
|
||||
const viewportHeight = Math.max(
|
||||
window.innerHeight,
|
||||
window.visualViewport?.height ?? 0,
|
||||
);
|
||||
const inputHeight = el.scrollHeight + 56;
|
||||
|
||||
host.style.maxHeight = `calc(${viewportHeight}px - ${inputHeight - 62}px - env(safe-area-inset-bottom) - env(safe-area-inset-top))`;
|
||||
|
||||
if (shouldStickToBottom) {
|
||||
requestAnimationFrame(() => {
|
||||
if (!scrollRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
||||
});
|
||||
}
|
||||
}, [stickyBottomThreshold]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
updateMaxHeight();
|
||||
}, [value, updateMaxHeight]);
|
||||
|
||||
React.useEffect(() => {
|
||||
updateMaxHeight();
|
||||
|
||||
if (typeof window === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
const handleViewportChange = () => {
|
||||
updateMaxHeight();
|
||||
};
|
||||
|
||||
const viewport = window.visualViewport;
|
||||
viewport?.addEventListener("resize", handleViewportChange);
|
||||
window.addEventListener("resize", handleViewportChange);
|
||||
|
||||
const input = inputBoxRef.current;
|
||||
const resizeObserver = input
|
||||
? new ResizeObserver(handleViewportChange)
|
||||
: null;
|
||||
if (input) {
|
||||
resizeObserver?.observe(input);
|
||||
}
|
||||
|
||||
return () => {
|
||||
viewport?.removeEventListener("resize", handleViewportChange);
|
||||
window.removeEventListener("resize", handleViewportChange);
|
||||
resizeObserver?.disconnect();
|
||||
};
|
||||
}, [updateMaxHeight]);
|
||||
|
||||
// Render
|
||||
if (!hasValidChatUser) {
|
||||
return (
|
||||
|
|
@ -275,7 +200,7 @@ export default function Screen() {
|
|||
<div
|
||||
ref={scrollRef}
|
||||
id="chat_container"
|
||||
className="flex-1 overflow-y-auto px-2.5"
|
||||
className="flex-1 overflow-y-auto px-2.5 pb-32"
|
||||
style={{
|
||||
overflowAnchor: "none",
|
||||
}}
|
||||
|
|
@ -307,21 +232,15 @@ export default function Screen() {
|
|||
padding: "4px 0",
|
||||
}}
|
||||
>
|
||||
<Message
|
||||
message={message}
|
||||
notEncrypted={message.not_encrypted}
|
||||
/>
|
||||
<Message message={message} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
ref={inputBoxRef}
|
||||
className="fixed -bottom-15 pb-15"
|
||||
style={{
|
||||
width: "calc(100vw - 277px)",
|
||||
}}
|
||||
style={{ width: "calc(100vw - 277px)" }}
|
||||
>
|
||||
<InputComponent setValue={setValue} value={value} />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue