Add a more visible retry button on failure to generate (#530)

* Add a more visible retry button on failure to generate

* clean up props

* lint

* simplify

* color

* fix linting

---------

Co-authored-by: Victor Mustar <[email protected]>

src/lib/components/RetryBtn.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import CarbonRotate360 from "~icons/carbon/rotate-360";
+
+	export let classNames = "";
+</script>
+
+<button
+	type="button"
+	on:click
+	class="btn flex h-8 rounded-lg border bg-white px-3 py-1 text-gray-500 shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 {classNames}"
+>
+	<CarbonRotate360 class="mr-2 text-xs " /> Retry
+</button>

src/lib/components/StopGeneratingBtn.svelte

@@ -7,7 +7,7 @@
 <button
 	type="button"
 	on:click
-	class="btn flex h-9 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 {classNames}"
+	class="btn flex h-8 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 {classNames}"
 >
-	<CarbonStopFilledAlt class="-ml-1 mr-1 h-[1.25rem] w-[1.1875rem] text-gray-400" /> Stop generating
+	<CarbonStopFilledAlt class="-ml-1 mr-1 h-[1.25rem] w-[1.1875rem] text-gray-300" /> Stop generating
 </button>

src/lib/components/WebSearchToggle.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <div
-	class="flex h-9 cursor-pointer select-none items-center gap-2 rounded-xl border bg-white p-1.5 shadow-sm hover:shadow-none dark:border-gray-800 dark:bg-gray-900"
+	class="flex h-8 cursor-pointer select-none items-center gap-2 rounded-lg border bg-white p-1.5 shadow-sm hover:shadow-none dark:border-gray-800 dark:bg-gray-900"
 	on:click={toggle}
 	on:keypress={toggle}
 	aria-checked={$webSearchParameters.useSearch}

src/lib/components/chat/ChatInput.svelte

@@ -46,6 +46,7 @@
 		tabindex="0"
 		rows="1"
 		class="scrollbar-custom absolute top-0 m-0 h-full w-full resize-none scroll-p-3 overflow-x-hidden overflow-y-scroll border-0 bg-transparent p-3 outline-none focus:ring-0 focus-visible:ring-0"
+		class:text-gray-400={disabled}
 		bind:value
 		bind:this={textareaElement}
 		{disabled}

src/lib/components/chat/ChatWindow.svelte

@@ -17,6 +17,7 @@
 	import type { WebSearchUpdate } from "$lib/types/MessageUpdate";
 	import { page } from "$app/stores";
 	import DisclaimerModal from "../DisclaimerModal.svelte";
+	import RetryBtn from "../RetryBtn.svelte";
 
 	export let messages: Message[] = [];
 	export let loading = false;
@@ -45,6 +46,8 @@
 		dispatch("message", message);
 		message = "";
 	};
+
+	$: lastIsError = messages[messages.length - 1]?.from === "user" && !loading;
 </script>
 
 <div class="relative min-h-0 min-w-0">
@@ -84,14 +87,21 @@
 	<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"
 	>
-		<div class="flex w-full pb-3 max-md:justify-between">
+		<div class="flex w-full pb-3">
 			{#if settings?.searchEnabled}
 				<WebSearchToggle />
 			{/if}
 			{#if loading}
-				<StopGeneratingBtn
-					classNames={settings?.searchEnabled ? "md:-translate-x-1/2 md:mx-auto" : "mx-auto"}
-					on:click={() => dispatch("stop")}
+				<StopGeneratingBtn classNames="ml-auto" on:click={() => dispatch("stop")} />
+			{/if}
+			{#if lastIsError}
+				<RetryBtn
+					classNames="ml-auto"
+					on:click={() =>
+						dispatch("retry", {
+							id: messages[messages.length - 1].id,
+							content: messages[messages.length - 1].content,
+						})}
 				/>
 			{/if}
 		</div>
@@ -101,19 +111,23 @@
 			{isReadOnly ? 'opacity-30' : ''}"
 		>
 			<div class="flex w-full flex-1 border-none bg-transparent">
-				<ChatInput
-					placeholder="Ask anything"
-					bind:value={message}
-					on:submit={handleSubmit}
-					on:keypress={(ev) => {
-						if ($page.data.loginRequired) {
-							ev.preventDefault();
-							loginModalOpen = true;
-						}
-					}}
-					maxRows={4}
-					disabled={isReadOnly}
-				/>
+				{#if lastIsError}
+					<ChatInput value="Sorry, something went wrong. Please try again." disabled={true} />
+				{:else}
+					<ChatInput
+						placeholder="Ask anything"
+						bind:value={message}
+						on:submit={handleSubmit}
+						on:keypress={(ev) => {
+							if ($page.data.loginRequired) {
+								ev.preventDefault();
+								loginModalOpen = true;
+							}
+						}}
+						maxRows={4}
+						disabled={isReadOnly || lastIsError}
+					/>
+				{/if}
 
 				{#if loading}
 					<button