@uipath/apollo-react 4.13.1-pr581.30f7035 → 4.14.0

package/dist/material/components/ap-chat/components/common/action-button.js

@@ -26,13 +26,9 @@ const StyledButtonContainer = styled('div')(()=>({
             }
         }
     }));
-const AutopilotChatActionButtonComponent = /*#__PURE__*/ react.forwardRef(({ iconName, disabled, iconSize, preventHover, overrideColor, variant = 'outlined', text, tooltip, tooltipPlacement = 'bottom', ariaLabel, ariaDescribedby, title, tabIndex, onMouseEnter, onMouseLeave, onFocus, onBlur, onMouseDown, onMouseUp, onKeyDown, disableInteractiveTooltip = false, 'data-testid': dataTestId, ...props }, ref)=>{
+const AutopilotChatActionButtonComponent = /*#__PURE__*/ react.forwardRef(({ iconName, disabled, iconSize, preventHover, overrideColor, variant = 'outlined', text, tooltip, tooltipPlacement = 'bottom', ariaLabel, ariaDescribedby, ariaPressed, title, tabIndex, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, onMouseDown, onMouseUp, onKeyDown, disableInteractiveTooltip = false, 'data-testid': dataTestId }, ref)=>{
     const [iconColor, setIconColor] = react.useState('var(--color-icon-default)');
     const { chatMode } = useChatState();
-    const [isPressed, setIsPressed] = react.useState(false);
-    const onClick = 'onClick' in props ? props.onClick : ()=>{};
-    const onPress = 'onPress' in props ? props.onPress : ()=>{};
-    const onRelease = 'onRelease' in props ? props.onRelease : ()=>{};
     const showTooltip = tooltip && chatMode !== AutopilotChatMode.Closed && !disabled;
     const button = text ? /*#__PURE__*/ jsx(StyledButtonContainer, {
         children: /*#__PURE__*/ jsx(Button, {
@@ -43,10 +39,6 @@ const AutopilotChatActionButtonComponent = /*#__PURE__*/ react.forwardRef(({ ico
             },
             onMouseLeave: (event)=>{
                 onMouseLeave?.(event);
-                if (isPressed) {
-                    setIsPressed(false);
-                    onRelease(event);
-                }
                 if (!preventHover) setIconColor('var(--color-icon-default)');
             },
             startIcon: /*#__PURE__*/ jsx(ApIcon, {
@@ -57,6 +49,7 @@ const AutopilotChatActionButtonComponent = /*#__PURE__*/ react.forwardRef(({ ico
             }),
             "aria-label": ariaLabel,
             "aria-describedby": ariaDescribedby,
+            "aria-pressed": ariaPressed,
             title: showTooltip ? void 0 : title,
             variant: "text",
             size: "small",
@@ -64,16 +57,8 @@ const AutopilotChatActionButtonComponent = /*#__PURE__*/ react.forwardRef(({ ico
             onClick: onClick,
             onFocus: onFocus,
             onBlur: onBlur,
-            onMouseDown: (event)=>{
-                onMouseDown?.(event);
-                setIsPressed(true);
-                onPress(event);
-            },
-            onMouseUp: (event)=>{
-                onMouseUp?.(event);
-                setIsPressed(false);
-                onRelease(event);
-            },
+            onMouseDown: onMouseDown,
+            onMouseUp: onMouseUp,
             tabIndex: tabIndex,
             onKeyDown: onKeyDown,
             "data-testid": dataTestId,
@@ -86,20 +71,13 @@ const AutopilotChatActionButtonComponent = /*#__PURE__*/ react.forwardRef(({ ico
         onClick: onClick,
         onFocus: onFocus,
         onBlur: onBlur,
-        onMouseDown: (event)=>{
-            onMouseDown?.(event);
-            setIsPressed(true);
-            onPress(event);
-        },
-        onMouseUp: (event)=>{
-            onMouseUp?.(event);
-            setIsPressed(false);
-            onRelease(event);
-        },
+        onMouseDown: onMouseDown,
+        onMouseUp: onMouseUp,
         tabIndex: tabIndex,
         onKeyDown: onKeyDown,
         "aria-label": ariaLabel,
         "aria-describedby": ariaDescribedby,
+        "aria-pressed": ariaPressed,
         title: showTooltip ? void 0 : title,
         onMouseEnter: (event)=>{
             onMouseEnter?.(event);
@@ -107,10 +85,6 @@ const AutopilotChatActionButtonComponent = /*#__PURE__*/ react.forwardRef(({ ico
         },
         onMouseLeave: (event)=>{
             onMouseLeave?.(event);
-            if (isPressed) {
-                setIsPressed(false);
-                onRelease(event);
-            }
             if (!preventHover) setIconColor('var(--color-icon-default)');
         },
         "data-testid": dataTestId,

package/dist/material/components/ap-chat/components/input/always-on-voice-button.cjs

@@ -0,0 +1,183 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    AlwaysOnVoiceButton: ()=>AlwaysOnVoiceButton,
+    VoiceButtonContainer: ()=>VoiceButtonContainer
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const react_namespaceObject = require("@lingui/react");
+const material_namespaceObject = require("@mui/material");
+const apollo_core_namespaceObject = require("@uipath/apollo-core");
+var apollo_core_default = /*#__PURE__*/ __webpack_require__.n(apollo_core_namespaceObject);
+const external_react_namespaceObject = require("react");
+const chat_service_provider_cjs_namespaceObject = require("../../providers/chat-service.provider.cjs");
+const index_cjs_namespaceObject = require("../../service/index.cjs");
+const chat_audio_input_cjs_namespaceObject = require("../audio/chat-audio-input.cjs");
+const chat_audio_output_cjs_namespaceObject = require("../audio/chat-audio-output.cjs");
+const action_button_cjs_namespaceObject = require("../common/action-button.cjs");
+const VoiceButtonContainer = (0, material_namespaceObject.styled)('div', {
+    shouldForwardProp: (prop)=>'active' !== prop
+})(({ active })=>({
+        '& .MuiIconButton-root': {
+            borderRadius: apollo_core_default().Border.BorderRadiusM,
+            ...active && {
+                backgroundColor: "var(--color-foreground) !important",
+                '&:hover, &:active, &:focus': {
+                    backgroundColor: "var(--color-foreground-de-emp) !important"
+                }
+            }
+        }
+    }));
+const AlwaysOnVoiceButton = ({ disabled = false, onActiveChange })=>{
+    const { _ } = (0, react_namespaceObject.useLingui)();
+    const [isActive, setIsActive] = (0, external_react_namespaceObject.useState)(false);
+    const chatService = (0, chat_service_provider_cjs_namespaceObject.useChatService)();
+    const isActiveRef = (0, external_react_namespaceObject.useRef)(false);
+    const onActiveChangeRef = (0, external_react_namespaceObject.useRef)(onActiveChange);
+    onActiveChangeRef.current = onActiveChange;
+    const { queueOutputAudio, clearOutputAudioQueue } = (0, chat_audio_output_cjs_namespaceObject.useAudioOutput)();
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!chatService) return;
+        return chatService.on(index_cjs_namespaceObject.AutopilotChatEvent.OutputStream, (event)=>{
+            if (!isActiveRef.current) return;
+            if (event.mediaChunks) {
+                for (const chunk of event.mediaChunks)if (chunk.mimeType.startsWith('audio/pcm;')) queueOutputAudio(chunk.mimeType, chunk.data, chunk.sequenceNumber);
+            }
+            if (event.interrupted) clearOutputAudioQueue();
+        });
+    }, [
+        chatService,
+        queueOutputAudio,
+        clearOutputAudioQueue
+    ]);
+    const handleAudioInputStart = (0, external_react_namespaceObject.useCallback)((automaticActivityDetectionEnabled)=>{
+        if (!chatService) return;
+        isActiveRef.current = true;
+        setIsActive(true);
+        onActiveChangeRef.current?.(true);
+        chatService.sendInputStreamEvent({
+            activityStart: {
+                automaticActivityDetectionEnabled
+            }
+        });
+    }, [
+        chatService
+    ]);
+    const handleAudioInputEnd = (0, external_react_namespaceObject.useCallback)((sequenceNumber)=>{
+        if (!chatService) return;
+        isActiveRef.current = false;
+        setIsActive(false);
+        onActiveChangeRef.current?.(false);
+        clearOutputAudioQueue();
+        chatService.sendInputStreamEvent({
+            activityEnd: {
+                sequenceNumber
+            }
+        });
+    }, [
+        chatService,
+        clearOutputAudioQueue
+    ]);
+    const handleAudioInputData = (0, external_react_namespaceObject.useCallback)((mimeType, data, sequenceNumber)=>{
+        if (!chatService) return;
+        chatService.sendInputStreamEvent({
+            mediaChunks: [
+                {
+                    mimeType,
+                    data,
+                    sequenceNumber
+                }
+            ]
+        });
+    }, [
+        chatService
+    ]);
+    const { startAudioInput, stopAudioInput } = (0, chat_audio_input_cjs_namespaceObject.useAudioInput)({
+        handleAudioInputData,
+        handleAudioInputStart,
+        handleAudioInputEnd
+    });
+    (0, external_react_namespaceObject.useEffect)(()=>()=>{
+            if (isActiveRef.current) {
+                isActiveRef.current = false;
+                stopAudioInput();
+                clearOutputAudioQueue();
+                onActiveChangeRef.current?.(false);
+            }
+        }, [
+        stopAudioInput,
+        clearOutputAudioQueue
+    ]);
+    const handleClick = (0, external_react_namespaceObject.useCallback)(async ()=>{
+        if (disabled) return;
+        if (isActive) stopAudioInput();
+        else await startAudioInput(true);
+    }, [
+        disabled,
+        isActive,
+        startAudioInput,
+        stopAudioInput
+    ]);
+    const iconColor = disabled ? 'var(--color-foreground-disable)' : isActive ? 'var(--color-background)' : void 0;
+    const stopLabel = _({
+        id: 'autopilot-chat.input.actions.stop'
+    });
+    const voiceLabel = _({
+        id: 'autopilot-chat.input.actions.voice-interaction'
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VoiceButtonContainer, {
+        active: isActive,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(action_button_cjs_namespaceObject.AutopilotChatActionButton, {
+            iconName: isActive ? 'stop' : 'graphic_eq',
+            tooltip: isActive ? stopLabel : voiceLabel,
+            overrideColor: iconColor,
+            preventHover: true,
+            disabled: disabled,
+            onClick: handleClick,
+            "data-testid": "autopilot-chat-always-on-voice-button",
+            ariaLabel: isActive ? stopLabel : voiceLabel,
+            ariaPressed: isActive
+        })
+    });
+};
+exports.AlwaysOnVoiceButton = __webpack_exports__.AlwaysOnVoiceButton;
+exports.VoiceButtonContainer = __webpack_exports__.VoiceButtonContainer;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "AlwaysOnVoiceButton",
+    "VoiceButtonContainer"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/material/components/ap-chat/components/input/always-on-voice-button.d.ts

@@ -0,0 +1,10 @@
+export declare const VoiceButtonContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    active?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+interface AlwaysOnVoiceButtonProps {
+    disabled?: boolean;
+    onActiveChange?: (isActive: boolean) => void;
+}
+export declare const AlwaysOnVoiceButton: ({ disabled, onActiveChange, }: AlwaysOnVoiceButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=always-on-voice-button.d.ts.map

package/dist/material/components/ap-chat/components/input/always-on-voice-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"always-on-voice-button.d.ts","sourceRoot":"","sources":["../../../../../../src/material/components/ap-chat/components/input/always-on-voice-button.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,oBAAoB;aAEnB,OAAO;yGAUlB,CAAC;AAEJ,UAAU,wBAAwB;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAOD,eAAO,MAAM,mBAAmB,GAAI,+BAGjC,wBAAwB,4CA4I1B,CAAC"}

package/dist/material/components/ap-chat/components/input/always-on-voice-button.js

@@ -0,0 +1,136 @@
+import { jsx } from "react/jsx-runtime";
+import { useLingui } from "@lingui/react";
+import { styled } from "@mui/material";
+import apollo_core from "@uipath/apollo-core";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useChatService } from "../../providers/chat-service.provider.js";
+import { AutopilotChatEvent } from "../../service/index.js";
+import { useAudioInput } from "../audio/chat-audio-input.js";
+import { useAudioOutput } from "../audio/chat-audio-output.js";
+import { AutopilotChatActionButton } from "../common/action-button.js";
+const VoiceButtonContainer = styled('div', {
+    shouldForwardProp: (prop)=>'active' !== prop
+})(({ active })=>({
+        '& .MuiIconButton-root': {
+            borderRadius: apollo_core.Border.BorderRadiusM,
+            ...active && {
+                backgroundColor: "var(--color-foreground) !important",
+                '&:hover, &:active, &:focus': {
+                    backgroundColor: "var(--color-foreground-de-emp) !important"
+                }
+            }
+        }
+    }));
+const AlwaysOnVoiceButton = ({ disabled = false, onActiveChange })=>{
+    const { _ } = useLingui();
+    const [isActive, setIsActive] = useState(false);
+    const chatService = useChatService();
+    const isActiveRef = useRef(false);
+    const onActiveChangeRef = useRef(onActiveChange);
+    onActiveChangeRef.current = onActiveChange;
+    const { queueOutputAudio, clearOutputAudioQueue } = useAudioOutput();
+    useEffect(()=>{
+        if (!chatService) return;
+        return chatService.on(AutopilotChatEvent.OutputStream, (event)=>{
+            if (!isActiveRef.current) return;
+            if (event.mediaChunks) {
+                for (const chunk of event.mediaChunks)if (chunk.mimeType.startsWith('audio/pcm;')) queueOutputAudio(chunk.mimeType, chunk.data, chunk.sequenceNumber);
+            }
+            if (event.interrupted) clearOutputAudioQueue();
+        });
+    }, [
+        chatService,
+        queueOutputAudio,
+        clearOutputAudioQueue
+    ]);
+    const handleAudioInputStart = useCallback((automaticActivityDetectionEnabled)=>{
+        if (!chatService) return;
+        isActiveRef.current = true;
+        setIsActive(true);
+        onActiveChangeRef.current?.(true);
+        chatService.sendInputStreamEvent({
+            activityStart: {
+                automaticActivityDetectionEnabled
+            }
+        });
+    }, [
+        chatService
+    ]);
+    const handleAudioInputEnd = useCallback((sequenceNumber)=>{
+        if (!chatService) return;
+        isActiveRef.current = false;
+        setIsActive(false);
+        onActiveChangeRef.current?.(false);
+        clearOutputAudioQueue();
+        chatService.sendInputStreamEvent({
+            activityEnd: {
+                sequenceNumber
+            }
+        });
+    }, [
+        chatService,
+        clearOutputAudioQueue
+    ]);
+    const handleAudioInputData = useCallback((mimeType, data, sequenceNumber)=>{
+        if (!chatService) return;
+        chatService.sendInputStreamEvent({
+            mediaChunks: [
+                {
+                    mimeType,
+                    data,
+                    sequenceNumber
+                }
+            ]
+        });
+    }, [
+        chatService
+    ]);
+    const { startAudioInput, stopAudioInput } = useAudioInput({
+        handleAudioInputData,
+        handleAudioInputStart,
+        handleAudioInputEnd
+    });
+    useEffect(()=>()=>{
+            if (isActiveRef.current) {
+                isActiveRef.current = false;
+                stopAudioInput();
+                clearOutputAudioQueue();
+                onActiveChangeRef.current?.(false);
+            }
+        }, [
+        stopAudioInput,
+        clearOutputAudioQueue
+    ]);
+    const handleClick = useCallback(async ()=>{
+        if (disabled) return;
+        if (isActive) stopAudioInput();
+        else await startAudioInput(true);
+    }, [
+        disabled,
+        isActive,
+        startAudioInput,
+        stopAudioInput
+    ]);
+    const iconColor = disabled ? 'var(--color-foreground-disable)' : isActive ? 'var(--color-background)' : void 0;
+    const stopLabel = _({
+        id: 'autopilot-chat.input.actions.stop'
+    });
+    const voiceLabel = _({
+        id: 'autopilot-chat.input.actions.voice-interaction'
+    });
+    return /*#__PURE__*/ jsx(VoiceButtonContainer, {
+        active: isActive,
+        children: /*#__PURE__*/ jsx(AutopilotChatActionButton, {
+            iconName: isActive ? 'stop' : 'graphic_eq',
+            tooltip: isActive ? stopLabel : voiceLabel,
+            overrideColor: iconColor,
+            preventHover: true,
+            disabled: disabled,
+            onClick: handleClick,
+            "data-testid": "autopilot-chat-always-on-voice-button",
+            ariaLabel: isActive ? stopLabel : voiceLabel,
+            ariaPressed: isActive
+        })
+    });
+};
+export { AlwaysOnVoiceButton, VoiceButtonContainer };

package/dist/material/components/ap-chat/components/input/chat-input-actions.cjs

@@ -44,13 +44,15 @@ const external_react_namespaceObject = require("react");
 var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
 const index_cjs_namespaceObject = require("../../../ap-typography/index.cjs");
 const attachements_provider_cjs_namespaceObject = require("../../providers/attachements-provider.cjs");
+const chat_service_provider_cjs_namespaceObject = require("../../providers/chat-service.provider.cjs");
 const chat_state_provider_cjs_namespaceObject = require("../../providers/chat-state-provider.cjs");
 const error_provider_cjs_namespaceObject = require("../../providers/error-provider.cjs");
 const picker_provider_cjs_namespaceObject = require("../../providers/picker-provider.cjs");
+const external_service_index_cjs_namespaceObject = require("../../service/index.cjs");
 const file_reader_cjs_namespaceObject = require("../../utils/file-reader.cjs");
-const chat_audio_cjs_namespaceObject = require("../audio/chat-audio.cjs");
 const action_button_cjs_namespaceObject = require("../common/action-button.cjs");
 const shared_controls_cjs_namespaceObject = require("../common/shared-controls.cjs");
+const external_always_on_voice_button_cjs_namespaceObject = require("./always-on-voice-button.cjs");
 const external_chat_input_agent_mode_selector_cjs_namespaceObject = require("./chat-input-agent-mode-selector.cjs");
 const external_chat_input_model_picker_cjs_namespaceObject = require("./chat-input-model-picker.cjs");
 const external_chat_input_resource_trigger_cjs_namespaceObject = require("./chat-input-resource-trigger.cjs");
@@ -75,12 +77,28 @@ const SubmitButtonContainer = (0, material_namespaceObject.styled)('div')(()=>({
             }
         }
     }));
-function AutopilotChatInputActionsComponent({ handleSubmit, disableSubmit, waitingResponse, onResourceTriggerClick }) {
+function AutopilotChatInputActionsComponent({ handleSubmit, disableSubmit, isInputEmpty, waitingResponse, onResourceTriggerClick, onVoiceInteractionChange, isVoiceInteractionActive }) {
     const { _ } = (0, react_namespaceObject.useLingui)();
+    const chatService = (0, chat_service_provider_cjs_namespaceObject.useChatService)();
     const { addAttachments } = (0, attachements_provider_cjs_namespaceObject.useAttachments)();
     const { setError } = (0, error_provider_cjs_namespaceObject.useError)();
     const { disabledFeatures, allowedAttachments } = (0, chat_state_provider_cjs_namespaceObject.useChatState)();
     const { models, agentModes } = (0, picker_provider_cjs_namespaceObject.usePicker)();
+    const [isSpeechToTextActive, setIsSpeechToTextActive] = external_react_default().useState(()=>chatService?.isSpeechToTextActive ?? false);
+    external_react_default().useEffect(()=>{
+        if (!chatService) return;
+        setIsSpeechToTextActive(chatService.isSpeechToTextActive);
+        return chatService.on(external_service_index_cjs_namespaceObject.AutopilotChatEvent.SetSpeechToTextState, (isActive)=>{
+            setIsSpeechToTextActive(isActive);
+        });
+    }, [
+        chatService
+    ]);
+    const handleSpeechToTextClick = external_react_default().useCallback(()=>{
+        chatService?.publishSpeechToTextToggle();
+    }, [
+        chatService
+    ]);
     const fileInputRef = external_react_default().useRef(null);
     const handleFileButtonClick = ()=>{
         if (fileInputRef.current) {
@@ -150,6 +168,7 @@ function AutopilotChatInputActionsComponent({ handleSubmit, disableSubmit, waiti
         acceptedExtensions,
         _
     ]);
+    const showVoice = false === disabledFeatures.audioStreaming && (isVoiceInteractionActive || !!isInputEmpty && !waitingResponse);
     const hasMultipleFeatures = [
         !disabledFeatures.attachments,
         models.length > 0,
@@ -158,6 +177,9 @@ function AutopilotChatInputActionsComponent({ handleSubmit, disableSubmit, waiti
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(InputActionsContainer, {
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(InputActionsGroup, {
+                style: isVoiceInteractionActive ? {
+                    visibility: 'hidden'
+                } : void 0,
                 children: [
                     !disabledFeatures.attachments && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                         children: [
@@ -250,8 +272,28 @@ function AutopilotChatInputActionsComponent({ handleSubmit, disableSubmit, waiti
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(InputActionsGroup, {
                 children: [
-                    !disabledFeatures.audio && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(chat_audio_cjs_namespaceObject.AutopilotChatAudio, {}),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SubmitButtonContainer, {
+                    !isVoiceInteractionActive && !disabledFeatures.audio && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_always_on_voice_button_cjs_namespaceObject.VoiceButtonContainer, {
+                        active: isSpeechToTextActive,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(action_button_cjs_namespaceObject.AutopilotChatActionButton, {
+                            iconName: "mic",
+                            onClick: handleSpeechToTextClick,
+                            tooltipPlacement: "top",
+                            tooltip: _({
+                                id: 'autopilot-chat.input.actions.dictate'
+                            }),
+                            overrideColor: isSpeechToTextActive ? 'var(--color-background)' : void 0,
+                            "data-testid": "autopilot-chat-stt-button",
+                            ariaLabel: _({
+                                id: 'autopilot-chat.input.actions.dictate'
+                            }),
+                            ariaPressed: isSpeechToTextActive
+                        })
+                    }),
+                    showVoice && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_always_on_voice_button_cjs_namespaceObject.AlwaysOnVoiceButton, {
+                        disabled: isSpeechToTextActive,
+                        onActiveChange: onVoiceInteractionChange
+                    }),
+                    !showVoice && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SubmitButtonContainer, {
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(action_button_cjs_namespaceObject.AutopilotChatActionButton, {
                             iconName: waitingResponse ? 'stop' : 'arrow_upward',
                             tooltip: waitingResponse ? _({

package/dist/material/components/ap-chat/components/input/chat-input-actions.d.ts

@@ -2,10 +2,13 @@ import React from 'react';
 interface AutopilotChatInputActionsProps {
     handleSubmit: (event: React.MouseEvent) => void;
     disableSubmit: boolean;
+    isInputEmpty?: boolean;
     waitingResponse: boolean;
     onResourceTriggerClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onVoiceInteractionChange?: (isActive: boolean) => void;
+    isVoiceInteractionActive?: boolean;
 }
-declare function AutopilotChatInputActionsComponent({ handleSubmit, disableSubmit, waitingResponse, onResourceTriggerClick, }: AutopilotChatInputActionsProps): import("react/jsx-runtime").JSX.Element;
+declare function AutopilotChatInputActionsComponent({ handleSubmit, disableSubmit, isInputEmpty, waitingResponse, onResourceTriggerClick, onVoiceInteractionChange, isVoiceInteractionActive, }: AutopilotChatInputActionsProps): import("react/jsx-runtime").JSX.Element;
 export declare const AutopilotChatInputActions: React.MemoExoticComponent<typeof AutopilotChatInputActionsComponent>;
 export {};
 //# sourceMappingURL=chat-input-actions.d.ts.map

package/dist/material/components/ap-chat/components/input/chat-input-actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-input-actions.d.ts","sourceRoot":"","sources":["../../../../../../src/material/components/ap-chat/components/input/chat-input-actions.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAyC1B,UAAU,8BAA8B;IACtC,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,aAAa,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC/E;AAED,iBAAS,kCAAkC,CAAC,EAC1C,YAAY,EACZ,aAAa,EACb,eAAe,EACf,sBAAsB,GACvB,EAAE,8BAA8B,2CAuOhC;AAED,eAAO,MAAM,yBAAyB,sEAAiD,CAAC"}
+{"version":3,"file":"chat-input-actions.d.ts","sourceRoot":"","sources":["../../../../../../src/material/components/ap-chat/components/input/chat-input-actions.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AA2C1B,UAAU,8BAA8B;IACtC,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,aAAa,EAAE,OAAO,CAAC;IAMvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9E,wBAAwB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,iBAAS,kCAAkC,CAAC,EAC1C,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,sBAAsB,EACtB,wBAAwB,EACxB,wBAAwB,GACzB,EAAE,8BAA8B,2CA8RhC;AAED,eAAO,MAAM,yBAAyB,sEAAiD,CAAC"}

package/dist/material/components/ap-chat/components/input/chat-input-actions.js

@@ -5,13 +5,15 @@ import apollo_core, { FontVariantToken } from "@uipath/apollo-core";
 import react from "react";
 import { ApTypography } from "../../../ap-typography/index.js";
 import { useAttachments } from "../../providers/attachements-provider.js";
+import { useChatService } from "../../providers/chat-service.provider.js";
 import { useChatState } from "../../providers/chat-state-provider.js";
 import { useError } from "../../providers/error-provider.js";
 import { usePicker } from "../../providers/picker-provider.js";
+import { AutopilotChatEvent } from "../../service/index.js";
 import { parseFiles } from "../../utils/file-reader.js";
-import { AutopilotChatAudio } from "../audio/chat-audio.js";
 import { AutopilotChatActionButton } from "../common/action-button.js";
 import { VisuallyHidden } from "../common/shared-controls.js";
+import { AlwaysOnVoiceButton, VoiceButtonContainer } from "./always-on-voice-button.js";
 import { AutopilotChatAgentModeSelector } from "./chat-input-agent-mode-selector.js";
 import { AutopilotChatInputModelPicker } from "./chat-input-model-picker.js";
 import { ResourceTriggerButton } from "./chat-input-resource-trigger.js";
@@ -36,12 +38,28 @@ const SubmitButtonContainer = styled('div')(()=>({
             }
         }
     }));
-function AutopilotChatInputActionsComponent({ handleSubmit, disableSubmit, waitingResponse, onResourceTriggerClick }) {
+function AutopilotChatInputActionsComponent({ handleSubmit, disableSubmit, isInputEmpty, waitingResponse, onResourceTriggerClick, onVoiceInteractionChange, isVoiceInteractionActive }) {
     const { _ } = useLingui();
+    const chatService = useChatService();
     const { addAttachments } = useAttachments();
     const { setError } = useError();
     const { disabledFeatures, allowedAttachments } = useChatState();
     const { models, agentModes } = usePicker();
+    const [isSpeechToTextActive, setIsSpeechToTextActive] = react.useState(()=>chatService?.isSpeechToTextActive ?? false);
+    react.useEffect(()=>{
+        if (!chatService) return;
+        setIsSpeechToTextActive(chatService.isSpeechToTextActive);
+        return chatService.on(AutopilotChatEvent.SetSpeechToTextState, (isActive)=>{
+            setIsSpeechToTextActive(isActive);
+        });
+    }, [
+        chatService
+    ]);
+    const handleSpeechToTextClick = react.useCallback(()=>{
+        chatService?.publishSpeechToTextToggle();
+    }, [
+        chatService
+    ]);
     const fileInputRef = react.useRef(null);
     const handleFileButtonClick = ()=>{
         if (fileInputRef.current) {
@@ -111,6 +129,7 @@ function AutopilotChatInputActionsComponent({ handleSubmit, disableSubmit, waiti
         acceptedExtensions,
         _
     ]);
+    const showVoice = false === disabledFeatures.audioStreaming && (isVoiceInteractionActive || !!isInputEmpty && !waitingResponse);
     const hasMultipleFeatures = [
         !disabledFeatures.attachments,
         models.length > 0,
@@ -119,6 +138,9 @@ function AutopilotChatInputActionsComponent({ handleSubmit, disableSubmit, waiti
     return /*#__PURE__*/ jsxs(InputActionsContainer, {
         children: [
             /*#__PURE__*/ jsxs(InputActionsGroup, {
+                style: isVoiceInteractionActive ? {
+                    visibility: 'hidden'
+                } : void 0,
                 children: [
                     !disabledFeatures.attachments && /*#__PURE__*/ jsxs(Fragment, {
                         children: [
@@ -211,8 +233,28 @@ function AutopilotChatInputActionsComponent({ handleSubmit, disableSubmit, waiti
             }),
             /*#__PURE__*/ jsxs(InputActionsGroup, {
                 children: [
-                    !disabledFeatures.audio && /*#__PURE__*/ jsx(AutopilotChatAudio, {}),
-                    /*#__PURE__*/ jsx(SubmitButtonContainer, {
+                    !isVoiceInteractionActive && !disabledFeatures.audio && /*#__PURE__*/ jsx(VoiceButtonContainer, {
+                        active: isSpeechToTextActive,
+                        children: /*#__PURE__*/ jsx(AutopilotChatActionButton, {
+                            iconName: "mic",
+                            onClick: handleSpeechToTextClick,
+                            tooltipPlacement: "top",
+                            tooltip: _({
+                                id: 'autopilot-chat.input.actions.dictate'
+                            }),
+                            overrideColor: isSpeechToTextActive ? 'var(--color-background)' : void 0,
+                            "data-testid": "autopilot-chat-stt-button",
+                            ariaLabel: _({
+                                id: 'autopilot-chat.input.actions.dictate'
+                            }),
+                            ariaPressed: isSpeechToTextActive
+                        })
+                    }),
+                    showVoice && /*#__PURE__*/ jsx(AlwaysOnVoiceButton, {
+                        disabled: isSpeechToTextActive,
+                        onActiveChange: onVoiceInteractionChange
+                    }),
+                    !showVoice && /*#__PURE__*/ jsx(SubmitButtonContainer, {
                         children: /*#__PURE__*/ jsx(AutopilotChatActionButton, {
                             iconName: waitingResponse ? 'stop' : 'arrow_upward',
                             tooltip: waitingResponse ? _({