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

llms/extensions/skills/validator.py

@@ -0,0 +1,177 @@
+"""Skill validation logic."""
+
+import unicodedata
+from pathlib import Path
+from typing import Optional
+
+from .errors import ParseError
+from .parser import find_skill_md, parse_frontmatter
+
+MAX_SKILL_NAME_LENGTH = 64
+MAX_DESCRIPTION_LENGTH = 1024
+MAX_COMPATIBILITY_LENGTH = 500
+
+# Allowed frontmatter fields per Agent Skills Spec
+ALLOWED_FIELDS = {
+    "name",
+    "description",
+    "license",
+    "allowed-tools",
+    "metadata",
+    "compatibility",
+}
+
+
+def _validate_name(name: str, skill_dir: Path) -> list[str]:
+    """Validate skill name format and directory match.
+
+    Skill names support i18n characters (Unicode letters) plus hyphens.
+    Names must be lowercase and cannot start/end with hyphens.
+    """
+    errors = []
+
+    if not name or not isinstance(name, str) or not name.strip():
+        errors.append("Field 'name' must be a non-empty string")
+        return errors
+
+    name = unicodedata.normalize("NFKC", name.strip())
+
+    if len(name) > MAX_SKILL_NAME_LENGTH:
+        errors.append(
+            f"Skill name '{name}' exceeds {MAX_SKILL_NAME_LENGTH} character limit "
+            f"({len(name)} chars)"
+        )
+
+    if name != name.lower():
+        errors.append(f"Skill name '{name}' must be lowercase")
+
+    if name.startswith("-") or name.endswith("-"):
+        errors.append("Skill name cannot start or end with a hyphen")
+
+    if "--" in name:
+        errors.append("Skill name cannot contain consecutive hyphens")
+
+    if not all(c.isalnum() or c == "-" for c in name):
+        errors.append(
+            f"Skill name '{name}' contains invalid characters. "
+            "Only letters, digits, and hyphens are allowed."
+        )
+
+    if skill_dir:
+        dir_name = unicodedata.normalize("NFKC", skill_dir.name)
+        if dir_name != name:
+            errors.append(
+                f"Directory name '{skill_dir.name}' must match skill name '{name}'"
+            )
+
+    return errors
+
+
+def _validate_description(description: str) -> list[str]:
+    """Validate description format."""
+    errors = []
+
+    if not description or not isinstance(description, str) or not description.strip():
+        errors.append("Field 'description' must be a non-empty string")
+        return errors
+
+    if len(description) > MAX_DESCRIPTION_LENGTH:
+        errors.append(
+            f"Description exceeds {MAX_DESCRIPTION_LENGTH} character limit "
+            f"({len(description)} chars)"
+        )
+
+    return errors
+
+
+def _validate_compatibility(compatibility: str) -> list[str]:
+    """Validate compatibility format."""
+    errors = []
+
+    if not isinstance(compatibility, str):
+        errors.append("Field 'compatibility' must be a string")
+        return errors
+
+    if len(compatibility) > MAX_COMPATIBILITY_LENGTH:
+        errors.append(
+            f"Compatibility exceeds {MAX_COMPATIBILITY_LENGTH} character limit "
+            f"({len(compatibility)} chars)"
+        )
+
+    return errors
+
+
+def _validate_metadata_fields(metadata: dict) -> list[str]:
+    """Validate that only allowed fields are present."""
+    errors = []
+
+    extra_fields = set(metadata.keys()) - ALLOWED_FIELDS
+    if extra_fields:
+        errors.append(
+            f"Unexpected fields in frontmatter: {', '.join(sorted(extra_fields))}. "
+            f"Only {sorted(ALLOWED_FIELDS)} are allowed."
+        )
+
+    return errors
+
+
+def validate_metadata(metadata: dict, skill_dir: Optional[Path] = None) -> list[str]:
+    """Validate parsed skill metadata.
+
+    This is the core validation function that works on already-parsed metadata,
+    avoiding duplicate file I/O when called from the parser.
+
+    Args:
+        metadata: Parsed YAML frontmatter dictionary
+        skill_dir: Optional path to skill directory (for name-directory match check)
+
+    Returns:
+        List of validation error messages. Empty list means valid.
+    """
+    errors = []
+    errors.extend(_validate_metadata_fields(metadata))
+
+    if "name" not in metadata:
+        errors.append("Missing required field in frontmatter: name")
+    else:
+        errors.extend(_validate_name(metadata["name"], skill_dir))
+
+    if "description" not in metadata:
+        errors.append("Missing required field in frontmatter: description")
+    else:
+        errors.extend(_validate_description(metadata["description"]))
+
+    if "compatibility" in metadata:
+        errors.extend(_validate_compatibility(metadata["compatibility"]))
+
+    return errors
+
+
+def validate(skill_dir: Path) -> list[str]:
+    """Validate a skill directory.
+
+    Args:
+        skill_dir: Path to the skill directory
+
+    Returns:
+        List of validation error messages. Empty list means valid.
+    """
+    skill_dir = Path(skill_dir)
+
+    if not skill_dir.exists():
+        return [f"Path does not exist: {skill_dir}"]
+
+    if not skill_dir.is_dir():
+        return [f"Not a directory: {skill_dir}"]
+
+    skill_md = find_skill_md(skill_dir)
+    if skill_md is None:
+        return ["Missing required file: SKILL.md"]
+
+    try:
+        content = skill_md.read_text()
+        metadata, _ = parse_frontmatter(content)
+    except ParseError as e:
+        return [str(e)]
+
+    return validate_metadata(metadata, skill_dir)

llms/extensions/system_prompts/ui/index.mjs

@@ -163,7 +163,7 @@ const SystemPromptEditor = {
                 </div>
             </div>
             <div v-if="hasMessages" class="w-full 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">
-                {{$threads.currentThread.value?.systemPrompt || 'No System Prompt was used' }}
+                <TextViewer prefsName="systemPrompt" :text="$threads.getCurrentThreadSystemPrompt() || 'No System Prompt was used'" />
             </div>
             <div v-else>
                 <textarea
@@ -251,21 +251,17 @@ export default {
             }
         })
 
-        ctx.chatRequestFilters.push(({ request, thread }) => {
+        ctx.chatRequestFilters.push(({ request, thread, context }) => {
 
-            const hasSystemPrompt = request.messages.find(x => x.role === 'system')
+            const hasSystemPrompt = !!context.systemPrompt
+            console.log('system_prompts chatRequestFilters', hasSystemPrompt)
             if (hasSystemPrompt) {
                 console.log('Already has system prompt', hasSystemPrompt.content)
                 return
             }
 
-            // Only add the selected system prompt for new requests
-            if (ext.prefs.systemPrompt && request.messages.length <= 1) {
-                // add message to start
-                request.messages.unshift({
-                    role: 'system',
-                    content: ext.prefs.systemPrompt
-                })
+            if (ext.prefs.systemPrompt) {
+                context.systemPrompt = ext.prefs.systemPrompt
             }
         })
 

llms/extensions/tools/ui/index.mjs

@@ -656,7 +656,7 @@ export default {
             }
         })
 
-        ctx.chatRequestFilters.push(({ request, thread }) => {
+        ctx.chatRequestFilters.push(({ request, thread, context }) => {
             // Tool Preferences
             const prefs = ctx.prefs
             if (prefs.onlyTools != null) {

llms/main.py

@@ -56,7 +56,7 @@ try:
 except ImportError:
     HAS_PIL = False
 
-VERSION = "3.0.14"
+VERSION = "3.0.15"
 _ROOT = None
 DEBUG = os.getenv("DEBUG") == "1"
 MOCK = os.getenv("MOCK") == "1"
@@ -857,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:
@@ -876,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"]
@@ -904,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"]
@@ -1807,7 +1807,10 @@ async def g_chat_completion(chat, context=None):
     # If we get here, all providers failed
     if first_exception:
         raise first_exception
-    raise Exception("All providers failed")
+
+    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):

llms/ui/ai.mjs

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

llms/ui/app.css

@@ -424,9 +424,6 @@
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
-  .right-1 {
-    right: calc(var(--spacing) * 1);
-  }
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
@@ -562,9 +559,6 @@
   .-mt-1 {
     margin-top: calc(var(--spacing) * -1);
   }
-  .-mt-2 {
-    margin-top: calc(var(--spacing) * -2);
-  }
   .-mt-8 {
     margin-top: calc(var(--spacing) * -8);
   }
@@ -631,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);
   }
@@ -830,15 +830,6 @@
   .h-screen {
     height: 100vh;
   }
-  .max-h-10 {
-    max-height: calc(var(--spacing) * 10);
-  }
-  .max-h-20 {
-    max-height: calc(var(--spacing) * 20);
-  }
-  .max-h-50 {
-    max-height: calc(var(--spacing) * 50);
-  }
   .max-h-60 {
     max-height: calc(var(--spacing) * 60);
   }
@@ -917,6 +908,9 @@
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
+  .w-28 {
+    width: calc(var(--spacing) * 28);
+  }
   .w-32 {
     width: calc(var(--spacing) * 32);
   }
@@ -1685,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);
   }
@@ -2524,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;
   }
@@ -2951,13 +2955,6 @@
       }
     }
   }
-  .group-hover\:opacity-50 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        opacity: 50%;
-      }
-    }
-  }
   .group-hover\:opacity-75 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -4913,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);
@@ -6307,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

@@ -56,7 +56,7 @@ function embedHtml(html) {
 export const TypeText = {
     template: `
         <div data-type="text" v-if="text.type === 'text'">
-            <div v-html="html?.trim()" class="whitespace-pre-wrap"></div>
+            !<div v-html="html?.trim()" class="whitespace-pre-wrap"></div>
         </div>
     `,
     props: {
@@ -346,6 +346,124 @@ 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">
@@ -356,21 +474,8 @@ export const ToolArguments = {
                         <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 data-arg="string" v-else-if="typeof v === 'string'" class="align-top py-2 px-4 text-sm whitespace-pre-wrap">
-                            <div v-if="v.length > 200" class="relative">
-                                <button type="button" @click="maximized[k] = !maximized[k]" class="absolute top-0 right-3 opacity-0 group-hover:opacity-50 transition-opacity duration-200 rounded focus:outline-none focus:ring-0">
-                                    <div class="flex items-center space-x-1">
-                                        <span class="text-xs text-gray-600 dark:text-gray-400" :title="v.length + ' characters'">{{ $fmt.humanifyNumber(v.length) }}</span>
-                                        <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                                            <path v-if="maximized[k]" 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>
-                                    </div>
-                                </button>
-                                <div v-if="!maximized[k]" class="max-h-60 overflow-y-auto">{{ v }}</div>
-                                <div v-else class="w-full h-full">{{ v }}</div>
-                            </div>
-                            <div v-else>{{ v }}</div>
+                        <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" />
@@ -457,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>