indusagi-coding-agent 0.1.22 → 0.1.24

package/dist/modes/interactive/components/user-message.js

@@ -1,7 +1,192 @@
 import { Container, Markdown, Spacer } from "indusagi/tui";
 import { getMarkdownTheme, theme } from "../theme/theme.js";
 /**
- * Component that renders a user message
+ * ============================================================================
+ * USER MESSAGE COMPONENT - RENDERING MODULE
+ * ============================================================================
+ *
+ * PURPOSE:
+ * ============================================================================
+ * Renders user input messages with distinctive background styling and
+ * formatting. This component is the core renderer for all human user prompts
+ * in the interactive chat interface. User messages are visually distinguished
+ * from assistant messages through background color and text color.
+ *
+ * DESIGN PRINCIPLE:
+ * User messages are enclosed in colored backgrounds to clearly distinguish
+ * them from assistant responses. This improves visual clarity in long
+ * conversations where message boundaries must be obvious at a glance.
+ *
+ * MESSAGE CONTENT:
+ * - Text: Full markdown support (lists, code, emphasis, links, etc.)
+ * - Images: Handled by markdown renderer (embedding/fallback)
+ * - Skill blocks: Parsed and removed before rendering (rendered separately)
+ * - Code blocks: Rendered with syntax highlighting
+ *
+ * DATA FLOW:
+ * ============================================================================
+ * User Input Pipeline:
+ *   User types message + presses Enter
+ *     ↓
+ *   CustomEditor captures input text
+ *     ↓
+ *   InteractiveMode.handleCommand() or session.prompt(text)
+ *     ↓
+ *   AgentSession processes request
+ *     ↓
+ *   Session emits message_streamed event with user message
+ *     ↓
+ *   InteractiveMode.subscribeToAgent() receives event
+ *     ↓
+ *   addMessageToChat() called with user message
+ *     ↓
+ *   UserMessageComponent instantiated with text
+ *     ↓
+ *   Component rendered to chatContainer
+ *     ↓
+ *   TUI invalidate() and requestRender()
+ *     ↓
+ *   Terminal displays styled user message with background
+ *
+ * Component Lifecycle:
+ *   1. Constructor: Called immediately when message created
+ *   2. Text passed as parameter (complete, not streamed)
+ *   3. Children added: Spacer + Markdown
+ *   4. Theme applied: userMessageBg and userMessageText colors
+ *   5. Displayed in chat container
+ *   6. Static: No updates after creation (user messages don't stream)
+ *
+ * RENDERING PIPELINE:
+ * ============================================================================
+ * Layout Structure (ASCII):
+ *   ┌─────────────────────────────────────────────────────────┐
+ *   │                 [Spacer 1 line]                         │  ← Top spacing
+ *   ├─────────────────────────────────────────────────────────┤
+ *   │ ████████████████████████████████████████████████████████ │
+ *   │ █ User Message Text (markdown rendered)                █  ← Background wrap
+ *   │ █ with styling, code blocks, lists, etc.               █
+ *   │ ████████████████████████████████████████████████████████ │
+ *   └─────────────────────────────────────────────────────────┘
+ *
+ * Rendering Order:
+ * 1. Spacer(1): Top margin (blank line above message)
+ * 2. Markdown: Full text rendering with:
+ *    - paddingY=1 (vertical padding inside background)
+ *    - paddingX=1 (horizontal padding inside background)
+ *    - bgColor() function: background color wrapper
+ *    - color() function: text color wrapper
+ *
+ * Padding Rules:
+ *   - Top/bottom padding: 1 line (visual separation from other messages)
+ *   - Left/right padding: 1 character (space between text and edge)
+ *   - Total width: terminal width (minus margins)
+ *
+ * STYLING/FORMATTING:
+ * ============================================================================
+ * Color Scheme (from theme):
+ *   - Background: theme.bg("userMessageBg", text)
+ *   - Text: theme.fg("userMessageText", text)
+ *   - Both applied via Markdown constructor options
+ *   - Overrides markdown theme colors within userMessageBg
+ *
+ * Markdown Content:
+ *   - Code blocks: Syntax highlighted within background
+ *   - Lists: Rendered with bullets/numbers within background
+ *   - Links: Styled as links within background
+ *   - Emphasis: Bold/italic within background
+ *   - Code inline: Monospace within background
+ *
+ * Component Nesting:
+ *   - UserMessageComponent (Container)
+ *     ├── Spacer(1) ← Top margin
+ *     └── Markdown(text) ← Full markdown with background
+ *         └── styled via bgColor and color functions
+ *
+ * EXAMPLES:
+ * ============================================================================
+ *
+ * Example 1: Simple Text
+ * ──────────────────────
+ * Input: "Hello, what's 2 + 2?"
+ * Rendered:
+ *   <blank line>
+ *   ┌──────────────────────────────────────────────┐
+ *   │ Hello, what's 2 + 2?                         │
+ *   └──────────────────────────────────────────────┘
+ *
+ * Example 2: Message with Code
+ * ──────────────────────────────
+ * Input: "Can you read this file?\n\n```bash\ncat file.txt\n```"
+ * Rendered:
+ *   <blank line>
+ *   ┌──────────────────────────────────────────────┐
+ *   │ Can you read this file?                      │
+ *   │                                              │
+ *   │ $ cat file.txt                               │
+ *   └──────────────────────────────────────────────┘
+ *
+ * Example 3: Message with Markdown Formatting
+ * ────────────────────────────────────────────
+ * Input: "Please do these tasks:\n\n1. **Create** file\n2. *Edit* it"
+ * Rendered:
+ *   <blank line>
+ *   ┌──────────────────────────────────────────────┐
+ *   │ Please do these tasks:                       │
+ *   │                                              │
+ *   │ 1. Create file                               │
+ *   │ 2. Edit it                                   │
+ *   └──────────────────────────────────────────────┘
+ *
+ * Example 4: Multi-line Message
+ * ─────────────────────────────
+ * Input: "This is a longer message\nwith multiple lines\nof text"
+ * Rendered:
+ *   <blank line>
+ *   ┌──────────────────────────────────────────────┐
+ *   │ This is a longer message                     │
+ *   │ with multiple lines                          │
+ *   │ of text                                      │
+ *   └──────────────────────────────────────────────┘
+ *
+ * INTEGRATION:
+ * ============================================================================
+ * TUI Integration:
+ *   - Extends Container (indusagi/tui base component)
+ *   - Uses Markdown and Spacer from indusagi/tui
+ *   - Theme system: theme.bg(), theme.fg()
+ *   - Automatic text wrapping to terminal width
+ *   - ANSI color code support via theme functions
+ *
+ * Session Integration:
+ *   - Created in InteractiveMode.addMessageToChat() for user messages
+ *   - Called during renderSessionContext() for all user messages
+ *   - Stored in chatContainer for persistent display
+ *   - Optional: added to editor history for Up arrow recall
+ *
+ * Theme Integration:
+ *   - userMessageBg color: Background color (theme.json)
+ *   - userMessageText color: Foreground color (theme.json)
+ *   - MarkdownTheme: Used for code highlighting within background
+ *   - Colors update: No re-rendering needed (colors applied at render time)
+ *
+ * Editor Integration:
+ *   - User message text optionally added to editor.history
+ *   - Allows recalling previous messages with Up arrow
+ *   - Configured via populateHistory parameter
+ *
+ * Performance Notes:
+ *   - Stateless component: No updates after creation
+ *   - Single render pass: Markdown parsed once
+ *   - Minimal memory: No streaming state to maintain
+ *   - Suitable for large conversations (1000+ messages)
+ *
+ * API:
+ * ============================================================================
+ * Constructor(text, markdownTheme):
+ *   - text: User message text (supports full markdown)
+ *   - markdownTheme: Theme for code highlighting (default: getMarkdownTheme())
+ *
+ * No public methods (stateless component)
  */
 export class UserMessageComponent extends Container {
     constructor(text, markdownTheme = getMarkdownTheme()) {

package/dist/modes/interactive/components/user-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-message.js","sourceRoot":"","sources":["../../../../src/modes/interactive/components/user-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAsB,MAAM,EAAE,MAAM,cAAc,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,SAAS;IAClD,YAAY,IAAY,EAAE,gBAA+B,gBAAgB,EAAE;QAC1E,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,QAAQ,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7B,IAAI,CAAC,QAAQ,CACZ,IAAI,QAAQ,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,aAAa,EAAE;YACvC,OAAO,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,eAAe,EAAE,IAAI,CAAC;YAC1D,KAAK,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,iBAAiB,EAAE,IAAI,CAAC;SAC1D,CAAC,CACF,CAAC;IACH,CAAC;CACD"}
+{"version":3,"file":"user-message.js","sourceRoot":"","sources":["../../../../src/modes/interactive/components/user-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAsB,MAAM,EAAE,MAAM,cAAc,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2LG;AACH,MAAM,OAAO,oBAAqB,SAAQ,SAAS;IAClD,YAAY,IAAY,EAAE,gBAA+B,gBAAgB,EAAE;QAC1E,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,QAAQ,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7B,IAAI,CAAC,QAAQ,CACZ,IAAI,QAAQ,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,aAAa,EAAE;YACvC,OAAO,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,eAAe,EAAE,IAAI,CAAC;YAC1D,KAAK,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,iBAAiB,EAAE,IAAI,CAAC;SAC1D,CAAC,CACF,CAAC;IACH,CAAC;CACD"}