import { VeltCommentThread, useCommentAnnotations } from '@veltdev/react';

export default function YourDocument() {

  let commentAnnotations = useCommentAnnotations()

  return (
    <div>
      {commentAnnotations.map((x,i) => <VeltCommentThread key={i} annotationId={x.annotationId}/>)}
    </div>
  )
}

const commentElement = client.getCommentElement();
let subscription = commentElement.getAllCommentAnnotations().subscribe((comments) => {
    // If you are using pure html, inject <velt-comment-thread annotation-id="ANNOTATION_ID"></velt-comment-thread>
    // In other frameworks, you can loop over the comments inside the template itself
});

//To unsubscribe from the subscription:
subscription?.unsubscribe()