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

llms/ui/App.mjs

@@ -49,7 +49,7 @@ const LeftPanel = {
 
 const TopBar = {
     template: `
-        <div class="flex space-x-2">
+        <div class="flex space-x-1">
             <div v-for="(icon, id) in $ctx.top" :key="id" class="relative flex items-center justify-center">
                 <component :is="icon.component" 
                     class="size-7 p-1 cursor-pointer text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 block"
@@ -60,7 +60,7 @@ const TopBar = {
                 <div v-if="tooltip === icon.id && !icon.isActive({ ...$layout })" 
                     class="absolute top-full mt-2 px-2 py-1 text-xs text-white bg-gray-900 dark:bg-gray-800 rounded shadow-md z-50 whitespace-nowrap pointer-events-none"
                     :class="last2.includes(id) ? 'right-0' : 'left-1/2 -translate-x-1/2'">
-                    {{icon.name}}
+                    {{icon.title ?? icon.name}}
                 </div>    
             </div>
         </div>
@@ -178,7 +178,7 @@ export default {
                         <TopBar />
                     </div>
                     <TopPanel class="shrink-0" />
-                    <div class="flex-1 overflow-hidden min-h-0 flex flex-col">
+                    <div class="flex-1 overflow-y-auto min-h-0 flex flex-col">
                         <RouterView class="h-full" />
                     </div>
                 </div>

llms/ui/ai.mjs

@@ -5,7 +5,7 @@ const headers = { 'Accept': 'application/json' }
 const prefsKey = 'llms.prefs'
 
 export const o = {
-    version: '3.0.0b4',
+    version: '3.0.0b5',
     base,
     prefsKey,
     welcome: 'Welcome to llms.py',

llms/ui/app.css

@@ -80,7 +80,12 @@
     --color-purple-700: oklch(49.6% 0.265 301.924);
     --color-purple-800: oklch(43.8% 0.218 303.724);
     --color-purple-900: oklch(38.1% 0.176 304.987);
+    --color-fuchsia-100: oklch(95.2% 0.037 318.852);
+    --color-fuchsia-200: oklch(90.3% 0.076 319.62);
+    --color-fuchsia-300: oklch(83.3% 0.145 321.434);
     --color-fuchsia-600: oklch(59.1% 0.293 322.896);
+    --color-fuchsia-800: oklch(45.2% 0.211 324.591);
+    --color-fuchsia-900: oklch(40.1% 0.17 325.612);
     --color-slate-50: oklch(98.4% 0.003 247.858);
     --color-slate-200: oklch(92.9% 0.013 255.508);
     --color-slate-400: oklch(70.4% 0.04 256.788);
@@ -110,6 +115,7 @@
     --container-2xl: 42rem;
     --container-3xl: 48rem;
     --container-6xl: 72rem;
+    --container-7xl: 80rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -347,6 +353,9 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-1 {
+    top: calc(var(--spacing) * 1);
+  }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
@@ -374,6 +383,9 @@
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
+  .left-1 {
+    left: calc(var(--spacing) * 1);
+  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
@@ -440,9 +452,15 @@
       max-width: 96rem;
     }
   }
+  .-m-2 {
+    margin: calc(var(--spacing) * -2);
+  }
   .-m-2\.5 {
     margin: calc(var(--spacing) * -2.5);
   }
+  .-mx-1 {
+    margin-inline: calc(var(--spacing) * -1);
+  }
   .-mx-1\.5 {
     margin-inline: calc(var(--spacing) * -1.5);
   }
@@ -455,6 +473,9 @@
   .mx-auto {
     margin-inline: auto;
   }
+  .-my-1 {
+    margin-block: calc(var(--spacing) * -1);
+  }
   .-my-1\.5 {
     margin-block: calc(var(--spacing) * -1.5);
   }
@@ -476,6 +497,9 @@
   .-mt-36 {
     margin-top: calc(var(--spacing) * -36);
   }
+  .mt-0 {
+    margin-top: calc(var(--spacing) * 0);
+  }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
@@ -503,6 +527,9 @@
   .mt-10 {
     margin-top: calc(var(--spacing) * 10);
   }
+  .mt-auto {
+    margin-top: auto;
+  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
@@ -593,6 +620,10 @@
   .table {
     display: table;
   }
+  .size-3 {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
   .size-3\.5 {
     width: calc(var(--spacing) * 3.5);
     height: calc(var(--spacing) * 3.5);
@@ -762,6 +793,9 @@
   .max-w-6xl {
     max-width: var(--container-6xl);
   }
+  .max-w-7xl {
+    max-width: var(--container-7xl);
+  }
   .max-w-48 {
     max-width: calc(var(--spacing) * 48);
   }
@@ -841,6 +875,10 @@
   .origin-top-right {
     transform-origin: 100% 0;
   }
+  .-translate-x-1 {
+    --tw-translate-x: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -861,6 +899,10 @@
     --tw-translate-x: 100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-1 {
+    --tw-translate-y: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -930,6 +972,9 @@
   .flex-wrap {
     flex-wrap: wrap;
   }
+  .items-baseline {
+    align-items: baseline;
+  }
   .items-center {
     align-items: center;
   }
@@ -986,6 +1031,13 @@
       margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-3 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-4 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1000,6 +1052,9 @@
       margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .gap-x-1 {
+    column-gap: calc(var(--spacing) * 1);
+  }
   .gap-x-1\.5 {
     column-gap: calc(var(--spacing) * 1.5);
   }
@@ -1168,6 +1223,10 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 2px;
   }
+  .border-l {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+  }
   .border-l-4 {
     border-left-style: var(--tw-border-style);
     border-left-width: 4px;
@@ -1191,6 +1250,9 @@
   .border-blue-600 {
     border-color: var(--color-blue-600);
   }
+  .border-fuchsia-200 {
+    border-color: var(--color-fuchsia-200);
+  }
   .border-gray-100 {
     border-color: var(--color-gray-100);
   }
@@ -1206,12 +1268,18 @@
   .border-gray-700 {
     border-color: var(--color-gray-700);
   }
+  .border-green-200 {
+    border-color: var(--color-green-200);
+  }
   .border-green-400 {
     border-color: var(--color-green-400);
   }
   .border-indigo-500 {
     border-color: var(--color-indigo-500);
   }
+  .border-purple-200 {
+    border-color: var(--color-purple-200);
+  }
   .border-red-200 {
     border-color: var(--color-red-200);
   }
@@ -1227,6 +1295,9 @@
   .border-yellow-400 {
     border-color: var(--color-yellow-400);
   }
+  .bg-black {
+    background-color: var(--color-black);
+  }
   .bg-black\/40 {
     background-color: color-mix(in srgb, #000 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1257,12 +1328,21 @@
   .bg-cyan-600 {
     background-color: var(--color-cyan-600);
   }
+  .bg-fuchsia-100 {
+    background-color: var(--color-fuchsia-100);
+  }
   .bg-fuchsia-600 {
     background-color: var(--color-fuchsia-600);
   }
   .bg-gray-50 {
     background-color: var(--color-gray-50);
   }
+  .bg-gray-50\/30 {
+    background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-50) 30%, transparent);
+    }
+  }
   .bg-gray-100 {
     background-color: var(--color-gray-100);
   }
@@ -1275,6 +1355,9 @@
   .bg-gray-400 {
     background-color: var(--color-gray-400);
   }
+  .bg-gray-500 {
+    background-color: var(--color-gray-500);
+  }
   .bg-gray-500\/75 {
     background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 75%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1338,6 +1421,9 @@
   .bg-sky-600 {
     background-color: var(--color-sky-600);
   }
+  .bg-slate-400 {
+    background-color: var(--color-slate-400);
+  }
   .bg-slate-400\/10 {
     background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1413,6 +1499,9 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .py-0 {
+    padding-block: calc(var(--spacing) * 0);
+  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -1443,6 +1532,9 @@
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
+  .pt-0 {
+    padding-top: calc(var(--spacing) * 0);
+  }
   .pt-0\.5 {
     padding-top: calc(var(--spacing) * 0.5);
   }
@@ -1585,6 +1677,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[10px\] {
+    font-size: 10px;
+  }
   .text-\[11px\] {
     font-size: 11px;
   }
@@ -1634,6 +1729,9 @@
   .break-words {
     overflow-wrap: break-word;
   }
+  .break-all {
+    word-break: break-all;
+  }
   .text-ellipsis {
     text-overflow: ellipsis;
   }
@@ -1655,6 +1753,9 @@
   .text-blue-600 {
     color: var(--color-blue-600);
   }
+  .text-blue-600\! {
+    color: var(--color-blue-600) !important;
+  }
   .text-blue-700 {
     color: var(--color-blue-700);
   }
@@ -1664,6 +1765,9 @@
   .text-cyan-600 {
     color: var(--color-cyan-600);
   }
+  .text-fuchsia-800 {
+    color: var(--color-fuchsia-800);
+  }
   .text-gray-200 {
     color: var(--color-gray-200);
   }
@@ -1784,6 +1888,9 @@
   .italic {
     font-style: italic;
   }
+  .underline {
+    text-decoration-line: underline;
+  }
   .placeholder-gray-400 {
     &::placeholder {
       color: var(--color-gray-400);
@@ -1865,6 +1972,9 @@
     --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-black {
+    --tw-ring-color: var(--color-black);
+  }
   .ring-black\/5 {
     --tw-ring-color: color-mix(in srgb, #000 5%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1886,6 +1996,9 @@
   .ring-indigo-500 {
     --tw-ring-color: var(--color-indigo-500);
   }
+  .inset-ring-gray-900 {
+    --tw-inset-ring-color: var(--color-gray-900);
+  }
   .inset-ring-gray-900\/5 {
     --tw-inset-ring-color: color-mix(in srgb, oklch(21% 0.034 264.665) 5%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3090,6 +3203,11 @@
       padding: calc(var(--spacing) * 4);
     }
   }
+  .md\:p-6 {
+    @media (width >= 48rem) {
+      padding: calc(var(--spacing) * 6);
+    }
+  }
   .lg\:fixed {
     @media (width >= 64rem) {
       position: fixed;
@@ -3264,6 +3382,11 @@
       border-color: var(--color-blue-800);
     }
   }
+  .dark\:border-fuchsia-800 {
+    &:where(.dark, .dark *) {
+      border-color: var(--color-fuchsia-800);
+    }
+  }
   .dark\:border-gray-600 {
     &:where(.dark, .dark *) {
       border-color: var(--color-gray-600);
@@ -3279,6 +3402,16 @@
       border-color: var(--color-gray-800);
     }
   }
+  .dark\:border-green-800 {
+    &:where(.dark, .dark *) {
+      border-color: var(--color-green-800);
+    }
+  }
+  .dark\:border-purple-800 {
+    &:where(.dark, .dark *) {
+      border-color: var(--color-purple-800);
+    }
+  }
   .dark\:border-red-600 {
     &:where(.dark, .dark *) {
       border-color: var(--color-red-600);
@@ -3335,6 +3468,14 @@
       }
     }
   }
+  .dark\:bg-blue-900\/40 {
+    &:where(.dark, .dark *) {
+      background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-blue-900) 40%, transparent);
+      }
+    }
+  }
   .dark\:bg-blue-900\/50 {
     &:where(.dark, .dark *) {
       background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 50%, transparent);
@@ -3353,6 +3494,14 @@
       background-color: var(--color-cyan-600);
     }
   }
+  .dark\:bg-fuchsia-900\/40 {
+    &:where(.dark, .dark *) {
+      background-color: color-mix(in srgb, oklch(40.1% 0.17 325.612) 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-fuchsia-900) 40%, transparent);
+      }
+    }
+  }
   .dark\:bg-gray-200 {
     &:where(.dark, .dark *) {
       background-color: var(--color-gray-200);
@@ -3373,6 +3522,14 @@
       background-color: var(--color-gray-700);
     }
   }
+  .dark\:bg-gray-700\/30 {
+    &:where(.dark, .dark *) {
+      background-color: color-mix(in srgb, oklch(37.3% 0.034 259.733) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-gray-700) 30%, transparent);
+      }
+    }
+  }
   .dark\:bg-gray-800 {
     &:where(.dark, .dark *) {
       background-color: var(--color-gray-800);
@@ -3409,6 +3566,14 @@
       }
     }
   }
+  .dark\:bg-green-900\/40 {
+    &:where(.dark, .dark *) {
+      background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-green-900) 40%, transparent);
+      }
+    }
+  }
   .dark\:bg-green-900\/50 {
     &:where(.dark, .dark *) {
       background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 50%, transparent);
@@ -3524,6 +3689,11 @@
       color: var(--color-blue-300);
     }
   }
+  .dark\:text-blue-300\! {
+    &:where(.dark, .dark *) {
+      color: var(--color-blue-300) !important;
+    }
+  }
   .dark\:text-blue-400 {
     &:where(.dark, .dark *) {
       color: var(--color-blue-400);
@@ -3534,6 +3704,11 @@
       color: var(--color-cyan-400);
     }
   }
+  .dark\:text-fuchsia-300 {
+    &:where(.dark, .dark *) {
+      color: var(--color-fuchsia-300);
+    }
+  }
   .dark\:text-gray-50 {
     &:where(.dark, .dark *) {
       color: var(--color-gray-50);
@@ -3577,6 +3752,11 @@
       color: var(--color-gray-600);
     }
   }
+  .dark\:text-gray-700 {
+    &:where(.dark, .dark *) {
+      color: var(--color-gray-700);
+    }
+  }
   .dark\:text-green-100 {
     &:where(.dark, .dark *) {
       color: var(--color-green-100);
@@ -4271,6 +4451,9 @@
   *, ::after, ::before, ::backdrop, ::file-selector-button {
     border-color: hsl(var(--border));
   }
+  .reasoning .prose-xs p, .reasoning .prose-xs li {
+    font-size: 13px;
+  }
 }
 @layer base {
   [v-cloak] {
@@ -4356,6 +4539,18 @@
     background-color: #f9fafb;
     font-weight: 600;
   }
+  .tool-arguments, .tool-output {
+    margin: 0 !important;
+    padding: 0 !important;
+    background-color: transparent !important;
+    color: inherit !important;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
+    font-size: 0.75rem !important;
+    white-space: pre-wrap !important;
+    word-break: break-all !important;
+    border: none !important;
+    border-radius: 0 !important;
+  }
   .hljs {
     background: white;
     color: black;

llms/ui/ctx.mjs

@@ -11,12 +11,13 @@ export class ExtensionScope {
         this.baseUrl = `${ctx.ai.base}/ext/${this.id}`
         this.storageKey = `llms.${this.id}`
         this.state = reactive({})
+        this.prefs = reactive(storageObject(this.storageKey))
     }
     getPrefs() {
-        return storageObject(this.storageKey)
+        return this.prefs
     }
     setPrefs(o) {
-        storageObject(this.storageKey, Object.assign(this.getPrefs(), o))
+        storageObject(this.storageKey, Object.assign(this.prefs, o))
     }
     get(url, options) {
         return this.ctx.ai.get(combinePaths(this.baseUrl, url), options)
@@ -45,7 +46,6 @@ export class AppContext {
         this.events = new EventBus()
         this.modalComponents = {}
         this.extensions = []
-        this.layout = reactive(storageObject(`llms.layout`))
         this.chatRequestFilters = []
         this.chatResponseFilters = []
         this.chatErrorFilters = []
@@ -53,12 +53,15 @@ export class AppContext {
         this.updateThreadFilters = []
         this.top = {}
         this.left = {}
+        this.layout = reactive(storageObject(`llms.layout`))
+        this.prefs = reactive(storageObject(ai.prefsKey))
 
         if (!Array.isArray(this.layout.hide)) {
             this.layout.hide = []
         }
         Object.assign(app.config.globalProperties, {
             $ctx: this,
+            $prefs: this.prefs,
             $state: this.state,
             $layout: this.layout,
             $ai: ai,
@@ -80,6 +83,12 @@ export class AppContext {
             this[name] = global
         })
     }
+    getPrefs() {
+        return this.prefs
+    }
+    setPrefs(o) {
+        storageObject(this.ai.prefsKey, Object.assign(this.prefs, o))
+    }
     _validateIcons(icons) {
         Object.entries(icons).forEach(([id, icon]) => {
             if (!icon.component) {
@@ -173,12 +182,6 @@ export class AppContext {
     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
@@ -193,4 +196,10 @@ export class AppContext {
             this.router.push({ path })
         }
     }
+    getJson(url, options) {
+        return this.ai.getJson(url, options)
+    }
+    postJson(url, options) {
+        return this.ai.postJson(url, options)
+    }
 }

llms/ui/index.mjs

@@ -9,6 +9,7 @@ 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 ToolsModule from './modules/tools.mjs'
 import { utilsFunctions, utilsFormatters } from './utils.mjs'
 import { markdownFormatters } from './markdown.mjs'
 import { AppContext } from './ctx.mjs'
@@ -22,6 +23,7 @@ const BuiltInModules = {
     ThreadsModule,
     ModelSelectorModule,
     AnalyticsModule,
+    ToolsModule,
 }
 
 
@@ -53,10 +55,13 @@ export async function createContext() {
         }
     }))
 
+    const installedModules = []
+
     // Install built-in modules sequentially
     Object.entries(BuiltInModules).forEach(([name, module]) => {
         try {
             module.install(ctx)
+            installedModules.push({ extension: { id: name }, module: { default: module } })
             console.log(`Installed built-in: ${name}`)
         } catch (e) {
             console.error(`Failed to install built-in ${name}:`, e)
@@ -68,6 +73,7 @@ export async function createContext() {
         if (result && result.module.default && result.module.default.install) {
             try {
                 result.module.default.install(ctx)
+                installedModules.push(result)
                 console.log(`Installed extension: ${result.extension.id}`)
             } catch (e) {
                 console.error(`Failed to install extension ${result.extension.id}:`, e)
@@ -103,8 +109,11 @@ export async function createContext() {
         ctx.router.push({ path: ctx.layout.path })
     }
 
+    const loadModules = installedModules.filter(x => x.module.default && x.module.default.load)
+    console.log('Loading modules: ', loadModules.map(x => x.extension.id))
+
     // Load all extensions in parallel
-    await Promise.all(ctx.modules.filter(x => x.module.default && x.module.default.load).map(async result => {
+    await Promise.all(loadModules.map(async result => {
         try {
             await result.module.default.load(ctx)
             console.log(`Loaded extension: ${result.extension.id}`)