Improve chat reply UX with auto-focus and rich text preview (#76)

- Focus the message input when clicking reply button for immediate typing
- Use RichText component in reply preview to render mentions and emojis

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Alejandro
2026-01-13 16:26:28 +01:00
committed by GitHub
parent fd31e707fc
commit ed6f2fd856

View File

@@ -162,9 +162,12 @@ const ComposerReplyPreview = memo(function ComposerReplyPreview({
pubkey={replyEvent.pubkey}
className="font-medium flex-shrink-0"
/>
<span className="flex-1 min-w-0 truncate text-muted-foreground">
{replyEvent.content}
</span>
<div className="flex-1 min-w-0 line-clamp-1 overflow-hidden text-muted-foreground">
<RichText
event={replyEvent}
options={{ showMedia: false, showEventEmbeds: false }}
/>
</div>
<button
onClick={onClear}
className="ml-auto text-muted-foreground hover:text-foreground flex-shrink-0"
@@ -538,6 +541,8 @@ export function ChatViewer({
// Handle reply button click
const handleReply = useCallback((messageId: string) => {
setReplyTo(messageId);
// Focus the editor so user can start typing immediately
editorRef.current?.focus();
}, []);
// Handle scroll to message (when clicking on reply preview)