<ion-content>
  <ion-segment [value]="tab"  (ionChange)="tabChange($event)">
    <ion-segment-button value="vector">
      <ion-label>向量提取</ion-label>
    </ion-segment-button>
    <ion-segment-button value="retrive">
      <ion-label>记忆召回</ion-label>
    </ion-segment-button>
    <ion-segment-button value="story">
      <ion-label>知识问答</ion-label>
    </ion-segment-button>
  </ion-segment>
  @if(tab=="vector"){
    <ion-list>
      @for(file of fileList;track file.title){
        <ion-item>
          <ion-label>标题：{{file?.title}}</ion-label>
          <ion-button (click)="preview(file)">预览</ion-button>
          <ion-button (click)="loader(file)">加载</ion-button>
        </ion-item>
        @if(storyMap[file?.url]){
          <ion-item>
            加载：正文{{storyMap[file?.url]?.content?.length}}字符 
            <ion-button (click)="splitter(storyMap[file?.url])">分割</ion-button>
          </ion-item>
        }
        @if(storyMap[file?.url]?.docList?.length){
          <div style="display: flex;flex-direction: column;">
            <ion-button (click)="embedings(storyMap[file?.url])">嵌入</ion-button>
            分割：文本块{{storyMap[file?.url]?.docList?.length}}个
            @for(doc of storyMap[file?.url]?.docList;track doc){
              <p>行{{doc.metadata?.loc?.lines?.from}}至行{{doc.metadata?.loc?.lines?.to}}</p>
              <p>{{doc.pageContent}}</p>
            }
          </div>
        }
      }
    </ion-list>
  
  }

  @if(tab=="retrive"){
   <ion-list>
    <ion-item>
      <ion-textarea [value]="userInput" (ionChange)="inputChange($event)" label="用户输入" placeholder="请输入您的问题"></ion-textarea>
    </ion-item>
    <ion-item>
      <ion-button (click)="retriveFrontEnd()">前端检索</ion-button>
      <ion-button (click)="retriveBackEnd()">后端检索</ion-button>
    </ion-item>
    @if(searchDocList?.length){
      @for(doc of searchDocList;track doc){
        <ion-item>
          相似度：{{doc.similarity}} 内容：{{doc.pageContent}}
        </ion-item>
      }
    }
   </ion-list>
  }

  @if(tab=="story"){
    <ion-list>
      <ion-item>
        <ion-textarea [value]="messageInput" (ionChange)="messageChange($event)" label="用户输入" placeholder="请输入您的问题"></ion-textarea>
      </ion-item>
      <ion-item>
        <ion-button (click)="sendMessage()">发送消息</ion-button>
      </ion-item>
      @if(messageResult){
        <ion-item>
          @if(!isComplete){
            {{messageResult?.content}}
          }
          @if(isComplete){
            <fm-markdown-preview [content]="messageResult?.content"></fm-markdown-preview>
          }
        </ion-item>
      }
      
     </ion-list>
  }
</ion-content>
