@veltdev/react 1.0.118 → 1.0.120

package/cjs/types/components/SnippylyCommentBubble/SnippylyCommentBubble.d.ts

@@ -7,6 +7,8 @@ export interface IVeltCommentBubbleProps extends React.DetailedHTMLProps<React.H
     showAvatar?: boolean;
     avatar?: boolean;
     commentBubbleTargetPinHover?: boolean;
+    shadowDom?: boolean;
+    variant?: string;
 }
 declare const SnippylyCommentBubble: React.FC<IVeltCommentBubbleProps>;
 export default SnippylyCommentBubble;

package/cjs/types/components/SnippylyCommentTool/SnippylyCommentTool.d.ts

@@ -4,6 +4,7 @@ export interface IVeltCommentToolProps extends React.DetailedHTMLProps<React.HTM
     onCommentModeChange?: Function;
     darkMode?: boolean;
     variant?: string;
+    shadowDom?: boolean;
 }
 declare const SnippylyCommentTool: React.FC<IVeltCommentToolProps>;
 export default SnippylyCommentTool;

package/cjs/types/components/SnippylyComments/SnippylyComments.d.ts

@@ -82,6 +82,8 @@ export interface IVeltCommentsProps extends React.DetailedHTMLProps<React.HTMLAt
         name: string;
     }[];
     darkMode?: boolean;
+    textCommentToolShadowDom?: boolean;
+    textCommentToolbarShadowDom?: boolean;
 }
 declare const SnippylyComments: React.FC<IVeltCommentsProps>;
 export default SnippylyComments;

package/cjs/types/components/SnippylySidebarButton/SnippylySidebarButton.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export interface IVeltSidebarButtonProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
     tooltipText?: string;
     darkMode?: boolean;
+    shadowDom?: boolean;
 }
 declare const SnippylySidebarButton: React.FC<IVeltSidebarButtonProps>;
 export default SnippylySidebarButton;

package/cjs/types/components/VeltAutocomplete/VeltAutocomplete.d.ts

@@ -0,0 +1,8 @@
+import { AutocompleteItem } from '@veltdev/types';
+import React from 'react';
+export interface IVeltAutocompleteProps {
+    hotkey: string;
+    listData: AutocompleteItem[];
+}
+declare const VeltAutocomplete: React.FC<IVeltAutocompleteProps>;
+export default VeltAutocomplete;

package/cjs/types/components/VeltAutocomplete/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./VeltAutocomplete";

package/cjs/types/components/VeltAutocompleteOptionWireframe/VeltAutocompleteOptionDescriptionWireframe/VeltAutocompleteOptionDescriptionWireframe.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface IVeltAutocompleteOptionDescriptionWireframeProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
+}
+declare const VeltAutocompleteOptionDescriptionWireframe: React.FC<IVeltAutocompleteOptionDescriptionWireframeProps>;
+export default VeltAutocompleteOptionDescriptionWireframe;

package/cjs/types/components/VeltAutocompleteOptionWireframe/VeltAutocompleteOptionDescriptionWireframe/index.d.ts

@@ -0,0 +1 @@
+export { default } from './VeltAutocompleteOptionDescriptionWireframe';

package/cjs/types/components/VeltAutocompleteOptionWireframe/VeltAutocompleteOptionErrorIconWireframe/VeltAutocompleteOptionErrorIconWireframe.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface IVeltAutocompleteOptionErrorIconWireframeProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
+}
+declare const VeltAutocompleteOptionErrorIconWireframe: React.FC<IVeltAutocompleteOptionErrorIconWireframeProps>;
+export default VeltAutocompleteOptionErrorIconWireframe;

package/cjs/types/components/VeltAutocompleteOptionWireframe/VeltAutocompleteOptionErrorIconWireframe/index.d.ts

@@ -0,0 +1 @@
+export { default } from './VeltAutocompleteOptionErrorIconWireframe';

package/cjs/types/components/VeltAutocompleteOptionWireframe/VeltAutocompleteOptionIconWireframe/VeltAutocompleteOptionIconWireframe.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface IVeltAutocompleteOptionIconWireframeProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
+}
+declare const VeltAutocompleteOptionIconWireframe: React.FC<IVeltAutocompleteOptionIconWireframeProps>;
+export default VeltAutocompleteOptionIconWireframe;

package/cjs/types/components/VeltAutocompleteOptionWireframe/VeltAutocompleteOptionIconWireframe/index.d.ts

@@ -0,0 +1 @@
+export { default } from './VeltAutocompleteOptionIconWireframe';

package/cjs/types/components/VeltAutocompleteOptionWireframe/VeltAutocompleteOptionNameWireframe/VeltAutocompleteOptionNameWireframe.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface IVeltAutocompleteOptionNameWireframeProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
+}
+declare const VeltAutocompleteOptionNameWireframe: React.FC<IVeltAutocompleteOptionNameWireframeProps>;
+export default VeltAutocompleteOptionNameWireframe;

package/cjs/types/components/VeltAutocompleteOptionWireframe/VeltAutocompleteOptionNameWireframe/index.d.ts

@@ -0,0 +1 @@
+export { default } from './VeltAutocompleteOptionNameWireframe';

package/cjs/types/components/VeltAutocompleteOptionWireframe/VeltAutocompleteOptionWireframe.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { IVeltAutocompleteOptionIconWireframeProps } from './VeltAutocompleteOptionIconWireframe/VeltAutocompleteOptionIconWireframe';
+import { IVeltAutocompleteOptionNameWireframeProps } from './VeltAutocompleteOptionNameWireframe/VeltAutocompleteOptionNameWireframe';
+import { IVeltAutocompleteOptionDescriptionWireframeProps } from './VeltAutocompleteOptionDescriptionWireframe/VeltAutocompleteOptionDescriptionWireframe';
+import { IVeltAutocompleteOptionErrorIconWireframeProps } from './VeltAutocompleteOptionErrorIconWireframe/VeltAutocompleteOptionErrorIconWireframe';
+export interface IVeltAutocompleteOptionWireframeProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
+}
+declare const VeltAutocompleteOptionWireframe: React.FC<IVeltAutocompleteOptionWireframeProps> & {
+    Icon: React.FC<IVeltAutocompleteOptionIconWireframeProps>;
+    Description: React.FC<IVeltAutocompleteOptionDescriptionWireframeProps>;
+    ErrorIcon: React.FC<IVeltAutocompleteOptionErrorIconWireframeProps>;
+    Name: React.FC<IVeltAutocompleteOptionNameWireframeProps>;
+};
+export default VeltAutocompleteOptionWireframe;

package/cjs/types/components/VeltAutocompleteOptionWireframe/index.d.ts

@@ -0,0 +1 @@
+export { default } from './VeltAutocompleteOptionWireframe';

package/cjs/types/components/VeltCommentDialogWireframe/VeltCommentDialogCommentIndex/VeltCommentDialogCommentIndex.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface IVeltCommentDialogCommentIndexProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
+}
+declare const VeltCommentDialogCommentIndex: React.FC<IVeltCommentDialogCommentIndexProps>;
+export default VeltCommentDialogCommentIndex;

package/cjs/types/components/VeltCommentDialogWireframe/VeltCommentDialogCommentIndex/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./VeltCommentDialogCommentIndex";

package/cjs/types/components/VeltCommentDialogWireframe/VeltCommentDialogComposer/VeltCommentDialogComposerActionButton/VeltCommentDialogComposerActionButton.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface IVeltCommentDialogComposerActionButtonProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
-    type?: 'userMentions' | 'file' | 'audio' | 'video' | 'screen' | 'submit';
+    type?: 'userMentions' | 'autocomplete' | 'file' | 'audio' | 'video' | 'screen' | 'submit';
+    hotkey?: string;
 }
 declare const VeltCommentDialogComposerActionButton: React.FC<IVeltCommentDialogComposerActionButtonProps>;
 export default VeltCommentDialogComposerActionButton;

package/cjs/types/components/VeltCommentDialogWireframe/VeltCommentDialogWireframe.d.ts

@@ -5,7 +5,7 @@ import { IVeltCommentDialogAssigneeBannerProps } from "./VeltCommentDialogAssign
 import { IVeltCommentDialogAssignMenuProps } from "./VeltCommentDialogAssignMenu/VeltCommentDialogAssignMenu";
 import { IVeltCommentDialogBodyProps } from "./VeltCommentDialogBody/VeltCommentDialogBody";
 import { IVeltCommentDialogCommentCategoryProps } from "./VeltCommentDialogCommentCategory/VeltCommentDialogCommentCategory";
-import { IVeltCommentDialogCommentCountProps } from "./VeltCommentDialogCommentCount/VeltCommentDialogCommentCount";
+import { IVeltCommentDialogCommentIndexProps } from "./VeltCommentDialogCommentIndex/VeltCommentDialogCommentIndex";
 import { IVeltCommentDialogCommentSuggestionStatusProps } from "./VeltCommentDialogCommentSuggestionStatus/VeltCommentDialogCommentSuggestionStatus";
 import { IVeltCommentDialogComposer } from "./VeltCommentDialogComposer/VeltCommentDialogComposer";
 import { IVeltCommentDialogCopyLinkProps } from "./VeltCommentDialogCopyLink/VeltCommentDialogCopyLink";
@@ -34,7 +34,7 @@ declare const VeltCommentDialogWireframe: React.FC<IVeltCommentDialogWireframePr
     AssignMenu: React.FC<IVeltCommentDialogAssignMenuProps>;
     Body: React.FC<IVeltCommentDialogBodyProps>;
     CommentCategory: React.FC<IVeltCommentDialogCommentCategoryProps>;
-    CommentCount: React.FC<IVeltCommentDialogCommentCountProps>;
+    CommentIndex: React.FC<IVeltCommentDialogCommentIndexProps>;
     CommentSuggestionStatus: React.FC<IVeltCommentDialogCommentSuggestionStatusProps>;
     Composer: IVeltCommentDialogComposer;
     CopyLink: React.FC<IVeltCommentDialogCopyLinkProps>;

package/cjs/types/components/VeltCommentsSidebarWireframe/VeltCommentsSidebarPageModeComposer/VeltCommentsSidebarPageModeComposer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface IVeltCommentsSidebarPageModeComposerProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
+}
+declare const VeltCommentsSidebarPageModeComposer: React.FC<IVeltCommentsSidebarPageModeComposerProps>;
+export default VeltCommentsSidebarPageModeComposer;

package/cjs/types/components/VeltCommentsSidebarWireframe/VeltCommentsSidebarPageModeComposer/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./VeltCommentsSidebarPageModeComposer";

package/cjs/types/components/VeltCommentsSidebarWireframe/VeltCommentsSidebarWireframe.d.ts

@@ -4,7 +4,7 @@ import { IVeltCommentsSidebarEmptyPlaceholderProps } from './VeltCommentsSidebar
 import { IVeltCommentsSidebarFilter } from './VeltCommentsSidebarFilter/VeltCommentsSidebarFilter';
 import { IVeltCommentsSidebarHeaderProps } from './VeltCommentsSidebarHeader/VeltCommentsSidebarHeader';
 import { IVeltCommentsSidebarListProps } from './VeltCommentsSidebarList/VeltCommentsSidebarList';
-import { IVeltCommentsSidebarPageModeProps } from './VeltCommentsSidebarPageMode/VeltCommentsSidebarPageMode';
+import { IVeltCommentsSidebarPageModeComposerProps } from './VeltCommentsSidebarPageModeComposer/VeltCommentsSidebarPageModeComposer';
 import { IVeltCommentsSidebarSearchProps } from './VeltCommentsSidebarSearch/VeltCommentsSidebarSearch';
 import { IVeltCommentsSidebarStatusProps } from './VeltCommentsSidebarStatus/VeltCommentsSidebarStatus';
 import { IVeltCommentsSidebarFilterButtonProps } from './VeltCommentsSidebarFilterButton/VeltCommentsSidebarFilterButton';
@@ -17,7 +17,7 @@ declare const VeltCommentsSidebarWireframe: React.FC<IVeltCommentsSidebarWirefra
     Filter: IVeltCommentsSidebarFilter;
     Header: React.FC<IVeltCommentsSidebarHeaderProps>;
     List: React.FC<IVeltCommentsSidebarListProps>;
-    PageMode: React.FC<IVeltCommentsSidebarPageModeProps>;
+    PageModeComposer: React.FC<IVeltCommentsSidebarPageModeComposerProps>;
     Search: React.FC<IVeltCommentsSidebarSearchProps>;
     Status: React.FC<IVeltCommentsSidebarStatusProps>;
     FilterButton: React.FC<IVeltCommentsSidebarFilterButtonProps>;

package/cjs/types/components/VeltSidebarButtonWireframe/VeltSidebarButtonWireframe.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { IVeltSidebarButtonCommentsCountProps } from './VeltSidebarButtonCommentsCount/VeltSidebarButtonCommentsCount';
 export interface IVeltSidebarButtonWireframeProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
+    variant?: string;
 }
 declare const VeltSidebarButtonWireframe: React.FC<IVeltSidebarButtonWireframeProps> & {
     CommentsCount: React.FC<IVeltSidebarButtonCommentsCountProps>;

package/cjs/types/components/index.d.ts

@@ -28,6 +28,7 @@ export { default as VeltNotificationsHistoryPanel } from "./VeltNotificationsHis
 export { default as VeltNivoChartComments } from "./VeltNivoChartComments";
 export { default as VeltHighChartComments } from "./VeltHighChartComments";
 export { default as VeltChartComment } from "./VeltChartComment";
+export { default as VeltAutocomplete } from "./VeltAutocomplete";
 export { default as VeltWireframe } from "./VeltWireframe";
 export { default as VeltCommentDialogWireframe } from "./VeltCommentDialogWireframe";
 export { default as VeltCommentsSidebarWireframe } from "./VeltCommentsSidebarWireframe";
@@ -37,5 +38,6 @@ export { default as VeltCommentToolWireframe } from "./VeltCommentToolWireframe"
 export { default as VeltTextCommentToolWireframe } from "./VeltTextCommentToolWireframe";
 export { default as VeltTextCommentToolbarWireframe } from "./VeltTextCommentToolbarWireframe";
 export { default as VeltUserSelectorDropdownWireframe } from "./VeltUserSelectorDropdownWireframe";
+export { default as VeltAutocompleteOptionWireframe } from "./VeltAutocompleteOptionWireframe";
 export { default as VeltCommentBubbleAvatar } from "./VeltCommentBubble/VeltCommentBubbleAvatar";
 export { default as VeltCommentBubbleCommentsCount } from "./VeltCommentBubble/VeltCommentBubbleCommentsCount";

package/cjs/types/hooks/AutocompleteElement.d.ts

@@ -0,0 +1,9 @@
+import { AutocompleteElement } from "@veltdev/types";
+/**
+ * @beta This hook is in beta
+ */
+export declare function useAutocompleteUtils(): AutocompleteElement | undefined;
+/**
+ * @beta This hook is in beta
+ */
+export declare function useAutocompleteChipClick(): any;

package/cjs/types/hooks/LiveStateSyncElement.d.ts

@@ -33,4 +33,7 @@ export declare function useEditorAccessRequestHandler(): {
 /**
  * @beta This hook is in beta
  */
-export declare function useLiveState<T>(liveStateDataId: string, initialValue?: any, debounceTime?: number): [T, (value: T) => void];
+export declare function useLiveState<T>(liveStateDataId: string, initialValue?: any, options?: {
+    syncDuration?: number;
+    resetLiveState?: boolean;
+}): [T, (value: T) => void];

package/cjs/types/hooks/index.d.ts

@@ -10,3 +10,4 @@ export { useLiveSelectionUtils, } from './SelectionElement';
 export { useTagUtils, useTagAnnotations, } from './TagElement';
 export { useViewsUtils, useUniqueViewsByDate, useUniqueViewsByUser, } from './ViewsElement';
 export { useNotificationUtils, useNotificationsData, } from './NotificationElement';
+export { useAutocompleteUtils, useAutocompleteChipClick, } from './AutocompleteElement';

package/esm/index.js

@@ -220,12 +220,12 @@ var SnippylyProvider = function (props) {
 };
 
 var SnippylyCommentBubble = function (props) {
-    var targetCommentElementId = props.targetCommentElementId, avatar = props.avatar, showAvatar = props.showAvatar, commentBubbleTargetPinHover = props.commentBubbleTargetPinHover, children = props.children;
-    return (React.createElement("velt-comment-bubble", { "target-comment-element-id": targetCommentElementId, "show-avatar": [true, false].includes(showAvatar) ? (showAvatar ? 'true' : 'false') : undefined, avatar: [true, false].includes(avatar) ? (avatar ? 'true' : 'false') : undefined, "comment-bubble-target-pin-hover": commentBubbleTargetPinHover ? 'true' : undefined }, children));
+    var targetCommentElementId = props.targetCommentElementId, avatar = props.avatar, showAvatar = props.showAvatar, commentBubbleTargetPinHover = props.commentBubbleTargetPinHover, children = props.children, shadowDom = props.shadowDom, variant = props.variant;
+    return (React.createElement("velt-comment-bubble", { "target-comment-element-id": targetCommentElementId, "show-avatar": [true, false].includes(showAvatar) ? (showAvatar ? 'true' : 'false') : undefined, avatar: [true, false].includes(avatar) ? (avatar ? 'true' : 'false') : undefined, "comment-bubble-target-pin-hover": commentBubbleTargetPinHover ? 'true' : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, variant: variant }, children));
 };
 
 var SnippylyComments = function (props) {
-    var autoCategorize = props.autoCategorize, streamViewContainerId = props.streamViewContainerId, onSignIn = props.onSignIn, onUpgrade = props.onUpgrade, textMode = props.textMode, popoverMode = props.popoverMode, popoverTriangleComponent = props.popoverTriangleComponent, floatingCommentDialog = props.floatingCommentDialog, moderatorMode = props.moderatorMode, streamMode = props.streamMode, signInButton = props.signInButton, upgradeButton = props.upgradeButton, attachments = props.attachments, recordings = props.recordings, reactions = props.reactions, deviceInfo = props.deviceInfo, commentIndex = props.commentIndex, dialogOnHover = props.dialogOnHover, dialogOnTargetElementClick = props.dialogOnTargetElementClick, priority = props.priority, inboxMode = props.inboxMode, suggestionMode = props.suggestionMode, mobileMode = props.mobileMode, inlineCommentMode = props.inlineCommentMode, privateCommentMode = props.privateCommentMode, minimap = props.minimap, persistentCommentMode = props.persistentCommentMode, ghostComments = props.ghostComments, ghostCommentsIndicator = props.ghostCommentsIndicator, commentsOnDom = props.commentsOnDom, commentTool = props.commentTool, sidebarButtonOnCommentDialog = props.sidebarButtonOnCommentDialog, deviceIndicatorOnCommentPins = props.deviceIndicatorOnCommentPins, scrollToComment = props.scrollToComment, userMentions = props.userMentions, deleteOnBackspace = props.deleteOnBackspace, hotkey = props.hotkey, recordingSummary = props.recordingSummary, recordingCountdown = props.recordingCountdown, unreadIndicatorMode = props.unreadIndicatorMode, pinShadowDom = props.pinShadowDom, dialogShadowDom = props.dialogShadowDom, shadowDom = props.shadowDom, changeDetectionInCommentMode = props.changeDetectionInCommentMode, allowedElementIds = props.allowedElementIds, allowedElementClassNames = props.allowedElementClassNames, allowedElementQuerySelectors = props.allowedElementQuerySelectors, onCommentAdd = props.onCommentAdd, onCommentUpdate = props.onCommentUpdate, onCommentAccept = props.onCommentAccept, onCommentReject = props.onCommentReject, onSidebarButtonOnCommentDialogClick = props.onSidebarButtonOnCommentDialogClick, customStatus = props.customStatus, customPriority = props.customPriority, customCategory = props.customCategory, status = props.status, resolveButton = props.resolveButton, darkMode = props.darkMode, onCustomPinInject = props.onCustomPinInject, children = props.children;
+    var autoCategorize = props.autoCategorize, streamViewContainerId = props.streamViewContainerId, onSignIn = props.onSignIn, onUpgrade = props.onUpgrade, textMode = props.textMode, popoverMode = props.popoverMode, popoverTriangleComponent = props.popoverTriangleComponent, floatingCommentDialog = props.floatingCommentDialog, moderatorMode = props.moderatorMode, streamMode = props.streamMode, signInButton = props.signInButton, upgradeButton = props.upgradeButton, attachments = props.attachments, recordings = props.recordings, reactions = props.reactions, deviceInfo = props.deviceInfo, commentIndex = props.commentIndex, dialogOnHover = props.dialogOnHover, dialogOnTargetElementClick = props.dialogOnTargetElementClick, priority = props.priority, inboxMode = props.inboxMode, suggestionMode = props.suggestionMode, mobileMode = props.mobileMode, inlineCommentMode = props.inlineCommentMode, privateCommentMode = props.privateCommentMode, minimap = props.minimap, persistentCommentMode = props.persistentCommentMode, ghostComments = props.ghostComments, ghostCommentsIndicator = props.ghostCommentsIndicator, commentsOnDom = props.commentsOnDom, commentTool = props.commentTool, sidebarButtonOnCommentDialog = props.sidebarButtonOnCommentDialog, deviceIndicatorOnCommentPins = props.deviceIndicatorOnCommentPins, scrollToComment = props.scrollToComment, userMentions = props.userMentions, deleteOnBackspace = props.deleteOnBackspace, hotkey = props.hotkey, recordingSummary = props.recordingSummary, recordingCountdown = props.recordingCountdown, unreadIndicatorMode = props.unreadIndicatorMode, pinShadowDom = props.pinShadowDom, dialogShadowDom = props.dialogShadowDom, shadowDom = props.shadowDom, changeDetectionInCommentMode = props.changeDetectionInCommentMode, allowedElementIds = props.allowedElementIds, allowedElementClassNames = props.allowedElementClassNames, allowedElementQuerySelectors = props.allowedElementQuerySelectors, onCommentAdd = props.onCommentAdd, onCommentUpdate = props.onCommentUpdate, onCommentAccept = props.onCommentAccept, onCommentReject = props.onCommentReject, onSidebarButtonOnCommentDialogClick = props.onSidebarButtonOnCommentDialogClick, customStatus = props.customStatus, customPriority = props.customPriority, customCategory = props.customCategory, status = props.status, resolveButton = props.resolveButton, darkMode = props.darkMode, onCustomPinInject = props.onCustomPinInject, children = props.children, textCommentToolShadowDom = props.textCommentToolShadowDom, textCommentToolbarShadowDom = props.textCommentToolbarShadowDom;
     var ref = useRef();
     var onSignInRef = useRef(onSignIn);
     var onUpgradeRef = useRef(onUpgrade);
@@ -305,7 +305,7 @@ var SnippylyComments = function (props) {
             });
         }
     }, []);
-    return (React.createElement("velt-comments", { ref: ref, "auto-categorize": [true, false].includes(autoCategorize) ? (autoCategorize ? 'true' : 'false') : undefined, "data-stream-view-container-id": streamViewContainerId, "text-mode": [true, false].includes(textMode) ? (textMode ? 'true' : 'false') : undefined, "popover-mode": [true, false].includes(popoverMode) ? (popoverMode ? 'true' : 'false') : undefined, "popover-triangle-component": [true, false].includes(popoverTriangleComponent) ? (popoverTriangleComponent ? 'true' : 'false') : undefined, "floating-comment-dialog": [true, false].includes(floatingCommentDialog) ? (floatingCommentDialog ? 'true' : 'false') : undefined, "moderator-mode": [true, false].includes(moderatorMode) ? (moderatorMode ? 'true' : 'false') : undefined, "stream-mode": [true, false].includes(streamMode) ? (streamMode ? 'true' : 'false') : undefined, "sign-in-button": [true, false].includes(signInButton) ? (signInButton ? 'true' : 'false') : undefined, "upgrade-button": [true, false].includes(upgradeButton) ? (upgradeButton ? 'true' : 'false') : undefined, attachments: [true, false].includes(attachments) ? (attachments ? 'true' : 'false') : undefined, recordings: recordings, reactions: [true, false].includes(reactions) ? (reactions ? 'true' : 'false') : undefined, "device-info": [true, false].includes(deviceInfo) ? (deviceInfo ? 'true' : 'false') : undefined, "comment-index": [true, false].includes(commentIndex) ? (commentIndex ? 'true' : 'false') : undefined, "dialog-on-hover": [true, false].includes(dialogOnHover) ? (dialogOnHover ? 'true' : 'false') : undefined, "dialog-on-target-element-click": [true, false].includes(dialogOnTargetElementClick) ? (dialogOnTargetElementClick ? 'true' : 'false') : undefined, priority: [true, false].includes(priority) ? (priority ? 'true' : 'false') : undefined, status: [true, false].includes(status) ? (status ? 'true' : 'false') : undefined, "resolve-button": [true, false].includes(resolveButton) ? (resolveButton ? 'true' : 'false') : undefined, "inbox-mode": [true, false].includes(inboxMode) ? (inboxMode ? 'true' : 'false') : undefined, "suggestion-mode": [true, false].includes(suggestionMode) ? (suggestionMode ? 'true' : 'false') : undefined, "mobile-mode": [true, false].includes(mobileMode) ? (mobileMode ? 'true' : 'false') : undefined, "inline-comment-mode": [true, false].includes(inlineCommentMode) ? (inlineCommentMode ? 'true' : 'false') : undefined, "private-comment-mode": [true, false].includes(privateCommentMode) ? (privateCommentMode ? 'true' : 'false') : undefined, minimap: [true, false].includes(minimap) ? (minimap ? 'true' : 'false') : undefined, "persistent-comment-mode": [true, false].includes(persistentCommentMode) ? (persistentCommentMode ? 'true' : 'false') : undefined, "ghost-comments": [true, false].includes(ghostComments) ? (ghostComments ? 'true' : 'false') : undefined, "ghost-comments-indicator": [true, false].includes(ghostCommentsIndicator) ? (ghostCommentsIndicator ? 'true' : 'false') : undefined, "comments-on-dom": [true, false].includes(commentsOnDom) ? (commentsOnDom ? 'true' : 'false') : undefined, "comment-tool": [true, false].includes(commentTool) ? (commentTool ? 'true' : 'false') : undefined, "sidebar-button-on-comment-dialog": [true, false].includes(sidebarButtonOnCommentDialog) ? (sidebarButtonOnCommentDialog ? 'true' : 'false') : undefined, "device-indicator-on-comment-pins": [true, false].includes(deviceIndicatorOnCommentPins) ? (deviceIndicatorOnCommentPins ? 'true' : 'false') : undefined, "scroll-to-comment": [true, false].includes(scrollToComment) ? (scrollToComment ? 'true' : 'false') : undefined, "user-mentions": [true, false].includes(userMentions) ? (userMentions ? 'true' : 'false') : undefined, "delete-on-backspace": [true, false].includes(deleteOnBackspace) ? (deleteOnBackspace ? 'true' : 'false') : undefined, hotkey: [true, false].includes(hotkey) ? (hotkey ? 'true' : 'false') : undefined, "recording-summary": [true, false].includes(recordingSummary) ? (recordingSummary ? 'true' : 'false') : undefined, "recording-countdown": [true, false].includes(recordingCountdown) ? (recordingCountdown ? 'true' : 'false') : undefined, "unread-indicator-mode": unreadIndicatorMode, "pin-shadow-dom": [true, false].includes(pinShadowDom) ? (pinShadowDom ? 'true' : 'false') : undefined, "dialog-shadow-dom": [true, false].includes(dialogShadowDom) ? (dialogShadowDom ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "change-detection-in-comment-mode": [true, false].includes(changeDetectionInCommentMode) ? (changeDetectionInCommentMode ? 'true' : 'false') : undefined, "allowed-element-ids": JSON.stringify(allowedElementIds), "allowed-element-class-names": JSON.stringify(allowedElementClassNames), "allowed-element-query-selectors": JSON.stringify(allowedElementQuerySelectors), "custom-status": JSON.stringify(customStatus), "custom-priority": JSON.stringify(customPriority), "custom-category": JSON.stringify(customCategory), "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
+    return (React.createElement("velt-comments", { ref: ref, "auto-categorize": [true, false].includes(autoCategorize) ? (autoCategorize ? 'true' : 'false') : undefined, "data-stream-view-container-id": streamViewContainerId, "text-mode": [true, false].includes(textMode) ? (textMode ? 'true' : 'false') : undefined, "popover-mode": [true, false].includes(popoverMode) ? (popoverMode ? 'true' : 'false') : undefined, "popover-triangle-component": [true, false].includes(popoverTriangleComponent) ? (popoverTriangleComponent ? 'true' : 'false') : undefined, "floating-comment-dialog": [true, false].includes(floatingCommentDialog) ? (floatingCommentDialog ? 'true' : 'false') : undefined, "moderator-mode": [true, false].includes(moderatorMode) ? (moderatorMode ? 'true' : 'false') : undefined, "stream-mode": [true, false].includes(streamMode) ? (streamMode ? 'true' : 'false') : undefined, "sign-in-button": [true, false].includes(signInButton) ? (signInButton ? 'true' : 'false') : undefined, "upgrade-button": [true, false].includes(upgradeButton) ? (upgradeButton ? 'true' : 'false') : undefined, attachments: [true, false].includes(attachments) ? (attachments ? 'true' : 'false') : undefined, recordings: recordings, reactions: [true, false].includes(reactions) ? (reactions ? 'true' : 'false') : undefined, "device-info": [true, false].includes(deviceInfo) ? (deviceInfo ? 'true' : 'false') : undefined, "comment-index": [true, false].includes(commentIndex) ? (commentIndex ? 'true' : 'false') : undefined, "dialog-on-hover": [true, false].includes(dialogOnHover) ? (dialogOnHover ? 'true' : 'false') : undefined, "dialog-on-target-element-click": [true, false].includes(dialogOnTargetElementClick) ? (dialogOnTargetElementClick ? 'true' : 'false') : undefined, priority: [true, false].includes(priority) ? (priority ? 'true' : 'false') : undefined, status: [true, false].includes(status) ? (status ? 'true' : 'false') : undefined, "resolve-button": [true, false].includes(resolveButton) ? (resolveButton ? 'true' : 'false') : undefined, "inbox-mode": [true, false].includes(inboxMode) ? (inboxMode ? 'true' : 'false') : undefined, "suggestion-mode": [true, false].includes(suggestionMode) ? (suggestionMode ? 'true' : 'false') : undefined, "mobile-mode": [true, false].includes(mobileMode) ? (mobileMode ? 'true' : 'false') : undefined, "inline-comment-mode": [true, false].includes(inlineCommentMode) ? (inlineCommentMode ? 'true' : 'false') : undefined, "private-comment-mode": [true, false].includes(privateCommentMode) ? (privateCommentMode ? 'true' : 'false') : undefined, minimap: [true, false].includes(minimap) ? (minimap ? 'true' : 'false') : undefined, "persistent-comment-mode": [true, false].includes(persistentCommentMode) ? (persistentCommentMode ? 'true' : 'false') : undefined, "ghost-comments": [true, false].includes(ghostComments) ? (ghostComments ? 'true' : 'false') : undefined, "ghost-comments-indicator": [true, false].includes(ghostCommentsIndicator) ? (ghostCommentsIndicator ? 'true' : 'false') : undefined, "comments-on-dom": [true, false].includes(commentsOnDom) ? (commentsOnDom ? 'true' : 'false') : undefined, "comment-tool": [true, false].includes(commentTool) ? (commentTool ? 'true' : 'false') : undefined, "sidebar-button-on-comment-dialog": [true, false].includes(sidebarButtonOnCommentDialog) ? (sidebarButtonOnCommentDialog ? 'true' : 'false') : undefined, "device-indicator-on-comment-pins": [true, false].includes(deviceIndicatorOnCommentPins) ? (deviceIndicatorOnCommentPins ? 'true' : 'false') : undefined, "scroll-to-comment": [true, false].includes(scrollToComment) ? (scrollToComment ? 'true' : 'false') : undefined, "user-mentions": [true, false].includes(userMentions) ? (userMentions ? 'true' : 'false') : undefined, "delete-on-backspace": [true, false].includes(deleteOnBackspace) ? (deleteOnBackspace ? 'true' : 'false') : undefined, hotkey: [true, false].includes(hotkey) ? (hotkey ? 'true' : 'false') : undefined, "recording-summary": [true, false].includes(recordingSummary) ? (recordingSummary ? 'true' : 'false') : undefined, "recording-countdown": [true, false].includes(recordingCountdown) ? (recordingCountdown ? 'true' : 'false') : undefined, "unread-indicator-mode": unreadIndicatorMode, "pin-shadow-dom": [true, false].includes(pinShadowDom) ? (pinShadowDom ? 'true' : 'false') : undefined, "dialog-shadow-dom": [true, false].includes(dialogShadowDom) ? (dialogShadowDom ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "text-comment-tool-shadow-dom": [true, false].includes(textCommentToolShadowDom) ? (textCommentToolShadowDom ? 'true' : 'false') : undefined, "text-comment-toolbar-shadow-dom": [true, false].includes(textCommentToolbarShadowDom) ? (textCommentToolbarShadowDom ? 'true' : 'false') : undefined, "change-detection-in-comment-mode": [true, false].includes(changeDetectionInCommentMode) ? (changeDetectionInCommentMode ? 'true' : 'false') : undefined, "allowed-element-ids": JSON.stringify(allowedElementIds), "allowed-element-class-names": JSON.stringify(allowedElementClassNames), "allowed-element-query-selectors": JSON.stringify(allowedElementQuerySelectors), "custom-status": JSON.stringify(customStatus), "custom-priority": JSON.stringify(customPriority), "custom-category": JSON.stringify(customCategory), "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
 };
 
 var SnippylyCommentsSidebar = function (props) {
@@ -349,11 +349,11 @@ var SnippylyCommentsSidebar = function (props) {
             });
         }
     }, []);
-    return (React.createElement("velt-comments-sidebar", { ref: ref, "embed-mode": [true, false].includes(embedMode) ? (embedMode ? 'true' : 'false') : undefined, "enable-url-navigation": [true, false].includes(enableUrlNavigation) ? (enableUrlNavigation ? 'true' : 'false') : undefined, "url-navigation": [true, false].includes(urlNavigation) ? (urlNavigation ? 'true' : 'false') : undefined, "page-mode": [true, false].includes(pageMode) ? (pageMode ? 'true' : 'false') : undefined, "current-location-suffix": [true, false].includes(currentLocationSuffix) ? (currentLocationSuffix ? 'true' : 'false') : undefined, "filter-config": filterConfig ? JSON.stringify(filterConfig) : undefined, "group-config": groupConfig ? JSON.stringify(groupConfig) : undefined, filters: filters ? JSON.stringify(filters) : undefined, variant: variant, "page-mode-composer-variant": pageModeComposerVariant, "dialog-variant": dialogVariant, "sort-data": sortData, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined }));
+    return (React.createElement("velt-comments-sidebar", { ref: ref, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "embed-mode": [true, false].includes(embedMode) ? (embedMode ? 'true' : 'false') : undefined, "enable-url-navigation": [true, false].includes(enableUrlNavigation) ? (enableUrlNavigation ? 'true' : 'false') : undefined, "url-navigation": [true, false].includes(urlNavigation) ? (urlNavigation ? 'true' : 'false') : undefined, "page-mode": [true, false].includes(pageMode) ? (pageMode ? 'true' : 'false') : undefined, "current-location-suffix": [true, false].includes(currentLocationSuffix) ? (currentLocationSuffix ? 'true' : 'false') : undefined, "filter-config": filterConfig ? JSON.stringify(filterConfig) : undefined, "group-config": groupConfig ? JSON.stringify(groupConfig) : undefined, filters: filters ? JSON.stringify(filters) : undefined, variant: variant, "page-mode-composer-variant": pageModeComposerVariant, "dialog-variant": dialogVariant, "sort-data": sortData }));
 };
 
 var SnippylyCommentTool = function (props) {
-    var targetCommentElementId = props.targetCommentElementId, onCommentModeChange = props.onCommentModeChange, children = props.children, darkMode = props.darkMode, variant = props.variant;
+    var targetCommentElementId = props.targetCommentElementId, onCommentModeChange = props.onCommentModeChange, children = props.children, darkMode = props.darkMode, variant = props.variant, shadowDom = props.shadowDom;
     var ref = useRef();
     var onCommentModeChangeRef = useRef(onCommentModeChange);
     // Update the ref to always point to the latest callback function
@@ -370,7 +370,7 @@ var SnippylyCommentTool = function (props) {
             });
         }
     }, []);
-    return (React.createElement("velt-comment-tool", { ref: ref, "target-comment-element-id": targetCommentElementId, variant: variant, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
+    return (React.createElement("velt-comment-tool", { ref: ref, "target-comment-element-id": targetCommentElementId, variant: variant, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
 };
 
 var SnippylyCursor = function (props) {
@@ -509,8 +509,8 @@ var SnippylyRecorderTool = function (props) {
 };
 
 var SnippylySidebarButton = function (props) {
-    var tooltipText = props.tooltipText, children = props.children, darkMode = props.darkMode;
-    return (React.createElement("velt-sidebar-button", { "tooltip-text": tooltipText, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
+    var tooltipText = props.tooltipText, children = props.children, darkMode = props.darkMode, shadowDom = props.shadowDom;
+    return (React.createElement("velt-sidebar-button", { "tooltip-text": tooltipText, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
 };
 
 var SnippylyTags = function (props) {
@@ -1105,6 +1105,11 @@ var VeltHighChartComments = function (_a) {
             React.createElement(VeltChartComment, { ghostComment: true, commentMetadata: point.metadata, dialogMetadataTemplate: dialogMetadataTemplate || point.dialogMetadataTemplate || ['groupId', 'label', 'value'] }))); })));
 };
 
+var VeltAutocomplete = function (props) {
+    var hotkey = props.hotkey, listData = props.listData;
+    return (React.createElement("velt-autocomplete", { hotkey: hotkey, "list-data": (typeof listData === 'object') ? JSON.stringify(listData) : undefined }));
+};
+
 var VeltWireframe = function (props) {
     var children = props.children;
     return (React.createElement("velt-wireframe", null, children));
@@ -1158,9 +1163,9 @@ var VeltCommentDialogCommentCategory = function (props) {
     return (React.createElement("velt-comment-dialog-comment-category-wireframe", null, children));
 };
 
-var VeltCommentDialogCommentCount = function (props) {
+var VeltCommentDialogCommentIndex = function (props) {
     var children = props.children;
-    return (React.createElement("velt-comment-dialog-comment-count-wireframe", null, children));
+    return (React.createElement("velt-comment-dialog-comment-index-wireframe", null, children));
 };
 
 var VeltCommentDialogCommentSuggestionStatus = function (props) {
@@ -1367,7 +1372,7 @@ VeltCommentDialogWireframe.AssigneeBanner = VeltCommentDialogAssigneeBanner;
 VeltCommentDialogWireframe.AssignMenu = VeltCommentDialogAssignMenu;
 VeltCommentDialogWireframe.Body = VeltCommentDialogBody;
 VeltCommentDialogWireframe.CommentCategory = VeltCommentDialogCommentCategory;
-VeltCommentDialogWireframe.CommentCount = VeltCommentDialogCommentCount;
+VeltCommentDialogWireframe.CommentIndex = VeltCommentDialogCommentIndex;
 VeltCommentDialogWireframe.CommentSuggestionStatus = VeltCommentDialogCommentSuggestionStatus;
 VeltCommentDialogWireframe.Composer = VeltCommentDialogComposer;
 VeltCommentDialogWireframe.CopyLink = VeltCommentDialogCopyLink;
@@ -1496,9 +1501,9 @@ var VeltCommentsSidebarList = function (props) {
     return (React.createElement("velt-comments-sidebar-list-wireframe", null, children));
 };
 
-var VeltCommentsSidebarPageMode = function (props) {
+var VeltCommentsSidebarPageModeComposer = function (props) {
     var children = props.children;
-    return (React.createElement("velt-comments-sidebar-page-mode-wireframe", null, children));
+    return (React.createElement("velt-comments-sidebar-page-mode-composer-wireframe", null, children));
 };
 
 var VeltCommentsSidebarSearch = function (props) {
@@ -1525,7 +1530,7 @@ VeltCommentsSidebarWireframe.EmptyPlaceholder = VeltCommentsSidebarEmptyPlacehol
 VeltCommentsSidebarWireframe.Filter = VeltCommentsSidebarFilter;
 VeltCommentsSidebarWireframe.Header = VeltCommentsSidebarHeader;
 VeltCommentsSidebarWireframe.List = VeltCommentsSidebarList;
-VeltCommentsSidebarWireframe.PageMode = VeltCommentsSidebarPageMode;
+VeltCommentsSidebarWireframe.PageModeComposer = VeltCommentsSidebarPageModeComposer;
 VeltCommentsSidebarWireframe.Search = VeltCommentsSidebarSearch;
 VeltCommentsSidebarWireframe.Status = VeltCommentsSidebarStatus;
 VeltCommentsSidebarWireframe.FilterButton = VeltCommentsSidebarFilterButton;
@@ -1571,8 +1576,8 @@ var VeltSidebarButtonCommentsCount = function (props) {
 };
 
 var VeltSidebarButtonWireframe = function (props) {
-    var children = props.children;
-    return (React.createElement("velt-sidebar-button-wireframe", null, children));
+    var children = props.children, remainingProp = __rest(props, ["children"]);
+    return (React.createElement("velt-sidebar-button-wireframe", __assign({}, remainingProp), children));
 };
 VeltSidebarButtonWireframe.CommentsCount = VeltSidebarButtonCommentsCount;
 
@@ -1644,6 +1649,35 @@ VeltUserSelectorDropdown.Email = VeltUserSelectorDropdownEmail;
 VeltUserSelectorDropdown.ErrorIcon = VeltUserSelectorDropdownErrorIcon;
 VeltUserSelectorDropdown.Name = VeltUserSelectorDropdownName;
 
+var VeltAutocompleteOptionIconWireframe = function (props) {
+    var children = props.children;
+    return (React.createElement("velt-autocomplete-option-icon-wireframe", null, children));
+};
+
+var VeltAutocompleteOptionNameWireframe = function (props) {
+    var children = props.children;
+    return (React.createElement("velt-autocomplete-option-name-wireframe", null, children));
+};
+
+var VeltAutocompleteOptionDescriptionWireframe = function (props) {
+    var children = props.children;
+    return (React.createElement("velt-autocomplete-option-description-wireframe", null, children));
+};
+
+var VeltAutocompleteOptionErrorIconWireframe = function (props) {
+    var children = props.children;
+    return (React.createElement("velt-autocomplete-option-error-icon-wireframe", null, children));
+};
+
+var VeltAutocompleteOptionWireframe = function (props) {
+    var children = props.children;
+    return (React.createElement("velt-autocomplete-option-wireframe", null, children));
+};
+VeltAutocompleteOptionWireframe.Icon = VeltAutocompleteOptionIconWireframe;
+VeltAutocompleteOptionWireframe.Description = VeltAutocompleteOptionDescriptionWireframe;
+VeltAutocompleteOptionWireframe.ErrorIcon = VeltAutocompleteOptionErrorIconWireframe;
+VeltAutocompleteOptionWireframe.Name = VeltAutocompleteOptionNameWireframe;
+
 var VeltCommentBubbleAvatar = function (props) {
     var children = props.children;
     return (React.createElement("velt-comment-bubble-avatar-wireframe", null, children));
@@ -1984,18 +2018,45 @@ function useEditorAccessRequestHandler() {
 /**
  * @beta This hook is in beta
  */
-function useLiveState(liveStateDataId, initialValue, debounceTime) {
-    if (debounceTime === void 0) { debounceTime = 50; }
+function useLiveState(liveStateDataId, initialValue, options) {
     var liveStateSyncElement = useLiveStateSyncUtils();
-    var _a = React.useState(initialValue), data = _a[0], setData = _a[1];
+    var client = useVeltClient().client;
+    var _a = React.useState(null), documentId = _a[0], setDocumentId = _a[1];
+    var _b = React.useState(null), user = _b[0], setUser = _b[1];
+    var _c = React.useState(initialValue), data = _c[0], setData = _c[1];
+    useEffect(function () {
+        resetLiveStateData();
+    }, [documentId, user]);
+    var resetLiveStateData = function () {
+        if (user && documentId) {
+            liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.setLiveStateData(liveStateDataId, data);
+        }
+    };
     useEffect(function () {
         if (!(liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.getLiveStateData))
             return;
+        var documentPathsSubscription, userSubscription;
+        if (options === null || options === void 0 ? void 0 : options.resetLiveState) {
+            documentPathsSubscription = client.docService.getDocumentPaths$().subscribe(function (paths) {
+                if (paths) {
+                    setDocumentId(paths === null || paths === void 0 ? void 0 : paths.documentId);
+                    documentPathsSubscription === null || documentPathsSubscription === void 0 ? void 0 : documentPathsSubscription.unsubscribe();
+                }
+            });
+            userSubscription = client.authService.getUser$().subscribe(function (user) {
+                if (user) {
+                    setUser(user);
+                    userSubscription === null || userSubscription === void 0 ? void 0 : userSubscription.unsubscribe();
+                }
+            });
+        }
         var subscription = liveStateSyncElement.getLiveStateData(liveStateDataId).subscribe(function (res) {
             setData(res);
         });
         return function () {
             subscription.unsubscribe();
+            documentPathsSubscription === null || documentPathsSubscription === void 0 ? void 0 : documentPathsSubscription.unsubscribe();
+            userSubscription === null || userSubscription === void 0 ? void 0 : userSubscription.unsubscribe();
         };
     }, [liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.getLiveStateData]);
     var useDebounce = function (callback) {
@@ -2016,7 +2077,7 @@ function useLiveState(liveStateDataId, initialValue, debounceTime) {
     };
     var setDataFunction = function (value) {
         setData(value);
-        debouncedOnInput(value, debounceTime); // default 50ms debounce time
+        debouncedOnInput(value, (options === null || options === void 0 ? void 0 : options.syncDuration) >= 0 ? options === null || options === void 0 ? void 0 : options.syncDuration : 50); // default 50ms debounce time
     };
     var debouncedOnInput = useDebounce(function (value) {
         if (liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.setLiveStateData) {
@@ -2239,6 +2300,39 @@ function useNotificationsData() {
     return data;
 }
 
+/**
+ * @beta This hook is in beta
+ */
+function useAutocompleteUtils() {
+    var _a = React.useState(), autocompleteElement = _a[0], setAutocompleteElement = _a[1];
+    var client = useVeltClient().client;
+    React.useEffect(function () {
+        if (!client || autocompleteElement)
+            return;
+        var loadedAutocompleteElement = client.getAutocompleteElement();
+        setAutocompleteElement(loadedAutocompleteElement);
+    }, [client, setAutocompleteElement, autocompleteElement]);
+    return autocompleteElement;
+}
+/**
+ * @beta This hook is in beta
+ */
+function useAutocompleteChipClick() {
+    var autocompleteElement = useAutocompleteUtils();
+    var _a = React.useState(), data = _a[0], setData = _a[1];
+    useEffect(function () {
+        if (!autocompleteElement)
+            return;
+        var subscription = autocompleteElement.onAutocompleteChipClick().subscribe(function (res) {
+            setData(res);
+        });
+        return function () {
+            subscription.unsubscribe();
+        };
+    }, [autocompleteElement]);
+    return data;
+}
+
 var sessionId = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
 var getSessionId = function () {
     return sessionId;
@@ -2330,5 +2424,5 @@ var logLiveState = function (action, liveStateDataId) {
     }
 };
 
-export { SnippylyArrowTool as VeltArrowTool, SnippylyArrows as VeltArrows, VeltChartComment, SnippylyCommentBubble as VeltCommentBubble, VeltCommentBubbleAvatar, VeltCommentBubbleCommentsCount, VeltCommentDialogWireframe, VeltCommentPinWireframe, VeltCommentPlayerTimeline, VeltCommentThread, SnippylyCommentTool as VeltCommentTool, VeltCommentToolWireframe, SnippylyComments as VeltComments, SnippylyCommentsSidebar as VeltCommentsSidebar, VeltCommentsSidebarWireframe, SnippylyCursor as VeltCursor, VeltHighChartComments, SnippylyHuddle as VeltHuddle, SnippylyHuddleTool as VeltHuddleTool, VeltNivoChartComments, VeltNotificationsHistoryPanel, VeltNotificationsPanel, VeltNotificationsTool, SnippylyPresence as VeltPresence, SnippylyProvider as VeltProvider, SnippylyRecorderControlPanel as VeltRecorderControlPanel, SnippylyRecorderNotes as VeltRecorderNotes, SnippylyRecorderPlayer as VeltRecorderPlayer, SnippylyRecorderTool as VeltRecorderTool, SnippylySidebarButton as VeltSidebarButton, VeltSidebarButtonWireframe, SnippylyTagTool as VeltTagTool, SnippylyTags as VeltTags, VeltTextCommentToolWireframe, VeltTextCommentToolbar as VeltTextCommentToolbarWireframe, SnippylyUserInviteTool as VeltUserInviteTool, SnippylyUserRequestTool as VeltUserRequestTool, VeltUserSelectorDropdown as VeltUserSelectorDropdownWireframe, VeltVideoPlayer, VeltViewAnalytics, VeltWireframe, createLiveStateMiddleware, useAIRewriterUtils, useAddLocation, useClient, useCommentAddHandler, useCommentAnnotations, useCommentDialogSidebarClickHandler, useCommentModeState, useCommentUpdateHandler, useCommentUtils, useCursorUsers, useCursorUtils, useEditor, useEditorAccessRequestHandler, useEditorAccessTimer, useHuddleUtils, useIdentify, useLiveSelectionUtils, useLiveState, useLiveStateData, useLiveStateSyncUtils, useNotificationUtils, useNotificationsData, usePresenceUsers, usePresenceUtils, useRecorderAddHandler, useRecorderUtils, useSetDocumentId, useSetLiveStateData, useSetLocation, useTagAnnotations, useTagUtils, useUniqueViewsByDate, useUniqueViewsByUser, useUnsetDocumentId, useUserEditorState, useVeltClient, useViewsUtils };
+export { SnippylyArrowTool as VeltArrowTool, SnippylyArrows as VeltArrows, VeltAutocomplete, VeltAutocompleteOptionWireframe, VeltChartComment, SnippylyCommentBubble as VeltCommentBubble, VeltCommentBubbleAvatar, VeltCommentBubbleCommentsCount, VeltCommentDialogWireframe, VeltCommentPinWireframe, VeltCommentPlayerTimeline, VeltCommentThread, SnippylyCommentTool as VeltCommentTool, VeltCommentToolWireframe, SnippylyComments as VeltComments, SnippylyCommentsSidebar as VeltCommentsSidebar, VeltCommentsSidebarWireframe, SnippylyCursor as VeltCursor, VeltHighChartComments, SnippylyHuddle as VeltHuddle, SnippylyHuddleTool as VeltHuddleTool, VeltNivoChartComments, VeltNotificationsHistoryPanel, VeltNotificationsPanel, VeltNotificationsTool, SnippylyPresence as VeltPresence, SnippylyProvider as VeltProvider, SnippylyRecorderControlPanel as VeltRecorderControlPanel, SnippylyRecorderNotes as VeltRecorderNotes, SnippylyRecorderPlayer as VeltRecorderPlayer, SnippylyRecorderTool as VeltRecorderTool, SnippylySidebarButton as VeltSidebarButton, VeltSidebarButtonWireframe, SnippylyTagTool as VeltTagTool, SnippylyTags as VeltTags, VeltTextCommentToolWireframe, VeltTextCommentToolbar as VeltTextCommentToolbarWireframe, SnippylyUserInviteTool as VeltUserInviteTool, SnippylyUserRequestTool as VeltUserRequestTool, VeltUserSelectorDropdown as VeltUserSelectorDropdownWireframe, VeltVideoPlayer, VeltViewAnalytics, VeltWireframe, createLiveStateMiddleware, useAIRewriterUtils, useAddLocation, useAutocompleteChipClick, useAutocompleteUtils, useClient, useCommentAddHandler, useCommentAnnotations, useCommentDialogSidebarClickHandler, useCommentModeState, useCommentUpdateHandler, useCommentUtils, useCursorUsers, useCursorUtils, useEditor, useEditorAccessRequestHandler, useEditorAccessTimer, useHuddleUtils, useIdentify, useLiveSelectionUtils, useLiveState, useLiveStateData, useLiveStateSyncUtils, useNotificationUtils, useNotificationsData, usePresenceUsers, usePresenceUtils, useRecorderAddHandler, useRecorderUtils, useSetDocumentId, useSetLiveStateData, useSetLocation, useTagAnnotations, useTagUtils, useUniqueViewsByDate, useUniqueViewsByUser, useUnsetDocumentId, useUserEditorState, useVeltClient, useViewsUtils };
 //# sourceMappingURL=index.js.map