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(null); + const menuListRef = useRef(null); const lastSerializedRef = useRef(''); const isComposingRef = useRef(false); @@ -155,6 +156,14 @@ export const ParalinguisticInput = forwardRef { + 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