llms-py 2.0.34__py3-none-any.whl → 3.0.0__py3-none-any.whl

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

@@ -1,23 +1,21 @@
 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 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">
@@ -33,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>
     `,
@@ -46,100 +45,126 @@ const RecentResults = {
         q: String
     },
     setup(props) {
-        const ai = inject('ai')
+        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('')
 
-        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(`${ai.base}/c/${id}`)
         const formatDate = (iso) => new Date(iso).toLocaleString()
 
         return {
-            config,
             threads,
-            filtered,
-            displayed,
+            loading,
+            total,
             snippet,
             open,
             formatDate,
-            renderMarkdown,
             onScroll,
         }
     }
@@ -154,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/Sidebar.mjs → extensions/app/ui/index.mjs}

@@ -1,11 +1,10 @@
 import { onMounted, inject } from 'vue'
 import { useRouter } from 'vue-router'
-import { useFormatters } from '@servicestack/vue'
-import { useThreadStore } from './threadStore.mjs'
-import Brand from './Brand.mjs'
-import { statsTitle, formatCost } from './utils.mjs'
+import { appendQueryString } from '@servicestack/client'
+import ThreadStore from './threadStore.mjs'
+import Recents from './Recents.mjs'
 
-const { humanifyNumber, humanifyMs } = useFormatters()
+let ext
 
 // Thread Item Component
 const ThreadItem = {
@@ -21,10 +20,10 @@ const ThreadItem = {
                         {{ thread.title }}
                     </div>
                     <div class="text-xs text-gray-500 dark:text-gray-400 truncate">
-                        <span>{{ formatRelativeTime(thread.updatedAt) }} • {{ thread.messages.length }} msgs</span>
-                        <span v-if="thread.stats?.inputTokens" :title="statsTitle(thread.stats)">
-                            &#8226; {{ humanifyNumber(thread.stats.inputTokens + thread.stats.outputTokens) }} toks
-                            {{ thread.stats.cost ? ' ' + formatCost(thread.stats.cost) : '' }}
+                        <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 dark:text-blue-400 truncate">
@@ -60,32 +59,12 @@ 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,
-            humanifyNumber,
-            statsTitle,
-            formatCost,
         }
     }
 }
 
 const GroupedThreads = {
-    components: {
-        ThreadItem,
-    },
     template: `
     <!-- Today -->
     <div v-if="groupedThreads.today.length > 0" class="mb-4">
@@ -94,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)"
         />
@@ -107,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)"
         />
@@ -120,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)"
         />
@@ -133,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)"
         />
@@ -156,15 +148,10 @@ const GroupedThreads = {
     emits: ['select', 'delete'],
 }
 
-const Sidebar = {
-    components: {
-        Brand,
-        GroupedThreads,
-        ThreadItem,
-    },
+const ThreadsSidebar = {
     template: `
-        <div class="flex flex-col h-full bg-gray-50 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700">
-            <Brand @home="goToInitialState" @new="createNewThread" @analytics="goToAnalytics" @toggle-sidebar="$emit('toggle-sidebar')" />
+        <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 dark:text-gray-400">
@@ -180,18 +167,28 @@ const Sidebar = {
                     <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(18)"
+                <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>
     `,
-    emits: ['thread-selected', 'toggle-sidebar'],
-    setup(props, { emit }) {
-        const ai = inject('ai')
+    setup(props) {
+        const ctx = inject('ctx')
+        const ai = ctx.ai
         const router = useRouter()
-        const threadStore = useThreadStore()
         const {
             threads,
             currentThread,
@@ -201,7 +198,7 @@ const Sidebar = {
             createThread,
             deleteThread: deleteThreadFromStore,
             clearCurrentThread
-        } = threadStore
+        } = ctx.threads
 
         onMounted(async () => {
             await loadThreads()
@@ -209,7 +206,6 @@ const Sidebar = {
 
         const selectThread = async (threadId) => {
             router.push(`${ai.base}/c/${threadId}`)
-            emit('thread-selected')
         }
 
         const deleteThread = async (threadId) => {
@@ -223,24 +219,19 @@ const Sidebar = {
         }
 
         const createNewThread = async () => {
-            const newThread = await createThread()
-            router.push(`${ai.base}/c/${newThread.id}`)
-            emit('thread-selected')
+            ctx.threads.startNewThread({ title: 'New Chat', model: ctx.chat.getSelectedModel(), redirect: true })
         }
 
         const goToInitialState = () => {
             clearCurrentThread()
-            router.push(`${ai.base}/`)
-            emit('thread-selected')
+            ctx.to(`/`)
         }
 
         const goToAnalytics = () => {
-            router.push(`${ai.base}/analytics`)
-            emit('thread-selected')
+            ctx.to(`/analytics`)
         }
 
         return {
-            threadStore,
             threads,
             currentThread,
             isLoading,
@@ -254,4 +245,79 @@ const Sidebar = {
     }
 }
 
-export default Sidebar
+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,
+            GroupedThreads,
+            Recents,
+        })
+        ctx.routes.push(...[
+            { path: '/recents', component: Recents },
+        ])
+        ThreadStore.install(ctx)
+
+        ctx.setGlobals({
+            requests: useRequests(ext)
+        })
+
+        ctx.setLayout({
+            left: 'ThreadsSidebar',
+        })
+    }
+}