import{j as e}from"./markdown-vendor-B0lXrrRZ.js";import{r as d}from"./router-vendor-DdQhGl5t.js";import{A as c}from"./ArtifactContainer-Bm-Y-U-r.js";import{B as l}from"../assets/index-DW8C1vVk.js";import"./ui-vendor-C4ZcWovR.js";import"./utils-vendor-BFlGJDIj.js";const i=[{id:"demo-html-1",type:"html",title:"Interactive Button Demo",description:"A simple HTML page with interactive elements",content:`<div style="text-align: center; padding: 20px;">
  <h1 style="color: #333; font-family: Arial, sans-serif;">Welcome to Libre WebUI!</h1>
  <p style="color: #666; font-size: 16px;">This is an interactive HTML artifact.</p>
  <button 
    onclick="this.style.backgroundColor = this.style.backgroundColor === 'lightgreen' ? '#007bff' : 'lightgreen'; this.textContent = this.textContent === 'Clicked!' ? 'Click me!' : 'Clicked!'"
    style="background-color: #007bff; color: white; border: none; padding: 10px 20px; font-size: 16px; border-radius: 5px; cursor: pointer;">
    Click me!
  </button>
  <div style="margin-top: 20px;">
    <input type="text" placeholder="Type something..." style="padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-right: 10px;">
    <button onclick="alert('Hello from the artifact!')" style="padding: 8px 16px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;">Say Hello</button>
  </div>
</div>`,createdAt:Date.now(),updatedAt:Date.now()},{id:"demo-svg-1",type:"svg",title:"Animated SVG Logo",description:"An animated SVG graphic",content:`<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="none" stroke="#007bff" stroke-width="4">
    <animate attributeName="r" values="80;90;80" dur="2s" repeatCount="indefinite"/>
  </circle>
  <circle cx="100" cy="100" r="50" fill="#007bff" opacity="0.3">
    <animate attributeName="opacity" values="0.3;0.7;0.3" dur="2s" repeatCount="indefinite"/>
  </circle>
  <text x="100" y="110" text-anchor="middle" fill="#333" font-family="Arial, sans-serif" font-size="18" font-weight="bold">
    Libre WebUI
  </text>
</svg>`,createdAt:Date.now(),updatedAt:Date.now()},{id:"demo-json-1",type:"json",title:"Configuration Data",description:"Sample configuration JSON",content:`{
  "application": {
    "name": "Libre WebUI",
    "version": "1.0.0",
    "description": "Privacy-first AI chat interface"
  },
  "features": {
    "artifacts": true,
    "multiModal": true,
    "plugins": true,
    "darkMode": true
  },
  "models": [
    {
      "name": "llama3.2",
      "type": "chat",
      "parameters": {
        "temperature": 0.7,
        "max_tokens": 2048
      }
    },
    {
      "name": "codellama",
      "type": "code",
      "parameters": {
        "temperature": 0.1,
        "max_tokens": 4096
      }
    }
  ],
  "ui": {
    "theme": "auto",
    "sidebar": {
      "collapsed": false,
      "width": 320
    }
  }
}`,createdAt:Date.now(),updatedAt:Date.now()},{id:"demo-code-1",type:"code",language:"python",title:"Data Processing Script",description:"A Python script for processing data",content:`import pandas as pd
import numpy as np
from datetime import datetime

def process_data(filename):
    """
    Process CSV data and return insights
    """
    try:
        # Read the CSV file
        df = pd.read_csv(filename)
        
        # Basic statistics
        stats = {
            'total_rows': len(df),
            'total_columns': len(df.columns),
            'missing_values': df.isnull().sum().sum(),
            'processed_at': datetime.now().isoformat()
        }
        
        # Data types summary
        type_summary = df.dtypes.value_counts().to_dict()
        stats['data_types'] = {str(k): v for k, v in type_summary.items()}
        
        # Numerical columns summary
        numeric_cols = df.select_dtypes(include=[np.number]).columns
        if len(numeric_cols) > 0:
            stats['numeric_summary'] = df[numeric_cols].describe().to_dict()
        
        return stats
        
    except Exception as e:
        return {'error': str(e)}

# Example usage
if __name__ == "__main__":
    result = process_data('data.csv')
    print("Data processing results:")
    print(result)`,createdAt:Date.now(),updatedAt:Date.now()}],m=()=>{const[s,r]=d.useState([i[0]]),n=t=>{s.find(a=>a.id===t.id)||r([...s,t])},o=t=>{r(s.filter(a=>a.id!==t))};return e.jsxs("div",{className:"max-w-6xl mx-auto p-6",children:[e.jsxs("div",{className:"mb-8",children:[e.jsx("h1",{className:"text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4",children:"Artifacts Demo"}),e.jsx("p",{className:"text-gray-600 dark:text-gray-400 text-lg",children:"This demonstrates the Artifacts feature - interactive content that can be rendered alongside chat messages. Try the different artifact types below."})]}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-4 gap-6",children:[e.jsxs("div",{className:"lg:col-span-1",children:[e.jsx("h2",{className:"text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4",children:"Available Artifacts"}),e.jsx("div",{className:"space-y-2",children:i.map(t=>e.jsxs("div",{className:"flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg",children:[e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("h3",{className:"text-sm font-medium text-gray-900 dark:text-gray-100 truncate",children:t.title}),e.jsx("p",{className:"text-xs text-gray-500 dark:text-gray-400 uppercase",children:t.type})]}),e.jsx(l,{size:"sm",variant:s.find(a=>a.id===t.id)?"outline":"primary",onClick:()=>{s.find(a=>a.id===t.id)?o(t.id):n(t)},children:s.find(a=>a.id===t.id)?"Remove":"Add"})]},t.id))})]}),e.jsxs("div",{className:"lg:col-span-3",children:[e.jsxs("h2",{className:"text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4",children:["Selected Artifacts (",s.length,")"]}),s.length>0?e.jsx(c,{artifacts:s}):e.jsx("div",{className:"text-center py-12 text-gray-500 dark:text-gray-400",children:e.jsx("p",{children:"No artifacts selected. Choose some from the left panel to see them in action."})})]})]}),e.jsxs("div",{className:"mt-12 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6",children:[e.jsx("h3",{className:"text-lg font-semibold text-blue-900 dark:text-blue-100 mb-3",children:"How Artifacts Work"}),e.jsxs("div",{className:"text-sm text-blue-800 dark:text-blue-200 space-y-2",children:[e.jsxs("p",{children:[e.jsx("strong",{children:"Automatic Detection:"})," When an AI model returns code blocks with specific languages (HTML, SVG, Python, etc.), they are automatically converted into interactive artifacts."]}),e.jsxs("p",{children:[e.jsx("strong",{children:"Supported Types:"})," HTML pages, SVG graphics, JSON data, code snippets, React components, and more."]}),e.jsxs("p",{children:[e.jsx("strong",{children:"Interactive Features:"})," View in fullscreen, copy content, download files, and open in new windows."]}),e.jsxs("p",{children:[e.jsx("strong",{children:"Safe Rendering:"})," All artifacts are rendered in sandboxed environments for security."]})]})]})]})},y=()=>e.jsx("div",{className:"min-h-screen bg-gray-50 dark:bg-gray-900",children:e.jsx(m,{})});export{y as default};
