{#if messages.length > 2 && !$mobile}
m.id === activeMessageId) <= 0} aria-disabled={messages.findIndex((m) => m.id === activeMessageId) <= 0} aria-label="Previous message" >
{#each messages as message (message.id)} {@const isUser = message.role === 'user'} {@const isActive = message.id === activeMessageId} {@const isHovered = message.id === hoveredMessageId} {@const markerClasses = isUser ? 'w-2 h-0.5' : 'w-4 h-1'} {@const colorClasses = isActive ? 'bg-gray-900 dark:bg-gray-100' : isHovered ? 'bg-gray-500 dark:bg-gray-500' : 'bg-gray-400 dark:bg-gray-400'}
scrollToMessage(message.id)} on:mouseenter={() => (hoveredMessageId = message.id)} on:mouseleave={() => (hoveredMessageId = null)} aria-label="Navigate to {isUser ? 'user' : 'AI'} message" aria-current={isActive} >
{/each}
m.id === activeMessageId) >= messages.length - 1} aria-disabled={messages.findIndex((m) => m.id === activeMessageId) >= messages.length - 1} aria-label="Next message" >
{/if}