replace eslint/prettier with rome
This commit is contained in:
Ren Amamiya
@@ -1 +1 @@
|
||||
export { LayoutChat as Layout } from './layout';
|
||||
export { LayoutChat as Layout } from "./layout";
|
||||
|
||||
@@ -1,53 +1,55 @@
|
||||
import { Image } from '@shared/image';
|
||||
import { Image } from "@shared/image";
|
||||
|
||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
||||
import { DEFAULT_AVATAR } from "@stores/constants";
|
||||
|
||||
import { usePageContext } from '@utils/hooks/usePageContext';
|
||||
import { useProfile } from '@utils/hooks/useProfile';
|
||||
import { shortenKey } from '@utils/shortenKey';
|
||||
import { usePageContext } from "@utils/hooks/usePageContext";
|
||||
import { useProfile } from "@utils/hooks/useProfile";
|
||||
import { shortenKey } from "@utils/shortenKey";
|
||||
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export default function ChatsListItem({ pubkey }: { pubkey: string }) {
|
||||
const pageContext = usePageContext();
|
||||
const pageContext = usePageContext();
|
||||
|
||||
const searchParams: any = pageContext.urlParsed.search;
|
||||
const pagePubkey = searchParams.pubkey;
|
||||
const searchParams: any = pageContext.urlParsed.search;
|
||||
const pagePubkey = searchParams.pubkey;
|
||||
|
||||
const { user, isError, isLoading } = useProfile(pubkey);
|
||||
const { user, isError, isLoading } = useProfile(pubkey);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isError && <div>error</div>}
|
||||
{isLoading && !user ? (
|
||||
<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>
|
||||
<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-sm font-medium"></div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<a
|
||||
href={`/app/chat?pubkey=${pubkey}`}
|
||||
className={twMerge(
|
||||
'group inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900',
|
||||
pagePubkey === pubkey ? 'dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800' : ''
|
||||
)}
|
||||
>
|
||||
<div className="relative h-5 w-5 shrink-0 rounded">
|
||||
<Image
|
||||
src={user.picture || DEFAULT_AVATAR}
|
||||
alt={pubkey}
|
||||
className="h-5 w-5 rounded bg-white object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="truncate text-[13px] font-semibold text-zinc-400 group-hover:text-zinc-200">
|
||||
{user.display_name || user.name || shortenKey(pubkey)}
|
||||
</h5>
|
||||
</div>
|
||||
</a>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
{isError && <div>error</div>}
|
||||
{isLoading && !user ? (
|
||||
<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-sm font-medium" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<a
|
||||
href={`/app/chat?pubkey=${pubkey}`}
|
||||
className={twMerge(
|
||||
"group inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900",
|
||||
pagePubkey === pubkey
|
||||
? "dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
|
||||
: "",
|
||||
)}
|
||||
>
|
||||
<div className="relative h-5 w-5 shrink-0 rounded">
|
||||
<Image
|
||||
src={user.picture || DEFAULT_AVATAR}
|
||||
alt={pubkey}
|
||||
className="h-5 w-5 rounded bg-white object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="truncate text-[13px] font-semibold text-zinc-400 group-hover:text-zinc-200">
|
||||
{user.display_name || user.name || shortenKey(pubkey)}
|
||||
</h5>
|
||||
</div>
|
||||
</a>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,34 +1,39 @@
|
||||
import ChatsListItem from '@app/chat/components/item';
|
||||
import ChatsListSelfItem from '@app/chat/components/self';
|
||||
import ChatsListItem from "@app/chat/components/item";
|
||||
import ChatsListSelfItem from "@app/chat/components/self";
|
||||
|
||||
import { useActiveAccount } from '@utils/hooks/useActiveAccount';
|
||||
import { getChats } from '@utils/storage';
|
||||
import { useActiveAccount } from "@utils/hooks/useActiveAccount";
|
||||
import { getChats } from "@utils/storage";
|
||||
|
||||
import useSWR from 'swr';
|
||||
import useSWR from "swr";
|
||||
|
||||
const fetcher = ([, account]) => getChats(account);
|
||||
|
||||
export default function ChatsList() {
|
||||
const { account, isLoading, isError } = useActiveAccount();
|
||||
const { data: chats, error }: any = useSWR(!isLoading && !isError && account ? ['chats', account] : null, fetcher);
|
||||
const { account, isLoading, isError } = useActiveAccount();
|
||||
const { data: chats, error }: any = useSWR(
|
||||
!isLoading && !isError && account ? ["chats", account] : null,
|
||||
fetcher,
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-px">
|
||||
<ChatsListSelfItem />
|
||||
{!chats || error ? (
|
||||
<>
|
||||
<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
|
||||
<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800"></div>
|
||||
<div className="h-3 w-full animate-pulse bg-zinc-800"></div>
|
||||
</div>
|
||||
<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
|
||||
<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800"></div>
|
||||
<div className="h-3 w-full animate-pulse bg-zinc-800"></div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
chats.map((item: { pubkey: string }) => <ChatsListItem key={item.pubkey} pubkey={item.pubkey} />)
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="flex flex-col gap-px">
|
||||
<ChatsListSelfItem />
|
||||
{!chats || error ? (
|
||||
<>
|
||||
<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
|
||||
<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
|
||||
<div className="h-3 w-full animate-pulse bg-zinc-800" />
|
||||
</div>
|
||||
<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
|
||||
<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
|
||||
<div className="h-3 w-full animate-pulse bg-zinc-800" />
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
chats.map((item: { pubkey: string }) => (
|
||||
<ChatsListItem key={item.pubkey} pubkey={item.pubkey} />
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,47 +1,53 @@
|
||||
import { ChatMessageItem } from '@app/chat/components/messages/item';
|
||||
import { ChatMessageItem } from "@app/chat/components/messages/item";
|
||||
|
||||
import { sortedChatMessagesAtom } from '@stores/chat';
|
||||
import { sortedChatMessagesAtom } from "@stores/chat";
|
||||
|
||||
import { useActiveAccount } from '@utils/hooks/useActiveAccount';
|
||||
import { useActiveAccount } from "@utils/hooks/useActiveAccount";
|
||||
|
||||
import { useAtomValue } from 'jotai';
|
||||
import { useCallback, useRef } from 'react';
|
||||
import { Virtuoso } from 'react-virtuoso';
|
||||
import { useAtomValue } from "jotai";
|
||||
import { useCallback, useRef } from "react";
|
||||
import { Virtuoso } from "react-virtuoso";
|
||||
|
||||
export default function ChatMessageList() {
|
||||
const { account } = useActiveAccount();
|
||||
const { account } = useActiveAccount();
|
||||
|
||||
const virtuosoRef = useRef(null);
|
||||
const data = useAtomValue(sortedChatMessagesAtom);
|
||||
const virtuosoRef = useRef(null);
|
||||
const data = useAtomValue(sortedChatMessagesAtom);
|
||||
|
||||
const itemContent: any = useCallback(
|
||||
(index: string | number) => {
|
||||
return <ChatMessageItem data={data[index]} userPubkey={account.pubkey} userPrivkey={account.privkey} />;
|
||||
},
|
||||
[account.privkey, account.pubkey, data]
|
||||
);
|
||||
const itemContent: any = useCallback(
|
||||
(index: string | number) => {
|
||||
return (
|
||||
<ChatMessageItem
|
||||
data={data[index]}
|
||||
userPubkey={account.pubkey}
|
||||
userPrivkey={account.privkey}
|
||||
/>
|
||||
);
|
||||
},
|
||||
[account.privkey, account.pubkey, data],
|
||||
);
|
||||
|
||||
const computeItemKey = useCallback(
|
||||
(index: string | number) => {
|
||||
return data[index].id;
|
||||
},
|
||||
[data]
|
||||
);
|
||||
const computeItemKey = useCallback(
|
||||
(index: string | number) => {
|
||||
return data[index].id;
|
||||
},
|
||||
[data],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="h-full w-full">
|
||||
<Virtuoso
|
||||
ref={virtuosoRef}
|
||||
data={data}
|
||||
itemContent={itemContent}
|
||||
computeItemKey={computeItemKey}
|
||||
initialTopMostItemIndex={data.length - 1}
|
||||
alignToBottom={true}
|
||||
followOutput={true}
|
||||
overscan={50}
|
||||
increaseViewportBy={{ top: 200, bottom: 200 }}
|
||||
className="scrollbar-hide h-full w-full overflow-y-auto"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="h-full w-full">
|
||||
<Virtuoso
|
||||
ref={virtuosoRef}
|
||||
data={data}
|
||||
itemContent={itemContent}
|
||||
computeItemKey={computeItemKey}
|
||||
initialTopMostItemIndex={data.length - 1}
|
||||
alignToBottom={true}
|
||||
followOutput={true}
|
||||
overscan={50}
|
||||
increaseViewportBy={{ top: 200, bottom: 200 }}
|
||||
className="scrollbar-hide h-full w-full overflow-y-auto"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,89 +1,92 @@
|
||||
import { ImagePicker } from '@shared/form/imagePicker';
|
||||
import { RelayContext } from '@shared/relayProvider';
|
||||
import { ImagePicker } from "@shared/form/imagePicker";
|
||||
import { RelayContext } from "@shared/relayProvider";
|
||||
|
||||
import { chatContentAtom } from '@stores/chat';
|
||||
import { WRITEONLY_RELAYS } from '@stores/constants';
|
||||
import { chatContentAtom } from "@stores/chat";
|
||||
import { WRITEONLY_RELAYS } from "@stores/constants";
|
||||
|
||||
import { dateToUnix } from '@utils/date';
|
||||
import { useActiveAccount } from '@utils/hooks/useActiveAccount';
|
||||
import { dateToUnix } from "@utils/date";
|
||||
import { useActiveAccount } from "@utils/hooks/useActiveAccount";
|
||||
|
||||
import { useAtom } from 'jotai';
|
||||
import { useResetAtom } from 'jotai/utils';
|
||||
import { getEventHash, nip04, signEvent } from 'nostr-tools';
|
||||
import { useCallback, useContext } from 'react';
|
||||
import { useAtom } from "jotai";
|
||||
import { useResetAtom } from "jotai/utils";
|
||||
import { getEventHash, nip04, signEvent } from "nostr-tools";
|
||||
import { useCallback, useContext } from "react";
|
||||
|
||||
export default function ChatMessageForm({ receiverPubkey }: { receiverPubkey: string }) {
|
||||
const pool: any = useContext(RelayContext);
|
||||
const { account, isLoading, isError } = useActiveAccount();
|
||||
export default function ChatMessageForm({
|
||||
receiverPubkey,
|
||||
}: { receiverPubkey: string }) {
|
||||
const pool: any = useContext(RelayContext);
|
||||
const { account, isLoading, isError } = useActiveAccount();
|
||||
|
||||
const [value, setValue] = useAtom(chatContentAtom);
|
||||
const resetValue = useResetAtom(chatContentAtom);
|
||||
const [value, setValue] = useAtom(chatContentAtom);
|
||||
const resetValue = useResetAtom(chatContentAtom);
|
||||
|
||||
const encryptMessage = useCallback(
|
||||
async (privkey: string) => {
|
||||
return await nip04.encrypt(privkey, receiverPubkey, value);
|
||||
},
|
||||
[receiverPubkey, value]
|
||||
);
|
||||
const encryptMessage = useCallback(
|
||||
async (privkey: string) => {
|
||||
return await nip04.encrypt(privkey, receiverPubkey, value);
|
||||
},
|
||||
[receiverPubkey, value],
|
||||
);
|
||||
|
||||
const submitEvent = () => {
|
||||
if (!isError && !isLoading && account) {
|
||||
encryptMessage(account.privkey)
|
||||
.then((encryptedContent) => {
|
||||
const event: any = {
|
||||
content: encryptedContent,
|
||||
created_at: dateToUnix(),
|
||||
kind: 4,
|
||||
pubkey: account.pubkey,
|
||||
tags: [['p', receiverPubkey]],
|
||||
};
|
||||
event.id = getEventHash(event);
|
||||
event.sig = signEvent(event, account.privkey);
|
||||
// publish note
|
||||
pool.publish(event, WRITEONLY_RELAYS);
|
||||
// reset state
|
||||
resetValue();
|
||||
})
|
||||
.catch(console.error);
|
||||
}
|
||||
};
|
||||
const submitEvent = () => {
|
||||
if (!isError && !isLoading && account) {
|
||||
encryptMessage(account.privkey)
|
||||
.then((encryptedContent) => {
|
||||
const event: any = {
|
||||
content: encryptedContent,
|
||||
created_at: dateToUnix(),
|
||||
kind: 4,
|
||||
pubkey: account.pubkey,
|
||||
tags: [["p", receiverPubkey]],
|
||||
};
|
||||
event.id = getEventHash(event);
|
||||
event.sig = signEvent(event, account.privkey);
|
||||
// publish note
|
||||
pool.publish(event, WRITEONLY_RELAYS);
|
||||
// reset state
|
||||
resetValue();
|
||||
})
|
||||
.catch(console.error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEnterPress = (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
submitEvent();
|
||||
}
|
||||
};
|
||||
const handleEnterPress = (e) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
submitEvent();
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
<textarea
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
onKeyDown={handleEnterPress}
|
||||
spellCheck={false}
|
||||
placeholder="Message"
|
||||
className="relative h-24 w-full resize-none rounded-lg border border-black/5 px-3.5 py-3 text-sm shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
|
||||
/>
|
||||
</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>
|
||||
<div className="flex items-center gap-2">
|
||||
<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-sm 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>
|
||||
);
|
||||
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>
|
||||
<textarea
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
onKeyDown={handleEnterPress}
|
||||
spellCheck={false}
|
||||
placeholder="Message"
|
||||
className="relative h-24 w-full resize-none rounded-lg border border-black/5 px-3.5 py-3 text-sm shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
|
||||
/>
|
||||
</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-sm 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,39 +1,49 @@
|
||||
import ChatMessageUser from '@app/chat/components/messages/user';
|
||||
import { useDecryptMessage } from '@app/chat/hooks/useDecryptMessage';
|
||||
import ImagePreview from '@app/note/components/preview/image';
|
||||
import VideoPreview from '@app/note/components/preview/video';
|
||||
import ChatMessageUser from "@app/chat/components/messages/user";
|
||||
import { useDecryptMessage } from "@app/chat/hooks/useDecryptMessage";
|
||||
import ImagePreview from "@app/note/components/preview/image";
|
||||
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({
|
||||
data,
|
||||
userPubkey,
|
||||
userPrivkey,
|
||||
data,
|
||||
userPubkey,
|
||||
userPrivkey,
|
||||
}: {
|
||||
data: any;
|
||||
userPubkey: string;
|
||||
userPrivkey: string;
|
||||
data: any;
|
||||
userPubkey: string;
|
||||
userPrivkey: string;
|
||||
}) {
|
||||
const decryptedContent = useDecryptMessage(userPubkey, userPrivkey, data);
|
||||
// if we have decrypted content, use it instead of the encrypted content
|
||||
if (decryptedContent) {
|
||||
data['content'] = decryptedContent;
|
||||
}
|
||||
// parse the note content
|
||||
const content = noteParser(data);
|
||||
const decryptedContent = useDecryptMessage(userPubkey, userPrivkey, data);
|
||||
// if we have decrypted content, use it instead of the encrypted content
|
||||
if (decryptedContent) {
|
||||
data["content"] = decryptedContent;
|
||||
}
|
||||
// parse the note content
|
||||
const content = noteParser(data);
|
||||
|
||||
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 flex-col">
|
||||
<ChatMessageUser pubkey={data.pubkey} time={data.created_at} />
|
||||
<div className="-mt-[17px] pl-[48px]">
|
||||
<div className="whitespace-pre-line break-words text-sm leading-tight">{content.parsed}</div>
|
||||
{Array.isArray(content.images) && content.images.length ? <ImagePreview urls={content.images} /> : <></>}
|
||||
{Array.isArray(content.videos) && content.videos.length ? <VideoPreview urls={content.videos} /> : <></>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
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 flex-col">
|
||||
<ChatMessageUser pubkey={data.pubkey} time={data.created_at} />
|
||||
<div className="-mt-[17px] pl-[48px]">
|
||||
<div className="whitespace-pre-line break-words text-sm leading-tight">
|
||||
{content.parsed}
|
||||
</div>
|
||||
{Array.isArray(content.images) && content.images.length ? (
|
||||
<ImagePreview urls={content.images} />
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{Array.isArray(content.videos) && content.videos.length ? (
|
||||
<VideoPreview urls={content.videos} />
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -1,49 +1,56 @@
|
||||
import { Image } from '@shared/image';
|
||||
import { Image } from "@shared/image";
|
||||
|
||||
import { DEFAULT_AVATAR, IMGPROXY_URL } from '@stores/constants';
|
||||
import { DEFAULT_AVATAR, IMGPROXY_URL } from "@stores/constants";
|
||||
|
||||
import { useProfile } from '@utils/hooks/useProfile';
|
||||
import { shortenKey } from '@utils/shortenKey';
|
||||
import { useProfile } from "@utils/hooks/useProfile";
|
||||
import { shortenKey } from "@utils/shortenKey";
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import dayjs from "dayjs";
|
||||
import relativeTime from "dayjs/plugin/relativeTime";
|
||||
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
export default function ChatMessageUser({ pubkey, time }: { pubkey: string; time: number }) {
|
||||
const { user, isError, isLoading } = useProfile(pubkey);
|
||||
export default function ChatMessageUser({
|
||||
pubkey,
|
||||
time,
|
||||
}: { pubkey: string; time: number }) {
|
||||
const { user, isError, isLoading } = useProfile(pubkey);
|
||||
|
||||
return (
|
||||
<div className="group flex items-start gap-3">
|
||||
{isError || isLoading ? (
|
||||
<>
|
||||
<div className="relative h-9 w-9 shrink animate-pulse rounded-md bg-zinc-800"></div>
|
||||
<div className="flex w-full flex-1 items-start justify-between">
|
||||
<div className="flex items-baseline gap-2 text-sm">
|
||||
<div className="h-4 w-20 animate-pulse rounded bg-zinc-800"></div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="relative h-9 w-9 shrink rounded-md">
|
||||
<Image
|
||||
src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
|
||||
alt={pubkey}
|
||||
className="h-9 w-9 rounded-md object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex w-full flex-1 items-start justify-between">
|
||||
<div className="flex items-baseline gap-2 text-sm">
|
||||
<span className="font-semibold leading-none text-zinc-200 group-hover:underline">
|
||||
{user?.display_name || user?.name || shortenKey(pubkey)}
|
||||
</span>
|
||||
<span className="leading-none text-zinc-500">·</span>
|
||||
<span className="leading-none text-zinc-500">{dayjs().to(dayjs.unix(time))}</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="group flex items-start gap-3">
|
||||
{isError || isLoading ? (
|
||||
<>
|
||||
<div className="relative h-9 w-9 shrink animate-pulse rounded-md bg-zinc-800" />
|
||||
<div className="flex w-full flex-1 items-start justify-between">
|
||||
<div className="flex items-baseline gap-2 text-sm">
|
||||
<div className="h-4 w-20 animate-pulse rounded bg-zinc-800" />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="relative h-9 w-9 shrink rounded-md">
|
||||
<Image
|
||||
src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${
|
||||
user?.picture ? user.picture : DEFAULT_AVATAR
|
||||
}`}
|
||||
alt={pubkey}
|
||||
className="h-9 w-9 rounded-md object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex w-full flex-1 items-start justify-between">
|
||||
<div className="flex items-baseline gap-2 text-sm">
|
||||
<span className="font-semibold leading-none text-zinc-200 group-hover:underline">
|
||||
{user?.display_name || user?.name || shortenKey(pubkey)}
|
||||
</span>
|
||||
<span className="leading-none text-zinc-500">·</span>
|
||||
<span className="leading-none text-zinc-500">
|
||||
{dayjs().to(dayjs.unix(time))}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,55 +1,59 @@
|
||||
import { Image } from '@shared/image';
|
||||
import { Image } from "@shared/image";
|
||||
|
||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
||||
import { DEFAULT_AVATAR } from "@stores/constants";
|
||||
|
||||
import { useActiveAccount } from '@utils/hooks/useActiveAccount';
|
||||
import { usePageContext } from '@utils/hooks/usePageContext';
|
||||
import { shortenKey } from '@utils/shortenKey';
|
||||
import { useActiveAccount } from "@utils/hooks/useActiveAccount";
|
||||
import { usePageContext } from "@utils/hooks/usePageContext";
|
||||
import { shortenKey } from "@utils/shortenKey";
|
||||
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export default function ChatsListSelfItem() {
|
||||
const pageContext = usePageContext();
|
||||
const pageContext = usePageContext();
|
||||
|
||||
const searchParams: any = pageContext.urlParsed.search;
|
||||
const pagePubkey = searchParams.pubkey;
|
||||
const searchParams: any = pageContext.urlParsed.search;
|
||||
const pagePubkey = searchParams.pubkey;
|
||||
|
||||
const { account, isLoading, isError } = useActiveAccount();
|
||||
const profile = account ? JSON.parse(account.metadata) : null;
|
||||
const { account, isLoading, isError } = useActiveAccount();
|
||||
const profile = account ? JSON.parse(account.metadata) : null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{isError && <div>error</div>}
|
||||
{isLoading && !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>
|
||||
<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-sm font-medium"></div>
|
||||
</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-zinc-100 hover:dark:bg-zinc-800' : ''
|
||||
)}
|
||||
>
|
||||
<div className="relative h-5 w-5 shrink-0 rounded">
|
||||
<Image
|
||||
src={profile?.picture || DEFAULT_AVATAR}
|
||||
alt={account.pubkey}
|
||||
className="h-5 w-5 rounded bg-white object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="truncate text-[13px] font-semibold text-zinc-400">
|
||||
{profile?.display_name || profile?.name || shortenKey(account.pubkey)}{' '}
|
||||
<span className="text-zinc-500">(you)</span>
|
||||
</h5>
|
||||
</div>
|
||||
</a>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
{isError && <div>error</div>}
|
||||
{isLoading && !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-sm 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-zinc-100 hover:dark:bg-zinc-800"
|
||||
: "",
|
||||
)}
|
||||
>
|
||||
<div className="relative h-5 w-5 shrink-0 rounded">
|
||||
<Image
|
||||
src={profile?.picture || DEFAULT_AVATAR}
|
||||
alt={account.pubkey}
|
||||
className="h-5 w-5 rounded bg-white object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="truncate text-[13px] font-semibold text-zinc-400">
|
||||
{profile?.display_name ||
|
||||
profile?.name ||
|
||||
shortenKey(account.pubkey)}{" "}
|
||||
<span className="text-zinc-500">(you)</span>
|
||||
</h5>
|
||||
</div>
|
||||
</a>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,28 +1,32 @@
|
||||
import { nip04 } from 'nostr-tools';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { nip04 } from "nostr-tools";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
export function useDecryptMessage(userKey: string, userPriv: string, data: any) {
|
||||
const [content, setContent] = useState(null);
|
||||
export function useDecryptMessage(
|
||||
userKey: string,
|
||||
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 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]);
|
||||
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(() => {
|
||||
decrypt().catch(console.error);
|
||||
}, [decrypt]);
|
||||
useEffect(() => {
|
||||
decrypt().catch(console.error);
|
||||
}, [decrypt]);
|
||||
|
||||
return content ? content : null;
|
||||
return content ? content : null;
|
||||
}
|
||||
|
||||
@@ -1,29 +1,31 @@
|
||||
import AppHeader from '@shared/appHeader';
|
||||
import MultiAccounts from '@shared/multiAccounts';
|
||||
import Navigation from '@shared/navigation';
|
||||
import AppHeader from "@shared/appHeader";
|
||||
import MultiAccounts from "@shared/multiAccounts";
|
||||
import Navigation from "@shared/navigation";
|
||||
|
||||
export function LayoutChat({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-white">
|
||||
<div className="flex h-screen w-full flex-col">
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="relative h-9 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
|
||||
>
|
||||
<AppHeader />
|
||||
</div>
|
||||
<div className="relative flex min-h-0 w-full flex-1">
|
||||
<div className="relative w-[68px] shrink-0 border-r border-zinc-900">
|
||||
<MultiAccounts />
|
||||
</div>
|
||||
<div className="grid w-full grid-cols-4 xl:grid-cols-5">
|
||||
<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
|
||||
<Navigation />
|
||||
</div>
|
||||
<div className="col-span-3 m-3 overflow-hidden xl:col-span-4">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-white">
|
||||
<div className="flex h-screen w-full flex-col">
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="relative h-9 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
|
||||
>
|
||||
<AppHeader />
|
||||
</div>
|
||||
<div className="relative flex min-h-0 w-full flex-1">
|
||||
<div className="relative w-[68px] shrink-0 border-r border-zinc-900">
|
||||
<MultiAccounts />
|
||||
</div>
|
||||
<div className="grid w-full grid-cols-4 xl:grid-cols-5">
|
||||
<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
|
||||
<Navigation />
|
||||
</div>
|
||||
<div className="col-span-3 m-3 overflow-hidden xl:col-span-4">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,80 +1,80 @@
|
||||
import ChatMessageForm from '@app/chat/components/messages/form';
|
||||
import ChatMessageForm from "@app/chat/components/messages/form";
|
||||
|
||||
import { RelayContext } from '@shared/relayProvider';
|
||||
import { RelayContext } from "@shared/relayProvider";
|
||||
|
||||
import { chatMessagesAtom } from '@stores/chat';
|
||||
import { READONLY_RELAYS } from '@stores/constants';
|
||||
import { chatMessagesAtom } from "@stores/chat";
|
||||
import { READONLY_RELAYS } from "@stores/constants";
|
||||
|
||||
import { useActiveAccount } from '@utils/hooks/useActiveAccount';
|
||||
import { usePageContext } from '@utils/hooks/usePageContext';
|
||||
import { useActiveAccount } from "@utils/hooks/useActiveAccount";
|
||||
import { usePageContext } from "@utils/hooks/usePageContext";
|
||||
|
||||
import { useSetAtom } from 'jotai';
|
||||
import { useResetAtom } from 'jotai/utils';
|
||||
import { Suspense, lazy, useContext, useEffect } from 'react';
|
||||
import useSWRSubscription from 'swr/subscription';
|
||||
import { useSetAtom } from "jotai";
|
||||
import { useResetAtom } from "jotai/utils";
|
||||
import { Suspense, lazy, useContext, useEffect } from "react";
|
||||
import useSWRSubscription from "swr/subscription";
|
||||
|
||||
const ChatMessageList = lazy(() => import('@app/chat/components/messageList'));
|
||||
const ChatMessageList = lazy(() => import("@app/chat/components/messageList"));
|
||||
|
||||
export function Page() {
|
||||
const pool: any = useContext(RelayContext);
|
||||
const pageContext = usePageContext();
|
||||
const searchParams: any = pageContext.urlParsed.search;
|
||||
const pool: any = useContext(RelayContext);
|
||||
const pageContext = usePageContext();
|
||||
const searchParams: any = pageContext.urlParsed.search;
|
||||
|
||||
const pubkey = searchParams.pubkey;
|
||||
const pubkey = searchParams.pubkey;
|
||||
|
||||
const { account } = useActiveAccount();
|
||||
const { account } = useActiveAccount();
|
||||
|
||||
const setChatMessages = useSetAtom(chatMessagesAtom);
|
||||
const resetChatMessages = useResetAtom(chatMessagesAtom);
|
||||
const setChatMessages = useSetAtom(chatMessagesAtom);
|
||||
const resetChatMessages = useResetAtom(chatMessagesAtom);
|
||||
|
||||
useSWRSubscription(account ? ['chat', pubkey] : null, ([, key], {}: any) => {
|
||||
const unsubscribe = pool.subscribe(
|
||||
[
|
||||
{
|
||||
kinds: [4],
|
||||
authors: [key],
|
||||
'#p': [account.pubkey],
|
||||
limit: 20,
|
||||
},
|
||||
{
|
||||
kinds: [4],
|
||||
authors: [account.pubkey],
|
||||
'#p': [key],
|
||||
limit: 20,
|
||||
},
|
||||
],
|
||||
READONLY_RELAYS,
|
||||
(event: any) => {
|
||||
setChatMessages((prev) => [...prev, event]);
|
||||
}
|
||||
);
|
||||
useSWRSubscription(account ? ["chat", pubkey] : null, ([, key]) => {
|
||||
const unsubscribe = pool.subscribe(
|
||||
[
|
||||
{
|
||||
kinds: [4],
|
||||
authors: [key],
|
||||
"#p": [account.pubkey],
|
||||
limit: 20,
|
||||
},
|
||||
{
|
||||
kinds: [4],
|
||||
authors: [account.pubkey],
|
||||
"#p": [key],
|
||||
limit: 20,
|
||||
},
|
||||
],
|
||||
READONLY_RELAYS,
|
||||
(event: any) => {
|
||||
setChatMessages((prev) => [...prev, event]);
|
||||
},
|
||||
);
|
||||
|
||||
return () => {
|
||||
unsubscribe();
|
||||
};
|
||||
});
|
||||
return () => {
|
||||
unsubscribe();
|
||||
};
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
let ignore = false;
|
||||
useEffect(() => {
|
||||
let ignore = false;
|
||||
|
||||
if (!ignore) {
|
||||
// reset chat messages
|
||||
resetChatMessages();
|
||||
}
|
||||
if (!ignore) {
|
||||
// reset chat messages
|
||||
resetChatMessages();
|
||||
}
|
||||
|
||||
return () => {
|
||||
ignore = true;
|
||||
};
|
||||
});
|
||||
return () => {
|
||||
ignore = true;
|
||||
};
|
||||
});
|
||||
|
||||
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">
|
||||
<Suspense fallback={<p>Loading...</p>}>
|
||||
<ChatMessageList />
|
||||
</Suspense>
|
||||
<div className="shrink-0 p-3">
|
||||
<ChatMessageForm receiverPubkey={pubkey} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
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">
|
||||
<Suspense fallback={<p>Loading...</p>}>
|
||||
<ChatMessageList />
|
||||
</Suspense>
|
||||
<div className="shrink-0 p-3">
|
||||
<ChatMessageForm receiverPubkey={pubkey} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user