From 7ac338ae312950c19d0eac9c1ef6de9957243f74 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Wed, 7 Feb 2024 18:47:47 -0800
Subject: [PATCH 1/2] fix: styling

---
 .../chat/Messages/ResponseMessage.svelte           | 14 +++++++-------
 .../components/chat/Messages/UserMessage.svelte    |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 7cd9da38..0568630b 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -363,7 +363,7 @@
 										<button
 											class="{isLastMessage
 												? 'visible'
-												: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
+												: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white transition"
 											on:click={() => {
 												editMessageHandler();
 											}}
@@ -387,7 +387,7 @@
 										<button
 											class="{isLastMessage
 												? 'visible'
-												: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition copy-response-button"
+												: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white transition copy-response-button"
 											on:click={() => {
 												copyToClipboard(message.content);
 											}}
@@ -412,7 +412,7 @@
 											class="{isLastMessage
 												? 'visible'
 												: 'invisible group-hover:visible'} p-1 rounded {message.rating === 1
-												? 'bg-gray-100 dark:bg-gray-900'
+												? 'bg-gray-100 dark:bg-gray-800'
 												: ''} transition"
 											on:click={() => {
 												rateMessage(message.id, 1);
@@ -436,7 +436,7 @@
 											class="{isLastMessage
 												? 'visible'
 												: 'invisible group-hover:visible'} p-1 rounded {message.rating === -1
-												? 'bg-gray-100 dark:bg-gray-900'
+												? 'bg-gray-100 dark:bg-gray-800'
 												: ''} transition"
 											on:click={() => {
 												rateMessage(message.id, -1);
@@ -460,7 +460,7 @@
 										<button
 											class="{isLastMessage
 												? 'visible'
-												: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
+												: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white transition"
 											on:click={() => {
 												if (!loadingSpeech) {
 													toggleSpeakMessage(message);
@@ -534,7 +534,7 @@
 											<button
 												class=" {isLastMessage
 													? 'visible'
-													: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition whitespace-pre-wrap"
+													: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white transition whitespace-pre-wrap"
 												on:click={() => {
 													console.log(message);
 												}}
@@ -562,7 +562,7 @@
 												type="button"
 												class="{isLastMessage
 													? 'visible'
-													: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition regenerate-response-button"
+													: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white transition regenerate-response-button"
 												on:click={regenerateResponse}
 											>
 												<svg
diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte
index 945568d5..998fe4e4 100644
--- a/src/lib/components/chat/Messages/UserMessage.svelte
+++ b/src/lib/components/chat/Messages/UserMessage.svelte
@@ -239,7 +239,7 @@
 						{/if}
 
 						<button
-							class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-800 transition edit-user-message-button"
+							class="invisible group-hover:visible p-1 rounded dark:hover:text-white transition edit-user-message-button"
 							on:click={() => {
 								editMessageHandler();
 							}}
@@ -261,7 +261,7 @@
 						</button>
 
 						<button
-							class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-800 transition"
+							class="invisible group-hover:visible p-1 rounded dark:hover:text-white transition"
 							on:click={() => {
 								copyToClipboard(message.content);
 							}}

From 84844a84a0ca71e22d00c66708b806dc2aa2cf70 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Wed, 7 Feb 2024 18:51:45 -0800
Subject: [PATCH 2/2] feat: display max 4 suggestions

---
 src/lib/components/chat/MessageInput/Suggestions.svelte | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/chat/MessageInput/Suggestions.svelte b/src/lib/components/chat/MessageInput/Suggestions.svelte
index 9b69113a..19ef98d2 100644
--- a/src/lib/components/chat/MessageInput/Suggestions.svelte
+++ b/src/lib/components/chat/MessageInput/Suggestions.svelte
@@ -1,10 +1,17 @@
 <script lang="ts">
 	export let submitPrompt: Function;
 	export let suggestionPrompts = [];
+
+	let prompts = [];
+
+	$: prompts =
+		suggestionPrompts.length <= 4
+			? suggestionPrompts
+			: suggestionPrompts.sort(() => Math.random() - 0.5).slice(0, 4);
 </script>
 
 <div class=" flex flex-wrap-reverse mb-3 md:p-1 text-left w-full">
-	{#each suggestionPrompts as prompt, promptIdx}
+	{#each prompts as prompt, promptIdx}
 		<div class="{promptIdx > 1 ? 'hidden sm:inline-flex' : ''} basis-full sm:basis-1/2 p-[5px]">
 			<button
 				class=" flex-1 flex justify-between w-full h-full px-4 py-2.5 bg-white hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-800 rounded-lg transition group"