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

llms/ui/ctx.mjs

@@ -0,0 +1,196 @@
+
+import { reactive } from 'vue'
+import { EventBus, humanize, combinePaths } from "@servicestack/client"
+import { storageObject } from './utils.mjs'
+
+export class ExtensionScope {
+    constructor(ctx, id) {
+        /**@type {AppContext} */
+        this.ctx = ctx
+        this.id = id
+        this.baseUrl = `${ctx.ai.base}/ext/${this.id}`
+        this.storageKey = `llms.${this.id}`
+        this.state = reactive({})
+    }
+    getPrefs() {
+        return storageObject(this.storageKey)
+    }
+    setPrefs(o) {
+        storageObject(this.storageKey, Object.assign(this.getPrefs(), o))
+    }
+    get(url, options) {
+        return this.ctx.ai.get(combinePaths(this.baseUrl, url), options)
+    }
+    async getJson(url, options) {
+        return this.ctx.ai.getJson(combinePaths(this.baseUrl, url), options)
+    }
+    post(url, options) {
+        return this.ctx.ai.post(combinePaths(this.baseUrl, url), options)
+    }
+    async postJson(url, options) {
+        return this.ctx.ai.postJson(combinePaths(this.baseUrl, url), options)
+    }
+}
+
+export class AppContext {
+    constructor({ app, routes, ai, fmt, utils }) {
+        this.app = app
+        this.routes = routes
+        this.ai = ai
+        this.fmt = fmt
+        this.utils = utils
+        this._components = {}
+
+        this.state = reactive({})
+        this.events = new EventBus()
+        this.modalComponents = {}
+        this.extensions = []
+        this.layout = reactive(storageObject(`llms.layout`))
+        this.chatRequestFilters = []
+        this.chatResponseFilters = []
+        this.chatErrorFilters = []
+        this.createThreadFilters = []
+        this.updateThreadFilters = []
+        this.top = {}
+        this.left = {}
+
+        if (!Array.isArray(this.layout.hide)) {
+            this.layout.hide = []
+        }
+        Object.assign(app.config.globalProperties, {
+            $ctx: this,
+            $state: this.state,
+            $layout: this.layout,
+            $ai: ai,
+            $fmt: fmt,
+            $utils: utils,
+        })
+        Object.keys(app.config.globalProperties).forEach(key => {
+            globalThis[key] = app.config.globalProperties[key]
+        })
+        document.addEventListener('keydown', (e) => this.handleKeydown(e))
+    }
+    async init() {
+        Object.assign(this.state, await this.ai.init(this))
+    }
+    setGlobals(globals) {
+        Object.entries(globals).forEach(([name, global]) => {
+            const globalName = '$' + name
+            globalThis[globalName] = this.app.config.globalProperties[globalName] = global
+            this[name] = global
+        })
+    }
+    _validateIcons(icons) {
+        Object.entries(icons).forEach(([id, icon]) => {
+            if (!icon.component) {
+                console.error(`Icon ${id} is missing component property`)
+            }
+            icon.id = id
+            if (!icon.name) {
+                icon.name = humanize(id)
+            }
+            if (typeof icon.isActive != 'function') {
+                icon.isActive = () => false
+            }
+        })
+        return icons
+    }
+    setTopIcons(icons) {
+        Object.assign(this.top, this._validateIcons(icons))
+    }
+    setLeftIcons(icons) {
+        Object.assign(this.left, this._validateIcons(icons))
+    }
+    component(name, component) {
+        if (!name) return name
+        if (component) {
+            this._components[name] = component
+        }
+        return component || this._components[name] || this.app.component(name)
+    }
+    components(components) {
+        if (components) {
+            Object.keys(components).forEach(name => {
+                this._components[name] = components[name]
+            })
+        }
+        return this._components
+    }
+    scope(extension) {
+        return new ExtensionScope(this, extension)
+    }
+    modals(modals) {
+        Object.keys(modals).forEach(name => {
+            this.modalComponents[name] = modals[name]
+            this.component(name, modals[name])
+        })
+    }
+    openModal(name) {
+        const component = this.modalComponents[name]
+        if (!component) {
+            console.error(`Modal ${name} not found`)
+            return
+        }
+        console.debug('openModal', name)
+        this.router.push({ query: { open: name } })
+        this.events.publish('modal:open', name)
+        return component
+    }
+    closeModal(name) {
+        console.debug('closeModal', name)
+        this.router.push({ query: { open: undefined } })
+        this.events.publish('modal:close', name)
+    }
+    handleKeydown(e) {
+        if (e.key === 'Escape') {
+            const modal = this.router.currentRoute.value?.query?.open
+            if (modal) {
+                this.closeModal(modal)
+            }
+            this.events.publish(`keydown:Escape`, e)
+        }
+    }
+    setState(o) {
+        Object.assign(this.state, o)
+        //this.events.publish('update:state', this.state)
+    }
+    setLayout(o) {
+        Object.assign(this.layout, o)
+        storageObject(`llms.layout`, this.layout)
+    }
+    toggleLayout(key, toggle = undefined) {
+        const hide = toggle == undefined
+            ? !this.layout.hide.includes(key)
+            : !toggle
+        console.log('toggleLayout', key, hide)
+        if (hide) {
+            this.layout.hide.push(key)
+        } else {
+            this.layout.hide = this.layout.hide.filter(k => k != key)
+        }
+        storageObject(`llms.layout`, this.layout)
+    }
+    layoutVisible(key) {
+        return !this.layout.hide.includes(key)
+    }
+    getPrefs() {
+        return storageObject(this.ai.prefsKey)
+    }
+    setPrefs(o) {
+        storageObject(this.ai.prefsKey, Object.assign(this.getPrefs(), o))
+    }
+    toggleTop(name) {
+        console.log('toggleTop', name)
+        this.layout.top = this.layout.top == name ? undefined : name
+        storageObject(`llms.layout`, this.layout)
+    }
+    togglePath(path) {
+        const currentPath = this.router.currentRoute.value?.path
+        console.log('togglePath', path, currentPath)
+        if (currentPath == path) {
+            this.toggleLayout('left')
+        } else {
+            this.router.push({ path })
+        }
+    }
+}

llms/ui/index.mjs

@@ -1,176 +1,49 @@
 
-import { createApp, reactive, defineAsyncComponent } from 'vue'
+import { createApp } from 'vue'
 import { createWebHistory, createRouter } from "vue-router"
-import { EventBus, humanize } from "@servicestack/client"
-import ServiceStackVue from "@servicestack/vue"
-import App from '/ui/App.mjs'
-import ai from '/ui/ai.mjs'
-import threadStore, { useThreadStore } from './threadStore.mjs'
-import SettingsDialog from '/ui/SettingsDialog.mjs'
-import ModelSelectorInstaller from '/ui/model-selector.mjs'
-import { storageObject } from './utils.mjs'
-
-const { config, models } = await ai.init()
-const MainComponent = defineAsyncComponent(() => import(ai.base + '/ui/Main.mjs'))
-const RecentsComponent = defineAsyncComponent(() => import(ai.base + '/ui/Recents.mjs'))
-const AnalyticsComponent = defineAsyncComponent(() => import(ai.base + '/ui/Analytics.mjs'))
+import ServiceStackVue, { useFormatters } from "@servicestack/vue"
+import App from './App.mjs'
+import ai from './ai.mjs'
+import LayoutModule from './modules/layout.mjs'
+import ChatModule from './modules/chat/index.mjs'
+import ThreadsModule from './modules/threads/index.mjs'
+import ModelSelectorModule from './modules/model-selector.mjs'
+import AnalyticsModule from './modules/analytics.mjs'
+import { utilsFunctions, utilsFormatters } from './utils.mjs'
+import { markdownFormatters } from './markdown.mjs'
+import { AppContext } from './ctx.mjs'
 
 const Components = {
-    SettingsDialog,
 }
 
-const BuiltInModules = [
-    ModelSelectorInstaller,
-    threadStore,
-]
-
-const routes = [
-    { path: '/', component: MainComponent },
-    { path: '/c/:id', component: MainComponent },
-    { path: '/recents', component: RecentsComponent },
-    { path: '/analytics', component: AnalyticsComponent },
-    { path: '/:fallback(.*)*', component: MainComponent }
-]
-routes.forEach(r => r.path = ai.base + r.path)
-const router = createRouter({
-    history: createWebHistory(),
-    routes,
-})
-
-
-class AppExtension {
-    constructor(ctx, ext) {
-        this.ctx = ctx
-        Object.assign(this, ext)
-        this.baseUrl = `${ctx.ai.base}/ext/${this.id}`
-        this.storageKey = `llms.${this.id}`
-        if (!this.name) {
-            this.name = humanize(this.id)
-        }
-    }
-    storageObject(o) {
-        return storageObject(this.storageKey, o)
-    }
+const BuiltInModules = {
+    LayoutModule,
+    ChatModule,
+    ThreadsModule,
+    ModelSelectorModule,
+    AnalyticsModule,
 }
 
-class AppContext {
-    constructor({ app, config, models, extensions, routes, ai, router, threadStore, modules }) {
-        this.app = app
-        this.state = reactive({
-            config,
-            models,
-            extensions,
-        })
-        this.routes = routes
-        this.ai = ai
-        this.router = router
-        this.threadStore = threadStore
-        this.modules = modules
-        this.events = new EventBus()
-        this.modalComponents = {}
-        this.extensions = []
-        this.layout = reactive(storageObject(`llms.layout`))
-        this.chatRequestFilters = []
-        this.chatResponseFilters = []
-        this.chatErrorFilters = []
-        this.createThreadFilters = []
-        this.updateThreadFilters = []
-
-        app.config.globalProperties.$ctx = this
-        app.config.globalProperties.$state = this.state
-        app.config.globalProperties.$layout = this.layout
-        document.addEventListener('keydown', (e) => this.handleKeydown(e))
-    }
-    component(name, component) {
-        if (!name) return name
-        if (component) {
-            this.app.component(name, component)
-        }
-        return component || this.app.component(name)
-    }
-    components(components) {
-        Object.keys(components).forEach(name => {
-            this.app.component(name, components[name])
-        })
-    }
-    extension(extension) {
-        const ext = new AppExtension(this, extension)
-        this.extensions.push(ext)
-        return ext
-    }
-    modals(modals) {
-        Object.keys(modals).forEach(name => {
-            this.modalComponents[name] = modals[name]
-            this.component(name, modals[name])
-        })
-    }
-    openModal(name) {
-        const component = this.modalComponents[name]
-        if (!component) {
-            console.error(`Modal ${name} not found`)
-            return
-        }
-        console.debug('openModal', name)
-        this.router.push({ query: { open: name } })
-        this.events.publish('modal:open', name)
-        return component
-    }
-    closeModal(name) {
-        console.debug('closeModal', name)
-        this.router.push({ query: { open: undefined } })
-        this.events.publish('modal:close', name)
-    }
-    handleKeydown(e) {
-        if (e.key === 'Escape') {
-            const modal = this.router.currentRoute.value?.query?.open
-            if (modal) {
-                this.closeModal(modal)
-            }
-        }
-    }
-    setState(o) {
-        Object.assign(this.state, o)
-        //this.events.publish('update:state', this.state)
-    }
-    setLayout(o) {
-        Object.assign(this.layout, o)
-        storageObject(`llms.layout`, this.layout)
-    }
-    getPrefs() {
-        return storageObject(this.ai.prefsKey)
-    }
-    setPrefs(o) {
-        storageObject(this.ai.prefsKey, o)
-    }
-    toggleLayout(o) {
-        Object.keys(o).forEach(key => {
-            this.layout[key] = this.layout[key] == o[key] ? undefined : o[key]
-        })
-        storageObject(`llms.layout`, this.layout)
-    }
-    getCurrentThread() {
-        return this.threadStore.currentThread.value
-    }
-}
 
 export async function createContext() {
-    const app = createApp(App, { config, models })
+    const app = createApp(App)
 
-    app.use(router)
     app.use(ServiceStackVue)
     Object.keys(Components).forEach(name => {
         app.component(name, Components[name])
     })
 
+    const fmt = Object.assign({}, useFormatters(), utilsFormatters(), markdownFormatters())
+    const utils = Object.assign({}, utilsFunctions())
+    const routes = []
 
-    window.ai = app.config.globalProperties.$ai = ai
-
-    // Load Extensions
-    const exts = await (await fetch("/ext")).json()
+    const ctx = new AppContext({ app, routes, ai, fmt, utils })
+    app.provide('ctx', ctx)
+    await ctx.init()
 
     // Load modules in parallel
-    const validExtensions = exts.filter(x => x.path);
-    const modules = await Promise.all(validExtensions.map(async extension => {
+    const validExtensions = ctx.state.extensions.filter(x => x.path);
+    ctx.modules = await Promise.all(validExtensions.map(async extension => {
         try {
             const module = await import(extension.path)
             return { extension, module }
@@ -180,25 +53,18 @@ export async function createContext() {
         }
     }))
 
-    const threadStore = useThreadStore()
-
-    const ctx = new AppContext({
-        app,
-        config,
-        models,
-        routes,
-        ai,
-        router,
-        threadStore,
-        exts,
-        modules,
+    // Install built-in modules sequentially
+    Object.entries(BuiltInModules).forEach(([name, module]) => {
+        try {
+            module.install(ctx)
+            console.log(`Installed built-in: ${name}`)
+        } catch (e) {
+            console.error(`Failed to install built-in ${name}:`, e)
+        }
     })
-    app.provide('ctx', ctx)
-
-    BuiltInModules.forEach(ext => ext.install(ctx))
 
-    // Install sequentially
-    for (const result of modules) {
+    // Install extensions sequentially
+    for (const result of ctx.modules) {
         if (result && result.module.default && result.module.default.install) {
             try {
                 result.module.default.install(ctx)
@@ -209,5 +75,43 @@ export async function createContext() {
         }
     }
 
+    // Register all components with Vue
+    Object.entries(ctx._components).forEach(([name, component]) => {
+        app.component(name, component)
+    })
+
+    // Add fallback route and create router
+    routes.push({ path: '/:fallback(.*)*', component: ctx.component('Home') })
+    routes.forEach(r => r.path = ai.base + r.path)
+    ctx.router = createRouter({
+        history: createWebHistory(),
+        routes,
+    })
+    app.use(ctx.router)
+
+    ctx.router.beforeEach((to, from) => {
+        const title = to.meta.title || 'Chat'
+        console.log('beforeEach', to.path, title)
+        ctx.setLayout({ path: to.path })
+        ctx.setState({ title })
+        document.title = title
+        return true
+    })
+
+    if (ctx.layout.path && location.pathname === '/' && !location.search) {
+        console.log('redirecting to saved path: ', ctx.layout.path)
+        ctx.router.push({ path: ctx.layout.path })
+    }
+
+    // Load all extensions in parallel
+    await Promise.all(ctx.modules.filter(x => x.module.default && x.module.default.load).map(async result => {
+        try {
+            await result.module.default.load(ctx)
+            console.log(`Loaded extension: ${result.extension.id}`)
+        } catch (e) {
+            console.error(`Failed to load extension ${result.extension.id}:`, e)
+        }
+    }))
+
     return ctx
 }

llms/ui/lib/charts.mjs

@@ -1,20 +1,16 @@
-import { useFormatters, useUtils } from "@servicestack/vue"
 import { Chart, registerables } from "chart.js"
 Chart.register(...registerables)
 
-const { humanifyMs, humanifyNumber, formatDate } = useFormatters()
-const { delay } = useUtils()
-
-export const resultLimits = [5,10,25,50,100]
+export const resultLimits = [5, 10, 25, 50, 100]
 export const colors = [
-    { background: 'rgba(54, 162, 235, 0.2)',  border: 'rgb(54, 162, 235)' }, //blue
-    { background: 'rgba(255, 99, 132, 0.2)',  border: 'rgb(255, 99, 132)' },
+    { background: 'rgba(54, 162, 235, 0.2)', border: 'rgb(54, 162, 235)' }, //blue
+    { background: 'rgba(255, 99, 132, 0.2)', border: 'rgb(255, 99, 132)' },
     { background: 'rgba(153, 102, 255, 0.2)', border: 'rgb(153, 102, 255)' },
-    { background: 'rgba(54, 162, 235, 0.2)',  border: 'rgb(54, 162, 235)' },
-    { background: 'rgba(255, 159, 64, 0.2)',  border: 'rgb(255, 159, 64)' },
-    { background: 'rgba(67, 56, 202, 0.2)',   border: 'rgb(67, 56, 202)' },
-    { background: 'rgba(255, 99, 132, 0.2)',  border: 'rgb(255, 99, 132)' },
-    { background: 'rgba(14, 116, 144, 0.2)',  border: 'rgb(14, 116, 144)' },
-    { background: 'rgba(162, 28, 175, 0.2)',  border: 'rgb(162, 28, 175)' },
+    { background: 'rgba(54, 162, 235, 0.2)', border: 'rgb(54, 162, 235)' },
+    { background: 'rgba(255, 159, 64, 0.2)', border: 'rgb(255, 159, 64)' },
+    { background: 'rgba(67, 56, 202, 0.2)', border: 'rgb(67, 56, 202)' },
+    { background: 'rgba(255, 99, 132, 0.2)', border: 'rgb(255, 99, 132)' },
+    { background: 'rgba(14, 116, 144, 0.2)', border: 'rgb(14, 116, 144)' },
+    { background: 'rgba(162, 28, 175, 0.2)', border: 'rgb(162, 28, 175)' },
     { background: 'rgba(201, 203, 207, 0.2)', border: 'rgb(201, 203, 207)' },
 ]

llms/ui/markdown.mjs

@@ -198,3 +198,9 @@ function toggleThink(id) {
         icon.classList.remove('rotate-180')
     }
 }
+
+export function markdownFormatters() {
+    return {
+        markdown: renderMarkdown
+    }
+}