---
name: Left-Align Chat Text and Add Syntax Highlighting
---

# Story: Left-Align Chat Text and Add Syntax Highlighting

## User Story
**As a** User
**I want** chat messages and code to be left-aligned instead of centered, with proper syntax highlighting for code blocks
**So that** the text is more readable, follows standard chat UI conventions, and code is easier to understand.

## Acceptance Criteria
*   [x] User messages should be right-aligned (standard chat pattern)
*   [x] Assistant messages should be left-aligned
*   [x] Tool outputs should be left-aligned
*   [x] Code blocks and monospace text should be left-aligned
*   [x] Remove any center-alignment styling from the chat container
*   [x] Maintain the current max-width constraint for readability
*   [x] Ensure proper spacing and padding for visual hierarchy
*   [x] Add syntax highlighting for code blocks in assistant messages
*   [x] Support common languages: JavaScript, TypeScript, Rust, Python, JSON, Markdown, Shell, etc.
*   [x] Syntax highlighting should work with the dark theme

## Out of Scope
*   Redesigning the entire chat layout
*   Adding avatars or profile pictures
*   Changing the overall color scheme or theme (syntax highlighting colors should complement existing dark theme)
*   Custom themes for syntax highlighting

## Implementation Notes
*   Check `Chat.tsx` for any `textAlign: "center"` styles
*   Check `App.css` for any center-alignment rules affecting the chat
*   User messages should align to the right with appropriate styling
*   Assistant and tool messages should align to the left
*   Code blocks should always be left-aligned for readability
*   For syntax highlighting, consider using:
    *   `react-syntax-highlighter` (works with react-markdown)
    *   Or `prism-react-renderer` for lighter bundle size
    *   Or integrate with `rehype-highlight` plugin for react-markdown
*   Use a dark theme preset like `oneDark`, `vsDark`, or `dracula`
*   Syntax highlighting should be applied to markdown code blocks automatically

## Related Functional Specs
*   Functional Spec: UI/UX