mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-14 09:13:31 +00:00
wip: new chat screen
This commit is contained in:
Ren Amamiya
parent
ca57ef1760
commit
480580890e
40
src/app.tsx
40
src/app.tsx
@ -6,6 +6,7 @@ import { ReactFlowProvider } from 'reactflow';
|
||||
import { AuthCreateScreen } from '@app/auth/create';
|
||||
import { AuthImportScreen } from '@app/auth/import';
|
||||
import { OnboardingScreen } from '@app/auth/onboarding';
|
||||
import { ChatsScreen } from '@app/chats';
|
||||
import { ErrorScreen } from '@app/error';
|
||||
import { ExploreScreen } from '@app/explore';
|
||||
|
||||
@ -83,13 +84,6 @@ export default function App() {
|
||||
return { Component: UserScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'chats/:pubkey',
|
||||
async lazy() {
|
||||
const { ChatScreen } = await import('@app/chats');
|
||||
return { Component: ChatScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'notifications',
|
||||
async lazy() {
|
||||
@ -104,15 +98,6 @@ export default function App() {
|
||||
return { Component: NWCScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'explore',
|
||||
element: (
|
||||
<ReactFlowProvider>
|
||||
<ExploreScreen />
|
||||
</ReactFlowProvider>
|
||||
),
|
||||
errorElement: <ErrorScreen />,
|
||||
},
|
||||
{
|
||||
path: 'relays',
|
||||
async lazy() {
|
||||
@ -135,6 +120,29 @@ export default function App() {
|
||||
return { Component: CommunitiesScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'explore',
|
||||
element: (
|
||||
<ReactFlowProvider>
|
||||
<ExploreScreen />
|
||||
</ReactFlowProvider>
|
||||
),
|
||||
errorElement: <ErrorScreen />,
|
||||
},
|
||||
{
|
||||
path: 'chats',
|
||||
element: <ChatsScreen />,
|
||||
errorElement: <ErrorScreen />,
|
||||
children: [
|
||||
{
|
||||
path: 'chat/:pubkey',
|
||||
async lazy() {
|
||||
const { ChatScreen } = await import('@app/chats/chat');
|
||||
return { Component: ChatScreen };
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
108
src/app/chats/chat.tsx
Normal file
108
src/app/chats/chat.tsx
Normal file
@ -0,0 +1,108 @@
|
||||
import { NDKEvent, NDKSubscription } from '@nostr-dev-kit/ndk';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useCallback, useEffect, useRef } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { VList, VListHandle } from 'virtua';
|
||||
|
||||
import { ChatMessageForm } from '@app/chats/components/messages/form';
|
||||
import { ChatMessageItem } from '@app/chats/components/messages/item';
|
||||
|
||||
import { useNDK } from '@libs/ndk/provider';
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { LoaderIcon } from '@shared/icons';
|
||||
|
||||
import { useStronghold } from '@stores/stronghold';
|
||||
|
||||
import { useNostr } from '@utils/hooks/useNostr';
|
||||
|
||||
export function ChatScreen() {
|
||||
const listRef = useRef<VListHandle>(null);
|
||||
const userPrivkey = useStronghold((state) => state.privkey);
|
||||
|
||||
const { db } = useStorage();
|
||||
const { ndk } = useNDK();
|
||||
const { pubkey } = useParams();
|
||||
const { fetchNIP04Messages } = useNostr();
|
||||
const { status, data } = useQuery(['nip04-dm', pubkey], async () => {
|
||||
return await fetchNIP04Messages(pubkey);
|
||||
});
|
||||
|
||||
const renderItem = useCallback(
|
||||
(message: NDKEvent) => {
|
||||
return (
|
||||
<ChatMessageItem
|
||||
message={message}
|
||||
userPubkey={db.account.pubkey}
|
||||
userPrivkey={userPrivkey}
|
||||
/>
|
||||
);
|
||||
},
|
||||
[data]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (data.length > 0) listRef.current?.scrollToIndex(data.length);
|
||||
}, [data]);
|
||||
|
||||
useEffect(() => {
|
||||
const sub: NDKSubscription = ndk.subscribe(
|
||||
{
|
||||
kinds: [4],
|
||||
authors: [db.account.pubkey],
|
||||
'#p': [pubkey],
|
||||
since: Math.floor(Date.now() / 1000),
|
||||
},
|
||||
{
|
||||
closeOnEose: false,
|
||||
}
|
||||
);
|
||||
|
||||
sub.addListener('event', (event) => {
|
||||
console.log(event);
|
||||
});
|
||||
|
||||
return () => {
|
||||
sub.stop();
|
||||
};
|
||||
}, [pubkey]);
|
||||
|
||||
return (
|
||||
<div className="grid h-full w-full grid-cols-3 bg-white/10 backdrop-blur-xl">
|
||||
<div className="col-span-2 border-r border-white/5">
|
||||
<div className="h-full w-full flex-1 p-3">
|
||||
<div className="flex h-full flex-col justify-between overflow-hidden rounded-xl bg-white/10 backdrop-blur-xl">
|
||||
<div className="h-full w-full flex-1">
|
||||
{status === 'loading' ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-1.5">
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
|
||||
<p className="text-sm font-medium text-white/50">Loading messages</p>
|
||||
</div>
|
||||
</div>
|
||||
) : data.length === 0 ? (
|
||||
<div className="absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 transform flex-col gap-1 text-center">
|
||||
<h3 className="mb-2 text-4xl">🙌</h3>
|
||||
<p className="leading-none text-white/50">
|
||||
You two didn't talk yet, let's send first message
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<VList ref={listRef} className="scrollbar-hide h-full" mode="reverse">
|
||||
{data.map((message) => renderItem(message))}
|
||||
</VList>
|
||||
)}
|
||||
</div>
|
||||
<div className="z-50 shrink-0 rounded-b-xl border-t border-white/5 bg-white/10 p-3 px-5 backdrop-blur-xl">
|
||||
<ChatMessageForm
|
||||
receiverPubkey={pubkey}
|
||||
userPubkey={db.account.pubkey}
|
||||
userPrivkey={userPrivkey}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,13 +1,30 @@
|
||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||
import * as Avatar from '@radix-ui/react-avatar';
|
||||
import { minidenticon } from 'minidenticons';
|
||||
import { memo } from 'react';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
import { Image } from '@shared/image';
|
||||
import { useDecryptMessage } from '@app/chats/hooks/useDecryptMessage';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { useStronghold } from '@stores/stronghold';
|
||||
|
||||
import { formatCreatedAt } from '@utils/createdAt';
|
||||
import { useProfile } from '@utils/hooks/useProfile';
|
||||
import { displayNpub } from '@utils/shortenKey';
|
||||
|
||||
export function ChatsListItem({ pubkey }: { pubkey: string }) {
|
||||
const { status, user } = useProfile(pubkey);
|
||||
export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEvent }) {
|
||||
const { db } = useStorage();
|
||||
const { status, user } = useProfile(event.pubkey);
|
||||
|
||||
const privkey = useStronghold((state) => state.privkey);
|
||||
const decryptedContent = useDecryptMessage(event, db.account.pubkey, privkey);
|
||||
|
||||
const createdAt = formatCreatedAt(event.created_at, true);
|
||||
const svgURI =
|
||||
'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(event.pubkey, 90, 50));
|
||||
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
@ -20,30 +37,48 @@ export function ChatsListItem({ pubkey }: { pubkey: string }) {
|
||||
|
||||
return (
|
||||
<NavLink
|
||||
to={`/chats/${pubkey}`}
|
||||
to={`/chats/chat/${event.pubkey}`}
|
||||
preventScrollReset={true}
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3',
|
||||
'flex items-center gap-2.5 px-3 py-2 hover:bg-white/10',
|
||||
isActive
|
||||
? 'border-fuchsia-500 bg-white/5 text-white'
|
||||
: 'border-transparent text-white/70'
|
||||
)
|
||||
}
|
||||
>
|
||||
<Image
|
||||
src={user?.picture || user?.image}
|
||||
alt={pubkey}
|
||||
className="h-7 w-7 shrink-0 rounded"
|
||||
/>
|
||||
<div className="inline-flex w-full flex-1 items-center justify-between">
|
||||
<h5 className="max-w-[10rem] truncate">
|
||||
<Avatar.Root className="shrink-0">
|
||||
<Avatar.Image
|
||||
src={user?.picture || user?.image}
|
||||
alt={event.pubkey}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
style={{ contentVisibility: 'auto' }}
|
||||
className="h-10 w-10 rounded-lg"
|
||||
/>
|
||||
<Avatar.Fallback delayMs={300}>
|
||||
<img
|
||||
src={svgURI}
|
||||
alt={event.pubkey}
|
||||
className="h-10 w-10 rounded-lg border border-white/5 bg-black"
|
||||
/>
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<div className="flex w-full flex-col">
|
||||
<h5 className="max-w-[10rem] truncate font-semibold text-white">
|
||||
{user?.name ||
|
||||
user?.display_name ||
|
||||
user?.displayName ||
|
||||
displayNpub(pubkey, 16)}
|
||||
displayNpub(event.pubkey, 16)}
|
||||
</h5>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<p className="max-w-[8rem] truncate text-sm text-white/70">
|
||||
{decryptedContent}
|
||||
</p>
|
||||
<p className="text-sm text-white/70">{createdAt}</p>
|
||||
</div>
|
||||
</div>
|
||||
</NavLink>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,54 +0,0 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useCallback } from 'react';
|
||||
|
||||
import { ChatsListItem } from '@app/chats/components/item';
|
||||
import { NewMessageModal } from '@app/chats/components/modal';
|
||||
import { UnknownsModal } from '@app/chats/components/unknowns';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { LoaderIcon } from '@shared/icons';
|
||||
|
||||
import { useNostr } from '@utils/hooks/useNostr';
|
||||
|
||||
export function ChatsList() {
|
||||
const { db } = useStorage();
|
||||
const { fetchNIP04Chats } = useNostr();
|
||||
const { status, data: chats } = useQuery(
|
||||
['nip04-chats'],
|
||||
async () => {
|
||||
return await fetchNIP04Chats();
|
||||
},
|
||||
{ refetchOnWindowFocus: false }
|
||||
);
|
||||
|
||||
const renderItem = useCallback(
|
||||
(item: string) => {
|
||||
if (db.account.pubkey !== item) {
|
||||
return <ChatsListItem key={item} pubkey={item} />;
|
||||
}
|
||||
},
|
||||
[chats]
|
||||
);
|
||||
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<div className="inline-flex h-10 items-center gap-2.5 border-l-2 border-transparent pl-4">
|
||||
<div className="relative inline-flex h-7 w-7 shrink-0 items-center justify-center">
|
||||
<LoaderIcon className="h-4 w-4 animate-spin text-white" />
|
||||
</div>
|
||||
<h5 className="text-white/50">Loading messages...</h5>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
{chats?.follows?.map((item) => renderItem(item))}
|
||||
{chats?.unknowns?.length > 0 && <UnknownsModal data={chats.unknowns} />}
|
||||
<NewMessageModal />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -23,17 +23,15 @@ export function NewMessageModal() {
|
||||
<Dialog.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 border-transparent pl-4 pr-3"
|
||||
className="inline-flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 border-transparent px-3"
|
||||
>
|
||||
<div className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||
<PlusIcon className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="text-white/50">New chat</h5>
|
||||
<div className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
|
||||
<PlusIcon className="h-5 w-5" />
|
||||
</div>
|
||||
<h5 className="font-medium text-white/50">New message</h5>
|
||||
</button>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal className="relative z-10">
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
|
||||
<Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
|
||||
<div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
|
||||
|
||||
@ -1,52 +0,0 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { Image } from '@shared/image';
|
||||
import { NIP05 } from '@shared/nip05';
|
||||
|
||||
import { useProfile } from '@utils/hooks/useProfile';
|
||||
import { displayNpub } from '@utils/shortenKey';
|
||||
|
||||
export function ChatSidebar({ pubkey }: { pubkey: string }) {
|
||||
const { user } = 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 || user?.image}
|
||||
alt={pubkey}
|
||||
className="h-11 w-11 rounded-md object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h3 className="text-lg font-semibold leading-none">
|
||||
{user?.name || user?.display_name || user?.displayName}
|
||||
</h3>
|
||||
{user?.nip05 ? (
|
||||
<NIP05
|
||||
pubkey={pubkey}
|
||||
nip05={user?.nip05}
|
||||
className="leading-none text-white/50"
|
||||
/>
|
||||
) : (
|
||||
<span className="leading-none text-white/50">
|
||||
{displayNpub(pubkey, 16)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p className="leading-tight">{user?.bio || user?.about}</p>
|
||||
<Link
|
||||
to={`/users/${pubkey}`}
|
||||
className="mt-3 inline-flex h-10 w-full items-center justify-center rounded-md bg-white/10 text-sm font-medium text-white backdrop-blur-xl hover:bg-fuchsia-500"
|
||||
>
|
||||
View full profile
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,79 +0,0 @@
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { CancelIcon, StrangersIcon } from '@shared/icons';
|
||||
import { User } from '@shared/user';
|
||||
|
||||
import { compactNumber } from '@utils/number';
|
||||
|
||||
export function UnknownsModal({ data }: { data: string[] }) {
|
||||
const navigate = useNavigate();
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const openChat = (pubkey: string) => {
|
||||
setOpen(false);
|
||||
navigate(`/chats/${pubkey}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog.Root open={open} onOpenChange={setOpen}>
|
||||
<Dialog.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 border-transparent pl-4 pr-3"
|
||||
>
|
||||
<div className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||
<StrangersIcon className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="text-white/50">
|
||||
{compactNumber.format(data.length)} unknowns
|
||||
</h5>
|
||||
</div>
|
||||
</button>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal className="relative z-10">
|
||||
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
|
||||
<Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
|
||||
<div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
|
||||
<div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<Dialog.Title className="text-lg font-semibold leading-none text-white">
|
||||
{data.length} unknowns
|
||||
</Dialog.Title>
|
||||
<Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-white/10">
|
||||
<CancelIcon className="h-4 w-4 text-white/50" />
|
||||
</Dialog.Close>
|
||||
</div>
|
||||
<Dialog.Description className="text-sm leading-none text-white/50">
|
||||
All messages from people you not follow
|
||||
</Dialog.Description>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-[500px] flex-col overflow-y-auto overflow-x-hidden pb-2 pt-2">
|
||||
{data.map((pubkey) => (
|
||||
<div
|
||||
key={pubkey}
|
||||
className="group flex items-center justify-between px-4 py-2 hover:bg-white/10"
|
||||
>
|
||||
<User pubkey={pubkey} variant="simple" />
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openChat(pubkey)}
|
||||
className="hidden w-max rounded bg-white/10 px-3 py-1 text-sm font-medium hover:bg-fuchsia-500 group-hover:inline-flex"
|
||||
>
|
||||
Chat
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
@ -2,24 +2,24 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||
import { nip04 } from 'nostr-tools';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export function useDecryptMessage(
|
||||
message: NDKEvent,
|
||||
userPubkey: string,
|
||||
userPriv: string
|
||||
) {
|
||||
export function useDecryptMessage(message: NDKEvent, pubkey: string, privkey: string) {
|
||||
const [content, setContent] = useState(message.content);
|
||||
|
||||
useEffect(() => {
|
||||
async function decrypt() {
|
||||
const pubkey =
|
||||
userPubkey === message.pubkey
|
||||
? message.tags.find((el) => el[0] === 'p')[1]
|
||||
: message.pubkey;
|
||||
const result = await nip04.decrypt(userPriv, pubkey, message.content);
|
||||
setContent(result);
|
||||
async function decryptContent() {
|
||||
try {
|
||||
const sender =
|
||||
pubkey === message.pubkey
|
||||
? message.tags.find((el) => el[0] === 'p')[1]
|
||||
: message.pubkey;
|
||||
const result = await nip04.decrypt(privkey, sender, message.content);
|
||||
setContent(result);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
decrypt().catch(console.error);
|
||||
decryptContent();
|
||||
}, []);
|
||||
|
||||
return content;
|
||||
|
||||
@ -1,111 +1,55 @@
|
||||
import { NDKEvent, NDKSubscription } from '@nostr-dev-kit/ndk';
|
||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useCallback, useEffect, useRef } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { VList, VListHandle } from 'virtua';
|
||||
import { useCallback } from 'react';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
|
||||
import { ChatMessageForm } from '@app/chats/components/messages/form';
|
||||
import { ChatMessageItem } from '@app/chats/components/messages/item';
|
||||
import { ChatSidebar } from '@app/chats/components/sidebar';
|
||||
import { ChatListItem } from '@app/chats/components/item';
|
||||
|
||||
import { useNDK } from '@libs/ndk/provider';
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { LoaderIcon } from '@shared/icons';
|
||||
|
||||
import { useStronghold } from '@stores/stronghold';
|
||||
|
||||
import { useNostr } from '@utils/hooks/useNostr';
|
||||
|
||||
export function ChatScreen() {
|
||||
const listRef = useRef<VListHandle>(null);
|
||||
const userPrivkey = useStronghold((state) => state.privkey);
|
||||
|
||||
export function ChatsScreen() {
|
||||
const { db } = useStorage();
|
||||
const { ndk } = useNDK();
|
||||
const { pubkey } = useParams();
|
||||
const { fetchNIP04Messages } = useNostr();
|
||||
const { status, data } = useQuery(['nip04-dm', pubkey], async () => {
|
||||
return await fetchNIP04Messages(pubkey);
|
||||
});
|
||||
const { getAllNIP04Chats } = useNostr();
|
||||
const { status, data } = useQuery(
|
||||
['nip04-chats'],
|
||||
async () => {
|
||||
return await getAllNIP04Chats();
|
||||
},
|
||||
{ refetchOnWindowFocus: false }
|
||||
);
|
||||
|
||||
const renderItem = useCallback(
|
||||
(message: NDKEvent) => {
|
||||
return (
|
||||
<ChatMessageItem
|
||||
message={message}
|
||||
userPubkey={db.account.pubkey}
|
||||
userPrivkey={userPrivkey}
|
||||
/>
|
||||
);
|
||||
(event: NDKEvent) => {
|
||||
if (db.account.pubkey !== event.pubkey) {
|
||||
return <ChatListItem key={event.id} event={event} />;
|
||||
}
|
||||
},
|
||||
[data]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (data.length > 0) listRef.current?.scrollToIndex(data.length);
|
||||
}, [data]);
|
||||
|
||||
useEffect(() => {
|
||||
const sub: NDKSubscription = ndk.subscribe(
|
||||
{
|
||||
kinds: [4],
|
||||
authors: [db.account.pubkey],
|
||||
'#p': [pubkey],
|
||||
since: Math.floor(Date.now() / 1000),
|
||||
},
|
||||
{
|
||||
closeOnEose: false,
|
||||
}
|
||||
);
|
||||
|
||||
sub.addListener('event', (event) => {
|
||||
console.log(event);
|
||||
});
|
||||
|
||||
return () => {
|
||||
sub.stop();
|
||||
};
|
||||
}, [pubkey]);
|
||||
|
||||
return (
|
||||
<div className="grid h-full w-full grid-cols-3 bg-white/10 backdrop-blur-xl">
|
||||
<div className="col-span-2 border-r border-white/5">
|
||||
<div className="h-full w-full flex-1 p-3">
|
||||
<div className="flex h-full flex-col justify-between overflow-hidden rounded-xl bg-white/10 backdrop-blur-xl">
|
||||
<div className="h-full w-full flex-1">
|
||||
{status === 'loading' ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-1.5">
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
|
||||
<p className="text-sm font-medium text-white/50">Loading messages</p>
|
||||
</div>
|
||||
</div>
|
||||
) : data.length === 0 ? (
|
||||
<div className="absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 transform flex-col gap-1 text-center">
|
||||
<h3 className="mb-2 text-4xl">🙌</h3>
|
||||
<p className="leading-none text-white/50">
|
||||
You two didn't talk yet, let's send first message
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<VList ref={listRef} className="scrollbar-hide h-full" mode="reverse">
|
||||
{data.map((message) => renderItem(message))}
|
||||
</VList>
|
||||
)}
|
||||
<div className="grid h-full w-full grid-cols-3">
|
||||
<div className="scrollbar-hide col-span-1 h-full overflow-y-auto border-r border-white/5">
|
||||
<div className="h-16 w-full shrink-0 border-b border-white/5" />
|
||||
<div className="flex h-full flex-col gap-1 py-2">
|
||||
{status === 'loading' ? (
|
||||
<div className="flex h-full w-full items-center justify-center pb-16">
|
||||
<div className="inline-flex flex-col items-center justify-center gap-2">
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
|
||||
<h5 className="text-white/50">Loading messages...</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div className="z-50 shrink-0 rounded-b-xl border-t border-white/5 bg-white/10 p-3 px-5 backdrop-blur-xl">
|
||||
<ChatMessageForm
|
||||
receiverPubkey={pubkey}
|
||||
userPubkey={db.account.pubkey}
|
||||
userPrivkey={userPrivkey}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
data.map((item) => renderItem(item))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-1 pt-3">
|
||||
<ChatSidebar pubkey={pubkey} />
|
||||
<div className="col-span-2">
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -50,15 +50,15 @@ input::-ms-clear {
|
||||
}
|
||||
|
||||
.markdown {
|
||||
@apply prose prose-white max-w-none select-text text-white prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
|
||||
@apply prose prose-white max-w-none select-text whitespace-pre-line text-white prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
|
||||
}
|
||||
|
||||
.markdown-article {
|
||||
@apply prose prose-white max-w-none select-text text-white/80 prose-headings:mb-1 prose-headings:mt-3 prose-headings:text-white prose-p:mb-2 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
|
||||
@apply prose prose-white max-w-none select-text whitespace-pre-line text-white/80 prose-headings:mb-1 prose-headings:mt-3 prose-headings:text-white prose-p:mb-2 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
|
||||
}
|
||||
|
||||
.markdown-simple {
|
||||
@apply prose prose-white max-w-none select-text hyphens-auto text-white/70 prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
|
||||
@apply prose prose-white max-w-none select-text hyphens-auto whitespace-pre-line text-white/70 prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
|
||||
}
|
||||
|
||||
.ProseMirror p.is-empty::before {
|
||||
|
||||
@ -52,7 +52,7 @@ export function ActiveAccount() {
|
||||
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<div className="inline-flex h-16 items-center gap-2.5 border-l-2 border-transparent pb-2 pl-4 pr-2">
|
||||
<div className="inline-flex h-16 items-center gap-2.5 border-l-2 border-transparent px-3 pb-2">
|
||||
<div className="relative h-10 w-10 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
|
||||
<div className="h-2.5 w-2/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
|
||||
</div>
|
||||
@ -60,7 +60,7 @@ export function ActiveAccount() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-16 items-center justify-between border-l-2 border-transparent pb-2 pl-4 pr-3">
|
||||
<div className="flex h-16 items-center justify-between border-l-2 border-transparent px-3 pb-1">
|
||||
<Link to={`/users/${db.account.pubkey}`} className="flex items-center gap-1.5">
|
||||
<Image
|
||||
src={user?.picture || user?.image}
|
||||
@ -76,12 +76,12 @@ export function ActiveAccount() {
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="inline-flex divide-x divide-white/5 rounded-lg border-t border-white/10 bg-white/20">
|
||||
<div className="inline-flex divide-x divide-white/5 rounded-lg border-t border-white/5 bg-white/10">
|
||||
<Link
|
||||
to="/settings/"
|
||||
className="inline-flex h-9 w-9 items-center justify-center hover:bg-white/10"
|
||||
className="inline-flex h-9 w-9 items-center justify-center rounded-l-lg hover:bg-white/10"
|
||||
>
|
||||
<SettingsIcon className="h-4 w-4 text-white" />
|
||||
<SettingsIcon className="h-5 w-5 text-white" />
|
||||
</Link>
|
||||
<Logout />
|
||||
</div>
|
||||
|
||||
21
src/shared/icons/chats.tsx
Normal file
21
src/shared/icons/chats.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import { SVGProps } from 'react';
|
||||
|
||||
export function ChatsIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
d="M19.002 3a3 3 0 013 3v6a3 3 0 01-3 3h-1v1a3 3 0 01-3 3h-4.24l-4.274 2.374a1 1 0 01-1.486-.874V19a3 3 0 01-3-3v-6a3 3 0 013-3h1V6a3 3 0 013-3h10zm-11 4h7a3 3 0 013 3v3h1a1 1 0 001-1V6a1 1 0 00-1-1h-10a1 1 0 00-1 1v1z"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@ -71,3 +71,4 @@ export * from './relay';
|
||||
export * from './explore';
|
||||
export * from './explore2';
|
||||
export * from './home';
|
||||
export * from './chats';
|
||||
|
||||
@ -27,9 +27,9 @@ export function Logout() {
|
||||
<AlertDialog.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-9 w-9 items-center justify-center hover:bg-white/10"
|
||||
className="inline-flex h-9 w-9 items-center justify-center rounded-r-lg hover:bg-white/10"
|
||||
>
|
||||
<LogoutIcon className="h-4 w-4 text-white" />
|
||||
<LogoutIcon className="h-5 w-5 text-white" />
|
||||
</button>
|
||||
</AlertDialog.Trigger>
|
||||
<AlertDialog.Portal>
|
||||
|
||||
@ -9,6 +9,7 @@ import { Frame } from '@shared/frame';
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
ArrowRightIcon,
|
||||
ChatsIcon,
|
||||
ExploreIcon,
|
||||
HomeIcon,
|
||||
RelayIcon,
|
||||
@ -52,15 +53,15 @@ export function Navigation() {
|
||||
</div>
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="scrollbar-hide flex h-full flex-1 flex-col gap-6 overflow-y-auto pb-32"
|
||||
className="scrollbar-hide flex h-full flex-1 flex-col gap-6 overflow-y-auto pr-3"
|
||||
>
|
||||
<div className="flex flex-col pr-3">
|
||||
<div className="flex flex-col">
|
||||
<NavLink
|
||||
to="/"
|
||||
preventScrollReset={true}
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3 font-medium',
|
||||
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
|
||||
isActive
|
||||
? 'border-fuchsia-500 bg-white/5 text-white'
|
||||
: 'border-transparent text-white/70'
|
||||
@ -72,12 +73,29 @@ export function Navigation() {
|
||||
</span>
|
||||
Home
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/chats"
|
||||
preventScrollReset={true}
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
|
||||
isActive
|
||||
? 'border-fuchsia-500 bg-white/5 text-white'
|
||||
: 'border-transparent text-white/70'
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
|
||||
<ChatsIcon className="h-5 w-5" />
|
||||
</span>
|
||||
Chats
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/relays"
|
||||
preventScrollReset={true}
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3 font-medium',
|
||||
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
|
||||
isActive
|
||||
? 'border-fuchsia-500 bg-white/5 text-white'
|
||||
: 'border-transparent text-white/70'
|
||||
@ -94,7 +112,7 @@ export function Navigation() {
|
||||
preventScrollReset={true}
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3 font-medium',
|
||||
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
|
||||
isActive
|
||||
? 'border-fuchsia-500 bg-white/5 text-white'
|
||||
: 'border-transparent text-white/70'
|
||||
|
||||
@ -23,7 +23,7 @@ export function TextNote(props: { content?: string }) {
|
||||
<ReactMarkdown
|
||||
className="markdown"
|
||||
remarkPlugins={[remarkGfm]}
|
||||
disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6']}
|
||||
disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']}
|
||||
unwrapDisallowed={true}
|
||||
linkTarget={'_blank'}
|
||||
>
|
||||
|
||||
@ -168,23 +168,6 @@ export function useNostr() {
|
||||
}
|
||||
};
|
||||
|
||||
const fetchNIP04Chats = async () => {
|
||||
const events = await fetcher.fetchAllEvents(
|
||||
relayUrls,
|
||||
{
|
||||
kinds: [NDKKind.EncryptedDirectMessage],
|
||||
'#p': [db.account.pubkey],
|
||||
},
|
||||
{ since: 0 }
|
||||
);
|
||||
|
||||
const senders = events.map((e) => e.pubkey);
|
||||
const follows = new Set(senders.filter((el) => db.account.follows.includes(el)));
|
||||
const unknowns = new Set(senders.filter((el) => !db.account.follows.includes(el)));
|
||||
|
||||
return { follows: [...follows], unknowns: [...unknowns] };
|
||||
};
|
||||
|
||||
const fetchNIP04Messages = async (sender: string) => {
|
||||
let senderMessages: NostrEventExt<false>[] = [];
|
||||
|
||||
@ -258,6 +241,32 @@ export function useNostr() {
|
||||
return events;
|
||||
};
|
||||
|
||||
const getAllNIP04Chats = async () => {
|
||||
const events = await fetcher.fetchAllEvents(
|
||||
relayUrls,
|
||||
{
|
||||
kinds: [NDKKind.EncryptedDirectMessage],
|
||||
'#p': [db.account.pubkey],
|
||||
},
|
||||
{ since: 0 }
|
||||
);
|
||||
|
||||
const dedup: NDKEvent[] = Object.values(
|
||||
events.reduce((ev, { id, content, pubkey, created_at, tags }) => {
|
||||
if (ev[pubkey]) {
|
||||
if (ev[pubkey].created_at < created_at) {
|
||||
ev[pubkey] = { id, content, pubkey, created_at, tags };
|
||||
}
|
||||
} else {
|
||||
ev[pubkey] = { id, content, pubkey, created_at, tags };
|
||||
}
|
||||
return ev;
|
||||
}, {})
|
||||
);
|
||||
|
||||
return dedup;
|
||||
};
|
||||
|
||||
const getAllEventsSinceLastLogin = async (customSince?: number) => {
|
||||
try {
|
||||
let since: number;
|
||||
@ -465,9 +474,9 @@ export function useNostr() {
|
||||
fetchUserData,
|
||||
addContact,
|
||||
removeContact,
|
||||
getAllNIP04Chats,
|
||||
getAllEventsSinceLastLogin,
|
||||
fetchActivities,
|
||||
fetchNIP04Chats,
|
||||
fetchNIP04Messages,
|
||||
fetchAllReplies,
|
||||
publish,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user