@patternfly/chatbot 2.2.0-prerelease.35 → 2.2.0-prerelease.36

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 (4) hide show
  1. package/dist/cjs/MessageBar/MessageBar.js +12 -14
  2. package/dist/esm/MessageBar/MessageBar.js +12 -14
  3. package/package.json +1 -1
  4. package/src/MessageBar/MessageBar.tsx +27 -23
package/dist/cjs/MessageBar/MessageBar.js CHANGED
@@ -68,7 +68,7 @@ const MessageBar = (_a) => {
68
68
  const lines = field.scrollHeight / lineHeight;
69
69
  return lines > 2;
70
70
  };
71
- const setAutoWidth = (field) => {
71
+ const setAutoWidth = react_1.default.useCallback((field) => {
72
72
  const parent = field.parentElement;
73
73
  if (parent) {
74
74
  const grandparent = parent.parentElement;
@@ -76,7 +76,7 @@ const MessageBar = (_a) => {
76
76
  grandparent.style.setProperty('flex-basis', `100%`);
77
77
  }
78
78
  }
79
- };
79
+ }, []);
80
80
  const handleNewLine = (field) => {
81
81
  const parent = field.parentElement;
82
82
  if (parent) {
@@ -114,7 +114,7 @@ const MessageBar = (_a) => {
114
114
  return () => {
115
115
  window.removeEventListener('resize', resetHeight);
116
116
  };
117
- }, []);
117
+ }, [setAutoWidth]);
118
118
  react_1.default.useEffect(() => {
119
119
  const field = textareaRef.current;
120
120
  if (field) {
@@ -126,7 +126,7 @@ const MessageBar = (_a) => {
126
126
  setAutoWidth(field);
127
127
  }
128
128
  }
129
- }, [displayMode, message]);
129
+ }, [displayMode, message, setAutoWidth]);
130
130
  react_1.default.useEffect(() => {
131
131
  const field = textareaRef.current;
132
132
  if (field) {
@@ -145,20 +145,18 @@ const MessageBar = (_a) => {
145
145
  }
146
146
  }
147
147
  setMessage(event.target.value);
148
- }, []);
148
+ }, [onChange]);
149
149
  // Handle sending message
150
- const handleSend = react_1.default.useCallback(() => {
151
- setMessage((m) => {
152
- onSendMessage(m);
153
- setHasSentMessage(true);
154
- return '';
155
- });
150
+ const handleSend = react_1.default.useCallback((newMessage) => {
151
+ onSendMessage(newMessage);
152
+ setHasSentMessage(true);
153
+ setMessage('');
156
154
  }, [onSendMessage]);
157
155
  const handleKeyDown = react_1.default.useCallback((event) => {
158
156
  if (event.key === 'Enter' && !event.shiftKey) {
159
157
  event.preventDefault();
160
158
  if (!isSendButtonDisabled && !hasStopButton) {
161
- handleSend();
159
+ handleSend(message);
162
160
  }
163
161
  }
164
162
  if (event.key === 'Enter' && event.shiftKey) {
@@ -166,7 +164,7 @@ const MessageBar = (_a) => {
166
164
  handleNewLine(textareaRef.current);
167
165
  }
168
166
  }
169
- }, [handleSend, isSendButtonDisabled, handleStopButton]);
167
+ }, [isSendButtonDisabled, hasStopButton, handleSend, message]);
170
168
  const handleAttachMenuToggle = () => {
171
169
  (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen) && (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen(!(attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.isAttachMenuOpen)));
172
170
  attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuToggleClick();
@@ -184,7 +182,7 @@ const MessageBar = (_a) => {
184
182
  attachMenuProps && (react_1.default.createElement(AttachButton_1.AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _c === void 0 ? void 0 : _c.tooltipContent }, (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.props))),
185
183
  !attachMenuProps && hasAttachButton && (react_1.default.createElement(AttachButton_1.AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipContent, inputTestId: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.inputTestId }, (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.props))),
186
184
  hasMicrophoneButton && (react_1.default.createElement(MicrophoneButton_1.default, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _h === void 0 ? void 0 : _h.tooltipContent, language: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _j === void 0 ? void 0 : _j.language }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _k === void 0 ? void 0 : _k.props))),
187
- (alwayShowSendButton || message) && (react_1.default.createElement(SendButton_1.default, Object.assign({ value: message, onClick: handleSend, isDisabled: isSendButtonDisabled, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _l === void 0 ? void 0 : _l.tooltipContent }, (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _m === void 0 ? void 0 : _m.props)))));
185
+ (alwayShowSendButton || message) && (react_1.default.createElement(SendButton_1.default, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _l === void 0 ? void 0 : _l.tooltipContent }, (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _m === void 0 ? void 0 : _m.props)))));
188
186
  };
189
187
  const messageBarContents = (react_1.default.createElement(react_1.default.Fragment, null,
190
188
  react_1.default.createElement("div", { className: "pf-chatbot__message-bar-input" },
package/dist/esm/MessageBar/MessageBar.js CHANGED
@@ -62,7 +62,7 @@ export const MessageBar = (_a) => {
62
62
  const lines = field.scrollHeight / lineHeight;
63
63
  return lines > 2;
64
64
  };
65
- const setAutoWidth = (field) => {
65
+ const setAutoWidth = React.useCallback((field) => {
66
66
  const parent = field.parentElement;
67
67
  if (parent) {
68
68
  const grandparent = parent.parentElement;
@@ -70,7 +70,7 @@ export const MessageBar = (_a) => {
70
70
  grandparent.style.setProperty('flex-basis', `100%`);
71
71
  }
72
72
  }
73
- };
73
+ }, []);
74
74
  const handleNewLine = (field) => {
75
75
  const parent = field.parentElement;
76
76
  if (parent) {
@@ -108,7 +108,7 @@ export const MessageBar = (_a) => {
108
108
  return () => {
109
109
  window.removeEventListener('resize', resetHeight);
110
110
  };
111
- }, []);
111
+ }, [setAutoWidth]);
112
112
  React.useEffect(() => {
113
113
  const field = textareaRef.current;
114
114
  if (field) {
@@ -120,7 +120,7 @@ export const MessageBar = (_a) => {
120
120
  setAutoWidth(field);
121
121
  }
122
122
  }
123
- }, [displayMode, message]);
123
+ }, [displayMode, message, setAutoWidth]);
124
124
  React.useEffect(() => {
125
125
  const field = textareaRef.current;
126
126
  if (field) {
@@ -139,20 +139,18 @@ export const MessageBar = (_a) => {
139
139
  }
140
140
  }
141
141
  setMessage(event.target.value);
142
- }, []);
142
+ }, [onChange]);
143
143
  // Handle sending message
144
- const handleSend = React.useCallback(() => {
145
- setMessage((m) => {
146
- onSendMessage(m);
147
- setHasSentMessage(true);
148
- return '';
149
- });
144
+ const handleSend = React.useCallback((newMessage) => {
145
+ onSendMessage(newMessage);
146
+ setHasSentMessage(true);
147
+ setMessage('');
150
148
  }, [onSendMessage]);
151
149
  const handleKeyDown = React.useCallback((event) => {
152
150
  if (event.key === 'Enter' && !event.shiftKey) {
153
151
  event.preventDefault();
154
152
  if (!isSendButtonDisabled && !hasStopButton) {
155
- handleSend();
153
+ handleSend(message);
156
154
  }
157
155
  }
158
156
  if (event.key === 'Enter' && event.shiftKey) {
@@ -160,7 +158,7 @@ export const MessageBar = (_a) => {
160
158
  handleNewLine(textareaRef.current);
161
159
  }
162
160
  }
163
- }, [handleSend, isSendButtonDisabled, handleStopButton]);
161
+ }, [isSendButtonDisabled, hasStopButton, handleSend, message]);
164
162
  const handleAttachMenuToggle = () => {
165
163
  (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen) && (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen(!(attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.isAttachMenuOpen)));
166
164
  attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuToggleClick();
@@ -178,7 +176,7 @@ export const MessageBar = (_a) => {
178
176
  attachMenuProps && (React.createElement(AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _c === void 0 ? void 0 : _c.tooltipContent }, (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.props))),
179
177
  !attachMenuProps && hasAttachButton && (React.createElement(AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipContent, inputTestId: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.inputTestId }, (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.props))),
180
178
  hasMicrophoneButton && (React.createElement(MicrophoneButton, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _h === void 0 ? void 0 : _h.tooltipContent, language: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _j === void 0 ? void 0 : _j.language }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _k === void 0 ? void 0 : _k.props))),
181
- (alwayShowSendButton || message) && (React.createElement(SendButton, Object.assign({ value: message, onClick: handleSend, isDisabled: isSendButtonDisabled, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _l === void 0 ? void 0 : _l.tooltipContent }, (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _m === void 0 ? void 0 : _m.props)))));
179
+ (alwayShowSendButton || message) && (React.createElement(SendButton, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _l === void 0 ? void 0 : _l.tooltipContent }, (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _m === void 0 ? void 0 : _m.props)))));
182
180
  };
183
181
  const messageBarContents = (React.createElement(React.Fragment, null,
184
182
  React.createElement("div", { className: "pf-chatbot__message-bar-input" },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/chatbot",
3
- "version": "2.2.0-prerelease.35",
3
+ "version": "2.2.0-prerelease.36",
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/src/MessageBar/MessageBar.tsx CHANGED
@@ -141,7 +141,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
141
141
  return lines > 2;
142
142
  };
143
143
 
144
- const setAutoWidth = (field: HTMLTextAreaElement) => {
144
+ const setAutoWidth = React.useCallback((field: HTMLTextAreaElement) => {
145
145
  const parent = field.parentElement;
146
146
  if (parent) {
147
147
  const grandparent = parent.parentElement;
@@ -149,7 +149,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
149
149
  grandparent.style.setProperty('flex-basis', `100%`);
150
150
  }
151
151
  }
152
- };
152
+ }, []);
153
153
 
154
154
  const handleNewLine = (field: HTMLTextAreaElement) => {
155
155
  const parent = field.parentElement;
@@ -188,7 +188,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
188
188
  return () => {
189
189
  window.removeEventListener('resize', resetHeight);
190
190
  };
191
- }, []);
191
+ }, [setAutoWidth]);
192
192
 
193
193
  React.useEffect(() => {
194
194
  const field = textareaRef.current;
@@ -200,7 +200,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
200
200
  setAutoWidth(field);
201
201
  }
202
202
  }
203
- }, [displayMode, message]);
203
+ }, [displayMode, message, setAutoWidth]);
204
204
 
205
205
  React.useEffect(() => {
206
206
  const field = textareaRef.current;
@@ -210,33 +210,37 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
210
210
  }
211
211
  }, [hasSentMessage]);
212
212
 
213
- const handleChange = React.useCallback((event) => {
214
- onChange && onChange(event, event.target.value);
215
- if (textareaRef.current) {
216
- if (event.target.value === '') {
217
- setInitialLineHeight(textareaRef.current);
218
- } else {
219
- setAutoHeight(textareaRef.current);
213
+ const handleChange = React.useCallback(
214
+ (event) => {
215
+ onChange && onChange(event, event.target.value);
216
+ if (textareaRef.current) {
217
+ if (event.target.value === '') {
218
+ setInitialLineHeight(textareaRef.current);
219
+ } else {
220
+ setAutoHeight(textareaRef.current);
221
+ }
220
222
  }
221
- }
222
- setMessage(event.target.value);
223
- }, []);
223
+ setMessage(event.target.value);
224
+ },
225
+ [onChange]
226
+ );
224
227
 
225
228
  // Handle sending message
226
- const handleSend = React.useCallback(() => {
227
- setMessage((m) => {
228
- onSendMessage(m);
229
+ const handleSend = React.useCallback(
230
+ (newMessage: string | number) => {
231
+ onSendMessage(newMessage);
229
232
  setHasSentMessage(true);
230
- return '';
231
- });
232
- }, [onSendMessage]);
233
+ setMessage('');
234
+ },
235
+ [onSendMessage]
236
+ );
233
237
 
234
238
  const handleKeyDown = React.useCallback(
235
239
  (event: React.KeyboardEvent) => {
236
240
  if (event.key === 'Enter' && !event.shiftKey) {
237
241
  event.preventDefault();
238
242
  if (!isSendButtonDisabled && !hasStopButton) {
239
- handleSend();
243
+ handleSend(message);
240
244
  }
241
245
  }
242
246
  if (event.key === 'Enter' && event.shiftKey) {
@@ -245,7 +249,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
245
249
  }
246
250
  }
247
251
  },
248
- [handleSend, isSendButtonDisabled, handleStopButton]
252
+ [isSendButtonDisabled, hasStopButton, handleSend, message]
249
253
  );
250
254
 
251
255
  const handleAttachMenuToggle = () => {
@@ -301,7 +305,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
301
305
  {(alwayShowSendButton || message) && (
302
306
  <SendButton
303
307
  value={message}
304
- onClick={handleSend}
308
+ onClick={() => handleSend(message)}
305
309
  isDisabled={isSendButtonDisabled}
306
310
  tooltipContent={buttonProps?.send?.tooltipContent}
307
311
  {...buttonProps?.send?.props}