conversation-replay 0.1.5 → 0.1.7

package/README.md

@@ -1,11 +1,15 @@
 # Conversation Replay
 
-Conversation Replay is a "video" player for conversations.
+Create animated replays of text conversations.
 
-After parsing the annotated conversation data you supply in a YAML file, this tool will generate a self-contained embeddable replay that uses HTML, JavaScript, and CSS. This can be help in security awareness, training, and web publishing situations.
+After parsing the annotated conversation data you supply in a YAML file, this tool will generate a self-contained embeddable HTML file. The published conversation can help with security awareness training and other communications that involve presenting an annotated text conversation.
 
 - [Conversation Replay](#conversation-replay)
   - [How This Is Useful](#how-this-is-useful)
+  - [Installation](#installation)
+    - [Run Without Installing (Recommended)](#run-without-installing-recommended)
+    - [Global Install](#global-install)
+    - [Install from GitHub](#install-from-github)
   - [Quick Start](#quick-start)
   - [YAML Schema](#yaml-schema)
     - [Basic Structure](#basic-structure)
@@ -30,7 +34,7 @@ After parsing the annotated conversation data you supply in a YAML file, this to
 
 ## How This Is Useful
 
-Security training often involves showing how attacks unfold through conversation—phishing emails, social engineering calls, BEC attempts, scammer chat interactions. Static screenshots lose the temporal element. Video production is time-consuming and hard to update.
+Security training often involves showing how attacks unfold through text conversations—phishing emails, social engineering calls, BEC attempts, scammer chat interactions. Static screenshots lose the temporal element. Video production is time-consuming and hard to update.
 
 Conversation Replay lets you:
 
@@ -39,20 +43,53 @@ Conversation Replay lets you:
 - **Slick Design:** Modern UI, nice typography, clean colors, and smooth animations
 - **Embed Anywhere:** Seamlessly integrates into blogs and LMS platforms
 
-Want to see it in action? Open the pre-generated demo replays [examples/london-scam.html](examples/london-scam.html) or [examples/ir-report.html](examples/ir-report.html) directly in your browser.
+Want to see it in action? Open the pre-generated demo replays [examples/london-scam.html](examples/london-scam.html) or [examples/ir-report.html](examples/ir-report.html) in your browser.
 
-## Quick Start
+## Installation
+
+### Run Without Installing (Recommended)
 
-To build your own conversation replay:
+The easiest way to use Conversation Replay—no installation required—after you create the annotated conversation file demo.yaml:
 
 ```bash
-# Prerequisite: Bun (https://bun.sh) or Node.js 18+
+# Using npx (comes with Node.js)
+npx conversation-replay build demo.yaml -o demo.html
 
-# Install dependencies
-bun install
+# Using bunx (comes with Bun)
+bunx conversation-replay build demo.yaml -o demo.html
+```
 
-# Build a demo from YAML
-bun run src/cli.ts build examples/london-scam.yaml -o demo.html
+### Global Install
+
+For frequent use, install globally:
+
+```bash
+# Using npm
+npm install -g conversation-replay
+
+# Using Bun
+bun add -g conversation-replay
+
+# Then run directly
+conversation-replay build demo.yaml -o demo.html
+```
+
+### Install from GitHub
+
+To install the latest development version directly from GitHub:
+
+```bash
+npm install -g github:lennyzeltser/conversation-replay
+```
+
+Note: This requires [Bun](https://bun.sh) to be installed (for the build step).
+
+## Quick Start
+
+Create a YAML file defining your conversation, then generate the HTML:
+
+```bash
+conversation-replay build examples/london-scam.yaml -o demo.html
 ```
 
 Output:

package/dist/cli.js

@@ -7361,6 +7361,12 @@ function generateColorOverrides(colors) {
   if (colors.tabInactiveColor) {
     overrides.push(`--tab-inactive-color: ${colors.tabInactiveColor};`);
   }
+  if (colors.annotationText) {
+    overrides.push(`--annotation-text: ${colors.annotationText};`);
+  }
+  if (colors.annotationBorder) {
+    overrides.push(`--annotation-border: ${colors.annotationBorder};`);
+  }
   if (overrides.length === 0)
     return "";
   return `
@@ -7370,10 +7376,11 @@ function generateColorOverrides(colors) {
     }
   `;
 }
-function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
+function generateCss(theme, hasMultipleScenarios, colors, cornerStyle, initialBlur) {
   const colorOverrides = generateColorOverrides(colors);
   const radius = cornerStyle === "straight" ? "0" : "8px";
   const radiusLg = cornerStyle === "straight" ? "0" : "12px";
+  const blurAmount = initialBlur ?? 1;
   const tabCss = hasMultipleScenarios ? `
     /* Tabs - browser-style integrated with canvas */
     .tabs {
@@ -7391,17 +7398,15 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
       border: 1px solid transparent;
       border-bottom: none;
       background: transparent;
-      color: var(--tab-inactive-color, var(--text-muted));
+      color: var(--tab-inactive-color, var(--text-secondary));
       border-radius: var(--radius) var(--radius) 0 0;
       cursor: pointer;
       font-size: 13px;
       font-weight: 500;
       transition: all 0.2s;
-      opacity: 0.75;
     }
 
     .tab:hover {
-      opacity: 0.9;
       color: var(--text-primary);
     }
 
@@ -7409,7 +7414,6 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
       background: var(--bg-chat);
       color: var(--text-primary);
       border-color: var(--border-color);
-      opacity: 1;
       position: relative;
     }
 
@@ -7480,7 +7484,7 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
       
       --annotation-bg: transparent;
       --annotation-border: var(--color-slate-300);
-      --annotation-text: var(--color-slate-500);
+      --annotation-text: var(--color-slate-600);
 
       --transition-bg: var(--color-primary-50);
       --transition-border: var(--color-primary-300);
@@ -7518,7 +7522,7 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
         --ai-text: #e2e8f0;
 
         --annotation-border: #475569;
-        --annotation-text: #94a3b8;
+        --annotation-text: #cbd5e1;
 
         --border-color: #334155; /* Slate 700 */
         
@@ -7551,7 +7555,7 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
         --ai-text: #e2e8f0;
 
         --annotation-border: #475569;
-        --annotation-text: #94a3b8;
+        --annotation-text: #cbd5e1;
 
         --border-color: #334155; /* Slate 700 */
         
@@ -7730,16 +7734,15 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
 
     body.in-iframe .chat-wrapper {
         box-shadow: none !important; /* Remove wrapper shadow */
-        background: transparent !important;
     }
 
     body.in-iframe .chat-container {
       flex: 1;
       min-height: 0;
-      box-shadow: none !important; /* Remove heavy shadow in iframe usually */
-      border: none !important;
-      background: transparent !important;
-      border-radius: 0 !important; /* Flatten corners for full bleed if needed, or keep them */
+      max-height: none !important; /* Remove height constraint in iframe */
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; /* Subtle shadow in iframe */
+      /* Keep border and background for visual definition */
+      margin-bottom: clamp(70px, 15vh, 120px); /* Responsive space for fixed controls */
     }
 
     body.in-iframe .controls-wrapper {
@@ -7753,9 +7756,6 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
       z-index: 20;
     }
 
-    body.in-iframe .play-overlay {
-        border-radius: 0 !important;
-    }
 
     .chat-messages {
       display: flex;
@@ -7774,8 +7774,8 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
       align-items: center;
       justify-content: center;
       background: rgba(255, 255, 255, 0.1); /* Much more transparent */
-      backdrop-filter: blur(1.5px); /* Very subtle blur */
-      -webkit-backdrop-filter: blur(1.5px);
+      backdrop-filter: blur(${blurAmount}px); /* Subtle blur - configurable via initialBlur */
+      -webkit-backdrop-filter: blur(${blurAmount}px);
       border-radius: var(--radius-lg);
       cursor: pointer;
       transition: opacity 0.4s ease;
@@ -7800,9 +7800,9 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
     }
     
     .play-overlay-icon svg {
-        margin-left: 4px; /* Optical center adjustment for play triangle */
-        width: 20px;
-        height: 20px;
+        margin-left: 5px; /* Optical center adjustment for play triangle */
+        width: 26px;
+        height: 26px;
         fill: var(--accent);
     }
 
@@ -7923,7 +7923,7 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
       width: 100%;
       margin: 24px 0;
       padding: 0 0 0 20px;
-      font-size: 13.5px;
+      font-size: 15px;
       font-style: italic;
       color: var(--annotation-text);
       opacity: 0;
@@ -7953,12 +7953,13 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.05em;
-      color: var(--annotation-border);
+      color: var(--annotation-text);
       margin-bottom: 6px;
       font-style: normal;
       display: flex;
       align-items: center;
       gap: 6px;
+      opacity: 0.8;
     }
 
     .annotation-content {
@@ -8057,11 +8058,10 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
       transition: opacity 0.3s, transform 0.3s;
     }
     
-    /* In iframe, add some breathing room safely away from edges */
+    /* In iframe, match standalone appearance */
     body.in-iframe .controls {
       margin-bottom: 0;
-      background: rgba(255, 255, 255, 0.9);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+      /* Keep same shadow as standalone for consistency */
     }
     
     :root[data-theme="dark"] .controls {
@@ -8070,7 +8070,7 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     }
     
-    body.in-iframe :root[data-theme="dark"] .controls {
+    :root[data-theme="dark"] body.in-iframe .controls {
         background: rgba(30, 41, 59, 0.9);
     }
 
@@ -9203,7 +9203,7 @@ function generateHtml(demo, options = { outputPath: "" }) {
   const hasMultipleScenarios = demo.scenarios.length > 1;
   const timerStyle = demo.meta.timerStyle ?? "circle";
   const cornerStyle = demo.meta.cornerStyle ?? "rounded";
-  const css = generateCss(theme, hasMultipleScenarios, demo.meta.colors, cornerStyle);
+  const css = generateCss(theme, hasMultipleScenarios, demo.meta.colors, cornerStyle, demo.meta.initialBlur);
   const js = generateJs(demo, timerStyle);
   const titleHtml = demo.meta.articleUrl ? `<a href="${escapeHtml(demo.meta.articleUrl)}" class="demo-title-link">${escapeHtml(demo.meta.title)}</a>` : escapeHtml(demo.meta.title);
   const descriptionHtml = demo.meta.description ? `<p class="demo-description">${parseMarkdownLinks(demo.meta.description)}</p>` : "";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "conversation-replay",
-  "version": "0.1.5",
-  "description": "Create animated conversation demos from YAML for security awareness, IR training, and communication skills education",
+  "version": "0.1.7",
+  "description": "Create animated text conversation replays",
   "main": "dist/cli.js",
   "type": "module",
   "bin": {
@@ -16,6 +16,7 @@
     "validate": "bun run src/cli.ts validate",
     "example": "bun run src/cli.ts build examples/london-scam.yaml -o examples/london-scam.html",
     "build:dist": "bun build src/cli.ts --target=node --outfile=dist/cli.js --packages=bundle",
+    "prepare": "bun run build:dist",
     "prepublishOnly": "bun run build:dist"
   },
   "keywords": [