highperfocused/lume
1
0
Fork 0
mirror of https://github.com/lumehq/lume.git synced 2025-03-26 01:31:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

update chat

Browse Source
This commit is contained in:
Ren Amamiya 2023-04-28 15:20:10 +07:00
parent 87e8ee8954
commit f751c1f18f
20 changed files with 183 additions and 438 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/channel/components/messages/user.tsx
View File

@ -1,4 +1,4 @@
import { DEFAULT_AVATAR } from '@lume/stores/constants';
import { DEFAULT_AVATAR, IMGPROXY_URL } from '@lume/stores/constants';
import { useProfile } from '@lume/utils/hooks/useProfile';
import { shortenKey } from '@lume/utils/shortenKey';
@ -25,7 +25,7 @@ export default function ChannelMessageUser({ pubkey, time }: { pubkey: string; t
<>
<div className="relative h-9 w-9 shrink rounded-md">
<img
src={user?.picture || DEFAULT_AVATAR}
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"
loading="lazy"

4
src/app/channel/components/messages/userReply.tsx
View File

@ -1,4 +1,4 @@
import { DEFAULT_AVATAR } from '@lume/stores/constants';
import { DEFAULT_AVATAR, IMGPROXY_URL } from '@lume/stores/constants';
import { useProfile } from '@lume/utils/hooks/useProfile';
import { shortenKey } from '@lume/utils/shortenKey';
@ -16,7 +16,7 @@ export default function UserReply({ pubkey }: { pubkey: string }) {
<>
<div className="relative h-7 w-7 shrink overflow-hidden rounded">
<img
src={user?.picture || DEFAULT_AVATAR}
src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
alt={pubkey}
className="h-7 w-7 rounded object-cover"
loading="lazy"

22
src/shared/chats/messageList.tsx → src/app/chat/components/messageList.tsx
View File

@ -1,25 +1,22 @@
import { AccountContext } from '@lume/shared/accountProvider';
import { MessageListItem } from '@lume/shared/chats/messageListItem';
import { Placeholder } from '@lume/shared/note/placeholder';
import { ChatMessageItem } from '@lume/app/chat/components/messages/item';
import { sortedChatMessagesAtom } from '@lume/stores/chat';
import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
import { useAtomValue } from 'jotai';
import { useCallback, useContext, useRef } from 'react';
import { useCallback, useRef } from 'react';
import { Virtuoso } from 'react-virtuoso';
export default function MessageList() {
const activeAccount: any = useContext(AccountContext);
export default function ChatMessageList() {
const { account } = useActiveAccount();
const virtuosoRef = useRef(null);
const data = useAtomValue(sortedChatMessagesAtom);
const itemContent: any = useCallback(
(index: string | number) => {
return (
<MessageListItem data={data[index]} userPubkey={activeAccount.pubkey} userPrivkey={activeAccount.privkey} />
);
return <ChatMessageItem data={data[index]} userPubkey={account.pubkey} userPrivkey={account.privkey} />;
},
[activeAccount.privkey, activeAccount.pubkey, data]
[account.privkey, account.pubkey, data]
);
const computeItemKey = useCallback(
@ -34,7 +31,6 @@ export default function MessageList() {
<Virtuoso
ref={virtuosoRef}
data={data}
components={COMPONENTS}
itemContent={itemContent}
computeItemKey={computeItemKey}
initialTopMostItemIndex={data.length - 1}
@ -47,7 +43,3 @@ export default function MessageList() {
</div>
);
}
const COMPONENTS = {
EmptyPlaceholder: () => <Placeholder />,
};

54
src/shared/form/chat.tsx → src/app/chat/components/messages/form.tsx
View File

@ -1,18 +1,17 @@
import { AccountContext } from '@lume/shared/accountProvider';
import { ImagePicker } from '@lume/shared/form/imagePicker';
import { RelayContext } from '@lume/shared/relaysProvider';
import { chatContentAtom } from '@lume/stores/chat';
import { FULL_RELAYS } from '@lume/stores/constants';
import { FULL_RELAYS, WRITEONLY_RELAYS } from '@lume/stores/constants';
import { dateToUnix } from '@lume/utils/getDate';
import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
import { useAtom } from 'jotai';
import { useResetAtom } from 'jotai/utils';
import { RelayPool } from 'nostr-relaypool';
import { getEventHash, nip04, signEvent } from 'nostr-tools';
import { useCallback, useContext } from 'react';
import { useCallback } from 'react';
export default function FormChat({ receiverPubkey }: { receiverPubkey: string }) {
const pool: any = useContext(RelayContext);
const activeAccount: any = useContext(AccountContext);
export default function ChatMessageForm({ receiverPubkey }: { receiverPubkey: string }) {
const { account, isLoading, isError } = useActiveAccount();
const [value, setValue] = useAtom(chatContentAtom);
const resetValue = useResetAtom(chatContentAtom);
@ -24,25 +23,28 @@ export default function FormChat({ receiverPubkey }: { receiverPubkey: string })
[receiverPubkey, value]
);
const submitEvent = useCallback(() => {
encryptMessage(activeAccount.privkey)
.then((encryptedContent) => {
const event: any = {
content: encryptedContent,
created_at: dateToUnix(),
kind: 4,
pubkey: activeAccount.pubkey,
tags: [['p', receiverPubkey]],
};
event.id = getEventHash(event);
event.sig = signEvent(event, activeAccount.privkey);
// publish note
pool.publish(event, FULL_RELAYS);
// reset state
resetValue();
})
.catch(console.error);
}, [activeAccount.privkey, activeAccount.pubkey, receiverPubkey, pool, resetValue, encryptMessage]);
const submitEvent = () => {
if (!isError && !isLoading && account) {
encryptMessage(account.privkey)
.then((encryptedContent) => {
const pool = new RelayPool(WRITEONLY_RELAYS);
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, FULL_RELAYS);
// reset state
resetValue();
})
.catch(console.error);
}
};
const handleEnterPress = (e) => {
if (e.key === 'Enter' && !e.shiftKey) {

27
src/app/chat/components/messages/item.tsx Normal file
View File

@ -0,0 +1,27 @@
import ChatMessageUser from '@lume/app/chat/components/messages/user';
import { useDecryptMessage } from '@lume/utils/hooks/useDecryptMessage';
import { memo } from 'react';
export const ChatMessageItem = memo(function MessageListItem({
data,
userPubkey,
userPrivkey,
}: {
data: any;
userPubkey: string;
userPrivkey: string;
}) {
const content = useDecryptMessage(userPubkey, userPrivkey, data.pubkey, data.tags, data.content);
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 break-words text-sm leading-tight">{content}</div>
</div>
</div>
</div>
);
});

48
src/app/chat/components/messages/user.tsx Normal file
View File

@ -0,0 +1,48 @@
import { DEFAULT_AVATAR, IMGPROXY_URL } from '@lume/stores/constants';
import { useProfile } from '@lume/utils/hooks/useProfile';
import { shortenKey } from '@lume/utils/shortenKey';
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);
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">
<img
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"
loading="lazy"
fetchpriority="high"
/>
</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>
);
}

108
src/app/chat/pages/index.page.tsx
View File

@ -1,82 +1,66 @@
import { AccountContext } from '@lume/shared/accountProvider';
import { MessageListItem } from '@lume/shared/chats/messageListItem';
import FormChat from '@lume/shared/form/chat';
import { RelayContext } from '@lume/shared/relaysProvider';
import ChatMessageForm from '@lume/app/chat/components/messages/form';
import { chatMessagesAtom } from '@lume/stores/chat';
import { FULL_RELAYS } from '@lume/stores/constants';
import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
import { usePageContext } from '@lume/utils/hooks/usePageContext';
import { sortMessages } from '@lume/utils/transform';
import { useContext } from 'react';
import { useSetAtom } from 'jotai';
import { useResetAtom } from 'jotai/utils';
import { RelayPool } from 'nostr-relaypool';
import { Suspense, lazy, useEffect } from 'react';
import useSWRSubscription from 'swr/subscription';
const ChatMessageList = lazy(() => import('@lume/app/chat/components/messageList'));
export function Page() {
const pageContext = usePageContext();
const searchParams: any = pageContext.urlParsed.search;
const pubkey = searchParams.pubkey;
const pool: any = useContext(RelayContext);
const activeAccount: any = useContext(AccountContext);
const { account } = useActiveAccount();
const { data, error } = useSWRSubscription(
pubkey
? [
{
kinds: [4],
authors: [pubkey],
'#p': [activeAccount.pubkey],
},
{
kinds: [4],
authors: [activeAccount.pubkey],
'#p': [pubkey],
},
]
: null,
(key, { next }) => {
const unsubscribe = pool.subscribe(key, FULL_RELAYS, (event: any) => {
next(null, (prev) => (prev ? [event, ...prev] : [event]));
});
const setChatMessages = useSetAtom(chatMessagesAtom);
const resetChatMessages = useResetAtom(chatMessagesAtom);
return () => {
unsubscribe();
};
}
);
useSWRSubscription(pubkey ? pubkey : null, (key: string, {}: any) => {
const pool = new RelayPool(FULL_RELAYS);
const unsubscribe = pool.subscribe(
[
{
kinds: [4],
authors: [key],
'#p': [account.pubkey],
},
{
kinds: [4],
authors: [account.pubkey],
'#p': [key],
},
],
FULL_RELAYS,
(event: any) => {
setChatMessages((prev) => [...prev, event]);
}
);
return () => {
unsubscribe();
};
});
useEffect(() => {
// reset channel messages
resetChatMessages();
});
return (
<div className="relative flex h-full w-full flex-col justify-between rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
<div className="scrollbar-hide flex h-full w-full flex-col-reverse overflow-y-auto">
{error && <div>failed to load</div>}
{!data ? (
<div className="flex h-min min-h-min w-full animate-pulse select-text flex-col px-5 py-2 hover:bg-black/20">
<div className="flex flex-col">
<div className="group flex items-start gap-3">
<div className="bg-zinc relative h-9 w-9 shrink rounded-md bg-zinc-700"></div>
<div className="flex w-full flex-1 items-start justify-between">
<div className="flex items-baseline gap-2 text-sm">
<span className="h-2 w-16 bg-zinc-700"></span>
</div>
</div>
</div>
<div className="-mt-[17px] pl-[48px]">
<div className="h-3 w-full bg-zinc-700"></div>
</div>
</div>
</div>
) : (
sortMessages(data).map((message) => (
<MessageListItem
key={message.id}
data={message}
userPubkey={activeAccount.pubkey}
userPrivkey={activeAccount.privkey}
/>
))
)}
</div>
<Suspense fallback={<p>Loading...</p>}>
<ChatMessageList />
</Suspense>
<div className="shrink-0 p-3">
<FormChat receiverPubkey={pubkey} />
<ChatMessageForm receiverPubkey={pubkey} />
</div>
</div>
);

2
src/app/newsfeed/components/note/parent.tsx
View File

@ -41,7 +41,7 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
<div className="relative pb-5">
{error && <div>failed to load</div>}
{!data ? (
<div className="animated-pulse">
<div className="animated-pulse relative z-10">
<div className="flex items-start gap-2">
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-700" />
<div className="flex w-full flex-1 items-start justify-between">

4
src/app/newsfeed/components/user/default.tsx
View File

@ -1,4 +1,4 @@
import { DEFAULT_AVATAR } from '@lume/stores/constants';
import { DEFAULT_AVATAR, IMGPROXY_URL } from '@lume/stores/constants';
import { useProfile } from '@lume/utils/hooks/useProfile';
import { shortenKey } from '@lume/utils/shortenKey';
@ -28,7 +28,7 @@ export const NoteDefaultUser = ({ pubkey, time }: { pubkey: string; time: number
<>
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-white">
<img
src={user?.picture || DEFAULT_AVATAR}
src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
alt={pubkey}
className="h-11 w-11 rounded-md object-cover"
loading="lazy"

4
src/app/newsfeed/components/user/repost.tsx
View File

@ -1,4 +1,4 @@
import { DEFAULT_AVATAR } from '@lume/stores/constants';
import { DEFAULT_AVATAR, IMGPROXY_URL } from '@lume/stores/constants';
import { useProfile } from '@lume/utils/hooks/useProfile';
import { shortenKey } from '@lume/utils/shortenKey';
@ -27,7 +27,7 @@ export const NoteRepostUser = ({ pubkey, time }: { pubkey: string; time: number
<>
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-white">
<img
src={user?.picture || DEFAULT_AVATAR}
src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
alt={pubkey}
className="h-11 w-11 rounded-md object-cover"
loading="lazy"

33
src/shared/chats/chatList.tsx
View File

@ -1,33 +0,0 @@
import { AccountContext } from '@lume/shared/accountProvider';
import { ChatModal } from '@lume/shared/chats/chatModal';
import { DEFAULT_AVATAR } from '@lume/stores/constants';
import { useContext } from 'react';
export default function ChatList() {
const activeAccount: any = useContext(AccountContext);
const profile = typeof window !== 'undefined' ? JSON.parse(activeAccount.metadata) : null;
return (
<div className="flex flex-col gap-px">
<a
href={`/chat?pubkey=${activeAccount?.pubkey}`}
className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
>
<div className="relative h-5 w-5 shrink rounded bg-white">
<img
src={profile?.picture || DEFAULT_AVATAR}
alt={activeAccount?.pubkey}
className="h-5 w-5 rounded object-cover"
/>
</div>
<div>
<h5 className="text-sm font-medium text-zinc-400">
{profile?.display_name || profile?.name} <span className="text-zinc-500">(you)</span>
</h5>
</div>
</a>
<ChatModal />
</div>
);
}

33
src/shared/chats/chatListItem.tsx
View File

@ -1,33 +0,0 @@
import { DEFAULT_AVATAR } from '@lume/stores/constants';
import { usePageContext } from '@lume/utils/hooks/usePageContext';
import { useProfile } from '@lume/utils/hooks/useProfile';
import { shortenKey } from '@lume/utils/shortenKey';
import { twMerge } from 'tailwind-merge';
export const ChatListItem = ({ pubkey }: { pubkey: string }) => {
const profile = useProfile(pubkey);
const pageContext = usePageContext();
const searchParams: any = pageContext.urlParsed.search;
const pagePubkey = searchParams.pubkey;
return (
<a
href={`/chat?pubkey=${pubkey}`}
className={twMerge(
'inline-flex items-center gap-2 rounded-md px-2.5 py-1.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 rounded">
<img src={profile?.picture || DEFAULT_AVATAR} alt={pubkey} className="h-5 w-5 rounded object-cover" />
</div>
<div>
<h5 className="text-sm font-medium text-zinc-400">
{profile?.display_name || profile?.name || shortenKey(pubkey)}
</h5>
</div>
</a>
);
};

14
src/shared/chats/chatModal.tsx
View File

@ -1,14 +0,0 @@
import { Plus } from 'iconoir-react';
export const ChatModal = () => {
return (
<div className="group inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900">
<div className="group-hover:800 inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900 group-hover:bg-zinc-800">
<Plus width={12} height={12} className="text-zinc-500" />
</div>
<div>
<h5 className="text-sm font-medium text-zinc-500 group-hover:text-zinc-400">Add a new chat</h5>
</div>
</div>
);
};

40
src/shared/chats/chatModalUser.tsx
View File

@ -1,40 +0,0 @@
import { DEFAULT_AVATAR } from '@lume/stores/constants';
import { shortenKey } from '@lume/utils/shortenKey';
import { navigate } from 'vite-plugin-ssr/client/router';
export const ChatModalUser = ({ data }: { data: any }) => {
const profile = JSON.parse(data.metadata);
const openNewChat = () => {
navigate(`/chat?pubkey=${data.pubkey}`);
};
return (
<div className="group flex items-center justify-between px-3 py-2 hover:bg-zinc-800">
<div className="flex items-center gap-2">
<div className="relative h-10 w-10 shrink-0 rounded-md">
<img
src={profile?.picture || DEFAULT_AVATAR}
alt={data.pubkey}
className="h-10 w-10 rounded-md object-cover"
/>
</div>
<div className="flex w-full flex-1 flex-col items-start text-start">
<span className="truncate text-sm font-semibold leading-tight text-zinc-200">
{profile?.display_name || profile?.name}
</span>
<span className="text-sm leading-tight text-zinc-400">{shortenKey(data.pubkey)}</span>
</div>
</div>
<div>
<button
onClick={() => openNewChat()}
className="hidden h-8 items-center justify-center rounded-md bg-fuchsia-500 px-3 text-sm font-medium shadow-button hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 group-hover:inline-flex"
>
Send message
</button>
</div>
</div>
);
};

31
src/shared/chats/messageListItem.tsx
View File

@ -1,31 +0,0 @@
import { MessageUser } from '@lume/shared/chats/messageUser';
import { useDecryptMessage } from '@lume/utils/hooks/useDecryptMessage';
import { memo } from 'react';
export const MessageListItem = memo(function MessageListItem({
data,
userPubkey,
userPrivkey,
}: {
data: any;
userPubkey: string;
userPrivkey: string;
}) {
const content = useDecryptMessage(userPubkey, userPrivkey, data.pubkey, data.tags, data.content);
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">
<MessageUser pubkey={data.pubkey} time={data.created_at} />
<div className="-mt-[17px] pl-[48px]">
<div className="flex flex-col gap-2">
<div className="prose prose-zinc max-w-none break-words text-sm leading-tight dark:prose-invert prose-p:m-0 prose-p:text-sm prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
{content}
</div>
</div>
</div>
</div>
</div>
);
});

35
src/shared/chats/messageUser.tsx
View File

@ -1,35 +0,0 @@
import { DEFAULT_AVATAR } from '@lume/stores/constants';
import { useProfile } from '@lume/utils/hooks/useProfile';
import { shortenKey } from '@lume/utils/shortenKey';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
export const MessageUser = ({ pubkey, time }: { pubkey: string; time: number }) => {
const profile = useProfile(pubkey);
return (
<div className="group flex items-start gap-3">
<div className="relative h-9 w-9 shrink rounded-md">
<img
src={profile?.picture || DEFAULT_AVATAR}
alt={pubkey}
className="h-9 w-9 rounded-md object-cover"
loading="lazy"
fetchpriority="high"
/>
</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">
{profile?.display_name || profile?.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>
);
};

130
src/shared/form/channel.tsx
View File

@ -1,130 +0,0 @@
import { AccountContext } from '@lume/shared/accountProvider';
import { ImagePicker } from '@lume/shared/form/imagePicker';
import { RelayContext } from '@lume/shared/relaysProvider';
import { UserMini } from '@lume/shared/user/mini';
import { channelContentAtom, channelReplyAtom } from '@lume/stores/channel';
import { FULL_RELAYS } from '@lume/stores/constants';
import { dateToUnix } from '@lume/utils/getDate';
import { Cancel } from 'iconoir-react';
import { useAtom, useAtomValue } from 'jotai';
import { useResetAtom } from 'jotai/utils';
import { getEventHash, signEvent } from 'nostr-tools';
import { useCallback, useContext } from 'react';
export const FormChannel = ({ eventId }: { eventId: string | string[] }) => {
const pool: any = useContext(RelayContext);
const activeAccount: any = useContext(AccountContext);
const [value, setValue] = useAtom(channelContentAtom);
const resetValue = useResetAtom(channelContentAtom);
const channelReply = useAtomValue(channelReplyAtom);
const resetChannelReply = useResetAtom(channelReplyAtom);
const submitEvent = useCallback(() => {
let tags: any[][];
if (channelReply.id !== null) {
tags = [
['e', eventId, '', 'root'],
['e', channelReply.id, '', 'reply'],
['p', channelReply.pubkey, ''],
];
} else {
tags = [['e', eventId, '', 'root']];
}
const event: any = {
content: value,
created_at: dateToUnix(),
kind: 42,
pubkey: activeAccount.pubkey,
tags: tags,
};
event.id = getEventHash(event);
event.sig = signEvent(event, activeAccount.privkey);
// publish note
pool.publish(event, FULL_RELAYS);
// reset state
resetValue();
// reset channel reply
resetChannelReply();
}, [
value,
channelReply.id,
channelReply.pubkey,
activeAccount.pubkey,
activeAccount.privkey,
eventId,
resetChannelReply,
resetValue,
pool,
]);
const handleEnterPress = (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
submitEvent();
}
};
const stopReply = () => {
resetChannelReply();
};
return (
<div
className={`relative ${
channelReply.id ? 'h-36' : '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`}
>
{channelReply.id && (
<div className="absolute left-0 top-0 z-10 h-14 w-full p-[2px]">
<div className="flex h-full w-full items-center justify-between rounded-t-md border-b border-zinc-700/70 bg-zinc-900 px-3">
<div className="flex w-full flex-col">
<UserMini pubkey={channelReply.pubkey} />
<div className="-mt-3.5 pl-[32px]">
<div className="text-xs text-zinc-200">{channelReply.content}</div>
</div>
</div>
<button
onClick={() => stopReply()}
className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800"
>
<Cancel width={12} height={12} className="text-zinc-100" />
</button>
</div>
</div>
)}
<textarea
value={value}
onChange={(e) => setValue(e.target.value)}
onKeyDown={handleEnterPress}
spellCheck={false}
placeholder="Message"
className={`relative ${
channelReply.id ? 'h-36 pt-16' : 'h-24 pt-3'
} w-full resize-none rounded-lg border border-black/5 px-3.5 pb-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 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="channel" />
<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>
);
};

18
src/shared/form/comment.tsx
View File

@ -1,29 +1,29 @@
import { AccountContext } from '@lume/shared/accountProvider';
import { RelayContext } from '@lume/shared/relaysProvider';
import { WRITEONLY_RELAYS } from '@lume/stores/constants';
import { dateToUnix } from '@lume/utils/getDate';
import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
import { RelayPool } from 'nostr-relaypool';
import { getEventHash, signEvent } from 'nostr-tools';
import { useContext, useState } from 'react';
import { useState } from 'react';
export default function FormComment({ eventID }: { eventID: any }) {
const pool: any = useContext(RelayContext);
const activeAccount: any = useContext(AccountContext);
const { account } = useActiveAccount();
const [value, setValue] = useState('');
const profile = JSON.parse(activeAccount.metadata);
const profile = JSON.parse(account.metadata);
const submitEvent = () => {
const pool = new RelayPool(WRITEONLY_RELAYS);
const event: any = {
content: value,
created_at: dateToUnix(),
kind: 1,
pubkey: activeAccount.pubkey,
pubkey: account.pubkey,
tags: [['e', eventID]],
};
event.id = getEventHash(event);
event.sig = signEvent(event, activeAccount.privkey);
event.sig = signEvent(event, account.privkey);
// publish note
pool.publish(event, WRITEONLY_RELAYS);
@ -36,7 +36,7 @@ export default function FormComment({ eventID }: { eventID: any }) {
<div className="flex gap-1">
<div>
<div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-md border border-white/10">
<img src={profile?.picture} alt={activeAccount.pubkey} className="h-11 w-11 rounded-md object-cover" />
<img src={profile?.picture} alt={account.pubkey} className="h-11 w-11 rounded-md object-cover" />
</div>
</div>
<div className="relative h-24 w-full flex-1 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">

6
src/stores/constants.tsx
View File

@ -5,6 +5,12 @@ export const DEFAULT_AVATAR = 'https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp';
export const DEFAULT_CHANNEL_BANNER =
'https://bafybeiacwit7hjmdefqggxqtgh6ht5dhth7ndptwn2msl5kpkodudsr7py.ipfs.w3s.link/banner-1.jpg';
// img proxy
export const IMGPROXY_URL = 'https://imgproxy.iris.to/insecure';
// metadata service
export const METADATA_SERVICE = 'https://us.rbr.bio';
// read-only relay list
export const READONLY_RELAYS = ['wss://welcome.nostr.wine', 'wss://relay.nostr.band'];

4
src/utils/hooks/useProfile.tsx
View File

@ -1,9 +1,11 @@
import { METADATA_SERVICE } from '@lume/stores/constants';
import useSWR from 'swr';
const fetcher = (url: string) => fetch(url).then((r: any) => r.json());
export const useProfile = (pubkey: string) => {
const { data, error, isLoading } = useSWR(`https://us.rbr.bio/${pubkey}/metadata.json`, fetcher);
const { data, error, isLoading } = useSWR(`${METADATA_SERVICE}/${pubkey}/metadata.json`, fetcher);
return {
user: data ? JSON.parse(data.content ? data.content : null) : null,