fix: message input dictate

Co-Authored-By: Marchotridyo <29671825+acomarcho@users.noreply.github.com>

src/lib/components/chat/MessageInput.svelte

@@ -1019,7 +1019,7 @@
 						}}
 					/>
 
-					{#if recording}
+					<div class={recording ? '' : 'hidden'}>
 						<VoiceRecording
 							bind:recording
 							onCancel={async () => {
@@ -1034,7 +1034,7 @@
 								recording = false;
 
 								await tick();
-								await insertTextAtCursor(text);
+								await insertTextAtCursor(`${text}`);
 								await tick();
 								document.getElementById('chat-input')?.focus();
 
@@ -1043,9 +1043,9 @@
 								}
 							}}
 						/>
-					{:else}
+					</div>
 					<form
-							class="w-full flex flex-col gap-1.5"
+						class="w-full flex flex-col gap-1.5 {recording ? 'hidden' : ''}"
 						on:submit|preventDefault={() => {
 							// check if selectedModels support image input
 							dispatch('submit', prompt);
@@ -1111,9 +1111,7 @@
 														<Tooltip
 															className=" absolute top-1 left-1"
 															content={$i18n.t('{{ models }}', {
-																	models: [
-																		...(atSelectedModel ? [atSelectedModel] : selectedModels)
-																	]
+																models: [...(atSelectedModel ? [atSelectedModel] : selectedModels)]
 																	.filter((id) => !visionCapableModels.includes(id))
 																	.join(', ')
 															})}
@@ -1531,9 +1529,7 @@
 												<Tooltip content={filter?.name} placement="top">
 													<button
 														on:click|preventDefault={() => {
-																selectedFilterIds = selectedFilterIds.filter(
-																	(id) => id !== filterId
-																);
+															selectedFilterIds = selectedFilterIds.filter((id) => id !== filterId);
 														}}
 														type="button"
 														class="group p-[7px] flex gap-1.5 items-center text-sm rounded-full transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden {selectedFilterIds.includes(
@@ -1805,7 +1801,6 @@
 							<div class="mb-1" />
 						{/if}
 					</form>
-					{/if}
 				</div>
 			</div>
 		</div>

src/lib/components/chat/MessageInput/VoiceRecording.svelte

@@ -335,6 +335,7 @@
 
 		stopDurationCounter();
 		audioChunks = [];
+		visualizerData = Array(VISUALIZER_BUFFER_LENGTH).fill(0);
 
 		if (stream) {
 			const tracks = stream.getTracks();