artifactuse 0.1.25 → 0.1.28

package/dist/vue2/composables.d.ts

@@ -66,7 +66,7 @@ export function provideArtifactuse(config?: {
             isFullscreen: boolean;
         };
         subscribe: (callback: any) => () => void;
-        processMessage: (content: any, messageId: any) => {
+        processMessage: (content: any, messageId: any, overrides?: {}) => {
             html: string | Promise<string>;
             artifacts: any[];
         };
@@ -183,7 +183,7 @@ export function provideArtifactuse(config?: {
     hasArtifacts: import("vue").ComputedRef<boolean>;
     panelTypes: import("vue").ComputedRef<any>;
     activePanelUrl: import("vue").ComputedRef<any>;
-    processMessage: (content: any, messageId: any) => {
+    processMessage: (content: any, messageId: any, overrides?: {}) => {
         html: string | Promise<string>;
         artifacts: any[];
     };
@@ -278,7 +278,7 @@ export function createArtifactuseComposable(config?: {}): {
             isFullscreen: boolean;
         };
         subscribe: (callback: any) => () => void;
-        processMessage: (content: any, messageId: any) => {
+        processMessage: (content: any, messageId: any, overrides?: {}) => {
             html: string | Promise<string>;
             artifacts: any[];
         };
@@ -395,7 +395,7 @@ export function createArtifactuseComposable(config?: {}): {
     hasArtifacts: import("vue").ComputedRef<boolean>;
     panelTypes: import("vue").ComputedRef<any>;
     activePanelUrl: import("vue").ComputedRef<any>;
-    processMessage: (content: any, messageId: any) => {
+    processMessage: (content: any, messageId: any, overrides?: {}) => {
         html: string | Promise<string>;
         artifacts: any[];
     };

package/dist/vue2/index.js

@@ -23,7 +23,7 @@ const ARTIFACT_TYPES = {
 const PREVIEWABLE_LANGUAGES = [
   // Code languages
   'html', 'htm', 'svg', 'markdown', 'md', 'jsx', 'vue',
-  'diff', 'patch', 'json',
+  'diff', 'patch', 'smartdiff', 'json',
   'javascript', 'js', 'python', 'py',
   // Visual editors
   'canvas', 'whiteboard', 'drawing',
@@ -40,7 +40,7 @@ const PANEL_LANGUAGES = [
   'video', 'videoeditor', 'timeline',
   'canvas', 'whiteboard', 'drawing',
   // Code (panel for preview)
-  'json', 'svg', 'diff', 'patch',
+  'json', 'svg', 'diff', 'patch', 'smartdiff',
   'javascript', 'js', 'python', 'py',
   'jsx', 'vue', 'html', 'htm',
   // Structured artifacts (form can be panel based on complexity)
@@ -117,6 +117,7 @@ function getLanguageDisplayName(language) {
     docker: 'Docker',
     diff: 'Diff',
     patch: 'Patch',
+    smartdiff: 'Smart Diff',
     // Visual editors
     canvas: 'Canvas',
     video: 'Video Editor',
@@ -241,6 +242,7 @@ function getLanguageIcon(language) {
     sql: '<path d="M12 3C7.58 3 4 4.79 4 7v10c0 2.21 3.58 4 8 4s8-1.79 8-4V7c0-2.21-3.58-4-8-4m0 2c3.87 0 6 1.5 6 2s-2.13 2-6 2-6-1.5-6-2 2.13-2 6-2M6 17v-2.7c1.56.84 3.67 1.36 6 1.36s4.44-.52 6-1.36V17c0 .5-2.13 2-6 2s-6-1.5-6-2m0-5v-2.7c1.56.84 3.67 1.36 6 1.36s4.44-.52 6-1.36V12c0 .5-2.13 2-6 2s-6-1.5-6-2z"/>',
     diff: '<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/>',
     patch: '<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/>',
+    smartdiff: '<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/>',
     canvas: '<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/>',
     whiteboard: '<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/>',
     drawing: '<path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/>',
@@ -282,6 +284,18 @@ function decodeHtml(encoded) {
     .replace(/&nbsp;/g, ' ');
 }
 
+/**
+ * Encode HTML for safe embedding
+ */
+function encodeHtml(code) {
+  return code
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
 /**
  * Encode JSON for safe embedding in HTML attributes using Base64
  */
@@ -306,6 +320,16 @@ function encodeJsonForAttribute(obj) {
 function extractArtifactTitle(code, language) {
   const langLower = language?.toLowerCase();
   
+  // For smartdiff, extract language from JSON
+  if (langLower === 'smartdiff') {
+    try {
+      const json = JSON.parse(code);
+      return json.language ? `${getLanguageDisplayName(json.language)} Diff` : 'Smart Diff';
+    } catch {
+      return 'Smart Diff';
+    }
+  }
+
   // For form/social, try to extract title from JSON
   if (langLower === 'form' || langLower === 'social') {
     try {
@@ -370,6 +394,75 @@ function extractArtifactTitle(code, language) {
   return `${getLanguageDisplayName(language)} Code`;
 }
 
+/**
+ * Compute a simple line-by-line diff for inline preview display
+ * Produces +/- prefixed lines that Prism highlights with language-diff
+ */
+function computeSimpleDiff(oldCode, newCode) {
+  const oldLines = (oldCode || '').split('\n');
+  const newLines = (newCode || '').split('\n');
+  const result = [];
+  const max = Math.max(oldLines.length, newLines.length);
+  for (let i = 0; i < max; i++) {
+    const oldLine = i < oldLines.length ? oldLines[i] : undefined;
+    const newLine = i < newLines.length ? newLines[i] : undefined;
+    if (oldLine === newLine) {
+      result.push(' ' + oldLine);
+    } else {
+      if (oldLine !== undefined) result.push('-' + oldLine);
+      if (newLine !== undefined) result.push('+' + newLine);
+    }
+  }
+  return result.join('\n');
+}
+
+/**
+ * Create inline preview HTML for an artifact
+ * Shows truncated code with fade overlay for long content
+ */
+function createInlinePreview(artifact, code, langLower, inlinePreview) {
+  const maxLines = inlinePreview.maxLines || 15;
+
+  // Smartdiff: parse JSON, compute diff, use actual language for highlighting
+  if (langLower === 'smartdiff') {
+    try {
+      const diffData = JSON.parse(code);
+      const diffText = computeSimpleDiff(diffData.oldCode, diffData.newCode);
+      const allDiffLines = diffText.split('\n');
+      const truncDiffLines = allDiffLines.slice(0, maxLines);
+
+      // Separate markers (+/-/space) from code content
+      const markers = truncDiffLines.map(l => l[0] || ' ');
+      const codeLines = truncDiffLines.map(l => l.slice(1));
+      const encoded = encodeHtml(codeLines.join('\n'));
+      const isTruncated = allDiffLines.length > maxLines;
+      const actualLang = diffData.language || 'plaintext';
+
+      return `<div class="artifactuse-inline-preview${isTruncated ? ' artifactuse-inline-preview--truncated' : ''}" data-artifact-id="${artifact.id}" data-smartdiff="true" data-smartdiff-markers="${markers.join(',')}">`
+        + `<pre class="artifactuse-inline-preview__pre"><code class="language-${actualLang}">${encoded}</code></pre>`
+        + (isTruncated ? `<div class="artifactuse-inline-preview__fade"><span class="artifactuse-inline-preview__action">View full diff (${allDiffLines.length} lines)</span></div>` : '')
+        + `</div>`;
+    } catch {
+      // Fallback: show raw content as JSON
+    }
+  }
+
+  // Standard code blocks (and diff/patch)
+  let previewCode = code;
+  let previewLang = langLower;
+
+  const lines = previewCode.split('\n');
+  const truncated = lines.slice(0, maxLines).join('\n');
+  const encoded = encodeHtml(truncated);
+  const isTruncated = lines.length > maxLines;
+  const label = langLower === 'diff' || langLower === 'patch' ? 'diff' : 'code';
+
+  return `<div class="artifactuse-inline-preview${isTruncated ? ' artifactuse-inline-preview--truncated' : ''}" data-artifact-id="${artifact.id}">`
+    + `<pre class="artifactuse-inline-preview__pre"><code class="language-${previewLang}">${encoded}</code></pre>`
+    + (isTruncated ? `<div class="artifactuse-inline-preview__fade"><span class="artifactuse-inline-preview__action">View full ${label} (${lines.length} lines)</span></div>` : '')
+    + `</div>`;
+}
+
 /**
  * Create artifact placeholder HTML
  */
@@ -491,7 +584,25 @@ function extractCodeBlockArtifacts(html, messageId, options = {}) {
     minLines = 3,
     minLength = 50,
     extractAll = false,
+    inlinePreview = null,
+    inlineCode = null,
+    tabs = null,
+    viewMode = null,
   } = options;
+
+  function shouldShowPreview(lang) {
+    if (!inlinePreview) return false;
+    if (inlinePreview.languages === true) return true;
+    if (Array.isArray(inlinePreview.languages)) return inlinePreview.languages.includes(lang);
+    return false;
+  }
+
+  function shouldShowInlineCode(lang) {
+    if (!inlineCode) return false;
+    if (inlineCode.languages === true) return true;
+    if (Array.isArray(inlineCode.languages)) return inlineCode.languages.includes(lang);
+    return false;
+  }
   
   const artifacts = [];
   const codeBlockRegex = /<pre><code class="language-(\w+)">([\s\S]*?)<\/code><\/pre>/gi;
@@ -510,6 +621,12 @@ function extractCodeBlockArtifacts(html, messageId, options = {}) {
       }
     }
 
+    // inlineCode: highest priority — skip extraction, leave code block as-is
+    if (shouldShowInlineCode(langLower)) {
+      blockIndex++;
+      return match;
+    }
+
     // Artifact extraction logic
     const isPreviewableLang = isPreviewable(langLower);
     
@@ -517,25 +634,37 @@ function extractCodeBlockArtifacts(html, messageId, options = {}) {
     
     if (extractAll) {
       shouldExtract = true;
-    } else if (langLower === 'diff' || langLower === 'patch') {
+    } else if (langLower === 'diff' || langLower === 'patch' || langLower === 'smartdiff') {
       shouldExtract = lineCount > 10;
     } else if (isPreviewableLang) {
       shouldExtract = true;
     } else {
       shouldExtract = code.length >= minLength && lineCount >= minLines;
     }
-    
+
+    // Force extraction when inline preview is configured for this language
+    if (!shouldExtract && shouldShowPreview(langLower)) {
+      shouldExtract = true;
+    }
+
     if (shouldExtract) {
       const artifact = createArtifact(code, langLower, messageId, blockIndex);
+      if (tabs) artifact.tabs = tabs;
+      if (viewMode) artifact.viewMode = viewMode;
       blockIndex++;
       artifacts.push(artifact);
-      
+
+      // Inline preview mode: show truncated code instead of card
+      if (shouldShowPreview(langLower)) {
+        return createInlinePreview(artifact, code, langLower, inlinePreview);
+      }
+
       // Determine placeholder type based on artifact
       let placeholderType = 'panel';
       if (artifact.isInline) {
         placeholderType = artifact.type === 'social' ? 'inline-social' : 'inline-form';
       }
-      
+
       return createArtifactPlaceholder(artifact, placeholderType);
     }
     
@@ -6313,6 +6442,7 @@ const DEFAULT_PANELS = {
   // Diff/patches
   diff: 'diff-panel',
   patch: 'diff-panel',
+  smartdiff: 'diff-panel',
   
   // Plain text
   txt: 'code-panel',
@@ -6693,18 +6823,30 @@ function createArtifactuse(userConfig = {}) {
    * Process AI agent message content
    * Returns processed HTML with artifact placeholders
    */
-  function processMessage(content, messageId) {
+  function processMessage(content, messageId, overrides = {}) {
     // First, convert markdown to HTML
     let html = d.parse(content);
-    
+
     const artifacts = [];
-    
+
     // Get current resolved theme for processors that need it
     const processorOptions = { theme: theme.resolved };
-    
+
+    // Merge overrides with global config (component prop → global config → default)
+    const inlinePreview = overrides.inlinePreview ?? config.inlinePreview ?? null;
+    const inlineCode = overrides.inlineCode ?? config.inlineCode ?? null;
+    const tabs = overrides.tabs ?? config.tabs ?? null;
+    const viewMode = overrides.viewMode ?? config.viewMode ?? null;
+
     // Extract all code block artifacts (code, form, social)
     if (config.processors.codeBlocks) {
-      const result = extractCodeBlockArtifacts(html, messageId, config.codeExtraction);
+      const result = extractCodeBlockArtifacts(html, messageId, {
+        ...config.codeExtraction,
+        inlinePreview,
+        inlineCode,
+        tabs,
+        viewMode,
+      });
       html = result.html;
       artifacts.push(...result.artifacts);
     }
@@ -6815,6 +6957,25 @@ function createArtifactuse(userConfig = {}) {
     // Apply syntax highlighting if enabled
     if (config.syntaxHighlight) {
       highlightAll(container);
+
+      // Post-process smartdiff inline previews:
+      // Prism highlighted the code with the actual language grammar.
+      // Now wrap each line in .token.deleted / .token.inserted based on markers.
+      const el = container === document ? document : container;
+      const smartdiffPreviews = el.querySelectorAll('.artifactuse-inline-preview[data-smartdiff]');
+      smartdiffPreviews.forEach(preview => {
+        const codeEl = preview.querySelector('code');
+        if (!codeEl || codeEl.dataset.smartdiffProcessed) return;
+        const markers = preview.dataset.smartdiffMarkers?.split(',') || [];
+        const lines = codeEl.innerHTML.split('\n');
+        codeEl.innerHTML = lines.map((line, i) => {
+          const marker = markers[i];
+          if (marker === '-') return `<span class="token deleted">${line}</span>`;
+          if (marker === '+') return `<span class="token inserted">${line}</span>`;
+          return line;
+        }).join('\n');
+        codeEl.dataset.smartdiffProcessed = 'true';
+      });
     }
     
     await Promise.all(promises);
@@ -6832,7 +6993,10 @@ function createArtifactuse(userConfig = {}) {
     
     state.setActiveArtifact(artifact.id);
     state.setPanelOpen(true);
-    
+    if (artifact.viewMode) {
+      state.setViewMode(artifact.viewMode);
+    }
+
     emit('artifact:opened', artifact);
   }
 
@@ -10971,6 +11135,26 @@ var script$2 = {
       type: Boolean,
       default: false,
     },
+    // Override global inlinePreview config for this message
+    inlinePreview: {
+      type: Object,
+      default: null,
+    },
+    // Show full inline code (no extraction) for listed languages
+    inlineCode: {
+      type: Object,
+      default: null,
+    },
+    // Override visible panel tabs for artifacts from this message
+    tabs: {
+      type: Array,
+      default: null,
+    },
+    // Override initial panel view mode for artifacts from this message
+    viewMode: {
+      type: String,
+      default: null,
+    },
   },
   
   setup(props, { emit }) {
@@ -11001,6 +11185,9 @@ var script$2 = {
     // Get active artifact ID from state
     const activeArtifactId = computed(() => state.activeArtifactId);
 
+    // Resolve inlineCards: component prop → global config → default (true)
+    const effectiveInlineCards = computed(() => props.inlineCards ?? instance?.config?.inlineCards ?? true);
+
     /**
      * Track if this message was ever "live" (typed/streamed) in this session
      * Used to determine if forms should be active or inactive
@@ -11349,7 +11536,12 @@ var script$2 = {
       () => props.content,
       (newContent) => {
         if (newContent) {
-          const result = processMessage(newContent, props.messageId);
+          const result = processMessage(newContent, props.messageId, {
+            inlinePreview: props.inlinePreview,
+            inlineCode: props.inlineCode,
+            tabs: props.tabs,
+            viewMode: props.viewMode,
+          });
           processedHtml.value = result.html;
           messageArtifacts.value = result.artifacts;
           
@@ -11382,6 +11574,19 @@ var script$2 = {
       removeMediaListeners();
     });
 
+    function handleContentClick(e) {
+      const preview = e.target.closest('.artifactuse-inline-preview');
+      if (preview) {
+        const artifactId = preview.dataset.artifactId;
+        if (artifactId) {
+          const artifact = state.artifacts.find(a => a.id === artifactId);
+          if (artifact) {
+            handleOpenArtifact(artifact);
+          }
+        }
+      }
+    }
+
     function handleOpenArtifact(artifact) {
       openArtifact(artifact);
       emit('artifact-open', artifact);
@@ -11427,11 +11632,13 @@ var script$2 = {
       viewerCaption,
       theme,
       activeArtifactId,
+      effectiveInlineCards,
       contentSegments,
       formInitialState,
       openViewer,
       closeViewer,
       attachMediaListeners,
+      handleContentClick,
       handleOpenArtifact,
       handleArtifactCopy,
       handleArtifactDownload,
@@ -11458,7 +11665,11 @@ var __vue_render__$2 = function () {
     [
       _c(
         "div",
-        { ref: "contentRef", staticClass: "artifactuse-message-content" },
+        {
+          ref: "contentRef",
+          staticClass: "artifactuse-message-content",
+          on: { click: _vm.handleContentClick },
+        },
         [
           _vm._l(_vm.contentSegments, function (segment, index) {
             return [
@@ -11487,7 +11698,7 @@ var __vue_render__$2 = function () {
                     attrs: { artifact: segment.artifact, theme: _vm.theme },
                     on: { copy: _vm.handleSocialCopy },
                   })
-                : segment.type === "panel" && _vm.inlineCards
+                : segment.type === "panel" && _vm.effectiveInlineCards
                 ? _c("ArtifactuseCard", {
                     key: "panel-" + index,
                     attrs: {
@@ -27090,27 +27301,54 @@ var script$1 = defineComponent({
       };
     });
     
+    // Smartdiff: per-line language-aware highlighting
+    function highlightSmartDiff(artifact) {
+      if (artifact.language !== 'smartdiff') return null;
+      try {
+        const data = JSON.parse(artifact.code);
+        if (data.oldCode === undefined || data.newCode === undefined) return null;
+        const lang = data.language || 'plaintext';
+        const grammar = isPrismAvailable() && window.Prism.languages[lang];
+        const diffLines = computeSimpleDiff(data.oldCode, data.newCode).split('\n');
+
+        const highlighted = diffLines.map(line => {
+          const prefix = line[0];
+          const content = line.slice(1);
+          const hl = grammar ? window.Prism.highlight(content, grammar, lang) : content;
+          if (prefix === '-') return `<span class="token deleted">${hl}</span>`;
+          if (prefix === '+') return `<span class="token inserted">${hl}</span>`;
+          return hl;
+        }).join('\n');
+
+        return { html: highlighted, lineCount: diffLines.length };
+      } catch { return null; }
+    }
+
     // Methods
     function generateLineNumbers() {
       if (!lineNumbersRef.value || !activeArtifact.value?.code) return;
-      
-      const lines = activeArtifact.value.code.split('\n').length;
+      const sd = highlightSmartDiff(activeArtifact.value);
+      const lines = sd ? sd.lineCount : activeArtifact.value.code.split('\n').length;
       const html = Array.from({ length: lines }, (_, i) => `<div>${i + 1}</div>`).join('');
       lineNumbersRef.value.innerHTML = html;
     }
-    
+
     function highlightCode() {
       if (codeRef.value && isPrismAvailable() && activeArtifact.value?.code) {
-        const grammar = window.Prism.languages[normalizedLanguage.value];
-        if (grammar) {
-          codeRef.value.innerHTML = window.Prism.highlight(
-            activeArtifact.value.code,
-            grammar,
-            normalizedLanguage.value
-          );
+        const sd = highlightSmartDiff(activeArtifact.value);
+        if (sd) {
+          codeRef.value.innerHTML = sd.html;
         } else {
-          // Fallback: set as text if no grammar available
-          codeRef.value.textContent = activeArtifact.value.code;
+          const grammar = window.Prism.languages[normalizedLanguage.value];
+          if (grammar) {
+            codeRef.value.innerHTML = window.Prism.highlight(
+              activeArtifact.value.code,
+              grammar,
+              normalizedLanguage.value
+            );
+          } else {
+            codeRef.value.textContent = activeArtifact.value.code;
+          }
         }
         codeRef.value.dataset.highlighted = 'true';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "artifactuse",
-  "version": "0.1.25",
+  "version": "0.1.28",
   "type": "module",
   "description": "The Artifact SDK for AI Agents - Turn AI outputs into interactive experiences",
   "author": "Artifactuse",