mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 19:46:34 +00:00
wip: refactor chats to use zustand
This commit is contained in:
parent
671b857077
commit
79e948ac05
@ -7,5 +7,6 @@ CREATE TABLE
|
|||||||
receiver_pubkey INTEGER NOT NULL,
|
receiver_pubkey INTEGER NOT NULL,
|
||||||
sender_pubkey TEXT NOT NULL,
|
sender_pubkey TEXT NOT NULL,
|
||||||
content TEXT NOT NULL,
|
content TEXT NOT NULL,
|
||||||
|
tags JSON,
|
||||||
created_at INTEGER NOT NULL
|
created_at INTEGER NOT NULL
|
||||||
);
|
);
|
@ -1,19 +1,18 @@
|
|||||||
import { Image } from "@shared/image";
|
import { Image } from "@shared/image";
|
||||||
|
import { useActiveAccount } from "@stores/accounts";
|
||||||
import { DEFAULT_AVATAR } from "@stores/constants";
|
import { DEFAULT_AVATAR } from "@stores/constants";
|
||||||
|
|
||||||
import { usePageContext } from "@utils/hooks/usePageContext";
|
import { usePageContext } from "@utils/hooks/usePageContext";
|
||||||
import { useProfile } from "@utils/hooks/useProfile";
|
import { useProfile } from "@utils/hooks/useProfile";
|
||||||
import { shortenKey } from "@utils/shortenKey";
|
import { shortenKey } from "@utils/shortenKey";
|
||||||
|
|
||||||
import { twMerge } from "tailwind-merge";
|
import { twMerge } from "tailwind-merge";
|
||||||
|
|
||||||
export default function ChatsListItem({ pubkey }: { pubkey: string }) {
|
export function ChatsListItem({ pubkey }: { pubkey: string }) {
|
||||||
const pageContext = usePageContext();
|
const pageContext = usePageContext();
|
||||||
|
|
||||||
const searchParams: any = pageContext.urlParsed.search;
|
const searchParams: any = pageContext.urlParsed.search;
|
||||||
const pagePubkey = searchParams.pubkey;
|
const pagePubkey = searchParams.pubkey;
|
||||||
|
|
||||||
|
const account = useActiveAccount((state: any) => state.account);
|
||||||
const { user, isError, isLoading } = useProfile(pubkey);
|
const { user, isError, isLoading } = useProfile(pubkey);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -43,10 +42,13 @@ export default function ChatsListItem({ pubkey }: { pubkey: string }) {
|
|||||||
className="h-5 w-5 rounded bg-white object-cover"
|
className="h-5 w-5 rounded bg-white object-cover"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className="inline-flex items-baseline gap-1">
|
||||||
<h5 className="max-w-[9rem] truncate font-medium text-zinc-200 group-hover:text-white">
|
<h5 className="max-w-[9rem] truncate font-medium text-zinc-200 group-hover:text-white">
|
||||||
{user?.nip05 || user.name || shortenKey(pubkey)}
|
{user?.nip05 || user.name || shortenKey(pubkey)}
|
||||||
</h5>
|
</h5>
|
||||||
|
{account?.pubkey === pubkey && (
|
||||||
|
<span className="text-zinc-500">(you)</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
)}
|
)}
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import ChatsListItem from "@app/chat/components/item";
|
import { ChatsListItem } from "@app/chat/components/item";
|
||||||
import ChatsListSelfItem from "@app/chat/components/self";
|
|
||||||
import { useActiveAccount } from "@stores/accounts";
|
import { useActiveAccount } from "@stores/accounts";
|
||||||
import { useChats } from "@stores/chats";
|
import { useChats } from "@stores/chats";
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
@ -16,7 +15,6 @@ export default function ChatsList() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
<ChatsListSelfItem />
|
|
||||||
{!chats ? (
|
{!chats ? (
|
||||||
<>
|
<>
|
||||||
<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
|
<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
|
||||||
@ -29,7 +27,7 @@ export default function ChatsList() {
|
|||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
chats.map((item) => (
|
chats.map((item: { sender_pubkey: string }) => (
|
||||||
<ChatsListItem key={item.sender_pubkey} pubkey={item.sender_pubkey} />
|
<ChatsListItem key={item.sender_pubkey} pubkey={item.sender_pubkey} />
|
||||||
))
|
))
|
||||||
)}
|
)}
|
||||||
|
@ -1,44 +1,39 @@
|
|||||||
import { ChatMessageItem } from "@app/chat/components/messages/item";
|
import { ChatMessageItem } from "@app/chat/components/messages/item";
|
||||||
import { useActiveAccount } from "@stores/accounts";
|
import { useActiveAccount } from "@stores/accounts";
|
||||||
import { sortedChatMessagesAtom } from "@stores/chat";
|
import { useChatMessages } from "@stores/chats";
|
||||||
import { useAtomValue } from "jotai";
|
|
||||||
import { useCallback, useRef } from "react";
|
import { useCallback, useRef } from "react";
|
||||||
import { Virtuoso } from "react-virtuoso";
|
import { Virtuoso } from "react-virtuoso";
|
||||||
|
|
||||||
export default function ChatMessageList() {
|
export function ChatMessageList() {
|
||||||
const account = useActiveAccount((state: any) => state.account);
|
const account = useActiveAccount((state: any) => state.account);
|
||||||
|
const messages = useChatMessages((state: any) => state.messages);
|
||||||
|
|
||||||
const virtuosoRef = useRef(null);
|
const virtuosoRef = useRef(null);
|
||||||
const data = useAtomValue(sortedChatMessagesAtom);
|
|
||||||
|
|
||||||
const itemContent: any = useCallback(
|
const itemContent: any = useCallback(
|
||||||
(index: string | number) => {
|
(index: string | number) => {
|
||||||
return (
|
return (
|
||||||
<ChatMessageItem
|
<ChatMessageItem data={messages[index]} userPrivkey={account.privkey} />
|
||||||
data={data[index]}
|
|
||||||
userPubkey={account.pubkey}
|
|
||||||
userPrivkey={account.privkey}
|
|
||||||
/>
|
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
[account.privkey, account.pubkey, data],
|
[account.privkey, account.pubkey, messages],
|
||||||
);
|
);
|
||||||
|
|
||||||
const computeItemKey = useCallback(
|
const computeItemKey = useCallback(
|
||||||
(index: string | number) => {
|
(index: string | number) => {
|
||||||
return data[index].id;
|
return messages[index].id;
|
||||||
},
|
},
|
||||||
[data],
|
[messages],
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-full w-full">
|
<div className="h-full w-full">
|
||||||
<Virtuoso
|
<Virtuoso
|
||||||
ref={virtuosoRef}
|
ref={virtuosoRef}
|
||||||
data={data}
|
data={messages}
|
||||||
itemContent={itemContent}
|
itemContent={itemContent}
|
||||||
computeItemKey={computeItemKey}
|
computeItemKey={computeItemKey}
|
||||||
initialTopMostItemIndex={data.length - 1}
|
initialTopMostItemIndex={messages.length - 1}
|
||||||
alignToBottom={true}
|
alignToBottom={true}
|
||||||
followOutput={true}
|
followOutput={true}
|
||||||
overscan={50}
|
overscan={50}
|
||||||
|
@ -1,87 +1,74 @@
|
|||||||
import { ImagePicker } from "@shared/form/imagePicker";
|
|
||||||
import { RelayContext } from "@shared/relayProvider";
|
import { RelayContext } from "@shared/relayProvider";
|
||||||
import { useActiveAccount } from "@stores/accounts";
|
import { useChatMessages } from "@stores/chats";
|
||||||
import { chatContentAtom } from "@stores/chat";
|
|
||||||
import { WRITEONLY_RELAYS } from "@stores/constants";
|
import { WRITEONLY_RELAYS } from "@stores/constants";
|
||||||
import { dateToUnix } from "@utils/date";
|
import { dateToUnix } from "@utils/date";
|
||||||
import { useAtom } from "jotai";
|
|
||||||
import { useResetAtom } from "jotai/utils";
|
|
||||||
import { getEventHash, getSignature, nip04 } from "nostr-tools";
|
import { getEventHash, getSignature, nip04 } from "nostr-tools";
|
||||||
import { useCallback, useContext } from "react";
|
import { useCallback, useContext, useState } from "react";
|
||||||
|
|
||||||
export default function ChatMessageForm({
|
export function ChatMessageForm({
|
||||||
receiverPubkey,
|
receiverPubkey,
|
||||||
}: { receiverPubkey: string }) {
|
userPubkey,
|
||||||
|
userPrivkey,
|
||||||
|
}: { receiverPubkey: string; userPubkey: string; userPrivkey: string }) {
|
||||||
const pool: any = useContext(RelayContext);
|
const pool: any = useContext(RelayContext);
|
||||||
const account = useActiveAccount((state: any) => state.account);
|
const addMessage = useChatMessages((state: any) => state.add);
|
||||||
|
const [value, setValue] = useState("");
|
||||||
|
|
||||||
const [value, setValue] = useAtom(chatContentAtom);
|
const encryptMessage = useCallback(async () => {
|
||||||
const resetValue = useResetAtom(chatContentAtom);
|
return await nip04.encrypt(userPrivkey, receiverPubkey, value);
|
||||||
|
}, [receiverPubkey, value]);
|
||||||
|
|
||||||
const encryptMessage = useCallback(
|
const submit = async () => {
|
||||||
async (privkey: string) => {
|
const message = await encryptMessage();
|
||||||
return await nip04.encrypt(privkey, receiverPubkey, value);
|
|
||||||
},
|
|
||||||
[receiverPubkey, value],
|
|
||||||
);
|
|
||||||
|
|
||||||
const submitEvent = () => {
|
|
||||||
encryptMessage(account.privkey)
|
|
||||||
.then((encryptedContent) => {
|
|
||||||
const event: any = {
|
const event: any = {
|
||||||
content: encryptedContent,
|
content: message,
|
||||||
created_at: dateToUnix(),
|
created_at: dateToUnix(),
|
||||||
kind: 4,
|
kind: 4,
|
||||||
pubkey: account.pubkey,
|
pubkey: userPubkey,
|
||||||
tags: [["p", receiverPubkey]],
|
tags: [["p", receiverPubkey]],
|
||||||
};
|
};
|
||||||
|
|
||||||
event.id = getEventHash(event);
|
event.id = getEventHash(event);
|
||||||
event.sig = getSignature(event, account.privkey);
|
event.sig = getSignature(event, userPrivkey);
|
||||||
// publish note
|
|
||||||
|
// publish message
|
||||||
pool.publish(event, WRITEONLY_RELAYS);
|
pool.publish(event, WRITEONLY_RELAYS);
|
||||||
|
|
||||||
|
// add message to store
|
||||||
|
addMessage({
|
||||||
|
receiver_pubkey: receiverPubkey,
|
||||||
|
sender_pubkey: event.pubkey,
|
||||||
|
content: event.content,
|
||||||
|
tags: event.tags,
|
||||||
|
created_at: event.created_at,
|
||||||
|
});
|
||||||
|
|
||||||
// reset state
|
// reset state
|
||||||
resetValue();
|
setValue("");
|
||||||
})
|
|
||||||
.catch(console.error);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleEnterPress = (e) => {
|
const handleEnterPress = (e: {
|
||||||
|
key: string;
|
||||||
|
shiftKey: any;
|
||||||
|
preventDefault: () => void;
|
||||||
|
}) => {
|
||||||
if (e.key === "Enter" && !e.shiftKey) {
|
if (e.key === "Enter" && !e.shiftKey) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
submitEvent();
|
submit();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative h-24 w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
|
<div className="relative h-11 w-full overflow-hidden">
|
||||||
<div>
|
<input
|
||||||
<textarea
|
|
||||||
value={value}
|
value={value}
|
||||||
onChange={(e) => setValue(e.target.value)}
|
onChange={(e) => setValue(e.target.value)}
|
||||||
onKeyDown={handleEnterPress}
|
onKeyDown={handleEnterPress}
|
||||||
spellCheck={false}
|
spellCheck={false}
|
||||||
placeholder="Message"
|
placeholder="Message"
|
||||||
className="relative h-24 w-full resize-none rounded-lg border border-black/5 px-3.5 py-3 text-base shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
|
className="relative h-11 w-full resize-none rounded-md px-5 !outline-none bg-zinc-800 placeholder:text-zinc-500"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="absolute bottom-2 w-full px-2">
|
|
||||||
<div className="flex w-full items-center justify-between bg-zinc-800">
|
|
||||||
<div className="flex items-center gap-2 divide-x divide-zinc-700">
|
|
||||||
<ImagePicker type="chat" />
|
|
||||||
<div className="flex items-center gap-2 pl-2" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => submitEvent()}
|
|
||||||
disabled={value.length === 0 ? true : false}
|
|
||||||
className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-base font-medium shadow-button hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
|
|
||||||
>
|
|
||||||
Send
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,22 +1,19 @@
|
|||||||
import ChatMessageUser from "@app/chat/components/messages/user";
|
import { ChatMessageUser } from "@app/chat/components/messages/user";
|
||||||
import { useDecryptMessage } from "@app/chat/hooks/useDecryptMessage";
|
import { useDecryptMessage } from "@app/chat/hooks/useDecryptMessage";
|
||||||
import ImagePreview from "@app/note/components/preview/image";
|
import ImagePreview from "@app/note/components/preview/image";
|
||||||
import VideoPreview from "@app/note/components/preview/video";
|
import VideoPreview from "@app/note/components/preview/video";
|
||||||
|
|
||||||
import { noteParser } from "@utils/parser";
|
import { noteParser } from "@utils/parser";
|
||||||
|
|
||||||
import { memo } from "react";
|
import { memo } from "react";
|
||||||
|
|
||||||
export const ChatMessageItem = memo(function MessageListItem({
|
export const ChatMessageItem = memo(function ChatMessageItem({
|
||||||
data,
|
data,
|
||||||
userPubkey,
|
|
||||||
userPrivkey,
|
userPrivkey,
|
||||||
}: {
|
}: {
|
||||||
data: any;
|
data: any;
|
||||||
userPubkey: string;
|
|
||||||
userPrivkey: string;
|
userPrivkey: string;
|
||||||
}) {
|
}) {
|
||||||
const decryptedContent = useDecryptMessage(userPubkey, userPrivkey, data);
|
const decryptedContent = useDecryptMessage(data, userPrivkey);
|
||||||
|
console.log(decryptedContent);
|
||||||
// if we have decrypted content, use it instead of the encrypted content
|
// if we have decrypted content, use it instead of the encrypted content
|
||||||
if (decryptedContent) {
|
if (decryptedContent) {
|
||||||
data["content"] = decryptedContent;
|
data["content"] = decryptedContent;
|
||||||
@ -25,12 +22,12 @@ export const ChatMessageItem = memo(function MessageListItem({
|
|||||||
const content = noteParser(data);
|
const content = noteParser(data);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-min min-h-min w-full select-text flex-col px-5 py-2 hover:bg-black/20">
|
<div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-black/20">
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<ChatMessageUser pubkey={data.pubkey} time={data.created_at} />
|
<ChatMessageUser pubkey={data.sender_pubkey} time={data.created_at} />
|
||||||
<div className="-mt-[17px] pl-[48px]">
|
<div className="-mt-[20px] pl-[49px]">
|
||||||
<div className="whitespace-pre-line break-words text-base leading-tight">
|
<div className="whitespace-pre-line break-words text-base leading-tight">
|
||||||
{content.parsed}
|
{content.parsed || ""}
|
||||||
</div>
|
</div>
|
||||||
{Array.isArray(content.images) && content.images.length ? (
|
{Array.isArray(content.images) && content.images.length ? (
|
||||||
<ImagePreview urls={content.images} />
|
<ImagePreview urls={content.images} />
|
||||||
|
@ -7,7 +7,7 @@ import relativeTime from "dayjs/plugin/relativeTime";
|
|||||||
|
|
||||||
dayjs.extend(relativeTime);
|
dayjs.extend(relativeTime);
|
||||||
|
|
||||||
export default function ChatMessageUser({
|
export function ChatMessageUser({
|
||||||
pubkey,
|
pubkey,
|
||||||
time,
|
time,
|
||||||
}: { pubkey: string; time: number }) {
|
}: { pubkey: string; time: number }) {
|
||||||
@ -17,7 +17,7 @@ export default function ChatMessageUser({
|
|||||||
<div className="group flex items-start gap-3">
|
<div className="group flex items-start gap-3">
|
||||||
{isError || isLoading ? (
|
{isError || isLoading ? (
|
||||||
<>
|
<>
|
||||||
<div className="relative h-9 w-9 shrink animate-pulse rounded-md bg-zinc-800" />
|
<div className="relative h-11 w-11 shrink animate-pulse rounded-md bg-zinc-800" />
|
||||||
<div className="flex w-full flex-1 items-start justify-between">
|
<div className="flex w-full flex-1 items-start justify-between">
|
||||||
<div className="flex items-baseline gap-2 text-base">
|
<div className="flex items-baseline gap-2 text-base">
|
||||||
<div className="h-4 w-20 animate-pulse rounded bg-zinc-800" />
|
<div className="h-4 w-20 animate-pulse rounded bg-zinc-800" />
|
||||||
@ -26,17 +26,17 @@ export default function ChatMessageUser({
|
|||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<div className="relative h-9 w-9 shrink rounded-md">
|
<div className="relative h-11 w-11 shrink rounded-md">
|
||||||
<Image
|
<Image
|
||||||
src={user?.picture || DEFAULT_AVATAR}
|
src={user?.picture || DEFAULT_AVATAR}
|
||||||
alt={pubkey}
|
alt={pubkey}
|
||||||
className="h-9 w-9 rounded-md object-cover"
|
className="h-11 w-11 rounded-md object-cover"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex w-full flex-1 items-start justify-between">
|
<div className="flex w-full flex-1 items-start justify-between">
|
||||||
<div className="flex items-baseline gap-2 text-base">
|
<div className="flex items-baseline gap-2 text-base">
|
||||||
<span className="font-semibold leading-none text-white group-hover:underline">
|
<span className="font-semibold leading-none text-white group-hover:underline">
|
||||||
{user?.display_name || user?.name || shortenKey(pubkey)}
|
{user?.nip05 || user?.name || shortenKey(pubkey)}
|
||||||
</span>
|
</span>
|
||||||
<span className="leading-none text-zinc-500">·</span>
|
<span className="leading-none text-zinc-500">·</span>
|
||||||
<span className="leading-none text-zinc-500">
|
<span className="leading-none text-zinc-500">
|
||||||
|
@ -1,52 +0,0 @@
|
|||||||
import { Image } from "@shared/image";
|
|
||||||
import { useActiveAccount } from "@stores/accounts";
|
|
||||||
import { DEFAULT_AVATAR } from "@stores/constants";
|
|
||||||
import { usePageContext } from "@utils/hooks/usePageContext";
|
|
||||||
import { shortenKey } from "@utils/shortenKey";
|
|
||||||
import { twMerge } from "tailwind-merge";
|
|
||||||
|
|
||||||
export default function ChatsListSelfItem() {
|
|
||||||
const pageContext = usePageContext();
|
|
||||||
|
|
||||||
const searchParams: any = pageContext.urlParsed.search;
|
|
||||||
const pagePubkey = searchParams.pubkey;
|
|
||||||
|
|
||||||
const account = useActiveAccount((state: any) => state.account);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{!account ? (
|
|
||||||
<div className="inline-flex h-8 items-center gap-2.5 rounded-md px-2.5">
|
|
||||||
<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
|
|
||||||
<div>
|
|
||||||
<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-base font-medium" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<a
|
|
||||||
href={`/app/chat?pubkey=${account.pubkey}`}
|
|
||||||
className={twMerge(
|
|
||||||
"inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900",
|
|
||||||
pagePubkey === account.pubkey
|
|
||||||
? "dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
|
|
||||||
: "",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="relative h-5 w-5 shrink-0 rounded">
|
|
||||||
<Image
|
|
||||||
src={account?.picture || DEFAULT_AVATAR}
|
|
||||||
alt={account.pubkey}
|
|
||||||
className="h-5 w-5 rounded bg-white object-cover"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="inline-flex items-baseline">
|
|
||||||
<h5 className="max-w-[9rem] truncate font-medium text-zinc-200">
|
|
||||||
{account?.nip05 || account?.name || shortenKey(account.pubkey)}
|
|
||||||
</h5>
|
|
||||||
<span className="text-zinc-600">(you)</span>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
30
src/app/chat/components/sidebar.tsx
Normal file
30
src/app/chat/components/sidebar.tsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import { Image } from "@shared/image";
|
||||||
|
import { DEFAULT_AVATAR } from "@stores/constants";
|
||||||
|
import { useProfile } from "@utils/hooks/useProfile";
|
||||||
|
import { shortenKey } from "@utils/shortenKey";
|
||||||
|
|
||||||
|
export function ChatSidebar({ pubkey }: { pubkey: string }) {
|
||||||
|
const { user, isError, isLoading } = useProfile(pubkey);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="px-3 py-2">
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<div className="relative h-11 w-11 shrink rounded-md">
|
||||||
|
<Image
|
||||||
|
src={user?.picture || DEFAULT_AVATAR}
|
||||||
|
alt={pubkey}
|
||||||
|
className="h-11 w-11 rounded-md object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<h3 className="leading-none text-lg font-semibold">
|
||||||
|
{user?.display_name || user?.name}
|
||||||
|
</h3>
|
||||||
|
<p className="leading-none text-zinc-400">
|
||||||
|
{user?.nip05 || user?.username || shortenKey(pubkey)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
@ -1,32 +1,21 @@
|
|||||||
import { nip04 } from "nostr-tools";
|
import { nip04 } from "nostr-tools";
|
||||||
import { useCallback, useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
export function useDecryptMessage(
|
export function useDecryptMessage(data: any, userPriv: string) {
|
||||||
userKey: string,
|
const [content, setContent] = useState(data.content);
|
||||||
userPriv: string,
|
|
||||||
data: any,
|
|
||||||
) {
|
|
||||||
const [content, setContent] = useState(null);
|
|
||||||
|
|
||||||
const extractSenderKey = useCallback(() => {
|
|
||||||
const keyInTags = data.tags.find(([k, v]) => k === "p" && v && v !== "")[1];
|
|
||||||
if (keyInTags === userKey) {
|
|
||||||
return data.pubkey;
|
|
||||||
} else {
|
|
||||||
return keyInTags;
|
|
||||||
}
|
|
||||||
}, [data.pubkey, data.tags, userKey]);
|
|
||||||
|
|
||||||
const decrypt = useCallback(async () => {
|
|
||||||
const senderKey = extractSenderKey();
|
|
||||||
const result = await nip04.decrypt(userPriv, senderKey, data.content);
|
|
||||||
// update state with decrypt content
|
|
||||||
setContent(result);
|
|
||||||
}, [extractSenderKey, userPriv, data.content]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
decrypt().catch(console.error);
|
async function decrypt() {
|
||||||
}, [decrypt]);
|
const result = await nip04.decrypt(
|
||||||
|
userPriv,
|
||||||
return content ? content : null;
|
data.sender_pubkey,
|
||||||
|
data.content,
|
||||||
|
);
|
||||||
|
setContent(result);
|
||||||
|
}
|
||||||
|
|
||||||
|
decrypt().catch(console.error);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return content;
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import AppHeader from "@shared/appHeader";
|
|
||||||
import MultiAccounts from "@shared/multiAccounts";
|
import MultiAccounts from "@shared/multiAccounts";
|
||||||
import Navigation from "@shared/navigation";
|
import Navigation from "@shared/navigation";
|
||||||
|
|
||||||
|
@ -1,16 +1,15 @@
|
|||||||
import ChatMessageForm from "@app/chat/components/messages/form";
|
import { ChatSidebar } from "../components/sidebar";
|
||||||
|
import { ChatMessageList } from "@app/chat/components/messageList";
|
||||||
|
import { ChatMessageForm } from "@app/chat/components/messages/form";
|
||||||
import { RelayContext } from "@shared/relayProvider";
|
import { RelayContext } from "@shared/relayProvider";
|
||||||
import { useActiveAccount } from "@stores/accounts";
|
import { useActiveAccount } from "@stores/accounts";
|
||||||
import { chatMessagesAtom } from "@stores/chat";
|
import { useChatMessages } from "@stores/chats";
|
||||||
import { READONLY_RELAYS } from "@stores/constants";
|
import { READONLY_RELAYS } from "@stores/constants";
|
||||||
|
import { dateToUnix } from "@utils/date";
|
||||||
import { usePageContext } from "@utils/hooks/usePageContext";
|
import { usePageContext } from "@utils/hooks/usePageContext";
|
||||||
import { useSetAtom } from "jotai";
|
import { useContext, useEffect } from "react";
|
||||||
import { useResetAtom } from "jotai/utils";
|
|
||||||
import { Suspense, lazy, useContext, useEffect } from "react";
|
|
||||||
import useSWRSubscription from "swr/subscription";
|
import useSWRSubscription from "swr/subscription";
|
||||||
|
|
||||||
const ChatMessageList = lazy(() => import("@app/chat/components/messageList"));
|
|
||||||
|
|
||||||
export function Page() {
|
export function Page() {
|
||||||
const pool: any = useContext(RelayContext);
|
const pool: any = useContext(RelayContext);
|
||||||
const account = useActiveAccount((state: any) => state.account);
|
const account = useActiveAccount((state: any) => state.account);
|
||||||
@ -19,8 +18,10 @@ export function Page() {
|
|||||||
const searchParams: any = pageContext.urlParsed.search;
|
const searchParams: any = pageContext.urlParsed.search;
|
||||||
const pubkey = searchParams.pubkey;
|
const pubkey = searchParams.pubkey;
|
||||||
|
|
||||||
const setChatMessages = useSetAtom(chatMessagesAtom);
|
const [fetchMessages, addMessage] = useChatMessages((state: any) => [
|
||||||
const resetChatMessages = useResetAtom(chatMessagesAtom);
|
state.fetch,
|
||||||
|
state.add,
|
||||||
|
]);
|
||||||
|
|
||||||
useSWRSubscription(account ? ["chat", pubkey] : null, ([, key]) => {
|
useSWRSubscription(account ? ["chat", pubkey] : null, ([, key]) => {
|
||||||
const unsubscribe = pool.subscribe(
|
const unsubscribe = pool.subscribe(
|
||||||
@ -29,18 +30,18 @@ export function Page() {
|
|||||||
kinds: [4],
|
kinds: [4],
|
||||||
authors: [key],
|
authors: [key],
|
||||||
"#p": [account.pubkey],
|
"#p": [account.pubkey],
|
||||||
limit: 20,
|
since: dateToUnix(),
|
||||||
},
|
|
||||||
{
|
|
||||||
kinds: [4],
|
|
||||||
authors: [account.pubkey],
|
|
||||||
"#p": [key],
|
|
||||||
limit: 20,
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
READONLY_RELAYS,
|
READONLY_RELAYS,
|
||||||
(event: any) => {
|
(event: any) => {
|
||||||
setChatMessages((prev) => [...prev, event]);
|
addMessage({
|
||||||
|
receiver_pubkey: account.pubkey,
|
||||||
|
sender_pubkey: event.pubkey,
|
||||||
|
content: event.content,
|
||||||
|
tags: event.tags,
|
||||||
|
created_at: event.created_at,
|
||||||
|
});
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -50,25 +51,37 @@ export function Page() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let ignore = false;
|
fetchMessages(account.pubkey, pubkey);
|
||||||
|
}, [pubkey]);
|
||||||
if (!ignore) {
|
|
||||||
// reset chat messages
|
|
||||||
resetChatMessages();
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
ignore = true;
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative flex h-full w-full flex-col justify-between rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
|
<div className="h-full w-full grid grid-cols-3">
|
||||||
<Suspense fallback={<p>Loading...</p>}>
|
<div className="col-span-2 flex flex-col justify-between border-r border-zinc-900">
|
||||||
|
<div
|
||||||
|
data-tauri-drag-region
|
||||||
|
className="h-11 w-full shrink-0 inline-flex items-center justify-center border-b border-zinc-900"
|
||||||
|
>
|
||||||
|
<h3 className="font-semibold text-zinc-100">Encrypted Chat</h3>
|
||||||
|
</div>
|
||||||
|
<div className="w-full flex-1 p-3">
|
||||||
|
<div className="flex h-full flex-col justify-between rounded-md bg-zinc-900 shadow-input shadow-black/20">
|
||||||
<ChatMessageList />
|
<ChatMessageList />
|
||||||
</Suspense>
|
<div className="shrink-0 px-5 p-3 border-t border-zinc-800">
|
||||||
<div className="shrink-0 p-3">
|
<ChatMessageForm
|
||||||
<ChatMessageForm receiverPubkey={pubkey} />
|
receiverPubkey={pubkey}
|
||||||
|
userPubkey={account.pubkey}
|
||||||
|
userPrivkey={account.privkey}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-1">
|
||||||
|
<div
|
||||||
|
data-tauri-drag-region
|
||||||
|
className="h-11 w-full shrink-0 inline-flex items-center justify-center border-b border-zinc-900"
|
||||||
|
/>
|
||||||
|
<ChatSidebar pubkey={pubkey} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -61,6 +61,13 @@ export function Page() {
|
|||||||
since: querySince,
|
since: querySince,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// kind 4 (chats) query
|
||||||
|
query.push({
|
||||||
|
kinds: [4],
|
||||||
|
authors: [account.pubkey],
|
||||||
|
since: querySince,
|
||||||
|
});
|
||||||
|
|
||||||
// kind 43, 43 (mute user, hide message) query
|
// kind 43, 43 (mute user, hide message) query
|
||||||
query.push({
|
query.push({
|
||||||
authors: [account.pubkey],
|
authors: [account.pubkey],
|
||||||
@ -95,15 +102,29 @@ export function Page() {
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
// chat
|
// chat
|
||||||
case 4:
|
case 4: {
|
||||||
|
if (event.pubkey === account.pubkey) {
|
||||||
|
const receiver = event.tags.find((t) => t[0] === "p")[1];
|
||||||
createChat(
|
createChat(
|
||||||
event.id,
|
event.id,
|
||||||
account.pubkey,
|
|
||||||
event.pubkey,
|
event.pubkey,
|
||||||
|
receiver,
|
||||||
event.content,
|
event.content,
|
||||||
|
event.tags,
|
||||||
event.created_at,
|
event.created_at,
|
||||||
);
|
);
|
||||||
|
} else {
|
||||||
|
createChat(
|
||||||
|
event.id,
|
||||||
|
event.pubkey,
|
||||||
|
account.pubkey,
|
||||||
|
event.content,
|
||||||
|
event.tags,
|
||||||
|
event.created_at,
|
||||||
|
);
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
|
}
|
||||||
// repost
|
// repost
|
||||||
case 6:
|
case 6:
|
||||||
createNote(
|
createNote(
|
||||||
|
@ -70,7 +70,7 @@ export function FollowingBlock() {
|
|||||||
>
|
>
|
||||||
{status === "loading" ? (
|
{status === "loading" ? (
|
||||||
<div className="px-3 py-1.5">
|
<div className="px-3 py-1.5">
|
||||||
<div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
|
<div className="rounded-md bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
|
||||||
<NoteSkeleton />
|
<NoteSkeleton />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -122,7 +122,7 @@ export function FollowingBlock() {
|
|||||||
<div>
|
<div>
|
||||||
{isFetching && !isFetchingNextPage && (
|
{isFetching && !isFetchingNextPage && (
|
||||||
<div className="px-3 py-1.5">
|
<div className="px-3 py-1.5">
|
||||||
<div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
|
<div className="rounded-md bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
|
||||||
<NoteSkeleton />
|
<NoteSkeleton />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -30,7 +30,7 @@ export function render(pageContext: PageContextServer) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return escapeInject`<!DOCTYPE html>
|
return escapeInject`<!DOCTYPE html>
|
||||||
<html lang="en" class="dark">
|
<html lang="en" class="dark" suppressHydrationWarning>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
@ -1,16 +1,8 @@
|
|||||||
import ArrowLeftIcon from "@icons/arrowLeft";
|
import ArrowLeftIcon from "@icons/arrowLeft";
|
||||||
import ArrowRightIcon from "@icons/arrowRight";
|
import ArrowRightIcon from "@icons/arrowRight";
|
||||||
import EventCollector from "@shared/eventCollector";
|
import EventCollector from "@shared/eventCollector";
|
||||||
import useSWR from "swr";
|
|
||||||
|
|
||||||
const fetcher = async () => {
|
|
||||||
const { platform } = await import("@tauri-apps/api/os");
|
|
||||||
return await platform();
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function AppHeader() {
|
|
||||||
const { data: platform } = useSWR("platform", fetcher);
|
|
||||||
|
|
||||||
|
export function AppHeader() {
|
||||||
const goBack = () => {
|
const goBack = () => {
|
||||||
window.history.back();
|
window.history.back();
|
||||||
};
|
};
|
||||||
@ -19,10 +11,6 @@ export default function AppHeader() {
|
|||||||
window.history.forward();
|
window.history.forward();
|
||||||
};
|
};
|
||||||
|
|
||||||
const reload = () => {
|
|
||||||
window.location.reload();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-tauri-drag-region
|
data-tauri-drag-region
|
||||||
|
@ -2,9 +2,6 @@ import HeartBeatIcon from "@icons/heartbeat";
|
|||||||
import { RelayContext } from "@shared/relayProvider";
|
import { RelayContext } from "@shared/relayProvider";
|
||||||
import { useActiveAccount } from "@stores/accounts";
|
import { useActiveAccount } from "@stores/accounts";
|
||||||
import { READONLY_RELAYS } from "@stores/constants";
|
import { READONLY_RELAYS } from "@stores/constants";
|
||||||
import { hasNewerNoteAtom } from "@stores/note";
|
|
||||||
import { TauriEvent } from "@tauri-apps/api/event";
|
|
||||||
import { appWindow, getCurrent } from "@tauri-apps/api/window";
|
|
||||||
import { dateToUnix } from "@utils/date";
|
import { dateToUnix } from "@utils/date";
|
||||||
import {
|
import {
|
||||||
createChat,
|
createChat,
|
||||||
@ -13,15 +10,12 @@ import {
|
|||||||
updateLastLogin,
|
updateLastLogin,
|
||||||
} from "@utils/storage";
|
} from "@utils/storage";
|
||||||
import { getParentID, nip02ToArray } from "@utils/transform";
|
import { getParentID, nip02ToArray } from "@utils/transform";
|
||||||
import { useSetAtom } from "jotai";
|
|
||||||
import { useContext, useEffect, useRef } from "react";
|
import { useContext, useEffect, useRef } from "react";
|
||||||
import useSWRSubscription from "swr/subscription";
|
import useSWRSubscription from "swr/subscription";
|
||||||
|
|
||||||
export default function EventCollector() {
|
export default function EventCollector() {
|
||||||
const pool: any = useContext(RelayContext);
|
const pool: any = useContext(RelayContext);
|
||||||
|
|
||||||
const setHasNewerNote = useSetAtom(hasNewerNoteAtom);
|
|
||||||
|
|
||||||
const account = useActiveAccount((state: any) => state.account);
|
const account = useActiveAccount((state: any) => state.account);
|
||||||
const now = useRef(new Date());
|
const now = useRef(new Date());
|
||||||
|
|
||||||
@ -60,8 +54,6 @@ export default function EventCollector() {
|
|||||||
event.created_at,
|
event.created_at,
|
||||||
parentID,
|
parentID,
|
||||||
);
|
);
|
||||||
// notify user reload to get newer note
|
|
||||||
setHasNewerNote(true);
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
// contacts
|
// contacts
|
||||||
@ -78,6 +70,7 @@ export default function EventCollector() {
|
|||||||
account.pubkey,
|
account.pubkey,
|
||||||
event.pubkey,
|
event.pubkey,
|
||||||
event.content,
|
event.content,
|
||||||
|
event.tags,
|
||||||
event.created_at,
|
event.created_at,
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
@ -106,6 +99,10 @@ export default function EventCollector() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
async function initWindowEvent() {
|
||||||
|
const { TauriEvent } = await import("@tauri-apps/api/event");
|
||||||
|
const { appWindow, getCurrent } = await import("@tauri-apps/api/window");
|
||||||
|
|
||||||
// listen window close event
|
// listen window close event
|
||||||
getCurrent().listen(TauriEvent.WINDOW_CLOSE_REQUESTED, () => {
|
getCurrent().listen(TauriEvent.WINDOW_CLOSE_REQUESTED, () => {
|
||||||
// update last login time
|
// update last login time
|
||||||
@ -113,6 +110,9 @@ export default function EventCollector() {
|
|||||||
// close window
|
// close window
|
||||||
appWindow.close();
|
appWindow.close();
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
initWindowEvent().catch(console.error);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -2,7 +2,6 @@ import PlusIcon from "@icons/plus";
|
|||||||
|
|
||||||
import { channelContentAtom } from "@stores/channel";
|
import { channelContentAtom } from "@stores/channel";
|
||||||
import { chatContentAtom } from "@stores/chat";
|
import { chatContentAtom } from "@stores/chat";
|
||||||
import { noteContentAtom } from "@stores/note";
|
|
||||||
|
|
||||||
import { createBlobFromFile } from "@utils/createBlobFromFile";
|
import { createBlobFromFile } from "@utils/createBlobFromFile";
|
||||||
|
|
||||||
@ -15,9 +14,6 @@ export function ImagePicker({ type }: { type: string }) {
|
|||||||
let atom;
|
let atom;
|
||||||
|
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case "note":
|
|
||||||
atom = noteContentAtom;
|
|
||||||
break;
|
|
||||||
case "chat":
|
case "chat":
|
||||||
atom = chatContentAtom;
|
atom = chatContentAtom;
|
||||||
break;
|
break;
|
||||||
|
@ -5,7 +5,7 @@ import NavArrowDownIcon from "@icons/navArrowDown";
|
|||||||
import ThreadsIcon from "@icons/threads";
|
import ThreadsIcon from "@icons/threads";
|
||||||
import WorldIcon from "@icons/world";
|
import WorldIcon from "@icons/world";
|
||||||
import ActiveLink from "@shared/activeLink";
|
import ActiveLink from "@shared/activeLink";
|
||||||
import AppHeader from "@shared/appHeader";
|
import { AppHeader } from "@shared/appHeader";
|
||||||
import { ComposerModal } from "@shared/composer/modal";
|
import { ComposerModal } from "@shared/composer/modal";
|
||||||
|
|
||||||
export default function Navigation() {
|
export default function Navigation() {
|
||||||
|
@ -1,14 +0,0 @@
|
|||||||
import { atom } from "jotai";
|
|
||||||
import { atomWithReset } from "jotai/utils";
|
|
||||||
|
|
||||||
export const chatMessagesAtom = atomWithReset([]);
|
|
||||||
export const sortedChatMessagesAtom = atom((get) => {
|
|
||||||
const messages = get(chatMessagesAtom);
|
|
||||||
return messages.sort(
|
|
||||||
(x: { created_at: number }, y: { created_at: number }) =>
|
|
||||||
x.created_at - y.created_at,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// chat content
|
|
||||||
export const chatContentAtom = atomWithReset("");
|
|
@ -297,12 +297,13 @@ export async function createChat(
|
|||||||
receiver_pubkey: string,
|
receiver_pubkey: string,
|
||||||
sender_pubkey: string,
|
sender_pubkey: string,
|
||||||
content: string,
|
content: string,
|
||||||
|
tags: string[][],
|
||||||
created_at: number,
|
created_at: number,
|
||||||
) {
|
) {
|
||||||
const db = await connect();
|
const db = await connect();
|
||||||
return await db.execute(
|
return await db.execute(
|
||||||
"INSERT OR IGNORE INTO chats (event_id, receiver_pubkey, sender_pubkey, content, created_at) VALUES (?, ?, ?, ?, ?);",
|
"INSERT OR IGNORE INTO chats (event_id, receiver_pubkey, sender_pubkey, content, tags, created_at) VALUES (?, ?, ?, ?, ?, ?);",
|
||||||
[event_id, receiver_pubkey, sender_pubkey, content, created_at],
|
[event_id, receiver_pubkey, sender_pubkey, content, tags, created_at],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user