mirror of
https://github.com/purrgrammer/grimoire.git
synced 2026-04-09 15:07:10 +02:00
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:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user