artifactuse 0.1.25 → 0.1.28

package/README.md

@@ -8,6 +8,7 @@ Artifactuse is a lightweight SDK that transforms AI-generated content into rich,
 
 - 🎨 **Rich Content Detection** - Automatically detect and render code blocks, images, videos, maps, embeds, and more
 - 📦 **Artifact Cards** - Beautiful inline cards for code artifacts
+- 👁️ **Inline Code Preview** - Truncated syntax-highlighted code previews with click-to-open panel
 - 🖼️ **Media Lightbox** - Click images and PDFs to view fullscreen with zoom and download
 - 🖥️ **Panel Viewer** - Side panel with preview, code view, and split mode
 - 📝 **Interactive Forms** - Inline and panel forms with 17+ field types, auto-collapse after submission
@@ -421,11 +422,45 @@ Panel artifacts open in a side panel with preview, code view, and editing capabi
 - **HTML/React/Vue** - Live preview with code editing
 - **Mermaid** - Diagrams with live preview
 - **SVG** - SVG graphics with live preview and editing
-- **Diff / Patch** - Code diffs with side-by-side or unified view
+- **Diff / Patch** - Code diffs with side-by-side or unified view (`diff`, `patch`, or `smartdiff` for structured JSON diffs)
 - **Canvas / Whiteboard** - Interactive drawing canvas and whiteboard
 - **Video Editor** - Timeline-based video editing interface
 - **Forms (Panel)** - Complex forms with wizard variant, file uploads, or 4+ fields
 
+#### Inline Code Preview (Optional)
+
+By default, extracted code blocks render as compact artifact cards. With `inlinePreview` enabled, they show a **truncated syntax-highlighted preview** (first N lines) directly in the message. Click the preview to open the full artifact in the panel.
+
+- Configurable per language — unlisted languages still render as cards
+- Requires [Prism.js](https://prismjs.com/) for syntax highlighting (see [Syntax Highlighting](#syntax-highlighting))
+- `smartdiff` artifacts use the actual language for full syntax highlighting with deleted/inserted backgrounds
+- Truncated previews show a fade gradient with "View full code (N lines)" label
+
+```js
+provideArtifactuse({
+  inlinePreview: {
+    maxLines: 15,
+    languages: ['smartdiff', 'html', 'javascript'],
+  },
+});
+```
+
+All config options (`inlinePreview`, `inlineCode`, `tabs`, `viewMode`, `inlineCards`) also work as component props for per-message overrides. Precedence: **component prop → global config → default**.
+
+#### Inline Code (Optional)
+
+Show full syntax-highlighted code directly in the message without extraction or panel:
+
+```js
+provideArtifactuse({
+  inlineCode: {
+    languages: ['css', 'bash', 'sql'], // or true for all
+  },
+});
+```
+
+When a language matches both `inlineCode` and `inlinePreview`, `inlineCode` takes priority (no extraction).
+
 ### Inline Artifacts
 
 Inline artifacts render directly within the message.
@@ -592,6 +627,30 @@ provideArtifactuse({
     minLength: 50,
   },
 
+  // Inline preview: show truncated code inline instead of artifact cards (optional)
+  // Default: null (disabled — all extracted code shows as cards)
+  inlinePreview: {
+    maxLines: 15,                                        // max lines before truncation
+    languages: ['smartdiff', 'html', 'javascript', 'jsx'], // or true for all extracted languages
+  },
+
+  // Inline code: show full code inline with Prism highlighting, no extraction (optional)
+  // Default: null (disabled). Takes priority over inlinePreview when both match.
+  inlineCode: {
+    languages: ['css', 'bash', 'sql'],                   // or true for all
+  },
+
+  // Show clickable artifact cards inline (default: true)
+  inlineCards: true,
+
+  // Visible panel tabs for all extracted artifacts (optional)
+  // Default: null (all tabs shown). Options: 'preview', 'code', 'split', 'edit'
+  tabs: ['preview', 'code'],
+
+  // Initial panel view mode for all extracted artifacts (optional)
+  // Default: null (first available tab). Options: 'preview', 'code', 'split', 'edit'
+  viewMode: 'preview',
+
   // Code Editor (Optional) — CodeMirror 6 for the edit tab
   // Requires: @codemirror/state, @codemirror/view, @codemirror/commands,
   //           @codemirror/language, @codemirror/autocomplete

package/dist/core/detector.d.ts

@@ -54,6 +54,11 @@ export function decodeJsonFromAttribute(encoded: any): any;
  * Extract title from code content
  */
 export function extractArtifactTitle(code: any, language: any): any;
+/**
+ * Compute a simple line-by-line diff for inline preview display
+ * Produces +/- prefixed lines that Prism highlights with language-diff
+ */
+export function computeSimpleDiff(oldCode: any, newCode: any): string;
 /**
  * Determine if form should render inline or in panel
  * Parses JSON from code to check complexity

package/dist/core/index.d.ts

@@ -36,7 +36,7 @@ export function createArtifactuse(userConfig?: {}): {
         isFullscreen: boolean;
     };
     subscribe: (callback: any) => () => void;
-    processMessage: (content: any, messageId: any) => {
+    processMessage: (content: any, messageId: any, overrides?: {}) => {
         html: string | Promise<string>;
         artifacts: any[];
     };
@@ -160,6 +160,7 @@ export namespace DEFAULT_PANELS {
     let svg: string;
     let diff: string;
     let patch: string;
+    let smartdiff: string;
     let txt: string;
     let javascript: string;
     let js: string;