From 214adc5ff25a2368a7cc42912a340479c30334ae Mon Sep 17 00:00:00 2001
From: jamiepine <32987599+jamiepine@users.noreply.github.com>
Date: Sat, 3 Oct 2026 09:31:46 +0000
Subject: [PATCH] fix: keep the active tag row in view and document the full
 tag set

The 19-row menu is taller than its 280px max-height, so arrow-key
navigation past the fold lost its highlight. Scroll the active row into
view on index change, list the delivery tags in the README, and give
[sarcastic] and [whispering] emoji that are not already used by
[chuckle] and [shush].
---
 README.md                                          |  4 +++-
 .../components/Generation/ParalinguisticInput.tsx  | 14 ++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index b1ee81fc..bda86132 100644
--- a/README.md
+++ b/README.md
@@ -130,7 +130,9 @@ literally as text.
 With **Chatterbox Turbo** selected, type `/` in the text input to open the tag
 inserter and add expressive tags inline with speech:
 
-`[laugh]` `[chuckle]` `[gasp]` `[cough]` `[sigh]` `[groan]` `[sniff]` `[shush]` `[clear throat]`
+Sounds: `[laugh]` `[chuckle]` `[gasp]` `[cough]` `[sigh]` `[groan]` `[sniff]` `[shush]` `[clear throat]`
+
+Delivery: `[angry]` `[crying]` `[dramatic]` `[fear]` `[happy]` `[narration]` `[sarcastic]` `[surprised]` `[whispering]` `[advertisement]`
 
 ### Post-Processing Effects
 
diff --git a/app/src/components/Generation/ParalinguisticInput.tsx b/app/src/components/Generation/ParalinguisticInput.tsx
index 74ad99a3..205e2905 100644
--- a/app/src/components/Generation/ParalinguisticInput.tsx
+++ b/app/src/components/Generation/ParalinguisticInput.tsx
@@ -29,9 +29,9 @@ const PARALINGUISTIC_TAGS = [
   { tag: '[fear]', label: 'fear', emoji: '\u{1F628}' },
   { tag: '[happy]', label: 'happy', emoji: '\u{1F60A}' },
   { tag: '[narration]', label: 'narration', emoji: '\u{1F4D6}' },
-  { tag: '[sarcastic]', label: 'sarcastic', emoji: '\u{1F60F}' },
+  { tag: '[sarcastic]', label: 'sarcastic', emoji: '\u{1F644}' },
   { tag: '[surprised]', label: 'surprised', emoji: '\u{1F632}' },
-  { tag: '[whispering]', label: 'whispering', emoji: '\u{1F92B}' },
+  { tag: '[whispering]', label: 'whispering', emoji: '\u{1F62F}' },
   { tag: '[advertisement]', label: 'advertisement', emoji: '\u{1F4E2}' },
 ] as const;
 
@@ -147,6 +147,7 @@ export const ParalinguisticInput = forwardRef<ParalinguisticInputRef, Paralingui
       left: 0,
     });
     const triggerRangeRef = useRef<Range | null>(null);
+    const menuListRef = useRef<HTMLDivElement | null>(null);
     const lastSerializedRef = useRef<string>('');
     const isComposingRef = useRef(false);
 
@@ -155,6 +156,14 @@ export const ParalinguisticInput = forwardRef<ParalinguisticInputRef, Paralingui
       element: editorRef.current,
     }));
 
+    // The list is taller than the menu's max-height, so keep the keyboard
+    // highlight visible as ArrowUp/ArrowDown move it.
+    useEffect(() => {
+      if (!showMenu) return;
+      const item = menuListRef.current?.children[menuIndex] as HTMLElement | undefined;
+      item?.scrollIntoView({ block: 'nearest' });
+    }, [showMenu, menuIndex]);
+
     // Filtered tag list for the autocomplete menu
     const filteredTags = PARALINGUISTIC_TAGS.filter((t) =>
       t.label.toLowerCase().includes(menuFilter.toLowerCase()),
@@ -392,6 +401,7 @@ export const ParalinguisticInput = forwardRef<ParalinguisticInputRef, Paralingui
           createPortal(
             <AnimatePresence>
               <motion.div
+                ref={menuListRef}
                 initial={{ opacity: 0, y: 4 }}
                 animate={{ opacity: 1, y: 0 }}
                 exit={{ opacity: 0, y: 4 }}