From 655745ee0c8bef0774d7bdaa8696ad7406e6605a Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sun, 10 Nov 2024 19:47:55 -0800
Subject: [PATCH] refac: styling

---
 .../components/chat/Messages/Citations.svelte | 112 +++++++-----------
 .../chat/Messages/ResponseMessage.svelte      |   2 +-
 2 files changed, 41 insertions(+), 73 deletions(-)

diff --git a/src/lib/components/chat/Messages/Citations.svelte b/src/lib/components/chat/Messages/Citations.svelte
index b6385e2b2..c4ed12817 100644
--- a/src/lib/components/chat/Messages/Citations.svelte
+++ b/src/lib/components/chat/Messages/Citations.svelte
@@ -89,9 +89,9 @@
 />
 
 {#if _citations.length > 0}
-	<div class="my-1 -mx-0.5 w-full flex gap-1 items-center flex-wrap">
+	<div class=" py-0.5 -mx-0.5 w-full flex gap-1 items-center flex-wrap">
 		{#if _citations.length <= 3}
-			<div class="flex gap-2 text-xs font-semibold">
+			<div class="flex text-xs font-medium">
 				{#each _citations as citation, idx}
 					<button
 						class="no-toggle outline-none flex dark:text-gray-300 p-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition rounded-xl max-w-96"
@@ -114,69 +114,39 @@
 		{:else}
 			<Collapsible bind:open={isCollapsibleOpen} className="w-full">
 				<div
-					class="flex items-center gap-1 text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 transition cursor-pointer"
+					class="flex items-center gap-2 text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 transition cursor-pointer"
 				>
 					<div class="flex-grow flex items-center gap-1 overflow-hidden">
 						<span class="whitespace-nowrap hidden sm:inline">{$i18n.t('References from')}</span>
 						<div class="flex items-center">
-							{#if _citations.length > 1 && _citations
-									.slice(0, 2)
-									.reduce((acc, citation) => acc + citation.source.name.length, 0) <= 50}
+							<div class="flex text-xs font-medium items-center">
 								{#each _citations.slice(0, 2) as citation, idx}
-									<div class="flex items-center">
-										<button
-											class="no-toggle flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl max-w-96 text-xs font-semibold"
-											on:click={() => {
-												showCitationModal = true;
-												selectedCitation = citation;
-											}}
-										>
-											{#if _citations.every((c) => c.distances !== undefined)}
-												<div class="bg-white dark:bg-gray-700 rounded-full size-4">
-													{idx + 1}
-												</div>
-											{/if}
-											<div class="flex-1 mx-2 line-clamp-1">
-												{citation.source.name}
+									<button
+										class="no-toggle outline-none flex dark:text-gray-300 p-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition rounded-xl max-w-96"
+										on:click={() => {
+											showCitationModal = true;
+											selectedCitation = citation;
+										}}
+										on:pointerup={(e) => {
+											e.stopPropagation();
+										}}
+									>
+										{#if _citations.every((c) => c.distances !== undefined)}
+											<div class="bg-gray-50 dark:bg-gray-800 rounded-full size-4">
+												{idx + 1}
 											</div>
-										</button>
-										{#if idx === 0}<span class="mr-1">,</span>
 										{/if}
-									</div>
+										<div class="flex-1 mx-1 line-clamp-1 truncate">
+											{citation.source.name}
+										</div>
+									</button>
 								{/each}
-							{:else}
-								{#each _citations.slice(0, 1) as citation, idx}
-									<div class="flex items-center">
-										<button
-											class="no-toggle flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl max-w-96 text-xs font-semibold"
-											on:click={() => {
-												showCitationModal = true;
-												selectedCitation = citation;
-											}}
-										>
-											{#if _citations.every((c) => c.distances !== undefined)}
-												<div class="bg-white dark:bg-gray-700 rounded-full size-4">
-													{idx + 1}
-												</div>
-											{/if}
-											<div class="flex-1 mx-2 line-clamp-1">
-												{citation.source.name}
-											</div>
-										</button>
-									</div>
-								{/each}
-							{/if}
+							</div>
 						</div>
 						<div class="flex items-center gap-1 whitespace-nowrap">
 							<span class="hidden sm:inline">{$i18n.t('and')}</span>
 							<span class="text-gray-600 dark:text-gray-400">
-								{_citations.length -
-									(_citations.length > 1 &&
-									_citations
-										.slice(0, 2)
-										.reduce((acc, citation) => acc + citation.source.name.length, 0) <= 50
-										? 2
-										: 1)}
+								{_citations.length - 2}
 							</span>
 							<span>{$i18n.t('more')}</span>
 						</div>
@@ -189,27 +159,25 @@
 						{/if}
 					</div>
 				</div>
-				<div slot="content" class="mt-2">
-					<div class="flex flex-wrap gap-2">
+				<div slot="content">
+					<div class="flex text-xs font-medium">
 						{#each _citations as citation, idx}
-							<div class="flex gap-1 text-xs font-semibold">
-								<button
-									class="no-toggle flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl max-w-96"
-									on:click={() => {
-										showCitationModal = true;
-										selectedCitation = citation;
-									}}
-								>
-									{#if _citations.every((c) => c.distances !== undefined)}
-										<div class="bg-white dark:bg-gray-700 rounded-full size-4">
-											{idx + 1}
-										</div>
-									{/if}
-									<div class="flex-1 mx-2 line-clamp-1">
-										{citation.source.name}
+							<button
+								class="no-toggle outline-none flex dark:text-gray-300 p-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition rounded-xl max-w-96"
+								on:click={() => {
+									showCitationModal = true;
+									selectedCitation = citation;
+								}}
+							>
+								{#if _citations.every((c) => c.distances !== undefined)}
+									<div class="bg-gray-50 dark:bg-gray-800 rounded-full size-4">
+										{idx + 1}
 									</div>
-								</button>
-							</div>
+								{/if}
+								<div class="flex-1 mx-1 line-clamp-1 truncate">
+									{citation.source.name}
+								</div>
+							</button>
 						{/each}
 					</div>
 				</div>
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index d3e9b03fd..6db343b68 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -520,7 +520,7 @@
 							{@const status = (
 								message?.statusHistory ?? [...(message?.status ? [message?.status] : [])]
 							).at(-1)}
-							<div class="status-description flex items-center gap-2 pt-0.5 pb-1">
+							<div class="status-description flex items-center gap-2 py-0.5">
 								{#if status?.done === false}
 									<div class="">
 										<Spinner className="size-4" />