llms-py 3.0.13__py3-none-any.whl → 3.0.15__py3-none-any.whl

llms/main.py

@@ -26,11 +26,24 @@ import sys
 import time
 import traceback
 from datetime import datetime
-from enum import IntEnum
+from enum import Enum, IntEnum
 from importlib import resources  # Py≥3.9  (pip install importlib_resources for 3.7/3.8)
 from io import BytesIO
 from pathlib import Path
-from typing import Any, Callable, Dict, List, Optional, Tuple, Union, get_type_hints
+from typing import (
+    Annotated,
+    Any,
+    Callable,
+    Dict,
+    List,
+    Literal,
+    Optional,
+    Tuple,
+    Union,
+    get_args,
+    get_origin,
+    get_type_hints,
+)
 from urllib.parse import parse_qs, urlencode, urljoin
 
 import aiohttp
@@ -43,7 +56,7 @@ try:
 except ImportError:
     HAS_PIL = False
 
-VERSION = "3.0.13"
+VERSION = "3.0.15"
 _ROOT = None
 DEBUG = os.getenv("DEBUG") == "1"
 MOCK = os.getenv("MOCK") == "1"
@@ -348,22 +361,75 @@ def to_content(result):
         return str(result)
 
 
+def get_literal_values(typ):
+    """Recursively extract values from Literal and Union types."""
+    origin = get_origin(typ)
+    if origin is Literal:
+        return list(get_args(typ))
+    elif origin is Union:
+        values = []
+        for arg in get_args(typ):
+            # Recurse for nested Unions or Literals
+            nested_values = get_literal_values(arg)
+            if nested_values:
+                for v in nested_values:
+                    if v not in values:
+                        values.append(v)
+        return values
+    return None
+
+
 def function_to_tool_definition(func):
-    type_hints = get_type_hints(func)
+    type_hints = get_type_hints(func, include_extras=True)
     signature = inspect.signature(func)
     parameters = {"type": "object", "properties": {}, "required": []}
 
     for name, param in signature.parameters.items():
         param_type = type_hints.get(name, str)
         param_type_name = "string"
-        if param_type is int:
+        enum_values = None
+        description = None
+
+        # Check for Annotated (for description)
+        if get_origin(param_type) is Annotated:
+            args = get_args(param_type)
+            param_type = args[0]
+            for arg in args[1:]:
+                if isinstance(arg, str):
+                    description = arg
+                    break
+
+        # Check for Enum
+        if inspect.isclass(param_type) and issubclass(param_type, Enum):
+            enum_values = [e.value for e in param_type]
+        else:
+            # Check for Literal / Union[Literal]
+            enum_values = get_literal_values(param_type)
+
+        if enum_values:
+            # Infer type from the first value
+            value_type = type(enum_values[0])
+            if value_type is int:
+                param_type_name = "integer"
+            elif value_type is float:
+                param_type_name = "number"
+            elif value_type is bool:
+                param_type_name = "boolean"
+
+        elif param_type is int:
             param_type_name = "integer"
         elif param_type is float:
             param_type_name = "number"
         elif param_type is bool:
             param_type_name = "boolean"
 
-        parameters["properties"][name] = {"type": param_type_name}
+        prop = {"type": param_type_name}
+        if description:
+            prop["description"] = description
+        if enum_values:
+            prop["enum"] = enum_values
+        parameters["properties"][name] = prop
+
         if param.default == inspect.Parameter.empty:
             parameters["required"].append(name)
 
@@ -371,7 +437,7 @@ def function_to_tool_definition(func):
         "type": "function",
         "function": {
             "name": func.__name__,
-            "description": func.__doc__ or "",
+            "description": (func.__doc__ or "").strip(),
             "parameters": parameters,
         },
     }
@@ -791,7 +857,7 @@ def chat_to_prompt(chat):
     prompt = ""
     if "messages" in chat:
         for message in chat["messages"]:
-            if message["role"] == "user":
+            if message.get("role") == "user":
                 # if content is string
                 if isinstance(message["content"], str):
                     if prompt:
@@ -810,7 +876,7 @@ def chat_to_prompt(chat):
 def chat_to_system_prompt(chat):
     if "messages" in chat:
         for message in chat["messages"]:
-            if message["role"] == "system":
+            if message.get("role") == "system":
                 # if content is string
                 if isinstance(message["content"], str):
                     return message["content"]
@@ -838,7 +904,7 @@ def last_user_prompt(chat):
     prompt = ""
     if "messages" in chat:
         for message in chat["messages"]:
-            if message["role"] == "user":
+            if message.get("role") == "user":
                 # if content is string
                 if isinstance(message["content"], str):
                     prompt = message["content"]
@@ -1585,6 +1651,9 @@ async def g_chat_completion(chat, context=None):
         if context is None:
             context = {"chat": chat, "tools": "all"}
 
+        if "request_id" not in context:
+            context["request_id"] = str(int(time.time() * 1000))
+
         # get first provider that has the model
         candidate_providers = [name for name, provider in g_handlers.items() if provider.provider_model(model)]
         if len(candidate_providers) == 0:
@@ -1736,7 +1805,12 @@ async def g_chat_completion(chat, context=None):
             continue
 
     # If we get here, all providers failed
-    raise first_exception
+    if first_exception:
+        raise first_exception
+
+    e = Exception("All providers failed")
+    await g_app.on_chat_error(e, context or {"chat": chat})
+    raise e
 
 
 async def cli_chat(chat, tools=None, image=None, audio=None, file=None, args=None, raw=False):
@@ -2918,6 +2992,9 @@ class ExtensionContext:
     def add_index_footer(self, html: str):
         self.app.index_footers.append(html)
 
+    def get_home_path(self, name: str = "") -> str:
+        return home_llms_path(name)
+
     def get_config(self) -> Optional[Dict[str, Any]]:
         return g_config
 

llms/ui/ai.mjs

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

llms/ui/app.css

@@ -427,6 +427,9 @@
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
+  .right-3 {
+    right: calc(var(--spacing) * 3);
+  }
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
@@ -622,6 +625,12 @@
   .-mb-px {
     margin-bottom: -1px;
   }
+  .mb-0 {
+    margin-bottom: calc(var(--spacing) * 0);
+  }
+  .mb-0\.5 {
+    margin-bottom: calc(var(--spacing) * 0.5);
+  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -899,6 +908,9 @@
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
+  .w-28 {
+    width: calc(var(--spacing) * 28);
+  }
   .w-32 {
     width: calc(var(--spacing) * 32);
   }
@@ -1667,6 +1679,12 @@
       background-color: color-mix(in oklab, var(--color-gray-50) 50%, transparent);
     }
   }
+  .bg-gray-50\/90 {
+    background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 90%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-50) 90%, transparent);
+    }
+  }
   .bg-gray-100 {
     background-color: var(--color-gray-100);
   }
@@ -2506,6 +2524,10 @@
     --tw-ordinal: ordinal;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
+  .tabular-nums {
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
   .overline {
     text-decoration-line: overline;
   }
@@ -4888,6 +4910,14 @@
       }
     }
   }
+  .dark\:bg-gray-800\/90 {
+    &:where(.dark, .dark *) {
+      background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 90%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-gray-800) 90%, transparent);
+      }
+    }
+  }
   .dark\:bg-gray-900 {
     &:where(.dark, .dark *) {
       background-color: var(--color-gray-900);
@@ -6282,6 +6312,15 @@
     border-radius: 0 !important;
     overflow: auto !important;
   }
+  .prose .frontmatter {
+    white-space: pre-wrap;
+    word-break: break-all;
+    margin-bottom: 1em;
+    padding: 0.5rem;
+    font-size: 0.8rem !important;
+    background: #f9fafb;
+    border: 1px solid #e5e7eb;
+  }
   .hljs {
     background: white;
     color: black;

llms/ui/ctx.mjs

@@ -392,12 +392,11 @@ export class AppContext {
         if (Array.isArray(content)) {
             content = content.filter(c => c.type === 'text').map(c => c.text).join('\n')
         }
-        // Handled by katex
-        // if (content) {
-        //     content = content
-        //         .replaceAll(`\\[ \\boxed{`, '\n<span class="inline-block text-xl text-blue-500 bg-blue-50 dark:text-blue-400 dark:bg-blue-950 px-3 py-1 rounded">')
-        //         .replaceAll('} \\]', '</span>\n')
-        // }
+        if (content && content.startsWith('---')) {
+            const headerEnd = content.indexOf('---', 3)
+            const header = content.substring(3, headerEnd).trim()
+            content = '<div class="frontmatter">' + header + '</div>\n' + content.substring(headerEnd + 3)
+        }
         return this.marked.parse(content || '')
     }
 
@@ -409,4 +408,52 @@ export class AppContext {
         }
         return this.renderMarkdown(content)
     }
+
+    createChatContext({ request, thread, context }) {
+        if (!request.messages) request.messages = []
+        if (!request.metadata) request.metadata = {}
+        if (!context) context = {}
+        Object.assign(context, {
+            systemPrompt: '',
+            requiredSystemPrompts: [],
+        }, context)
+        return {
+            request,
+            thread,
+            context,
+        }
+    }
+
+    completeChatContext({ request, thread, context }) {
+
+        let existingSystemPrompt = request.messages.find(m => m.role === 'system')?.content
+
+        let existingMessages = request.messages.filter(m => m.role == 'assistant' || m.role == 'tool')
+        if (existingMessages.length) {
+            const messageTypes = {}
+            request.messages.forEach(m => {
+                messageTypes[m.role] = (messageTypes[m.role] || 0) + 1
+            })
+            const summary = JSON.stringify(messageTypes).replace(/"/g, '')
+            console.debug(`completeChatContext(${summary})`, request)
+            return
+        }
+
+        let newSystemPrompts = context.requiredSystemPrompts ?? []
+        if (context.systemPrompt) {
+            newSystemPrompts.push(context.systemPrompt)
+        }
+        if (existingSystemPrompt) {
+            newSystemPrompts.push(existingSystemPrompt)
+        }
+
+        let newSystemPrompt = newSystemPrompts.join('\n\n')
+        if (newSystemPrompt) {
+            // add or replace system prompt
+            request.messages = request.messages.filter(m => m.role !== 'system')
+            request.messages.unshift({ role: 'system', content: newSystemPrompt })
+        }
+
+        console.debug(`completeChatContext()`, request)
+    }
 }

llms/ui/modules/chat/ChatBody.mjs

@@ -55,8 +55,8 @@ function embedHtml(html) {
 
 export const TypeText = {
     template: `
-        <div v-if="text.type === 'text'">
-            <div v-html="html?.trim()" class="whitespace-pre-wrap"></div>
+        <div data-type="text" v-if="text.type === 'text'">
+            !<div v-html="html?.trim()" class="whitespace-pre-wrap"></div>
         </div>
     `,
     props: {
@@ -161,7 +161,7 @@ export const LightboxImage = {
 
 export const TypeImage = {
     template: `
-        <div v-if="image.type === 'image_url'">
+        <div data-type="image" v-if="image.type === 'image_url'">
             <LightboxImage :src="$ctx.resolveUrl(image.image_url.url)" />
         </div>
     `,
@@ -175,7 +175,7 @@ export const TypeImage = {
 
 export const TypeAudio = {
     template: `
-        <div v-if="audio.type === 'audio_url'">
+        <div data-type="audio" v-if="audio.type === 'audio_url'">
             <slot></slot>
             <audio controls :src="$ctx.resolveUrl(audio.audio_url.url)" class="h-8 w-64"></audio>
         </div>
@@ -190,7 +190,7 @@ export const TypeAudio = {
 
 export const TypeFile = {
     template: `
-        <a v-if="file.type === 'file'" :href="$ctx.resolveUrl(file.file.file_data)" target="_blank" 
+        <a data-type="file" v-if="file.type === 'file'" :href="$ctx.resolveUrl(file.file.file_data)" target="_blank" 
             class="flex items-center gap-2 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-sm text-blue-600 dark:text-blue-400 hover:underline">
             <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
             <span class="max-w-xs truncate">{{ file.file.filename || 'Attachment' }}</span>
@@ -211,7 +211,7 @@ export const ViewType = {
         <TypeImage v-else-if="result.type === 'image_url'" :image="result" />
         <TypeAudio v-else-if="result.type === 'audio_url'" :audio="result" />
         <TypeFile v-else-if="result.type === 'file'" :file="result" />
-        <div v-else>
+        <div data-type="other" v-else>
             <HtmlFormat :value="result" :classes="$utils.htmlFormatClasses" />
         </div>
     </div>
@@ -346,17 +346,138 @@ export const MessageReasoning = {
     }
 }
 
+export const TextViewer = {
+    template: `
+        <div v-if="text.length > 200" class="relative group">
+            <div class="absolute top-0 right-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center space-x-2 bg-gray-50/90 dark:bg-gray-800/90 backdrop-blur-sm rounded-md px-2 py-1 z-10 border border-gray-200 dark:border-gray-700 shadow-sm">
+                <!-- Style Selector -->
+                <div class="relative flex items-center">
+                    <button type="button" @click="toggleDropdown" class="text-[10px] uppercase font-bold tracking-wider text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none flex items-center select-none">
+                        <span>{{ prefs || 'pre' }}</span>
+                        <svg class="mb-0.5 size-3 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg>
+                    </button>
+                    <!-- Popover -->
+                    <div v-if="dropdownOpen" class="absolute right-0 top-full w-28 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 py-1 z-20 overflow-hidden">
+                        <button 
+                            v-for="style in textStyles" 
+                            :key="style"
+                            @click="setStyle(style)"
+                            class="block w-full text-left px-3 py-1.5 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors uppercase tracking-wider font-medium"
+                            :class="{ 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20': prefs === style }"
+                        >
+                            {{ style }}
+                        </button>
+                    </div>
+                </div>
+
+                <div class="w-px h-3 bg-gray-300 dark:bg-gray-600"></div>
+
+                <!-- Text Length -->
+                <span class="text-xs text-gray-500 dark:text-gray-400 tabular-nums" :title="text.length + ' characters'">
+                    {{ $fmt.humanifyNumber(text.length) }}
+                </span>
+
+                <!-- Maximize Toggle -->
+                <button type="button" @click="toggleMaximized" class="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 focus:outline-none p-0.5 rounded transition-colors" :title="isMaximized ? 'Minimize' : 'Maximize'">
+                    <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                        <path v-if="isMaximized" fill="currentColor" d="M9 9H3V7h4V3h2zm0 6H3v2h4v4h2zm12 0h-6v6h2v-4h4zm-6-6h6V7h-4V3h-2z"/>
+                        <path v-else fill="currentColor" d="M3 3h6v2H5v4H3zm0 18h6v-2H5v-4H3zm12 0h6v-6h-2v4h-4zm6-18h-6v2h4v4h2z"/>
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Content -->
+            <div :class="containerClass">
+                <div v-if="prefs === 'markdown'" class="prose prose-sm max-w-none dark:prose-invert">
+                    <div v-html="$fmt.markdown(text)"></div>
+                </div>
+                <div v-else :class="['p-0.5', contentClass]">{{ text }}</div>
+            </div>
+        </div>
+        <div v-else class="whitespace-pre-wrap">{{ text }}</div>    
+    `,
+    props: {
+        prefsName: String,
+        text: String,
+    },
+    setup(props) {
+        const ctx = inject('ctx')
+        const textStyles = ['pre', 'normal', 'markdown']
+        const prefs = ref('pre')
+        const maximized = ref({})
+        const dropdownOpen = ref(false)
+        const hash = computed(() => ctx.utils.hashString(props.text))
+
+        const toggleDropdown = () => {
+            dropdownOpen.value = !dropdownOpen.value
+        }
+
+        const setStyle = (style) => {
+            prefs.value = style
+            dropdownOpen.value = false
+            const key = props.prefsName || 'default'
+            const currentPrefs = ctx.getPrefs().textStyle || {}
+            ctx.setPrefs({
+                textStyle: {
+                    ...currentPrefs,
+                    [key]: style
+                }
+            })
+        }
+
+        onMounted(() => {
+            const current = ctx.getPrefs()
+            const key = props.prefsName || 'default'
+            if (current.textStyle && current.textStyle[key]) {
+                prefs.value = current.textStyle[key]
+            }
+        })
+
+        const isMaximized = computed(() => maximized.value[hash.value])
+
+        const toggleMaximized = () => {
+            maximized.value[hash.value] = !maximized.value[hash.value]
+        }
+
+        const containerClass = computed(() => {
+            return isMaximized.value ? 'w-full h-full' : 'max-h-60 overflow-y-auto'
+        })
+
+        const contentClass = computed(() => {
+            if (prefs.value === 'pre') return 'whitespace-pre-wrap font-mono text-xs'
+            if (prefs.value === 'normal') return 'font-sans text-sm'
+            return ''
+        })
+
+        return {
+            hash,
+            textStyles,
+            prefs,
+            dropdownOpen,
+            toggleDropdown,
+            setStyle,
+            isMaximized,
+            toggleMaximized,
+            containerClass,
+            contentClass
+        }
+    }
+}
+
 export const ToolArguments = {
     template: `
         <div ref="refArgs" v-if="dict" class="not-prose">
             <div class="prose html-format">
                 <table class="table-object border-none">
                     <tr v-for="(v, k) in dict" :key="k">
-                        <td class="align-top py-2 px-4 text-left text-sm font-medium tracking-wider whitespace-nowrap lowercase">{{ k }}</td>
-                        <td v-if="$utils.isHtml(v)" style="margin:0;padding:0;width:100%">
+                        <td data-arg="name" class="align-top py-2 px-4 text-left text-sm font-medium tracking-wider whitespace-nowrap lowercase">{{ k }}</td>
+                        <td data-arg="html" v-if="$utils.isHtml(v)" style="margin:0;padding:0;width:100%">
                             <div v-html="embedHtml(v)" class="w-full h-full"></div>
                         </td>
-                        <td v-else class="align-top py-2 px-4 text-sm whitespace-pre-wrap">
+                        <td data-arg="string" v-else-if="typeof v === 'string'" class="align-top py-2 px-4 text-sm">
+                            <TextViewer prefsName="toolArgs" :text="v" />
+                        </td>
+                        <td data-arg="value" v-else class="align-top py-2 px-4 text-sm whitespace-pre-wrap">
                             <HtmlFormat :value="v" :classes="$utils.htmlFormatClasses" />
                         </td>
                     </tr>
@@ -373,6 +494,7 @@ export const ToolArguments = {
     },
     setup(props) {
         const refArgs = ref()
+        const maximized = ref({})
         const dict = computed(() => {
             if (isEmpty(props.value)) return null
             const ret = tryParseJson(props.value)
@@ -409,6 +531,7 @@ export const ToolArguments = {
 
         return {
             refArgs,
+            maximized,
             dict,
             list,
             isEmpty,
@@ -439,9 +562,11 @@ export const ToolOutput = {
                     </span>
                 </div>
             </div>
-            <div class="not-prose px-3 py-2">
-                <pre v-if="$ctx.prefs.toolFormat !== 'preview' || !hasJsonStructure(output.content)" class="tool-output">{{ output.content }}</pre>
-                <div v-else class="text-xs">
+            <div class="px-3 py-2">
+                <div v-if="$ctx.prefs.toolFormat !== 'preview' || !hasJsonStructure(output.content)">
+                    <TextViewer prefsName="toolOutput" :text="output.content" />
+                </div>
+                <div v-else class="not-prose text-xs">
                     <HtmlFormat v-if="tryParseJson(output.content)" :value="tryParseJson(output.content)" :classes="$utils.htmlFormatClasses" />
                     <div v-else class="text-gray-500 italic p-2">Invalid JSON content</div>
                 </div>
@@ -524,7 +649,7 @@ export const ChatBody = {
                                         : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700'"
                                 >
                                     <!-- Copy button in top right corner -->
-                                    <button
+                                    <button v-if="message.content"
                                         type="button"
                                         @click="copyMessageContent(message)"
                                         class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 p-1 rounded hover:bg-black/10 dark:hover:bg-white/10 focus:outline-none focus:ring-0"

llms/ui/modules/chat/index.mjs

@@ -2,7 +2,7 @@
 import { ref, watch, computed, nextTick, inject } from 'vue'
 import { $$, createElement, lastRightPart, ApiResult, createErrorStatus } from "@servicestack/client"
 import SettingsDialog, { useSettings } from './SettingsDialog.mjs'
-import { ChatBody, LightboxImage, TypeText, TypeImage, TypeAudio, TypeFile, ViewType, ViewTypes, ViewToolTypes, ToolArguments, ToolOutput, MessageUsage, MessageReasoning } from './ChatBody.mjs'
+import { ChatBody, LightboxImage, TypeText, TypeImage, TypeAudio, TypeFile, ViewType, ViewTypes, ViewToolTypes, TextViewer, ToolArguments, ToolOutput, MessageUsage, MessageReasoning } from './ChatBody.mjs'
 import { AppContext } from '../../ctx.mjs'
 
 const imageExts = 'png,webp,jpg,jpeg,gif,bmp,svg,tiff,ico'.split(',')
@@ -252,23 +252,14 @@ export function useChatPrompt(ctx) {
                 return ctx.createErrorResult({ message: `Model ${request.model || ''} not found`, errorCode: 'NotFound' })
             }
 
-            if (!request.messages) request.messages = []
-            if (!request.metadata) request.metadata = {}
-
             if (!thread) {
                 const title = getTextContent(request) || 'New Chat'
                 thread = await ctx.threads.startNewThread({ title, model, redirect })
             }
 
-            const threadId = thread?.id
-
-            const ctxRequest = {
-                request,
-                thread,
-            }
+            const ctxRequest = ctx.createChatContext({ request, thread })
             ctx.chatRequestFilters.forEach(f => f(ctxRequest))
-
-            console.debug('completion.request', request)
+            ctx.completeChatContext(ctxRequest)
 
             // Send to API
             const startTime = Date.now()
@@ -935,6 +926,7 @@ export default {
             ViewType,
             ViewTypes,
             ViewToolTypes,
+            TextViewer,
             ToolArguments,
             ToolOutput,
 

llms/ui/tailwind.input.css

@@ -166,6 +166,16 @@
         overflow: auto !important;
     }
 
+    .prose .frontmatter {
+        white-space: pre-wrap;
+        word-break: break-all;
+        margin-bottom: 1em;
+        padding: 0.5rem;
+        font-size: 0.8rem !important;
+        background: #f9fafb;
+        border: 1px solid #e5e7eb;
+    }
+
     /* highlight.js - vs.css */
     .hljs {
         background: white;

llms/ui/utils.mjs

@@ -211,6 +211,19 @@ export function isHtml(s) {
     return isHtml
 }
 
+const htmlEntities = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;'
+}
+
+export function encodeHtml(str) {
+    if (!str) return ''
+    return str.replace(/[&<>"']/g, m => htmlEntities[m]);
+}
+
 /**
  * @param {object|array} type 
  * @param {'div'|'table'|'thead'|'th'|'tr'|'td'} tag 
@@ -241,6 +254,16 @@ export const nextId = (() => {
     }
 })();
 
+export function fnv1a(str) {
+    let hash = 0x811c9dc5
+    for (let i = 0; i < str.length; i++) {
+        hash ^= str.charCodeAt(i)
+        hash = Math.imul(hash, 0x01000193)
+    }
+    return hash >>> 0
+}
+export const hashString = fnv1a
+
 export function utilsFunctions() {
     return {
         nextId,
@@ -256,6 +279,7 @@ export function utilsFunctions() {
         pluralize,
         isHtml,
         htmlFormatClasses,
+        encodeHtml,
+        hashString,
     }
 }
-