Component config & layout props

Use these with primitives (and they apply to the same components in any framework as kebab-case attributes). For trimming features on/off (reactions, status, …) see Primitives.

​

Sidebar: VeltCommentsSidebar (V1) & VeltCommentsSidebarV2

​

Sidebar filters: configure, add custom filters, and restyle (V2)

type FilterTypeConfig = {
  name?: string;            // label shown in the panel
  enable?: boolean;         // show/hide this filter
  multiSelection?: boolean; // allow multiple values
  enableGrouping?: boolean; // group the sidebar list by this filter
  order?: string[];         // option order
  placeholder?: string;
  id?: string;
  type?: 'system' | 'custom';   // 'custom' = your own filter
  options?: { id: string; name: string }[];   // the selectable values
};

<VeltCommentsSidebarV2
  shadowDom={false}
  filters={{
    status:   { enable: true,  name: "Status", multiSelection: true },
    priority: { enable: false },                         // hide a built-in filter
    severity: {                                          // ← your custom filter
      type: "custom", name: "Severity", multiSelection: true,
      options: [
        { id: "sev1", name: "Sev 1" },
        { id: "sev2", name: "Sev 2" },
      ],
    },
  }}
/>

Same trade as everywhere: config props for which filters + layout (cheapest); wireframe slots to restructure the filter dropdown/panel; the filtering behavior stays Velt’s.

​

Notifications: VeltNotificationsPanel

​

Comment Dialog: VeltCommentDialog

All <VeltComments> props (the full 129-prop table with types, defaults, and descriptions) are in Props. This page focuses on the layout/mode props for the sidebar, dialog, and notifications.

​

Comments host: VeltComments

​

Recorder: VeltRecorderControlPanel & VeltRecorderPlayer

​

Transcription: VeltTranscription & VeltSubtitles

​

Presence: VeltPresence

​

Cursor: VeltCursor

​

Custom data: your own statuses, priorities, categories, reactions

<VeltComments
  customStatus={[
    { id: "OPEN",  name: "Open",  color: "#625DF5", type: "default",  lightColor: "#EEF" },
    { id: "WIP",   name: "In progress", color: "#ECB000", type: "ongoing" },
    { id: "DONE",  name: "Done",  color: "#00C48C", type: "terminal" },
  ]}
  customPriority={[
    { id: "P0", name: "Urgent", color: "#FF7162", lightColor: "#FFF4F2" },
    { id: "P1", name: "Normal", color: "#625DF5" },
  ]}
  customCategory={[{ id: "bug", name: "Bug", color: "#FF7162" }]}
  customReactions={{ "👍": { label: "Thumbs up", emoji: "👍" } }}
/>

• customStatus: { id, name, color, type: 'default' | 'ongoing' | 'terminal', lightColor?, svg?, iconUrl? }[]: type controls semantics (terminal = resolved-like).
• customPriority: { id, name, color, lightColor? }[].
• customCategory: { id, name, color }[].
• customReactions: a map of emoji → { label, emoji } (a ReactionMap).
• customListDataOnAnnotation (a CustomAnnotationDropdownData): the custom chip/dropdown on a thread (powers the CustomAnnotationDropdown slot). Shape:
  {
    type: 'single' | 'multi';               // single- vs multi-select
    placeholder?: string;                   // default 'Select'
    data: { id: string; label: string }[];  // the selectable options
  }
  
  The option id is what a custom sidebar filter matches against (see the filters example above): set the option on annotations via this prop, filter by the same id.
• customListDataOnComment (an AutocompleteData): custom list on a comment (autocomplete-style). Shape:
  {
    hotkey: string;                          // trigger char, e.g. '#'
    description?: string;
    type: 'custom' | 'contact' | 'group';    // default 'custom'
    data: {                                  // AutocompleteItem[]
      id: string; name: string;
      description?: string;
      icon?: { url?: string; svg?: string };
      link?: string; groupId?: string;       // groupId ties an item to a group
    }[];
    groups?: { id: string; name: string }[]; // optional groups
  }
  

When you build a custom status/priority dropdown with primitives (Primitives), this is where the statuses you map over come from. When you read {statusOptions} / {priorityOptions} in a wireframe (Wireframe variables), these are the values.

​

Notes

• Prop before wireframe. If a prop gets you the layout (e.g. filterPanelLayout="bottomSheet", panelOpenMode="sidebar"), use it: it’s far less work than a wireframe.
• Version differences: embedMode is boolean on V1 sidebar but string on V2: match the type to the component version you’re using.
• Framework-agnostic: in vanilla/other frameworks these are kebab-case attributes on the <velt-*> element (e.g. filter-panel-layout="bottomSheet").