refac: styling

2024-05-27 14:55:08 -07:00
parent 74a8deb19f
commit 4d64893661
5 changed files with 110 additions and 34 deletions
@@ -34,6 +34,7 @@
 	import RateComment from './RateComment.svelte';
 	import CitationsModal from '$lib/components/chat/Messages/CitationsModal.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
+	import WebSearchResults from './ResponseMessage/WebSearchResults.svelte';

 	export let message;
 	export let siblings;
@@ -389,11 +390,21 @@
 								</div>
 							{/if}

-							<div class="flex flex-col justify-center -space-y-0.5">
-								<div class=" text-gray-500 dark:text-gray-500 text-base line-clamp-1 text-wrap">
-									{message.status.description}
+							{#if message?.status?.action === 'web_search' && message?.status?.urls}
+								<WebSearchResults urls={message?.status?.urls}>
+									<div class="flex flex-col justify-center -space-y-0.5">
+										<div class="text-base line-clamp-1 text-wrap">
+											{message.status.description}
+										</div>
+									</div>
+								</WebSearchResults>
+							{:else}
+								<div class="flex flex-col justify-center -space-y-0.5">
+									<div class=" text-gray-500 dark:text-gray-500 text-base line-clamp-1 text-wrap">
+										{message.status.description}
+									</div>
 								</div>
-							</div>
+							{/if}
 						</div>
 					{/if}

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
+	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
+	import { Collapsible } from 'bits-ui';
+	import { slide } from 'svelte/transition';
+
+	export let urls = [];
+	let state = false;
+</script>
+
+<Collapsible.Root class="w-full space-y-1" bind:open={state}>
+	<Collapsible.Trigger>
+		<div
+			class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
+		>
+			<slot />
+
+			{#if state}
+				<ChevronUp strokeWidth="3.5" className="size-3.5 " />
+			{:else}
+				<ChevronDown strokeWidth="3.5" className="size-3.5 " />
+			{/if}
+		</div>
+	</Collapsible.Trigger>
+
+	<Collapsible.Content
+		class=" text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl"
+		transition={slide}
+	>
+		{#each urls as url, urlIdx}
+			<a
+				href={url}
+				target="_blank"
+				class="flex w-full items-center p-3 px-4 {urlIdx === urls.length - 1
+					? ''
+					: 'border-b border-gray-300/30 dark:border-gray-700/50'} group/item justify-between font-normal text-gray-800 dark:text-gray-300"
+			>
+				{url}
+
+				<div
+					class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
+				>
+					<!--  -->
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 16 16"
+						fill="currentColor"
+						class="size-4"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				</div>
+			</a>
+		{/each}
+	</Collapsible.Content>
+</Collapsible.Root>