feat: Story 11 - Left-align text and add syntax highlighting
Implemented Story 11: Text Alignment and Syntax Highlighting - Removed center-alignment from chat container (text-align: center) - Added left-alignment to markdown body and code blocks - Integrated react-syntax-highlighter with react-markdown - Added syntax highlighting for code blocks using oneDark theme - Supports JavaScript, TypeScript, Rust, Python, JSON, Markdown, Shell, and more - Inline code maintains simple styling without full highlighting - All code blocks are now left-aligned for better readability Fixed: Agent over-aggressive file writing behavior - Refined system prompt to distinguish between: * 'show/example/how does' → respond with code in chat * 'create/add/implement/fix' → use write_file tool - Removed aggressive AGENT DIRECTIVE prefix from user messages - Softened reminder message to reflect nuanced behavior - Agent can now both teach (show examples) and implement (write files) Updated Specs - Added Text Alignment and Readability section to UI_UX.md - Added Syntax Highlighting section with implementation details - Updated SDSW workflow: acceptance criteria marked complete only after user acceptance Dependencies - Added react-syntax-highlighter and @types/react-syntax-highlighter
This commit is contained in:
Dave
@@ -67,10 +67,15 @@ When the user asks for a feature, follow this 4-step loop strictly:
|
||||
### Step 4: Verification (Close)
|
||||
* **Action:** Write a test case that maps directly to the Acceptance Criteria in the Story.
|
||||
* **Action:** Run compilation and make sure it succeeds without errors. Fix warnings if possible. Run tests and make sure they all pass before proceeding. Ask questions here if needed.
|
||||
* **Action:** Ask the user to accept the story.
|
||||
* **Action:** When the user accepts, move the story file to `stories/archive/` (e.g., `mv stories/XX_story_name.md stories/archive/`).
|
||||
* **Action:** Commit the archive move to the feature branch.
|
||||
* **Action:** Tell the user to **Squash Merge** the feature branch (e.g., `git merge --squash feature/story-name`) and commit. This ensures the main history reflects one atomic commit per Story, including the archived story file.
|
||||
* **Action:** Ask the user to accept the story. **Wait for user acceptance.**
|
||||
* **Action:** When the user accepts:
|
||||
1. Mark the acceptance criteria as complete (change `[ ]` to `[x]`)
|
||||
2. Move the story file to `stories/archive/` (e.g., `mv stories/XX_story_name.md stories/archive/`)
|
||||
3. Commit both changes to the feature branch
|
||||
4. Perform the squash merge: `git merge --squash feature/story-name`
|
||||
5. Commit to master with a comprehensive commit message
|
||||
6. Delete the feature branch: `git branch -D feature/story-name`
|
||||
* **Important:** Do NOT mark acceptance criteria as complete before user acceptance. Only mark them complete when the user explicitly accepts the story.
|
||||
|
||||
|
||||
---
|
||||
|
||||
@@ -82,3 +82,78 @@ Scroll bars should be hidden while maintaining full scroll functionality.
|
||||
* Maintain `overflow: auto` or `overflow-y: scroll` to preserve scroll functionality
|
||||
* Ensure `overflow-x: hidden` where horizontal scroll is not needed
|
||||
* Test with very long messages and large tool outputs to ensure no layout breaking
|
||||
|
||||
## Text Alignment and Readability
|
||||
|
||||
### Problem
|
||||
Center-aligned text in a chat interface is unconventional and reduces readability, especially for code blocks and long-form content. Standard chat UIs align messages differently based on the sender.
|
||||
|
||||
### Solution: Context-Appropriate Text Alignment
|
||||
Messages should follow standard chat UI conventions with proper alignment based on message type.
|
||||
|
||||
### Requirements
|
||||
|
||||
1. **User Messages:** Right-aligned (standard pattern showing messages sent by the user)
|
||||
2. **Assistant Messages:** Left-aligned (standard pattern showing messages received)
|
||||
3. **Tool Outputs:** Left-aligned (part of the system/assistant response flow)
|
||||
4. **Code Blocks:** Always left-aligned regardless of message type (for readability)
|
||||
5. **Container:** Remove any center-alignment from the chat container
|
||||
6. **Max-Width:** Maintain current max-width constraint (e.g., 768px) for optimal readability
|
||||
7. **Spacing:** Maintain proper padding and visual hierarchy between messages
|
||||
|
||||
### Implementation Notes
|
||||
* Check for `textAlign: "center"` in inline styles and remove
|
||||
* Check for `text-align: center` in CSS and remove from chat-related classes
|
||||
* Ensure flexbox alignment is set appropriately:
|
||||
* User messages: `alignItems: "flex-end"`
|
||||
* Assistant/Tool messages: `alignItems: "flex-start"`
|
||||
* Code blocks should have `text-align: left` explicitly set
|
||||
|
||||
## Syntax Highlighting
|
||||
|
||||
### Problem
|
||||
Code blocks in assistant responses currently lack syntax highlighting, making them harder to read and understand. Developers expect colored syntax highlighting similar to their code editors.
|
||||
|
||||
### Solution: Syntax Highlighting for Code Blocks
|
||||
Integrate syntax highlighting into markdown code blocks rendered by the assistant.
|
||||
|
||||
### Requirements
|
||||
|
||||
1. **Languages Supported:** At minimum:
|
||||
- JavaScript/TypeScript
|
||||
- Rust
|
||||
- Python
|
||||
- JSON
|
||||
- Markdown
|
||||
- Shell/Bash
|
||||
- HTML/CSS
|
||||
- SQL
|
||||
2. **Theme:** Use a dark theme that complements the existing dark UI (e.g., `oneDark`, `vsDark`, `dracula`)
|
||||
3. **Integration:** Work seamlessly with `react-markdown` component
|
||||
4. **Performance:** Should not significantly impact rendering performance
|
||||
5. **Fallback:** Plain monospace text for unrecognized languages
|
||||
6. **Inline Code:** Inline code (single backticks) should maintain simple styling without full syntax highlighting
|
||||
|
||||
### Implementation Notes
|
||||
* Use `react-syntax-highlighter` library with `react-markdown`
|
||||
* Or use `rehype-highlight` plugin for `react-markdown`
|
||||
* Configure with a dark theme preset (e.g., `oneDark` from `react-syntax-highlighter/dist/esm/styles/prism`)
|
||||
* Apply to code blocks via `react-markdown` components prop:
|
||||
```tsx
|
||||
<Markdown
|
||||
components={{
|
||||
code: ({node, inline, className, children, ...props}) => {
|
||||
const match = /language-(\w+)/.exec(className || '');
|
||||
return !inline && match ? (
|
||||
<SyntaxHighlighter style={oneDark} language={match[1]} {...props}>
|
||||
{String(children).replace(/\n$/, '')}
|
||||
</SyntaxHighlighter>
|
||||
) : (
|
||||
<code className={className} {...props}>{children}</code>
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
```
|
||||
* Ensure syntax highlighted code blocks are left-aligned
|
||||
* Test with various code samples to ensure proper rendering
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
all text in the chat window is currently centred, which is weird especially for code. Make it more readable.
|
||||
40
.living_spec/stories/archive/11_make_text_not_centred.md
Normal file
40
.living_spec/stories/archive/11_make_text_not_centred.md
Normal file
@@ -0,0 +1,40 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user