@patternfly/chatbot 6.5.0-prerelease.28 → 6.5.0-prerelease.29

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.
Files changed (14) hide show
  1. package/dist/cjs/MessageBar/MessageBar.d.ts +6 -0
  2. package/dist/cjs/MessageBar/MessageBar.js +24 -12
  3. package/dist/cjs/MessageBar/MessageBar.test.js +12 -0
  4. package/dist/css/main.css +13 -1
  5. package/dist/css/main.css.map +1 -1
  6. package/dist/esm/MessageBar/MessageBar.d.ts +6 -0
  7. package/dist/esm/MessageBar/MessageBar.js +24 -12
  8. package/dist/esm/MessageBar/MessageBar.test.js +12 -0
  9. package/package.json +1 -1
  10. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotMessageBarCustomActions.tsx +190 -0
  11. package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +15 -2
  12. package/src/MessageBar/MessageBar.scss +15 -1
  13. package/src/MessageBar/MessageBar.test.tsx +27 -0
  14. package/src/MessageBar/MessageBar.tsx +86 -50
package/dist/cjs/MessageBar/MessageBar.d.ts CHANGED
@@ -40,6 +40,8 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
40
40
  placeholder?: string;
41
41
  /** Flag to disable/enable the Attach button */
42
42
  hasAttachButton?: boolean;
43
+ /** Whether the attach button is rendered before or after the message input. */
44
+ attachButtonPosition?: 'start' | 'end';
43
45
  /** Flag to enable the Microphone button */
44
46
  hasMicrophoneButton?: boolean;
45
47
  /** Placeholder text when listening */
@@ -111,6 +113,10 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
111
113
  innerRef?: React.Ref<HTMLTextAreaElement>;
112
114
  /** Sets background color to primary */
113
115
  isPrimary?: boolean;
116
+ /** Additional actions to render for the message bar. This will force a multiline layout, and the actions will render at the start of the container. */
117
+ additionalActions?: React.ReactNode;
118
+ /** Flag indicating whether a multiline layout for the message input and actions should be forced. This can be used to always render actions below the message input. */
119
+ forceMultilineLayout?: boolean;
114
120
  /** @beta Flag indicating whether the message bar has an AI indicator border. */
115
121
  hasAiIndicator?: boolean;
116
122
  /** @beta Flag indicating whether the chatbot is thinking in response to a query, adding an animation to the message bar. */
package/dist/cjs/MessageBar/MessageBar.js CHANGED
@@ -27,14 +27,15 @@ const AttachMenu_1 = __importDefault(require("../AttachMenu"));
27
27
  const StopButton_1 = __importDefault(require("./StopButton"));
28
28
  const MessageBarBase = (_a) => {
29
29
  var _b;
30
- var { onSendMessage, className, alwayShowSendButton, placeholder = 'Send a message...', hasAttachButton = true, hasMicrophoneButton, listeningText = 'Listening', handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value, isCompact = false, allowedFileTypes, minSize, maxSize, maxFiles, isAttachmentDisabled, onAttach, onAttachRejected, validator, dropzoneProps, innerRef, isPrimary, hasAiIndicator, isThinking } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "dropzoneProps", "innerRef", "isPrimary", "hasAiIndicator", "isThinking"]);
30
+ var { onSendMessage, className, alwayShowSendButton, placeholder = 'Send a message...', hasAttachButton = true, attachButtonPosition = 'end', hasMicrophoneButton, listeningText = 'Listening', handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value, isCompact = false, allowedFileTypes, minSize, maxSize, maxFiles, isAttachmentDisabled, onAttach, onAttachRejected, validator, dropzoneProps, innerRef, isPrimary, additionalActions, forceMultilineLayout = false, hasAiIndicator, isThinking } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "attachButtonPosition", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "dropzoneProps", "innerRef", "isPrimary", "additionalActions", "forceMultilineLayout", "hasAiIndicator", "isThinking"]);
31
31
  // Text Input
32
32
  // --------------------------------------------------------------------------
33
33
  const [message, setMessage] = (0, react_1.useState)(value !== null && value !== void 0 ? value : '');
34
34
  const [isListeningMessage, setIsListeningMessage] = (0, react_1.useState)(false);
35
35
  const [hasSentMessage, setHasSentMessage] = (0, react_1.useState)(false);
36
36
  const [isComposing, setIsComposing] = (0, react_1.useState)(false);
37
- const [isMultiline, setIsMultiline] = (0, react_1.useState)(false);
37
+ const shouldForceMultiline = forceMultilineLayout || additionalActions;
38
+ const [isMultiline, setIsMultiline] = (0, react_1.useState)(shouldForceMultiline);
38
39
  const inputRef = (0, react_1.useRef)(null);
39
40
  const textareaRef = (_b = innerRef) !== null && _b !== void 0 ? _b : inputRef;
40
41
  const attachButtonRef = (0, react_1.useRef)(null);
@@ -48,7 +49,7 @@ const MessageBarBase = (_a) => {
48
49
  parent.style.setProperty('height', 'inherit');
49
50
  const grandparent = parent.parentElement;
50
51
  if (grandparent) {
51
- grandparent.style.setProperty('flex-basis', 'auto');
52
+ grandparent.style.setProperty('flex-basis', shouldForceMultiline ? '100%' : 'auto');
52
53
  }
53
54
  }
54
55
  };
@@ -88,7 +89,7 @@ const MessageBarBase = (_a) => {
88
89
  const parent = field.parentElement;
89
90
  if (parent) {
90
91
  const grandparent = parent.parentElement;
91
- if (textIsLongerThan2Lines(field) && grandparent) {
92
+ if ((textIsLongerThan2Lines(field) || shouldForceMultiline) && grandparent) {
92
93
  grandparent.style.setProperty('flex-basis', `100%`);
93
94
  }
94
95
  }
@@ -136,15 +137,15 @@ const MessageBarBase = (_a) => {
136
137
  if (field) {
137
138
  if (field.value === '') {
138
139
  setInitialLineHeight(field);
139
- setIsMultiline(false);
140
+ !shouldForceMultiline && setIsMultiline(false);
140
141
  }
141
142
  else {
142
143
  setAutoHeight(field);
143
144
  setAutoWidth(field);
144
- checkIfMultiline(field);
145
+ !shouldForceMultiline && checkIfMultiline(field);
145
146
  }
146
147
  }
147
- }, [displayMode, message, setAutoWidth, checkIfMultiline]);
148
+ }, [displayMode, message, setAutoWidth, shouldForceMultiline, checkIfMultiline]);
148
149
  (0, react_1.useEffect)(() => {
149
150
  const field = textareaRef.current;
150
151
  if (field) {
@@ -157,11 +158,11 @@ const MessageBarBase = (_a) => {
157
158
  if (textareaRef.current) {
158
159
  if (event.target.value === '') {
159
160
  setInitialLineHeight(textareaRef.current);
160
- setIsMultiline(false);
161
+ !shouldForceMultiline && setIsMultiline(false);
161
162
  }
162
163
  else {
163
164
  setAutoHeight(textareaRef.current);
164
- checkIfMultiline(textareaRef.current);
165
+ !shouldForceMultiline && checkIfMultiline(textareaRef.current);
165
166
  }
166
167
  }
167
168
  setMessage(event.target.value);
@@ -207,14 +208,25 @@ const MessageBarBase = (_a) => {
207
208
  setMessage(message);
208
209
  onChange && onChange({}, message);
209
210
  };
211
+ const renderAttachButton = () => {
212
+ var _a, _b, _c, _d, _e, _f;
213
+ if (!attachMenuProps && hasAttachButton) {
214
+ return ((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _a === void 0 ? void 0 : _a.tooltipContent, inputTestId: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _b === void 0 ? void 0 : _b.inputTestId, isCompact: isCompact, tooltipProps: (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _c === void 0 ? void 0 : _c.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach, (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.props)));
215
+ }
216
+ if (attachMenuProps) {
217
+ return ((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipContent, isCompact: isCompact, tooltipProps: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach)));
218
+ }
219
+ };
220
+ const isAttachButtonAtStart = attachButtonPosition === 'start';
210
221
  const renderButtons = () => {
211
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
222
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
212
223
  if (hasStopButton && handleStopButton) {
213
224
  return ((0, jsx_runtime_1.jsx)(StopButton_1.default, Object.assign({ onClick: handleStopButton, tooltipContent: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _a === void 0 ? void 0 : _a.tooltipContent, isCompact: isCompact, tooltipProps: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _b === void 0 ? void 0 : _b.tooltipProps }, (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _c === void 0 ? void 0 : _c.props)));
214
225
  }
215
- 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 }, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach))), !attachMenuProps && hasAttachButton && ((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.tooltipContent, inputTestId: (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.inputTestId, isCompact: isCompact, tooltipProps: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _h === void 0 ? void 0 : _h.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach, (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _j === void 0 ? void 0 : _j.props))), hasMicrophoneButton && ((0, jsx_runtime_1.jsx)(MicrophoneButton_1.default, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _k === void 0 ? void 0 : _k.tooltipContent, language: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _l === void 0 ? void 0 : _l.language, isCompact: isCompact, tooltipProps: (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _m === void 0 ? void 0 : _m.tooltipProps }, (_o = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _o === void 0 ? void 0 : _o.props))), (alwayShowSendButton || message) && ((0, jsx_runtime_1.jsx)(SendButton_1.default, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_p = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _p === void 0 ? void 0 : _p.tooltipContent, isCompact: isCompact, tooltipProps: (_q = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _q === void 0 ? void 0 : _q.tooltipProps }, (_r = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _r === void 0 ? void 0 : _r.props)))] }));
226
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isAttachButtonAtStart && renderAttachButton(), hasMicrophoneButton && ((0, jsx_runtime_1.jsx)(MicrophoneButton_1.default, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _d === void 0 ? void 0 : _d.tooltipContent, language: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _e === void 0 ? void 0 : _e.language, isCompact: isCompact, tooltipProps: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _f === void 0 ? void 0 : _f.tooltipProps }, (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _g === void 0 ? void 0 : _g.props))), (alwayShowSendButton || message) && ((0, jsx_runtime_1.jsx)(SendButton_1.default, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _h === void 0 ? void 0 : _h.tooltipContent, isCompact: isCompact, tooltipProps: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _j === void 0 ? void 0 : _j.tooltipProps }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _k === void 0 ? void 0 : _k.props)))] }));
216
227
  };
217
- 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() })] }));
228
+ const hasGroupedActions = additionalActions || (isAttachButtonAtStart && isMultiline);
229
+ const messageBarContents = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isAttachButtonAtStart && !isMultiline && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-bar-actions test", children: renderAttachButton() })), (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: (0, react_styles_1.css)('pf-chatbot__message-bar-actions', hasGroupedActions && 'pf-m-grouped'), children: hasGroupedActions ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, react_styles_1.css)('pf-chatbot__message-bar-actions-group'), children: [isAttachButtonAtStart && renderAttachButton(), additionalActions] }), (0, jsx_runtime_1.jsx)("div", { className: (0, react_styles_1.css)('pf-chatbot__message-bar-actions-group'), children: renderButtons() })] })) : (renderButtons()) })] }));
218
230
  if (attachMenuProps) {
219
231
  return ((0, jsx_runtime_1.jsx)(AttachMenu_1.default, Object.assign({ toggle: (toggleRef) => ((0, jsx_runtime_1.jsx)("div", { ref: toggleRef, className: (0, react_styles_1.css)('pf-chatbot__message-bar', isMultiline && 'pf-m-multiline', className), children: messageBarContents })), filteredItems: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuItems }, (attachMenuProps && { isOpen: attachMenuProps.isAttachMenuOpen }), { onOpenChange: (isAttachMenuOpen) => {
220
232
  var _a;
package/dist/cjs/MessageBar/MessageBar.test.js CHANGED
@@ -331,4 +331,16 @@ describe('Message bar', () => {
331
331
  (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, isThinking: true }));
332
332
  expect(react_1.screen.getByRole('textbox').closest('.pf-chatbot__message-bar')).toHaveClass('pf-v6-m-thinking');
333
333
  });
334
+ it('Renders with flex-basis of auto by default', () => {
335
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn }));
336
+ expect(react_1.screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute('style', 'flex-basis: auto;');
337
+ });
338
+ it('Renders with flex-basis of 100% when forceMultilineLayout is true', () => {
339
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { forceMultilineLayout: true, onSendMessage: jest.fn }));
340
+ expect(react_1.screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute('style', 'flex-basis: 100%;');
341
+ });
342
+ it('Renders with flex-basis of 100% when additionalActions is truthy', () => {
343
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { additionalActions: "actions", onSendMessage: jest.fn }));
344
+ expect(react_1.screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute('style', 'flex-basis: 100%;');
345
+ });
334
346
  });
package/dist/css/main.css CHANGED
@@ -2262,6 +2262,17 @@ li[id*=user-content-fn-]:has(> span > span > .pf-chatbot__message-text + .pf-cha
2262
2262
  padding-block-end: var(--pf-t--global--spacer--xs);
2263
2263
  gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
2264
2264
  }
2265
+ .pf-chatbot__message-bar-actions.pf-m-grouped {
2266
+ flex-basis: 100%;
2267
+ justify-content: space-between;
2268
+ }
2269
+ .pf-chatbot__message-bar-actions-group {
2270
+ display: flex;
2271
+ padding-block-start: var(--pf-t--global--spacer--xs);
2272
+ padding-block-end: var(--pf-t--global--spacer--xs);
2273
+ gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
2274
+ align-items: center;
2275
+ }
2265
2276
  .pf-chatbot__message-bar-input {
2266
2277
  flex: 1 1 auto;
2267
2278
  padding-block-start: var(--pf-t--global--spacer--sm);
@@ -2334,7 +2345,8 @@ li[id*=user-content-fn-]:has(> span > span > .pf-chatbot__message-text + .pf-cha
2334
2345
  font-size: var(--pf-t--global--font--size--sm) !important;
2335
2346
  }
2336
2347
 
2337
- .pf-m-compact .pf-chatbot__message-bar-actions {
2348
+ .pf-m-compact .pf-chatbot__message-bar-actions,
2349
+ .pf-m-compact .pf-chatbot__message-bar-actions-group {
2338
2350
  padding-block-start: var(--pf-t--global--spacer--sm);
2339
2351
  padding-block-end: var(--pf-t--global--spacer--sm);
2340
2352
  }
package/dist/css/main.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/AttachMenu/AttachMenu.scss","../../src/Chatbot/Chatbot.scss","../../src/ChatbotAlert/ChatbotAlert.scss","../../src/ChatbotContent/ChatbotContent.scss","../../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss","../../src/ChatbotFooter/ChatbotFootnote.scss","../../src/ChatbotFooter/ChatbotFooter.scss","../../src/ChatbotHeader/ChatbotHeader.scss","../../src/ChatbotModal/ChatbotModal.scss","../../src/ChatbotPopover/ChatbotPopover.scss","../../src/ChatbotToggle/ChatbotToggle.scss","../../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss","../../src/CodeModal/CodeModal.scss","../../src/Compare/Compare.scss","../../src/DeepThinking/DeepThinking.scss","../../src/FileDetails/FileDetails.scss","../../src/FileDetailsLabel/FileDetailsLabel.scss","../../src/FileDropZone/FileDropZone.scss","../../src/FilePreview/FilePreview.scss","../../src/ImagePreview/ImagePreview.scss","../../src/Message/Message.scss","../../src/Message/MessageLoading.scss","../../src/Message/CodeBlockMessage/CodeBlockMessage.scss","../../src/Message/TextMessage/TextMessage.scss","../../src/Message/SuperscriptMessage/SuperscriptMessage.scss","../../src/Message/ImageMessage/ImageMessage.scss","../../src/Message/LinkMessage/LinkMessage.scss","../../src/Message/ListMessage/ListMessage.scss","../../src/Message/TableMessage/TableMessage.scss","../../src/Message/QuickStarts/QuickStartTile.scss","../../src/Message/QuickResponse/QuickResponse.scss","../../src/Message/UserFeedback/UserFeedback.scss","../../src/MessageBar/AttachButton.scss","../../src/MessageBar/MicrophoneButton.scss","../../src/MessageBar/SendButton.scss","../../src/MessageBar/StopButton.scss","../../src/MessageBar/MessageBar.scss","../../src/MessageBox/JumpButton.scss","../../src/MessageBox/MessageBox.scss","../../src/MessageDivider/MessageDivider.scss","../../src/Onboarding/Onboarding.scss","../../src/ResponseActions/ResponseActions.scss","../../src/Settings/Settings.scss","../../src/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss","../../src/TermsOfUse/TermsOfUse.scss","../../src/ToolResponse/ToolResponse.scss","../../src/ToolCall/ToolCall.scss","../../src/main.scss"],"names":[],"mappings":";AAAA;EACE;EACA;;;AAGF;AACE;AAsBA;AASA;;AA9BA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;AACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACxDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAYF;;AAVA;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAQF;EAjCF;IAkCI;IACA;;;AAIF;EAvCF;IAwCI;;;;AAOJ;EAEE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EAfF;IAgBI;;;;AAOJ;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EAEE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EAdF;IAeI;;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAdF;IAgBI;;;;AAMF;EACE;;;AAOJ;EACE;;;ACjKF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;AAGF;EACE;;;AAOJ;EAII;AAAA;AAAA;IACE;IACA;;;ACzBJ;EACE;EACA;;AAGF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAKA;EACE;EACA;;AAIJ;EACE;;AAKF;EACE;EACA;EAEA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AAIF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AAGF;EACE;;;AAMJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAKA;EACE;;;AASJ;EACE;;;AASF;AAAA;EACE;;AACA;AAAA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AAUF;AAAA;AAAA;AAAA;EACE;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAKE;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;;ACvSN;EACE;;AAEA;EACE;EACA;;;ACHJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;;AAMF;EAGI;AAAA;IACE;;EACA;AAAA;IACE;;EAGJ;AAAA;IACE;IACA;IACA;;;AASJ;EACE;;;AAQF;EACE;;;AAIJ;EACE;EACA;;;AAQA;EAIM;AAAA;IACE;;;;AC5EV;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAQN;EAGI;AAAA;IACE;;EAEF;AAAA;IACE;;;AAUJ;AAAA;EACE;;;AAOJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAOJ;EACE;;;AAOJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAOA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAQA;EAGI;AAAA;IACE;;;;AClLR;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAIF;EACE;;;AAOJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAOJ;EACE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAQE;EACE;;;AAQN;EACE;;;AAOA;EACE;;AAGF;EACE;EACA;;;ACpGF;EACE;;AAMA;EACE;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACxBN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAIF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AC3BF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAOJ;EAIM;AAAA;IACE;IACA;;;ACpDN;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;AAAA;AAAA;EAGA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAGA;EACE;;;AAUF;EACE;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AAIA;EACE;;;AC9FJ;EACE;EACA;EACA;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAGF;EACE;;AAEA;EAHF;IAII;;;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAIA;EADF;IAEI;;;;AAIN;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;;ACrEJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;ACtBF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;ACjCF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;;AAKF;EACE;;;AAMF;AAAA;EACE;;;AC/DJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAGA;EANF;IAOI;;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;;;AAME;EADF;IAEI;IACA;IACA;;EAEA;IACE;;;;ACnDR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAEF;EACE;EACA;;;ACpBF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;ACvDJ;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAGF;EAKE;;AAJA;EACE;EACA;;AAOJ;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAGA;EACE;EAQA;EACA;;AAIF;EACE;EACA;;AAIF;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIF;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE;;AAIJ;EACE;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;;;AChJF;EACE;EACA;EACA;EACA;EAEA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;AAIJ;EACE;;;ACtDJ;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;;AAIJ;EACE;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;EACA;;;ACrGJ;EACE;;AAGE;EACE;;;AAMN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAIJ;EACE;;AAEF;EACE;EACA;;;AAUJ;EAIE;;;AAIF;EAKE;;;AAIA;EACE;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAIJ;EACE;;AAGF;EACE;EACA;;;AASF;EACE;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AC/IN;EACE;EACA;;AACA;EACE;EACA;;;AJ0JF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;AAIA;EACE;EACA;;AAIJ;EACE;;;AEjLJ;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;;AAIJ;EACE;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;EACA;;;AGzGJ;EACE;EACA;EACA;EACA;EAGA;;;ACNA;EACE;;;AHEJ;EACE;;AAGE;EACE;;;AAMN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAIJ;EACE;;AAEF;EACE;EACA;;;AAUJ;EAIE;;;AAIF;EAKE;;;AAIA;EACE;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAIJ;EACE;;AAGF;EACE;EACA;;;AASF;EACE;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AI3IN;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAMJ;AAAA;EAEE;EACA;EACA;;AAGA;AAAA;EACE;;AAMF;EACE;EACA;;AAIJ;EACE;;;AC/CJ;EACE;EACA;EACA;EAEA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;;APhCN;EACE;EACA;EACA;EACA;EAEA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;AAIJ;EACE;;;AQzDJ;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAKA;EACE;;;AAOF;EACE;;;AClBF;EACE;;AAGF;EALF;IAMI;;;AAGF;EATF;IAUI;;;AAKF;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;;AAIF;EACE;EACA;EACA;;;AC/BJ;EACE;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAKA;EACE;;;AAGJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;;;AAMJ;EACE;;AAGF;EACE;;AAIA;EACE;;;AC/FN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;AAIJ;EAEE;;AAEA;EACE;;AAKA;EACE;;;AASR;EACE;EACA;EACA;;;ACxCF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AAOJ;EACE;EACA;EACA;;;ACpDF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;EACA;;AAEA;EACE;;;AAMJ;EACE;;AACA;EACE;;AAIJ;EACE;EACA;;AAGF;AAAA;EAEE;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAOJ;EACE;EACA;EACA;;;ACzDF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAKA;EACE;;;AASR;EACE;EACA;EACA;;;ACjCF;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAKF;EACE;;AAKF;EACE;EACA;;AAKF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAKF;EACE;IACE;IACA;;;;AAQN;EACE;EACA;;AAEA;EACE;;;AAKF;EACE;EACA;;;AAOJ;EACE;;;AAQE;EACE;;;ACvKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AC9CJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAIA;EAVF;IAWI;;;AAGF;EAdF;IAeI;;;;AAIJ;EACE;;;AAGF;EAII;AAAA;AAAA;IACE;IACA;;;AAMJ;EACE;;;ACnCJ;EACE;EACA;;AAEA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKF;EACE;EACA;EAEA;;AAGF;EACE;;AAKF;AAAA;EAEE;;;AFrCN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AGhDJ;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;;AAIF;EACE;IACE;IACA;;;;AASF;AAAA;AAAA;EACE;EACA;;;AAKN;AAAA;EAGE;;AAEA;AAAA;EACE;;;AAKF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AClGJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;;;ACrCF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAIA;EACE;EACA;;;AAIJ;EACE;;;AC3CF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAIA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;AAON;EACE;EACA;;;ACpGJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AC9BA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;IACE;IACA;;;;AAKN;AAAA;EAGE;;AAGE;AAAA;EACE;;AAIJ;AAAA;EACE;;;AAKF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;ACnFJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAIA;EACE;;;AC3CJ;EACE;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;;AAIA;EACE;EACA;EACA;;AAIJ;EACE;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;;;ACWJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"main.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/AttachMenu/AttachMenu.scss","../../src/Chatbot/Chatbot.scss","../../src/ChatbotAlert/ChatbotAlert.scss","../../src/ChatbotContent/ChatbotContent.scss","../../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss","../../src/ChatbotFooter/ChatbotFootnote.scss","../../src/ChatbotFooter/ChatbotFooter.scss","../../src/ChatbotHeader/ChatbotHeader.scss","../../src/ChatbotModal/ChatbotModal.scss","../../src/ChatbotPopover/ChatbotPopover.scss","../../src/ChatbotToggle/ChatbotToggle.scss","../../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss","../../src/CodeModal/CodeModal.scss","../../src/Compare/Compare.scss","../../src/DeepThinking/DeepThinking.scss","../../src/FileDetails/FileDetails.scss","../../src/FileDetailsLabel/FileDetailsLabel.scss","../../src/FileDropZone/FileDropZone.scss","../../src/FilePreview/FilePreview.scss","../../src/ImagePreview/ImagePreview.scss","../../src/Message/Message.scss","../../src/Message/MessageLoading.scss","../../src/Message/CodeBlockMessage/CodeBlockMessage.scss","../../src/Message/TextMessage/TextMessage.scss","../../src/Message/SuperscriptMessage/SuperscriptMessage.scss","../../src/Message/ImageMessage/ImageMessage.scss","../../src/Message/LinkMessage/LinkMessage.scss","../../src/Message/ListMessage/ListMessage.scss","../../src/Message/TableMessage/TableMessage.scss","../../src/Message/QuickStarts/QuickStartTile.scss","../../src/Message/QuickResponse/QuickResponse.scss","../../src/Message/UserFeedback/UserFeedback.scss","../../src/MessageBar/AttachButton.scss","../../src/MessageBar/MicrophoneButton.scss","../../src/MessageBar/SendButton.scss","../../src/MessageBar/StopButton.scss","../../src/MessageBar/MessageBar.scss","../../src/MessageBox/JumpButton.scss","../../src/MessageBox/MessageBox.scss","../../src/MessageDivider/MessageDivider.scss","../../src/Onboarding/Onboarding.scss","../../src/ResponseActions/ResponseActions.scss","../../src/Settings/Settings.scss","../../src/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss","../../src/TermsOfUse/TermsOfUse.scss","../../src/ToolResponse/ToolResponse.scss","../../src/ToolCall/ToolCall.scss","../../src/main.scss"],"names":[],"mappings":";AAAA;EACE;EACA;;;AAGF;AACE;AAsBA;AASA;;AA9BA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;AACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACxDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAYF;;AAVA;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAQF;EAjCF;IAkCI;IACA;;;AAIF;EAvCF;IAwCI;;;;AAOJ;EAEE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EAfF;IAgBI;;;;AAOJ;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EAEE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EAdF;IAeI;;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAdF;IAgBI;;;;AAMF;EACE;;;AAOJ;EACE;;;ACjKF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;AAGF;EACE;;;AAOJ;EAII;AAAA;AAAA;IACE;IACA;;;ACzBJ;EACE;EACA;;AAGF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAKA;EACE;EACA;;AAIJ;EACE;;AAKF;EACE;EACA;EAEA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AAIF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AAGF;EACE;;;AAMJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAKA;EACE;;;AASJ;EACE;;;AASF;AAAA;EACE;;AACA;AAAA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AAUF;AAAA;AAAA;AAAA;EACE;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAKE;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;;ACvSN;EACE;;AAEA;EACE;EACA;;;ACHJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;;AAMF;EAGI;AAAA;IACE;;EACA;AAAA;IACE;;EAGJ;AAAA;IACE;IACA;IACA;;;AASJ;EACE;;;AAQF;EACE;;;AAIJ;EACE;EACA;;;AAQA;EAIM;AAAA;IACE;;;;AC5EV;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAQN;EAGI;AAAA;IACE;;EAEF;AAAA;IACE;;;AAUJ;AAAA;EACE;;;AAOJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAOJ;EACE;;;AAOJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAOA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAQA;EAGI;AAAA;IACE;;;;AClLR;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAIF;EACE;;;AAOJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAOJ;EACE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAQE;EACE;;;AAQN;EACE;;;AAOA;EACE;;AAGF;EACE;EACA;;;ACpGF;EACE;;AAMA;EACE;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACxBN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAIF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AC3BF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAOJ;EAIM;AAAA;IACE;IACA;;;ACpDN;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;AAAA;AAAA;EAGA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAGA;EACE;;;AAUF;EACE;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AAIA;EACE;;;AC9FJ;EACE;EACA;EACA;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAGF;EACE;;AAEA;EAHF;IAII;;;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAIA;EADF;IAEI;;;;AAIN;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;;ACrEJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;ACtBF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;ACjCF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;;AAKF;EACE;;;AAMF;AAAA;EACE;;;AC/DJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAGA;EANF;IAOI;;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;;;AAME;EADF;IAEI;IACA;IACA;;EAEA;IACE;;;;ACnDR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAEF;EACE;EACA;;;ACpBF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;ACvDJ;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAGF;EAKE;;AAJA;EACE;EACA;;AAOJ;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAGA;EACE;EAQA;EACA;;AAIF;EACE;EACA;;AAIF;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIF;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE;;AAIJ;EACE;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;;;AChJF;EACE;EACA;EACA;EACA;EAEA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;AAIJ;EACE;;;ACtDJ;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;;AAIJ;EACE;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;EACA;;;ACrGJ;EACE;;AAGE;EACE;;;AAMN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAIJ;EACE;;AAEF;EACE;EACA;;;AAUJ;EAIE;;;AAIF;EAKE;;;AAIA;EACE;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAIJ;EACE;;AAGF;EACE;EACA;;;AASF;EACE;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AC/IN;EACE;EACA;;AACA;EACE;EACA;;;AJ0JF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;AAIA;EACE;EACA;;AAIJ;EACE;;;AEjLJ;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;;AAIJ;EACE;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;EACA;;;AGzGJ;EACE;EACA;EACA;EACA;EAGA;;;ACNA;EACE;;;AHEJ;EACE;;AAGE;EACE;;;AAMN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAIJ;EACE;;AAEF;EACE;EACA;;;AAUJ;EAIE;;;AAIF;EAKE;;;AAIA;EACE;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAIJ;EACE;;AAGF;EACE;EACA;;;AASF;EACE;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AI3IN;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAMJ;AAAA;EAEE;EACA;EACA;;AAGA;AAAA;EACE;;AAMF;EACE;EACA;;AAIJ;EACE;;;AC/CJ;EACE;EACA;EACA;EAEA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;;APhCN;EACE;EACA;EACA;EACA;EAEA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;AAIJ;EACE;;;AQzDJ;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAKA;EACE;;;AAOF;EACE;;;AClBF;EACE;;AAGF;EALF;IAMI;;;AAGF;EATF;IAUI;;;AAKF;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;;AAIF;EACE;EACA;EACA;;;AC/BJ;EACE;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAKA;EACE;;;AAGJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;;;AAMJ;EACE;;AAGF;EACE;;AAIA;EACE;;;AC/FN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;AAIJ;EAEE;;AAEA;EACE;;AAKA;EACE;;;AASR;EACE;EACA;EACA;;;ACxCF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AAOJ;EACE;EACA;EACA;;;ACpDF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;EACA;;AAEA;EACE;;;AAMJ;EACE;;AACA;EACE;;AAIJ;EACE;EACA;;AAGF;AAAA;EAEE;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAOJ;EACE;EACA;EACA;;;ACzDF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAKA;EACE;;;AASR;EACE;EACA;EACA;;;ACjCF;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAKF;EACE;;AAKF;EACE;EACA;;AAKF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAKF;EACE;IACE;IACA;;;;AAQN;EACE;EACA;;AAEA;EACE;;;AAKF;AAAA;EAEE;EACA;;;AAOJ;EACE;;;AAQE;EACE;;;ACrLN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AC9CJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAIA;EAVF;IAWI;;;AAGF;EAdF;IAeI;;;;AAIJ;EACE;;;AAGF;EAII;AAAA;AAAA;IACE;IACA;;;AAMJ;EACE;;;ACnCJ;EACE;EACA;;AAEA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKF;EACE;EACA;EAEA;;AAGF;EACE;;AAKF;AAAA;EAEE;;;AFrCN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AGhDJ;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;;AAIF;EACE;IACE;IACA;;;;AASF;AAAA;AAAA;EACE;EACA;;;AAKN;AAAA;EAGE;;AAEA;AAAA;EACE;;;AAKF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AClGJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;;;ACrCF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAIA;EACE;EACA;;;AAIJ;EACE;;;AC3CF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAIA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;AAON;EACE;EACA;;;ACpGJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AC9BA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;IACE;IACA;;;;AAKN;AAAA;EAGE;;AAGE;AAAA;EACE;;AAIJ;AAAA;EACE;;;AAKF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;ACnFJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAIA;EACE;;;AC3CJ;EACE;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;;AAIA;EACE;EACA;EACA;;AAIJ;EACE;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;;;ACWJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"main.css"}
package/dist/esm/MessageBar/MessageBar.d.ts CHANGED
@@ -40,6 +40,8 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
40
40
  placeholder?: string;
41
41
  /** Flag to disable/enable the Attach button */
42
42
  hasAttachButton?: boolean;
43
+ /** Whether the attach button is rendered before or after the message input. */
44
+ attachButtonPosition?: 'start' | 'end';
43
45
  /** Flag to enable the Microphone button */
44
46
  hasMicrophoneButton?: boolean;
45
47
  /** Placeholder text when listening */
@@ -111,6 +113,10 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
111
113
  innerRef?: React.Ref<HTMLTextAreaElement>;
112
114
  /** Sets background color to primary */
113
115
  isPrimary?: boolean;
116
+ /** Additional actions to render for the message bar. This will force a multiline layout, and the actions will render at the start of the container. */
117
+ additionalActions?: React.ReactNode;
118
+ /** Flag indicating whether a multiline layout for the message input and actions should be forced. This can be used to always render actions below the message input. */
119
+ forceMultilineLayout?: boolean;
114
120
  /** @beta Flag indicating whether the message bar has an AI indicator border. */
115
121
  hasAiIndicator?: boolean;
116
122
  /** @beta Flag indicating whether the chatbot is thinking in response to a query, adding an animation to the message bar. */
package/dist/esm/MessageBar/MessageBar.js CHANGED
@@ -21,14 +21,15 @@ import AttachMenu from '../AttachMenu';
21
21
  import StopButton from './StopButton';
22
22
  export const MessageBarBase = (_a) => {
23
23
  var _b;
24
- var { onSendMessage, className, alwayShowSendButton, placeholder = 'Send a message...', hasAttachButton = true, hasMicrophoneButton, listeningText = 'Listening', handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value, isCompact = false, allowedFileTypes, minSize, maxSize, maxFiles, isAttachmentDisabled, onAttach, onAttachRejected, validator, dropzoneProps, innerRef, isPrimary, hasAiIndicator, isThinking } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "dropzoneProps", "innerRef", "isPrimary", "hasAiIndicator", "isThinking"]);
24
+ var { onSendMessage, className, alwayShowSendButton, placeholder = 'Send a message...', hasAttachButton = true, attachButtonPosition = 'end', hasMicrophoneButton, listeningText = 'Listening', handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value, isCompact = false, allowedFileTypes, minSize, maxSize, maxFiles, isAttachmentDisabled, onAttach, onAttachRejected, validator, dropzoneProps, innerRef, isPrimary, additionalActions, forceMultilineLayout = false, hasAiIndicator, isThinking } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "attachButtonPosition", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "dropzoneProps", "innerRef", "isPrimary", "additionalActions", "forceMultilineLayout", "hasAiIndicator", "isThinking"]);
25
25
  // Text Input
26
26
  // --------------------------------------------------------------------------
27
27
  const [message, setMessage] = useState(value !== null && value !== void 0 ? value : '');
28
28
  const [isListeningMessage, setIsListeningMessage] = useState(false);
29
29
  const [hasSentMessage, setHasSentMessage] = useState(false);
30
30
  const [isComposing, setIsComposing] = useState(false);
31
- const [isMultiline, setIsMultiline] = useState(false);
31
+ const shouldForceMultiline = forceMultilineLayout || additionalActions;
32
+ const [isMultiline, setIsMultiline] = useState(shouldForceMultiline);
32
33
  const inputRef = useRef(null);
33
34
  const textareaRef = (_b = innerRef) !== null && _b !== void 0 ? _b : inputRef;
34
35
  const attachButtonRef = useRef(null);
@@ -42,7 +43,7 @@ export const MessageBarBase = (_a) => {
42
43
  parent.style.setProperty('height', 'inherit');
43
44
  const grandparent = parent.parentElement;
44
45
  if (grandparent) {
45
- grandparent.style.setProperty('flex-basis', 'auto');
46
+ grandparent.style.setProperty('flex-basis', shouldForceMultiline ? '100%' : 'auto');
46
47
  }
47
48
  }
48
49
  };
@@ -82,7 +83,7 @@ export const MessageBarBase = (_a) => {
82
83
  const parent = field.parentElement;
83
84
  if (parent) {
84
85
  const grandparent = parent.parentElement;
85
- if (textIsLongerThan2Lines(field) && grandparent) {
86
+ if ((textIsLongerThan2Lines(field) || shouldForceMultiline) && grandparent) {
86
87
  grandparent.style.setProperty('flex-basis', `100%`);
87
88
  }
88
89
  }
@@ -130,15 +131,15 @@ export const MessageBarBase = (_a) => {
130
131
  if (field) {
131
132
  if (field.value === '') {
132
133
  setInitialLineHeight(field);
133
- setIsMultiline(false);
134
+ !shouldForceMultiline && setIsMultiline(false);
134
135
  }
135
136
  else {
136
137
  setAutoHeight(field);
137
138
  setAutoWidth(field);
138
- checkIfMultiline(field);
139
+ !shouldForceMultiline && checkIfMultiline(field);
139
140
  }
140
141
  }
141
- }, [displayMode, message, setAutoWidth, checkIfMultiline]);
142
+ }, [displayMode, message, setAutoWidth, shouldForceMultiline, checkIfMultiline]);
142
143
  useEffect(() => {
143
144
  const field = textareaRef.current;
144
145
  if (field) {
@@ -151,11 +152,11 @@ export const MessageBarBase = (_a) => {
151
152
  if (textareaRef.current) {
152
153
  if (event.target.value === '') {
153
154
  setInitialLineHeight(textareaRef.current);
154
- setIsMultiline(false);
155
+ !shouldForceMultiline && setIsMultiline(false);
155
156
  }
156
157
  else {
157
158
  setAutoHeight(textareaRef.current);
158
- checkIfMultiline(textareaRef.current);
159
+ !shouldForceMultiline && checkIfMultiline(textareaRef.current);
159
160
  }
160
161
  }
161
162
  setMessage(event.target.value);
@@ -201,14 +202,25 @@ export const MessageBarBase = (_a) => {
201
202
  setMessage(message);
202
203
  onChange && onChange({}, message);
203
204
  };
205
+ const renderAttachButton = () => {
206
+ var _a, _b, _c, _d, _e, _f;
207
+ if (!attachMenuProps && hasAttachButton) {
208
+ return (_jsx(AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _a === void 0 ? void 0 : _a.tooltipContent, inputTestId: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _b === void 0 ? void 0 : _b.inputTestId, isCompact: isCompact, tooltipProps: (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _c === void 0 ? void 0 : _c.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach, (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.props)));
209
+ }
210
+ if (attachMenuProps) {
211
+ return (_jsx(AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipContent, isCompact: isCompact, tooltipProps: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach)));
212
+ }
213
+ };
214
+ const isAttachButtonAtStart = attachButtonPosition === 'start';
204
215
  const renderButtons = () => {
205
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
216
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
206
217
  if (hasStopButton && handleStopButton) {
207
218
  return (_jsx(StopButton, Object.assign({ onClick: handleStopButton, tooltipContent: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _a === void 0 ? void 0 : _a.tooltipContent, isCompact: isCompact, tooltipProps: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _b === void 0 ? void 0 : _b.tooltipProps }, (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _c === void 0 ? void 0 : _c.props)));
208
219
  }
209
- 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 }, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach))), !attachMenuProps && hasAttachButton && (_jsx(AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.tooltipContent, inputTestId: (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.inputTestId, isCompact: isCompact, tooltipProps: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _h === void 0 ? void 0 : _h.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach, (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _j === void 0 ? void 0 : _j.props))), hasMicrophoneButton && (_jsx(MicrophoneButton, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _k === void 0 ? void 0 : _k.tooltipContent, language: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _l === void 0 ? void 0 : _l.language, isCompact: isCompact, tooltipProps: (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _m === void 0 ? void 0 : _m.tooltipProps }, (_o = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _o === void 0 ? void 0 : _o.props))), (alwayShowSendButton || message) && (_jsx(SendButton, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_p = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _p === void 0 ? void 0 : _p.tooltipContent, isCompact: isCompact, tooltipProps: (_q = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _q === void 0 ? void 0 : _q.tooltipProps }, (_r = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _r === void 0 ? void 0 : _r.props)))] }));
220
+ return (_jsxs(_Fragment, { children: [!isAttachButtonAtStart && renderAttachButton(), hasMicrophoneButton && (_jsx(MicrophoneButton, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _d === void 0 ? void 0 : _d.tooltipContent, language: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _e === void 0 ? void 0 : _e.language, isCompact: isCompact, tooltipProps: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _f === void 0 ? void 0 : _f.tooltipProps }, (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _g === void 0 ? void 0 : _g.props))), (alwayShowSendButton || message) && (_jsx(SendButton, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _h === void 0 ? void 0 : _h.tooltipContent, isCompact: isCompact, tooltipProps: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _j === void 0 ? void 0 : _j.tooltipProps }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _k === void 0 ? void 0 : _k.props)))] }));
210
221
  };
211
- 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() })] }));
222
+ const hasGroupedActions = additionalActions || (isAttachButtonAtStart && isMultiline);
223
+ const messageBarContents = (_jsxs(_Fragment, { children: [isAttachButtonAtStart && !isMultiline && (_jsx("div", { className: "pf-chatbot__message-bar-actions test", children: renderAttachButton() })), _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: css('pf-chatbot__message-bar-actions', hasGroupedActions && 'pf-m-grouped'), children: hasGroupedActions ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: css('pf-chatbot__message-bar-actions-group'), children: [isAttachButtonAtStart && renderAttachButton(), additionalActions] }), _jsx("div", { className: css('pf-chatbot__message-bar-actions-group'), children: renderButtons() })] })) : (renderButtons()) })] }));
212
224
  if (attachMenuProps) {
213
225
  return (_jsx(AttachMenu, Object.assign({ toggle: (toggleRef) => (_jsx("div", { ref: toggleRef, className: css('pf-chatbot__message-bar', isMultiline && 'pf-m-multiline', className), children: messageBarContents })), filteredItems: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuItems }, (attachMenuProps && { isOpen: attachMenuProps.isAttachMenuOpen }), { onOpenChange: (isAttachMenuOpen) => {
214
226
  var _a;
package/dist/esm/MessageBar/MessageBar.test.js CHANGED
@@ -326,4 +326,16 @@ describe('Message bar', () => {
326
326
  render(_jsx(MessageBar, { onSendMessage: jest.fn, isThinking: true }));
327
327
  expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar')).toHaveClass('pf-v6-m-thinking');
328
328
  });
329
+ it('Renders with flex-basis of auto by default', () => {
330
+ render(_jsx(MessageBar, { onSendMessage: jest.fn }));
331
+ expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute('style', 'flex-basis: auto;');
332
+ });
333
+ it('Renders with flex-basis of 100% when forceMultilineLayout is true', () => {
334
+ render(_jsx(MessageBar, { forceMultilineLayout: true, onSendMessage: jest.fn }));
335
+ expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute('style', 'flex-basis: 100%;');
336
+ });
337
+ it('Renders with flex-basis of 100% when additionalActions is truthy', () => {
338
+ render(_jsx(MessageBar, { additionalActions: "actions", onSendMessage: jest.fn }));
339
+ expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute('style', 'flex-basis: 100%;');
340
+ });
329
341
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/chatbot",
3
- "version": "6.5.0-prerelease.28",
3
+ "version": "6.5.0-prerelease.29",
4
4
  "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotMessageBarCustomActions.tsx ADDED
@@ -0,0 +1,190 @@
1
+ import { useState, FunctionComponent, ReactNode } from 'react';
2
+ import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
3
+ import {
4
+ Divider,
5
+ DropdownItem,
6
+ DropdownList,
7
+ Label,
8
+ MenuToggle,
9
+ Select,
10
+ SelectList,
11
+ SelectOption
12
+ } from '@patternfly/react-core';
13
+ import { PlusIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
14
+ import { useDropzone } from 'react-dropzone';
15
+
16
+ export const ChatbotMessageBarCustomActionsExample: FunctionComponent = () => {
17
+ const [isFirstMenuOpen, setIsFirstMenuOpen] = useState<boolean>(false);
18
+ const [isSecondMenuOpen, setIsSecondMenuOpen] = useState<boolean>(false);
19
+ const [isModelSelectOpen, setIsModelSelectOpen] = useState<boolean>(false);
20
+ const [selectedModel, setSelectedModel] = useState<string>('GPT-4');
21
+ const [showCanvasLabel, setShowCanvasLabel] = useState<boolean>(true);
22
+
23
+ const handleSend = (message: string | number) => alert(message);
24
+
25
+ const { open, getInputProps } = useDropzone({
26
+ multiple: true,
27
+ // eslint-disable-next-line no-console
28
+ onDropAccepted: () => console.log('fileUploaded')
29
+ });
30
+
31
+ const onFirstMenuToggle = () => {
32
+ setIsFirstMenuOpen(!isFirstMenuOpen);
33
+ };
34
+
35
+ const onSecondMenuToggle = () => {
36
+ setIsSecondMenuOpen(!isSecondMenuOpen);
37
+ };
38
+
39
+ const onModelSelect = (
40
+ _event: React.MouseEvent<Element, MouseEvent> | undefined,
41
+ value: string | number | undefined
42
+ ) => {
43
+ setSelectedModel(value as string);
44
+ setIsModelSelectOpen(false);
45
+ };
46
+
47
+ const firstMenuItems: ReactNode = (
48
+ <DropdownList>
49
+ <DropdownItem value="Logs" id="logs" icon={<ClipboardIcon />}>
50
+ Logs
51
+ </DropdownItem>
52
+ <DropdownItem value="YAML - Status" id="yaml-status" icon={<CodeIcon />}>
53
+ YAML - Status
54
+ </DropdownItem>
55
+ <DropdownItem value="YAML - All contents" id="yaml-all" icon={<CodeIcon />}>
56
+ YAML - All contents
57
+ </DropdownItem>
58
+ <Divider key="divider" />
59
+ <DropdownItem value="Upload from computer" id="upload" icon={<UploadIcon />} onClick={open}>
60
+ Upload from computer
61
+ </DropdownItem>
62
+ </DropdownList>
63
+ );
64
+
65
+ const secondMenuItems: ReactNode = (
66
+ <DropdownList>
67
+ <DropdownItem value="canvas" id="canvas">
68
+ {showCanvasLabel ? 'Disable' : 'Enable'} Canvas
69
+ </DropdownItem>
70
+ <Divider key="divider-1" />
71
+ <DropdownItem value="Logs" id="logs" icon={<ClipboardIcon />}>
72
+ Logs
73
+ </DropdownItem>
74
+ <DropdownItem value="YAML - Status" id="yaml-status" icon={<CodeIcon />}>
75
+ YAML - Status
76
+ </DropdownItem>
77
+ <DropdownItem value="YAML - All contents" id="yaml-all" icon={<CodeIcon />}>
78
+ YAML - All contents
79
+ </DropdownItem>
80
+ <Divider key="divider-2" />
81
+ <DropdownItem value="Upload from computer" id="upload" icon={<UploadIcon />} onClick={open}>
82
+ Upload from computer
83
+ </DropdownItem>
84
+ </DropdownList>
85
+ );
86
+
87
+ const modelOptions = ['GPT-4', 'GPT-3.5', 'Claude', 'Llama 2'];
88
+
89
+ return (
90
+ <>
91
+ {/* This is required for react-dropzone to work in Safari and Firefox */}
92
+ <input {...getInputProps()} hidden />
93
+ <div style={{ marginBottom: '1rem' }}>
94
+ <h4 style={{ marginBottom: '0.5rem' }}>Custom attach menu with a PlusIcon at the start</h4>
95
+ <MessageBar
96
+ onSendMessage={handleSend}
97
+ attachButtonPosition="start"
98
+ attachMenuProps={{
99
+ isAttachMenuOpen: isFirstMenuOpen,
100
+ setIsAttachMenuOpen: setIsFirstMenuOpen,
101
+ attachMenuItems: firstMenuItems,
102
+ onAttachMenuSelect: (_ev, value) => {
103
+ // eslint-disable-next-line no-console
104
+ console.log('selected', value);
105
+ setIsFirstMenuOpen(false);
106
+ },
107
+ attachMenuInputPlaceholder: 'Search options...',
108
+ onAttachMenuToggleClick: onFirstMenuToggle,
109
+ onAttachMenuOnOpenChangeKeys: ['Escape', 'Tab']
110
+ }}
111
+ buttonProps={{
112
+ attach: {
113
+ icon: <PlusIcon />,
114
+ tooltipContent: 'Message actions',
115
+ 'aria-label': 'Message actions'
116
+ }
117
+ }}
118
+ />
119
+ </div>
120
+
121
+ <div>
122
+ <h4 style={{ marginBottom: '0.5rem' }}>Custom attach menu with additional actions</h4>
123
+ <MessageBar
124
+ onSendMessage={handleSend}
125
+ attachButtonPosition="start"
126
+ attachMenuProps={{
127
+ isAttachMenuOpen: isSecondMenuOpen,
128
+ setIsAttachMenuOpen: setIsSecondMenuOpen,
129
+ attachMenuItems: secondMenuItems,
130
+ onAttachMenuOnOpenChangeKeys: ['Escape', 'Tab'],
131
+ onAttachMenuSelect: (_ev, value) => {
132
+ // eslint-disable-next-line no-console
133
+ console.log('selected', value);
134
+ if (value === 'canvas') {
135
+ setShowCanvasLabel(!showCanvasLabel);
136
+ }
137
+ setIsSecondMenuOpen(false);
138
+ },
139
+ onAttachMenuToggleClick: onSecondMenuToggle
140
+ }}
141
+ buttonProps={{
142
+ attach: {
143
+ icon: <PlusIcon />,
144
+ tooltipContent: 'Message actions',
145
+ 'aria-label': 'Message actions'
146
+ }
147
+ }}
148
+ additionalActions={
149
+ <>
150
+ <Select
151
+ isOpen={isModelSelectOpen}
152
+ selected={selectedModel}
153
+ shouldFocusToggleOnSelect
154
+ onSelect={onModelSelect}
155
+ onOpenChange={(isOpen) => setIsModelSelectOpen(isOpen)}
156
+ toggle={(toggleRef) => (
157
+ <MenuToggle
158
+ ref={toggleRef}
159
+ variant="plainText"
160
+ onClick={() => setIsModelSelectOpen(!isModelSelectOpen)}
161
+ isExpanded={isModelSelectOpen}
162
+ aria-label={`${selectedModel}, Select a model`}
163
+ style={{
164
+ minWidth: '120px'
165
+ }}
166
+ >
167
+ {selectedModel}
168
+ </MenuToggle>
169
+ )}
170
+ >
171
+ <SelectList>
172
+ {modelOptions.map((option) => (
173
+ <SelectOption key={option} value={option}>
174
+ {option}
175
+ </SelectOption>
176
+ ))}
177
+ </SelectList>
178
+ </Select>
179
+ {showCanvasLabel && (
180
+ <Label closeBtnAriaLabel="Remove Canvas mode" onClose={() => setShowCanvasLabel(false)}>
181
+ Canvas
182
+ </Label>
183
+ )}
184
+ </>
185
+ }
186
+ />
187
+ </div>
188
+ </>
189
+ );
190
+ };
package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md CHANGED
@@ -70,11 +70,11 @@ import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
70
70
  import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem';
71
71
  import { ChatbotModal } from '@patternfly/chatbot/dist/dynamic/ChatbotModal';
72
72
  import SettingsForm from '@patternfly/chatbot/dist/dynamic/Settings';
73
- import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, ThumbtackIcon, UploadIcon } from '@patternfly/react-icons';
73
+ import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, PlusIcon, ThumbtackIcon, UploadIcon } from '@patternfly/react-icons';
74
74
  import { useDropzone } from 'react-dropzone';
75
75
 
76
76
  import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
77
- import { Button, DropdownItem, DropdownList, Checkbox, MenuToggle, Select, SelectList, SelectOption } from '@patternfly/react-core';
77
+ import { Button, Label, DropdownItem, DropdownList, Checkbox, MenuToggle, Select, SelectList, SelectOption } from '@patternfly/react-core';
78
78
 
79
79
  import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
80
80
  import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
@@ -291,6 +291,19 @@ Attachments can also be added to the ChatBot via [drag and drop.](/extensions/ch
291
291
 
292
292
  ```
293
293
 
294
+ ### Message bar with custom attach menu and additional actions
295
+
296
+ You can move the attach button to the start of the message bar and customize it with a different icon. To include additional actions in the message bar you can also use the `additionalActions` prop.
297
+
298
+ This example shows two message bar variations:
299
+
300
+ 1. A message bar with a custom attach menu where a `PlusIcon` is positioned at the start
301
+ 2. The same custom attach menu with additional actions, including a model selector menu and a dismissable "Canvas" label
302
+
303
+ ```js file="./ChatbotMessageBarCustomActions.tsx"
304
+
305
+ ```
306
+
294
307
  ### Footer with message bar and footnote
295
308
 
296
309
  A simple footer with a message bar and footnote would have this code structure:
package/src/MessageBar/MessageBar.scss CHANGED
@@ -66,6 +66,19 @@
66
66
  padding-block-start: var(--pf-t--global--spacer--xs);
67
67
  padding-block-end: var(--pf-t--global--spacer--xs);
68
68
  gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
69
+
70
+ &.pf-m-grouped {
71
+ flex-basis: 100%;
72
+ justify-content: space-between;
73
+ }
74
+ }
75
+
76
+ &-actions-group {
77
+ display: flex;
78
+ padding-block-start: var(--pf-t--global--spacer--xs);
79
+ padding-block-end: var(--pf-t--global--spacer--xs);
80
+ gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
81
+ align-items: center;
69
82
  }
70
83
 
71
84
  &-input {
@@ -150,7 +163,8 @@
150
163
  }
151
164
 
152
165
  .pf-m-compact {
153
- .pf-chatbot__message-bar-actions {
166
+ .pf-chatbot__message-bar-actions,
167
+ .pf-chatbot__message-bar-actions-group {
154
168
  padding-block-start: var(--pf-t--global--spacer--sm);
155
169
  padding-block-end: var(--pf-t--global--spacer--sm);
156
170
  }
package/src/MessageBar/MessageBar.test.tsx CHANGED
@@ -488,4 +488,31 @@ describe('Message bar', () => {
488
488
 
489
489
  expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar')).toHaveClass('pf-v6-m-thinking');
490
490
  });
491
+
492
+ it('Renders with flex-basis of auto by default', () => {
493
+ render(<MessageBar onSendMessage={jest.fn} />);
494
+
495
+ expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute(
496
+ 'style',
497
+ 'flex-basis: auto;'
498
+ );
499
+ });
500
+
501
+ it('Renders with flex-basis of 100% when forceMultilineLayout is true', () => {
502
+ render(<MessageBar forceMultilineLayout onSendMessage={jest.fn} />);
503
+
504
+ expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute(
505
+ 'style',
506
+ 'flex-basis: 100%;'
507
+ );
508
+ });
509
+
510
+ it('Renders with flex-basis of 100% when additionalActions is truthy', () => {
511
+ render(<MessageBar additionalActions="actions" onSendMessage={jest.fn} />);
512
+
513
+ expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute(
514
+ 'style',
515
+ 'flex-basis: 100%;'
516
+ );
517
+ });
491
518
  });
package/src/MessageBar/MessageBar.tsx CHANGED
@@ -58,6 +58,8 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
58
58
  placeholder?: string;
59
59
  /** Flag to disable/enable the Attach button */
60
60
  hasAttachButton?: boolean;
61
+ /** Whether the attach button is rendered before or after the message input. */
62
+ attachButtonPosition?: 'start' | 'end';
61
63
  /** Flag to enable the Microphone button */
62
64
  hasMicrophoneButton?: boolean;
63
65
  /** Placeholder text when listening */
@@ -116,6 +118,10 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
116
118
  innerRef?: React.Ref<HTMLTextAreaElement>;
117
119
  /** Sets background color to primary */
118
120
  isPrimary?: boolean;
121
+ /** Additional actions to render for the message bar. This will force a multiline layout, and the actions will render at the start of the container. */
122
+ additionalActions?: React.ReactNode;
123
+ /** Flag indicating whether a multiline layout for the message input and actions should be forced. This can be used to always render actions below the message input. */
124
+ forceMultilineLayout?: boolean;
119
125
  /** @beta Flag indicating whether the message bar has an AI indicator border. */
120
126
  hasAiIndicator?: boolean;
121
127
  /** @beta Flag indicating whether the chatbot is thinking in response to a query, adding an animation to the message bar. */
@@ -128,6 +134,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
128
134
  alwayShowSendButton,
129
135
  placeholder = 'Send a message...',
130
136
  hasAttachButton = true,
137
+ attachButtonPosition = 'end',
131
138
  hasMicrophoneButton,
132
139
  listeningText = 'Listening',
133
140
  handleAttach,
@@ -151,6 +158,8 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
151
158
  dropzoneProps,
152
159
  innerRef,
153
160
  isPrimary,
161
+ additionalActions,
162
+ forceMultilineLayout = false,
154
163
  hasAiIndicator,
155
164
  isThinking,
156
165
  ...props
@@ -161,7 +170,9 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
161
170
  const [isListeningMessage, setIsListeningMessage] = useState<boolean>(false);
162
171
  const [hasSentMessage, setHasSentMessage] = useState(false);
163
172
  const [isComposing, setIsComposing] = useState(false);
164
- const [isMultiline, setIsMultiline] = useState(false);
173
+
174
+ const shouldForceMultiline = forceMultilineLayout || additionalActions;
175
+ const [isMultiline, setIsMultiline] = useState(shouldForceMultiline);
165
176
  const inputRef = useRef<HTMLTextAreaElement>(null);
166
177
  const textareaRef = (innerRef as React.RefObject<HTMLTextAreaElement>) ?? inputRef;
167
178
  const attachButtonRef = useRef<HTMLButtonElement>(null);
@@ -178,7 +189,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
178
189
 
179
190
  const grandparent = parent.parentElement;
180
191
  if (grandparent) {
181
- grandparent.style.setProperty('flex-basis', 'auto');
192
+ grandparent.style.setProperty('flex-basis', shouldForceMultiline ? '100%' : 'auto');
182
193
  }
183
194
  }
184
195
  };
@@ -227,7 +238,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
227
238
  const parent = field.parentElement;
228
239
  if (parent) {
229
240
  const grandparent = parent.parentElement;
230
- if (textIsLongerThan2Lines(field) && grandparent) {
241
+ if ((textIsLongerThan2Lines(field) || shouldForceMultiline) && grandparent) {
231
242
  grandparent.style.setProperty('flex-basis', `100%`);
232
243
  }
233
244
  }
@@ -277,14 +288,14 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
277
288
  if (field) {
278
289
  if (field.value === '') {
279
290
  setInitialLineHeight(field);
280
- setIsMultiline(false);
291
+ !shouldForceMultiline && setIsMultiline(false);
281
292
  } else {
282
293
  setAutoHeight(field);
283
294
  setAutoWidth(field);
284
- checkIfMultiline(field);
295
+ !shouldForceMultiline && checkIfMultiline(field);
285
296
  }
286
297
  }
287
- }, [displayMode, message, setAutoWidth, checkIfMultiline]);
298
+ }, [displayMode, message, setAutoWidth, shouldForceMultiline, checkIfMultiline]);
288
299
 
289
300
  useEffect(() => {
290
301
  const field = textareaRef.current;
@@ -300,10 +311,10 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
300
311
  if (textareaRef.current) {
301
312
  if (event.target.value === '') {
302
313
  setInitialLineHeight(textareaRef.current);
303
- setIsMultiline(false);
314
+ !shouldForceMultiline && setIsMultiline(false);
304
315
  } else {
305
316
  setAutoHeight(textareaRef.current);
306
- checkIfMultiline(textareaRef.current);
317
+ !shouldForceMultiline && checkIfMultiline(textareaRef.current);
307
318
  }
308
319
  }
309
320
  setMessage(event.target.value);
@@ -365,6 +376,55 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
365
376
  onChange && onChange({} as ChangeEvent<HTMLTextAreaElement>, message);
366
377
  };
367
378
 
379
+ const renderAttachButton = () => {
380
+ if (!attachMenuProps && hasAttachButton) {
381
+ return (
382
+ <AttachButton
383
+ onAttachAccepted={handleAttach}
384
+ isDisabled={isListeningMessage}
385
+ tooltipContent={buttonProps?.attach?.tooltipContent}
386
+ inputTestId={buttonProps?.attach?.inputTestId}
387
+ isCompact={isCompact}
388
+ tooltipProps={buttonProps?.attach?.tooltipProps}
389
+ allowedFileTypes={allowedFileTypes}
390
+ minSize={minSize}
391
+ maxSize={maxSize}
392
+ maxFiles={maxFiles}
393
+ isAttachmentDisabled={isAttachmentDisabled}
394
+ onAttach={onAttach}
395
+ onAttachRejected={onAttachRejected}
396
+ validator={validator}
397
+ dropzoneProps={dropzoneProps}
398
+ {...buttonProps?.attach}
399
+ {...buttonProps?.attach?.props}
400
+ />
401
+ );
402
+ }
403
+ if (attachMenuProps) {
404
+ return (
405
+ <AttachButton
406
+ ref={attachButtonRef}
407
+ onClick={handleAttachMenuToggle}
408
+ isDisabled={isListeningMessage}
409
+ tooltipContent={buttonProps?.attach?.tooltipContent}
410
+ isCompact={isCompact}
411
+ tooltipProps={buttonProps?.attach?.tooltipProps}
412
+ allowedFileTypes={allowedFileTypes}
413
+ minSize={minSize}
414
+ maxSize={maxSize}
415
+ maxFiles={maxFiles}
416
+ isAttachmentDisabled={isAttachmentDisabled}
417
+ onAttach={onAttach}
418
+ onAttachRejected={onAttachRejected}
419
+ validator={validator}
420
+ dropzoneProps={dropzoneProps}
421
+ {...buttonProps?.attach}
422
+ />
423
+ );
424
+ }
425
+ };
426
+
427
+ const isAttachButtonAtStart = attachButtonPosition === 'start';
368
428
  const renderButtons = () => {
369
429
  if (hasStopButton && handleStopButton) {
370
430
  return (
@@ -379,47 +439,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
379
439
  }
380
440
  return (
381
441
  <>
382
- {attachMenuProps && (
383
- <AttachButton
384
- ref={attachButtonRef}
385
- onClick={handleAttachMenuToggle}
386
- isDisabled={isListeningMessage}
387
- tooltipContent={buttonProps?.attach?.tooltipContent}
388
- isCompact={isCompact}
389
- tooltipProps={buttonProps?.attach?.tooltipProps}
390
- allowedFileTypes={allowedFileTypes}
391
- minSize={minSize}
392
- maxSize={maxSize}
393
- maxFiles={maxFiles}
394
- isAttachmentDisabled={isAttachmentDisabled}
395
- onAttach={onAttach}
396
- onAttachRejected={onAttachRejected}
397
- validator={validator}
398
- dropzoneProps={dropzoneProps}
399
- {...buttonProps?.attach}
400
- />
401
- )}
402
- {!attachMenuProps && hasAttachButton && (
403
- <AttachButton
404
- onAttachAccepted={handleAttach}
405
- isDisabled={isListeningMessage}
406
- tooltipContent={buttonProps?.attach?.tooltipContent}
407
- inputTestId={buttonProps?.attach?.inputTestId}
408
- isCompact={isCompact}
409
- tooltipProps={buttonProps?.attach?.tooltipProps}
410
- allowedFileTypes={allowedFileTypes}
411
- minSize={minSize}
412
- maxSize={maxSize}
413
- maxFiles={maxFiles}
414
- isAttachmentDisabled={isAttachmentDisabled}
415
- onAttach={onAttach}
416
- onAttachRejected={onAttachRejected}
417
- validator={validator}
418
- dropzoneProps={dropzoneProps}
419
- {...buttonProps?.attach}
420
- {...buttonProps?.attach?.props}
421
- />
422
- )}
442
+ {!isAttachButtonAtStart && renderAttachButton()}
423
443
  {hasMicrophoneButton && (
424
444
  <MicrophoneButton
425
445
  isListening={isListeningMessage}
@@ -447,8 +467,12 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
447
467
  );
448
468
  };
449
469
 
470
+ const hasGroupedActions = additionalActions || (isAttachButtonAtStart && isMultiline);
450
471
  const messageBarContents = (
451
472
  <>
473
+ {isAttachButtonAtStart && !isMultiline && (
474
+ <div className="pf-chatbot__message-bar-actions test">{renderAttachButton()}</div>
475
+ )}
452
476
  <div className={`pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}`}>
453
477
  <TextArea
454
478
  className="pf-chatbot__message-textarea"
@@ -463,7 +487,19 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
463
487
  {...props}
464
488
  />
465
489
  </div>
466
- <div className="pf-chatbot__message-bar-actions">{renderButtons()}</div>
490
+ <div className={css('pf-chatbot__message-bar-actions', hasGroupedActions && 'pf-m-grouped')}>
491
+ {hasGroupedActions ? (
492
+ <>
493
+ <div className={css('pf-chatbot__message-bar-actions-group')}>
494
+ {isAttachButtonAtStart && renderAttachButton()}
495
+ {additionalActions}
496
+ </div>
497
+ <div className={css('pf-chatbot__message-bar-actions-group')}>{renderButtons()}</div>
498
+ </>
499
+ ) : (
500
+ renderButtons()
501
+ )}
502
+ </div>
467
503
  </>
468
504
  );
469
505