@envive-ai/react-toolkit-v3 0.3.22 → 0.3.23

package/dist/ChatHeader/hooks/useGetHandleProperties.js

@@ -1,3 +1,4 @@
+import { extractColorNameFromCssVar } from "../../packages/components-v3/tokens/utils.js";
 import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { ChatHeaderVariant, HandleState } from "../types/index.js";
 
@@ -60,8 +61,9 @@ const getHandleStateClasses = (state) => {
 	};
 	return {};
 };
-const useGetHandleProperties = (theme, variant, state) => {
-	const containerClasses = containerClassesMap[theme][variant];
+const useGetHandleProperties = (theme, variant, state, headerBgColor) => {
+	const colorName = extractColorNameFromCssVar(headerBgColor);
+	const containerClasses = `${containerClassesMap[theme][variant]} envive-tw-bg-${colorName}`;
 	const { leftBar } = chev[theme][variant];
 	const { rightBar } = chev[theme][variant];
 	return {

package/dist/ChatHeader/hooks/useGetLayoutProperties.cjs

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 const require_utils = require('../../packages/components-v3/tokens/utils.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 const require_index = require('../types/index.cjs');
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);

package/dist/ChatHeader/hooks/useGetLayoutProperties.js

@@ -1,5 +1,5 @@
-import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { extractColorNameFromCssVar } from "../../packages/components-v3/tokens/utils.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { ChatHeaderVariant } from "../types/index.js";
 import classNames from "classnames";
 

package/dist/ChatHeader/hooks/useGetToggleOptionProperties.cjs

@@ -4,7 +4,7 @@ require('../../Typography/index.cjs');
 const require_index$1 = require('../types/index.cjs');
 
 //#region src/components/ChatHeader/hooks/useGetToggleOptionProperties.ts
-const defaultContainerStandardClasses = "envive-tw-px-[6px] envive-tw-py-1 envive-tw-rounded-[var(--envive-global-custom-border-radius)] envive-tw-cursor-pointer";
+const defaultContainerStandardClasses = "envive-tw-px-[8px] envive-tw-py-1 envive-tw-rounded-[var(--envive-global-custom-border-radius)] envive-tw-cursor-pointer";
 const defaultContainerModernClasses = "envive-tw-px-4 envive-tw-py-2 envive-tw-rounded-[var(--envive-global-custom-border-radius)] envive-tw-cursor-pointer";
 const defaultMinimalClasses = "envive-tw-cursor-pointer";
 const opacity = "envive-tw-opacity-50";

package/dist/ChatHeader/hooks/useGetToggleOptionProperties.js

@@ -4,7 +4,7 @@ import "../../Typography/index.js";
 import { ChatHeaderVariant } from "../types/index.js";
 
 //#region src/components/ChatHeader/hooks/useGetToggleOptionProperties.ts
-const defaultContainerStandardClasses = "envive-tw-px-[6px] envive-tw-py-1 envive-tw-rounded-[var(--envive-global-custom-border-radius)] envive-tw-cursor-pointer";
+const defaultContainerStandardClasses = "envive-tw-px-[8px] envive-tw-py-1 envive-tw-rounded-[var(--envive-global-custom-border-radius)] envive-tw-cursor-pointer";
 const defaultContainerModernClasses = "envive-tw-px-4 envive-tw-py-2 envive-tw-rounded-[var(--envive-global-custom-border-radius)] envive-tw-cursor-pointer";
 const defaultMinimalClasses = "envive-tw-cursor-pointer";
 const opacity = "envive-tw-opacity-50";

package/dist/ChatPreview/ChatPreview.cjs

@@ -19,8 +19,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 const ChatPreview = ({ baseProps, widgetContentProps, widgetStyleProps, widgetEventProps }) => {
 	const { id, testId, className, style } = baseProps ?? {};
 	const { theme = require_theme.Theme.GLOBAL_CUSTOM, variant = require_types.WidgetWrapperVariant.CARD_WITH_BORDER, hideTextField, hideLogo, hexCardColor } = widgetStyleProps ?? {};
-	const { messageText, promptButtons, textFieldPlaceholderText, logoSrc, titleLabel } = widgetContentProps ?? {};
-	const { handlePromptButtonClick, handlePromptButtonDrag, handlePromptButtonHover, handlePromptButtonMouseDown, handlePromptButtonMouseUp, handlePromptButtonTouchStart, handlePromptButtonTouchEnd, handleLinkClick, handleTextFieldClick } = widgetEventProps ?? {};
+	const { messageText, promptButtons, textFieldPlaceholderText, logoSrc, titleLabel, voiceInputEnabled } = widgetContentProps ?? {};
+	const { handlePromptButtonClick, handlePromptButtonDrag, handlePromptButtonHover, handlePromptButtonMouseDown, handlePromptButtonMouseUp, handlePromptButtonTouchStart, handlePromptButtonTouchEnd, handleLinkClick, handleTextFieldClick, onTranscriptionStarted, onTranscriptionCompleted } = widgetEventProps ?? {};
 	const suggestionTextMap = (0, react.useMemo)(() => {
 		return Object.fromEntries(promptButtons?.map((suggestion) => [suggestion.content, suggestion]) ?? []);
 	}, [promptButtons]);
@@ -50,7 +50,10 @@ const ChatPreview = ({ baseProps, widgetContentProps, widgetStyleProps, widgetEv
 	const widgetTextField = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WidgetTextField.WidgetTextField, {
 		theme: finalTheme,
 		placeholder: textFieldPlaceholderText ?? "",
-		onClick: () => handleTextFieldClick?.()
+		onClick: () => handleTextFieldClick?.(),
+		enableVoiceInput: voiceInputEnabled,
+		onTranscriptionStarted,
+		onTranscriptionCompleted
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WidgetWrapperWithTitle.WidgetWrapperWithTitle, {
 		id,

package/dist/ChatPreview/ChatPreview.d.cts

@@ -1,5 +1,5 @@
 import { ChatPreviewProps } from "./types/types.cjs";
-import * as react_jsx_runtime22 from "react/jsx-runtime";
+import * as react_jsx_runtime32 from "react/jsx-runtime";
 
 //#region src/components/ChatPreview/ChatPreview.d.ts
 declare const ChatPreview: ({
@@ -7,6 +7,6 @@ declare const ChatPreview: ({
   widgetContentProps,
   widgetStyleProps,
   widgetEventProps
-}: ChatPreviewProps) => react_jsx_runtime22.JSX.Element;
+}: ChatPreviewProps) => react_jsx_runtime32.JSX.Element;
 //#endregion
 export { ChatPreview };

package/dist/ChatPreview/ChatPreview.d.ts

@@ -1,5 +1,5 @@
 import { ChatPreviewProps } from "./types/types.js";
-import * as react_jsx_runtime31 from "react/jsx-runtime";
+import * as react_jsx_runtime29 from "react/jsx-runtime";
 
 //#region src/components/ChatPreview/ChatPreview.d.ts
 declare const ChatPreview: ({
@@ -7,6 +7,6 @@ declare const ChatPreview: ({
   widgetContentProps,
   widgetStyleProps,
   widgetEventProps
-}: ChatPreviewProps) => react_jsx_runtime31.JSX.Element;
+}: ChatPreviewProps) => react_jsx_runtime29.JSX.Element;
 //#endregion
 export { ChatPreview };

package/dist/ChatPreview/ChatPreview.js

@@ -18,8 +18,8 @@ import { jsx } from "react/jsx-runtime";
 const ChatPreview = ({ baseProps, widgetContentProps, widgetStyleProps, widgetEventProps }) => {
 	const { id, testId, className, style } = baseProps ?? {};
 	const { theme = Theme.GLOBAL_CUSTOM, variant = WidgetWrapperVariant.CARD_WITH_BORDER, hideTextField, hideLogo, hexCardColor } = widgetStyleProps ?? {};
-	const { messageText, promptButtons, textFieldPlaceholderText, logoSrc, titleLabel } = widgetContentProps ?? {};
-	const { handlePromptButtonClick, handlePromptButtonDrag, handlePromptButtonHover, handlePromptButtonMouseDown, handlePromptButtonMouseUp, handlePromptButtonTouchStart, handlePromptButtonTouchEnd, handleLinkClick, handleTextFieldClick } = widgetEventProps ?? {};
+	const { messageText, promptButtons, textFieldPlaceholderText, logoSrc, titleLabel, voiceInputEnabled } = widgetContentProps ?? {};
+	const { handlePromptButtonClick, handlePromptButtonDrag, handlePromptButtonHover, handlePromptButtonMouseDown, handlePromptButtonMouseUp, handlePromptButtonTouchStart, handlePromptButtonTouchEnd, handleLinkClick, handleTextFieldClick, onTranscriptionStarted, onTranscriptionCompleted } = widgetEventProps ?? {};
 	const suggestionTextMap = useMemo(() => {
 		return Object.fromEntries(promptButtons?.map((suggestion) => [suggestion.content, suggestion]) ?? []);
 	}, [promptButtons]);
@@ -49,7 +49,10 @@ const ChatPreview = ({ baseProps, widgetContentProps, widgetStyleProps, widgetEv
 	const widgetTextField = /* @__PURE__ */ jsx(WidgetTextField, {
 		theme: finalTheme,
 		placeholder: textFieldPlaceholderText ?? "",
-		onClick: () => handleTextFieldClick?.()
+		onClick: () => handleTextFieldClick?.(),
+		enableVoiceInput: voiceInputEnabled,
+		onTranscriptionStarted,
+		onTranscriptionCompleted
 	});
 	return /* @__PURE__ */ jsx(WidgetWrapperWithTitle, {
 		id,

package/dist/ChatPreview/index.d.cts

@@ -1,3 +1,3 @@
-import { ChatPreviewProps } from "./types/types.cjs";
+import { ChatPreviewProps, WidgetEventProps } from "./types/types.cjs";
 import { ChatPreview } from "./ChatPreview.cjs";
-export { ChatPreview, type ChatPreviewProps };
+export { ChatPreview, type ChatPreviewProps, type WidgetEventProps };

package/dist/ChatPreview/index.d.ts

@@ -1,3 +1,3 @@
-import { ChatPreviewProps } from "./types/types.js";
+import { ChatPreviewProps, WidgetEventProps } from "./types/types.js";
 import { ChatPreview } from "./ChatPreview.js";
-export { ChatPreview, type ChatPreviewProps };
+export { ChatPreview, type ChatPreviewProps, type WidgetEventProps };

package/dist/ChatPreview/types/types.d.cts

@@ -55,6 +55,10 @@ type WidgetContentProps = {
    * Displayed when the text field is visible.
    */
   textFieldPlaceholderText?: string;
+  /**
+   * Whether to enable voice input.
+   */
+  voiceInputEnabled?: boolean;
 };
 /**
  * Style props for the SocialProof component.
@@ -150,6 +154,14 @@ type WidgetEventProps = {
    * Callback function invoked when the text field is clicked.
    */
   handleTextFieldClick?: () => void;
+  /**
+   * Callback function invoked when voice transcription starts.
+   */
+  onTranscriptionStarted?: () => void;
+  /**
+   * Callback function invoked when voice transcription completes.
+   */
+  onTranscriptionCompleted?: (transcript: string) => void;
 };
 /**
  * Props for the ChatPreviewComparison component.
@@ -173,4 +185,4 @@ type ChatPreviewProps = {
   widgetEventProps?: WidgetEventProps;
 };
 //#endregion
-export { ChatPreviewProps };
+export { ChatPreviewProps, WidgetEventProps };

package/dist/ChatPreview/types/types.d.ts

@@ -55,6 +55,10 @@ type WidgetContentProps = {
    * Displayed when the text field is visible.
    */
   textFieldPlaceholderText?: string;
+  /**
+   * Whether to enable voice input.
+   */
+  voiceInputEnabled?: boolean;
 };
 /**
  * Style props for the SocialProof component.
@@ -150,6 +154,14 @@ type WidgetEventProps = {
    * Callback function invoked when the text field is clicked.
    */
   handleTextFieldClick?: () => void;
+  /**
+   * Callback function invoked when voice transcription starts.
+   */
+  onTranscriptionStarted?: () => void;
+  /**
+   * Callback function invoked when voice transcription completes.
+   */
+  onTranscriptionCompleted?: (transcript: string) => void;
 };
 /**
  * Props for the ChatPreviewComparison component.
@@ -173,4 +185,4 @@ type ChatPreviewProps = {
   widgetEventProps?: WidgetEventProps;
 };
 //#endregion
-export { ChatPreviewProps };
+export { ChatPreviewProps, WidgetEventProps };

package/dist/ChatPreviewComparison/ChatPreviewComparison.cjs

@@ -19,8 +19,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 const ChatPreviewComparison = ({ baseProps, widgetContentProps, widgetStyleProps, widgetEventProps }) => {
 	const { id, testId, className, style } = baseProps ?? {};
 	const { theme = require_theme.Theme.GLOBAL_CUSTOM, variant = require_types.WidgetWrapperVariant.CARD_WITH_BORDER, hideImage, hideTextField, hideLogo, hexCardColor } = widgetStyleProps ?? {};
-	const { headlineText, messageText, promptButtons, textFieldPlaceholderText, images, logoSrc, titleLabel } = widgetContentProps ?? {};
-	const { handlePromptButtonClick, handlePromptButtonDrag, handlePromptButtonHover, handlePromptButtonMouseDown, handlePromptButtonMouseUp, handlePromptButtonTouchStart, handlePromptButtonTouchEnd, handleLinkClick, handleTextFieldClick } = widgetEventProps ?? {};
+	const { headlineText, messageText, promptButtons, textFieldPlaceholderText, images, logoSrc, titleLabel, voiceInputEnabled } = widgetContentProps ?? {};
+	const { handlePromptButtonClick, handlePromptButtonDrag, handlePromptButtonHover, handlePromptButtonMouseDown, handlePromptButtonMouseUp, handlePromptButtonTouchStart, handlePromptButtonTouchEnd, handleLinkClick, handleTextFieldClick, onTranscriptionStarted, onTranscriptionCompleted } = widgetEventProps ?? {};
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
 	const suggestionTextMap = (0, react.useMemo)(() => {
 		return Object.fromEntries(promptButtons?.map((suggestion) => [suggestion.content, suggestion]) ?? []);
@@ -55,7 +55,10 @@ const ChatPreviewComparison = ({ baseProps, widgetContentProps, widgetStyleProps
 	const widgetTextField = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WidgetTextField.WidgetTextField, {
 		theme: finalTheme,
 		placeholder: textFieldPlaceholderText ?? "",
-		onClick: () => handleTextFieldClick?.()
+		onClick: () => handleTextFieldClick?.(),
+		enableVoiceInput: voiceInputEnabled,
+		onTranscriptionStarted,
+		onTranscriptionCompleted
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WidgetWrapperWithTitle.WidgetWrapperWithTitle, {
 		id,

package/dist/ChatPreviewComparison/ChatPreviewComparison.d.cts

@@ -1,5 +1,5 @@
 import { ChatPreviewComparisonProps } from "./types/types.cjs";
-import * as react_jsx_runtime23 from "react/jsx-runtime";
+import * as react_jsx_runtime44 from "react/jsx-runtime";
 
 //#region src/components/ChatPreviewComparison/ChatPreviewComparison.d.ts
 declare const ChatPreviewComparison: ({
@@ -7,6 +7,6 @@ declare const ChatPreviewComparison: ({
   widgetContentProps,
   widgetStyleProps,
   widgetEventProps
-}: ChatPreviewComparisonProps) => react_jsx_runtime23.JSX.Element;
+}: ChatPreviewComparisonProps) => react_jsx_runtime44.JSX.Element;
 //#endregion
 export { ChatPreviewComparison };

package/dist/ChatPreviewComparison/ChatPreviewComparison.d.ts

@@ -1,5 +1,5 @@
 import { ChatPreviewComparisonProps } from "./types/types.js";
-import * as react_jsx_runtime23 from "react/jsx-runtime";
+import * as react_jsx_runtime30 from "react/jsx-runtime";
 
 //#region src/components/ChatPreviewComparison/ChatPreviewComparison.d.ts
 declare const ChatPreviewComparison: ({
@@ -7,6 +7,6 @@ declare const ChatPreviewComparison: ({
   widgetContentProps,
   widgetStyleProps,
   widgetEventProps
-}: ChatPreviewComparisonProps) => react_jsx_runtime23.JSX.Element;
+}: ChatPreviewComparisonProps) => react_jsx_runtime30.JSX.Element;
 //#endregion
 export { ChatPreviewComparison };

package/dist/ChatPreviewComparison/ChatPreviewComparison.js

@@ -18,8 +18,8 @@ import { jsx } from "react/jsx-runtime";
 const ChatPreviewComparison = ({ baseProps, widgetContentProps, widgetStyleProps, widgetEventProps }) => {
 	const { id, testId, className, style } = baseProps ?? {};
 	const { theme = Theme.GLOBAL_CUSTOM, variant = WidgetWrapperVariant.CARD_WITH_BORDER, hideImage, hideTextField, hideLogo, hexCardColor } = widgetStyleProps ?? {};
-	const { headlineText, messageText, promptButtons, textFieldPlaceholderText, images, logoSrc, titleLabel } = widgetContentProps ?? {};
-	const { handlePromptButtonClick, handlePromptButtonDrag, handlePromptButtonHover, handlePromptButtonMouseDown, handlePromptButtonMouseUp, handlePromptButtonTouchStart, handlePromptButtonTouchEnd, handleLinkClick, handleTextFieldClick } = widgetEventProps ?? {};
+	const { headlineText, messageText, promptButtons, textFieldPlaceholderText, images, logoSrc, titleLabel, voiceInputEnabled } = widgetContentProps ?? {};
+	const { handlePromptButtonClick, handlePromptButtonDrag, handlePromptButtonHover, handlePromptButtonMouseDown, handlePromptButtonMouseUp, handlePromptButtonTouchStart, handlePromptButtonTouchEnd, handleLinkClick, handleTextFieldClick, onTranscriptionStarted, onTranscriptionCompleted } = widgetEventProps ?? {};
 	const finalTheme = resolveTheme(theme);
 	const suggestionTextMap = useMemo(() => {
 		return Object.fromEntries(promptButtons?.map((suggestion) => [suggestion.content, suggestion]) ?? []);
@@ -54,7 +54,10 @@ const ChatPreviewComparison = ({ baseProps, widgetContentProps, widgetStyleProps
 	const widgetTextField = /* @__PURE__ */ jsx(WidgetTextField, {
 		theme: finalTheme,
 		placeholder: textFieldPlaceholderText ?? "",
-		onClick: () => handleTextFieldClick?.()
+		onClick: () => handleTextFieldClick?.(),
+		enableVoiceInput: voiceInputEnabled,
+		onTranscriptionStarted,
+		onTranscriptionCompleted
 	});
 	return /* @__PURE__ */ jsx(WidgetWrapperWithTitle, {
 		id,

package/dist/ChatPreviewComparison/components/Layout.cjs

@@ -1,13 +1,13 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils = require('../../DesignTokens/components/utils.cjs');
+const require_aspectRatio = require('../../packages/components-v3/tokens/aspectRatio/aspectRatio.cjs');
 const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 const require_breakpoints = require('../../packages/components-v3/tokens/breakpoints/breakpoints.cjs');
 const require_Stack = require('../../Stack/Stack.cjs');
 require('../../Stack/index.cjs');
 const require_Container = require('../../Container/Container.cjs');
 require('../../Container/index.cjs');
-const require_utils = require('../../DesignTokens/components/utils.cjs');
 const require_resolveTheme = require('../../utils/resolveTheme.cjs');
-const require_aspectRatio = require('../../packages/components-v3/tokens/aspectRatio/aspectRatio.cjs');
 require('../../Tokens/index.cjs');
 const require_utils_useCheckIsMobile = require('../../utils/useCheckIsMobile.cjs');
 const require_useGetContentSize = require('../../utils/useGetContentSize.cjs');

package/dist/ChatPreviewComparison/components/Layout.js

@@ -1,12 +1,12 @@
+import { getCSSVariable } from "../../DesignTokens/components/utils.js";
+import { AspectRatioCSSVar } from "../../packages/components-v3/tokens/aspectRatio/aspectRatio.js";
 import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { screensBreakpointsVariables } from "../../packages/components-v3/tokens/breakpoints/breakpoints.js";
 import { Stack } from "../../Stack/Stack.js";
 import "../../Stack/index.js";
 import { Container } from "../../Container/Container.js";
 import "../../Container/index.js";
-import { getCSSVariable } from "../../DesignTokens/components/utils.js";
 import { resolveTheme } from "../../utils/resolveTheme.js";
-import { AspectRatioCSSVar } from "../../packages/components-v3/tokens/aspectRatio/aspectRatio.js";
 import "../../Tokens/index.js";
 import { useCheckIsMobile } from "../../utils/useCheckIsMobile.js";
 import { useGetContentSize } from "../../utils/useGetContentSize.js";

package/dist/ChatPreviewComparison/index.d.cts

@@ -1,3 +1,3 @@
-import { ChatPreviewComparisonProps } from "./types/types.cjs";
+import { ChatPreviewComparisonProps, WidgetEventProps } from "./types/types.cjs";
 import { ChatPreviewComparison } from "./ChatPreviewComparison.cjs";
-export { ChatPreviewComparison, type ChatPreviewComparisonProps };
+export { ChatPreviewComparison, type ChatPreviewComparisonProps, type WidgetEventProps };

package/dist/ChatPreviewComparison/index.d.ts

@@ -1,3 +1,3 @@
-import { ChatPreviewComparisonProps } from "./types/types.js";
+import { ChatPreviewComparisonProps, WidgetEventProps } from "./types/types.js";
 import { ChatPreviewComparison } from "./ChatPreviewComparison.js";
-export { ChatPreviewComparison, type ChatPreviewComparisonProps };
+export { ChatPreviewComparison, type ChatPreviewComparisonProps, type WidgetEventProps };

package/dist/ChatPreviewComparison/types/types.d.cts

@@ -64,6 +64,10 @@ type WidgetContentProps = {
    * Array of image objects for the images.
    */
   images?: ImageGalleryImage[];
+  /**
+   * Whether to enable voice input.
+   */
+  voiceInputEnabled?: boolean;
 };
 /**
  * Style props for the ChatPreviewComparison component.
@@ -159,6 +163,14 @@ type WidgetEventProps = {
    * Callback function invoked when the text field is clicked.
    */
   handleTextFieldClick?: () => void;
+  /**
+   * Callback function invoked when voice transcription starts.
+   */
+  onTranscriptionStarted?: () => void;
+  /**
+   * Callback function invoked when voice transcription completes.
+   */
+  onTranscriptionCompleted?: (transcript: string) => void;
 };
 /**
  * Props for the ChatPreviewComparison component.
@@ -182,4 +194,4 @@ type ChatPreviewComparisonProps = {
   widgetEventProps?: WidgetEventProps;
 };
 //#endregion
-export { ChatPreviewComparisonProps };
+export { ChatPreviewComparisonProps, WidgetEventProps };

package/dist/ChatPreviewComparison/types/types.d.ts

@@ -64,6 +64,10 @@ type WidgetContentProps = {
    * Array of image objects for the images.
    */
   images?: ImageGalleryImage[];
+  /**
+   * Whether to enable voice input.
+   */
+  voiceInputEnabled?: boolean;
 };
 /**
  * Style props for the ChatPreviewComparison component.
@@ -159,6 +163,14 @@ type WidgetEventProps = {
    * Callback function invoked when the text field is clicked.
    */
   handleTextFieldClick?: () => void;
+  /**
+   * Callback function invoked when voice transcription starts.
+   */
+  onTranscriptionStarted?: () => void;
+  /**
+   * Callback function invoked when voice transcription completes.
+   */
+  onTranscriptionCompleted?: (transcript: string) => void;
 };
 /**
  * Props for the ChatPreviewComparison component.
@@ -182,4 +194,4 @@ type ChatPreviewComparisonProps = {
   widgetEventProps?: WidgetEventProps;
 };
 //#endregion
-export { ChatPreviewComparisonProps };
+export { ChatPreviewComparisonProps, WidgetEventProps };

package/dist/ChatPreviewLoading/ChatPreviewLoading.cjs

@@ -10,14 +10,19 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/ChatPreviewLoading/ChatPreviewLoading.tsx
-const ChatPreviewLoading = ({ id, testId, className, style, variant = require_types.WidgetWrapperVariant.CARD_WITH_BORDER, hexCardColor, hideTextField, fullIsLoading = false, textFieldPlaceholder, hideLogo, logoSrc, titleLabel }) => {
+const ChatPreviewLoading = ({ id, testId, className, style, variant = require_types.WidgetWrapperVariant.CARD_WITH_BORDER, hexCardColor, hideTextField, fullIsLoading = false, textFieldPlaceholder, hideLogo, logoSrc, titleLabel, voiceInputEnabled }) => {
 	const textfield = (0, react.useMemo)(() => {
 		if (fullIsLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.ChatPreviewLoadingComponents.Skeleton, { className: "envive-tw-h-[42px] envive-tw-w-full" });
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WidgetTextField.WidgetTextField, {
 			placeholder: textFieldPlaceholder ?? "",
+			enableVoiceInput: voiceInputEnabled,
 			disabled: true
 		});
-	}, [fullIsLoading, textFieldPlaceholder]);
+	}, [
+		fullIsLoading,
+		textFieldPlaceholder,
+		voiceInputEnabled
+	]);
 	const headline = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
 		gap: "2",
 		direction: "column",

package/dist/ChatPreviewLoading/ChatPreviewLoading.d.cts

@@ -1,5 +1,5 @@
 import { ChatPreviewLoadingProps } from "./types/types.cjs";
-import * as react_jsx_runtime21 from "react/jsx-runtime";
+import * as react_jsx_runtime29 from "react/jsx-runtime";
 
 //#region src/components/ChatPreviewLoading/ChatPreviewLoading.d.ts
 declare const ChatPreviewLoading: ({
@@ -14,7 +14,8 @@ declare const ChatPreviewLoading: ({
   textFieldPlaceholder,
   hideLogo,
   logoSrc,
-  titleLabel
-}: ChatPreviewLoadingProps) => react_jsx_runtime21.JSX.Element;
+  titleLabel,
+  voiceInputEnabled
+}: ChatPreviewLoadingProps) => react_jsx_runtime29.JSX.Element;
 //#endregion
 export { ChatPreviewLoading };

package/dist/ChatPreviewLoading/ChatPreviewLoading.d.ts

@@ -14,7 +14,8 @@ declare const ChatPreviewLoading: ({
   textFieldPlaceholder,
   hideLogo,
   logoSrc,
-  titleLabel
+  titleLabel,
+  voiceInputEnabled
 }: ChatPreviewLoadingProps) => react_jsx_runtime28.JSX.Element;
 //#endregion
 export { ChatPreviewLoading };

package/dist/ChatPreviewLoading/ChatPreviewLoading.js

@@ -9,14 +9,19 @@ import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/ChatPreviewLoading/ChatPreviewLoading.tsx
-const ChatPreviewLoading = ({ id, testId, className, style, variant = WidgetWrapperVariant.CARD_WITH_BORDER, hexCardColor, hideTextField, fullIsLoading = false, textFieldPlaceholder, hideLogo, logoSrc, titleLabel }) => {
+const ChatPreviewLoading = ({ id, testId, className, style, variant = WidgetWrapperVariant.CARD_WITH_BORDER, hexCardColor, hideTextField, fullIsLoading = false, textFieldPlaceholder, hideLogo, logoSrc, titleLabel, voiceInputEnabled }) => {
 	const textfield = useMemo(() => {
 		if (fullIsLoading) return /* @__PURE__ */ jsx(ChatPreviewLoadingComponents.Skeleton, { className: "envive-tw-h-[42px] envive-tw-w-full" });
 		return /* @__PURE__ */ jsx(WidgetTextField, {
 			placeholder: textFieldPlaceholder ?? "",
+			enableVoiceInput: voiceInputEnabled,
 			disabled: true
 		});
-	}, [fullIsLoading, textFieldPlaceholder]);
+	}, [
+		fullIsLoading,
+		textFieldPlaceholder,
+		voiceInputEnabled
+	]);
 	const headline = useMemo(() => /* @__PURE__ */ jsxs(Stack, {
 		gap: "2",
 		direction: "column",

package/dist/ChatPreviewLoading/types/types.d.cts

@@ -45,6 +45,10 @@ type ChatPreviewLoadingProps = {
    * @default false
    */
   hideTextField?: boolean;
+  /**
+   * Whether to enable voice input.
+   */
+  voiceInputEnabled?: boolean;
   /**
    * Placeholder text displayed in the text field.
    * Only used when `fullIsLoading` is `false` and `hideTextField` is `false`.

package/dist/ChatPreviewLoading/types/types.d.ts

@@ -45,6 +45,10 @@ type ChatPreviewLoadingProps = {
    * @default false
    */
   hideTextField?: boolean;
+  /**
+   * Whether to enable voice input.
+   */
+  voiceInputEnabled?: boolean;
   /**
    * Placeholder text displayed in the text field.
    * Only used when `fullIsLoading` is `false` and `hideTextField` is `false`.