mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
wip: new chat screen
This commit is contained in:
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 { AuthCreateScreen } from '@app/auth/create';
|
||||||
import { AuthImportScreen } from '@app/auth/import';
|
import { AuthImportScreen } from '@app/auth/import';
|
||||||
import { OnboardingScreen } from '@app/auth/onboarding';
|
import { OnboardingScreen } from '@app/auth/onboarding';
|
||||||
|
import { ChatsScreen } from '@app/chats';
|
||||||
import { ErrorScreen } from '@app/error';
|
import { ErrorScreen } from '@app/error';
|
||||||
import { ExploreScreen } from '@app/explore';
|
import { ExploreScreen } from '@app/explore';
|
||||||
|
|
||||||
@ -83,13 +84,6 @@ export default function App() {
|
|||||||
return { Component: UserScreen };
|
return { Component: UserScreen };
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: 'chats/:pubkey',
|
|
||||||
async lazy() {
|
|
||||||
const { ChatScreen } = await import('@app/chats');
|
|
||||||
return { Component: ChatScreen };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: 'notifications',
|
path: 'notifications',
|
||||||
async lazy() {
|
async lazy() {
|
||||||
@ -104,15 +98,6 @@ export default function App() {
|
|||||||
return { Component: NWCScreen };
|
return { Component: NWCScreen };
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: 'explore',
|
|
||||||
element: (
|
|
||||||
<ReactFlowProvider>
|
|
||||||
<ExploreScreen />
|
|
||||||
</ReactFlowProvider>
|
|
||||||
),
|
|
||||||
errorElement: <ErrorScreen />,
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: 'relays',
|
path: 'relays',
|
||||||
async lazy() {
|
async lazy() {
|
||||||
@ -135,6 +120,29 @@ export default function App() {
|
|||||||
return { Component: CommunitiesScreen };
|
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 { NavLink } from 'react-router-dom';
|
||||||
import { twMerge } from 'tailwind-merge';
|
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 { useProfile } from '@utils/hooks/useProfile';
|
||||||
import { displayNpub } from '@utils/shortenKey';
|
import { displayNpub } from '@utils/shortenKey';
|
||||||
|
|
||||||
export function ChatsListItem({ pubkey }: { pubkey: string }) {
|
export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEvent }) {
|
||||||
const { status, user } = useProfile(pubkey);
|
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') {
|
if (status === 'loading') {
|
||||||
return (
|
return (
|
||||||
@ -20,30 +37,48 @@ export function ChatsListItem({ pubkey }: { pubkey: string }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<NavLink
|
<NavLink
|
||||||
to={`/chats/${pubkey}`}
|
to={`/chats/chat/${event.pubkey}`}
|
||||||
preventScrollReset={true}
|
preventScrollReset={true}
|
||||||
className={({ isActive }) =>
|
className={({ isActive }) =>
|
||||||
twMerge(
|
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
|
isActive
|
||||||
? 'border-fuchsia-500 bg-white/5 text-white'
|
? 'border-fuchsia-500 bg-white/5 text-white'
|
||||||
: 'border-transparent text-white/70'
|
: 'border-transparent text-white/70'
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Image
|
<Avatar.Root className="shrink-0">
|
||||||
|
<Avatar.Image
|
||||||
src={user?.picture || user?.image}
|
src={user?.picture || user?.image}
|
||||||
alt={pubkey}
|
alt={event.pubkey}
|
||||||
className="h-7 w-7 shrink-0 rounded"
|
loading="lazy"
|
||||||
|
decoding="async"
|
||||||
|
style={{ contentVisibility: 'auto' }}
|
||||||
|
className="h-10 w-10 rounded-lg"
|
||||||
/>
|
/>
|
||||||
<div className="inline-flex w-full flex-1 items-center justify-between">
|
<Avatar.Fallback delayMs={300}>
|
||||||
<h5 className="max-w-[10rem] truncate">
|
<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?.name ||
|
||||||
user?.display_name ||
|
user?.display_name ||
|
||||||
user?.displayName ||
|
user?.displayName ||
|
||||||
displayNpub(pubkey, 16)}
|
displayNpub(event.pubkey, 16)}
|
||||||
</h5>
|
</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>
|
</div>
|
||||||
</NavLink>
|
</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>
|
<Dialog.Trigger asChild>
|
||||||
<button
|
<button
|
||||||
type="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">
|
<div className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
|
||||||
<PlusIcon className="h-4 w-4 text-white" />
|
<PlusIcon className="h-5 w-5" />
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h5 className="text-white/50">New chat</h5>
|
|
||||||
</div>
|
</div>
|
||||||
|
<h5 className="font-medium text-white/50">New message</h5>
|
||||||
</button>
|
</button>
|
||||||
</Dialog.Trigger>
|
</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.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">
|
<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="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 { nip04 } from 'nostr-tools';
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
export function useDecryptMessage(
|
export function useDecryptMessage(message: NDKEvent, pubkey: string, privkey: string) {
|
||||||
message: NDKEvent,
|
|
||||||
userPubkey: string,
|
|
||||||
userPriv: string
|
|
||||||
) {
|
|
||||||
const [content, setContent] = useState(message.content);
|
const [content, setContent] = useState(message.content);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function decrypt() {
|
async function decryptContent() {
|
||||||
const pubkey =
|
try {
|
||||||
userPubkey === message.pubkey
|
const sender =
|
||||||
|
pubkey === message.pubkey
|
||||||
? message.tags.find((el) => el[0] === 'p')[1]
|
? message.tags.find((el) => el[0] === 'p')[1]
|
||||||
: message.pubkey;
|
: message.pubkey;
|
||||||
const result = await nip04.decrypt(userPriv, pubkey, message.content);
|
const result = await nip04.decrypt(privkey, sender, message.content);
|
||||||
setContent(result);
|
setContent(result);
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
decrypt().catch(console.error);
|
decryptContent();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return content;
|
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 { useQuery } from '@tanstack/react-query';
|
||||||
import { useCallback, useEffect, useRef } from 'react';
|
import { useCallback } from 'react';
|
||||||
import { useParams } from 'react-router-dom';
|
import { Outlet } from 'react-router-dom';
|
||||||
import { VList, VListHandle } from 'virtua';
|
|
||||||
|
|
||||||
import { ChatMessageForm } from '@app/chats/components/messages/form';
|
import { ChatListItem } from '@app/chats/components/item';
|
||||||
import { ChatMessageItem } from '@app/chats/components/messages/item';
|
|
||||||
import { ChatSidebar } from '@app/chats/components/sidebar';
|
|
||||||
|
|
||||||
import { useNDK } from '@libs/ndk/provider';
|
|
||||||
import { useStorage } from '@libs/storage/provider';
|
import { useStorage } from '@libs/storage/provider';
|
||||||
|
|
||||||
import { LoaderIcon } from '@shared/icons';
|
import { LoaderIcon } from '@shared/icons';
|
||||||
|
|
||||||
import { useStronghold } from '@stores/stronghold';
|
|
||||||
|
|
||||||
import { useNostr } from '@utils/hooks/useNostr';
|
import { useNostr } from '@utils/hooks/useNostr';
|
||||||
|
|
||||||
export function ChatScreen() {
|
export function ChatsScreen() {
|
||||||
const listRef = useRef<VListHandle>(null);
|
|
||||||
const userPrivkey = useStronghold((state) => state.privkey);
|
|
||||||
|
|
||||||
const { db } = useStorage();
|
const { db } = useStorage();
|
||||||
const { ndk } = useNDK();
|
const { getAllNIP04Chats } = useNostr();
|
||||||
const { pubkey } = useParams();
|
const { status, data } = useQuery(
|
||||||
const { fetchNIP04Messages } = useNostr();
|
['nip04-chats'],
|
||||||
const { status, data } = useQuery(['nip04-dm', pubkey], async () => {
|
async () => {
|
||||||
return await fetchNIP04Messages(pubkey);
|
return await getAllNIP04Chats();
|
||||||
});
|
},
|
||||||
|
{ refetchOnWindowFocus: false }
|
||||||
|
);
|
||||||
|
|
||||||
const renderItem = useCallback(
|
const renderItem = useCallback(
|
||||||
(message: NDKEvent) => {
|
(event: NDKEvent) => {
|
||||||
return (
|
if (db.account.pubkey !== event.pubkey) {
|
||||||
<ChatMessageItem
|
return <ChatListItem key={event.id} event={event} />;
|
||||||
message={message}
|
}
|
||||||
userPubkey={db.account.pubkey}
|
|
||||||
userPrivkey={userPrivkey}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
[data]
|
[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 (
|
return (
|
||||||
<div className="grid h-full w-full grid-cols-3 bg-white/10 backdrop-blur-xl">
|
<div className="grid h-full w-full grid-cols-3">
|
||||||
<div className="col-span-2 border-r border-white/5">
|
<div className="scrollbar-hide col-span-1 h-full overflow-y-auto border-r border-white/5">
|
||||||
<div className="h-full w-full flex-1 p-3">
|
<div className="h-16 w-full shrink-0 border-b border-white/5" />
|
||||||
<div className="flex h-full flex-col justify-between overflow-hidden rounded-xl bg-white/10 backdrop-blur-xl">
|
<div className="flex h-full flex-col gap-1 py-2">
|
||||||
<div className="h-full w-full flex-1">
|
|
||||||
{status === 'loading' ? (
|
{status === 'loading' ? (
|
||||||
<div className="flex h-full w-full items-center justify-center">
|
<div className="flex h-full w-full items-center justify-center pb-16">
|
||||||
<div className="flex flex-col items-center gap-1.5">
|
<div className="inline-flex flex-col items-center justify-center gap-2">
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
|
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
|
||||||
<p className="text-sm font-medium text-white/50">Loading messages</p>
|
<h5 className="text-white/50">Loading messages...</h5>
|
||||||
</div>
|
</div>
|
||||||
</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((item) => renderItem(item))
|
||||||
{data.map((message) => renderItem(message))}
|
|
||||||
</VList>
|
|
||||||
)}
|
)}
|
||||||
</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>
|
||||||
</div>
|
<div className="col-span-2">
|
||||||
</div>
|
<Outlet />
|
||||||
</div>
|
|
||||||
<div className="col-span-1 pt-3">
|
|
||||||
<ChatSidebar pubkey={pubkey} />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -50,15 +50,15 @@ input::-ms-clear {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.markdown {
|
.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 {
|
.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 {
|
.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 {
|
.ProseMirror p.is-empty::before {
|
||||||
|
@ -52,7 +52,7 @@ export function ActiveAccount() {
|
|||||||
|
|
||||||
if (status === 'loading') {
|
if (status === 'loading') {
|
||||||
return (
|
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="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 className="h-2.5 w-2/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
|
||||||
</div>
|
</div>
|
||||||
@ -60,7 +60,7 @@ export function ActiveAccount() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
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">
|
<Link to={`/users/${db.account.pubkey}`} className="flex items-center gap-1.5">
|
||||||
<Image
|
<Image
|
||||||
src={user?.picture || user?.image}
|
src={user?.picture || user?.image}
|
||||||
@ -76,12 +76,12 @@ export function ActiveAccount() {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</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
|
<Link
|
||||||
to="/settings/"
|
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>
|
</Link>
|
||||||
<Logout />
|
<Logout />
|
||||||
</div>
|
</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 './explore';
|
||||||
export * from './explore2';
|
export * from './explore2';
|
||||||
export * from './home';
|
export * from './home';
|
||||||
|
export * from './chats';
|
||||||
|
@ -27,9 +27,9 @@ export function Logout() {
|
|||||||
<AlertDialog.Trigger asChild>
|
<AlertDialog.Trigger asChild>
|
||||||
<button
|
<button
|
||||||
type="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>
|
</button>
|
||||||
</AlertDialog.Trigger>
|
</AlertDialog.Trigger>
|
||||||
<AlertDialog.Portal>
|
<AlertDialog.Portal>
|
||||||
|
@ -9,6 +9,7 @@ import { Frame } from '@shared/frame';
|
|||||||
import {
|
import {
|
||||||
ArrowLeftIcon,
|
ArrowLeftIcon,
|
||||||
ArrowRightIcon,
|
ArrowRightIcon,
|
||||||
|
ChatsIcon,
|
||||||
ExploreIcon,
|
ExploreIcon,
|
||||||
HomeIcon,
|
HomeIcon,
|
||||||
RelayIcon,
|
RelayIcon,
|
||||||
@ -52,15 +53,15 @@ export function Navigation() {
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
data-tauri-drag-region
|
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
|
<NavLink
|
||||||
to="/"
|
to="/"
|
||||||
preventScrollReset={true}
|
preventScrollReset={true}
|
||||||
className={({ isActive }) =>
|
className={({ isActive }) =>
|
||||||
twMerge(
|
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
|
isActive
|
||||||
? 'border-fuchsia-500 bg-white/5 text-white'
|
? 'border-fuchsia-500 bg-white/5 text-white'
|
||||||
: 'border-transparent text-white/70'
|
: 'border-transparent text-white/70'
|
||||||
@ -72,12 +73,29 @@ export function Navigation() {
|
|||||||
</span>
|
</span>
|
||||||
Home
|
Home
|
||||||
</NavLink>
|
</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
|
<NavLink
|
||||||
to="/relays"
|
to="/relays"
|
||||||
preventScrollReset={true}
|
preventScrollReset={true}
|
||||||
className={({ isActive }) =>
|
className={({ isActive }) =>
|
||||||
twMerge(
|
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
|
isActive
|
||||||
? 'border-fuchsia-500 bg-white/5 text-white'
|
? 'border-fuchsia-500 bg-white/5 text-white'
|
||||||
: 'border-transparent text-white/70'
|
: 'border-transparent text-white/70'
|
||||||
@ -94,7 +112,7 @@ export function Navigation() {
|
|||||||
preventScrollReset={true}
|
preventScrollReset={true}
|
||||||
className={({ isActive }) =>
|
className={({ isActive }) =>
|
||||||
twMerge(
|
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
|
isActive
|
||||||
? 'border-fuchsia-500 bg-white/5 text-white'
|
? 'border-fuchsia-500 bg-white/5 text-white'
|
||||||
: 'border-transparent text-white/70'
|
: 'border-transparent text-white/70'
|
||||||
|
@ -23,7 +23,7 @@ export function TextNote(props: { content?: string }) {
|
|||||||
<ReactMarkdown
|
<ReactMarkdown
|
||||||
className="markdown"
|
className="markdown"
|
||||||
remarkPlugins={[remarkGfm]}
|
remarkPlugins={[remarkGfm]}
|
||||||
disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6']}
|
disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']}
|
||||||
unwrapDisallowed={true}
|
unwrapDisallowed={true}
|
||||||
linkTarget={'_blank'}
|
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) => {
|
const fetchNIP04Messages = async (sender: string) => {
|
||||||
let senderMessages: NostrEventExt<false>[] = [];
|
let senderMessages: NostrEventExt<false>[] = [];
|
||||||
|
|
||||||
@ -258,6 +241,32 @@ export function useNostr() {
|
|||||||
return events;
|
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) => {
|
const getAllEventsSinceLastLogin = async (customSince?: number) => {
|
||||||
try {
|
try {
|
||||||
let since: number;
|
let since: number;
|
||||||
@ -465,9 +474,9 @@ export function useNostr() {
|
|||||||
fetchUserData,
|
fetchUserData,
|
||||||
addContact,
|
addContact,
|
||||||
removeContact,
|
removeContact,
|
||||||
|
getAllNIP04Chats,
|
||||||
getAllEventsSinceLastLogin,
|
getAllEventsSinceLastLogin,
|
||||||
fetchActivities,
|
fetchActivities,
|
||||||
fetchNIP04Chats,
|
|
||||||
fetchNIP04Messages,
|
fetchNIP04Messages,
|
||||||
fetchAllReplies,
|
fetchAllReplies,
|
||||||
publish,
|
publish,
|
||||||
|
Loading…
Reference in New Issue
Block a user