From 45f88b80adf1f4902849d593589a10e0b919e7ad Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Thu, 23 Jan 2025 12:53:17 -0800
Subject: [PATCH] refac: think status

---
 backend/open_webui/utils/middleware.py       |   2 +-
 src/lib/components/common/Collapsible.svelte |  32 +++++-
 src/lib/dayjs.js                             | 104 +++++++++++++++++++
 3 files changed, 136 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/dayjs.js

diff --git a/backend/open_webui/utils/middleware.py b/backend/open_webui/utils/middleware.py
index e256a8f82..895f1bfd1 100644
--- a/backend/open_webui/utils/middleware.py
+++ b/backend/open_webui/utils/middleware.py
@@ -1170,7 +1170,7 @@ async def process_chat_response(
                                                 )
 
                                                 # Format reasoning with <details> tag
-                                                content = f'{ongoing_content}<details type="reasoning" done="true">\n<summary>Thought for {reasoning_duration} seconds</summary>\n{reasoning_display_content}\n</details>\n'
+                                                content = f'{ongoing_content}<details type="reasoning" done="true" duration="{reasoning_duration}">\n<summary>Thought for {reasoning_duration} seconds</summary>\n{reasoning_display_content}\n</details>\n'
                                             else:
                                                 content = ""
 
diff --git a/src/lib/components/common/Collapsible.svelte b/src/lib/components/common/Collapsible.svelte
index e6e980ea4..2db89d208 100644
--- a/src/lib/components/common/Collapsible.svelte
+++ b/src/lib/components/common/Collapsible.svelte
@@ -1,5 +1,29 @@
 <script lang="ts">
 	import { getContext, createEventDispatcher } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import dayjs from '$lib/dayjs';
+	import duration from 'dayjs/plugin/duration';
+	import relativeTime from 'dayjs/plugin/relativeTime';
+
+	dayjs.extend(duration);
+	dayjs.extend(relativeTime);
+
+	async function loadLocale(locales) {
+		for (const locale of locales) {
+			try {
+				dayjs.locale(locale);
+
+				console.log(`Loaded locale: ${locale}`);
+				break; // Stop after successfully loading the first available locale
+			} catch (error) {
+				console.error(`Could not load locale '${locale}':`, error);
+			}
+		}
+	}
+
+	// Assuming $i18n.languages is an array of language codes
+	$: loadLocale($i18n.languages);
 
 	const dispatch = createEventDispatcher();
 	$: dispatch('change', open);
@@ -50,7 +74,13 @@
 				{/if}
 
 				<div class="">
-					{title}
+					{#if attributes?.type === 'reasoning' && attributes?.done === 'true' && attributes?.duration}
+						{$i18n.t('Thought for {{DURATION}}', {
+							DURATION: dayjs.duration(attributes.duration, 'seconds').humanize()
+						})}
+					{:else}
+						{title}
+					{/if}
 				</div>
 
 				<div class="flex self-center translate-y-[1px]">
diff --git a/src/lib/dayjs.js b/src/lib/dayjs.js
new file mode 100644
index 000000000..3680f5646
--- /dev/null
+++ b/src/lib/dayjs.js
@@ -0,0 +1,104 @@
+import dayjs from 'dayjs';
+
+// Import all locales
+import 'dayjs/locale/af';
+import 'dayjs/locale/am';
+import 'dayjs/locale/ar';
+import 'dayjs/locale/az';
+import 'dayjs/locale/be';
+import 'dayjs/locale/bg';
+import 'dayjs/locale/bi';
+import 'dayjs/locale/bm';
+import 'dayjs/locale/bn';
+import 'dayjs/locale/bo';
+import 'dayjs/locale/br';
+import 'dayjs/locale/bs';
+import 'dayjs/locale/ca';
+import 'dayjs/locale/cs';
+import 'dayjs/locale/cv';
+import 'dayjs/locale/cy';
+import 'dayjs/locale/da';
+import 'dayjs/locale/de';
+import 'dayjs/locale/dv';
+import 'dayjs/locale/el';
+import 'dayjs/locale/en';
+import 'dayjs/locale/eo';
+import 'dayjs/locale/es';
+import 'dayjs/locale/eu';
+import 'dayjs/locale/fa';
+import 'dayjs/locale/fi';
+import 'dayjs/locale/fo';
+import 'dayjs/locale/fr';
+import 'dayjs/locale/fy';
+import 'dayjs/locale/ga';
+import 'dayjs/locale/gd';
+import 'dayjs/locale/gl';
+import 'dayjs/locale/gu';
+import 'dayjs/locale/he';
+import 'dayjs/locale/hi';
+import 'dayjs/locale/hr';
+import 'dayjs/locale/ht';
+import 'dayjs/locale/hu';
+import 'dayjs/locale/id';
+import 'dayjs/locale/is';
+import 'dayjs/locale/it';
+import 'dayjs/locale/ja';
+import 'dayjs/locale/jv';
+import 'dayjs/locale/ka';
+import 'dayjs/locale/kk';
+import 'dayjs/locale/km';
+import 'dayjs/locale/kn';
+import 'dayjs/locale/ko';
+import 'dayjs/locale/ku';
+import 'dayjs/locale/ky';
+import 'dayjs/locale/lb';
+import 'dayjs/locale/lo';
+import 'dayjs/locale/lt';
+import 'dayjs/locale/lv';
+import 'dayjs/locale/me';
+import 'dayjs/locale/mi';
+import 'dayjs/locale/mk';
+import 'dayjs/locale/ml';
+import 'dayjs/locale/mn';
+import 'dayjs/locale/mr';
+import 'dayjs/locale/ms';
+import 'dayjs/locale/mt';
+import 'dayjs/locale/my';
+import 'dayjs/locale/nb';
+import 'dayjs/locale/ne';
+import 'dayjs/locale/nl';
+import 'dayjs/locale/nn';
+import 'dayjs/locale/pl';
+import 'dayjs/locale/pt';
+import 'dayjs/locale/ro';
+import 'dayjs/locale/ru';
+import 'dayjs/locale/rw';
+import 'dayjs/locale/sd';
+import 'dayjs/locale/se';
+import 'dayjs/locale/si';
+import 'dayjs/locale/sk';
+import 'dayjs/locale/sl';
+import 'dayjs/locale/sq';
+import 'dayjs/locale/sr';
+import 'dayjs/locale/ss';
+import 'dayjs/locale/sv';
+import 'dayjs/locale/sw';
+import 'dayjs/locale/ta';
+import 'dayjs/locale/te';
+import 'dayjs/locale/tet';
+import 'dayjs/locale/tg';
+import 'dayjs/locale/th';
+import 'dayjs/locale/tk';
+import 'dayjs/locale/tlh';
+import 'dayjs/locale/tr';
+import 'dayjs/locale/tzl';
+import 'dayjs/locale/tzm';
+import 'dayjs/locale/uk';
+import 'dayjs/locale/ur';
+import 'dayjs/locale/uz';
+import 'dayjs/locale/vi';
+import 'dayjs/locale/yo';
+import 'dayjs/locale/zh';
+import 'dayjs/locale/et';
+
+export default dayjs;