conversation-replay 0.1.8 → 0.1.10

package/README.md

@@ -1,35 +1,20 @@
 # Conversation Replay
 
-Create animated replays of text conversations.
+Create annotated replays of text conversations.
 
 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)
-    - [Step Types](#step-types)
-    - [Message Options](#message-options)
-    - [Meta Options](#meta-options)
-  - [Output Features](#output-features)
-  - [Embedding in Websites](#embedding-in-websites)
-    - [Automatic "Seamless" Mode](#automatic-seamless-mode)
-    - [Basic Iframe Code](#basic-iframe-code)
-    - [Dark Mode Sync](#dark-mode-sync)
-  - [Multi-Scenario Demos](#multi-scenario-demos)
-  - [Development](#development)
-    - [Repository Structure](#repository-structure)
-    - [Commands](#commands)
-  - [AI Agent Quick Reference](#ai-agent-quick-reference)
-    - [Key Files](#key-files)
-    - [Architecture](#architecture)
-  - [Threat Modeling](#threat-modeling)
-  - [Author](#author)
+- [How This Is Useful](#how-this-is-useful)
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [YAML Schema](#yaml-schema)
+- [Output Features](#output-features)
+- [Embedding in Websites](#embedding-in-websites)
+- [Multi-Scenario Demos](#multi-scenario-demos)
+- [Development](#development)
+- [AI Agent Quick Reference](#ai-agent-quick-reference)
+- [Threat Modeling](#threat-modeling)
+- [Author](#author)
 
 
 ## How This Is Useful
@@ -43,13 +28,17 @@ 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) in your browser.
+To see it in action, see the replays embedded in the following articles as well as the corresponding files in the [examples folder](examples/).
+
+* [Write Good Incident Response Reports Using Your AI Tool](https://zeltser.com/good-ir-reports-with-ai)
+* [When Bots Chat With Social Network Participants
+](https://zeltser.com/bots-chatting-on-social-networks)
 
 ## Installation
 
 ### Run Without Installing (Recommended)
 
-The easiest way to use Conversation Replay—no installation required—after you create the annotated conversation file demo.yaml:
+The easiest way to use Conversation Replay (no installation required) after you create the annotated conversation file demo.yaml:
 
 ```bash
 # Using npx (comes with Node.js)
@@ -189,16 +178,16 @@ meta:
 ```
 
 Custom colors (New Slate/Indigo Default Palette):
-You can override any color, but the defaults are designed for a premium look:
+You can override any color:
 ```yaml
 meta:
   colors:
     accent: "#4f46e5"            # Indigo 600 (Buttons, links)
     pageBg: "#f8fafc"            # Slate 50 (Page background standalone)
     canvasBg: "#ffffff"          # Chat container background
-    leftBg: "#eef2ff"            # Indigo 50 (Left/User bubble)
+    leftBg: "#eef2ff"            # Indigo 50 (Left bubble)
     leftBorder: "transparent"    # Border for left bubble
-    rightBg: "#f1f5f9"           # Slate 100 (Right/AI bubble)
+    rightBg: "#f1f5f9"           # Slate 100 (Right bubble)
     rightBorder: "transparent"   # Border for right bubble
     tabInactiveColor: "#94a3b8"  # Slate 400
     annotationText: "#475569"    # Slate 600 (Annotation text color)

package/dist/cli.js

@@ -7267,7 +7267,56 @@ async function loadDemo(filePath) {
 
 // src/generator.ts
 import { writeFile } from "node:fs/promises";
-var VERSION = "0.1.0";
+// package.json
+var package_default = {
+  name: "conversation-replay",
+  version: "0.1.10",
+  description: "Create annotated replays of text conversations",
+  main: "dist/cli.js",
+  type: "module",
+  bin: {
+    "conversation-replay": "dist/cli.js"
+  },
+  files: [
+    "dist",
+    "README.md"
+  ],
+  scripts: {
+    build: "bun run src/cli.ts build",
+    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: [
+    "conversation",
+    "demo",
+    "animation",
+    "security-awareness",
+    "training",
+    "chat",
+    "replay"
+  ],
+  author: "Lenny Zeltser",
+  license: "MIT",
+  repository: {
+    type: "git",
+    url: "https://github.com/lennyzeltser/conversation-replay"
+  },
+  devDependencies: {
+    "@types/bun": "latest"
+  },
+  peerDependencies: {
+    typescript: "^5"
+  },
+  dependencies: {
+    yaml: "^2.8.2"
+  }
+};
+
+// src/generator.ts
+var VERSION = package_default.version;
 function escapeHtml(text) {
   return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
 }
@@ -7428,14 +7477,41 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle, initialBl
     }
 
     @media (max-width: 600px) {
+      .tabs {
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        padding-bottom: 0;
+        /* Hide scrollbars */
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+      }
+      
+      .tabs::-webkit-scrollbar {
+        display: none;
+      }
+
       .tab {
         padding: 10px 14px;
         font-size: 12px;
-        flex: 1;
+        flex: 0 0 auto; /* Don't shrink, let them scroll */
         text-align: center;
         min-width: 0;
+        white-space: nowrap;
       }
     }
+    
+    /* In iframe, ensure non-active tabs are visible against potentially dark/complex backgrounds */
+    body.in-iframe .tab:not(.active) {
+       background: rgba(255, 255, 255, 0.5);
+       backdrop-filter: blur(4px);
+       -webkit-backdrop-filter: blur(4px);
+    }
+    
+    :root[data-theme="dark"] body.in-iframe .tab:not(.active) {
+       background: rgba(30, 41, 59, 0.5);
+       color: rgba(248, 250, 252, 0.7);
+    }
   ` : "";
   return `
     *, *::before, *::after {
@@ -7683,7 +7759,7 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle, initialBl
         display: none;  /* Chrome Safari */
     }
 
-    .chat-container.fading {
+    .chat-container.fading .chat-scroll-area {
       opacity: 0;
     }
 
@@ -7741,7 +7817,7 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle, initialBl
       min-height: 0;
       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 */
+      background: var(--bg-chat) !important; /* Ensure opaque background in iframe */
       margin-bottom: clamp(70px, 15vh, 120px); /* Responsive space for fixed controls */
     }
 
@@ -7790,6 +7866,9 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle, initialBl
     .play-overlay-icon {
       width: 64px; /* Slightly smaller for elegance */
       height: 64px;
+      flex-shrink: 0; /* Prevent squishing on small screens */
+      min-width: 64px;
+      min-height: 64px;
       background: white;
       border-radius: 50%;
       display: flex;
@@ -8308,6 +8387,8 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle, initialBl
       .play-overlay-icon {
         width: 70px;
         height: 70px;
+        min-width: 70px;
+        min-height: 70px;
       }
 
       .play-overlay-icon svg {
@@ -8327,13 +8408,13 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle, initialBl
         padding: 8px;
       }
 
+      /* Very small phones - keep scrolling tabs instead of stacking */
       .tabs {
-        flex-direction: column;
         gap: 4px;
       }
 
       .tab {
-        width: 100%;
+        /* width: 100%; Removed to prevent full stacking */
         text-align: center;
       }
 
@@ -9314,7 +9395,7 @@ async function buildDemo(demo, outputPath, options = {}) {
 
 // src/cli.ts
 var HELP = `
-conversation-replay - Create animated conversation demos from YAML
+conversation-replay - Create annotated replays of text conversations from YAML
 
 Usage:
   conversation-replay build <scenario.yaml> -o <output.html> [options]

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "conversation-replay",
-  "version": "0.1.8",
-  "description": "Create animated text conversation replays",
+  "version": "0.1.10",
+  "description": "Create annotated replays of text conversations",
   "main": "dist/cli.js",
   "type": "module",
   "bin": {