refac: styling

src/lib/apis/openai/index.ts

@@ -403,18 +403,12 @@ export const generateSearchQuery = async (
 	let error = null;
 
 	// TODO: Allow users to specify the prompt
-
 	// Get the current date in the format "January 20, 2024"
 	const currentDate = new Intl.DateTimeFormat('en-US', {
 		year: 'numeric',
 		month: 'long',
 		day: '2-digit'
 	}).format(new Date());
-	const yesterdayDate = new Intl.DateTimeFormat('en-US', {
-		year: 'numeric',
-		month: 'long',
-		day: '2-digit'
-	}).format(new Date());
 
 	const res = await fetch(`${url}/chat/completions`, {
 		method: 'POST',
@@ -431,14 +425,6 @@ export const generateSearchQuery = async (
 					role: 'assistant',
 					content: `You are tasked with generating web search queries. Give me an appropriate query to answer my question for google search. Answer with only the query. Today is ${currentDate}.`
 				},
-				{
-					role: 'user',
-					content: 'What is the current weather in Paris?'
-				},
-				{
-					role: 'assistant',
-					content: `Weather in Paris ${currentDate}`
-				},
 				{
 					role: 'user',
 					content: prompt

src/lib/components/chat/Chat.svelte

@@ -434,7 +434,10 @@
 		};
 		messages = messages;
 
-		const searchQuery = await generateChatSearchQuery(model, parentId);
+		const prompt = history.messages[parentId].content;
+		let searchQuery = prompt;
+		if (prompt.length > 100) {
+			searchQuery = await generateChatSearchQuery(model, prompt);
 			if (!searchQuery) {
 				toast.warning($i18n.t('No search query generated'));
 				responseMessage.status = {
@@ -446,6 +449,7 @@
 				messages = messages;
 				return;
 			}
+		}
 
 		responseMessage.status = {
 			...responseMessage.status,
@@ -469,7 +473,8 @@
 		responseMessage.status = {
 			...responseMessage.status,
 			done: true,
-			description: $i18n.t('Searched {{count}} sites', { count: results.filenames.length })
+			description: $i18n.t('Searched {{count}} sites', { count: results.filenames.length }),
+			urls: results.filenames
 		};
 
 		if (responseMessage?.files ?? undefined === undefined) {
@@ -1034,15 +1039,14 @@
 		}
 	};
 
-	const generateChatSearchQuery = async (modelId: string, messageId: string) => {
+	const generateChatSearchQuery = async (modelId: string, prompt: string) => {
 		const model = $models.find((model) => model.id === modelId);
 		const taskModelId =
 			model?.owned_by === 'openai' ?? false
 				? $settings?.title?.modelExternal ?? modelId
 				: $settings?.title?.model ?? modelId;
 		const taskModel = $models.find((model) => model.id === taskModelId);
-		const userMessage = history.messages[messageId];
-		const userPrompt = userMessage.content;
+
 		const previousMessages = messages
 			.filter((message) => message.role === 'user')
 			.map((message) => message.content);
@@ -1051,7 +1055,7 @@
 			localStorage.token,
 			taskModelId,
 			previousMessages,
-			userPrompt,
+			prompt,
 			taskModel?.owned_by === 'openai' ?? false
 				? `${OPENAI_API_BASE_URL}`
 				: `${OLLAMA_API_BASE_URL}/v1`

src/lib/components/chat/Messages/ResponseMessage.svelte

@@ -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}
 
+							{#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>
+							{/if}
 						</div>
 					{/if}
 

src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte

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

src/lib/components/icons/ChevronUp.svelte

+<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="m4.5 15.75 7.5-7.5 7.5 7.5" />
+</svg>