fix: update chat input via Alpine store for voice transcripts (fixes #1510)
Fixes "BUG: STT transcription succeeds but text never appears in chat input (Alpine.js x-model conflict)". Update `webui/index.js` `updateChatInput()` to append transcribed text to `inputStore.message` (the Alpine-backed source of truth) instead of mutating `#chat-input.value` directly and dispatching an `input` event. This avoids the x-model race where Alpine overwrites the DOM value, ensuring voice/transcribed text appears in the chat composer and textarea height is recalculated after store update.
Alessandro committed
Apr 21, 2026 at 06:12 UTC
5026a72b0aa55782627ac75bc6b34753b5705360
1 file changed
+10
-10
webui/index.js
+10
-10
@@ -170,23 +170,23 @@ globalThis.toastFetchError = toastFetchError;
170
// Event listeners will be set up in DOMContentLoaded
171
172
export function updateChatInput(text) {
173
- const chatInputEl = document.getElementById("chat-input");
174
- if (!chatInputEl) {
175
- console.warn("`chatInput` element not found, cannot update.");
173
+ if (!inputStore) {
174
+ console.warn("`chatInput` store not found, cannot update.");
175
return;
176
}
177
console.log("updateChatInput called with:", text);
178
180
- // Append text with proper spacing
181
- const currentValue = chatInputEl.value;
179
+ // Append text with proper spacing in Alpine store first.
180
+ const currentValue = inputStore.message || "";
181
const needsSpace = currentValue.length > 0 && !currentValue.endsWith(" ");
183
- chatInputEl.value = currentValue + (needsSpace ? " " : "") + text + " ";
182
+ inputStore.message = currentValue + (needsSpace ? " " : "") + text + " ";
183
185
- // Adjust height and trigger input event
186
- adjustTextareaHeight();
187
- chatInputEl.dispatchEvent(new Event("input"));
184
+ // Adjust height after Alpine applies store value.
185
+ setTimeout(() => {
186
+ adjustTextareaHeight();
187
+ }, 0);
188
189
- console.log("Updated chat input value:", chatInputEl.value);
189
+ console.log("Updated chat input value:", inputStore.message);
190
}
191
192
async function updateUserTime() {