<import-sjs
  from="./index.sjs"
  name="utils"
></import-sjs>
<view class="ant-copilot-thoughtchain {{className}}">
  <view
    class="ant-copilot-thoughtchain-node"
    a:for="{{items}}"
    a:for-index="index"
    a:for-item="item"
  >
    <view
      onTap="onTitleTap"
      data-index="{{index}}"
      data-key="{{item.key || index}}"
    >
      <view class="ant-copilot-thoughtchain-node-title">
        <image
          a:if="{{item.icon && item.icon.includes('https://')}}"
          class="ant-copilot-thoughtchain-node-title-icon"
          mode="widthFix"
          src="{{item.icon}}"
        ></image>
        <ant-icon
          a:else
          type="{{item.icon || 'CheckCircleOutline'}}"
          class="ant-copilot-thoughtchain-node-title-icon"
        ></ant-icon>
        {{item.title}}
        <view
          a:if="{{collapsible}}"
          class="ant-copilot-thoughtchain-node-title-collapse"
        >
          <ant-icon type="{{utils.isExpand(collapsible, item.key || index, foldStatusMap) ? 'UpOutline' : 'DownOutline'}}"></ant-icon>
        </view>
      </view>
    </view>
    <view
      a:if="{{utils.isExpand(collapsible, item.key || index, foldStatusMap)}}"
      class="ant-copilot-thoughtchain-node-content"
    >
      <slot
        name="content"
        content="{{item.content}}"
        item="{{item}}"
      >
        <view
          class="ant-copilot-thoughtchain-node-content-text"
          onTap="onContentTap"
          data-key="{{item.key || index}}"
          data-content="{{item.content}}"
        >
          <view>{{item.content}}</view>
        </view>
      </slot>
    </view>
  </view>
</view>