@promptbook/components 0.112.0-28 → 0.112.0-30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -17,6 +17,7 @@ import type { AgentChatProps } from '../book-components/Chat/AgentChat/AgentChat
17
17
  import { Chat } from '../book-components/Chat/Chat/Chat';
18
18
  import type { ChatFeedbackResponse } from '../book-components/Chat/Chat/ChatProps';
19
19
  import type { ChatFeedbackMode } from '../book-components/Chat/Chat/ChatProps';
20
+ import type { ChatFeedbackTranslations } from '../book-components/Chat/Chat/ChatProps';
20
21
  import type { ChatSoundSystem } from '../book-components/Chat/Chat/ChatProps';
21
22
  import type { ChatProps } from '../book-components/Chat/Chat/ChatProps';
22
23
  import { ChatSoundToggle } from '../book-components/Chat/Chat/ChatSoundToggle';
@@ -94,6 +95,7 @@ export type { AgentChatProps };
94
95
  export { Chat };
95
96
  export type { ChatFeedbackResponse };
96
97
  export type { ChatFeedbackMode };
98
+ export type { ChatFeedbackTranslations };
97
99
  export type { ChatSoundSystem };
98
100
  export type { ChatProps };
99
101
  export { ChatSoundToggle };
@@ -18,6 +18,7 @@ import type { AgentChipData } from '../book-components/Chat/AgentChip/AgentChip'
18
18
  import type { AgentChipProps } from '../book-components/Chat/AgentChip/AgentChip';
19
19
  import type { ChatFeedbackResponse } from '../book-components/Chat/Chat/ChatProps';
20
20
  import type { ChatFeedbackMode } from '../book-components/Chat/Chat/ChatProps';
21
+ import type { ChatFeedbackTranslations } from '../book-components/Chat/Chat/ChatProps';
21
22
  import type { ChatSoundSystem } from '../book-components/Chat/Chat/ChatProps';
22
23
  import type { ChatProps } from '../book-components/Chat/Chat/ChatProps';
23
24
  import type { ChatSoundToggleProps } from '../book-components/Chat/Chat/ChatSoundToggle';
@@ -442,6 +443,7 @@ export type { AgentChipData };
442
443
  export type { AgentChipProps };
443
444
  export type { ChatFeedbackResponse };
444
445
  export type { ChatFeedbackMode };
446
+ export type { ChatFeedbackTranslations };
445
447
  export type { ChatSoundSystem };
446
448
  export type { ChatProps };
447
449
  export type { ChatSoundToggleProps };
@@ -30,6 +30,10 @@ type ChatMessageItemProps = Pick<ChatProps, 'onMessage' | 'onActionButton' | 'pa
30
30
  * Chooses which feedback controls should be rendered.
31
31
  */
32
32
  feedbackMode?: ChatProps['feedbackMode'];
33
+ /**
34
+ * Optional localized labels used by feedback controls.
35
+ */
36
+ feedbackTranslations?: ChatProps['feedbackTranslations'];
33
37
  /**
34
38
  * Called when the copy button is pressed.
35
39
  */
@@ -24,6 +24,10 @@ export type ChatMessageListProps = {
24
24
  * Chooses which feedback controls should be rendered.
25
25
  */
26
26
  feedbackMode?: ChatProps['feedbackMode'];
27
+ /**
28
+ * Optional localized labels used by feedback controls.
29
+ */
30
+ feedbackTranslations?: ChatProps['feedbackTranslations'];
27
31
  onCopy?: () => void;
28
32
  onMessage?: (messageContent: string) => Promisable<void>;
29
33
  onActionButton?: ChatProps['onActionButton'];
@@ -24,6 +24,85 @@ export type ChatFeedbackResponse = {
24
24
  * @public exported from `@promptbook/components`
25
25
  */
26
26
  export type ChatFeedbackMode = 'off' | 'stars' | 'report_issue';
27
+ /**
28
+ * Optional text overrides for feedback UI copy.
29
+ *
30
+ * @public exported from `@promptbook/components`
31
+ */
32
+ export type ChatFeedbackTranslations = {
33
+ /**
34
+ * Tooltip shown on the report-issue quick action button.
35
+ */
36
+ readonly reportIssueButtonTitle?: string;
37
+ /**
38
+ * Accessible label shown on the report-issue quick action button.
39
+ */
40
+ readonly reportIssueButtonAriaLabel?: string;
41
+ /**
42
+ * Modal heading shown when user reports an issue.
43
+ */
44
+ readonly reportIssueModalTitle?: string;
45
+ /**
46
+ * Modal heading shown when user rates a response with stars.
47
+ */
48
+ readonly rateResponseModalTitle?: string;
49
+ /**
50
+ * Label shown above the original user question preview.
51
+ */
52
+ readonly userQuestionLabel?: string;
53
+ /**
54
+ * Label for expected-answer field in report-issue mode.
55
+ */
56
+ readonly reportIssueExpectedAnswerLabel?: string;
57
+ /**
58
+ * Label for expected-answer field in stars mode.
59
+ */
60
+ readonly expectedAnswerLabel?: string;
61
+ /**
62
+ * Placeholder for expected-answer input.
63
+ */
64
+ readonly expectedAnswerPlaceholder?: string;
65
+ /**
66
+ * Label for free-form issue details in report-issue mode.
67
+ */
68
+ readonly reportIssueDetailsLabel?: string;
69
+ /**
70
+ * Label for free-form note input in stars mode.
71
+ */
72
+ readonly noteLabel?: string;
73
+ /**
74
+ * Placeholder for free-form issue details input.
75
+ */
76
+ readonly reportIssueDetailsPlaceholder?: string;
77
+ /**
78
+ * Placeholder for free-form note input.
79
+ */
80
+ readonly notePlaceholder?: string;
81
+ /**
82
+ * Cancel button label shown in the feedback modal.
83
+ */
84
+ readonly cancelLabel?: string;
85
+ /**
86
+ * Submit button label shown in report-issue mode.
87
+ */
88
+ readonly reportIssueSubmitLabel?: string;
89
+ /**
90
+ * Submit button label shown in stars mode.
91
+ */
92
+ readonly submitLabel?: string;
93
+ /**
94
+ * Toast message shown when generic feedback is stored.
95
+ */
96
+ readonly feedbackSuccessMessage?: string;
97
+ /**
98
+ * Toast message shown when issue report is stored.
99
+ */
100
+ readonly reportIssueSuccessMessage?: string;
101
+ /**
102
+ * Toast message shown when feedback storage fails.
103
+ */
104
+ readonly feedbackErrorMessage?: string;
105
+ };
27
106
  /**
28
107
  * Interface for sound system that can be passed to Chat component
29
108
  * This allows the chat to trigger sounds without tight coupling
@@ -305,6 +384,10 @@ export type ChatProps = {
305
384
  * @default 'stars'
306
385
  */
307
386
  readonly feedbackMode?: ChatFeedbackMode;
387
+ /**
388
+ * Optional localized feedback labels for buttons, modal copy, and status toasts.
389
+ */
390
+ readonly feedbackTranslations?: ChatFeedbackTranslations;
308
391
  /**
309
392
  * Optional callback for handling file uploads
310
393
  * When provided, enables file upload functionality via drag-and-drop and file button
@@ -1,6 +1,6 @@
1
1
  import type { id } from '../../../types/typeAliases';
2
2
  import type { ChatMessage } from '../types/ChatMessage';
3
- import type { ChatFeedbackMode } from './ChatProps';
3
+ import type { ChatFeedbackMode, ChatProps } from './ChatProps';
4
4
  /**
5
5
  * Props for the rating modal used in Chat.
6
6
  *
@@ -18,6 +18,10 @@ export type ChatRatingModalProps = {
18
18
  * Chooses which feedback flow the modal should render.
19
19
  */
20
20
  feedbackMode: ChatFeedbackMode;
21
+ /**
22
+ * Optional localized labels used by feedback controls.
23
+ */
24
+ feedbackTranslations?: ChatProps['feedbackTranslations'];
21
25
  mode: 'LIGHT' | 'DARK';
22
26
  isMobile: boolean;
23
27
  onClose: () => void;
@@ -1,7 +1,7 @@
1
1
  import type { Promisable } from 'type-fest';
2
2
  import type { id } from '../../../types/typeAliases';
3
3
  import type { ChatMessage } from '../types/ChatMessage';
4
- import type { ChatFeedbackMode, ChatFeedbackResponse } from '../Chat/ChatProps';
4
+ import type { ChatFeedbackMode, ChatFeedbackResponse, ChatProps } from '../Chat/ChatProps';
5
5
  /**
6
6
  * Input parameters for the chat rating hook.
7
7
  *
@@ -27,6 +27,10 @@ export type UseChatRatingsOptions = {
27
27
  * Feedback mode currently used by the chat UI.
28
28
  */
29
29
  feedbackMode: ChatFeedbackMode;
30
+ /**
31
+ * Optional localized labels and status messages used by the feedback UI.
32
+ */
33
+ feedbackTranslations?: ChatProps['feedbackTranslations'];
30
34
  /**
31
35
  * Whether the UI should apply mobile-specific behavior.
32
36
  */
@@ -15,7 +15,7 @@ export declare const BOOK_LANGUAGE_VERSION: string_semantic_version;
15
15
  export declare const PROMPTBOOK_ENGINE_VERSION: string_promptbook_version;
16
16
  /**
17
17
  * Represents the version string of the Promptbook engine.
18
- * It follows semantic versioning (e.g., `0.112.0-27`).
18
+ * It follows semantic versioning (e.g., `0.112.0-29`).
19
19
  *
20
20
  * @generated
21
21
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@promptbook/components",
3
- "version": "0.112.0-28",
3
+ "version": "0.112.0-30",
4
4
  "description": "Promptbook: Turn your company's scattered knowledge into AI ready books",
5
5
  "private": false,
6
6
  "sideEffects": false,
package/umd/index.umd.js CHANGED
@@ -30,7 +30,7 @@
30
30
  * @generated
31
31
  * @see https://github.com/webgptorg/promptbook
32
32
  */
33
- const PROMPTBOOK_ENGINE_VERSION = '0.112.0-28';
33
+ const PROMPTBOOK_ENGINE_VERSION = '0.112.0-30';
34
34
  /**
35
35
  * TODO: string_promptbook_version should be constrained to the all versions of Promptbook engine
36
36
  * Note: [💞] Ignore a discrepancy between file name and entity name
@@ -11360,7 +11360,11 @@
11360
11360
  *
11361
11361
  * @private internal constant for `aggregateUseCommitmentSystemMessages`
11362
11362
  */
11363
- const AGGREGATED_USE_COMMITMENT_TYPES = ['USE BROWSER', 'USE SEARCH ENGINE', 'USE TIME'];
11363
+ const AGGREGATED_USE_COMMITMENT_TYPES = [
11364
+ 'USE BROWSER',
11365
+ 'USE SEARCH ENGINE',
11366
+ 'USE TIME',
11367
+ ];
11364
11368
  /**
11365
11369
  * Prefix used for temporary in-system-message placeholders that preserve the first-occurrence position of aggregated `USE` sections.
11366
11370
  *
@@ -21666,7 +21670,7 @@
21666
21670
  * @private component of `<Chat/>`
21667
21671
  */
21668
21672
  function useChatRatings(options) {
21669
- const { messages, onFeedback, feedbackMode, isMobile } = options;
21673
+ const { messages, onFeedback, feedbackMode, feedbackTranslations, isMobile } = options;
21670
21674
  const [ratingModalOpen, setRatingModalOpen] = react.useState(false);
21671
21675
  const [selectedMessage, setSelectedMessage] = react.useState(null);
21672
21676
  const [messageRatings, setMessageRatings] = react.useState(new Map());
@@ -21709,7 +21713,7 @@
21709
21713
  };
21710
21714
  }, []);
21711
21715
  const submitRating = react.useCallback(async () => {
21712
- var _a;
21716
+ var _a, _b, _c, _d, _e, _f;
21713
21717
  if (!selectedMessage) {
21714
21718
  return;
21715
21719
  }
@@ -21733,14 +21737,16 @@
21733
21737
  const feedbackResponse = await onFeedback(feedbackData);
21734
21738
  showFeedbackStatus({
21735
21739
  message: (_a = feedbackResponse === null || feedbackResponse === void 0 ? void 0 : feedbackResponse.message) !== null && _a !== void 0 ? _a : (feedbackMode === 'report_issue'
21736
- ? DEFAULT_REPORT_ISSUE_SUCCESS_MESSAGE
21737
- : DEFAULT_FEEDBACK_SUCCESS_MESSAGE),
21740
+ ? (_b = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.reportIssueSuccessMessage) !== null && _b !== void 0 ? _b : DEFAULT_REPORT_ISSUE_SUCCESS_MESSAGE
21741
+ : (_c = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.feedbackSuccessMessage) !== null && _c !== void 0 ? _c : DEFAULT_FEEDBACK_SUCCESS_MESSAGE),
21738
21742
  variant: 'success',
21739
21743
  });
21740
21744
  }
21741
21745
  catch (error) {
21742
21746
  console.error('Error submitting feedback:', error);
21743
- const message = error instanceof Error ? error.message : DEFAULT_FEEDBACK_ERROR_MESSAGE;
21747
+ const message = error instanceof Error
21748
+ ? error.message
21749
+ : (_d = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.feedbackErrorMessage) !== null && _d !== void 0 ? _d : DEFAULT_FEEDBACK_ERROR_MESSAGE;
21744
21750
  showFeedbackStatus({ message, variant: 'error' });
21745
21751
  return;
21746
21752
  }
@@ -21755,15 +21761,26 @@
21755
21761
  });
21756
21762
  showFeedbackStatus({
21757
21763
  message: feedbackMode === 'report_issue'
21758
- ? DEFAULT_REPORT_ISSUE_SUCCESS_MESSAGE
21759
- : DEFAULT_FEEDBACK_SUCCESS_MESSAGE,
21764
+ ? (_e = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.reportIssueSuccessMessage) !== null && _e !== void 0 ? _e : DEFAULT_REPORT_ISSUE_SUCCESS_MESSAGE
21765
+ : (_f = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.feedbackSuccessMessage) !== null && _f !== void 0 ? _f : DEFAULT_FEEDBACK_SUCCESS_MESSAGE,
21760
21766
  variant: 'success',
21761
21767
  });
21762
21768
  }
21763
21769
  setRatingModalOpen(false);
21764
21770
  setTextRating('');
21765
21771
  setSelectedMessage(null);
21766
- }, [feedbackMode, messages, messageRatings, onFeedback, selectedMessage, showFeedbackStatus, textRating]);
21772
+ }, [
21773
+ feedbackMode,
21774
+ feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.feedbackErrorMessage,
21775
+ feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.feedbackSuccessMessage,
21776
+ feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.reportIssueSuccessMessage,
21777
+ messages,
21778
+ messageRatings,
21779
+ onFeedback,
21780
+ selectedMessage,
21781
+ showFeedbackStatus,
21782
+ textRating,
21783
+ ]);
21767
21784
  react.useEffect(() => {
21768
21785
  if (ratingModalOpen && isMobile) {
21769
21786
  document.body.style.overflow = 'hidden';
@@ -40279,7 +40296,7 @@
40279
40296
  // Or make normal function from this?
40280
40297
  (props) => {
40281
40298
  var _a;
40282
- 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;
40299
+ 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;
40283
40300
  const { isComplete = true,
40284
40301
  // <- TODO: Destruct all `messages` properties like `isComplete`
40285
40302
  } = message;
@@ -40698,7 +40715,8 @@
40698
40715
  : () => {
40699
40716
  setExpandedMessageId(null);
40700
40717
  setLocalHoveredRating(0);
40701
- }, children: isReportIssueFeedbackMode ? (jsxRuntime.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) => (jsxRuntime.jsx("span", { onClick: () => handleRating(message, star), onMouseEnter: () => setLocalHoveredRating(star), className: classNames(styles$5.ratingStar, star <= (localHoveredRating || currentRating || 0) && styles$5.active), style: {
40718
+ }, children: isReportIssueFeedbackMode ? (jsxRuntime.jsx("button", { type: "button", onClick: () => handleRating(message, 1), className: styles$5.feedbackIssueButton, "aria-label": (feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.reportIssueButtonAriaLabel) ||
40719
+ '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) => (jsxRuntime.jsx("span", { onClick: () => handleRating(message, star), onMouseEnter: () => setLocalHoveredRating(star), className: classNames(styles$5.ratingStar, star <= (localHoveredRating || currentRating || 0) && styles$5.active), style: {
40702
40720
  '--star-inactive-color': mode === 'LIGHT' ? '#ccc' : '#555',
40703
40721
  }, children: "\u2B50" }, star)))) : (jsxRuntime.jsx("span", { onClick: () => handleRating(message, currentRating || 1), className: classNames(styles$5.ratingStar, currentRating && styles$5.active), style: {
40704
40722
  '--star-inactive-color': mode === 'LIGHT' ? '#888' : '#666',
@@ -40780,6 +40798,9 @@
40780
40798
  if (prev.feedbackMode !== next.feedbackMode) {
40781
40799
  return false;
40782
40800
  }
40801
+ if (prev.feedbackTranslations !== next.feedbackTranslations) {
40802
+ return false;
40803
+ }
40783
40804
  if (prev.handleRating !== next.handleRating) {
40784
40805
  return false;
40785
40806
  }
@@ -40805,7 +40826,7 @@
40805
40826
  * @private component of `<Chat/>`
40806
40827
  */
40807
40828
  function ChatMessageList(props) {
40808
- 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;
40829
+ 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;
40809
40830
  const firstMessage = messages[0];
40810
40831
  const firstMsgContent = (firstMessage === null || firstMessage === void 0 ? void 0 : firstMessage.content) || '';
40811
40832
  const firstMsgLines = firstMsgContent.split(/\r?\n/).length;
@@ -40817,7 +40838,7 @@
40817
40838
  const isLastMessage = index === messages.length - 1;
40818
40839
  const isExpanded = expandedMessageId === message.id;
40819
40840
  const currentRating = messageRatings.get(message.id || message.content /* <-[??] */) || 0;
40820
- return (jsxRuntime.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)));
40841
+ return (jsxRuntime.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)));
40821
40842
  }), jsxRuntime.jsx("div", { style: { height: 100 } })] }));
40822
40843
  }
40823
40844
  /**
@@ -40842,7 +40863,8 @@
40842
40863
  * @private component of `<Chat/>`
40843
40864
  */
40844
40865
  function ChatRatingModal(props) {
40845
- const { isOpen, selectedMessage, postprocessedMessages, messages, hoveredRating, messageRatings, textRating, feedbackMode, mode, isMobile, onClose, setHoveredRating, setMessageRatings, setSelectedMessage, setTextRating, submitRating, } = props;
40866
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
40867
+ const { isOpen, selectedMessage, postprocessedMessages, messages, hoveredRating, messageRatings, textRating, feedbackMode, feedbackTranslations, mode, isMobile, onClose, setHoveredRating, setMessageRatings, setSelectedMessage, setTextRating, submitRating, } = props;
40846
40868
  if (!isOpen || !selectedMessage) {
40847
40869
  return null;
40848
40870
  }
@@ -40867,7 +40889,9 @@
40867
40889
  if (event.target === event.currentTarget && isMobile) {
40868
40890
  onClose();
40869
40891
  }
40870
- }, children: jsxRuntime.jsxs("div", { className: styles$5.ratingModalContent, children: [jsxRuntime.jsx("h3", { children: isReportIssueMode ? 'Report issue' : 'Rate this response' }), !isReportIssueMode && (jsxRuntime.jsx("div", { className: styles$5.stars, children: [1, 2, 3, 4, 5].map((star) => (jsxRuntime.jsx("span", { onClick: () => setMessageRatings((previousRatings) => {
40892
+ }, children: jsxRuntime.jsxs("div", { className: styles$5.ratingModalContent, children: [jsxRuntime.jsx("h3", { children: isReportIssueMode
40893
+ ? (_a = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.reportIssueModalTitle) !== null && _a !== void 0 ? _a : 'Report issue'
40894
+ : (_b = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.rateResponseModalTitle) !== null && _b !== void 0 ? _b : 'Rate this response' }), !isReportIssueMode && (jsxRuntime.jsx("div", { className: styles$5.stars, children: [1, 2, 3, 4, 5].map((star) => (jsxRuntime.jsx("span", { onClick: () => setMessageRatings((previousRatings) => {
40871
40895
  const nextRatings = new Map(previousRatings);
40872
40896
  nextRatings.set(selectedMessage.id || selectedMessage.content /* <-[??] */, star);
40873
40897
  return nextRatings;
@@ -40880,11 +40904,21 @@
40880
40904
  : mode === 'LIGHT'
40881
40905
  ? '#ccc'
40882
40906
  : '#555',
40883
- }, children: "\u2B50" }, star))) })), "Your question:", jsxRuntime.jsx("textarea", { readOnly: true, value: userQuestion, className: styles$5.ratingInput }), isReportIssueMode ? 'What should the answer include?' : 'Expected answer:', jsxRuntime.jsx("textarea", { placeholder: selectedMessage.content || 'Expected answer (optional)', defaultValue: selectedMessage.expectedAnswer || selectedMessage.content, onChange: (event) => {
40907
+ }, children: "\u2B50" }, star))) })), (_c = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.userQuestionLabel) !== null && _c !== void 0 ? _c : 'Your question:', jsxRuntime.jsx("textarea", { readOnly: true, value: userQuestion, className: styles$5.ratingInput }), isReportIssueMode
40908
+ ? (_d = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.reportIssueExpectedAnswerLabel) !== null && _d !== void 0 ? _d : 'What should the answer include?'
40909
+ : (_e = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.expectedAnswerLabel) !== null && _e !== void 0 ? _e : 'Expected answer:', jsxRuntime.jsx("textarea", { placeholder: selectedMessage.content ||
40910
+ (feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.expectedAnswerPlaceholder) ||
40911
+ 'Expected answer (optional)', defaultValue: selectedMessage.expectedAnswer || selectedMessage.content, onChange: (event) => {
40884
40912
  if (selectedMessage) {
40885
40913
  setSelectedMessage({ ...selectedMessage, expectedAnswer: event.target.value });
40886
40914
  }
40887
- }, className: styles$5.ratingInput }), isReportIssueMode ? 'Issue details:' : 'Note:', jsxRuntime.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 }), jsxRuntime.jsxs("div", { className: styles$5.ratingActions, children: [jsxRuntime.jsx("button", { onClick: onClose, children: "Cancel" }), jsxRuntime.jsx("button", { onClick: submitRating, children: isReportIssueMode ? 'Report issue' : 'Submit' })] })] }) }));
40915
+ }, className: styles$5.ratingInput }), isReportIssueMode
40916
+ ? (_f = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.reportIssueDetailsLabel) !== null && _f !== void 0 ? _f : 'Issue details:'
40917
+ : (_g = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.noteLabel) !== null && _g !== void 0 ? _g : 'Note:', jsxRuntime.jsx("textarea", { placeholder: isReportIssueMode
40918
+ ? (_h = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.reportIssueDetailsPlaceholder) !== null && _h !== void 0 ? _h : 'Describe what went wrong (optional)'
40919
+ : (_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 }), jsxRuntime.jsxs("div", { className: styles$5.ratingActions, children: [jsxRuntime.jsx("button", { onClick: onClose, children: (feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.cancelLabel) || 'Cancel' }), jsxRuntime.jsx("button", { onClick: submitRating, children: isReportIssueMode
40920
+ ? (_k = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.reportIssueSubmitLabel) !== null && _k !== void 0 ? _k : 'Report issue'
40921
+ : (_l = feedbackTranslations === null || feedbackTranslations === void 0 ? void 0 : feedbackTranslations.submitLabel) !== null && _l !== void 0 ? _l : 'Submit' })] })] }) }));
40888
40922
  }
40889
40923
 
40890
40924
  /**
@@ -42844,7 +42878,7 @@
42844
42878
  * @public exported from `@promptbook/components`
42845
42879
  */
42846
42880
  function Chat(props) {
42847
- 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;
42881
+ 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;
42848
42882
  const buttonColor = react.useMemo(() => Color.from(buttonColorRaw || '#0066cc'), [buttonColorRaw]);
42849
42883
  const agentParticipant = react.useMemo(() => participants.find((participant) => participant.name === 'AGENT'), [participants]);
42850
42884
  const postprocessedMessages = react.useMemo(() => {
@@ -42915,7 +42949,13 @@
42915
42949
  const shouldShowScrollToBottom = !isAutoScrolling && !isLatestMessageInView;
42916
42950
  const lastMessage = postprocessedMessages[postprocessedMessages.length - 1];
42917
42951
  const isStreamingAgentMessage = Boolean(lastMessage && lastMessage.sender !== 'USER' && !lastMessage.isComplete);
42918
- const { state: { ratingModalOpen, selectedMessage, messageRatings, textRating, hoveredRating, expandedMessageId, feedbackStatus, }, actions: { setRatingModalOpen, setSelectedMessage, setMessageRatings, setTextRating, setHoveredRating, setExpandedMessageId, handleRating, submitRating, }, } = useChatRatings({ messages, onFeedback, feedbackMode, isMobile: isMobileFromHook });
42952
+ const { state: { ratingModalOpen, selectedMessage, messageRatings, textRating, hoveredRating, expandedMessageId, feedbackStatus, }, actions: { setRatingModalOpen, setSelectedMessage, setMessageRatings, setTextRating, setHoveredRating, setExpandedMessageId, handleRating, submitRating, }, } = useChatRatings({
42953
+ messages,
42954
+ onFeedback,
42955
+ feedbackMode,
42956
+ feedbackTranslations,
42957
+ isMobile: isMobileFromHook,
42958
+ });
42919
42959
  const [toolCallModalOpen, setToolCallModalOpen] = react.useState(false);
42920
42960
  const [selectedToolCallState, setSelectedToolCallState] = react.useState(null);
42921
42961
  const [citationModalOpen, setCitationModalOpen] = react.useState(false);
@@ -43014,7 +43054,7 @@
43014
43054
  }, [postprocessedMessages, soundSystem]);
43015
43055
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [feedbackStatus && (jsxRuntime.jsx("div", { className: classNames(styles$5.feedbackStatus, feedbackStatus.variant === 'success'
43016
43056
  ? styles$5.feedbackStatusSuccess
43017
- : styles$5.feedbackStatusError), "aria-live": "polite", role: "status", children: feedbackStatus.message })), effectConfigs && effectConfigs.length > 0 && (jsxRuntime.jsx(ChatEffectsSystem, { messages: postprocessedMessages, effectConfigs: effectConfigs, soundSystem: soundSystem })), jsxRuntime.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: jsxRuntime.jsxs("div", { className: classNames(className, styles$5.chatMainFlow, getChatCssClassName('chatMainFlow'), chatCssClassNames.chatMainFlow), children: [children && jsxRuntime.jsx("div", { className: classNames(styles$5.chatChildren), children: children }), shouldShowScrollToBottom && (jsxRuntime.jsx("div", { className: styles$5.scrollToBottomContainer, children: jsxRuntime.jsxs("div", { className: styles$5.scrollToBottomWrapper, children: [jsxRuntime.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 && (jsxRuntime.jsx("span", { className: styles$5.scrollToBottomBadge, "aria-live": "polite", role: "status", children: badgeLabel }))] }) })), isVoiceCalling && (jsxRuntime.jsx("div", { className: styles$5.voiceCallIndicatorBar, children: jsxRuntime.jsxs("div", { className: styles$5.voiceCallIndicator, children: [jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntime.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" }) }), jsxRuntime.jsx("span", { children: "Voice call active" }), jsxRuntime.jsx("div", { className: styles$5.voiceCallPulse })] }) })), jsxRuntime.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 }), jsxRuntime.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) => {
43057
+ : styles$5.feedbackStatusError), "aria-live": "polite", role: "status", children: feedbackStatus.message })), effectConfigs && effectConfigs.length > 0 && (jsxRuntime.jsx(ChatEffectsSystem, { messages: postprocessedMessages, effectConfigs: effectConfigs, soundSystem: soundSystem })), jsxRuntime.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: jsxRuntime.jsxs("div", { className: classNames(className, styles$5.chatMainFlow, getChatCssClassName('chatMainFlow'), chatCssClassNames.chatMainFlow), children: [children && jsxRuntime.jsx("div", { className: classNames(styles$5.chatChildren), children: children }), shouldShowScrollToBottom && (jsxRuntime.jsx("div", { className: styles$5.scrollToBottomContainer, children: jsxRuntime.jsxs("div", { className: styles$5.scrollToBottomWrapper, children: [jsxRuntime.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 && (jsxRuntime.jsx("span", { className: styles$5.scrollToBottomBadge, "aria-live": "polite", role: "status", children: badgeLabel }))] }) })), isVoiceCalling && (jsxRuntime.jsx("div", { className: styles$5.voiceCallIndicatorBar, children: jsxRuntime.jsxs("div", { className: styles$5.voiceCallIndicator, children: [jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntime.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" }) }), jsxRuntime.jsx("span", { children: "Voice call active" }), jsxRuntime.jsx("div", { className: styles$5.voiceCallPulse })] }) })), jsxRuntime.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 }), jsxRuntime.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) => {
43018
43058
  setSelectedToolCallState({
43019
43059
  identity: getToolCallIdentity(toolCall),
43020
43060
  fallbackToolCall: toolCall,
@@ -43026,7 +43066,7 @@
43026
43066
  }, setChatMessagesElement: setChatMessagesElement, onScroll: handleChatScroll, isSpeechPlaybackEnabled: isSpeechPlaybackEnabled, elevenLabsVoiceId: elevenLabsVoiceId, chatMessagesClassName: classNames(getChatCssClassName('chatMessages'), chatCssClassNames.chatMessages), hasActions: hasActions }), onMessage && (jsxRuntime.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) }))] }) }), jsxRuntime.jsx(ChatToolCallModal, { isOpen: toolCallModalOpen, toolCall: selectedToolCall, toolCallIdentity: (selectedToolCallState === null || selectedToolCallState === void 0 ? void 0 : selectedToolCallState.identity) || null, onClose: () => {
43027
43067
  setToolCallModalOpen(false);
43028
43068
  setSelectedToolCallState(null);
43029
- }, toolTitles: toolTitles, agentParticipant: agentParticipant, buttonColor: buttonColor, teamAgentProfiles: teamAgentProfiles }), jsxRuntime.jsx(ChatCitationModal, { isOpen: citationModalOpen, citation: selectedCitation, participants: participants, soundSystem: soundSystem, onClose: () => setCitationModalOpen(false) }), jsxRuntime.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 })] }));
43069
+ }, toolTitles: toolTitles, agentParticipant: agentParticipant, buttonColor: buttonColor, teamAgentProfiles: teamAgentProfiles }), jsxRuntime.jsx(ChatCitationModal, { isOpen: citationModalOpen, citation: selectedCitation, participants: participants, soundSystem: soundSystem, onClose: () => setCitationModalOpen(false) }), jsxRuntime.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 })] }));
43030
43070
  }
43031
43071
 
43032
43072
  /**