Add support for themes

Author: mythz

llms/extensions/analytics/ui/index.mjs

@@ -19,17 +19,17 @@ export const colors = [
 
 const MonthSelector = {
     template: `
-    <div class="flex flex-col sm:flex-row gap-2 sm:gap-4 items-stretch sm:items-center w-full sm:w-auto">
+    <div class="pb-1 flex flex-col sm:flex-row gap-2 sm:gap-4 items-stretch sm:items-center w-full sm:w-auto">
         <!-- Months Row -->
-        <div class="flex gap-1 sm:gap-2 flex-wrap justify-center overflow-x-auto">
+        <div class="flex gap-1 sm:gap-2 flex-wrap justify-center">
             <template v-for="month in availableMonthsForYear" :key="month">
                 <span v-if="selectedMonth === month"
-                    class="text-xs leading-5 font-semibold bg-indigo-600 text-white rounded-full py-1 px-2 sm:px-3 flex items-center space-x-2 whitespace-nowrap">
+                    class="text-xs leading-5 font-semibold py-1 px-2 sm:px-3 flex items-center space-x-2 whitespace-nowrap" :class="[$styles.tagButtonActive,$styles.tagButtonSmall]">
                     <span class="hidden sm:inline">{{ new Date(selectedYear + '-' + month.toString().padStart(2,'0') + '-01').toLocaleString('default', { month: 'long' }) }}</span>
                     <span class="sm:hidden">{{ new Date(selectedYear + '-' + month.toString().padStart(2,'0') + '-01').toLocaleString('default', { month: 'short' }) }}</span>
                 </span>
                 <button v-else type="button"
-                    class="text-xs leading-5 font-semibold bg-slate-400/10 rounded-full py-1 px-2 sm:px-3 flex items-center space-x-2 hover:bg-slate-400/20 dark:highlight-white/5 whitespace-nowrap"
+                    class="text-xs leading-5 font-semibold py-1 px-2 sm:px-3 flex items-center space-x-2 whitespace-nowrap" :class="[$styles.tagButton,$styles.tagButtonSmall]"
                     @click="updateSelection(selectedYear, month)">
                     {{ new Date(selectedYear + '-' + month.toString().padStart(2,'0') + '-01').toLocaleString('default', { month: 'short' }) }}
                 </button>
@@ -38,7 +38,7 @@ const MonthSelector = {
 
         <!-- Year Dropdown -->
         <select :value="selectedYear" @change="(e) => updateSelection(parseInt(e.target.value), selectedMonth)"
-            class="border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 rounded-md text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 flex-shrink-0">
+            class="rounded-md text-sm font-medium flex-shrink-0 transition-colors" :class="[$styles.bgSelect, $styles.textInput, $styles.borderInput]">
             <option v-for="year in availableYears" :key="year" :value="year">
                 {{ year }}
             </option>
@@ -108,11 +108,11 @@ export const Analytics = {
     template: `
         <div class="flex flex-col w-full">
             <!-- Header -->
-            <div class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-2 sm:px-4 py-3">
+            <div class="px-2 sm:px-4 py-3">
                 <div
                 :class="!$ai.isSidebarOpen ? 'pl-3' : ''"
                 class="max-w-6xl mx-auto flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3">
-                    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex-shrink-0">
+                    <h2 class="text-lg font-semibold flex-shrink-0" :class="[$styles.heading]">
                         <RouterLink to="/analytics">Analytics</RouterLink>
                     </h2>
                     <MonthSelector :dailyData="allDailyData" />
@@ -150,7 +150,7 @@ export const Analytics = {
             </div>
 
             <!-- Content -->
-            <div class="flex-1 bg-gray-50 dark:bg-gray-900" :class="activeTab === 'activity' ? 'p-0' : 'p-4'">
+            <div class="flex-1" :class="[activeTab === 'activity' ? 'p-0' : 'p-4', $styles.bgPage]">
 
                 <div :class="activeTab === 'activity' ? '' : 'max-w-6xl mx-auto'">
                     <!-- Stats Summary (hidden for Activity tab) -->
@@ -180,7 +180,7 @@ export const Analytics = {
                             <h3 class="text-sm sm:text-lg font-semibold text-gray-900 dark:text-gray-100">
                                 {{ new Date(selectedDay).toLocaleDateString(undefined, { year: 'numeric', month: 'long' }) }}
                             </h3>
-                            <select v-model="costChartType" class="px-3 pr-6 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 rounded-md text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-800 flex-shrink-0">
+                            <select v-model="costChartType" class="px-3 pr-6 py-2 border rounded-md text-sm font-medium flex-shrink-0" :class="[$styles.bgSelect, $styles.textInput, $styles.borderInput]">
                                 <option value="bar">Bar Chart</option>
                                 <option value="line">Line Chart</option>
                             </select>
@@ -288,7 +288,7 @@ export const Analytics = {
                         <div class="flex-shrink-0 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 sm:px-6 py-4">
                             <div class="flex flex-wrap gap-2 sm:gap-4 items-end">
                                 <div class="flex flex-col flex-1 min-w-[120px] sm:flex-initial">
-                                    <select v-model="selectedModel" class="px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-full">
+                                    <select v-model="selectedModel" class="px-3 py-2 border rounded-md text-sm font-medium flex-shrink-0" :class="[$styles.bgSelect, $styles.textInput, $styles.borderInput]">
                                         <option value="">All Models</option>
                                         <option v-for="model in filterOptions.models" :key="model" :value="model">
                                             {{ model }}
@@ -297,7 +297,7 @@ export const Analytics = {
                                 </div>
 
                                 <div class="flex flex-col flex-1 min-w-[120px] sm:flex-initial">
-                                    <select v-model="selectedProvider" class="px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-full">
+                                    <select v-model="selectedProvider" class="px-3 py-2 border rounded-md text-sm font-medium flex-shrink-0" :class="[$styles.bgSelect, $styles.textInput, $styles.borderInput]">
                                         <option value="">All Providers</option>
                                         <option v-for="provider in filterOptions.providers" :key="provider" :value="provider">
                                             {{ provider }}
@@ -306,7 +306,7 @@ export const Analytics = {
                                 </div>
 
                                 <div class="flex flex-col flex-1 min-w-[140px] sm:flex-initial">
-                                    <select v-model="sortBy" class="px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-full">
+                                    <select v-model="sortBy" class="px-3 py-2 border rounded-md text-sm font-medium flex-shrink-0" :class="[$styles.bgSelect, $styles.textInput, $styles.borderInput]">
                                         <option value="createdAt">Date (Newest)</option>
                                         <option value="cost">Cost (Highest)</option>
                                         <option value="duration">Duration (Longest)</option>
@@ -393,7 +393,7 @@ export const Analytics = {
                                     <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
                                 </div>
 
-                                <div v-if="!activityHasMore && activityRequests.length > 0" class="px-6 py-8 text-center text-gray-500 dark:text-gray-400 text-sm">
+                                <div v-if="!activityHasMore && activityRequests.length > 0" class="px-6 py-8 text-sm" :class="[$styles.muted]">
                                     No more requests to load
                                 </div>
                             </div>

llms/extensions/app/__init__.py

@@ -1,6 +1,7 @@
 import asyncio
 import io
 import json
+import mimetypes
 import os
 import time
 from datetime import datetime
@@ -614,6 +615,65 @@ async def upload_agent_avatar(request):
 
     ctx.add_post("/agents/avatar", upload_agent_avatar)
 
+    def get_theme_roots(request):
+        themes_dirs = [os.path.join(os.path.dirname(__file__), "themes"), os.path.join(ctx.get_user_path(), "themes")]
+        user = ctx.get_username(request)
+        if user:
+            themes_dirs.append(os.path.join(ctx.get_user_path(user), "themes"))
+        return themes_dirs
+
+    # THEMES
+    async def get_themes(request):
+        themes = {}
+
+        themes_dirs = get_theme_roots(request)
+        for themes_dir in themes_dirs:
+            if os.path.exists(themes_dir):
+                for theme_name in os.listdir(themes_dir):
+                    theme_path = os.path.join(themes_dir, theme_name)
+                    styles_path = os.path.join(theme_path, "theme.json")
+                    if os.path.isdir(theme_path) and os.path.exists(styles_path):
+                        try:
+                            with open(styles_path, encoding="utf-8") as f:
+                                themes[theme_name] = json.load(f)
+                        except Exception as e:
+                            if hasattr(ctx, "err"):
+                                ctx.err(f"Failed to load theme {theme_name}", e)
+        return web.json_response(themes)
+
+    ctx.add_get("/themes", get_themes)
+
+    async def get_theme_file(request):
+        theme_name = request.match_info.get("theme")
+        file_name = request.match_info.get("file_name")
+
+        def get_file_response(path):
+            if not os.path.exists(path):
+                return None
+
+            content_type, _ = mimetypes.guess_type(path)
+            headers = {}
+            if content_type:
+                headers["Content-Type"] = content_type
+            return web.FileResponse(path, headers=headers)
+
+        themes_dirs = get_theme_roots(request)
+        # Search themes in reverse order to return the last overridden theme
+        for themes_dir in reversed(themes_dirs):
+            theme_path = os.path.join(themes_dir, theme_name)
+            if os.path.isdir(theme_path) and os.path.exists(os.path.join(theme_path, "theme.json")):
+                response = get_file_response(os.path.join(theme_path, "ui", file_name))
+                if response:
+                    return response
+
+        response = get_file_response(os.path.join(os.path.dirname(__file__), "themes", theme_name, "ui", file_name))
+        if response:
+            return response
+
+        return web.HTTPNotFound()
+
+    ctx.add_get("/themes/{theme}/ui/{file_name}", get_theme_file)
+
     async def chat_request(openai_request, context):
         nohistory = context.get("nohistory")
         chat = openai_request

llms/extensions/app/themes/blue_smoke/theme.json

@@ -0,0 +1,61 @@
+{
+    "preview": {
+        "chromeBorder": "border-blue-500/60",
+        "bgBody": "bg-gray-950",
+        "bgSidebar": "bg-gray-950",
+        "icon": "text-blue-400",
+        "heading": "text-blue-100"
+    },
+    "vars": {
+        "colorScheme": "dark",
+        "--background-image": "url(/themes/blue_smoke/ui/bg.webp)",
+        "--scrollbar-track-bg": "#0a0a1a",
+        "--scrollbar-thumb-bg": "#1e3a5f"
+    },
+    "styles": {
+        "chromeBorder": "border-blue-500/60",
+        "appInner": "bg-black/50",
+        "bgBody": "bg-black/20",
+        "bgSidebar": "bg-black/50 border-r border-blue-500/30",
+        "bgChat": "bg-transparent",
+        "bgPage": "",
+        "bgInput": "bg-blue-950/80 focus:bg-black/70",
+        "textInput": "text-blue-50 placeholder-blue-300/50",
+        "borderInput": "border-blue-500/60 focus:border-blue-500/60 focus:ring-blue-500/60 shadow-inner",
+        "labelInput": "text-blue-300",
+        "helpInput": "text-blue-400/80",
+        "draggingInput": "border-blue-400 bg-blue-900/40 ring-1 ring-blue-400 shadow-[0_0_20px_rgba(59,130,246,0.2)]",
+        "dropdownButton": "border border-blue-500/50 bg-black/50 hover:bg-blue-900/60 text-blue-100 focus:outline-none transition-colors",
+        "bgPopover": "bg-black/90 backdrop-blur-lg border border-blue-500/40 shadow-xl shadow-black/50",
+        "popoverButton": "hover:bg-blue-800/60 text-blue-100 transition-colors",
+        "popoverButtonActive": "bg-blue-800/80 text-white",
+        "codeTag": "text-blue-200 bg-blue-900/60 border border-blue-600/60",
+        "codeTagStrong": "border border-blue-500/60 text-blue-100 bg-blue-800/60 shadow-[0_0_10px_rgba(59,130,246,0.1)]",
+        "tagButton": "cursor-pointer border border-transparent text-blue-300 hover:text-blue-100 hover:bg-blue-800/40 transition-colors",
+        "tagButtonActive": "cursor-default border border-blue-500/70 text-blue-50 bg-blue-800/50 shadow-[0_0_10px_rgba(59,130,246,0.2)]",
+        "tagButtonStrongActive": "bg-green-600/40 text-green-50 border-green-400/80 shadow-[0_0_15px_rgba(59,130,246,0.3)]",
+        "tagLabel": "text-blue-300 border border-blue-600/60",
+        "tagLabelHover": "hover:bg-blue-800/60 hover:text-blue-100 hover:border-blue-500/80 transition-colors",
+        "panel": "border-blue-500/30 bg-black/40 backdrop-blur-md",
+        "card": "rounded-xl bg-black/30 border border-blue-500/40 backdrop-blur-sm hover:border-blue-400/60 transition-all",
+        "cardTitle": "border-b border-blue-500/40 bg-black/30 text-blue-50 rounded-t-xl",
+        "cardActive": "rounded-xl shadow-lg shadow-blue-500/10 bg-black/40 border border-blue-400/60",
+        "cardActiveTitleBar": "border-b border-blue-400/60 bg-blue-900/40 text-white rounded-t-xl",
+        "textBlock": "backdrop-blur-lg",
+        "primaryButton": "border border-transparent shadow shadow-blue-900/50 text-white bg-blue-600 hover:bg-blue-500 hover:shadow-blue-500/25 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-950 focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg transition-all",
+        "secondaryButton": "text-blue-200 bg-blue-900/40 border border-blue-600/60 hover:bg-blue-800 hover:border-blue-500/80 hover:text-white rounded-lg transition-all",
+        "textLink": "text-blue-300 underline decoration-blue-500/30 hover:text-blue-100 hover:decoration-blue-400 transition-colors",
+        "icon": "text-blue-400/80",
+        "iconHover": "hover:text-blue-100 hover:bg-blue-800/50 transition-colors rounded-lg",
+        "iconActive": "text-blue-200 bg-blue-800/60 shadow-[0_0_10px_rgba(59,130,246,0.15)] rounded-lg",
+        "chatButton": "border border-blue-500/50 text-blue-100 bg-blue-900/60 hover:bg-blue-800/70 hover:border-blue-400/60 disabled:text-blue-400 disabled:cursor-not-allowed disabled:border-blue-700/30 disabled:bg-black/30 transition-all shadow-sm rounded-lg",
+        "voiceButtonDefault": "text-blue-400 hover:text-white hover:bg-blue-800/70 hover:border-blue-400/60 transition-all",
+        "voiceButtonRecording": "border bg-red-900/30 border-red-600 text-red-400 animate-pulse",
+        "voiceButtonProcessing": "bg-blue-800/80 text-blue-200 border border-blue-500/60 animate-spin",
+        "threadItemActiveBorder": "border-blue-500",
+        "threadItemActive": "bg-blue-900/30 border-blue-500/50 shadow-inner",
+        "threadItem": "border-transparent text-blue-200 hover:bg-blue-900/20 hover:text-blue-50 transition-colors",
+        "messageUser": "bg-blue-800/40 text-blue-50 border border-blue-400/40 shadow-md shadow-black/30 backdrop-blur-sm",
+        "messageAssistant": "bg-black/30 text-blue-50 border border-blue-400/20 shadow-md shadow-black/20 backdrop-blur-sm"
+    }
+}

llms/extensions/app/themes/blue_smoke/ui/bg.webp

@@ -0,0 +1,5 @@
+{
+    "vars": {
+        "colorScheme": "dark"
+    }
+}

llms/extensions/app/themes/dark/theme.json

@@ -0,0 +1,5 @@
+{
+    "vars": {
+        "colorScheme": "light"
+    }
+}

llms/extensions/app/themes/light/theme.json

@@ -0,0 +1,52 @@
+{
+    "vars": {
+        "colorScheme": "light",
+        "--background-image": "url(/themes/light_sky/ui/bg.webp)",
+        "--background": "#ffffff",
+        "--border": "#e2e8f0",
+        "--input": "#e2e8f0",
+        "--scrollbar-thumb-bg": "#bae6fd66",
+        "--scrollbar-track-bg": "#e0f2fe44",
+        "--primary-bg": "#ffffff",
+        "--secondary-bg": "#f0f9ff",
+        "--secondary-border": "#bae6fd",
+        "--tw-prose-counters": "#7dd3fc",
+        "--tw-prose-bullets": "#7dd3fc"
+    },
+    "styles": {
+        "chromeBorder": "border-sky-300/80",
+        "app": "bg-[image:var(--background-image)] bg-cover",
+        "appInner": "bg-white/90 backdrop-blur-lg shadow-inner",
+        "highlighted": "text-sky-600",
+        "linkHover": "hover:text-sky-700 group-hover:text-sky-700",
+        "bgBody": "bg-white",
+        "bgSidebar": "bg-sky-50/40",
+        "bgChat": "bg-white/40",
+        "bgPage": "bg-white/40",
+        "heading": "text-sky-900",
+        "muted": "text-sky-900/60",
+        "icon": "text-sky-800/70",
+        "iconHover": "hover:text-sky-900 transition-colors",
+        "iconActive": "bg-blue-300/30 text-sky-900",
+        "chatButton": "border border-sky-300 text-sky-700 bg-white hover:bg-sky-50 disabled:text-sky-400 disabled:cursor-not-allowed disabled:border-sky-200 transition-all shadow-sm hover:shadow",
+        "voiceButtonDefault": "bg-white text-sky-500 hover:text-sky-600 shadow-sm",
+        "borderInput": "border-sky-300 focus:border-sky-500 focus:ring-sky-500 bg-white focus:bg-white transition-colors",
+        "secondaryButton": "text-sky-700 bg-white border border-sky-300 hover:bg-sky-50 transition-colors shadow-sm rounded-md",
+        "dropdownButton": "border border-sky-300/80 bg-white hover:bg-sky-50 text-sky-900 focus:outline-none",
+        "bgPopover": "bg-white/95 backdrop-blur-xl border border-sky-200 shadow-lg",
+        "textBlock": "backdrop-blur-sm",
+        "threadItemActiveBorder": "border-sky-400",
+        "threadItemActive": "bg-sky-100/80 border-sky-400 shadow-sm",
+        "threadItem": "border-transparent hover:bg-sky-50 transition-colors",
+        "tagButtonGroup": "rounded-xl bg-sky-700/10",
+        "tagButton": "cursor-pointer border border-transparent bg-white/90 backdrop-blur text-slate-600 border-sky-200 hover:border-sky-300 hover:bg-white transition-all",
+        "tagButtonActive": "cursor-default border border-sky-400 text-sky-800 bg-sky-100",
+        "tagButtonStrongActive": "bg-sky-500 text-white border-sky-600 shadow-md",
+        "tagLabel": "text-sky-900 border border-sky-300 bg-sky-50/50",
+        "tagLabelHover": "hover:border-sky-400 hover:bg-sky-100 transition-colors",
+        "panel": "border-sky-300/50 bg-white/90 backdrop-blur-md shadow-sm",
+        "card": "rounded-lg bg-white/95 backdrop-blur-sm border border-sky-300/80 shadow-sm hover:shadow transition-shadow",
+        "messageUser": "bg-white/95 backdrop-blur-sm text-slate-800 border border-sky-300 shadow-sm",
+        "messageAssistant": "bg-sky-50/90 text-sky-950 border border-sky-300 shadow-sm"
+    }
+}