Merge pull request #678 from ollama-webui/styling

refac: styling

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

 <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"

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

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);
 							}}