4740922b8d
Removes unnecessary complexity from ChatMessages while adding proper scroll management to SessionCard: ChatMessages.js: - Remove scroll position tracking refs and effects (wasAtBottomRef, prevMessagesLenRef, containerRef) - Remove spinner display logic (moved to parent components) - Simplify to pure message filtering and rendering - Add display limit (last 20 messages) with offset tracking for keys SessionCard.js: - Add chatPaneRef for scroll container - Add useEffect to scroll to bottom when conversation updates - Provides natural "follow" behavior for new messages The refactor moves scroll responsibility to the component that owns the scroll container, reducing prop drilling and effect complexity. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
33 lines
1.0 KiB
JavaScript
33 lines
1.0 KiB
JavaScript
import { html } from '../lib/preact.js';
|
|
import { getUserMessageBg } from '../utils/status.js';
|
|
import { MessageBubble, filterDisplayMessages } from './MessageBubble.js';
|
|
|
|
export function ChatMessages({ messages, status }) {
|
|
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 yet
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
const allDisplayMessages = filterDisplayMessages(messages);
|
|
const displayMessages = allDisplayMessages.slice(-20);
|
|
const offset = allDisplayMessages.length - displayMessages.length;
|
|
|
|
return html`
|
|
<div class="space-y-2.5">
|
|
${displayMessages.map((msg, i) => html`
|
|
<${MessageBubble}
|
|
key=${`${msg.role}-${msg.timestamp || (offset + i)}`}
|
|
msg=${msg}
|
|
userBg=${userBgClass}
|
|
compact=${true}
|
|
/>
|
|
`)}
|
|
</div>
|
|
`;
|
|
}
|