llms-py 3.0.0__py3-none-any.whl → 3.0.0b1__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,18 @@ 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) {
-        const ctx = inject('ctx')
-        const ai = ctx.ai
+    emits: ['thread-selected', 'toggle-sidebar'],
+    setup(props, { emit }) {
+        const ai = inject('ai')
         const router = useRouter()
+        const threadStore = useThreadStore()
         const {
             threads,
             currentThread,
@@ -198,7 +201,7 @@ const ThreadsSidebar = {
             createThread,
             deleteThread: deleteThreadFromStore,
             clearCurrentThread
-        } = ctx.threads
+        } = threadStore
 
         onMounted(async () => {
             await loadThreads()
@@ -206,6 +209,7 @@ const ThreadsSidebar = {
 
         const selectThread = async (threadId) => {
             router.push(`${ai.base}/c/${threadId}`)
+            emit('thread-selected')
         }
 
         const deleteThread = async (threadId) => {
@@ -219,19 +223,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 +254,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,64 @@
+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 ai = inject('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/SystemPromptEditor.mjs

@@ -0,0 +1,31 @@
+export default {
+    template:`
+    <div class="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-6 py-4">
+        <div class="max-w-6xl mx-auto">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                System Prompt
+                <span v-if="selected" class="text-gray-500 dark:text-gray-400 font-normal">
+                    ({{ prompts.find(p => p.id === selected.id)?.name || 'Custom' }})
+                </span>
+            </label>
+            <textarea
+                :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"
+                placeholder="Enter a system prompt to guide AI's behavior..."
+                rows="6"
+                class="block w-full resize-vertical 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 focus:outline-none focus:ring-1 focus:ring-blue-500"
+            ></textarea>
+            <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
+                You can modify this system prompt before sending messages. Changes will only apply to new conversations.
+            </div>
+        </div>
+    </div>
+    `,
+    emits: ['update:modelValue'],
+    props: {
+        prompts: Array,
+        selected: Object,
+        modelValue: String,
+    },
+    setup() {
+    }
+}

llms/ui/SystemPromptSelector.mjs

@@ -0,0 +1,56 @@
+import { ref, onMounted, onUnmounted } from "vue"
+export default {
+    template:`
+        <button v-if="modelValue" type="button" title="Clear System Prompt" @click="$emit('update:modelValue', null)">
+            <svg class="size-4 text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"/></svg>
+        </button>
+
+        <Autocomplete ref="refSelector" id="prompt" :options="prompts" label=""
+            :modelValue="modelValue" @update:modelValue="$emit('update:modelValue', $event)"
+            class="w-68 xl:w-84"
+            :match="(x, value) => x.name.toLowerCase().includes(value.toLowerCase())"
+            placeholder="Select a System Prompt...">
+            <template #item="{ value }">
+                <div class="truncate max-w-72" :title="value">{{value}}</div>
+            </template>
+        </Autocomplete>
+
+        <!-- Toggle System Prompt Visibility -->
+        <button type="button"
+            @click="$emit('toggle')"
+            :class="show ? 'text-blue-700 dark:text-blue-400' : 'text-gray-600 dark:text-gray-400'"
+            class="p-1 rounded-md hover:bg-blue-100 dark:hover:bg-blue-900/30 hover:text-blue-700 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+            :title="show ? 'Hide system prompt' : 'Show system prompt'"
+        >
+            <svg v-if="!show" class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="currentColor" d="M33.62 17.53c-3.37-6.23-9.28-10-15.82-10S5.34 11.3 2 17.53l-.28.47l.26.48c3.37 6.23 9.28 10 15.82 10s12.46-3.72 15.82-10l.26-.48Zm-15.82 8.9C12.17 26.43 7 23.29 4 18c3-5.29 8.17-8.43 13.8-8.43S28.54 12.72 31.59 18c-3.05 5.29-8.17 8.43-13.79 8.43"/><path fill="currentColor" d="M18.09 11.17A6.86 6.86 0 1 0 25 18a6.86 6.86 0 0 0-6.91-6.83m0 11.72A4.86 4.86 0 1 1 23 18a4.87 4.87 0 0 1-4.91 4.89"/><path fill="none" d="M0 0h36v36H0z"/></svg>
+            <svg v-else class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="currentColor" d="M25.19 20.4a6.8 6.8 0 0 0 .43-2.4a6.86 6.86 0 0 0-6.86-6.86a6.8 6.8 0 0 0-2.37.43L18 13.23a5 5 0 0 1 .74-.06A4.87 4.87 0 0 1 23.62 18a5 5 0 0 1-.06.74Z" class="clr-i-outline clr-i-outline-path-1"/><path fill="currentColor" d="M34.29 17.53c-3.37-6.23-9.28-10-15.82-10a16.8 16.8 0 0 0-5.24.85L14.84 10a14.8 14.8 0 0 1 3.63-.47c5.63 0 10.75 3.14 13.8 8.43a17.8 17.8 0 0 1-4.37 5.1l1.42 1.42a19.9 19.9 0 0 0 5-6l.26-.48Z"/><path fill="currentColor" d="m4.87 5.78l4.46 4.46a19.5 19.5 0 0 0-6.69 7.29l-.26.47l.26.48c3.37 6.23 9.28 10 15.82 10a16.9 16.9 0 0 0 7.37-1.69l5 5l1.75-1.5l-26-26Zm9.75 9.75l6.65 6.65a4.8 4.8 0 0 1-2.5.72A4.87 4.87 0 0 1 13.9 18a4.8 4.8 0 0 1 .72-2.47m-1.45-1.45a6.85 6.85 0 0 0 9.55 9.55l1.6 1.6a14.9 14.9 0 0 1-5.86 1.2c-5.63 0-10.75-3.14-13.8-8.43a17.3 17.3 0 0 1 6.12-6.3Z"/><path fill="none" d="M0 0h36v36H0z"/></svg>
+        </button>
+    `,
+    emits: ['updated', 'update:modelValue', 'toggle'],
+    props: {
+        prompts: Array,
+        modelValue: Object,
+        show: Boolean,
+    },
+    setup() {
+        const refSelector = ref()
+    
+        function collapse(e) {
+            // call toggle when clicking outside of the Autocomplete component
+            if (refSelector.value && !refSelector.value.$el.contains(e.target)) {
+                refSelector.value.toggle(false)
+            }
+        }
+
+        onMounted(() => {
+            document.addEventListener('click', collapse)
+        })
+        onUnmounted(() => {
+            document.removeEventListener('click', collapse)
+        })
+
+        return {
+            refSelector,
+        }
+    }
+}

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>
+    `
+}