llms-py 3.0.0b1__py3-none-any.whl → 3.0.0b3__py3-none-any.whl

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

@@ -1,10 +1,9 @@
 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">
@@ -46,9 +45,10 @@ const RecentResults = {
         q: String
     },
     setup(props) {
-        const ai = inject('ai')
+        const ctx = inject('ctx')
+        const ai = ctx.ai
+        const config = ctx.state.config
         const router = useRouter()
-        const config = inject('config')
         const { threads, loadThreads } = useThreadStore()
         let defaultVisibleCount = 25
         const visibleCount = ref(defaultVisibleCount)
@@ -106,19 +106,19 @@ const RecentResults = {
         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) : ''
             if (normalized(t.title).includes(query)) return highlight(t.title)
-            if (Array.isArray(t.messages)){
-                for (const m of t.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 prefix = start > 0 ? '…' : ''
+                        const suffix = end < orig.length ? '…' : ''
                         const snippet = prefix + orig.slice(start, end) + suffix
                         // return snippet
                         return highlight(snippet)
@@ -139,7 +139,6 @@ const RecentResults = {
             snippet,
             open,
             formatDate,
-            renderMarkdown,
             onScroll,
         }
     }

llms/ui/{Sidebar.mjs → modules/threads/index.mjs}

@@ -1,11 +1,7 @@
 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'
-
-const { humanifyNumber, humanifyMs } = useFormatters()
+import ThreadStore from './threadStore.mjs'
+import Recents from './Recents.mjs'
 
 // Thread Item Component
 const ThreadItem = {
@@ -21,10 +17,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 +56,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">
@@ -156,15 +132,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 @home="goToInitialState" @toggle-sidebar="$emit('toggle-sidebar')" />
             <!-- 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,8 +151,19 @@ 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>
@@ -189,9 +171,9 @@ const Sidebar = {
     `,
     emits: ['thread-selected', 'toggle-sidebar'],
     setup(props, { emit }) {
-        const ai = inject('ai')
+        const ctx = inject('ctx')
+        const ai = ctx.ai
         const router = useRouter()
-        const threadStore = useThreadStore()
         const {
             threads,
             currentThread,
@@ -201,7 +183,7 @@ const Sidebar = {
             createThread,
             deleteThread: deleteThreadFromStore,
             clearCurrentThread
-        } = threadStore
+        } = ctx.threads
 
         onMounted(async () => {
             await loadThreads()
@@ -240,7 +222,6 @@ const Sidebar = {
         }
 
         return {
-            threadStore,
             threads,
             currentThread,
             isLoading,
@@ -254,4 +235,26 @@ const Sidebar = {
     }
 }
 
-export default Sidebar
+export default {
+    install(ctx) {
+        ctx.components({
+            ThreadsSidebar,
+            ThreadItem,
+            GroupedThreads,
+            Recents,
+        })
+        ctx.routes.push(...[
+            { path: '/recents', component: Recents },
+        ])
+        ThreadStore.install(ctx)
+
+        ctx.setLayout({
+            left: 'ThreadsSidebar',
+        })
+    },
+
+    async load(ctx) {
+        const { initDB } = ctx.threads
+        await initDB()
+    }
+}

llms/ui/{threadStore.mjs → modules/threads/threadStore.mjs}

@@ -1,6 +1,6 @@
 import { ref, computed, unref } from 'vue'
 import { openDB } from 'idb'
-import { nextId, toModelInfo } from './utils.mjs'
+import { nextId } from '../../utils.mjs'
 
 // Thread store for managing chat threads with IndexedDB
 const threads = ref([])
@@ -8,6 +8,7 @@ const currentThread = ref(null)
 const isLoading = ref(false)
 
 let db = null
+let ctx = null
 
 // Initialize IndexedDB
 async function initDB() {
@@ -103,20 +104,22 @@ async function logRequest(threadId, model, request, response) {
 }
 
 // Create a new thread
-async function createThread(title = 'New Chat', model = null, systemPrompt = '') {
+async function createThread(args = {}) {
     await initDB()
 
     const thread = {
         id: generateThreadId(),
-        title: title,
-        model: model?.id ?? '',
-        info: toModelInfo(model),
-        systemPrompt: systemPrompt,
         messages: [],
         createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString()
+        updatedAt: new Date().toISOString(),
+        ...args
+    }
+    if (!thread.title) {
+        thread.title = 'New Chat'
     }
 
+    ctx.createThreadFilters.forEach(f => f(thread))
+
     try {
         const tx = db.transaction(['threads'], 'readwrite')
         await tx.objectStore('threads').add(thread)
@@ -148,6 +151,8 @@ async function updateThread(threadId, updates) {
         updatedAt: new Date().toISOString()
     }
 
+    ctx.updateThreadFilters.forEach(f => f(updatedThread))
+
     await store.put(updatedThread)
     await tx.complete
 
@@ -570,3 +575,12 @@ export function useThreadStore() {
         getAllThreadIds,
     }
 }
+
+export default {
+    install(context) {
+        ctx = context
+        ctx.setGlobals({
+            threads: useThreadStore()
+        })
+    }
+}