refac: web search link display

backend/open_webui/routers/retrieval.py

@@ -1945,6 +1945,8 @@ async def process_web_search(
 ):
 
     urls = []
+    result_items = []
+
     try:
         logging.info(
             f"trying to web search with {request.app.state.config.WEB_SEARCH_ENGINE, form_data.queries}"
@@ -1966,6 +1968,7 @@ async def process_web_search(
             if result:
                 for item in result:
                     if item and item.link:
+                        result_items.append(item)
                         urls.append(item.link)
 
         urls = list(dict.fromkeys(urls))
@@ -2010,12 +2013,16 @@ async def process_web_search(
         urls = [
             doc.metadata.get("source") for doc in docs if doc.metadata.get("source")
         ]  # only keep the urls returned by the loader
+        result_items = [
+            dict(item) for item in result_items if item.link in urls
+        ]  # only keep the search results that have been loaded
 
         if request.app.state.config.BYPASS_WEB_SEARCH_EMBEDDING_AND_RETRIEVAL:
             return {
                 "status": True,
                 "collection_name": None,
                 "filenames": urls,
+                "items": result_items,
                 "docs": [
                     {
                         "content": doc.page_content,
@@ -2048,6 +2055,7 @@ async def process_web_search(
             return {
                 "status": True,
                 "collection_names": [collection_name],
+                "items": result_items,
                 "filenames": urls,
                 "loaded_count": len(docs),
             }

backend/open_webui/utils/middleware.py

@@ -487,6 +487,7 @@ async def chat_web_search_handler(
                         "action": "web_search",
                         "description": "Searched {{count}} sites",
                         "urls": results["filenames"],
+                        "items": results.get("items", []),
                         "done": True,
                     },
                 }

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

@@ -21,14 +21,14 @@
 		{/if}
 	</div>
 	<div
-		class="text-sm border border-gray-50 dark:border-gray-850 rounded-xl mb-1.5 p-1"
+		class="text-sm border border-gray-50 dark:border-gray-850 rounded-xl mb-1.5 p-2"
 		slot="content"
 	>
 		{#if status?.query}
 			<a
 				href="https://www.google.com/search?q={status.query}"
 				target="_blank"
-				class="flex w-full items-center p-2 px-3 group/item justify-between font-normal text-gray-800 dark:text-gray-300 no-underline"
+				class="flex w-full items-center p-1 px-3 group/item justify-between text-gray-800 dark:text-gray-300 font-normal! no-underline!"
 			>
 				<div class="flex gap-2 items-center">
 					<Search />
@@ -58,34 +58,86 @@
 			</a>
 		{/if}
 
-		{#each status.urls as url, urlIdx}
-			<a
-				href={url}
-				target="_blank"
-				class="flex w-full items-center p-2 px-3 group/item justify-between font-normal text-gray-800 dark:text-gray-300"
-			>
-				<div class=" line-clamp-1">
-					{url}
-				</div>
+		{#if status?.items}
+			{#each status.items as item, itemIdx}
+				<a
+					href={item.link}
+					target="_blank"
+					class="flex w-full items-center p-1 px-3 group/item justify-between text-gray-800 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-850 rounded-lg font-normal! no-underline! mb-1"
+				>
+					<div class=" flex justify-center items-center gap-3">
+						<div class="w-fit">
+							<img
+								src="https://www.google.com/s2/favicons?sz=32&domain={item.link}"
+								alt="favicon"
+								class="size-3.5"
+							/>
+						</div>
 
-				<div
-					class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
+						<div class="w-full text-sm line-clamp-1">
+							{item.title ? item.title : item.link}
+						</div>
+					</div>
+
+					<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}
+		{:else if status?.urls}
+			{#each status.urls as url, urlIdx}
+				<a
+					href={url}
+					target="_blank"
+					class="flex w-full items-center p-1 px-3 group/item justify-between text-gray-800 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-850 rounded-lg no-underline mb-1"
 				>
-					<!--  -->
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 16 16"
-						fill="currentColor"
-						class="size-4"
+					<div class=" flex justify-center items-center gap-3">
+						<div class="w-fit">
+							<img
+								src="https://www.google.com/s2/favicons?sz=32&domain={url}"
+								alt="favicon"
+								class="size-3.5"
+							/>
+						</div>
+
+						<div class="w-full text-sm line-clamp-1">
+							{url}
+						</div>
+					</div>
+
+					<div
+						class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
 					>
-						<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}
+						<!--  -->
+						<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}
+		{/if}
 	</div>
 </Collapsible>