refactor(vscode-ide-companion): extract AssistantMessage as standalone component with Claude Code styles

- Extract AssistantMessage component from inline implementation
- Add status prop support (default, success, error, warning, loading)
- Implement bullet point indicator using CSS pseudo-elements (::before)
- Use inline styles for layout to prevent Tailwind override
- Add AssistantMessage.css with pseudo-element styles for different states
- Import AssistantMessage.css in ClaudeCodeStyles.css

Restores Claude Code DOM structure and styling:
- Outer container with padding-left: 30px for bullet spacing
- Bullet point colors based on status (green, red, yellow, gray)
- Loading state with pulse animation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yiliang114
2025-11-23 21:44:40 +08:00
parent de8ea0678d
commit 4f964b5281
3 changed files with 108 additions and 31 deletions

View File

@@ -19,19 +19,7 @@
@import './components/Timeline.css';
@import './components/shared/FileLink.css';
@import './components/toolcalls/shared/DiffDisplay.css';
/* ===========================
Header Styles (from Claude Code .he)
=========================== */
.chat-header {
display: flex;
border-bottom: 1px solid var(--app-primary-border-color);
padding: 6px 10px;
gap: 4px;
background-color: var(--app-header-background);
justify-content: flex-start;
user-select: none;
}
@import './components/messages/AssistantMessage.css';
/* ===========================
Session Selector Button (from Claude Code .E)