@cognizant-ai-lab/ui-common 1.3.3

package/dist/components/AgentChat/FormattedMarkdown.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { Fragment } from "react";
+import ReactMarkdown from "react-markdown";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import rehypeRaw from "rehype-raw";
+import rehypeSlug from "rehype-slug";
+import { hashString } from "../../utils/text.js";
+/**
+ * Format the output to ensure that text nodes are formatted as markdown but other nodes are passed along as-is.
+ *
+ * @param props The props for the component. @see FormattedMarkdownProps
+ * @returns The formatted output. Consecutive string nodes will be aggregated and wrapped in a markdown component,
+ * while other nodes will be passed along as-is.
+ */
+export const FormattedMarkdown = ({ id, nodesList, style, wrapLongLines = false, }) => {
+    /**
+     * Get the formatted output for a given string. The string is assumed to be in Markdown format.
+     * @param stringToFormat The string to format.
+     * @param index The index of the string in the nodes list. Used as "salt" to generate a unique key.
+     * @returns The formatted markdown.
+     */
+    const getFormattedMarkdown = (stringToFormat, index) => (_jsx(ReactMarkdown, { rehypePlugins: [rehypeRaw, rehypeSlug], components: {
+            code(codeProps) {
+                const { children, className, ...rest } = codeProps;
+                const match = /language-(?<language>\w+)/u.exec(className || "");
+                return match ? (_jsx(SyntaxHighlighter, { id: `syntax-highlighter-${match.groups["language"]}`, PreTag: "div", language: match.groups["language"], style: style, children: String(children).replace(/\n$/u, "") })) : (_jsx("code", { id: `code-${className}`, ...rest, className: className, style: wrapLongLines ? { whiteSpace: "pre-wrap", wordBreak: "break-word" } : {}, children: children }));
+            },
+            // Handle links specially since we want them to open in a new tab
+            a({ ...codeProps }) {
+                return (_jsx("a", { ...codeProps, id: "reference-link", target: "_blank", rel: "noopener noreferrer", children: codeProps.children }));
+            },
+        }, children: stringToFormat }, `${hashString(stringToFormat)}-${index}`));
+    const getNodeKey = (node, index) => {
+        // If it has a key, use that
+        if (typeof node === "object" && node !== null && "key" in node && node.key !== null) {
+            return `${node.key}-${index}`;
+        }
+        // If not, do our best to synthesize a key
+        return `${hashString(node?.toString() || "")}-${index}`;
+    };
+    // Walk through the nodes list. If we encounter a string node, we'll aggregate it with other string nodes.
+    const formattedOutput = [];
+    let currentTextNodes = [];
+    for (const [i, node] of nodesList.entries()) {
+        // If it's a string node, aggregate it with other string nodes
+        if (typeof node === "string") {
+            currentTextNodes.push(node);
+        }
+        else {
+            // Not a string node. Process any aggregated text nodes
+            if (currentTextNodes.length > 0) {
+                const concatenatedText = getFormattedMarkdown(currentTextNodes.join(""), i);
+                formattedOutput.push(concatenatedText);
+                currentTextNodes = [];
+            }
+            // Not a string node. Add the node as-is
+            const key = getNodeKey(node, i);
+            formattedOutput.push(_jsx(Fragment, { children: node }, key));
+        }
+    }
+    // Process any remaining text nodes
+    if (currentTextNodes.length > 0) {
+        const concatenatedText = getFormattedMarkdown(currentTextNodes.join(""), nodesList.length);
+        formattedOutput.push(concatenatedText);
+    }
+    return _jsx("div", { id: id, children: formattedOutput });
+};

package/dist/components/AgentChat/Greetings.d.ts

@@ -0,0 +1 @@
+export declare const AGENT_GREETINGS: string[];

package/dist/components/AgentChat/Greetings.js

@@ -0,0 +1,38 @@
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+// Random greetings agents can use
+export const AGENT_GREETINGS = [
+    "Hey there! How can I assist you today?",
+    "Hi! What can I do for you?",
+    "Hello! Need help with something?",
+    "Hey! How’s your day going? What can I help with?",
+    "Hi there! What’s on your mind?",
+    "Hello, friend! How can I make your day easier?",
+    "Hey, how can I assist you today?",
+    "Hi! Got any questions? I’m here to help!",
+    "Hey! What’s up? How can I be of service?",
+    "Greetings! What can I do for you?",
+    "Hello there! Need any assistance?",
+    "Hey, good to see you! How can I help?",
+    "Hi! I’d love to assist you—what’s on your mind?",
+    "Hey, what’s new? How can I lend a hand?",
+    "Hello! I’m here to help—what do you need?",
+    "Hi there! Looking for answers? I’ve got you!",
+    "Hey! Need some help? I’m all ears!",
+    "Hello! What’s something I can help you figure out today?",
+    "Hi! How’s it going? What can I do for you?",
+    "Hey there! Got a challenge? Let’s solve it together!",
+];

package/dist/components/AgentChat/LlmChatButton.d.ts

@@ -0,0 +1,12 @@
+type LLMChatGroupConfigBtnProps = {
+    disabled?: boolean;
+    posRight?: number;
+    posBottom?: number;
+};
+export declare const LlmChatButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLButtonElement>;
+}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "href" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & LLMChatGroupConfigBtnProps, {}, {}>;
+export declare const SmallLlmChatButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLButtonElement>;
+}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "href" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & LLMChatGroupConfigBtnProps, {}, {}>;
+export {};

package/dist/components/AgentChat/LlmChatButton.js

@@ -0,0 +1,33 @@
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { styled } from "@mui/material";
+import Button from "@mui/material/Button";
+// #endregion: Types
+export const LlmChatButton = styled(Button, {
+    shouldForwardProp: (prop) => !["posRight", "posBottom"].includes(String(prop)),
+})(({ disabled, posRight, posBottom }) => ({
+    background: "var(--bs-primary) !important",
+    borderRadius: "var(--bs-border-radius)",
+    bottom: posBottom !== undefined ? posBottom : 0,
+    cursor: disabled ? "default" : "pointer",
+    opacity: disabled ? "50%" : "100%",
+    right: posRight !== undefined ? posRight : 0,
+    position: "absolute",
+}));
+export const SmallLlmChatButton = styled(LlmChatButton)({
+    minWidth: 0,
+    padding: "0.25rem",
+});

package/dist/components/AgentChat/SendButton.d.ts

@@ -0,0 +1,12 @@
+import { FC } from "react";
+interface SendButtonProps {
+    enableSendButton: boolean;
+    id: string;
+    onClickCallback: () => void;
+}
+/**
+ * Generate the Send Button for a chat window.
+ * @returns The Send Button.
+ */
+export declare const SendButton: FC<SendButtonProps>;
+export {};

package/dist/components/AgentChat/SendButton.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import SendIcon from "@mui/icons-material/Send";
+import { LlmChatButton } from "./LlmChatButton.js";
+// #endregion: Types
+/**
+ * Generate the Send Button for a chat window.
+ * @returns The Send Button.
+ */
+export const SendButton = ({ enableSendButton, id, onClickCallback }) => (_jsx(LlmChatButton, { "aria-label": "Send", disabled: !enableSendButton, id: id, onClick: onClickCallback, sx: {
+        padding: "0.6rem",
+        position: "relative",
+    }, tabIndex: 0, children: _jsx(SendIcon, { fontSize: "small", id: "stop-button-icon" // Could update this but it would impact QA
+        , sx: { color: "var(--bs-white)" } }) }));

package/dist/components/AgentChat/SyntaxHighlighterThemes.d.ts

@@ -0,0 +1,14 @@
+export declare const HLJS_THEMES: {
+    a11yDark: {
+        [key: string]: import("react").CSSProperties;
+    };
+    a11yLight: {
+        [key: string]: import("react").CSSProperties;
+    };
+    atelierDuneDark: {
+        [key: string]: import("react").CSSProperties;
+    };
+    docco: {
+        [key: string]: import("react").CSSProperties;
+    };
+};

package/dist/components/AgentChat/SyntaxHighlighterThemes.js

@@ -0,0 +1,27 @@
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+/**
+ * List of available hljs themes for the syntax highlighter.
+ * See: https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/src/styles/hljs/index.js
+ */
+import { a11yDark, a11yLight, atelierDuneDark, docco } from "react-syntax-highlighter/dist/cjs/styles/hljs/index.js";
+// hljs themes
+export const HLJS_THEMES = {
+    a11yDark,
+    a11yLight,
+    atelierDuneDark,
+    docco,
+};

package/dist/components/AgentChat/Types.d.ts

@@ -0,0 +1,17 @@
+export declare enum LegacyAgentType {
+    OpportunityFinder = "OpportunityFinder",
+    ScopingAgent = "ScopingAgent",
+    DataGenerator = "DataGenerator",
+    DMSChat = "DMSChat",
+    ChatBot = "ChatBot"
+}
+export declare const isLegacyAgentType: (agent: string) => boolean;
+export type CombinedAgentType = LegacyAgentType | string;
+/**
+ * Models the error we receive from neuro-san agents.
+ */
+export interface AgentErrorProps {
+    error: string;
+    traceback?: string;
+    tool?: string;
+}

package/dist/components/AgentChat/Types.js

@@ -0,0 +1,26 @@
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+export var LegacyAgentType;
+(function (LegacyAgentType) {
+    LegacyAgentType["OpportunityFinder"] = "OpportunityFinder";
+    LegacyAgentType["ScopingAgent"] = "ScopingAgent";
+    LegacyAgentType["DataGenerator"] = "DataGenerator";
+    LegacyAgentType["DMSChat"] = "DMSChat";
+    LegacyAgentType["ChatBot"] = "ChatBot";
+})(LegacyAgentType || (LegacyAgentType = {}));
+export const isLegacyAgentType = (agent) => {
+    return Object.keys(LegacyAgentType).includes(agent);
+};

package/dist/components/AgentChat/UserQueryDisplay.d.ts

@@ -0,0 +1,5 @@
+export declare const UserQueryDisplay: ({ userQuery, title, userImage, }: {
+    userQuery: string;
+    title: string;
+    userImage: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AgentChat/UserQueryDisplay.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { styled } from "@mui/material";
+import { DEFAULT_USER_IMAGE } from "../../const.js";
+// #region: Styled Components
+const UserQueryContainer = styled("div")(({ theme }) => ({
+    backgroundColor: theme.palette.background.default,
+    border: "var(--bs-border-width) var(--bs-border-style)",
+    borderColor: theme.palette.mode === "dark" ? "var(--bs-white)" : "var(--bs-border-color)",
+    borderRadius: "var(--bs-border-radius)",
+    boxShadow: `0 0px 6px 0 ${theme.palette.mode === "dark" ? "var(--bs-accent2-light)" : "rgba(var(--bs-primary-rgb), 0.15)"}`,
+    color: theme.palette.mode === "dark" ? "var(--bs-white)" : "var(--bs-primary)",
+    display: "inline-flex",
+    padding: "10px",
+}));
+// #endregion: Styled Components
+export const UserQueryDisplay = ({ userQuery, title, userImage, }) => {
+    return (_jsx("div", { id: "user-query-div", style: { marginBottom: "1rem" }, children: _jsxs(UserQueryContainer, { id: "user-query-container", children: [_jsx("img", { id: "user-query-image", src: userImage || DEFAULT_USER_IMAGE, width: 30, height: 30, title: title, alt: "", role: "img" }), _jsx("span", { id: "user-query", style: { marginLeft: "0.625rem", marginTop: "0.125rem" }, children: userQuery })] }) }));
+};

package/dist/components/AgentChat/Utils.d.ts

@@ -0,0 +1,11 @@
+import { ChatMessage, ChatMessageType } from "../../generated/neuro-san/NeuroSanClient.js";
+export declare const KNOWN_MESSAGE_TYPES: ChatMessageType[];
+export declare const KNOWN_MESSAGE_TYPES_FOR_PLASMA: ChatMessageType[];
+export declare const chatMessageFromChunk: (chunk: string) => ChatMessage | null;
+export declare const checkError: (chatMessageJson: object) => string | null;
+/**
+ * Convert FOO_BAR to more human "Foo Bar"
+ * @param agentName Agent name in SNAKE_CASE format.
+ * @returns User-friendly agent name.
+ */
+export declare const cleanUpAgentName: (agentName: string) => string;

package/dist/components/AgentChat/Utils.js

@@ -0,0 +1,64 @@
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import capitalize from "lodash-es/capitalize.js";
+import startCase from "lodash-es/startCase.js";
+import { ChatMessageType } from "../../generated/neuro-san/NeuroSanClient.js";
+// We ignore any messages that are not of these types
+export const KNOWN_MESSAGE_TYPES = [
+    ChatMessageType.AI,
+    ChatMessageType.AGENT,
+    ChatMessageType.AGENT_FRAMEWORK,
+    ChatMessageType.HUMAN,
+    ChatMessageType.SYSTEM,
+];
+// HUMAN omitted for plasma edges mainly for performance reasons. However, does it make sense for plasma to include
+// human messages anyway?
+export const KNOWN_MESSAGE_TYPES_FOR_PLASMA = KNOWN_MESSAGE_TYPES.filter((type) => type !== ChatMessageType.HUMAN);
+export const chatMessageFromChunk = (chunk) => {
+    let chatResponse;
+    try {
+        chatResponse = JSON.parse(chunk);
+    }
+    catch {
+        return null;
+    }
+    const chatMessage = chatResponse?.response;
+    const messageType = chatMessage?.type;
+    // Check if it's a message type we know how to handle
+    if (!KNOWN_MESSAGE_TYPES.includes(messageType)) {
+        return null;
+    }
+    return chatResponse.response;
+};
+export const checkError = (chatMessageJson) => {
+    if (chatMessageJson && "error" in chatMessageJson) {
+        const agentError = chatMessageJson;
+        return (`Error occurred. Error: "${agentError.error}", ` +
+            `traceback: "${agentError?.traceback}", ` +
+            `tool: "${agentError?.tool}"`);
+    }
+    else {
+        return null;
+    }
+};
+/**
+ * Convert FOO_BAR to more human "Foo Bar"
+ * @param agentName Agent name in SNAKE_CASE format.
+ * @returns User-friendly agent name.
+ */
+export const cleanUpAgentName = (agentName) => {
+    return startCase(capitalize(agentName));
+};

package/dist/components/AgentChat/VoiceChat/MicrophoneButton.d.ts

@@ -0,0 +1,29 @@
+import { Dispatch, FC, MutableRefObject, SetStateAction } from "react";
+import { SpeechRecognitionState } from "./VoiceChat.js";
+export interface MicrophoneButtonProps {
+    /**
+     * Whether microphone/voice mode is currently enabled
+     */
+    isMicOn: boolean;
+    /**
+     * Function to toggle the microphone state
+     */
+    onMicToggle: (newState: boolean) => void;
+    /**
+     * Reference to the SpeechRecognition instance
+     */
+    speechRecognitionRef: MutableRefObject<SpeechRecognition | null>;
+    /**
+     * Current voice input state
+     */
+    voiceInputState: SpeechRecognitionState;
+    /**
+     * Function to update voice input state
+     */
+    setVoiceInputState: Dispatch<SetStateAction<SpeechRecognitionState>>;
+}
+/**
+ * Microphone button component for voice input functionality.
+ * Handles toggling voice recognition on/off and displays appropriate visual feedback.
+ */
+export declare const MicrophoneButton: FC<MicrophoneButtonProps>;

package/dist/components/AgentChat/VoiceChat/MicrophoneButton.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import MicNoneIcon from "@mui/icons-material/MicNone";
+import MicOffIcon from "@mui/icons-material/MicOff";
+import Tooltip from "@mui/material/Tooltip";
+import { LlmChatButton } from "../LlmChatButton.js";
+import { checkSpeechSupport, toggleListening } from "./VoiceChat.js";
+// #endregion: Types
+/**
+ * Microphone button component for voice input functionality.
+ * Handles toggling voice recognition on/off and displays appropriate visual feedback.
+ */
+export const MicrophoneButton = ({ isMicOn, onMicToggle, speechRecognitionRef, voiceInputState, setVoiceInputState, }) => {
+    const speechSupported = checkSpeechSupport();
+    const handleClick = async () => {
+        const newMicState = !isMicOn;
+        onMicToggle(newMicState);
+        if (!speechSupported)
+            return;
+        // If turning off the microphone, immediately update the voice state
+        if (!newMicState) {
+            setVoiceInputState((prev) => ({
+                ...prev,
+                isListening: false,
+                isProcessingSpeech: false,
+            }));
+        }
+        await toggleListening(newMicState, speechRecognitionRef.current);
+    };
+    const isDisabled = !speechSupported;
+    const tooltipText = !speechSupported
+        ? "Voice input is only supported in Google Chrome on Mac or Windows."
+        : isMicOn
+            ? "Turn microphone off"
+            : "Turn microphone on";
+    return (_jsx(Tooltip, { title: tooltipText, children: _jsx("span", { style: { display: "inline-block", height: 50, width: 64 }, children: _jsx(LlmChatButton, { "data-testid": "microphone-button", disabled: isDisabled, id: "microphone-button", onClick: handleClick, sx: {
+                    padding: "0.5rem",
+                    right: 70,
+                    backgroundColor: isMicOn && voiceInputState.isListening ? "var(--bs-success)" : "var(--bs-secondary)",
+                }, tabIndex: 0, children: voiceInputState.isListening ? (_jsx(MicNoneIcon, { sx: { color: "var(--bs-white)" }, "data-testid": "MicNoneIcon" })) : (_jsx(MicOffIcon, { sx: { color: "var(--bs-white)" }, "data-testid": "MicOffIcon" })) }) }) }));
+};

package/dist/components/AgentChat/VoiceChat/VoiceChat.d.ts

@@ -0,0 +1,33 @@
+import { Dispatch, MutableRefObject, SetStateAction } from "react";
+export interface SpeechRecognitionHandlers {
+    end: () => void;
+    error: (event: SpeechRecognitionErrorEvent) => void;
+    result: (event: SpeechRecognitionEvent) => void;
+    start: () => void;
+}
+export interface SpeechRecognitionState {
+    /**
+     * currentTranscript holds the interim (live) speech recognition results as the user is speaking.
+     * This provides real-time feedback in the UI, showing what the system is currently hearing.
+     */
+    currentTranscript: string;
+    /**
+     * finalTranscript contains the finalized speech recognition result for a segment.
+     * This is stable and ready to be used as chat input after the system is confident about what was said.
+     */
+    finalTranscript: string;
+    /**
+     * isListening indicates whether the system is actively listening for speech input.
+     * Used to control UI state and microphone activity.
+     */
+    isListening: boolean;
+    /**
+     * isProcessingSpeech indicates whether the system is currently processing interim speech results.
+     * Used to show loading indicators or disable UI actions during processing.
+     */
+    isProcessingSpeech: boolean;
+}
+export declare const checkSpeechSupport: () => boolean;
+export declare function cleanupAndStopSpeechRecognition(speechRecognitionRef: MutableRefObject<SpeechRecognition | null>, handlers: SpeechRecognitionHandlers | null): void;
+export declare function setupSpeechRecognition(setChatInput: Dispatch<SetStateAction<string>>, setVoiceInputState: Dispatch<SetStateAction<SpeechRecognitionState>>, speechRecognitionRef: MutableRefObject<SpeechRecognition | null>): SpeechRecognitionHandlers | null;
+export declare const toggleListening: (isMicOn: boolean, recognition: SpeechRecognition | null) => Promise<void>;