<VeltWireframe>
    <VeltCommentsSidebarWireframe>
        {/* Skeleton */}
        <VeltCommentsSidebarWireframe.Skeleton />
        <VeltCommentsSidebarWireframe.Panel>
            {/* Header - Contains search, status filters, close button etc */}
            <VeltCommentsSidebarWireframe.Header />
            {/* Custom Action Button - Use to define custom filter, sorting, grouping */}
            <VeltCommentsSidebarWireframe.ActionButton id="all" type="toggle" />
            {/* Filter - The filter panel that contains the default system filters */}
            <VeltCommentsSidebarWireframe.Filter />
            {/* List - The list of comments that appear in the sidebar */}
            <VeltCommentsSidebarWireframe.List />
            {/* Empty Placeholder - The placeholder that appears when there are no comments */}
            <VeltCommentsSidebarWireframe.EmptyPlaceholder />
            {/* Reset Filter Button - Not included in default component */}
            <VeltCommentsSidebarWireframe.ResetFilterButton />
            {/* Page Mode Composer - The composer that appears when the page mode is enabled */}
            <VeltCommentsSidebarWireframe.PageModeComposer />
        </VeltCommentsSidebarWireframe.Panel>
        {/* Focused Thread - This only appears when focused thread mode is enabled */}
        <VeltCommentsSidebarWireframe.FocusedThread />
    </VeltCommentsSidebarWireframe>
</VeltWireframe>

We recommend that you familiarize yourselves with Customization Concepts before attempting to modify any components.

Default Component

Here’s how the default comments sidebar component looks like:

<VeltWireframe>
    <VeltCommentsSidebarWireframe>
        {/* Skeleton */}
        <VeltCommentsSidebarWireframe.Skeleton />
        <VeltCommentsSidebarWireframe.Panel>
            {/* Header - Contains search, status filters, close button etc */}
            <VeltCommentsSidebarWireframe.Header />
            {/* Custom Action Button - Use to define custom filter, sorting, grouping */}
            <VeltCommentsSidebarWireframe.ActionButton id="all" type="toggle" />
            {/* Filter - The filter panel that contains the default system filters */}
            <VeltCommentsSidebarWireframe.Filter />
            {/* List - The list of comments that appear in the sidebar */}
            <VeltCommentsSidebarWireframe.List />
            {/* Empty Placeholder - The placeholder that appears when there are no comments */}
            <VeltCommentsSidebarWireframe.EmptyPlaceholder />
            {/* Reset Filter Button - Not included in default component */}
            <VeltCommentsSidebarWireframe.ResetFilterButton />
            {/* Page Mode Composer - The composer that appears when the page mode is enabled */}
            <VeltCommentsSidebarWireframe.PageModeComposer />
        </VeltCommentsSidebarWireframe.Panel>
        {/* Focused Thread - This only appears when focused thread mode is enabled */}
        <VeltCommentsSidebarWireframe.FocusedThread />
    </VeltCommentsSidebarWireframe>
</VeltWireframe>