Fix stop generating button (#244)

* fix stop btn

* use media query

package-lock.json

@@ -26,6 +26,7 @@
 			},
 			"devDependencies": {
 				"@iconify-json/carbon": "^1.1.16",
+				"@iconify-json/eos-icons": "^1.1.6",
 				"@sveltejs/adapter-node": "^1.2.4",
 				"@sveltejs/kit": "^1.15.10",
 				"@tailwindcss/typography": "^0.5.9",
@@ -539,6 +540,15 @@
 				"@iconify/types": "*"
 			}
 		},
+		"node_modules/@iconify-json/eos-icons": {
+			"version": "1.1.6",
+			"resolved": "https://registry.npmjs.org/@iconify-json/eos-icons/-/eos-icons-1.1.6.tgz",
+			"integrity": "sha512-A1kUcVbgrdlBBacFcs+srwnfSH9htQvlgbi0u6Jf38lp4PZAK3InXVbVySrJKx//FJtSMdnpZh0b89yjcAIIBg==",
+			"dev": true,
+			"dependencies": {
+				"@iconify/types": "*"
+			}
+		},
 		"node_modules/@iconify/types": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",

package.json

@@ -15,6 +15,7 @@
 	},
 	"devDependencies": {
 		"@iconify-json/carbon": "^1.1.16",
+		"@iconify-json/eos-icons": "^1.1.6",
 		"@sveltejs/adapter-node": "^1.2.4",
 		"@sveltejs/kit": "^1.15.10",
 		"@tailwindcss/typography": "^0.5.9",

src/lib/components/StopGeneratingBtn.svelte

@@ -8,7 +8,7 @@
 <button
 	type="button"
 	on:click
-	class="btn absolute flex rounded-lg border bg-white px-3 py-1 shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600 
+	class="btn flex rounded-lg border bg-white px-3 py-1 shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600 
     {className}
     {visible ? 'visible opacity-100' : 'invisible opacity-0'}
     "

src/lib/components/chat/ChatWindow.svelte

@@ -4,6 +4,8 @@
 
 	import CarbonSendAltFilled from "~icons/carbon/send-alt-filled";
 	import CarbonExport from "~icons/carbon/export";
+	import CarbonPause from "~icons/carbon/pause-filled";
+	import EosIconsLoading from "~icons/eos-icons/loading";
 
 	import ChatMessages from "./ChatMessages.svelte";
 	import ChatInput from "./ChatInput.svelte";
@@ -56,11 +58,9 @@
 	<div
 		class="dark:via-gray-80 pointer-events-none absolute inset-x-0 bottom-0 z-0 mx-auto flex w-full max-w-3xl flex-col items-center justify-center bg-gradient-to-t from-white via-white/80 to-white/0 px-3.5 py-4 dark:border-gray-800 dark:from-gray-900 dark:to-gray-900/0 max-md:border-t max-md:bg-white max-md:dark:bg-gray-900 sm:px-5 md:py-8 xl:max-w-4xl [&>*]:pointer-events-auto"
 	>
-		<StopGeneratingBtn
-			visible={loading}
-			className="right-5 mr-[1px] md:mr-0 md:right-7 top-6 md:top-10 z-10"
-			on:click={() => dispatch("stop")}
-		/>
+		<div class="my-[0.5rem] hidden justify-center sm:flex">
+			<StopGeneratingBtn visible={loading} on:click={() => dispatch("stop")} />
+		</div>
 		<form
 			on:submit|preventDefault={handleSubmit}
 			class="relative flex w-full max-w-4xl flex-1 items-center rounded-xl border bg-gray-100 focus-within:border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:focus-within:border-gray-500 
@@ -74,13 +74,28 @@
 					maxRows={4}
 					disabled={isReadOnly}
 				/>
-				<button
-					class="btn mx-1 my-1 h-[2.4rem] self-end rounded-lg bg-transparent p-1 px-[0.7rem] text-gray-400 disabled:opacity-60 enabled:hover:text-gray-700 dark:disabled:opacity-40 enabled:dark:hover:text-gray-100"
-					disabled={!message || loading || isReadOnly}
-					type="submit"
-				>
-					<CarbonSendAltFilled />
-				</button>
+
+				{#if loading}
+					<button
+						class="btn mx-1 my-1 inline-block h-[2.4rem] self-end rounded-lg bg-transparent p-1 px-[0.7rem] text-gray-400 disabled:opacity-60 enabled:hover:text-gray-700 dark:disabled:opacity-40 enabled:dark:hover:text-gray-100 md:hidden"
+						on:click={() => dispatch("stop")}
+					>
+						<CarbonPause />
+					</button>
+					<div
+						class="mx-1 my-1 hidden h-[2.4rem] items-center p-1 px-[0.7rem] text-gray-400 disabled:opacity-60 enabled:hover:text-gray-700 dark:disabled:opacity-40 enabled:dark:hover:text-gray-100 md:flex"
+					>
+						<EosIconsLoading />
+					</div>
+				{:else}
+					<button
+						class="btn mx-1 my-1 h-[2.4rem] self-end rounded-lg bg-transparent p-1 px-[0.7rem] text-gray-400 disabled:opacity-60 enabled:hover:text-gray-700 dark:disabled:opacity-40 enabled:dark:hover:text-gray-100"
+						disabled={!message || isReadOnly}
+						type="submit"
+					>
+						<CarbonSendAltFilled />
+					</button>
+				{/if}
 			</div>
 		</form>
 		<div class="mt-2 flex justify-between self-stretch px-1 text-xs text-gray-400/90 max-sm:gap-2">