Now that we have the upload audio component done, we will complete minor UI changes to the view thread page, which will present the data we have gathered in a better way. Open client/app/view-thread/view-thread.component.html and update the card, which displays the message with the transcriptions data, as shown here:

// SNIPP SNIPP
<div class="table-responsive" *ngIf="message.transcriptions.length > 0">
 <table class="table table-bordered">
 <thead class="thead-dark text-center">
 <tr>
 <th scope="col">Transcript</th>
 <th scope="col">Confidence</th>
 <th scope="col">Words</th>
 </tr>
 </thead>
 <tbody>
 <tr class="text-center" *ngFor="let t of message.transcriptions">
 <th>
 {{t.transcript}}
 </th>
 <th>
 {{(t.confidence * 100).toFixed(5)}} %
 </th>
 <th>
 {{t.words.join(';') || '--'}}
 </th>
 </tr>
 </tbody>
 </table>
</div>
// SNIPP SNIPP

Add this after the safeSearchProps table that we created to display the safeSearchProps image. To complete the component, we will update the sanitizeContent helper in client/app/view-thread/view-thread.component.ts, as shown here:

// SNIPP SNIPP
sanitizeContent(content: string) {
 if (content.indexOf('<video') > 0) return content;
 if (content.indexOf('<audio') > 0) return content;
 return this.sanitizer.bypassSecurityTrustHtml(content);
}
// SNIPP SNIPP

Save all the files to move on.