@patternfly/chatbot 6.3.0 → 6.3.2

package/dist/cjs/Message/CodeBlockMessage/CodeBlockMessage.js

@@ -10,22 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 // ============================================================================
 // Chatbot Main - Message - Content - Code Block
 // ============================================================================
 const react_1 = require("react");
-const react_syntax_highlighter_1 = __importDefault(require("react-syntax-highlighter"));
-const hljs_1 = require("react-syntax-highlighter/dist/esm/styles/hljs");
 // Import PatternFly components
 const react_core_1 = require("@patternfly/react-core");
 const check_icon_1 = require("@patternfly/react-icons/dist/esm/icons/check-icon");
 const copy_icon_1 = require("@patternfly/react-icons/dist/esm/icons/copy-icon");
-const ExpandableSectionForSyntaxHighlighter_1 = require("./ExpandableSectionForSyntaxHighlighter");
 const DEFAULT_EXPANDED_TEXT = 'Show less';
 const DEFAULT_COLLAPSED_TEXT = 'Show more';
 const CodeBlockMessage = (_a) => {
@@ -71,9 +65,6 @@ const CodeBlockMessage = (_a) => {
     }
     // Setup code block header
     const actions = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(react_core_1.CodeBlockAction, { children: [language && (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-code-block-language", children: language }), (0, jsx_runtime_1.jsx)(react_core_1.Button, { ref: buttonRef, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Copy code', variant: "plain", className: "pf-chatbot__button--copy", onClick: (event) => handleCopy(event, children), children: copied ? (0, jsx_runtime_1.jsx)(check_icon_1.CheckIcon, {}) : (0, jsx_runtime_1.jsx)(copy_icon_1.CopyIcon, {}) }), (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, { id: tooltipID, content: "Copy", position: "top", triggerRef: buttonRef })] }) }));
-    return ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-code-block", ref: codeBlockRef, children: (0, jsx_runtime_1.jsxs)(react_core_1.CodeBlock, { actions: actions, children: [(0, jsx_runtime_1.jsx)(react_core_1.CodeBlockCode, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: language ? (
-                        // SyntaxHighlighter doesn't work with ExpandableSection because it targets the direct child
-                        // Forked for now and adjusted to match what we need
-                        (0, jsx_runtime_1.jsx)(ExpandableSectionForSyntaxHighlighter_1.ExpandableSectionForSyntaxHighlighter, Object.assign({ variant: react_core_1.ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId, language: language }, expandableSectionProps, { children: (0, jsx_runtime_1.jsx)(react_syntax_highlighter_1.default, Object.assign({}, props, { language: language, style: hljs_1.obsidian, PreTag: "div", CodeTag: "div", wrapLongLines: true, children: String(children).replace(/\n$/, '') })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, Object.assign({ variant: react_core_1.ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId }, expandableSectionProps, { children: children }))) }) }), isExpandable && ((0, jsx_runtime_1.jsx)(react_core_1.ExpandableSectionToggle, Object.assign({ isExpanded: isExpanded, onToggle: onToggle, direction: "up", toggleId: toggleId, contentId: contentId, hasTruncatedContent: true, className: "pf-chatbot__message-code-toggle" }, expandableSectionToggleProps, { children: isExpanded ? finalExpandedText : finalCollapsedText })))] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-code-block", ref: codeBlockRef, children: (0, jsx_runtime_1.jsxs)(react_core_1.CodeBlock, { actions: actions, children: [(0, jsx_runtime_1.jsx)(react_core_1.CodeBlockCode, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isExpandable ? ((0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, Object.assign({ variant: react_core_1.ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId }, expandableSectionProps, { children: children }))) : (children) }) }), isExpandable && ((0, jsx_runtime_1.jsx)(react_core_1.ExpandableSectionToggle, Object.assign({ isExpanded: isExpanded, onToggle: onToggle, direction: "up", toggleId: toggleId, contentId: contentId, hasTruncatedContent: true, className: "pf-chatbot__message-code-toggle" }, expandableSectionToggleProps, { children: isExpanded ? finalExpandedText : finalCollapsedText })))] }) }));
 };
 exports.default = CodeBlockMessage;

package/dist/cjs/MessageBar/MessageBar.js

@@ -32,6 +32,7 @@ const MessageBarBase = (_a) => {
     const [message, setMessage] = (0, react_1.useState)(value !== null && value !== void 0 ? value : '');
     const [isListeningMessage, setIsListeningMessage] = (0, react_1.useState)(false);
     const [hasSentMessage, setHasSentMessage] = (0, react_1.useState)(false);
+    const [isComposing, setIsComposing] = (0, react_1.useState)(false);
     const inputRef = (0, react_1.useRef)(null);
     const textareaRef = (_b = innerRef) !== null && _b !== void 0 ? _b : inputRef;
     const attachButtonRef = (0, react_1.useRef)(null);
@@ -157,18 +158,32 @@ const MessageBarBase = (_a) => {
         setMessage('');
     }, [onSendMessage]);
     const handleKeyDown = (0, react_1.useCallback)((event) => {
-        if (event.key === 'Enter' && !event.shiftKey) {
+        // Japanese and other languages may use IME for character input.
+        // In these cases, enter is used to select the final input, so we need to check for composition end instead.
+        // See more info at https://www.stum.de/2016/06/24/handling-ime-events-in-javascript/
+        // Chrome, Edge, and Firefox seem to work well with just the compose event.
+        // Safari is a little bit special. We need to handle 229 as well in this case.
+        const nativeEvent = event.nativeEvent;
+        const isCompositionKey = nativeEvent.which === 229;
+        const isCurrentlyComposing = isComposing || isCompositionKey;
+        if (event.key === 'Enter' && !isCurrentlyComposing && !event.shiftKey) {
             event.preventDefault();
             if (!isSendButtonDisabled && !hasStopButton) {
                 handleSend(message);
             }
         }
-        if (event.key === 'Enter' && event.shiftKey) {
+        if (event.key === 'Enter' && !isCurrentlyComposing && event.shiftKey) {
             if (textareaRef.current) {
                 handleNewLine(textareaRef.current);
             }
         }
-    }, [isSendButtonDisabled, hasStopButton, handleSend, message]);
+    }, [isSendButtonDisabled, hasStopButton, handleSend, message, isComposing]);
+    const handleCompositionStart = (0, react_1.useCallback)(() => {
+        setIsComposing(true);
+    }, []);
+    const handleCompositionEnd = (0, react_1.useCallback)(() => {
+        setIsComposing(false);
+    }, []);
     const handleAttachMenuToggle = () => {
         (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen) && (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen(!(attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.isAttachMenuOpen)));
         attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuToggleClick();
@@ -184,7 +199,7 @@ const MessageBarBase = (_a) => {
         }
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [attachMenuProps && ((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.tooltipContent, isCompact: isCompact, tooltipProps: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.props))), !attachMenuProps && hasAttachButton && ((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.tooltipContent, inputTestId: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _h === void 0 ? void 0 : _h.inputTestId, isCompact: isCompact, tooltipProps: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _j === void 0 ? void 0 : _j.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _k === void 0 ? void 0 : _k.props))), hasMicrophoneButton && ((0, jsx_runtime_1.jsx)(MicrophoneButton_1.default, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _l === void 0 ? void 0 : _l.tooltipContent, language: (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _m === void 0 ? void 0 : _m.language, isCompact: isCompact, tooltipProps: (_o = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _o === void 0 ? void 0 : _o.tooltipProps }, (_p = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _p === void 0 ? void 0 : _p.props))), (alwayShowSendButton || message) && ((0, jsx_runtime_1.jsx)(SendButton_1.default, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_q = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _q === void 0 ? void 0 : _q.tooltipContent, isCompact: isCompact, tooltipProps: (_r = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _r === void 0 ? void 0 : _r.tooltipProps }, (_s = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _s === void 0 ? void 0 : _s.props)))] }));
     };
-    const messageBarContents = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}`, children: (0, jsx_runtime_1.jsx)(react_core_1.TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? listeningText : placeholder, placeholder: isListeningMessage ? listeningText : placeholder, ref: textareaRef, onKeyDown: handleKeyDown }, props)) }), (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-bar-actions", children: renderButtons() })] }));
+    const messageBarContents = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}`, children: (0, jsx_runtime_1.jsx)(react_core_1.TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? listeningText : placeholder, placeholder: isListeningMessage ? listeningText : placeholder, ref: textareaRef, onKeyDown: handleKeyDown, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd }, props)) }), (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-bar-actions", children: renderButtons() })] }));
     if (attachMenuProps) {
         return ((0, jsx_runtime_1.jsx)(AttachMenu_1.default, Object.assign({ toggle: (toggleRef) => ((0, jsx_runtime_1.jsx)("div", { ref: toggleRef, className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}`, children: messageBarContents })), filteredItems: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuItems }, (attachMenuProps && { isOpen: attachMenuProps.isAttachMenuOpen }), { onOpenChange: (isAttachMenuOpen) => {
                 var _a;

package/dist/esm/Message/CodeBlockMessage/CodeBlockMessage.js

@@ -14,13 +14,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // Chatbot Main - Message - Content - Code Block
 // ============================================================================
 import { useState, useRef, useId, useCallback, useEffect } from 'react';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { obsidian } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 // Import PatternFly components
 import { CodeBlock, CodeBlockAction, CodeBlockCode, Button, Tooltip, ExpandableSection, ExpandableSectionToggle, ExpandableSectionVariant } from '@patternfly/react-core';
 import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-import { ExpandableSectionForSyntaxHighlighter } from './ExpandableSectionForSyntaxHighlighter';
 const DEFAULT_EXPANDED_TEXT = 'Show less';
 const DEFAULT_COLLAPSED_TEXT = 'Show more';
 const CodeBlockMessage = (_a) => {
@@ -66,9 +63,6 @@ const CodeBlockMessage = (_a) => {
     }
     // Setup code block header
     const actions = (_jsx(_Fragment, { children: _jsxs(CodeBlockAction, { children: [language && _jsx("div", { className: "pf-chatbot__message-code-block-language", children: language }), _jsx(Button, { ref: buttonRef, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Copy code', variant: "plain", className: "pf-chatbot__button--copy", onClick: (event) => handleCopy(event, children), children: copied ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}) }), _jsx(Tooltip, { id: tooltipID, content: "Copy", position: "top", triggerRef: buttonRef })] }) }));
-    return (_jsx("div", { className: "pf-chatbot__message-code-block", ref: codeBlockRef, children: _jsxs(CodeBlock, { actions: actions, children: [_jsx(CodeBlockCode, { children: _jsx(_Fragment, { children: language ? (
-                        // SyntaxHighlighter doesn't work with ExpandableSection because it targets the direct child
-                        // Forked for now and adjusted to match what we need
-                        _jsx(ExpandableSectionForSyntaxHighlighter, Object.assign({ variant: ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId, language: language }, expandableSectionProps, { children: _jsx(SyntaxHighlighter, Object.assign({}, props, { language: language, style: obsidian, PreTag: "div", CodeTag: "div", wrapLongLines: true, children: String(children).replace(/\n$/, '') })) }))) : (_jsx(ExpandableSection, Object.assign({ variant: ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId }, expandableSectionProps, { children: children }))) }) }), isExpandable && (_jsx(ExpandableSectionToggle, Object.assign({ isExpanded: isExpanded, onToggle: onToggle, direction: "up", toggleId: toggleId, contentId: contentId, hasTruncatedContent: true, className: "pf-chatbot__message-code-toggle" }, expandableSectionToggleProps, { children: isExpanded ? finalExpandedText : finalCollapsedText })))] }) }));
+    return (_jsx("div", { className: "pf-chatbot__message-code-block", ref: codeBlockRef, children: _jsxs(CodeBlock, { actions: actions, children: [_jsx(CodeBlockCode, { children: _jsx(_Fragment, { children: isExpandable ? (_jsx(ExpandableSection, Object.assign({ variant: ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId }, expandableSectionProps, { children: children }))) : (children) }) }), isExpandable && (_jsx(ExpandableSectionToggle, Object.assign({ isExpanded: isExpanded, onToggle: onToggle, direction: "up", toggleId: toggleId, contentId: contentId, hasTruncatedContent: true, className: "pf-chatbot__message-code-toggle" }, expandableSectionToggleProps, { children: isExpanded ? finalExpandedText : finalCollapsedText })))] }) }));
 };
 export default CodeBlockMessage;

package/dist/esm/MessageBar/MessageBar.js

@@ -26,6 +26,7 @@ export const MessageBarBase = (_a) => {
     const [message, setMessage] = useState(value !== null && value !== void 0 ? value : '');
     const [isListeningMessage, setIsListeningMessage] = useState(false);
     const [hasSentMessage, setHasSentMessage] = useState(false);
+    const [isComposing, setIsComposing] = useState(false);
     const inputRef = useRef(null);
     const textareaRef = (_b = innerRef) !== null && _b !== void 0 ? _b : inputRef;
     const attachButtonRef = useRef(null);
@@ -151,18 +152,32 @@ export const MessageBarBase = (_a) => {
         setMessage('');
     }, [onSendMessage]);
     const handleKeyDown = useCallback((event) => {
-        if (event.key === 'Enter' && !event.shiftKey) {
+        // Japanese and other languages may use IME for character input.
+        // In these cases, enter is used to select the final input, so we need to check for composition end instead.
+        // See more info at https://www.stum.de/2016/06/24/handling-ime-events-in-javascript/
+        // Chrome, Edge, and Firefox seem to work well with just the compose event.
+        // Safari is a little bit special. We need to handle 229 as well in this case.
+        const nativeEvent = event.nativeEvent;
+        const isCompositionKey = nativeEvent.which === 229;
+        const isCurrentlyComposing = isComposing || isCompositionKey;
+        if (event.key === 'Enter' && !isCurrentlyComposing && !event.shiftKey) {
             event.preventDefault();
             if (!isSendButtonDisabled && !hasStopButton) {
                 handleSend(message);
             }
         }
-        if (event.key === 'Enter' && event.shiftKey) {
+        if (event.key === 'Enter' && !isCurrentlyComposing && event.shiftKey) {
             if (textareaRef.current) {
                 handleNewLine(textareaRef.current);
             }
         }
-    }, [isSendButtonDisabled, hasStopButton, handleSend, message]);
+    }, [isSendButtonDisabled, hasStopButton, handleSend, message, isComposing]);
+    const handleCompositionStart = useCallback(() => {
+        setIsComposing(true);
+    }, []);
+    const handleCompositionEnd = useCallback(() => {
+        setIsComposing(false);
+    }, []);
     const handleAttachMenuToggle = () => {
         (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen) && (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen(!(attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.isAttachMenuOpen)));
         attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuToggleClick();
@@ -178,7 +193,7 @@ export const MessageBarBase = (_a) => {
         }
         return (_jsxs(_Fragment, { children: [attachMenuProps && (_jsx(AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.tooltipContent, isCompact: isCompact, tooltipProps: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.props))), !attachMenuProps && hasAttachButton && (_jsx(AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.tooltipContent, inputTestId: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _h === void 0 ? void 0 : _h.inputTestId, isCompact: isCompact, tooltipProps: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _j === void 0 ? void 0 : _j.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _k === void 0 ? void 0 : _k.props))), hasMicrophoneButton && (_jsx(MicrophoneButton, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _l === void 0 ? void 0 : _l.tooltipContent, language: (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _m === void 0 ? void 0 : _m.language, isCompact: isCompact, tooltipProps: (_o = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _o === void 0 ? void 0 : _o.tooltipProps }, (_p = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _p === void 0 ? void 0 : _p.props))), (alwayShowSendButton || message) && (_jsx(SendButton, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_q = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _q === void 0 ? void 0 : _q.tooltipContent, isCompact: isCompact, tooltipProps: (_r = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _r === void 0 ? void 0 : _r.tooltipProps }, (_s = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _s === void 0 ? void 0 : _s.props)))] }));
     };
-    const messageBarContents = (_jsxs(_Fragment, { children: [_jsx("div", { className: `pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}`, children: _jsx(TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? listeningText : placeholder, placeholder: isListeningMessage ? listeningText : placeholder, ref: textareaRef, onKeyDown: handleKeyDown }, props)) }), _jsx("div", { className: "pf-chatbot__message-bar-actions", children: renderButtons() })] }));
+    const messageBarContents = (_jsxs(_Fragment, { children: [_jsx("div", { className: `pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}`, children: _jsx(TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? listeningText : placeholder, placeholder: isListeningMessage ? listeningText : placeholder, ref: textareaRef, onKeyDown: handleKeyDown, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd }, props)) }), _jsx("div", { className: "pf-chatbot__message-bar-actions", children: renderButtons() })] }));
     if (attachMenuProps) {
         return (_jsx(AttachMenu, Object.assign({ toggle: (toggleRef) => (_jsx("div", { ref: toggleRef, className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}`, children: messageBarContents })), filteredItems: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuItems }, (attachMenuProps && { isOpen: attachMenuProps.isAttachMenuOpen }), { onOpenChange: (isAttachMenuOpen) => {
                 var _a;

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.test.tsx","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.test.tsx","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageInput.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.tsx","../src/Message/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/Plugins/index.ts","../src/Message/Plugins/rehypeCodeBlockToggle.ts","../src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/__mocks__/rehype-external-links.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.ts"],"version":"5.6.3"}
+{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.test.tsx","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.test.tsx","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageInput.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/Plugins/index.ts","../src/Message/Plugins/rehypeCodeBlockToggle.ts","../src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/__mocks__/rehype-external-links.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.ts"],"version":"5.6.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.3.0",
+  "version": "6.3.2",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -40,7 +40,6 @@
     "clsx": "^2.1.0",
     "framer-motion": "^11.3.28",
     "react-markdown": "^9.0.1",
-    "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^4.0.0",
     "rehype-unwrap-images": "^1.0.0",
     "rehype-external-links": "^3.0.0",

package/src/Message/CodeBlockMessage/CodeBlockMessage.tsx

@@ -2,8 +2,6 @@
 // Chatbot Main - Message - Content - Code Block
 // ============================================================================
 import { useState, useRef, useId, useCallback, useEffect } from 'react';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { obsidian } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 // Import PatternFly components
 import {
   CodeBlock,
@@ -20,7 +18,6 @@ import {
 
 import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-import { ExpandableSectionForSyntaxHighlighter } from './ExpandableSectionForSyntaxHighlighter';
 
 export interface CodeBlockMessageProps {
   /** Content rendered in code block */
@@ -137,30 +134,7 @@ const CodeBlockMessage = ({
       <CodeBlock actions={actions}>
         <CodeBlockCode>
           <>
-            {language ? (
-              // SyntaxHighlighter doesn't work with ExpandableSection because it targets the direct child
-              // Forked for now and adjusted to match what we need
-              <ExpandableSectionForSyntaxHighlighter
-                variant={ExpandableSectionVariant.truncate}
-                isExpanded={isExpanded}
-                isDetached
-                toggleId={toggleId}
-                contentId={contentId}
-                language={language}
-                {...expandableSectionProps}
-              >
-                <SyntaxHighlighter
-                  {...props}
-                  language={language}
-                  style={obsidian}
-                  PreTag="div"
-                  CodeTag="div"
-                  wrapLongLines
-                >
-                  {String(children).replace(/\n$/, '')}
-                </SyntaxHighlighter>
-              </ExpandableSectionForSyntaxHighlighter>
-            ) : (
+            {isExpandable ? (
               <ExpandableSection
                 variant={ExpandableSectionVariant.truncate}
                 isExpanded={isExpanded}
@@ -171,6 +145,8 @@ const CodeBlockMessage = ({
               >
                 {children}
               </ExpandableSection>
+            ) : (
+              children
             )}
           </>
         </CodeBlockCode>

package/src/MessageBar/MessageBar.tsx

@@ -141,6 +141,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   const [message, setMessage] = useState<string | number>(value ?? '');
   const [isListeningMessage, setIsListeningMessage] = useState<boolean>(false);
   const [hasSentMessage, setHasSentMessage] = useState(false);
+  const [isComposing, setIsComposing] = useState(false);
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const textareaRef = (innerRef as React.RefObject<HTMLTextAreaElement>) ?? inputRef;
   const attachButtonRef = useRef<HTMLButtonElement>(null);
@@ -285,21 +286,38 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
 
   const handleKeyDown = useCallback(
     (event: ReactKeyboardEvent) => {
-      if (event.key === 'Enter' && !event.shiftKey) {
+      // Japanese and other languages may use IME for character input.
+      // In these cases, enter is used to select the final input, so we need to check for composition end instead.
+      // See more info at https://www.stum.de/2016/06/24/handling-ime-events-in-javascript/
+      // Chrome, Edge, and Firefox seem to work well with just the compose event.
+      // Safari is a little bit special. We need to handle 229 as well in this case.
+      const nativeEvent = event.nativeEvent as KeyboardEvent;
+      const isCompositionKey = nativeEvent.which === 229;
+      const isCurrentlyComposing = isComposing || isCompositionKey;
+
+      if (event.key === 'Enter' && !isCurrentlyComposing && !event.shiftKey) {
         event.preventDefault();
         if (!isSendButtonDisabled && !hasStopButton) {
           handleSend(message);
         }
       }
-      if (event.key === 'Enter' && event.shiftKey) {
+      if (event.key === 'Enter' && !isCurrentlyComposing && event.shiftKey) {
         if (textareaRef.current) {
           handleNewLine(textareaRef.current);
         }
       }
     },
-    [isSendButtonDisabled, hasStopButton, handleSend, message]
+    [isSendButtonDisabled, hasStopButton, handleSend, message, isComposing]
   );
 
+  const handleCompositionStart = useCallback(() => {
+    setIsComposing(true);
+  }, []);
+
+  const handleCompositionEnd = useCallback(() => {
+    setIsComposing(false);
+  }, []);
+
   const handleAttachMenuToggle = () => {
     attachMenuProps?.setIsAttachMenuOpen && attachMenuProps?.setIsAttachMenuOpen(!attachMenuProps?.isAttachMenuOpen);
     attachMenuProps?.onAttachMenuToggleClick();
@@ -402,6 +420,8 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
           placeholder={isListeningMessage ? listeningText : placeholder}
           ref={textareaRef}
           onKeyDown={handleKeyDown}
+          onCompositionStart={handleCompositionStart}
+          onCompositionEnd={handleCompositionEnd}
           {...props}
         />
       </div>

package/dist/cjs/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.d.ts

@@ -1,62 +0,0 @@
-import { Component } from 'react';
-import { PickOptional } from '@patternfly/react-core';
-export declare enum ExpandableSectionVariant {
-    default = "default",
-    truncate = "truncate"
-}
-/** The main expandable section component. */
-export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
-    /** Content rendered inside the expandable section. */
-    children?: React.ReactNode;
-    /** Additional classes added to the expandable section. */
-    className?: string;
-    /** Id of the content of the expandable section. When passing in the isDetached property, this
-     * property's value should match the contentId property of the expandable section toggle sub-component.
-     */
-    contentId?: string;
-    /** Id of the toggle of the expandable section, which provides an accessible name to the
-     * expandable section content via the aria-labelledby attribute. When the isDetached property
-     * is also passed in, the value of this property must match the toggleId property of the
-     * expandable section toggle sub-component.
-     */
-    toggleId?: string;
-    /** Display size variant. Set to "lg" for disclosure styling. */
-    displaySize?: 'default' | 'lg';
-    /** Indicates the expandable section has a detached toggle. */
-    isDetached?: boolean;
-    /** Flag to indicate if the content is expanded. */
-    isExpanded?: boolean;
-    /** Flag to indicate if the content is indented. */
-    isIndented?: boolean;
-    /** Flag to indicate the width of the component is limited. Set to "true" for disclosure styling. */
-    isWidthLimited?: boolean;
-    /** Truncates the expandable content to the specified number of lines when using the
-     * "truncate" variant.
-     */
-    truncateMaxLines?: number;
-    /** Determines the variant of the expandable section. When passing in "truncate" as the
-     * variant, the expandable content will be truncated after 3 lines by default.
-     */
-    variant?: 'default' | 'truncate';
-    language?: string;
-}
-interface ExpandableSectionState {
-    isExpanded: boolean;
-    hasToggle: boolean;
-    previousWidth: number | undefined;
-}
-declare class ExpandableSectionForSyntaxHighlighter extends Component<ExpandableSectionProps, ExpandableSectionState> {
-    static displayName: string;
-    constructor(props: ExpandableSectionProps);
-    expandableContentRef: import("react").RefObject<HTMLDivElement>;
-    observer: any;
-    static defaultProps: PickOptional<ExpandableSectionProps>;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: ExpandableSectionProps): void;
-    componentWillUnmount(): void;
-    checkToggleVisibility: () => void;
-    resize: () => void;
-    handleResize: (...args: any[]) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-export { ExpandableSectionForSyntaxHighlighter };

package/dist/cjs/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.js

@@ -1,139 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExpandableSectionForSyntaxHighlighter = exports.ExpandableSectionVariant = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const expandable_section_1 = __importDefault(require("@patternfly/react-styles/css/components/ExpandableSection/expandable-section"));
-const react_styles_1 = require("@patternfly/react-styles");
-const c_expandable_section_m_truncate__content_LineClamp_1 = __importDefault(require("@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp"));
-const react_core_1 = require("@patternfly/react-core");
-var ExpandableSectionVariant;
-(function (ExpandableSectionVariant) {
-    ExpandableSectionVariant["default"] = "default";
-    ExpandableSectionVariant["truncate"] = "truncate";
-})(ExpandableSectionVariant || (exports.ExpandableSectionVariant = ExpandableSectionVariant = {}));
-const setLineClamp = (element, lines, language, isExpanded) => {
-    if (!element || !lines || lines < 1 || typeof isExpanded === 'undefined') {
-        return;
-    }
-    if (language) {
-        const selector = `.language-${language.toLowerCase()}`;
-        const childElement = element.querySelector(selector);
-        if (!childElement) {
-            return;
-        }
-        if (isExpanded) {
-            // Reset all truncation-related styles to their default values
-            childElement.style.removeProperty('-webkit-line-clamp');
-            childElement.style.removeProperty('display');
-            childElement.style.removeProperty('-webkit-box-orient');
-            childElement.style.removeProperty('overflow');
-        }
-        else {
-            childElement.style.setProperty('-webkit-line-clamp', lines.toString());
-            childElement.style.setProperty('display', '-webkit-box');
-            childElement.style.setProperty('-webkit-box-orient', 'vertical');
-            childElement.style.setProperty('overflow', 'hidden');
-        }
-    }
-};
-class ExpandableSectionForSyntaxHighlighter extends react_1.Component {
-    constructor(props) {
-        var _a;
-        super(props);
-        this.expandableContentRef = (0, react_1.createRef)();
-        /* eslint-disable-next-line */
-        this.observer = () => { };
-        this.checkToggleVisibility = () => {
-            var _a;
-            if ((_a = this.expandableContentRef) === null || _a === void 0 ? void 0 : _a.current) {
-                const maxLines = this.props.truncateMaxLines || parseInt(c_expandable_section_m_truncate__content_LineClamp_1.default.value);
-                const totalLines = this.expandableContentRef.current.scrollHeight /
-                    parseInt(getComputedStyle(this.expandableContentRef.current).lineHeight);
-                this.setState({
-                    hasToggle: totalLines > maxLines
-                });
-            }
-        };
-        this.resize = () => {
-            if (this.expandableContentRef.current) {
-                const { offsetWidth } = this.expandableContentRef.current;
-                if (this.state.previousWidth !== offsetWidth) {
-                    this.setState({ previousWidth: offsetWidth });
-                    this.checkToggleVisibility();
-                }
-            }
-        };
-        this.handleResize = (0, react_core_1.debounce)(this.resize, 250);
-        this.state = {
-            isExpanded: (_a = props.isExpanded) !== null && _a !== void 0 ? _a : false,
-            hasToggle: true,
-            previousWidth: undefined
-        };
-    }
-    componentDidMount() {
-        if (this.props.variant === ExpandableSectionVariant.truncate) {
-            const expandableContent = this.expandableContentRef.current;
-            if (expandableContent) {
-                this.setState({ previousWidth: expandableContent.offsetWidth });
-                this.observer = (0, react_core_1.getResizeObserver)(expandableContent, this.handleResize, false);
-                if (this.props.truncateMaxLines) {
-                    setLineClamp(expandableContent, this.props.truncateMaxLines, this.props.language, this.state.isExpanded);
-                }
-            }
-            this.checkToggleVisibility();
-        }
-    }
-    componentDidUpdate(prevProps) {
-        if (this.props.variant === ExpandableSectionVariant.truncate &&
-            (prevProps.truncateMaxLines !== this.props.truncateMaxLines ||
-                prevProps.children !== this.props.children ||
-                prevProps.isExpanded !== this.props.isExpanded)) {
-            const expandableContent = this.expandableContentRef.current;
-            setLineClamp(expandableContent, this.props.truncateMaxLines, this.props.language, this.props.isExpanded);
-            this.checkToggleVisibility();
-        }
-    }
-    componentWillUnmount() {
-        if (this.props.variant === ExpandableSectionVariant.truncate) {
-            this.observer();
-        }
-    }
-    render() {
-        const _a = this.props, { className, children, isExpanded, isDetached, displaySize, isWidthLimited, isIndented, contentId, toggleId, variant, 
-        // Gets rid of console error about it being on a DOM element
-        // eslint-disable-next-line
-        truncateMaxLines } = _a, props = __rest(_a, ["className", "children", "isExpanded", "isDetached", "displaySize", "isWidthLimited", "isIndented", "contentId", "toggleId", "variant", "truncateMaxLines"]);
-        if (isDetached && !toggleId) {
-            /* eslint-disable no-console */
-            console.warn('ExpandableSection: The toggleId value must be passed in and must match the toggleId of the ExpandableSectionToggle.');
-        }
-        const uniqueContentId = contentId || (0, react_core_1.getUniqueId)('expandable-section-content');
-        const uniqueToggleId = toggleId || (0, react_core_1.getUniqueId)('expandable-section-toggle');
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, react_styles_1.css)(expandable_section_1.default.expandableSection, isExpanded && expandable_section_1.default.modifiers.expanded, displaySize === 'lg' && expandable_section_1.default.modifiers.displayLg, isWidthLimited && expandable_section_1.default.modifiers.limitWidth, isIndented && expandable_section_1.default.modifiers.indented, variant === ExpandableSectionVariant.truncate && expandable_section_1.default.modifiers.truncate, className) }, props, { children: (0, jsx_runtime_1.jsx)("div", { ref: this.expandableContentRef, className: (0, react_styles_1.css)(expandable_section_1.default.expandableSectionContent), hidden: variant !== ExpandableSectionVariant.truncate && !isExpanded, id: uniqueContentId, "aria-labelledby": uniqueToggleId, role: "region", children: children }) })));
-    }
-}
-exports.ExpandableSectionForSyntaxHighlighter = ExpandableSectionForSyntaxHighlighter;
-ExpandableSectionForSyntaxHighlighter.displayName = 'ExpandableSection';
-ExpandableSectionForSyntaxHighlighter.defaultProps = {
-    className: '',
-    isDetached: false,
-    displaySize: 'default',
-    isWidthLimited: false,
-    isIndented: false,
-    variant: 'default'
-};

package/dist/esm/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.d.ts

@@ -1,62 +0,0 @@
-import { Component } from 'react';
-import { PickOptional } from '@patternfly/react-core';
-export declare enum ExpandableSectionVariant {
-    default = "default",
-    truncate = "truncate"
-}
-/** The main expandable section component. */
-export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
-    /** Content rendered inside the expandable section. */
-    children?: React.ReactNode;
-    /** Additional classes added to the expandable section. */
-    className?: string;
-    /** Id of the content of the expandable section. When passing in the isDetached property, this
-     * property's value should match the contentId property of the expandable section toggle sub-component.
-     */
-    contentId?: string;
-    /** Id of the toggle of the expandable section, which provides an accessible name to the
-     * expandable section content via the aria-labelledby attribute. When the isDetached property
-     * is also passed in, the value of this property must match the toggleId property of the
-     * expandable section toggle sub-component.
-     */
-    toggleId?: string;
-    /** Display size variant. Set to "lg" for disclosure styling. */
-    displaySize?: 'default' | 'lg';
-    /** Indicates the expandable section has a detached toggle. */
-    isDetached?: boolean;
-    /** Flag to indicate if the content is expanded. */
-    isExpanded?: boolean;
-    /** Flag to indicate if the content is indented. */
-    isIndented?: boolean;
-    /** Flag to indicate the width of the component is limited. Set to "true" for disclosure styling. */
-    isWidthLimited?: boolean;
-    /** Truncates the expandable content to the specified number of lines when using the
-     * "truncate" variant.
-     */
-    truncateMaxLines?: number;
-    /** Determines the variant of the expandable section. When passing in "truncate" as the
-     * variant, the expandable content will be truncated after 3 lines by default.
-     */
-    variant?: 'default' | 'truncate';
-    language?: string;
-}
-interface ExpandableSectionState {
-    isExpanded: boolean;
-    hasToggle: boolean;
-    previousWidth: number | undefined;
-}
-declare class ExpandableSectionForSyntaxHighlighter extends Component<ExpandableSectionProps, ExpandableSectionState> {
-    static displayName: string;
-    constructor(props: ExpandableSectionProps);
-    expandableContentRef: import("react").RefObject<HTMLDivElement>;
-    observer: any;
-    static defaultProps: PickOptional<ExpandableSectionProps>;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: ExpandableSectionProps): void;
-    componentWillUnmount(): void;
-    checkToggleVisibility: () => void;
-    resize: () => void;
-    handleResize: (...args: any[]) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-export { ExpandableSectionForSyntaxHighlighter };

package/dist/esm/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.js

@@ -1,133 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Component, createRef } from 'react';
-import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section';
-import { css } from '@patternfly/react-styles';
-import lineClamp from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp';
-import { debounce, getResizeObserver, getUniqueId } from '@patternfly/react-core';
-export var ExpandableSectionVariant;
-(function (ExpandableSectionVariant) {
-    ExpandableSectionVariant["default"] = "default";
-    ExpandableSectionVariant["truncate"] = "truncate";
-})(ExpandableSectionVariant || (ExpandableSectionVariant = {}));
-const setLineClamp = (element, lines, language, isExpanded) => {
-    if (!element || !lines || lines < 1 || typeof isExpanded === 'undefined') {
-        return;
-    }
-    if (language) {
-        const selector = `.language-${language.toLowerCase()}`;
-        const childElement = element.querySelector(selector);
-        if (!childElement) {
-            return;
-        }
-        if (isExpanded) {
-            // Reset all truncation-related styles to their default values
-            childElement.style.removeProperty('-webkit-line-clamp');
-            childElement.style.removeProperty('display');
-            childElement.style.removeProperty('-webkit-box-orient');
-            childElement.style.removeProperty('overflow');
-        }
-        else {
-            childElement.style.setProperty('-webkit-line-clamp', lines.toString());
-            childElement.style.setProperty('display', '-webkit-box');
-            childElement.style.setProperty('-webkit-box-orient', 'vertical');
-            childElement.style.setProperty('overflow', 'hidden');
-        }
-    }
-};
-class ExpandableSectionForSyntaxHighlighter extends Component {
-    constructor(props) {
-        var _a;
-        super(props);
-        this.expandableContentRef = createRef();
-        /* eslint-disable-next-line */
-        this.observer = () => { };
-        this.checkToggleVisibility = () => {
-            var _a;
-            if ((_a = this.expandableContentRef) === null || _a === void 0 ? void 0 : _a.current) {
-                const maxLines = this.props.truncateMaxLines || parseInt(lineClamp.value);
-                const totalLines = this.expandableContentRef.current.scrollHeight /
-                    parseInt(getComputedStyle(this.expandableContentRef.current).lineHeight);
-                this.setState({
-                    hasToggle: totalLines > maxLines
-                });
-            }
-        };
-        this.resize = () => {
-            if (this.expandableContentRef.current) {
-                const { offsetWidth } = this.expandableContentRef.current;
-                if (this.state.previousWidth !== offsetWidth) {
-                    this.setState({ previousWidth: offsetWidth });
-                    this.checkToggleVisibility();
-                }
-            }
-        };
-        this.handleResize = debounce(this.resize, 250);
-        this.state = {
-            isExpanded: (_a = props.isExpanded) !== null && _a !== void 0 ? _a : false,
-            hasToggle: true,
-            previousWidth: undefined
-        };
-    }
-    componentDidMount() {
-        if (this.props.variant === ExpandableSectionVariant.truncate) {
-            const expandableContent = this.expandableContentRef.current;
-            if (expandableContent) {
-                this.setState({ previousWidth: expandableContent.offsetWidth });
-                this.observer = getResizeObserver(expandableContent, this.handleResize, false);
-                if (this.props.truncateMaxLines) {
-                    setLineClamp(expandableContent, this.props.truncateMaxLines, this.props.language, this.state.isExpanded);
-                }
-            }
-            this.checkToggleVisibility();
-        }
-    }
-    componentDidUpdate(prevProps) {
-        if (this.props.variant === ExpandableSectionVariant.truncate &&
-            (prevProps.truncateMaxLines !== this.props.truncateMaxLines ||
-                prevProps.children !== this.props.children ||
-                prevProps.isExpanded !== this.props.isExpanded)) {
-            const expandableContent = this.expandableContentRef.current;
-            setLineClamp(expandableContent, this.props.truncateMaxLines, this.props.language, this.props.isExpanded);
-            this.checkToggleVisibility();
-        }
-    }
-    componentWillUnmount() {
-        if (this.props.variant === ExpandableSectionVariant.truncate) {
-            this.observer();
-        }
-    }
-    render() {
-        const _a = this.props, { className, children, isExpanded, isDetached, displaySize, isWidthLimited, isIndented, contentId, toggleId, variant, 
-        // Gets rid of console error about it being on a DOM element
-        // eslint-disable-next-line
-        truncateMaxLines } = _a, props = __rest(_a, ["className", "children", "isExpanded", "isDetached", "displaySize", "isWidthLimited", "isIndented", "contentId", "toggleId", "variant", "truncateMaxLines"]);
-        if (isDetached && !toggleId) {
-            /* eslint-disable no-console */
-            console.warn('ExpandableSection: The toggleId value must be passed in and must match the toggleId of the ExpandableSectionToggle.');
-        }
-        const uniqueContentId = contentId || getUniqueId('expandable-section-content');
-        const uniqueToggleId = toggleId || getUniqueId('expandable-section-toggle');
-        return (_jsx("div", Object.assign({ className: css(styles.expandableSection, isExpanded && styles.modifiers.expanded, displaySize === 'lg' && styles.modifiers.displayLg, isWidthLimited && styles.modifiers.limitWidth, isIndented && styles.modifiers.indented, variant === ExpandableSectionVariant.truncate && styles.modifiers.truncate, className) }, props, { children: _jsx("div", { ref: this.expandableContentRef, className: css(styles.expandableSectionContent), hidden: variant !== ExpandableSectionVariant.truncate && !isExpanded, id: uniqueContentId, "aria-labelledby": uniqueToggleId, role: "region", children: children }) })));
-    }
-}
-ExpandableSectionForSyntaxHighlighter.displayName = 'ExpandableSection';
-ExpandableSectionForSyntaxHighlighter.defaultProps = {
-    className: '',
-    isDetached: false,
-    displaySize: 'default',
-    isWidthLimited: false,
-    isIndented: false,
-    variant: 'default'
-};
-export { ExpandableSectionForSyntaxHighlighter };

package/src/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.tsx

@@ -1,223 +0,0 @@
-import { Component, createRef } from 'react';
-import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section';
-import { css } from '@patternfly/react-styles';
-import lineClamp from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp';
-import { debounce, getResizeObserver, getUniqueId, PickOptional } from '@patternfly/react-core';
-
-export enum ExpandableSectionVariant {
-  default = 'default',
-  truncate = 'truncate'
-}
-
-/** The main expandable section component. */
-
-export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
-  /** Content rendered inside the expandable section. */
-  children?: React.ReactNode;
-  /** Additional classes added to the expandable section. */
-  className?: string;
-  /** Id of the content of the expandable section. When passing in the isDetached property, this
-   * property's value should match the contentId property of the expandable section toggle sub-component.
-   */
-  contentId?: string;
-  /** Id of the toggle of the expandable section, which provides an accessible name to the
-   * expandable section content via the aria-labelledby attribute. When the isDetached property
-   * is also passed in, the value of this property must match the toggleId property of the
-   * expandable section toggle sub-component.
-   */
-  toggleId?: string;
-  /** Display size variant. Set to "lg" for disclosure styling. */
-  displaySize?: 'default' | 'lg';
-  /** Indicates the expandable section has a detached toggle. */
-  isDetached?: boolean;
-  /** Flag to indicate if the content is expanded. */
-  isExpanded?: boolean;
-  /** Flag to indicate if the content is indented. */
-  isIndented?: boolean;
-  /** Flag to indicate the width of the component is limited. Set to "true" for disclosure styling. */
-  isWidthLimited?: boolean;
-  /** Truncates the expandable content to the specified number of lines when using the
-   * "truncate" variant.
-   */
-  truncateMaxLines?: number;
-  /** Determines the variant of the expandable section. When passing in "truncate" as the
-   * variant, the expandable content will be truncated after 3 lines by default.
-   */
-  variant?: 'default' | 'truncate';
-  language?: string;
-}
-
-interface ExpandableSectionState {
-  isExpanded: boolean;
-  hasToggle: boolean;
-  previousWidth: number | undefined;
-}
-
-const setLineClamp = (element: HTMLDivElement | null, lines?: number, language?: string, isExpanded?: boolean) => {
-  if (!element || !lines || lines < 1 || typeof isExpanded === 'undefined') {
-    return;
-  }
-
-  if (language) {
-    const selector = `.language-${language.toLowerCase()}`;
-    const childElement = element.querySelector(selector) as HTMLDivElement;
-
-    if (!childElement) {
-      return;
-    }
-    if (isExpanded) {
-      // Reset all truncation-related styles to their default values
-      childElement.style.removeProperty('-webkit-line-clamp');
-      childElement.style.removeProperty('display');
-      childElement.style.removeProperty('-webkit-box-orient');
-      childElement.style.removeProperty('overflow');
-    } else {
-      childElement.style.setProperty('-webkit-line-clamp', lines.toString());
-      childElement.style.setProperty('display', '-webkit-box');
-      childElement.style.setProperty('-webkit-box-orient', 'vertical');
-      childElement.style.setProperty('overflow', 'hidden');
-    }
-  }
-};
-
-class ExpandableSectionForSyntaxHighlighter extends Component<ExpandableSectionProps, ExpandableSectionState> {
-  static displayName = 'ExpandableSection';
-  constructor(props: ExpandableSectionProps) {
-    super(props);
-
-    this.state = {
-      isExpanded: props.isExpanded ?? false,
-      hasToggle: true,
-      previousWidth: undefined
-    };
-  }
-
-  expandableContentRef = createRef<HTMLDivElement>();
-  /* eslint-disable-next-line */
-  observer: any = () => {};
-
-  static defaultProps: PickOptional<ExpandableSectionProps> = {
-    className: '',
-    isDetached: false,
-    displaySize: 'default',
-    isWidthLimited: false,
-    isIndented: false,
-    variant: 'default'
-  };
-
-  componentDidMount() {
-    if (this.props.variant === ExpandableSectionVariant.truncate) {
-      const expandableContent = this.expandableContentRef.current;
-      if (expandableContent) {
-        this.setState({ previousWidth: expandableContent.offsetWidth });
-        this.observer = getResizeObserver(expandableContent, this.handleResize, false);
-
-        if (this.props.truncateMaxLines) {
-          setLineClamp(expandableContent, this.props.truncateMaxLines, this.props.language, this.state.isExpanded);
-        }
-      }
-
-      this.checkToggleVisibility();
-    }
-  }
-
-  componentDidUpdate(prevProps: ExpandableSectionProps) {
-    if (
-      this.props.variant === ExpandableSectionVariant.truncate &&
-      (prevProps.truncateMaxLines !== this.props.truncateMaxLines ||
-        prevProps.children !== this.props.children ||
-        prevProps.isExpanded !== this.props.isExpanded)
-    ) {
-      const expandableContent = this.expandableContentRef.current;
-      setLineClamp(expandableContent, this.props.truncateMaxLines, this.props.language, this.props.isExpanded);
-      this.checkToggleVisibility();
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.props.variant === ExpandableSectionVariant.truncate) {
-      this.observer();
-    }
-  }
-
-  checkToggleVisibility = () => {
-    if (this.expandableContentRef?.current) {
-      const maxLines = this.props.truncateMaxLines || parseInt(lineClamp.value);
-      const totalLines =
-        this.expandableContentRef.current.scrollHeight /
-        parseInt(getComputedStyle(this.expandableContentRef.current).lineHeight);
-
-      this.setState({
-        hasToggle: totalLines > maxLines
-      });
-    }
-  };
-
-  resize = () => {
-    if (this.expandableContentRef.current) {
-      const { offsetWidth } = this.expandableContentRef.current;
-      if (this.state.previousWidth !== offsetWidth) {
-        this.setState({ previousWidth: offsetWidth });
-        this.checkToggleVisibility();
-      }
-    }
-  };
-  handleResize = debounce(this.resize, 250);
-
-  render() {
-    const {
-      className,
-      children,
-      isExpanded,
-      isDetached,
-      displaySize,
-      isWidthLimited,
-      isIndented,
-      contentId,
-      toggleId,
-      variant,
-      // Gets rid of console error about it being on a DOM element
-      // eslint-disable-next-line
-      truncateMaxLines,
-      ...props
-    } = this.props;
-
-    if (isDetached && !toggleId) {
-      /* eslint-disable no-console */
-      console.warn(
-        'ExpandableSection: The toggleId value must be passed in and must match the toggleId of the ExpandableSectionToggle.'
-      );
-    }
-
-    const uniqueContentId = contentId || getUniqueId('expandable-section-content');
-    const uniqueToggleId = toggleId || getUniqueId('expandable-section-toggle');
-
-    return (
-      <div
-        className={css(
-          styles.expandableSection,
-          isExpanded && styles.modifiers.expanded,
-          displaySize === 'lg' && styles.modifiers.displayLg,
-          isWidthLimited && styles.modifiers.limitWidth,
-          isIndented && styles.modifiers.indented,
-          variant === ExpandableSectionVariant.truncate && styles.modifiers.truncate,
-          className
-        )}
-        {...props}
-      >
-        <div
-          ref={this.expandableContentRef}
-          className={css(styles.expandableSectionContent)}
-          hidden={variant !== ExpandableSectionVariant.truncate && !isExpanded}
-          id={uniqueContentId}
-          aria-labelledby={uniqueToggleId}
-          role="region"
-        >
-          {children}
-        </div>
-      </div>
-    );
-  }
-}
-
-export { ExpandableSectionForSyntaxHighlighter };