b9c1bd6ff1
Major UX improvements to conversation display and state management. Scroll behavior (SessionCard.js): - Replace scroll-position tracking with wheel-event intent detection - Accumulate scroll-up distance before disabling sticky mode (50px threshold) - Re-enable sticky on scroll-down when near bottom (100px threshold) - Always scroll to bottom on first load or user's own message submission - Use requestAnimationFrame for smooth scroll positioning Optimistic updates (App.js): - Immediately show user messages before API confirmation - Remove optimistic message on send failure - Eliminates perceived latency when sending responses Error tracking integration (App.js): - Wire up trackError/clearErrorCount for API operations - Track: state fetch, conversation fetch, respond, dismiss, SSE init/parse - Clear error counts on successful operations - Clear SSE event cache on reconnect to force refresh Conversation management (App.js): - Use mtime_ns (preferred) or last_event_at for change detection - Clean up conversation cache when sessions are dismissed - Add modalSessionRef for stable reference across renders Message stability (ChatMessages.js): - Prefer server-assigned message IDs for React keys - Fallback to role+timestamp+index for legacy messages Input UX (SimpleInput.js): - Auto-refocus textarea after successful submission - Use setTimeout to ensure React has re-rendered first Sorting simplification (status.js): - Remove status-based group/session reordering - Return groups in API order (server handles sorting) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
40 lines
1.3 KiB
JavaScript
40 lines
1.3 KiB
JavaScript
import { html } from '../lib/preact.js';
|
|
import { getUserMessageBg } from '../utils/status.js';
|
|
import { MessageBubble, filterDisplayMessages } from './MessageBubble.js';
|
|
|
|
function getMessageKey(msg, index) {
|
|
// Server-assigned ID (preferred)
|
|
if (msg.id) return msg.id;
|
|
// Fallback: role + timestamp + index (for legacy/edge cases)
|
|
return `${msg.role}-${msg.timestamp || ''}-${index}`;
|
|
}
|
|
|
|
export function ChatMessages({ messages, status, limit = 20 }) {
|
|
const userBgClass = getUserMessageBg(status);
|
|
|
|
if (!messages || messages.length === 0) {
|
|
return html`
|
|
<div class="flex h-full items-center justify-center rounded-xl border border-dashed border-selection/70 bg-bg/30 px-4 text-center text-sm text-dim">
|
|
No messages to show
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
const allDisplayMessages = filterDisplayMessages(messages);
|
|
const displayMessages = limit ? allDisplayMessages.slice(-limit) : allDisplayMessages;
|
|
const offset = allDisplayMessages.length - displayMessages.length;
|
|
|
|
return html`
|
|
<div class="space-y-2.5">
|
|
${displayMessages.map((msg, i) => html`
|
|
<${MessageBubble}
|
|
key=${getMessageKey(msg, offset + i)}
|
|
msg=${msg}
|
|
userBg=${userBgClass}
|
|
compact=${true}
|
|
/>
|
|
`)}
|
|
</div>
|
|
`;
|
|
}
|