mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
update message form
This commit is contained in:
parent
4893ebd932
commit
970115d059
@ -71,6 +71,7 @@
|
||||
"react-markdown": "^8.0.7",
|
||||
"react-player": "^2.12.0",
|
||||
"react-router-dom": "^6.15.0",
|
||||
"react-textarea-autosize": "^8.5.3",
|
||||
"react-virtuoso": "^4.5.0",
|
||||
"remark-gfm": "^3.0.1",
|
||||
"tippy.js": "^6.3.7",
|
||||
|
@ -163,6 +163,9 @@ dependencies:
|
||||
react-router-dom:
|
||||
specifier: ^6.15.0
|
||||
version: 6.15.0(react-dom@18.2.0)(react@18.2.0)
|
||||
react-textarea-autosize:
|
||||
specifier: ^8.5.3
|
||||
version: 8.5.3(@types/react@18.2.21)(react@18.2.0)
|
||||
react-virtuoso:
|
||||
specifier: ^4.5.0
|
||||
version: 4.5.0(react-dom@18.2.0)(react@18.2.0)
|
||||
@ -6073,6 +6076,20 @@ packages:
|
||||
tslib: 2.6.2
|
||||
dev: false
|
||||
|
||||
/react-textarea-autosize@8.5.3(@types/react@18.2.21)(react@18.2.0):
|
||||
resolution: {integrity: sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==}
|
||||
engines: {node: '>=10'}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.10
|
||||
react: 18.2.0
|
||||
use-composed-ref: 1.3.0(react@18.2.0)
|
||||
use-latest: 1.2.1(@types/react@18.2.21)(react@18.2.0)
|
||||
transitivePeerDependencies:
|
||||
- '@types/react'
|
||||
dev: false
|
||||
|
||||
/react-virtuoso@4.5.0(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-OMP6XrzJMMos1vbJZC16RxGW7utAxUMP7i5PNPi6epBNVH7nz+CF/DlmecNBep5wyjLud51dQ5epjb2A0w9W/Q==}
|
||||
engines: {node: '>=10'}
|
||||
@ -6918,6 +6935,41 @@ packages:
|
||||
tslib: 2.6.2
|
||||
dev: false
|
||||
|
||||
/use-composed-ref@1.3.0(react@18.2.0):
|
||||
resolution: {integrity: sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
dependencies:
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/use-isomorphic-layout-effect@1.1.2(@types/react@18.2.21)(react@18.2.0):
|
||||
resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@types/react': 18.2.21
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/use-latest@1.2.1(@types/react@18.2.21)(react@18.2.0):
|
||||
resolution: {integrity: sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@types/react': 18.2.21
|
||||
react: 18.2.0
|
||||
use-isomorphic-layout-effect: 1.1.2(@types/react@18.2.21)(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/use-sidecar@1.1.2(@types/react@18.2.21)(react@18.2.0):
|
||||
resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
|
||||
engines: {node: '>=10'}
|
||||
|
@ -3,7 +3,6 @@ import { useCallback } from 'react';
|
||||
|
||||
import { ChatsListItem } from '@app/chats/components/item';
|
||||
import { NewMessageModal } from '@app/chats/components/modal';
|
||||
import { ChatsListSelfItem } from '@app/chats/components/self';
|
||||
import { UnknownsModal } from '@app/chats/components/unknowns';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
@ -47,7 +46,6 @@ export function ChatsList() {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<ChatsListSelfItem pubkey={db.account.pubkey} />
|
||||
{chats.follows.map((item) => renderItem(item))}
|
||||
{chats.unknowns.length > 0 && <UnknownsModal data={chats.unknowns} />}
|
||||
<NewMessageModal />
|
||||
|
@ -1,5 +1,6 @@
|
||||
import { nip04 } from 'nostr-tools';
|
||||
import { useCallback, useState } from 'react';
|
||||
import TextareaAutosize from 'react-textarea-autosize';
|
||||
|
||||
import { MediaUploader } from '@app/chats/components/messages/mediaUploader';
|
||||
|
||||
@ -45,28 +46,29 @@ export function ChatMessageForm({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative h-11 w-full">
|
||||
<input
|
||||
<div className="flex w-full items-center justify-between rounded-md bg-white/20 px-3">
|
||||
<TextareaAutosize
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
onKeyDown={handleEnterPress}
|
||||
spellCheck={false}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
placeholder="Message"
|
||||
className="relative h-11 w-full resize-none rounded-md bg-white/10 px-5 text-white !outline-none placeholder:text-white/50"
|
||||
className="min-h-[44px] flex-1 resize-none bg-transparent py-3 text-white !outline-none placeholder:text-white"
|
||||
/>
|
||||
<div className="absolute right-2 top-0 h-11">
|
||||
<div className="flex h-full items-center justify-end gap-3 text-white/50">
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<MediaUploader setState={setValue} />
|
||||
<button
|
||||
type="button"
|
||||
onClick={submit}
|
||||
className="inline-flex items-center gap-1 text-sm leading-none"
|
||||
className="inline-flex items-center gap-1.5 text-sm font-medium leading-none text-white/50"
|
||||
>
|
||||
<EnterIcon width={14} height={14} className="" />
|
||||
<EnterIcon className="h-5 w-5" />
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -32,9 +32,9 @@ export function MediaUploader({
|
||||
className="group inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
|
||||
>
|
||||
{loading ? (
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
|
||||
) : (
|
||||
<MediaIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
|
||||
<MediaIcon className="h-5 w-5 text-white" />
|
||||
)}
|
||||
</button>
|
||||
</Tooltip.Trigger>
|
||||
|
@ -1,45 +0,0 @@
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
import { Image } from '@shared/image';
|
||||
|
||||
import { useProfile } from '@utils/hooks/useProfile';
|
||||
import { displayNpub } from '@utils/shortenKey';
|
||||
|
||||
export function ChatsListSelfItem({ pubkey }: { pubkey: string }) {
|
||||
const { status, user } = useProfile(pubkey);
|
||||
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
|
||||
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
|
||||
<div className="h-2.5 w-2/3 animate-pulse rounded bg-white/10" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<NavLink
|
||||
to={`/chats/${pubkey}`}
|
||||
preventScrollReset={true}
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'inline-flex h-9 items-center gap-2.5 rounded-md px-2',
|
||||
isActive ? 'bg-white/10 text-white' : 'text-white/80'
|
||||
)
|
||||
}
|
||||
>
|
||||
<Image
|
||||
src={user?.picture || user?.image}
|
||||
alt={pubkey}
|
||||
className="h-6 w-6 shrink-0 rounded bg-white object-cover"
|
||||
/>
|
||||
<div className="inline-flex items-baseline gap-1">
|
||||
<h5 className="max-w-[10rem] truncate">
|
||||
{user?.nip05 || user?.name || displayNpub(pubkey, 16)}
|
||||
</h5>
|
||||
<span className="text-white/50">(you)</span>
|
||||
</div>
|
||||
</NavLink>
|
||||
);
|
||||
}
|
@ -11,6 +11,8 @@ import { ChatSidebar } from '@app/chats/components/sidebar';
|
||||
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';
|
||||
@ -78,7 +80,12 @@ export function ChatScreen() {
|
||||
<div className="flex h-full flex-col justify-between overflow-hidden rounded-xl bg-white/10">
|
||||
<div className="h-full w-full flex-1">
|
||||
{status === 'loading' ? (
|
||||
<p>Loading...</p>
|
||||
<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>
|
||||
) : (
|
||||
<Virtuoso
|
||||
ref={virtuosoRef}
|
||||
|
Loading…
Reference in New Issue
Block a user