llms-py 2.0.9__py3-none-any.whl → 3.0.10__py3-none-any.whl

{llms_py-2.0.9.data/data → llms/extensions/app}/ui/Recents.mjs

@@ -1,44 +1,43 @@
 import { ref, onMounted, watch, inject } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { useThreadStore } from './threadStore.mjs'
-import { renderMarkdown } from './markdown.mjs'
 
 const RecentResults = {
-    template:`
+    template: `
         <div class="flex-1 overflow-y-auto" @scroll="onScroll">
             <div class="mx-auto max-w-6xl px-4 py-4">
-                <div class="text-sm text-gray-600 mb-3" v-if="threads.length">
-                    <span v-if="q">{{ filtered.length }} result{{ filtered.length===1?'':'s' }}</span>
-                    <span v-else>Searching {{ threads.length }} conversation{{ threads.length===1?'':'s' }}</span>
+                <div class="text-sm text-gray-600 dark:text-gray-400 mb-3">
+                    <span v-if="q">{{ total }} result{{ total===1?'':'s' }}</span>
+                    <span v-else>All conversations</span>
                 </div>
 
-                <div v-if="!threads.length" class="text-gray-500">No conversations yet.</div>
+                <div v-if="!loading && threads.length === 0" class="text-gray-500 dark:text-gray-400">No conversations found.</div>
 
                 <table class="w-full">
                     <tbody>
-                        <tr v-for="t in displayed" :key="t.id" class="hover:bg-gray-50">
-                            <td class="py-3 px-1 border-b border-gray-200 max-w-3xl">
+                        <tr v-for="t in threads" :key="t.id" class="hover:bg-gray-50 dark:hover:bg-gray-800">
+                            <td class="py-3 px-1 border-b border-gray-200 dark:border-gray-700 max-w-2xl">
                                 <button type="button" @click="open(t.id)" class="w-full text-left">
                                     <div class="flex items-start justify-between gap-3">
                                         <div class="min-w-0 flex-1">
-                                            <div class="font-medium text-gray-900 truncate" :title="t.title">{{ t.title || 'Untitled chat' }}</div>
-                                            <div class="mt-1 text-sm text-gray-600 line-clamp-2">
+                                            <div class="font-medium text-gray-900 dark:text-gray-100 truncate" :title="t.title">{{ t.title || 'Untitled chat' }}</div>
+                                            <div class="mt-1 text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                                                 <div v-html="snippet(t)"></div>
                                             </div>
                                         </div>
                                     </div>
                                 </button>
                             </td>
-                            <td class="py-3 px-1 border-b border-gray-200">
+                            <td class="py-3 px-1 border-b border-gray-200 dark:border-gray-700">
                                 <div class="text-right whitespace-nowrap">
-                                    <div class="text-xs text-gray-500">{{ formatDate(t.updatedAt || t.createdAt) }}</div>
-                                    <div class="text-[11px] text-gray-500/80">{{ (t.messages?.length || 0) }} messages</div>
-                                    <div v-if="t.model" class="text-[11px] text-blue-600">{{ t.model }}</div>
+                                    <div class="text-xs text-gray-500 dark:text-gray-400">{{ formatDate(t.updatedAt || t.createdAt) }}</div>
+                                    <div class="text-[11px] text-gray-500/80 dark:text-gray-400/80">{{ (t.messages?.length || 0) }} messages</div>
+                                    <div v-if="t.model" class="text-[11px] text-blue-600 dark:text-blue-400 max-w-[140px] truncate" :title="t.model">{{ t.model }}</div>
                                 </div>
                             </td>
                         </tr>
                     </tbody>
                 </table>
+                <div v-if="loading" class="py-4 text-center text-gray-500 dark:text-gray-400">Loading...</div>
             </div>
         </div>
     `,
@@ -46,99 +45,126 @@ const RecentResults = {
         q: String
     },
     setup(props) {
+        const ctx = inject('ctx')
+        const ai = ctx.ai
         const router = useRouter()
-        const config = inject('config')
-        const { threads, loadThreads } = useThreadStore()
-        let defaultVisibleCount = 25
-        const visibleCount = ref(defaultVisibleCount)
-        const filtered = ref([])
-        const displayed = ref([])
-
-        const start = Date.now()
-        console.log('start', start, threads.value.length)
-
-        onMounted(async () => {
-            visibleCount.value = defaultVisibleCount
-            if (!threads.value.length) {
-                await loadThreads()
+
+        const threads = ref([])
+        const loading = ref(false)
+        const noMore = ref(false)
+        const total = ref(0)
+        let skip = 0
+        const take = 25
+
+        // Simple debounce function
+        function debounce(fn, delay) {
+            let timeoutID = null
+            return function () {
+                clearTimeout(timeoutID)
+                timeoutID = setTimeout(() => fn.apply(this, arguments), delay)
             }
-            update()
-            console.log('end', Date.now() - start)
-        })
+        }
 
         const normalized = (s) => (s || '').toString().toLowerCase()
-
         const replaceChars = new Set('<>`*|#'.split(''))
-        const clean = s => [...s].map(c => replaceChars.has(c) ? ' ' : c).join('')
+        const clean = s => [...(s || '')].map(c => replaceChars.has(c) ? ' ' : c).join('')
 
-        function update() {
-            console.log('update', props.q)
-            const query = normalized(props.q)
-            filtered.value = !query
-                ? threads.value
-                : threads.value.filter(t => {
-                    const inTitle = normalized(t.title).includes(query)
-                    const inMsgs = Array.isArray(t.messages) && t.messages.some(m => normalized(m?.content).includes(query))
-                    return inTitle || inMsgs
-                })
-            updateVisible()
-        }
-        function updateVisible() {
-            displayed.value = filtered.value.slice(0, Math.min(visibleCount.value, filtered.value.length))
+        const loadMore = async (reset = false) => {
+            if (reset) {
+                skip = 0
+                threads.value = []
+                noMore.value = false
+            }
+
+            if (loading.value || noMore.value) return
+
+            loading.value = true
+            try {
+                const query = {
+                    take,
+                    skip,
+                    ...(props.q ? { q: props.q } : {})
+                }
+
+                const results = await ctx.threads.query(query)
+
+                if (results.length < take) {
+                    noMore.value = true
+                }
+
+                if (reset) {
+                    threads.value = results
+                } else {
+                    threads.value.push(...results)
+                }
+
+                skip += results.length
+
+                total.value = threads.value.length
+            } catch (e) {
+                console.error("Failed to load threads", e)
+            } finally {
+                loading.value = false
+            }
         }
 
+        const update = debounce(() => loadMore(true), 250)
+
+        onMounted(() => {
+            loadMore(true)
+        })
+
         const onScroll = (e) => {
             const el = e.target
-            if (el.scrollTop + el.clientHeight >= el.scrollHeight - 24) {
-                if (visibleCount.value < filtered.value.length) {
-                    visibleCount.value = Math.min(visibleCount.value + defaultVisibleCount, filtered.value.length)
-                    updateVisible()
-                }
+            if (el.scrollTop + el.clientHeight >= el.scrollHeight - 50) { // 50px threshold
+                loadMore()
             }
         }
 
         watch(() => props.q, () => {
-            visibleCount.value = defaultVisibleCount
             update()
         })
 
         const snippet = (t) => {
             const highlight = (s) => clean(s).replace(new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi'), `<mark>$1</mark>`)
             const query = normalized(props.q)
-            if (!query) return (t.messages && t.messages.length) ? highlight(t.messages[t.messages.length-1].content) : ''
+            if (!query) return (t.messages && t.messages.length) ? highlight(t.messages[t.messages.length - 1].content) : ''
+
+            // Check title
             if (normalized(t.title).includes(query)) return highlight(t.title)
-            if (Array.isArray(t.messages)){
-                for (const m of t.messages){
+
+            // Check messages
+            if (Array.isArray(t.messages)) {
+                for (const m of t.messages) {
                     const c = normalized(m?.content)
-                    if (c.includes(query)){
+                    if (c.includes(query)) {
                         // return small excerpt around first match
                         const idx = c.indexOf(query)
                         const orig = (m?.content || '')
                         const start = Math.max(0, idx - 40)
                         const end = Math.min(orig.length, idx + query.length + 60)
-                        const prefix = start>0 ? '…' : ''
-                        const suffix = end<orig.length ? '…' : ''
-                        const snippet = prefix + orig.slice(start, end) + suffix
-                        // return snippet
-                        return highlight(snippet)
+                        const prefix = start > 0 ? '…' : ''
+                        const suffix = end < orig.length ? '…' : ''
+                        const snippetText = prefix + orig.slice(start, end) + suffix
+                        return highlight(snippetText)
                     }
                 }
             }
-            return ''
+
+            // Fallback to last message if no specific match found (e.g. matched on hidden metadata or partial?)
+            return (t.messages && t.messages.length) ? highlight(t.messages[t.messages.length - 1].content) : ''
         }
 
-        const open = (id) => router.push(`/c/${id}`)
+        const open = (id) => router.push(`${ai.base}/c/${id}`)
         const formatDate = (iso) => new Date(iso).toLocaleString()
 
         return {
-            config,
             threads,
-            filtered,
-            displayed,
+            loading,
+            total,
             snippet,
             open,
             formatDate,
-            renderMarkdown,
             onScroll,
         }
     }
@@ -151,16 +177,17 @@ export default {
     template: `
         <div class="flex flex-col h-full w-full">
             <!-- Header -->
-            <div class="border-b border-gray-200 bg-white px-4 py-3 min-h-16">
+            <div class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-3 min-h-16">
                 <div class="max-w-6xl mx-auto flex items-center justify-between gap-3">
-                    <h2 class="text-lg font-semibold text-gray-900">Search Chats</h2>
-                    <div class="flex-1 flex items-center gap-2">
+                    <label for="search-history" class="cursor-pointer text-lg font-semibold text-gray-900 dark:text-gray-100">Search History</label>
+                    <div class="flex-1 flex items-center gap-2 max-w-sm">
                         <input
+                            id="search-history"
                             v-model="q"
                             type="search"
                             placeholder="Search titles and messages..."
                             spellcheck="false"
-                            class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                            class="w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 px-3 py-2 text-sm placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-400"
                         />
                     </div>
                 </div>

llms_py-2.0.9.data/data/ui/Sidebar.mjs → llms/extensions/app/ui/index.mjs

@@ -1,24 +1,32 @@
-import { onMounted } from 'vue'
+import { onMounted, inject } from 'vue'
 import { useRouter } from 'vue-router'
-import { useThreadStore } from './threadStore.mjs'
+import { appendQueryString } from '@servicestack/client'
+import ThreadStore from './threadStore.mjs'
+import Recents from './Recents.mjs'
+
+let ext
 
 // Thread Item Component
 const ThreadItem = {
     template: `
         <div
             class="group relative mx-2 mb-1 rounded-md cursor-pointer transition-colors  border border-transparent"
-            :class="isActive ? 'bg-blue-100 border-blue-200' : 'hover:bg-gray-100'"
+            :class="isActive ? 'bg-blue-100 dark:bg-blue-900 border-blue-200 dark:border-blue-700' : 'hover:bg-gray-100 dark:hover:bg-gray-800'"
             @click="$emit('select', thread.id)"
         >
             <div class="flex items-center px-3 py-2">
                 <div class="flex-1 min-w-0">
-                    <div class="text-sm font-medium text-gray-900 truncate" :title="thread.title">
+                    <div class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate" :title="thread.title">
                         {{ thread.title }}
                     </div>
-                    <div class="text-xs text-gray-500 truncate">
-                        {{ formatRelativeTime(thread.updatedAt) }} • {{ thread.messages.length }} messages
+                    <div class="text-xs text-gray-500 dark:text-gray-400 truncate">
+                        <span>{{ $fmt.relativeTime(thread.updatedAt) }} • {{ thread.messages.length }} msgs</span>
+                        <span v-if="thread.stats?.inputTokens" :title="$fmt.statsTitle(thread.stats)">
+                            &#8226; {{ $fmt.humanifyNumber(thread.stats.inputTokens + thread.stats.outputTokens) }} toks
+                            {{ thread.stats.cost ? ' ' + $fmt.cost(thread.stats.cost) : '' }}
+                        </span>
                     </div>
-                    <div v-if="thread.model" class="text-xs text-blue-600 truncate">
+                    <div v-if="thread.model" class="text-xs text-blue-600 dark:text-blue-400 truncate">
                         {{ thread.model }}
                     </div>
                 </div>
@@ -26,7 +34,7 @@ const ThreadItem = {
                 <!-- Delete button (shown on hover) -->
                 <button type="button"
                     @click.stop="$emit('delete', thread.id)"
-                    class="opacity-0 group-hover:opacity-100 ml-2 p-1 rounded text-gray-400 hover:text-red-600 hover:bg-red-50 transition-all"
+                    class="opacity-0 group-hover:opacity-100 ml-2 p-1 rounded text-gray-400 dark:text-gray-500 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 transition-all"
                     title="Delete conversation"
                 >
                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -51,38 +59,34 @@ const ThreadItem = {
     emits: ['select', 'delete'],
 
     setup() {
-        const formatRelativeTime = (timestamp) => {
-            const now = new Date()
-            const date = new Date(timestamp)
-            const diffInSeconds = Math.floor((now - date) / 1000)
-
-            if (diffInSeconds < 60) return 'Just now'
-            if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`
-            if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`
-            if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)}d ago`
-
-            return date.toLocaleDateString()
-        }
-
         return {
-            formatRelativeTime
         }
     }
 }
 
 const GroupedThreads = {
-    components: {
-        ThreadItem,
-    },
     template: `
     <!-- Today -->
     <div v-if="groupedThreads.today.length > 0" class="mb-4">
-        <h3 class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider select-none">Today</h3>
+        <h3 class="px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider select-none">Today</h3>
         <ThreadItem
             v-for="thread in groupedThreads.today"
             :key="thread.id"
             :thread="thread"
-            :is-active="currentThread?.id === thread.id"
+            :is-active="currentThread?.id == thread.id"
+            @select="$emit('select', $event)"
+            @delete="$emit('delete', $event)"
+        />
+    </div>
+
+    <!-- Yesterday -->
+    <div v-if="groupedThreads.yesterday.length > 0" class="mb-4">
+        <h3 class="px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider select-none">Yesterday</h3>
+        <ThreadItem
+            v-for="thread in groupedThreads.yesterday"
+            :key="thread.id"
+            :thread="thread"
+            :is-active="currentThread?.id == thread.id"
             @select="$emit('select', $event)"
             @delete="$emit('delete', $event)"
         />
@@ -90,12 +94,12 @@ const GroupedThreads = {
 
     <!-- Last 7 Days -->
     <div v-if="groupedThreads.lastWeek.length > 0" class="mb-4">
-        <h3 class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider select-none">Last 7 Days</h3>
+        <h3 class="px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider select-none">Last 7 Days</h3>
         <ThreadItem
             v-for="thread in groupedThreads.lastWeek"
             :key="thread.id"
             :thread="thread"
-            :is-active="currentThread?.id === thread.id"
+            :is-active="currentThread?.id == thread.id"
             @select="$emit('select', $event)"
             @delete="$emit('delete', $event)"
         />
@@ -103,12 +107,12 @@ const GroupedThreads = {
 
     <!-- Last 30 Days -->
     <div v-if="groupedThreads.lastMonth.length > 0" class="mb-4">
-        <h3 class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider select-none">Last 30 Days</h3>
+        <h3 class="px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider select-none">Last 30 Days</h3>
         <ThreadItem
             v-for="thread in groupedThreads.lastMonth"
             :key="thread.id"
             :thread="thread"
-            :is-active="currentThread?.id === thread.id"
+            :is-active="currentThread?.id == thread.id"
             @select="$emit('select', $event)"
             @delete="$emit('delete', $event)"
         />
@@ -116,19 +120,19 @@ const GroupedThreads = {
 
     <!-- Older (grouped by month/year) -->
     <div v-for="(monthThreads, monthKey) in groupedThreads.older" :key="monthKey" class="mb-4">
-        <h3 class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider select-none">{{ monthKey }}</h3>
+        <h3 class="px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider select-none">{{ monthKey }}</h3>
         <ThreadItem
             v-for="thread in monthThreads"
             :key="thread.id"
             :thread="thread"
-            :is-active="currentThread?.id === thread.id"
+            :is-active="currentThread?.id == thread.id"
             @select="$emit('select', $event)"
             @delete="$emit('delete', $event)"
         />
     </div>
     <div class="mb-4 flex w-full justify-center">
-        <button @click="$router.push('/recents')" type="button"
-            class="flex text-sm space-x-1 font-semibold text-gray-900 hover:text-blue-600 focus:outline-none transition-colors">
+        <button @click="$router.push($ai.base + '/recents')" type="button"
+            class="flex text-sm space-x-1 font-semibold text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors">
             <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M8 2.19c3.13 0 5.68 2.25 5.68 5s-2.55 5-5.68 5a5.7 5.7 0 0 1-1.89-.29l-.75-.26l-.56.56a14 14 0 0 1-2 1.55a.13.13 0 0 1-.07 0v-.06a6.58 6.58 0 0 0 .15-4.29a5.25 5.25 0 0 1-.55-2.16c0-2.77 2.55-5 5.68-5M8 .94c-3.83 0-6.93 2.81-6.93 6.27a6.4 6.4 0 0 0 .64 2.64a5.53 5.53 0 0 1-.18 3.48a1.32 1.32 0 0 0 2 1.5a15 15 0 0 0 2.16-1.71a6.8 6.8 0 0 0 2.31.36c3.83 0 6.93-2.81 6.93-6.27S11.83.94 8 .94"></path><ellipse cx="5.2" cy="7.7" fill="currentColor" rx=".8" ry=".75"></ellipse><ellipse cx="8" cy="7.7" fill="currentColor" rx=".8" ry=".75"></ellipse><ellipse cx="10.8" cy="7.7" fill="currentColor" rx=".8" ry=".75"></ellipse></svg>
             <span>All Chats</span>
         </button>
@@ -144,58 +148,47 @@ const GroupedThreads = {
     emits: ['select', 'delete'],
 }
 
-const Sidebar = {
-    components: {
-        GroupedThreads,
-        ThreadItem,
-    },
+const ThreadsSidebar = {
     template: `
-        <div class="flex flex-col h-full bg-gray-50 border-r border-gray-200">
-            <!-- Header -->
-            <div class="flex-shrink-0 px-4 py-4 border-b border-gray-200 bg-white min-h-16 select-none">
-                <div class="flex items-center justify-between">
-                    <button type="button"
-                        @click="goToInitialState"
-                        class="text-lg font-semibold text-gray-900 hover:text-blue-600 focus:outline-none transition-colors"
-                        title="Go back to initial state"
-                    >
-                        History
-                    </button>
-                    <button type="button"
-                        @click="createNewThread"
-                        class="text-gray-900 hover:text-blue-600 focus:outline-none transition-colors"
-                        title="New Chat"
-                    >
-                        <svg class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></g></svg>
-                    </button>
-                </div>
-            </div>
-
+        <div class="flex flex-col h-full">
+            <Brand />
             <!-- Thread List -->
             <div class="flex-1 overflow-y-auto">
-                <div v-if="isLoading" class="p-4 text-center text-gray-500">
-                    <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mx-auto"></div>
+                <div v-if="isLoading" class="p-4 text-center text-gray-500 dark:text-gray-400">
+                    <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 dark:border-blue-400 mx-auto"></div>
                     <p class="mt-2 text-sm">Loading threads...</p>
                 </div>
 
-                <div v-else-if="threads.length === 0" class="p-4 text-center text-gray-500">
+                <div v-else-if="threads.length === 0" class="p-4 text-center text-gray-500 dark:text-gray-400">
                     <div class="mb-2 flex justify-center">
                         <svg class="size-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M8 2.19c3.13 0 5.68 2.25 5.68 5s-2.55 5-5.68 5a5.7 5.7 0 0 1-1.89-.29l-.75-.26l-.56.56a14 14 0 0 1-2 1.55a.13.13 0 0 1-.07 0v-.06a6.58 6.58 0 0 0 .15-4.29a5.25 5.25 0 0 1-.55-2.16c0-2.77 2.55-5 5.68-5M8 .94c-3.83 0-6.93 2.81-6.93 6.27a6.4 6.4 0 0 0 .64 2.64a5.53 5.53 0 0 1-.18 3.48a1.32 1.32 0 0 0 2 1.5a15 15 0 0 0 2.16-1.71a6.8 6.8 0 0 0 2.31.36c3.83 0 6.93-2.81 6.93-6.27S11.83.94 8 .94"/><ellipse cx="5.2" cy="7.7" fill="currentColor" rx=".8" ry=".75"/><ellipse cx="8" cy="7.7" fill="currentColor" rx=".8" ry=".75"/><ellipse cx="10.8" cy="7.7" fill="currentColor" rx=".8" ry=".75"/></svg>
                     </div>
                     <p class="text-sm">No conversations yet</p>
-                    <p class="text-xs text-gray-400 mt-1">Start a new chat to begin</p>
+                    <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Start a new chat to begin</p>
                 </div>
 
-                <div v-else class="py-2">
-                    <GroupedThreads :currentThread="currentThread" :groupedThreads="threadStore.getGroupedThreads(19)" 
-                        @select="selectThread" @delete="deleteThread" />        
+                <div v-else class="relative py-2">
+
+                    <div class="flex items-center space-x-2 absolute top-2 right-2">
+                        <button type="button"
+                            @click="createNewThread"
+                            class="text-gray-900 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors"
+                            title="New Chat"
+                        >
+                            <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></g></svg>
+                        </button>
+                    </div>
+
+                    <GroupedThreads :currentThread="currentThread" :groupedThreads="$threads.getGroupedThreads(50)"
+                        @select="selectThread" @delete="deleteThread" />
                 </div>
             </div>
         </div>
     `,
-    setup() {
+    setup(props) {
+        const ctx = inject('ctx')
+        const ai = ctx.ai
         const router = useRouter()
-        const threadStore = useThreadStore()
         const {
             threads,
             currentThread,
@@ -205,14 +198,14 @@ const Sidebar = {
             createThread,
             deleteThread: deleteThreadFromStore,
             clearCurrentThread
-        } = threadStore
+        } = ctx.threads
 
         onMounted(async () => {
             await loadThreads()
         })
 
         const selectThread = async (threadId) => {
-            router.push(`/c/${threadId}`)
+            router.push(`${ai.base}/c/${threadId}`)
         }
 
         const deleteThread = async (threadId) => {
@@ -220,23 +213,25 @@ const Sidebar = {
                 const wasCurrent = currentThread?.value?.id === threadId
                 await deleteThreadFromStore(threadId)
                 if (wasCurrent) {
-                    router.push('/')
+                    router.push(`${ai.base}/`)
                 }
             }
         }
 
         const createNewThread = async () => {
-            const newThread = await createThread()
-            router.push(`/c/${newThread.id}`)
+            ctx.threads.startNewThread({ title: 'New Chat', model: ctx.chat.getSelectedModel(), redirect: true })
         }
 
         const goToInitialState = () => {
             clearCurrentThread()
-            router.push('/')
+            ctx.to(`/`)
+        }
+
+        const goToAnalytics = () => {
+            ctx.to(`/analytics`)
         }
 
         return {
-            threadStore,
             threads,
             currentThread,
             isLoading,
@@ -244,9 +239,85 @@ const Sidebar = {
             selectThread,
             deleteThread,
             createNewThread,
-            goToInitialState
+            goToInitialState,
+            goToAnalytics,
+        }
+    }
+}
+
+function useRequests(ext) {
+    async function query(query) {
+        return (await ext.getJson(appendQueryString(`/requests`, query))).response || []
+    }
+    async function deleteById(requestId) {
+        if (!requestId) {
+            throw new Error('Request ID is required')
         }
+        return await ext.deleteJson(`/requests/${requestId}`)
+    }
+
+    async function getThreadIds(query) {
+        return (await ext.getJson(appendQueryString(`/requests?fields=threadId&not_null=threadId&as=column&take=10000`, query))).response || []
+    }
+
+    async function getSummary() {
+        return (await ext.getJson(`/requests/summary`)).response
+    }
+    async function getDailySummary(day) {
+        return (await ext.getJson(`/requests/summary/${day}`)).response
+    }
+
+    // Get unique values for filter options
+    async function getFilterOptions() {
+        const results = await query({
+            select: 'distinct',
+            fields: 'model,provider',
+            not_null: 'model,provider',
+        })
+
+        if (results) {
+            const models = [...new Set(results.map(r => r.model).filter(m => m))].sort()
+            const providers = [...new Set(results.map(r => r.provider).filter(p => p))].sort()
+            console.log('getFilterOptions', models, providers)
+            return {
+                models,
+                providers
+            }
+        }
+    }
+
+    return {
+        query,
+        deleteById,
+        getThreadIds,
+        getSummary,
+        getDailySummary,
+        getFilterOptions,
     }
 }
 
-export default Sidebar
+export default {
+    order: -100,
+
+    install(ctx) {
+        ext = ctx.scope('app')
+        ctx.components({
+            ThreadsSidebar,
+            ThreadItem,
+            GroupedThreads,
+            Recents,
+        })
+        ctx.routes.push(...[
+            { path: '/recents', component: Recents },
+        ])
+        ThreadStore.install(ctx)
+
+        ctx.setGlobals({
+            requests: useRequests(ext)
+        })
+
+        ctx.setLayout({
+            left: 'ThreadsSidebar',
+        })
+    }
+}