@promptbook/components 0.112.0-28 → 0.112.0-30

package/esm/index.es.js

@@ -39,7 +39,7 @@ const BOOK_LANGUAGE_VERSION = '2.0.0';
  * @generated
  * @see https://github.com/webgptorg/promptbook
  */
-const PROMPTBOOK_ENGINE_VERSION = '0.112.0-28';
+const PROMPTBOOK_ENGINE_VERSION = '0.112.0-30';
 /**
  * TODO: string_promptbook_version should be constrained to the all versions of Promptbook engine
  * Note: [💞] Ignore a discrepancy between file name and entity name
@@ -11369,7 +11369,11 @@ class UseCommitmentDefinition extends BaseCommitmentDefinition {
  *
  * @private internal constant for `aggregateUseCommitmentSystemMessages`
  */
-const AGGREGATED_USE_COMMITMENT_TYPES = ['USE BROWSER', 'USE SEARCH ENGINE', 'USE TIME'];
+const AGGREGATED_USE_COMMITMENT_TYPES = [
+    'USE BROWSER',
+    'USE SEARCH ENGINE',
+    'USE TIME',
+];
 /**
  * Prefix used for temporary in-system-message placeholders that preserve the first-occurrence position of aggregated `USE` sections.
  *
@@ -21675,7 +21679,7 @@ const DEFAULT_FEEDBACK_ERROR_MESSAGE = 'Failed to save feedback. Please try agai
  * @private component of `<Chat/>`
  */
 function useChatRatings(options) {
-    const { messages, onFeedback, feedbackMode, isMobile } = options;
+    const { messages, onFeedback, feedbackMode, feedbackTranslations, isMobile } = options;
     const [ratingModalOpen, setRatingModalOpen] = useState(false);
     const [selectedMessage, setSelectedMessage] = useState(null);
     const [messageRatings, setMessageRatings] = useState(new Map());
@@ -21718,7 +21722,7 @@ function useChatRatings(options) {
         };
     }, []);
     const submitRating = useCallback(async () => {
-        var _a;
+        var _a, _b, _c, _d, _e, _f;
         if (!selectedMessage) {
             return;
         }
@@ -21742,14 +21746,16 @@ function useChatRatings(options) {
                 const feedbackResponse = await onFeedback(feedbackData);
                 showFeedbackStatus({
                     message: (_a = feedbackResponse === null || feedbackResponse === void 0 ? void 0 : feedbackResponse.message) !== null && _a !== void 0 ? _a : (feedbackMode === 'report_issue'
-                        ? DEFAULT_REPORT_ISSUE_SUCCESS_MESSAGE
-                        : DEFAULT_FEEDBACK_SUCCESS_MESSAGE),
+                        ? (_b = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.reportIssueSuccessMessage) !== null && _b !== void 0 ? _b : DEFAULT_REPORT_ISSUE_SUCCESS_MESSAGE
+                        : (_c = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.feedbackSuccessMessage) !== null && _c !== void 0 ? _c : DEFAULT_FEEDBACK_SUCCESS_MESSAGE),
                     variant: 'success',
                 });
             }
             catch (error) {
                 console.error('Error submitting feedback:', error);
-                const message = error instanceof Error ? error.message : DEFAULT_FEEDBACK_ERROR_MESSAGE;
+                const message = error instanceof Error
+                    ? error.message
+                    : (_d = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.feedbackErrorMessage) !== null && _d !== void 0 ? _d : DEFAULT_FEEDBACK_ERROR_MESSAGE;
                 showFeedbackStatus({ message, variant: 'error' });
                 return;
             }
@@ -21764,15 +21770,26 @@ function useChatRatings(options) {
             });
             showFeedbackStatus({
                 message: feedbackMode === 'report_issue'
-                    ? DEFAULT_REPORT_ISSUE_SUCCESS_MESSAGE
-                    : DEFAULT_FEEDBACK_SUCCESS_MESSAGE,
+                    ? (_e = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.reportIssueSuccessMessage) !== null && _e !== void 0 ? _e : DEFAULT_REPORT_ISSUE_SUCCESS_MESSAGE
+                    : (_f = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.feedbackSuccessMessage) !== null && _f !== void 0 ? _f : DEFAULT_FEEDBACK_SUCCESS_MESSAGE,
                 variant: 'success',
             });
         }
         setRatingModalOpen(false);
         setTextRating('');
         setSelectedMessage(null);
-    }, [feedbackMode, messages, messageRatings, onFeedback, selectedMessage, showFeedbackStatus, textRating]);
+    }, [
+        feedbackMode,
+        feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.feedbackErrorMessage,
+        feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.feedbackSuccessMessage,
+        feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.reportIssueSuccessMessage,
+        messages,
+        messageRatings,
+        onFeedback,
+        selectedMessage,
+        showFeedbackStatus,
+        textRating,
+    ]);
     useEffect(() => {
         if (ratingModalOpen && isMobile) {
             document.body.style.overflow = 'hidden';
@@ -40288,7 +40305,7 @@ const ChatMessageItem = memo(
 //                                          Or make normal function from this?
 (props) => {
     var _a;
-    const { message, participant, participants, isLastMessage, onMessage, onActionButton, setExpandedMessageId, isExpanded, currentRating, handleRating, mode, isCopyButtonEnabled, isFeedbackEnabled, feedbackMode = 'stars', onCopy, onCreateAgent, teammates, teamAgentProfiles, onToolCallClick, onCitationClick, soundSystem, isSpeechPlaybackEnabled, elevenLabsVoiceId, } = props;
+    const { message, participant, participants, isLastMessage, onMessage, onActionButton, setExpandedMessageId, isExpanded, currentRating, handleRating, mode, isCopyButtonEnabled, isFeedbackEnabled, feedbackMode = 'stars', feedbackTranslations, onCopy, onCreateAgent, teammates, teamAgentProfiles, onToolCallClick, onCitationClick, soundSystem, isSpeechPlaybackEnabled, elevenLabsVoiceId, } = props;
     const { isComplete = true,
     // <- TODO: Destruct all `messages` properties like `isComplete`
      } = message;
@@ -40707,7 +40724,8 @@ const ChatMessageItem = memo(
                                     : () => {
                                         setExpandedMessageId(null);
                                         setLocalHoveredRating(0);
-                                    }, children: isReportIssueFeedbackMode ? (jsx("button", { type: "button", onClick: () => handleRating(message, 1), className: styles$5.feedbackIssueButton, "aria-label": "Report issue with this response", title: "Report issue", children: "\u26A0" })) : isExpanded ? ([1, 2, 3, 4, 5].map((star) => (jsx("span", { onClick: () => handleRating(message, star), onMouseEnter: () => setLocalHoveredRating(star), className: classNames(styles$5.ratingStar, star <= (localHoveredRating || currentRating || 0) && styles$5.active), style: {
+                                    }, children: isReportIssueFeedbackMode ? (jsx("button", { type: "button", onClick: () => handleRating(message, 1), className: styles$5.feedbackIssueButton, "aria-label": (feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.reportIssueButtonAriaLabel) ||
+                                        'Report issue with this response', title: (feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.reportIssueButtonTitle) || 'Report issue', children: "\u26A0" })) : isExpanded ? ([1, 2, 3, 4, 5].map((star) => (jsx("span", { onClick: () => handleRating(message, star), onMouseEnter: () => setLocalHoveredRating(star), className: classNames(styles$5.ratingStar, star <= (localHoveredRating || currentRating || 0) && styles$5.active), style: {
                                         '--star-inactive-color': mode === 'LIGHT' ? '#ccc' : '#555',
                                     }, children: "\u2B50" }, star)))) : (jsx("span", { onClick: () => handleRating(message, currentRating || 1), className: classNames(styles$5.ratingStar, currentRating && styles$5.active), style: {
                                         '--star-inactive-color': mode === 'LIGHT' ? '#888' : '#666',
@@ -40789,6 +40807,9 @@ const ChatMessageItem = memo(
     if (prev.feedbackMode !== next.feedbackMode) {
         return false;
     }
+    if (prev.feedbackTranslations !== next.feedbackTranslations) {
+        return false;
+    }
     if (prev.handleRating !== next.handleRating) {
         return false;
     }
@@ -40814,7 +40835,7 @@ ChatMessageItem.displayName = 'ChatMessageItem';
  * @private component of `<Chat/>`
  */
 function ChatMessageList(props) {
-    const { messages, participants, expandedMessageId, messageRatings, setExpandedMessageId, handleRating, mode, isCopyButtonEnabled, isFeedbackEnabled, feedbackMode, onCopy, onMessage, onActionButton, onCreateAgent, toolTitles, teammates, onToolCallClick, onCitationClick, soundSystem, isSpeechPlaybackEnabled, elevenLabsVoiceId, teamAgentProfiles, setChatMessagesElement, onScroll, chatMessagesClassName, hasActions, } = props;
+    const { messages, participants, expandedMessageId, messageRatings, setExpandedMessageId, handleRating, mode, isCopyButtonEnabled, isFeedbackEnabled, feedbackMode, feedbackTranslations, onCopy, onMessage, onActionButton, onCreateAgent, toolTitles, teammates, onToolCallClick, onCitationClick, soundSystem, isSpeechPlaybackEnabled, elevenLabsVoiceId, teamAgentProfiles, setChatMessagesElement, onScroll, chatMessagesClassName, hasActions, } = props;
     const firstMessage = messages[0];
     const firstMsgContent = (firstMessage === null || firstMessage === void 0 ? void 0 : firstMessage.content) || '';
     const firstMsgLines = firstMsgContent.split(/\r?\n/).length;
@@ -40826,7 +40847,7 @@ function ChatMessageList(props) {
                 const isLastMessage = index === messages.length - 1;
                 const isExpanded = expandedMessageId === message.id;
                 const currentRating = messageRatings.get(message.id || message.content /* <-[??] */) || 0;
-                return (jsx(ChatMessageItem, { message: message, participant: participant, participants: participants, isLastMessage: isLastMessage, onMessage: onMessage, onActionButton: onActionButton, setExpandedMessageId: setExpandedMessageId, isExpanded: isExpanded, currentRating: currentRating, handleRating: handleRating, mode: mode, isCopyButtonEnabled: isCopyButtonEnabled, isFeedbackEnabled: isFeedbackEnabled, feedbackMode: feedbackMode, onCopy: onCopy, onCreateAgent: onCreateAgent, toolTitles: toolTitles, teammates: teammates, teamAgentProfiles: teamAgentProfiles, onToolCallClick: onToolCallClick, onCitationClick: onCitationClick, soundSystem: soundSystem, isSpeechPlaybackEnabled: isSpeechPlaybackEnabled, elevenLabsVoiceId: elevenLabsVoiceId }, resolveRenderedMessageKey(message)));
+                return (jsx(ChatMessageItem, { message: message, participant: participant, participants: participants, isLastMessage: isLastMessage, onMessage: onMessage, onActionButton: onActionButton, setExpandedMessageId: setExpandedMessageId, isExpanded: isExpanded, currentRating: currentRating, handleRating: handleRating, mode: mode, isCopyButtonEnabled: isCopyButtonEnabled, isFeedbackEnabled: isFeedbackEnabled, feedbackMode: feedbackMode, feedbackTranslations: feedbackTranslations, onCopy: onCopy, onCreateAgent: onCreateAgent, toolTitles: toolTitles, teammates: teammates, teamAgentProfiles: teamAgentProfiles, onToolCallClick: onToolCallClick, onCitationClick: onCitationClick, soundSystem: soundSystem, isSpeechPlaybackEnabled: isSpeechPlaybackEnabled, elevenLabsVoiceId: elevenLabsVoiceId }, resolveRenderedMessageKey(message)));
             }), jsx("div", { style: { height: 100 } })] }));
 }
 /**
@@ -40851,7 +40872,8 @@ function resolveRenderedMessageKey(message) {
  * @private component of `<Chat/>`
  */
 function ChatRatingModal(props) {
-    const { isOpen, selectedMessage, postprocessedMessages, messages, hoveredRating, messageRatings, textRating, feedbackMode, mode, isMobile, onClose, setHoveredRating, setMessageRatings, setSelectedMessage, setTextRating, submitRating, } = props;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const { isOpen, selectedMessage, postprocessedMessages, messages, hoveredRating, messageRatings, textRating, feedbackMode, feedbackTranslations, mode, isMobile, onClose, setHoveredRating, setMessageRatings, setSelectedMessage, setTextRating, submitRating, } = props;
     if (!isOpen || !selectedMessage) {
         return null;
     }
@@ -40876,7 +40898,9 @@ function ChatRatingModal(props) {
             if (event.target === event.currentTarget && isMobile) {
                 onClose();
             }
-        }, children: jsxs("div", { className: styles$5.ratingModalContent, children: [jsx("h3", { children: isReportIssueMode ? 'Report issue' : 'Rate this response' }), !isReportIssueMode && (jsx("div", { className: styles$5.stars, children: [1, 2, 3, 4, 5].map((star) => (jsx("span", { onClick: () => setMessageRatings((previousRatings) => {
+        }, children: jsxs("div", { className: styles$5.ratingModalContent, children: [jsx("h3", { children: isReportIssueMode
+                        ? (_a = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.reportIssueModalTitle) !== null && _a !== void 0 ? _a : 'Report issue'
+                        : (_b = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.rateResponseModalTitle) !== null && _b !== void 0 ? _b : 'Rate this response' }), !isReportIssueMode && (jsx("div", { className: styles$5.stars, children: [1, 2, 3, 4, 5].map((star) => (jsx("span", { onClick: () => setMessageRatings((previousRatings) => {
                             const nextRatings = new Map(previousRatings);
                             nextRatings.set(selectedMessage.id || selectedMessage.content /* <-[??] */, star);
                             return nextRatings;
@@ -40889,11 +40913,21 @@ function ChatRatingModal(props) {
                                 : mode === 'LIGHT'
                                     ? '#ccc'
                                     : '#555',
-                        }, children: "\u2B50" }, star))) })), "Your question:", jsx("textarea", { readOnly: true, value: userQuestion, className: styles$5.ratingInput }), isReportIssueMode ? 'What should the answer include?' : 'Expected answer:', jsx("textarea", { placeholder: selectedMessage.content || 'Expected answer (optional)', defaultValue: selectedMessage.expectedAnswer || selectedMessage.content, onChange: (event) => {
+                        }, children: "\u2B50" }, star))) })), (_c = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.userQuestionLabel) !== null && _c !== void 0 ? _c : 'Your question:', jsx("textarea", { readOnly: true, value: userQuestion, className: styles$5.ratingInput }), isReportIssueMode
+                    ? (_d = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.reportIssueExpectedAnswerLabel) !== null && _d !== void 0 ? _d : 'What should the answer include?'
+                    : (_e = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.expectedAnswerLabel) !== null && _e !== void 0 ? _e : 'Expected answer:', jsx("textarea", { placeholder: selectedMessage.content ||
+                        (feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.expectedAnswerPlaceholder) ||
+                        'Expected answer (optional)', defaultValue: selectedMessage.expectedAnswer || selectedMessage.content, onChange: (event) => {
                         if (selectedMessage) {
                             setSelectedMessage({ ...selectedMessage, expectedAnswer: event.target.value });
                         }
-                    }, className: styles$5.ratingInput }), isReportIssueMode ? 'Issue details:' : 'Note:', jsx("textarea", { placeholder: isReportIssueMode ? 'Describe what went wrong (optional)' : 'Add a note (optional)', defaultValue: textRating, onChange: (event) => setTextRating(event.target.value), className: styles$5.ratingInput }), jsxs("div", { className: styles$5.ratingActions, children: [jsx("button", { onClick: onClose, children: "Cancel" }), jsx("button", { onClick: submitRating, children: isReportIssueMode ? 'Report issue' : 'Submit' })] })] }) }));
+                    }, className: styles$5.ratingInput }), isReportIssueMode
+                    ? (_f = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.reportIssueDetailsLabel) !== null && _f !== void 0 ? _f : 'Issue details:'
+                    : (_g = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.noteLabel) !== null && _g !== void 0 ? _g : 'Note:', jsx("textarea", { placeholder: isReportIssueMode
+                        ? (_h = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.reportIssueDetailsPlaceholder) !== null && _h !== void 0 ? _h : 'Describe what went wrong (optional)'
+                        : (_j = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.notePlaceholder) !== null && _j !== void 0 ? _j : 'Add a note (optional)', defaultValue: textRating, onChange: (event) => setTextRating(event.target.value), className: styles$5.ratingInput }), jsxs("div", { className: styles$5.ratingActions, children: [jsx("button", { onClick: onClose, children: (feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.cancelLabel) || 'Cancel' }), jsx("button", { onClick: submitRating, children: isReportIssueMode
+                                ? (_k = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.reportIssueSubmitLabel) !== null && _k !== void 0 ? _k : 'Report issue'
+                                : (_l = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.submitLabel) !== null && _l !== void 0 ? _l : 'Submit' })] })] }) }));
 }
 
 /**
@@ -42853,7 +42887,7 @@ function isLatestMessageVisible(chatMessagesElement, messageSelector) {
  * @public exported from `@promptbook/components`
  */
 function Chat(props) {
-    const { title = 'Chat', messages, onChange, onMessage, onActionButton, onReset, resetRequiresConfirmation = true, onFeedback, feedbackMode = 'stars', onFileUpload, speechRecognition, placeholderMessageContent, defaultMessage, enterBehavior, resolveEnterBehavior, children, className, style, isAiTextHumanizedAndPromptbookified = true, isVoiceCalling = false, isFocusedOnLoad, participants = [], extraActions, actionsContainer, saveFormats, isSaveButtonEnabled = true, isCopyButtonEnabled = true, buttonColor: buttonColorRaw, onUseTemplate, onCreateAgent, toolTitles, teammates, teamAgentProfiles, visual, effectConfigs, soundSystem, speechRecognitionLanguage, isSpeechPlaybackEnabled = true, elevenLabsVoiceId, } = props;
+    const { title = 'Chat', messages, onChange, onMessage, onActionButton, onReset, resetRequiresConfirmation = true, onFeedback, feedbackMode = 'stars', feedbackTranslations, onFileUpload, speechRecognition, placeholderMessageContent, defaultMessage, enterBehavior, resolveEnterBehavior, children, className, style, isAiTextHumanizedAndPromptbookified = true, isVoiceCalling = false, isFocusedOnLoad, participants = [], extraActions, actionsContainer, saveFormats, isSaveButtonEnabled = true, isCopyButtonEnabled = true, buttonColor: buttonColorRaw, onUseTemplate, onCreateAgent, toolTitles, teammates, teamAgentProfiles, visual, effectConfigs, soundSystem, speechRecognitionLanguage, isSpeechPlaybackEnabled = true, elevenLabsVoiceId, } = props;
     const buttonColor = useMemo(() => Color.from(buttonColorRaw || '#0066cc'), [buttonColorRaw]);
     const agentParticipant = useMemo(() => participants.find((participant) => participant.name === 'AGENT'), [participants]);
     const postprocessedMessages = useMemo(() => {
@@ -42924,7 +42958,13 @@ function Chat(props) {
     const shouldShowScrollToBottom = !isAutoScrolling && !isLatestMessageInView;
     const lastMessage = postprocessedMessages[postprocessedMessages.length - 1];
     const isStreamingAgentMessage = Boolean(lastMessage && lastMessage.sender !== 'USER' && !lastMessage.isComplete);
-    const { state: { ratingModalOpen, selectedMessage, messageRatings, textRating, hoveredRating, expandedMessageId, feedbackStatus, }, actions: { setRatingModalOpen, setSelectedMessage, setMessageRatings, setTextRating, setHoveredRating, setExpandedMessageId, handleRating, submitRating, }, } = useChatRatings({ messages, onFeedback, feedbackMode, isMobile: isMobileFromHook });
+    const { state: { ratingModalOpen, selectedMessage, messageRatings, textRating, hoveredRating, expandedMessageId, feedbackStatus, }, actions: { setRatingModalOpen, setSelectedMessage, setMessageRatings, setTextRating, setHoveredRating, setExpandedMessageId, handleRating, submitRating, }, } = useChatRatings({
+        messages,
+        onFeedback,
+        feedbackMode,
+        feedbackTranslations,
+        isMobile: isMobileFromHook,
+    });
     const [toolCallModalOpen, setToolCallModalOpen] = useState(false);
     const [selectedToolCallState, setSelectedToolCallState] = useState(null);
     const [citationModalOpen, setCitationModalOpen] = useState(false);
@@ -43023,7 +43063,7 @@ function Chat(props) {
     }, [postprocessedMessages, soundSystem]);
     return (jsxs(Fragment, { children: [feedbackStatus && (jsx("div", { className: classNames(styles$5.feedbackStatus, feedbackStatus.variant === 'success'
                     ? styles$5.feedbackStatusSuccess
-                    : styles$5.feedbackStatusError), "aria-live": "polite", role: "status", children: feedbackStatus.message })), effectConfigs && effectConfigs.length > 0 && (jsx(ChatEffectsSystem, { messages: postprocessedMessages, effectConfigs: effectConfigs, soundSystem: soundSystem })), jsx("div", { className: classNames(className, styles$5.Chat, visual === 'STANDALONE' && styles$5.standaloneVisual, visual === 'FULL_PAGE' && styles$5.fullPageVisual, getChatCssClassName('Chat'), chatCssClassNames.chat), style, children: jsxs("div", { className: classNames(className, styles$5.chatMainFlow, getChatCssClassName('chatMainFlow'), chatCssClassNames.chatMainFlow), children: [children && jsx("div", { className: classNames(styles$5.chatChildren), children: children }), shouldShowScrollToBottom && (jsx("div", { className: styles$5.scrollToBottomContainer, children: jsxs("div", { className: styles$5.scrollToBottomWrapper, children: [jsx(SolidArrowButton, { "data-button-type": "custom", direction: "down", iconSize: 33, className: classNames(styles$5.scrollToBottom, scrollToBottomCssClassName), onClick: handleButtonClick(scrollToBottom), "aria-label": ariaLabel, title: ariaLabel }), badgeLabel && (jsx("span", { className: styles$5.scrollToBottomBadge, "aria-live": "polite", role: "status", children: badgeLabel }))] }) })), isVoiceCalling && (jsx("div", { className: styles$5.voiceCallIndicatorBar, children: jsxs("div", { className: styles$5.voiceCallIndicator, children: [jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" }) }), jsx("span", { children: "Voice call active" }), jsx("div", { className: styles$5.voiceCallPulse })] }) })), jsx(ChatActionsBar, { actionsRef: actionsRef, actionsContainer: actionsContainer, messages: postprocessedMessages, participants: participants, title: title, onReset: onReset, resetRequiresConfirmation: resetRequiresConfirmation, onUseTemplate: onUseTemplate, extraActions: extraActions, saveFormats: saveFormats, isSaveButtonEnabled: isSaveButtonEnabled, shouldFadeActions: shouldFadeActions, shouldDisableActions: shouldDisableActions, onButtonClick: handleButtonClick }), jsx(ChatMessageList, { messages: postprocessedMessages, participants: participants, expandedMessageId: expandedMessageId, messageRatings: messageRatings, setExpandedMessageId: setExpandedMessageId, handleRating: handleRating, mode: mode, isCopyButtonEnabled: isCopyButtonEnabled, isFeedbackEnabled: isFeedbackEnabled, feedbackMode: feedbackMode, onCopy: handleCopy, onMessage: onMessage, onActionButton: onActionButton, onCreateAgent: onCreateAgent, toolTitles: toolTitles, teammates: teammates, teamAgentProfiles: teamAgentProfiles, soundSystem: soundSystem, onToolCallClick: (toolCall) => {
+                    : styles$5.feedbackStatusError), "aria-live": "polite", role: "status", children: feedbackStatus.message })), effectConfigs && effectConfigs.length > 0 && (jsx(ChatEffectsSystem, { messages: postprocessedMessages, effectConfigs: effectConfigs, soundSystem: soundSystem })), jsx("div", { className: classNames(className, styles$5.Chat, visual === 'STANDALONE' && styles$5.standaloneVisual, visual === 'FULL_PAGE' && styles$5.fullPageVisual, getChatCssClassName('Chat'), chatCssClassNames.chat), style, children: jsxs("div", { className: classNames(className, styles$5.chatMainFlow, getChatCssClassName('chatMainFlow'), chatCssClassNames.chatMainFlow), children: [children && jsx("div", { className: classNames(styles$5.chatChildren), children: children }), shouldShowScrollToBottom && (jsx("div", { className: styles$5.scrollToBottomContainer, children: jsxs("div", { className: styles$5.scrollToBottomWrapper, children: [jsx(SolidArrowButton, { "data-button-type": "custom", direction: "down", iconSize: 33, className: classNames(styles$5.scrollToBottom, scrollToBottomCssClassName), onClick: handleButtonClick(scrollToBottom), "aria-label": ariaLabel, title: ariaLabel }), badgeLabel && (jsx("span", { className: styles$5.scrollToBottomBadge, "aria-live": "polite", role: "status", children: badgeLabel }))] }) })), isVoiceCalling && (jsx("div", { className: styles$5.voiceCallIndicatorBar, children: jsxs("div", { className: styles$5.voiceCallIndicator, children: [jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" }) }), jsx("span", { children: "Voice call active" }), jsx("div", { className: styles$5.voiceCallPulse })] }) })), jsx(ChatActionsBar, { actionsRef: actionsRef, actionsContainer: actionsContainer, messages: postprocessedMessages, participants: participants, title: title, onReset: onReset, resetRequiresConfirmation: resetRequiresConfirmation, onUseTemplate: onUseTemplate, extraActions: extraActions, saveFormats: saveFormats, isSaveButtonEnabled: isSaveButtonEnabled, shouldFadeActions: shouldFadeActions, shouldDisableActions: shouldDisableActions, onButtonClick: handleButtonClick }), jsx(ChatMessageList, { messages: postprocessedMessages, participants: participants, expandedMessageId: expandedMessageId, messageRatings: messageRatings, setExpandedMessageId: setExpandedMessageId, handleRating: handleRating, mode: mode, isCopyButtonEnabled: isCopyButtonEnabled, isFeedbackEnabled: isFeedbackEnabled, feedbackMode: feedbackMode, feedbackTranslations: feedbackTranslations, onCopy: handleCopy, onMessage: onMessage, onActionButton: onActionButton, onCreateAgent: onCreateAgent, toolTitles: toolTitles, teammates: teammates, teamAgentProfiles: teamAgentProfiles, soundSystem: soundSystem, onToolCallClick: (toolCall) => {
                                 setSelectedToolCallState({
                                     identity: getToolCallIdentity(toolCall),
                                     fallbackToolCall: toolCall,
@@ -43035,7 +43075,7 @@ function Chat(props) {
                             }, setChatMessagesElement: setChatMessagesElement, onScroll: handleChatScroll, isSpeechPlaybackEnabled: isSpeechPlaybackEnabled, elevenLabsVoiceId: elevenLabsVoiceId, chatMessagesClassName: classNames(getChatCssClassName('chatMessages'), chatCssClassNames.chatMessages), hasActions: hasActions }), onMessage && (jsx(ChatInputArea, { onMessage: onMessage, onChange: onChange, onFileUpload: onFileUpload, speechRecognition: speechRecognition, speechRecognitionLanguage: speechRecognitionLanguage, defaultMessage: defaultMessage, enterBehavior: enterBehavior, resolveEnterBehavior: resolveEnterBehavior, placeholderMessageContent: placeholderMessageContent, isFocusedOnLoad: isFocusedOnLoad, isMobile: isMobileFromHook, isVoiceCalling: isVoiceCalling, participants: participants, buttonColor: buttonColor, soundSystem: soundSystem, onButtonClick: handleButtonClick, chatInputClassName: classNames(getChatCssClassName('chatInput'), chatCssClassNames.chatInput) }))] }) }), jsx(ChatToolCallModal, { isOpen: toolCallModalOpen, toolCall: selectedToolCall, toolCallIdentity: (selectedToolCallState === null || selectedToolCallState === void 0 ? void 0 : selectedToolCallState.identity) || null, onClose: () => {
                     setToolCallModalOpen(false);
                     setSelectedToolCallState(null);
-                }, toolTitles: toolTitles, agentParticipant: agentParticipant, buttonColor: buttonColor, teamAgentProfiles: teamAgentProfiles }), jsx(ChatCitationModal, { isOpen: citationModalOpen, citation: selectedCitation, participants: participants, soundSystem: soundSystem, onClose: () => setCitationModalOpen(false) }), jsx(ChatRatingModal, { isOpen: ratingModalOpen, selectedMessage: selectedMessage, postprocessedMessages: postprocessedMessages, messages: messages, hoveredRating: hoveredRating, messageRatings: messageRatings, textRating: textRating, feedbackMode: feedbackMode, mode: mode, isMobile: isMobileFromHook, onClose: () => setRatingModalOpen(false), setHoveredRating: setHoveredRating, setMessageRatings: setMessageRatings, setSelectedMessage: setSelectedMessage, setTextRating: setTextRating, submitRating: submitRating })] }));
+                }, toolTitles: toolTitles, agentParticipant: agentParticipant, buttonColor: buttonColor, teamAgentProfiles: teamAgentProfiles }), jsx(ChatCitationModal, { isOpen: citationModalOpen, citation: selectedCitation, participants: participants, soundSystem: soundSystem, onClose: () => setCitationModalOpen(false) }), jsx(ChatRatingModal, { isOpen: ratingModalOpen, selectedMessage: selectedMessage, postprocessedMessages: postprocessedMessages, messages: messages, hoveredRating: hoveredRating, messageRatings: messageRatings, textRating: textRating, feedbackMode: feedbackMode, feedbackTranslations: feedbackTranslations, mode: mode, isMobile: isMobileFromHook, onClose: () => setRatingModalOpen(false), setHoveredRating: setHoveredRating, setMessageRatings: setMessageRatings, setSelectedMessage: setSelectedMessage, setTextRating: setTextRating, submitRating: submitRating })] }));
 }
 
 /**