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

# June 6 2024

## Versions

* Latest SDK: [1.0.144](https://www.npmjs.com/package/@veltdev/react)
* Latest Types: [1.0.161](https://www.npmjs.com/package/@veltdev/types)

# 1. Major Improvements to Comments Sidebar Customization

In this update, we made several improvements to the `Customization` of the `Comments Sidebar` and `Sidebar Button`

## Support for customizing additional Subcomponents within the Comments Sidebar and Sidebar Button

We modified or added support for customizing the following `subcomponents` of the `Comments Sidebar`:

* [Filter](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/overview)
* [Filter Category](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/category)
* [Filter Close Button](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/close-button)
* [Filter Done Button](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/done-button)
* [Filter Item](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/filter-item)
* [Filter Groupby](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/groupby)
* [Filter Location](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/location)
* [Filter People](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/people)
* [Filter Priority](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/priority)
* [Filter Title](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/title)
* [Filter Versions](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/versions)
* [Header](/ui-customization/features/async/comments/comments-sidebar/subcomponents/header/overview)
* [Header Status](/ui-customization/features/async/comments/comments-sidebar/subcomponents/header/subcomponents/status/overview)
* [Header Status Trigger](/ui-customization/features/async/comments/comments-sidebar/subcomponents/header/subcomponents/status/subcomponents/trigger)
* [Header Status Content](/ui-customization/features/async/comments/comments-sidebar/subcomponents/header/subcomponents/status/subcomponents/content)
* [List](/ui-customization/features/async/comments/comments-sidebar/subcomponents/list/overview)
* [List Dialog Container](/ui-customization/features/async/comments/comments-sidebar/subcomponents/list/subcomponents/dialog-container)
* [List Group](/ui-customization/features/async/comments/comments-sidebar/subcomponents/list/subcomponents/group)

We modified or added support for customizing the following `subcomponents` of the `Sidebar Button`:

* [Sidebar Button](/ui-customization/features/async/comments/comments-sidebar/sidebar-button/overview)
* [Sidebar Button Icon](/ui-customization/features/async/comments/comments-sidebar/sidebar-button/subcomponents/icon)

## Subcomponent Name Changes

We changed the names of several subcomponents:

* `<VeltCommentsSidebarWireframe.List.Item.Annotation />` -> `<VeltCommentsSidebarWireframe.List.Item.DialogContainer />`

* `<velt-comments-sidebar-list-item-annotation-wireframe>` -> `<velt-comments-sidebar-list-item-dialog-container-wireframe>`

The `Private Badge` subcomponent was moved from being a child of `Comment Dialog` to being a child of the `Comment Dialog Composer`:

* `<VeltCommentDialogWireframe.PrivateBadge />`  -> `<VeltCommentDialogWireframe.Composer.PrivateBadge>`

* `<velt-comment-dialog-private-badge-wireframe>` -> `<velt-comment-dialog-composer-private-badge-wireframe>`

# 2. Live State Sync changes

## `getLiveStateData()` now has a config option to only subscribe to new changes

By default, the [getLiveStateData()](/realtime-collaboration/live-state-sync/setup) subscription will return all changes to the shared live data object including changes that occured when the current client was not subscribed.

If you want to only receive changes starting from when the client subscribed to `getLiveStateData()`, you can pass a config object as shown below:

```jsx theme={null}
const liveStateDataConfig = {
	listenToNewChangesOnly: true  // default is false
};

let subscription = liveStateSyncElement.getLiveStateData(LIVE_STATE_DATA_KEY, liveStateDataConfig).subscribe((data) => {
	console.log('[Debug] getLiveStateData 31-05-2024-2 in html', data);
});
```

This also applies to the `useLiveStateData()` hook:

```jsx theme={null}
const liveStateDataConfig = {
	listenToNewChangesOnly: true // default is false
};

const liveStateData = useLiveStateData(LIVE_STATE_DATA_KEY, liveStateDataConfig)
```

As well as the `useLiveState()` hook:

```jsx theme={null}
const [counter, setCounter] = useLiveState < number > ("counter", 0, {
  syncDuration: 100,
  resetLiveState: true,
  listenToNewChangesOnly: true // default is false
});
```

## Method to listen to changes in server connection state

You can listen to changes in the server connection state with the [onServerConnectionStateChange()](/realtime-collaboration/live-state-sync/setup) method:

```jsx theme={null}
const liveStateSyncElement = client.getLiveStateSyncElement();
let subscription = liveStateSyncElement.onServerConnectionStateChange().subscribe((data) => {
  console.log('server connection state change: ', data);
});
```

To unsubscribe from the subscription:

```jsx theme={null}
subscription?.unsubscribe()
```

The server connection state will be an ENUM with the following states:

```jsx theme={null}
export enum ServerConnectionState {
  ONLINE = 'online',
  OFFLINE = 'offline',
  PENDING_INIT = 'pendingInit',
  PENDING_DATA = 'pendingData',
}
```

You can also listen to changes in the server connection state using the `useServerConnectionStateChangeHandler()` hook as well:

```jsx theme={null}
const serverConnectionState = useServerConnectionStateChangeHandler();
```

# 3. Updates to Popover Comments

## Added support for Popover comments using Single Comment Tool

There are now two patterns to add the `Comment Tool` component with [Popover comments](/async-collaboration/comments/setup/popover):

* (Already Existed) Add a `Comment Tool` next to each element you want to have `Popover` comments
* (New) Have a single `Comment Tool` and use it to pin a `Popover `comment on a particular element

### Single Comment Tool

If you want to have a single `Comment Tool` in a single location such as the navigation bar, you can do so as well.

To do this, add `data-velt-target-comment-element-id` as an attribute on each element you want to add comments on.

Now, when you click on the `Comment Tool` and click on the target element, it will attach a `Popover` comment to the element.

You will now notice that you can only add one `Comment Annotation` per element.

<Warning>
  If you don't add the `data-velt-target-comment-element-id` attribute, you will be adding multiple `Comment Annotations` on the same element.
</Warning>

```jsx theme={null}
<div>
  <velt-comment-tool></velt-comment-tool>
  <div class="table">
    <div class="cell" data-velt-target-comment-element-id="cell-id-A" id="cell-id-A">

    </div>
    <div class="cell" data-velt-target-comment-element-id="cell-id-B" id="cell-id-B">

    </div>
  </div>
</div>
```