refac

backend/open_webui/utils/middleware.py

@@ -663,16 +663,16 @@ async def chat_completion_files_handler(
         if len(queries) == 0:
             queries = [get_last_user_message(body["messages"])]
 
-        # await __event_emitter__(
-        #     {
-        #         "type": "status",
-        #         "data": {
-        #             "action": "queries_generated",
-        #             "queries": queries,
-        #             "done": True,
-        #         },
-        #     }
-        # )
+        await __event_emitter__(
+            {
+                "type": "status",
+                "data": {
+                    "action": "queries_generated",
+                    "queries": queries,
+                    "done": False,
+                },
+            }
+        )
 
         try:
             # Offload get_sources_from_items to a separate thread
@@ -710,6 +710,21 @@ async def chat_completion_files_handler(
 
         log.debug(f"rag_contexts:sources: {sources}")
 
+        sources_count = 0
+        for source in sources:
+            sources_count += len(source.get("document", []))
+
+        await __event_emitter__(
+            {
+                "type": "status",
+                "data": {
+                    "action": "sources_retrieved",
+                    "count": sources_count,
+                    "done": True,
+                },
+            }
+        )
+
     return body, {"sources": sources}
 
 

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

@@ -643,7 +643,10 @@
 			<div>
 				<div class="chat-{message.role} w-full min-w-full markdown-prose">
 					<div>
-						<StatusHistory statusHistory={message?.statusHistory} />
+						<StatusHistory
+							statusHistory={message?.statusHistory}
+							showHistory={message?.content === ''}
+						/>
 
 						{#if message?.files && message.files?.filter((f) => f.type === 'image').length > 0}
 							<div class="my-1 w-full flex overflow-x-auto gap-2 flex-wrap">
@@ -729,7 +732,7 @@
 							</div>
 						{:else}
 							<div class="w-full flex flex-col relative" id="response-content-container">
-								{#if message.content === '' && !message.error && (message?.statusHistory ?? [...(message?.status ? [message?.status] : [])]).length === 0}
+								{#if message.content === '' && !message.error && ((message?.statusHistory ?? [...(message?.status ? [message?.status] : [])]).length === 0 || (message?.statusHistory?.at(-1)?.hidden ?? false))}
 									<Skeleton />
 								{:else if message.content && message.error !== true}
 									<!-- always show message contents even if there's an error -->

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

@@ -2,36 +2,33 @@
 	import { getContext } from 'svelte';
 	const i18n = getContext('i18n');
 
-	import Collapsible from '$lib/components/common/Collapsible.svelte';
 	import StatusItem from './StatusHistory/StatusItem.svelte';
 	export let statusHistory = [];
+	export let showHistory = true;
 
-	let showHistory = false;
-</script>
-
-<!-- <Collapsible open={false} growDirection="up" className="w-full space-y-1" buttonClassName="w-full">
-	<div
-		class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition w-full"
-	>
-		
-	</div>
+	let history = [];
+	let status = null;
 
-	
-</Collapsible> -->
+	$: if (history && history.length > 0) {
+		status = history.at(-1);
+	}
 
-{#if statusHistory && statusHistory.length > 0}
-	{@const status = statusHistory.at(-1)}
+	$: if (JSON.stringify(statusHistory) !== JSON.stringify(history)) {
+		history = statusHistory;
+	}
+</script>
 
+{#if history && history.length > 0}
 	{#if status?.hidden !== true}
 		<div class="text-sm flex flex-col w-full">
 			{#if showHistory}
 				<div class="flex flex-row">
-					{#if statusHistory.length > 1}
+					{#if history.length > 1}
 						<div class="w-1 border-r border-gray-50 dark:border-gray-800 mt-3 -mb-2.5" />
 
 						<div class="w-full -translate-x-[7.5px]">
-							{#each statusHistory as status, idx}
-								{#if idx !== statusHistory.length - 1}
+							{#each history as status, idx}
+								{#if idx !== history.length - 1}
 									<div class="flex items-start gap-2 mb-1">
 										<div class="pt-3 px-1">
 											<span class="relative flex size-2">
@@ -55,7 +52,7 @@
 					showHistory = !showHistory;
 				}}
 			>
-				<div class="flex items-start gap-2 mb-1">
+				<div class="flex items-start gap-2">
 					<div class="pt-3 px-1">
 						<span class="relative flex size-2">
 							{#if status?.done === false}

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

@@ -66,13 +66,57 @@
 								<Search className="size-3" />
 							</div>
 
-							<span class=" ">
+							<span class="line-clamp-1">
 								{query}
 							</span>
 						</div>
 					{/each}
 				</div>
 			</div>
+		{:else if status?.action === 'queries_generated' && status?.queries}
+			<div class="flex flex-col justify-center -space-y-0.5">
+				<div
+					class="{(done || status?.done) === false
+						? 'shimmer'
+						: ''} text-gray-500 dark:text-gray-500 text-base line-clamp-1 text-wrap"
+				>
+					{$i18n.t(`Querying`)}
+				</div>
+
+				<div class=" flex gap-1 flex-wrap mt-2">
+					{#each status.queries as query, idx (query)}
+						<div
+							class="bg-gray-50 dark:bg-gray-850 flex rounded-lg py-1 px-2 items-center gap-1 text-xs"
+						>
+							<div>
+								<Search className="size-3" />
+							</div>
+
+							<span class="line-clamp-1">
+								{query}
+							</span>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{:else if status?.action === 'sources_retrieved' && status?.count !== undefined}
+			<div class="flex flex-col justify-center -space-y-0.5">
+				<div
+					class="{(done || status?.done) === false
+						? 'shimmer'
+						: ''} text-gray-500 dark:text-gray-500 text-base line-clamp-1 text-wrap"
+				>
+					{#if status.count === 0}
+						{$i18n.t('No sources found')}
+					{:else if status.count === 1}
+						{$i18n.t('Retrieved 1 source')}
+					{:else}
+						{$i18n.t('Retrieved {{count}} sources', {
+							count: status.count
+						})}
+					{/if}
+				</div>
+			</div>
 		{:else}
 			<div class="flex flex-col justify-center -space-y-0.5">
 				<div
@@ -81,7 +125,7 @@
 						: ''} text-gray-500 dark:text-gray-500 text-base line-clamp-1 text-wrap"
 				>
 					<!-- $i18n.t(`Searching "{{searchQuery}}"`) -->
-					{#if status?.description.includes('{{searchQuery}}')}
+					{#if status?.description?.includes('{{searchQuery}}')}
 						{$i18n.t(status?.description, {
 							searchQuery: status?.query
 						})}