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

llms/{extensions/app/ui/index.mjs → ui/Sidebar.mjs}

@@ -1,10 +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'
+import { useFormatters } from '@servicestack/vue'
+import { useThreadStore } from './threadStore.mjs'
+import Brand from './Brand.mjs'
+import { statsTitle, formatCost } from './utils.mjs'
 
-let ext
+const { humanifyNumber, humanifyMs } = useFormatters()
 
 // Thread Item Component
 const ThreadItem = {
@@ -20,10 +21,10 @@ const ThreadItem = {
                         {{ thread.title }}
                     </div>
                     <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>{{ 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>
                     </div>
                     <div v-if="thread.model" class="text-xs text-blue-600 dark:text-blue-400 truncate">
@@ -59,12 +60,32 @@ 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">
@@ -73,20 +94,7 @@ const GroupedThreads = {
             v-for="thread in groupedThreads.today"
             :key="thread.id"
             :thread="thread"
-            :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"
+            :is-active="currentThread?.id === thread.id"
             @select="$emit('select', $event)"
             @delete="$emit('delete', $event)"
         />
@@ -99,7 +107,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)"
         />
@@ -112,7 +120,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)"
         />
@@ -125,7 +133,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)"
         />
@@ -148,10 +156,15 @@ const GroupedThreads = {
     emits: ['select', 'delete'],
 }
 
-const ThreadsSidebar = {
+const Sidebar = {
+    components: {
+        Brand,
+        GroupedThreads,
+        ThreadItem,
+    },
     template: `
-        <div class="flex flex-col h-full">
-            <Brand />
+        <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')" />
             <!-- 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">
@@ -167,28 +180,19 @@ const ThreadsSidebar = {
                     <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="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)"
+                <div v-else class="py-2">
+                    <GroupedThreads :currentThread="currentThread" :groupedThreads="threadStore.getGroupedThreads(18)"
                         @select="selectThread" @delete="deleteThread" />
                 </div>
             </div>
         </div>
     `,
-    setup(props) {
+    emits: ['thread-selected', 'toggle-sidebar'],
+    setup(props, { emit }) {
         const ctx = inject('ctx')
         const ai = ctx.ai
         const router = useRouter()
+        const threadStore = useThreadStore()
         const {
             threads,
             currentThread,
@@ -198,7 +202,7 @@ const ThreadsSidebar = {
             createThread,
             deleteThread: deleteThreadFromStore,
             clearCurrentThread
-        } = ctx.threads
+        } = threadStore
 
         onMounted(async () => {
             await loadThreads()
@@ -206,6 +210,7 @@ const ThreadsSidebar = {
 
         const selectThread = async (threadId) => {
             router.push(`${ai.base}/c/${threadId}`)
+            emit('thread-selected')
         }
 
         const deleteThread = async (threadId) => {
@@ -219,19 +224,24 @@ const ThreadsSidebar = {
         }
 
         const createNewThread = async () => {
-            ctx.threads.startNewThread({ title: 'New Chat', model: ctx.chat.getSelectedModel(), redirect: true })
+            const newThread = await createThread()
+            router.push(`${ai.base}/c/${newThread.id}`)
+            emit('thread-selected')
         }
 
         const goToInitialState = () => {
             clearCurrentThread()
-            ctx.to(`/`)
+            router.push(`${ai.base}/`)
+            emit('thread-selected')
         }
 
         const goToAnalytics = () => {
-            ctx.to(`/analytics`)
+            router.push(`${ai.base}/analytics`)
+            emit('thread-selected')
         }
 
         return {
+            threadStore,
             threads,
             currentThread,
             isLoading,
@@ -245,79 +255,4 @@ 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,
-            GroupedThreads,
-            Recents,
-        })
-        ctx.routes.push(...[
-            { path: '/recents', component: Recents },
-        ])
-        ThreadStore.install(ctx)
-
-        ctx.setGlobals({
-            requests: useRequests(ext)
-        })
-
-        ctx.setLayout({
-            left: 'ThreadsSidebar',
-        })
-    }
-}
+export default Sidebar

llms/ui/SignIn.mjs

@@ -0,0 +1,65 @@
+import { inject, ref } from "vue"
+import { toJsonObject } from "./utils.mjs"
+
+export default {
+    template: `
+    <div class="min-h-full -mt-12 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+        <div class="sm:mx-auto sm:w-full sm:max-w-md">
+            <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-gray-50">
+                Sign In
+            </h2>
+        </div>
+        <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+            <ErrorSummary v-if="errorSummary" class="mb-3" :status="errorSummary" />
+            <div class="bg-white dark:bg-black py-8 px-4 shadow sm:rounded-lg sm:px-10">
+                <form @submit.prevent="submit">
+                    <div class="flex flex-1 flex-col justify-between">
+                        <div class="space-y-6">
+                            <fieldset class="grid grid-cols-12 gap-6">
+                                <div class="w-full col-span-12">
+                                    <TextInput id="apiKey" name="apiKey" label="API Key" v-model="apiKey" />
+                                </div>
+                            </fieldset>
+                        </div>
+                    </div>
+                    <div class="mt-8">
+                        <PrimaryButton class="w-full">Sign In</PrimaryButton>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>     
+    `,
+    emits: ['done'],
+    setup(props, { emit }) {
+        const ctx = inject('ctx')
+        const ai = ctx.ai
+        const apiKey = ref('')
+        const errorSummary = ref()
+        async function submit() {
+            const r = await ai.get('/auth', {
+                headers: {
+                    'Authorization': `Bearer ${apiKey.value}`
+                },
+            })
+            const txt = await r.text()
+            const json = toJsonObject(txt)
+            // console.log('json', json)
+            if (r.ok) {
+                json.apiKey = apiKey.value
+                emit('done', json)
+            } else {
+                errorSummary.value = json.responseStatus || {
+                    errorCode: "Unauthorized",
+                    message: 'Invalid API Key'
+                }
+            }
+        }
+
+        return {
+            apiKey,
+            submit,
+            errorSummary,
+        }
+    }
+}

llms/ui/Welcome.mjs

@@ -0,0 +1,8 @@
+export default {
+    template: `
+        <div class="mb-2 flex justify-center">
+            <svg class="size-20 text-gray-700 dark:text-gray-300" 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>
+        <h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-2">{{ $ai.welcome }}</h2>
+    `
+}

llms/ui/ai.mjs

@@ -1,12 +1,12 @@
 import { reactive } from "vue"
-import { ApiResult } from "@servicestack/client"
+import { useThreadStore } from "./threadStore.mjs"
 
 const base = ''
 const headers = { 'Accept': 'application/json' }
 const prefsKey = 'llms.prefs'
 
 export const o = {
-    version: '3.0.0',
+    version: '3.0.0b2',
     base,
     prefsKey,
     welcome: 'Welcome to llms.py',
@@ -15,7 +15,6 @@ export const o = {
     authType: 'apikey',  // 'oauth' or 'apikey' - controls which SignIn component to use
     headers,
     isSidebarOpen: true,  // Shared sidebar state (default open for lg+ screens)
-    cacheUrlInfo: {},
 
     get hasAccess() {
         return !this.requiresAuth || this.auth
@@ -30,73 +29,14 @@ export const o = {
             headers: Object.assign({}, this.headers, options?.headers),
         })
     },
-    async getJson(url, options) {
-        const res = await this.get(url, options)
-        return await this.createJsonResult(res, url)
-    },
-    async post(url, options) {
-        return await fetch(this.resolveUrl(url), {
+    post(url, options) {
+        return fetch(this.resolveUrl(url), {
             method: 'POST',
             ...options,
             headers: Object.assign({ 'Content-Type': 'application/json' }, this.headers, options?.headers),
         })
     },
-    async postForm(url, options) {
-        return await fetch(this.resolveUrl(url), {
-            method: 'POST',
-            ...options,
-            headers: Object.assign({}, options?.headers),
-        })
-    },
-    async postJson(url, options) {
-        const res = await this.post(url, options)
-        return await this.createJsonResult(res, url)
-    },
-    async createJsonResult(res, msg = null) {
-        let txt = ''
-        try {
-            txt = await res.text()
-            const response = JSON.parse(txt)
-            if (response?.responseStatus?.errorCode) {
-                return new ApiResult({ error: response.responseStatus })
-            }
-            if (!res.ok) {
-                return new ApiResult({ error: { errorCode: 'Error', message: res.statusText } })
-            }
-            return new ApiResult({ response })
-        } catch (e) {
-            console.error('Failed to parse JSON', e, msg, txt)
-            const responseStatus = {
-                errorCode: 'Error',
-                message: `${e.message ?? e}`,
-                stackTrace: msg ? `${msg}\n${txt}` : txt,
-            }
-            return { responseStatus }
-        }
-    },
-    createErrorStatus({ message, errorCode, stackTrace, errors, meta }) {
-        const ret = {
-            errorCode: errorCode || 'Error',
-            message: message,
-        }
-        if (stackTrace) {
-            ret.stackTrace = stackTrace
-        }
-        if (errors && Array.isArray(errors)) {
-            ret.errors = errors
-        }
-        if (meta) {
-            ret.meta = meta
-        }
-        return ret
-    },
-    createErrorResult(e) {
-        return new ApiResult({
-            error: e.errorCode
-                ? this.createErrorStatus(e)
-                : this.createErrorStatus({ message: `${e.message ?? e}` })
-        })
-    },
+
     async getConfig() {
         return this.get('/config')
     },
@@ -132,17 +72,18 @@ export const o = {
         if (this.headers.Authorization) {
             delete this.headers.Authorization
         }
+        localStorage.removeItem('llms:auth')
     },
-    async init(ctx) {
+    async init() {
         // Load models and prompts
-        const [configRes, modelsRes, extensionsRes] = await Promise.all([
+        const { initDB } = useThreadStore()
+        const [_, configRes, modelsRes] = await Promise.all([
+            initDB(),
             this.getConfig(),
             this.getModels(),
-            this.get('/ext'),
         ])
         const config = await configRes.json()
         const models = await modelsRes.json()
-        const extensions = await extensionsRes.json()
 
         // Update auth settings from server config
         if (config.requiresAuth != null) {
@@ -159,59 +100,14 @@ export const o = {
             : null
         if (auth?.responseStatus?.errorCode) {
             console.error(auth.responseStatus.errorCode, auth.responseStatus.message)
+            // Clear invalid session from localStorage
+            localStorage.removeItem('llms:auth')
         } else {
             this.signIn(auth)
         }
-        return { config, models, extensions, auth }
-    },
-
-
-    async uploadFile(file) {
-        const formData = new FormData()
-        formData.append('file', file)
-        const response = await fetch(this.resolveUrl('/upload'), {
-            method: 'POST',
-            body: formData
-        })
-        if (!response.ok) {
-            throw new Error(`Upload failed: ${response.statusText}`)
-        }
-        return response.json()
-    },
-
-
-    getCacheInfo(url) {
-        return this.cacheUrlInfo[url]
-    },
-    async fetchCacheInfos(urls) {
-        const infos = {}
-        const fetchInfos = []
-        for (const url of urls) {
-            const info = this.getCacheInfo(url)
-            if (info) {
-                infos[url] = info
-            } else {
-                fetchInfos.push(fetch(this.resolveUrl(url + "?info")))
-            }
-        }
-        const responses = await Promise.all(fetchInfos)
-        for (let i = 0; i < urls.length; i++) {
-            try {
-                const info = await responses[i].json()
-                this.setCacheInfo(urls[i], info)
-                infos[urls[i]] = info
-            } catch (e) {
-                console.error('Failed to fetch info for', urls[i], e)
-            }
-        }
-        return infos
-    },
-    setCacheInfo(url, info) {
-        this.cacheUrlInfo[url] = info
+        return { config, models, auth }
     }
-
 }
 
-
 let ai = reactive(o)
 export default ai