<view
  class="message-bubble {{isRecalled ? 'recalled' : ''}} {{pendingStatus === 'sending' ? 'is-pending' : ''}} {{pendingStatus === 'failed' ? 'is-failed' : ''}} {{threadChannelId || threadParentMessageId ? 'message-bubble--threaded' : ''}}"
  bindtap="onThreadTap"
>
  <view class="avatar {{showAuthor ? '' : 'avatar--placeholder'}}">
    <block wx:if="{{showAuthor}}">
      <view
        wx:if="{{isAutomationMessage}}"
        class="avatar-initials avatar-initials--{{automationKind}}"
        aria-label="{{automationAvatarLabel}}"
        role="img"
        catchtap="onAvatarTap"
        bindlongpress="onAvatarLongPress"
      >
        <view wx:if="{{automationKind === 'workflow'}}" class="automation-avatar-icon icon icon--workflow"></view>
        <text wx:else>{{avatarInitials}}</text>
      </view>
      <image wx:elif="{{avatarUrl}}" class="avatar-img" src="{{avatarUrl}}" mode="{{avatarImageMode}}" data-avatar-url="{{avatarUrl}}" binderror="onAvatarError" catchtap="onAvatarTap" bindlongpress="onAvatarLongPress" />
      <view wx:else class="avatar-initials avatar-initials--{{avatarKind}}" catchtap="onAvatarTap" bindlongpress="onAvatarLongPress">{{avatarInitials}}</view>
    </block>
  </view>
  <view class="body">
    <view class="header {{showAuthor ? '' : 'header--continued'}}">
      <text wx:if="{{showAuthor}}" class="author {{automationKind === 'schedule' ? 'author--schedule' : ''}}" catchtap="onAuthorTap">{{displayName}}</text>
      <text class="time">{{displayTime}}</text>
      <text wx:if="{{pendingStatus === 'sending'}}" class="pending-tag pending-tag--sending">{{sendingLabel}}</text>
    </view>
    <block wx:if="{{isRecalled}}">
      <text class="content content--recalled">{{preview}}</text>
    </block>
    <app-notification-card
      wx:elif="{{isAppNotificationCard}}"
      class="content"
      message-id="{{cardMessageId}}"
      message-edit-revision="{{cardEditRevision}}"
      locale-version="{{localeVersion}}"
      fallback-text="{{preview}}"
    />
    <markdown-content
      wx:else
      class="content"
      bindlongpress="onContentLongPress"
      content="{{rawContent}}"
      resolved-mentions="{{resolvedMentions}}"
      attachment-images="{{attachmentInlineImages}}"
      disable-collapse="{{disableCollapse}}"
      locale-version="{{localeVersion}}"
      bindlinktap="onMarkdownLinkTap"
      bindmentiontap="onMarkdownMentionTap"
      bindimagetap="onMarkdownImageTap"
      bindattachmentimagetap="onMarkdownAttachmentImageTap"
    />
    <view wx:if="{{attachmentImageIds.length > 0}}" class="attachments">
      <block wx:for="{{attachmentImageIds}}" wx:key="*this">
        <image
          src="{{attachmentImagePaths[index]}}"
          mode="aspectFill"
          class="attachment-thumb"
          lazy-load="{{true}}"
          data-index="{{index}}"
          catchtap="onTapAttachment"
        />
      </block>
    </view>
    <view wx:if="{{attachmentFiles.length > 0}}" class="attachment-files">
      <block wx:for="{{attachmentFiles}}" wx:key="key">
        <view class="attachment-file" data-index="{{index}}" catchtap="onTapFileAttachment">
          <view class="attachment-file__icon icon icon--sm icon--paperclip"></view>
          <view class="attachment-file__body">
            <text class="attachment-file__name">{{item.filename}}</text>
            <text class="attachment-file__meta">{{item.kindLabel}}{{item.sizeLabel ? ' · ' + item.sizeLabel : ''}}</text>
          </view>
        </view>
      </block>
    </view>
    <view wx:if="{{pendingStatus === 'failed'}}" class="retry-affordance" catchtap="onRetryTap">
      <view class="retry-affordance__icon icon icon--sm icon--rotate-cw"></view>
      <text class="retry-affordance__label">{{failedLabel}}</text>
    </view>
    <view
      wx:if="{{sourceAttribution && sourceAttributionDetails.length > 0}}"
      class="source-attribution"
      role="button"
      aria-expanded="{{sourceAttributionExpanded}}"
      aria-label="{{sourceAttributionExpanded ? sourceAttributionHideLabel : sourceAttributionShowLabel}}"
      catchtap="onToggleSourceAttributionDetails"
    >
      <view class="source-attribution__icon icon icon--sm icon--send"></view>
      <view class="source-attribution__content">
        <text class="source-attribution__text">{{sourceAttribution}}</text>
        <view class="source-attribution__chevron icon icon--sm icon--chevron-down {{sourceAttributionExpanded ? 'source-attribution__chevron--expanded' : ''}}"></view>
      </view>
    </view>
    <view wx:elif="{{sourceAttribution}}" class="source-attribution">
      <view class="source-attribution__icon icon icon--sm icon--send"></view>
      <text class="source-attribution__text">{{sourceAttribution}}</text>
    </view>
    <view wx:if="{{sourceAttributionExpanded}}" class="source-attribution-details">
      <block wx:for="{{sourceAttributionDetails}}" wx:key="key">
        <text class="source-attribution-details__label">{{item.label}}</text>
        <text class="source-attribution-details__value" selectable="{{true}}">{{item.value}}</text>
      </block>
    </view>
    <view wx:if="{{reactionRows.length > 0}}" class="reaction-bar">
      <block wx:for="{{reactionRows}}" wx:key="key">
        <view class="reaction-chip" aria-label="{{item.label}}">
          <text class="reaction-chip__emoji">{{item.emoji}}</text>
          <text class="reaction-chip__count">{{item.count}}</text>
        </view>
      </block>
    </view>
    <view wx:if="{{threadChannelId && threadReplyCount > 0}}" class="thread-affordance" catchtap="onThreadTap">
      <view wx:if="{{threadParticipantAvatars.length > 0}}" class="thread-participants" catchtap="onThreadParticipantsTap">
        <block wx:for="{{threadParticipantAvatars}}" wx:key="key">
          <view class="thread-avatar" data-agent-id="{{item.participantId}}">
            <avatar-image wx:if="{{item.avatarUrl}}" class="thread-avatar-img" source="{{item.avatarUrl}}">
              <view class="thread-avatar-initials avatar-initials--{{item.avatarKind}}">{{item.avatarInitials}}</view>
            </avatar-image>
            <view wx:else class="thread-avatar-initials avatar-initials--{{item.avatarKind}}">{{item.avatarInitials}}</view>
          </view>
        </block>
      </view>
      <view wx:if="{{threadParticipantAvatars.length === 0}}" class="thread-icon icon icon--sm icon--messages-square"></view>
      <text class="thread-label">{{repliesLabel}}</text>
    </view>
  </view>
</view>
