From 1b809fe42e16a0b18f5533a7fba4e1f1ebc1635e Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sun, 18 Aug 2024 17:16:22 +0200
Subject: [PATCH] refac: styling

---
 .../Messages/MultiResponseMessages.svelte     | 29 +++++++++++++++++--
 src/lib/components/icons/Merge.svelte         | 19 ++++++++++++
 2 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/icons/Merge.svelte

diff --git a/src/lib/components/chat/Messages/MultiResponseMessages.svelte b/src/lib/components/chat/Messages/MultiResponseMessages.svelte
index 1a157a07b..a55b745bc 100644
--- a/src/lib/components/chat/Messages/MultiResponseMessages.svelte
+++ b/src/lib/components/chat/Messages/MultiResponseMessages.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	import { onMount, tick } from 'svelte';
+	import { onMount, tick, getContext } from 'svelte';
 	import { createEventDispatcher } from 'svelte';
 	import { updateChatById } from '$lib/apis/chats';
 	import ResponseMessage from './ResponseMessage.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Merge from '$lib/components/icons/Merge.svelte';
+
+	const i18n = getContext('i18n');
 
 	export let chatId;
 
@@ -122,7 +126,7 @@
 							currentMessageId
 						]?.modelIdx == modelIdx
 							? 'border-gray-100 dark:border-gray-800 border-[1.5px]'
-							: 'border-gray-50 dark:border-gray-850 '} transition p-5 rounded-3xl"
+							: 'border-gray-50 dark:border-gray-850 border-dashed '} transition p-5 rounded-2xl"
 						on:click={() => {
 							if (currentMessageId != message.id) {
 								currentMessageId = message.id;
@@ -176,4 +180,25 @@
 			{/each}
 		{/key}
 	</div>
+
+	{#if !readOnly}
+		{#if !parentMessage?.childrenIds.map((id) => history.messages[id]).find((m) => !m.done)}
+			<div class=" flex justify-end overflow-x-auto buttons text-gray-500 dark:text-gray-400 mt-1">
+				<Tooltip content={$i18n.t('Merge Responses')} placement="bottom">
+					<button
+						type="button"
+						id="merge-response-button"
+						class="{true
+							? 'visible'
+							: 'invisible group-hover:visible'} p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
+						on:click={() => {
+							// continueGeneration();
+						}}
+					>
+						<Merge className=" size-5 " />
+					</button>
+				</Tooltip>
+			</div>
+		{/if}
+	{/if}
 </div>
diff --git a/src/lib/components/icons/Merge.svelte b/src/lib/components/icons/Merge.svelte
new file mode 100644
index 000000000..998303677
--- /dev/null
+++ b/src/lib/components/icons/Merge.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'w-4 h-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M8 8v8m0-8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 8a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm6-2a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm0 0h-1a5 5 0 0 1-5-5v-.5"
+	/>
+</svg>