Skip to content

artifacts.md

Latest commit

 

History

History
276 lines (200 loc) · 6.59 KB

artifacts.md

File metadata and controls

276 lines (200 loc) · 6.59 KB

Artifact Feature Implementation Plan

Overview

This document outlines the implementation plan for adding artifact support to the chat application. Artifacts are interactive code blocks, HTML previews, diagrams, and other rich content that can be generated by LLMs and displayed interactively in the chat interface.

Current Architecture Analysis

Database Schema

The chat_message table already has:

  • content field for main message content
  • raw JSONB field for raw LLM responses
  • reasoning_content field for thinking/reasoning content

Frontend Message Structure

interface Message {
  uuid: string,
  dateTime: string
  text: string
  model?: string
  inversion?: boolean  // true for user messages, false for assistant
  error?: boolean
  loading?: boolean
  isPrompt?: boolean
  isPin?: boolean
}

Current Message Flow

  1. User Input → Frontend
  2. API Call → /chat_stream endpoint
  3. LLM Processing → Various providers
  4. Response Streaming → Server-Sent Events
  5. Database Storage → Full metadata
  6. Frontend Update → UI refresh

Implementation Plan

1. Database Schema Extension

Option A: Extend existing table

-- Add artifacts column to chat_message table
ALTER TABLE chat_message ADD COLUMN artifacts JSONB;

2. Backend Implementation

Data Structures

// Add to message struct
type ChatMessage struct {
    // ... existing fields
    Artifacts []Artifact `json:"artifacts,omitempty"`
}

type Artifact struct {
    UUID     string `json:"uuid"`
    Type     string `json:"type"`
    Title    string `json:"title"`
    Content  string `json:"content"`
    Language string `json:"language,omitempty"`
}

Artifact Detection Logic

// In message processing pipeline
func extractArtifacts(content string) []Artifact {
    // Detect code blocks with artifact markers
    // Pattern: ```language <!-- artifact: title -->
    // Extract HTML blocks with artifact markers
    // Detect SVG content
    // Find Mermaid diagrams
}

API Endpoints

  • Extend existing message endpoints to include artifact data
  • Add artifact-specific endpoints if needed:
    • GET /api/artifacts/:uuid - Get artifact content
    • PUT /api/artifacts/:uuid - Update artifact (if editing supported)
    • DELETE /api/artifacts/:uuid - Delete artifact
    • GET /api/artifacts - List all artifacts for a user

3. Frontend Components

Core Components

<!-- ArtifactViewer.vue -->
<template>
  <div class="artifact-container">
    <div class="artifact-header">
      <span class="artifact-title">{{ artifact.title }}</span>
      <div class="artifact-actions">
        <button @click="toggleExpanded">{{ expanded ? 'Collapse' : 'Expand' }}</button>
        <button @click="copyContent">Copy</button>
        <button @click="downloadContent">Download</button>
      </div>
    </div>
    <div v-if="expanded" class="artifact-content">
      <component :is="getArtifactComponent(artifact.type)" :artifact="artifact" />
    </div>
  </div>
</template>

Artifact Type Components

  • HtmlArtifact.vue - Sandboxed HTML preview
  • SvgArtifact.vue - SVG viewer with zoom/pan
  • MermaidArtifact.vue - Interactive diagrams
  • JsonArtifact.vue - Formatted JSON viewer

Integration with Message Component

<!-- In Message/index.vue -->
<template>
  <div class="message-content">
    <div class="message-text">{{ message.text }}</div>
    <div v-if="message.artifacts" class="message-artifacts">
      <ArtifactViewer 
        v-for="artifact in message.artifacts" 
        :key="artifact.uuid"
        :artifact="artifact"
      />
    </div>
  </div>
</template>

4. Artifact Detection Patterns

HTML Artifacts

<div id="demo">
  <button onclick="alert('Hello!')">Click me</button>
</div>

SVG Artifacts

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

5. Artifact Types to Support

tection

  1. HTML Artifacts

    • Live HTML preview
    • Sandboxed iframe execution
    • CSS/JS support

  2. SVG Artifacts

    • Vector graphics display
    • Zoom/pan functionality
    • Export options

  3. Mermaid Diagrams

    • Flowcharts, sequence diagrams
    • Interactive navigation
    • Export to image

  4. JSON/Data Artifacts

    • Formatted JSON viewer
    • Collapsible tree structure
    • Search functionality

Additional Suggestions for Further Improvements:

  1. Advanced Artifact Features

// Interactive code execution

  • Code Runners: Execute JavaScript, Python snippets safely
  • Live Editing: Edit artifacts inline with syntax highlighting

  1. Enhanced Visualization

  2. Workflow Integration

// Developer tools integration

  • CodePen Integration: Open HTML artifacts in CodePen
  • Download Options: Save artifacts as files
  • Template Library: Reusable artifact templates
  1. Advanced UI Features

// Enhanced user experience

  • Artifact Gallery: Browse all artifacts in a session
  1. Security & Performance

// Better safety and speed

  • Content Sanitization: Advanced XSS protection
  • Lazy Loading: Load artifacts only when needed
  • Caching: Cache rendered artifacts for better performance
  • Resource Limits: Prevent memory leaks from large artifacts

6. Implementation Phases

Phase 1: Core Infrastructure

  • Database schema updates
  • Backend artifact detection logic
  • Basic frontend artifact viewer component

Phase 2: Code Artifacts

  • Code artifact component with syntax highlighting
  • Copy/download functionality

Phase 3: Web Artifacts

  • HTML artifact component with sandboxing
  • SVG artifact viewer
  • [] CSS/JS execution in sandbox

Phase 4: Advanced Features

  • Mermaid diagram support
  • JSON/data viewer

Phase 5: Polish & Features

  • [] Artifact editing capabilities
  • [] Sharing and export options

7. Technical Considerations

Security

  • Sandbox HTML/JS execution to prevent XSS
  • Validate and sanitize artifact content
  • Limit artifact size and complexity

Performance

  • Lazy loading of artifact components
  • Virtualization for large artifacts
  • Caching of rendered content

User Experience

  • Collapsible artifact containers
  • Responsive design for mobile
  • Keyboard shortcuts for artifact actions
  • Loading states for complex artifacts

Resources

  • Current codebase structure in /web/src/views/chat/components/Message/
  • Database schema in /api/sqlc/schema.sql
  • Message handling in /api/chat_message_handler.go
  • Frontend message types in /web/src/types/chat.d.ts