conversation-replay 0.1.9 → 0.1.11

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

@@ -7270,8 +7270,8 @@ import { writeFile } from "node:fs/promises";
 // package.json
 var package_default = {
   name: "conversation-replay",
-  version: "0.1.9",
-  description: "Create animated text conversation replays",
+  version: "0.1.11",
+  description: "Create annotated replays of text conversations",
   main: "dist/cli.js",
   type: "module",
   bin: {
@@ -7477,14 +7477,43 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle, initialBl
     }
 
     @media (max-width: 600px) {
+      .tabs {
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        overflow-y: hidden; /* Prevent vertical movement */
+        -webkit-overflow-scrolling: touch;
+        padding-bottom: 0;
+        max-width: 100%; /* Ensure it doesn't overflow parent */
+        /* 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 {
@@ -7839,6 +7868,11 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle, initialBl
     .play-overlay-icon {
       width: 64px; /* Slightly smaller for elegance */
       height: 64px;
+      flex: 0 0 auto; /* Prevent squishing on small screens */
+      min-width: 64px;
+      min-height: 64px;
+      aspect-ratio: 1/1; /* Enforce square aspect ratio */
+      margin: auto; /* Center in flex container if needed */
       background: white;
       border-radius: 50%;
       display: flex;
@@ -8357,6 +8391,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 {
@@ -8376,13 +8412,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;
       }
 
@@ -9363,7 +9399,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.9",
-  "description": "Create animated text conversation replays",
+  "version": "0.1.11",
+  "description": "Create annotated replays of text conversations",
   "main": "dist/cli.js",
   "type": "module",
   "bin": {