@patternfly/chatbot 2.2.0-prerelease.42 → 2.2.0-prerelease.43

package/dist/cjs/MessageBar/MicrophoneButton.js

@@ -64,7 +64,7 @@ const MicrophoneButton = (_a) => {
             };
             setSpeechRecognition(recognition);
         }
-    }, [onSpeechRecognition]);
+    }, [onSpeechRecognition, language, onIsListeningChange]);
     if (!speechRecognition) {
         return null;
     }

package/dist/cjs/MessageBox/MessageBox.js

@@ -29,26 +29,26 @@ const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', ch
             setAtTop(scrollTop === 0);
             setAtBottom(Math.round(scrollTop) + Math.round(clientHeight) >= Math.round(scrollHeight) - 1); // rounding means it could be within a pixel of the bottom
         }
-    }, []);
+    }, [messageBoxRef]);
     const checkOverflow = react_1.default.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             const { scrollHeight, clientHeight } = element;
             setIsOverflowing(scrollHeight >= clientHeight);
         }
-    }, []);
+    }, [messageBoxRef]);
     const scrollToTop = react_1.default.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             element.scrollTo({ top: 0, behavior: 'smooth' });
         }
-    }, []);
+    }, [messageBoxRef]);
     const scrollToBottom = react_1.default.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
         }
-    }, []);
+    }, [messageBoxRef]);
     // Detect scroll position
     react_1.default.useEffect(() => {
         const element = messageBoxRef.current;
@@ -62,7 +62,7 @@ const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', ch
                 element.removeEventListener('scroll', handleScroll);
             };
         }
-    }, [checkOverflow, handleScroll]);
+    }, [checkOverflow, handleScroll, messageBoxRef]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(JumpButton_1.default, { position: "top", isHidden: isOverflowing && atTop, onClick: scrollToTop }),
         react_1.default.createElement("div", { role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' && 'pf-chatbot__messagebox--bottom'} ${className !== null && className !== void 0 ? className : ''}`, ref: innerRef !== null && innerRef !== void 0 ? innerRef : messageBoxRef },

package/dist/esm/MessageBar/MicrophoneButton.js

@@ -58,7 +58,7 @@ export const MicrophoneButton = (_a) => {
             };
             setSpeechRecognition(recognition);
         }
-    }, [onSpeechRecognition]);
+    }, [onSpeechRecognition, language, onIsListeningChange]);
     if (!speechRecognition) {
         return null;
     }

package/dist/esm/MessageBox/MessageBox.js

@@ -23,26 +23,26 @@ const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', ch
             setAtTop(scrollTop === 0);
             setAtBottom(Math.round(scrollTop) + Math.round(clientHeight) >= Math.round(scrollHeight) - 1); // rounding means it could be within a pixel of the bottom
         }
-    }, []);
+    }, [messageBoxRef]);
     const checkOverflow = React.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             const { scrollHeight, clientHeight } = element;
             setIsOverflowing(scrollHeight >= clientHeight);
         }
-    }, []);
+    }, [messageBoxRef]);
     const scrollToTop = React.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             element.scrollTo({ top: 0, behavior: 'smooth' });
         }
-    }, []);
+    }, [messageBoxRef]);
     const scrollToBottom = React.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
         }
-    }, []);
+    }, [messageBoxRef]);
     // Detect scroll position
     React.useEffect(() => {
         const element = messageBoxRef.current;
@@ -56,7 +56,7 @@ const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', ch
                 element.removeEventListener('scroll', handleScroll);
             };
         }
-    }, [checkOverflow, handleScroll]);
+    }, [checkOverflow, handleScroll, messageBoxRef]);
     return (React.createElement(React.Fragment, null,
         React.createElement(JumpButton, { position: "top", isHidden: isOverflowing && atTop, onClick: scrollToTop }),
         React.createElement("div", { role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' && 'pf-chatbot__messagebox--bottom'} ${className !== null && className !== void 0 ? className : ''}`, ref: innerRef !== null && innerRef !== void 0 ? innerRef : messageBoxRef },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "2.2.0-prerelease.42",
+  "version": "2.2.0-prerelease.43",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx

@@ -36,71 +36,74 @@ export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled
     return id.toString();
   };
 
-  const handleSend = (input: string) => {
-    const date = new Date();
-    const newMessages: MessageProps[] = [];
-    messages.forEach((message) => newMessages.push(message));
-    newMessages.push({
-      avatar: userAvatar,
-      avatarProps: { isBordered: true },
-      id: generateId(),
-      name: 'You',
-      role: 'user',
-      content: input,
-      timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`
-    });
-    newMessages.push({
-      avatar: patternflyAvatar,
-      id: generateId(),
-      name,
-      role: 'bot',
-      timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`,
-      isLoading: true
-    });
-    setMessages(newMessages);
-    // make announcement to assistive devices that new messages have been added
-    setAnnouncement(`Message from You: ${input}. Message from ${name} is loading.`);
-
-    // this is for demo purposes only; in a real situation, there would be an API response we would wait for
-    setTimeout(() => {
-      const loadedMessages: MessageProps[] = [];
-      // we can't use structuredClone since messages contains functions, but we can't mutate
-      // items that are going into state or the UI won't update correctly
-      newMessages.forEach((message) => loadedMessages.push(message));
-      loadedMessages.pop();
-      loadedMessages.push({
+  const handleSend = React.useCallback(
+    (input: string) => {
+      const date = new Date();
+      const newMessages: MessageProps[] = [];
+      messages.forEach((message) => newMessages.push(message));
+      newMessages.push({
+        avatar: userAvatar,
+        avatarProps: { isBordered: true },
         id: generateId(),
-        role: 'bot',
-        content: `API response from ${name} goes here`,
-        name,
+        name: 'You',
+        role: 'user',
+        content: input,
+        timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`
+      });
+      newMessages.push({
         avatar: patternflyAvatar,
-        isLoading: false,
-        actions: {
-          // eslint-disable-next-line no-console
-          positive: { onClick: () => console.log('Good response') },
-          // eslint-disable-next-line no-console
-          negative: { onClick: () => console.log('Bad response') },
-          // eslint-disable-next-line no-console
-          copy: { onClick: () => console.log('Copy') },
-          // eslint-disable-next-line no-console
-          share: { onClick: () => console.log('Share') },
-          // eslint-disable-next-line no-console
-          listen: { onClick: () => console.log('Listen') }
-        },
-        timestamp: date.toLocaleString()
+        id: generateId(),
+        name,
+        role: 'bot',
+        timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`,
+        isLoading: true
       });
-      setMessages(loadedMessages);
-      // make announcement to assistive devices that new message has loaded
-      setAnnouncement(`Message from ${name}: API response goes here`);
-      setIsSendButtonDisabled(false);
-    }, 5000);
-  };
+      setMessages(newMessages);
+      // make announcement to assistive devices that new messages have been added
+      setAnnouncement(`Message from You: ${input}. Message from ${name} is loading.`);
+
+      // this is for demo purposes only; in a real situation, there would be an API response we would wait for
+      setTimeout(() => {
+        const loadedMessages: MessageProps[] = [];
+        // we can't use structuredClone since messages contains functions, but we can't mutate
+        // items that are going into state or the UI won't update correctly
+        newMessages.forEach((message) => loadedMessages.push(message));
+        loadedMessages.pop();
+        loadedMessages.push({
+          id: generateId(),
+          role: 'bot',
+          content: `API response from ${name} goes here`,
+          name,
+          avatar: patternflyAvatar,
+          isLoading: false,
+          actions: {
+            // eslint-disable-next-line no-console
+            positive: { onClick: () => console.log('Good response') },
+            // eslint-disable-next-line no-console
+            negative: { onClick: () => console.log('Bad response') },
+            // eslint-disable-next-line no-console
+            copy: { onClick: () => console.log('Copy') },
+            // eslint-disable-next-line no-console
+            share: { onClick: () => console.log('Share') },
+            // eslint-disable-next-line no-console
+            listen: { onClick: () => console.log('Listen') }
+          },
+          timestamp: date.toLocaleString()
+        });
+        setMessages(loadedMessages);
+        // make announcement to assistive devices that new message has loaded
+        setAnnouncement(`Message from ${name}: API response goes here`);
+        setIsSendButtonDisabled(false);
+      }, 5000);
+    },
+    [messages, name, setIsSendButtonDisabled]
+  );
 
   React.useEffect(() => {
     if (input) {
       handleSend(input);
     }
-  }, [hasNewInput]);
+  }, [hasNewInput, input]);
 
   // Auto-scrolls to the latest message
   React.useEffect(() => {

package/src/MessageBar/MicrophoneButton.tsx

@@ -81,7 +81,7 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
 
       setSpeechRecognition(recognition);
     }
-  }, [onSpeechRecognition]);
+  }, [onSpeechRecognition, language, onIsListeningChange]);
 
   if (!speechRecognition) {
     return null;

package/src/MessageBox/MessageBox.tsx

@@ -46,7 +46,7 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
       setAtTop(scrollTop === 0);
       setAtBottom(Math.round(scrollTop) + Math.round(clientHeight) >= Math.round(scrollHeight) - 1); // rounding means it could be within a pixel of the bottom
     }
-  }, []);
+  }, [messageBoxRef]);
 
   const checkOverflow = React.useCallback(() => {
     const element = messageBoxRef.current;
@@ -54,21 +54,21 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
       const { scrollHeight, clientHeight } = element;
       setIsOverflowing(scrollHeight >= clientHeight);
     }
-  }, []);
+  }, [messageBoxRef]);
 
   const scrollToTop = React.useCallback(() => {
     const element = messageBoxRef.current;
     if (element) {
       element.scrollTo({ top: 0, behavior: 'smooth' });
     }
-  }, []);
+  }, [messageBoxRef]);
 
   const scrollToBottom = React.useCallback(() => {
     const element = messageBoxRef.current;
     if (element) {
       element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
     }
-  }, []);
+  }, [messageBoxRef]);
 
   // Detect scroll position
   React.useEffect(() => {
@@ -85,7 +85,7 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
         element.removeEventListener('scroll', handleScroll);
       };
     }
-  }, [checkOverflow, handleScroll]);
+  }, [checkOverflow, handleScroll, messageBoxRef]);
 
   return (
     <>