<scroll-view
  class="message-list"
  scroll-y="{{true}}"
  scroll-top="{{initialScrollTop}}"
  scroll-into-view="{{scrollTarget}}"
  scroll-with-animation="{{pendingScrollMode === 'append-bottom' || pendingScrollMode === 'group-expand'}}"
  bindscrolltoupper="onScrollToUpper"
  bindscroll="onScroll"
  bindtouchstart="onUserScrollStart"
  upper-threshold="50"
>
  <view class="message-list__content">
    <block wx:if="{{loading && renderItems.length === 0}}">
      <view class="message-skeleton-list">
        <view wx:for="{{skeletonRows}}" wx:key="key" class="message-skeleton">
          <view class="message-skeleton__avatar"></view>
          <view class="message-skeleton__body">
            <view class="message-skeleton__header">
              <view class="message-skeleton__author" style="width: {{item.authorWidth}}"></view>
              <view class="message-skeleton__time"></view>
            </view>
            <view class="message-skeleton__line" style="width: {{item.lineWidth}}"></view>
            <view class="message-skeleton__line message-skeleton__line--short" style="width: {{item.shortLineWidth}}"></view>
          </view>
        </view>
      </view>
    </block>
    <block wx:else>
      <block wx:if="{{error}}">
        <view class="error">{{error}}</view>
      </block>
      <view wx:if="{{topMessage}}" class="message-item">
        <message-bubble
          message="{{topMessage}}"
          locale-version="{{localeVersion}}"
          show-author="{{true}}"
          last-in-group="{{true}}"
          bindmentiontap="onMentionTap"
          bindagenttap="onAgentTap"
          bindagentlongpress="onAgentLongPress"
        />
      </view>
      <loading-dots wx:if="{{loadingMore && renderItems.length > 0}}" />
      <block wx:for="{{renderItems}}" wx:key="key">
        <view wx:if="{{item.showUnreadDivider}}" id="message-list-unread-divider" class="message-list__unread-divider">
          <view class="message-list__unread-divider-line"></view>
          <text class="message-list__unread-divider-label">{{unreadDividerLabel}}</text>
          <view class="message-list__unread-divider-line"></view>
        </view>
        <view wx:if="{{item.kind === 'app-message-group'}}" id="{{item.anchorId}}" class="message-item message-item--group {{index > 0 || topMessage ? 'message-item--group-start' : ''}}">
          <app-message-group
            items="{{item.items}}"
            locale-version="{{localeVersion}}"
            group-key="{{item.groupKey}}"
            expanded="{{item.expanded}}"
            display-name="{{item.displayName}}"
            avatar-url="{{item.avatarUrl}}"
            latest-preview="{{item.latestPreview}}"
            latest-timestamp="{{item.latestTimestamp}}"
            homogeneous="{{item.homogeneous}}"
            count-label="{{item.countLabel}}"
            expand-label="{{item.expandLabel}}"
            collapse-label="{{item.collapseLabel}}"
            bindtoggle="onToggleGroup"
            bindopenthread="onOpenThread"
            bindmentiontap="onMentionTap"
            bindagenttap="onAgentTap"
            bindagentlongpress="onAgentLongPress"
            bindretrymessage="onRetryMessage"
          />
          <view wx:if="{{item.expanded}}" id="{{item.bottomAnchorId}}" class="message-item__group-bottom-anchor"></view>
        </view>
        <view wx:else id="{{item.anchorId}}" class="message-item {{item.showAuthor && (!item.isFirst || topMessage) ? 'message-item--group-start' : ''}}">
          <view wx:if="{{item.isSystem}}" class="system-message" aria-label="{{item.systemContent}}">
            <text class="system-message__time">{{item.systemTime}}</text>
            <text class="system-message__content">{{item.systemContent}}</text>
          </view>
          <message-bubble
            wx:else
            message="{{item.message}}"
            locale-version="{{localeVersion}}"
            show-author="{{item.showAuthor}}"
            last-in-group="{{item.lastInGroup}}"
            disable-collapse="{{item.isLast}}"
            pending-status="{{item.pendingStatus}}"
            client-message-id="{{item.clientMessageId}}"
            thread-channel-id="{{item.threadChannelId}}"
            thread-parent-message-id="{{item.threadParentMessageId}}"
            thread-reply-count="{{item.threadReplyCount}}"
            thread-participants="{{item.threadParticipants}}"
            bindopenthread="onOpenThread"
            bindmentiontap="onMentionTap"
            bindagenttap="onAgentTap"
            bindagentlongpress="onAgentLongPress"
            bindretrymessage="onRetryMessage"
          />
        </view>
      </block>
      <block wx:if="{{!loading && renderItems.length === 0}}">
        <view class="empty">{{emptyLabel}}</view>
      </block>
      <view wx:if="{{agentWorkingLabel}}" class="agent-working-indicator" aria-live="polite">
        <view class="agent-working-indicator__lead"></view>
        <view class="agent-working-indicator__body">
          <view class="agent-working-indicator__dots">
            <view class="agent-working-indicator__dot"></view>
            <view class="agent-working-indicator__dot agent-working-indicator__dot--2"></view>
            <view class="agent-working-indicator__dot agent-working-indicator__dot--3"></view>
          </view>
          <text class="agent-working-indicator__label">{{agentWorkingLabel}}</text>
        </view>
      </view>
    </block>
  </view>
</scroll-view>
