llms-py 3.0.0b1__py3-none-any.whl → 3.0.0b3__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

@@ -0,0 +1,117 @@
+
+import { createApp } from 'vue'
+import { createWebHistory, createRouter } from "vue-router"
+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 = {
+}
+
+const BuiltInModules = {
+    LayoutModule,
+    ChatModule,
+    ThreadsModule,
+    ModelSelectorModule,
+    AnalyticsModule,
+}
+
+
+export async function createContext() {
+    const app = createApp(App)
+
+    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 = []
+
+    const ctx = new AppContext({ app, routes, ai, fmt, utils })
+    app.provide('ctx', ctx)
+    await ctx.init()
+
+    // Load modules in parallel
+    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 }
+        } catch (e) {
+            console.error(`Failed to load extension module ${extension.name}:`, e)
+            return null
+        }
+    }))
+
+    // 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)
+        }
+    })
+
+    // Install extensions sequentially
+    for (const result of ctx.modules) {
+        if (result && result.module.default && result.module.default.install) {
+            try {
+                result.module.default.install(ctx)
+                console.log(`Installed extension: ${result.extension.id}`)
+            } catch (e) {
+                console.error(`Failed to install extension ${result.extension.id}:`, e)
+            }
+        }
+    }
+
+    // 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
+    }
+}