Web search details: ui update (#277)

src/lib/components/OpenWebSearchResults.svelte

@@ -31,7 +31,7 @@
 </script>
 
 <details
-	class="details flex w-fit rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900 {classNames}"
+	class="details flex w-fit rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900 {classNames} max-w-full"
 	on:toggle={() => {
 		if (webSearchMessages.length === 0 && webSearchId) {
 			fetch(`${base}/search/${webSearchId}`)
@@ -62,48 +62,49 @@
 		</div>
 	</summary>
 
-	<div class="content p-5 pb-1">
+	<div class="content px-5 pb-5 pt-4">
 		{#if webSearchMessages.length === 0}
 			<div class="mx-auto w-fit">
-				<EosIconsLoading class="mb-3 h-10 w-10" />
+				<EosIconsLoading class="mb-3 h-4 w-4" />
 			</div>
 		{:else}
-			<ol class="relative border-l border-gray-200 dark:border-gray-600">
+			<ol>
 				{#each webSearchMessages as message}
 					{#if message.type === "update"}
-						<li class="mb-4 ml-4">
-							<div
-								class="h-3 w-3 -translate-x-[1.4rem] rounded-full bg-gray-200 dark:bg-gray-600"
-							/>
-							<h3 class="text-md -translate-y-[1.1rem] text-gray-800 dark:text-gray-100">
-								{message.message}
-							</h3>
+						<li class="group border-l pb-6 last:!border-transparent last:pb-0 dark:border-gray-800">
+							<div class="flex items-start">
+								<div
+									class="-ml-1.5 h-3 w-3 flex-none rounded-full bg-gray-200 dark:bg-gray-600 {loading
+										? 'group-last:animate-pulse group-last:bg-gray-300 group-last:dark:bg-gray-500'
+										: ''}"
+								/>
+								<h3 class="text-md -mt-1.5 pl-2.5 text-gray-800 dark:text-gray-100">
+									{message.message}
+								</h3>
+							</div>
 							{#if message.args}
-								<p
-									class="mb-4 -translate-y-[1.1rem]  font-normal text-gray-500 dark:text-gray-400 "
-								>
+								<p class="mt-1.5 pl-4 text-gray-500 dark:text-gray-400">
 									{message.args}
 								</p>
 							{/if}
 						</li>
 					{:else if message.type === "error"}
-						<li class="mb-4 ml-4">
-							<div
-								class="h-3 w-3 -translate-x-[1.4rem] rounded-full text-red-700 dark:text-red-500"
-							>
-								<CarbonError class="h-3 w-3" />
+						<li class="group border-l pb-6 last:!border-transparent last:pb-0 dark:border-gray-800">
+							<div class="flex items-start">
+								<CarbonError
+									class="-ml-1.5 h-3 w-3 flex-none scale-110 text-red-700 dark:text-red-500"
+								/>
+								<h3 class="text-md -mt-1.5 pl-2.5 text-red-700 dark:text-red-500">
+									{message.message}
+								</h3>
 							</div>
-							<h3 class="text-md -translate-y-[1.1rem] text-red-700 dark:text-red-500">
-								{message.message}
-							</h3>
 							{#if message.args}
-								<p class="mb-4 -translate-y-[1.1rem] font-normal text-gray-500 dark:text-gray-400 ">
+								<p class="mt-1.5 pl-4 text-gray-500 dark:text-gray-400">
 									{message.args}
 								</p>
 							{/if}
 						</li>
 					{/if}
-					<p />
 				{/each}
 			</ol>
 		{/if}

src/lib/components/chat/ChatMessage.svelte

@@ -121,7 +121,7 @@
 			{#if message.webSearchId || (webSearchMessages.length > 0 && isLast)}
 				{#key (message.webSearchId, message.score, loading)}
 					<OpenWebSearchResults
-						classNames={tokens.length ? "mb-3" : ""}
+						classNames={tokens.length ? "mb-3.5" : ""}
 						webSearchId={message.webSearchId}
 						{webSearchMessages}
 						loading={!webSearchIsDone}