llms-py 3.0.0b7__py3-none-any.whl → 3.0.0b8__py3-none-any.whl

llms/{ui/modules/threads → extensions/app/ui}/Recents.mjs

@@ -1,22 +1,21 @@
 import { ref, onMounted, watch, inject } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { useThreadStore } from './threadStore.mjs'
 
 const RecentResults = {
     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 dark:text-gray-400 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 dark:text-gray-400">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 dark:hover:bg-gray-800">
-                            <td class="py-3 px-1 border-b border-gray-200 dark:border-gray-700 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">
@@ -32,12 +31,13 @@ const RecentResults = {
                                 <div class="text-right whitespace-nowrap">
                                     <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">{{ t.model }}</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>
     `,
@@ -47,59 +47,81 @@ const RecentResults = {
     setup(props) {
         const ctx = inject('ctx')
         const ai = ctx.ai
-        const config = ctx.state.config
         const router = useRouter()
-        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('')
 
-        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()
         })
 
@@ -107,7 +129,11 @@ const RecentResults = {
             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) : ''
+
+            // Check title
             if (normalized(t.title).includes(query)) return highlight(t.title)
+
+            // Check messages
             if (Array.isArray(t.messages)) {
                 for (const m of t.messages) {
                     const c = normalized(m?.content)
@@ -119,23 +145,23 @@ const RecentResults = {
                         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 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(`${ai.base}/c/${id}`)
         const formatDate = (iso) => new Date(iso).toLocaleString()
 
         return {
-            config,
             threads,
-            filtered,
-            displayed,
+            loading,
+            total,
             snippet,
             open,
             formatDate,
@@ -153,9 +179,10 @@ export default {
             <!-- Header -->
             <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 dark:text-gray-100">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..."

llms/{ui/modules/threads → extensions/app/ui}/index.mjs

@@ -1,8 +1,11 @@
 import { onMounted, inject } from 'vue'
 import { useRouter } from 'vue-router'
+import { appendQueryString } from '@servicestack/client'
 import ThreadStore from './threadStore.mjs'
 import Recents from './Recents.mjs'
 
+let ext
+
 // Thread Item Component
 const ThreadItem = {
     template: `
@@ -70,7 +73,20 @@ const GroupedThreads = {
             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)"
         />
@@ -83,7 +99,7 @@ const GroupedThreads = {
             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)"
         />
@@ -96,7 +112,7 @@ const GroupedThreads = {
             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)"
         />
@@ -109,7 +125,7 @@ const GroupedThreads = {
             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)"
         />
@@ -229,8 +245,62 @@ const ThreadsSidebar = {
     }
 }
 
+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 {
+    order: -100,
+
     install(ctx) {
+        ext = ctx.scope('app')
         ctx.components({
             ThreadsSidebar,
             ThreadItem,
@@ -242,13 +312,12 @@ export default {
         ])
         ThreadStore.install(ctx)
 
+        ctx.setGlobals({
+            requests: useRequests(ext)
+        })
+
         ctx.setLayout({
             left: 'ThreadsSidebar',
         })
-    },
-
-    async load(ctx) {
-        const { initDB } = ctx.threads
-        await initDB()
     }
 }