From fffded8b21f45292904159d6f58bdefa06108eca Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 10 Nov 2023 15:16:25 -0800
Subject: [PATCH] feat: speech recognition ui added

---
 src/routes/+page.svelte | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index bb35c41b5..e44a61fbb 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -25,6 +25,7 @@
 		system: null,
 		temperature: null
 	};
+	let speechRecognition = true;
 
 	let models = [];
 	let chats = [];
@@ -1199,7 +1200,9 @@
 						>
 							<textarea
 								id="chat-textarea"
-								class="rounded-xl dark:bg-gray-700 dark:text-gray-100 outline-none border dark:border-gray-700 w-full py-3 px-5 pr-12 resize-none"
+								class="rounded-xl dark:bg-gray-700 dark:text-gray-100 outline-none border dark:border-gray-700 w-full py-3 {speechRecognition
+									? 'px-12'
+									: 'pl-5 pr-12'} resize-none"
 								placeholder="Send a message"
 								bind:value={prompt}
 								on:keypress={(e) => {
@@ -1216,8 +1219,32 @@
 									e.target.style.height = Math.min(e.target.scrollHeight, 200) + 2 + 'px';
 								}}
 							/>
+
+							{#if speechRecognition}
+								<div class=" absolute left-0 bottom-0">
+									<div class="pl-2.5 pb-[9px]">
+										<button
+											class="  text-gray-700 dark:text-gray-100 transition rounded-lg p-1.5"
+											on:click={() => {}}
+										>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												viewBox="0 0 20 20"
+												fill="currentColor"
+												class="w-5 h-5"
+											>
+												<path d="M7 4a3 3 0 016 0v6a3 3 0 11-6 0V4z" />
+												<path
+													d="M5.5 9.643a.75.75 0 00-1.5 0V10c0 3.06 2.29 5.585 5.25 5.954V17.5h-1.5a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-1.5v-1.546A6.001 6.001 0 0016 10v-.357a.75.75 0 00-1.5 0V10a4.5 4.5 0 01-9 0v-.357z"
+												/>
+											</svg>
+										</button>
+									</div>
+								</div>
+							{/if}
+
 							<div class=" absolute right-0 bottom-0">
-								<div class="pr-3 pb-[9px]">
+								<div class="pr-2.5 pb-[9px]">
 									{#if messages.length == 0 || messages.at(-1).done == true}
 										<button
 											class="{prompt !== ''