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

package/src/components/WidgetTextField/hooks/useGetMicWidgetButtonProperties.ts

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import { Theme } from '../../../../tokens/theme/theme';
+
+export type UseGetMicWidgetButtonPropertiesProps = {
+  theme: Theme;
+  isListening?: boolean;
+};
+
+export type MicWidgetButtonProperties = {
+  micWidgetButtonClasses: string;
+};
+
+export const useGetMicWidgetButtonProperties = ({
+  theme,
+  isListening = false,
+}: UseGetMicWidgetButtonPropertiesProps): MicWidgetButtonProperties => {
+  const micWidgetButtonClasses = useMemo(() => {
+    const micWidgetButtonClassesMap: Record<Theme, string> = {
+      [Theme.STANDARD]:
+        'envive-tw-flex envive-tw-h-[42px] envive-tw-w-[44px] envive-tw-py-2 envive-tw-px-2 envive-tw-justify-center envive-tw-items-center envive-tw-border envive-tw-border-solid envive-tw-border-border-light envive-tw-rounded-global-custom',
+      [Theme.MODERN]:
+        'envive-tw-flex envive-tw-h-[42px] envive-tw-w-[44px] envive-tw-py-2 envive-tw-px-2 envive-tw-justify-center envive-tw-items-center envive-tw-border envive-tw-border-solid envive-tw-border-border-light envive-tw-rounded-4',
+      [Theme.MINIMAL]:
+        'envive-tw-flex envive-tw-h-[42px] envive-tw-w-[44px] envive-tw-py-2 envive-tw-px-2 envive-tw-justify-center envive-tw-items-center envive-tw-border envive-tw-border-solid envive-tw-border-border-light',
+      [Theme.GLOBAL_CUSTOM]:
+        'envive-tw-flex envive-tw-h-[42px] envive-tw-w-[44px] envive-tw-py-2 envive-tw-px-2 envive-tw-justify-center envive-tw-items-center envive-tw-border envive-tw-border-solid envive-tw-border-border-light envive-tw-rounded-global-custom',
+    };
+
+    const baseClasses =
+      micWidgetButtonClassesMap[theme] ?? micWidgetButtonClassesMap[Theme.STANDARD];
+
+    return isListening
+      ? `${baseClasses} envive-tw-bg-[--envive-colors-text-accent]`
+      : `${baseClasses} envive-tw-bg-background-light`;
+  }, [theme, isListening]);
+
+  return { micWidgetButtonClasses };
+};

package/src/components/WidgetTextField/types/types.ts

@@ -30,6 +30,12 @@ export type WidgetTextFieldProps = {
    * @default Theme.GLOBAL_CUSTOM
    */
   theme?: Theme;
+  /**
+   * When the resolved theme is MINIMAL, controls border treatment.
+   * `full` matches overlays (full frame). `bottom-only` matches embedded contexts like product cards.
+   * @default 'full'
+   */
+  minimalFrame?: 'full' | 'bottom-only';
   /** Placeholder text displayed in the text field. */
   placeholder?: string;
   /** Accessible label for screen readers. If not provided, the placeholder will be used. */
@@ -47,6 +53,21 @@ export type WidgetTextFieldProps = {
   isLoading?: boolean;
   /** Callback function invoked when the text field is clicked or activated via keyboard. */
   onClick?: () => void;
+  /** Enable voice input button */
+  enableVoiceInput?: boolean;
+  /** Voice input button class name */
+  voiceInputClassName?: string;
+  /**
+   * Callback function invoked when voice transcription starts (user begins recording).
+   * Use this to track when the user starts using voice input.
+   */
+  onTranscriptionStarted?: () => void;
+  /**
+   * Callback function invoked when voice transcription completes (user stops recording).
+   * @param transcript - The transcribed text from the voice input.
+   * Use this to track the completed voice transcription and the resulting text.
+   */
+  onTranscriptionCompleted?: (transcript: string) => void;
 };
 
 export enum IconVariant {

package/src/components/WidgetWrapper/hooks/useGetWrapperProperties.ts

@@ -9,7 +9,7 @@ export const useGetWrapperProperties = (variant: WidgetWrapperVariant) => {
       case WidgetWrapperVariant.CARD_NO_BORDER:
         return 'envive-tw-rounded-global-custom envive-tw-bg-background-light envive-tw-md:p-6 envive-tw-p-3';
       case WidgetWrapperVariant.INLINE_WITH_BORDER:
-        return 'envive-tw-border-t envive-tw-border-b envive-tw-border-solid envive-tw-border-border-light envive-tw-md:py-6 envive-tw-py-3';
+        return 'envive-tw-border-t envive-tw-border-b envive-tw-border-solid envive-tw-border-border-light envive-tw-py-6';
       case WidgetWrapperVariant.INLINE_NO_BORDER:
         return undefined;
       default: