da08d7a588
Replace the monolithic single-file dashboards (dashboard.html,
dashboard-preact.html) with a proper modular directory structure:
dashboard/
index.html - Entry point, loads main.js
main.js - App bootstrap, mounts <App> to #root
styles.css - Global styles (dark theme, typography)
components/
App.js - Root component, state management, polling
Header.js - Top bar with refresh/timing info
Sidebar.js - Project tree navigation
SessionCard.js - Individual session card with status/actions
SessionGroup.js - Group sessions by project path
Modal.js - Full conversation viewer overlay
ChatMessages.js - Message list with role styling
MessageBubble.js - Individual message with markdown
QuestionBlock.js - User question input with quick options
EmptyState.js - "No sessions" placeholder
OptionButton.js - Quick response button component
SimpleInput.js - Text input with send button
lib/
preact.js - Preact + htm ESM bundle (CDN shim)
markdown.js - Lightweight markdown-to-HTML renderer
utils/
api.js - fetch wrappers for /api/* endpoints
formatting.js - Time formatting, truncation helpers
status.js - Session status logic, action availability
This structure enables:
- Browser-native ES modules (no build step required)
- Component reuse and isolation
- Easier styling and theming
- IDE support for component navigation
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
55 lines
2.1 KiB
JavaScript
55 lines
2.1 KiB
JavaScript
import { html } from '../lib/preact.js';
|
|
import { renderContent, renderToolCalls, renderThinking } from '../lib/markdown.js';
|
|
|
|
/**
|
|
* Single message bubble used by both the card chat view and modal view.
|
|
* All message rendering logic lives here — card and modal only differ in
|
|
* container layout, not in how individual messages are rendered.
|
|
*
|
|
* @param {object} msg - Message object: { role, content, thinking, tool_calls, timestamp }
|
|
* @param {string} userBg - Tailwind classes for user message background
|
|
* @param {boolean} compact - true = card view (smaller), false = modal view (larger)
|
|
* @param {function} formatTime - Optional timestamp formatter (modal only)
|
|
*/
|
|
export function MessageBubble({ msg, userBg, compact = false, formatTime }) {
|
|
const isUser = msg.role === 'user';
|
|
const pad = compact ? 'px-3 py-2.5' : 'px-4 py-3';
|
|
const maxW = compact ? 'max-w-[92%]' : 'max-w-[86%]';
|
|
|
|
return html`
|
|
<div class="flex ${isUser ? 'justify-end' : 'justify-start'} animate-fade-in-up">
|
|
<div
|
|
class="${maxW} rounded-2xl ${pad} ${
|
|
isUser
|
|
? `${userBg} rounded-br-md shadow-[0_3px_8px_rgba(16,24,36,0.22)]`
|
|
: 'border border-selection/75 bg-surface2/75 text-fg rounded-bl-md'
|
|
}"
|
|
>
|
|
<div class="mb-1 font-mono text-micro uppercase tracking-[0.14em] text-dim">
|
|
${isUser ? 'Operator' : 'Agent'}
|
|
</div>
|
|
${msg.thinking && renderThinking(msg.thinking)}
|
|
<div class="whitespace-pre-wrap break-words text-ui font-chat">
|
|
${renderContent(msg.content)}
|
|
</div>
|
|
${renderToolCalls(msg.tool_calls)}
|
|
${formatTime && msg.timestamp && html`
|
|
<div class="mt-2 font-mono text-label text-dim">
|
|
${formatTime(msg.timestamp)}
|
|
</div>
|
|
`}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* Filter messages for display — removes tool-call-only messages
|
|
* that have no text or thinking (would render as empty bubbles).
|
|
*/
|
|
export function filterDisplayMessages(messages) {
|
|
return messages.filter(msg =>
|
|
msg.content || msg.thinking || msg.role === 'user'
|
|
);
|
|
}
|