> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velt.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# July 23 2024

## Versions

* Latest React SDK: [2.0.16](https://www.npmjs.com/package/@veltdev/react)
* Latest Non-React SDK: [2.0.16](https://www.npmjs.com/package/@veltdev/client)
* Latest Types: [2.0.16](https://www.npmjs.com/package/@veltdev/types)

## Added the Option to Add Manual Comment with Context

Within the comment element, we have introduced `addManualComment` method to add manual comment with context.

API Method:

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    const commentElement = client.getCommentElement();

    const config: ManualCommentAnnotationConfig = {
    	context: {}, // your context here
    };
    commentElement.addManualComment(config);
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```jsx theme={null}
    const commentElement = Velt.getCommentElement();

    const config: ManualCommentAnnotationConfig = {
    	context: {}, // your context here
    };
    commentElement.addManualComment(config);
    ```
  </Tab>
</Tabs>

`ManualCommentAnnotationConfig` Class:

```jsx theme={null}
export class ManualCommentAnnotationConfig {
  context?: any;
}
```

## Added `onCommentClick` Callback

We have added `onCommentClick` callback in `velt-comment-thread` component.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <velt-comment-thread annotation-id="COMMENT_ANNOTATION_ID"></velt-comment-thread>
    <script>
        const commentThreadTag = document.querySelector("velt-comment-thread");
        commentThreadTag.addEventListener('onCommentClick', (event) => {
            console.log('onCommentClick', event.detail);
        });
    </script>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```jsx theme={null}
    <VeltCommentThread
        annotationId="COMMENT_ANNOTATION_ID"
        onCommentClick={(data) => handleOnCommentClick(data)}
    />
    ```
  </Tab>
</Tabs>