@patternfly/chatbot 6.3.0-prerelease.13 → 6.3.0-prerelease.14

package/src/Message/TableMessage/ThMessage.tsx

@@ -2,10 +2,9 @@
 // Chatbot Main - Message - Content - Table
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Th, ThProps } from '@patternfly/react-table';
 
-const ThMessage = ({ children, ...props }: ThProps & ExtraProps) => <Th {...props}>{children}</Th>;
+const ThMessage = ({ children, ...props }: Omit<ThProps, 'ref'> & ExtraProps) => <Th {...props}>{children}</Th>;
 
 export default ThMessage;

package/src/Message/TableMessage/TheadMessage.tsx

@@ -2,10 +2,11 @@
 // Chatbot Main - Message - Content - Table
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Thead, TheadProps } from '@patternfly/react-table';
 
-const TheadMessage = ({ children, ...props }: TheadProps & ExtraProps) => <Thead {...props}>{children}</Thead>;
+const TheadMessage = ({ children, ...props }: Omit<TheadProps, 'ref'> & ExtraProps) => (
+  <Thead {...props}>{children}</Thead>
+);
 
 export default TheadMessage;

package/src/Message/TableMessage/TrMessage.tsx

@@ -2,19 +2,19 @@
 // Chatbot Main - Message - Content - Table
 // ============================================================================
 
-import React from 'react';
+import { Children, cloneElement } from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Tr, TrProps } from '@patternfly/react-table';
 
-const TrMessage = ({ children, ...props }: TrProps & ExtraProps & { extraHeaders?: string[] }) => {
+const TrMessage = ({ children, ...props }: Omit<TrProps, 'ref'> & ExtraProps & { extraHeaders?: string[] }) => {
   let tdIndex = 0;
 
   // passthrough so we can place dataLabel on tds
   // places column name on correct child
   const modifyChildren = (children) =>
-    React.Children.map(children, (child) => {
+    Children.map(children, (child) => {
       if (child.type.name === 'td' && props.extraHeaders) {
-        const clonedChild = React.cloneElement(child, { dataLabel: props.extraHeaders[tdIndex] });
+        const clonedChild = cloneElement(child, { dataLabel: props.extraHeaders[tdIndex] });
         tdIndex = tdIndex + 1;
         return clonedChild;
       }

package/src/Message/TextMessage/TextMessage.tsx

@@ -2,11 +2,10 @@
 // Chatbot Main - Message - Content - Text
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Content, ContentProps } from '@patternfly/react-core';
 
-const TextMessage = ({ component, children, ...props }: ContentProps & ExtraProps) => (
+const TextMessage = ({ component, children, ...props }: Omit<ContentProps, 'ref'> & ExtraProps) => (
   <span className="pf-chatbot__message-text">
     <Content component={component} {...props}>
       {children}

package/src/Message/UserFeedback/CloseButton.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Main - Messages - Close Button
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
 import { Button, ButtonProps } from '@patternfly/react-core';
@@ -14,7 +14,7 @@ export interface CloseButtonProps extends ButtonProps {
   ariaLabel?: string;
 }
 
-const CloseButton: React.FunctionComponent<CloseButtonProps> = ({ onClose, ariaLabel }: CloseButtonProps) => (
+const CloseButton: FunctionComponent<CloseButtonProps> = ({ onClose, ariaLabel }: CloseButtonProps) => (
   <Button variant="plain" onClick={onClose} icon={<CloseIcon />} aria-label={ariaLabel} />
 );
 

package/src/Message/UserFeedback/UserFeedback.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';

package/src/Message/UserFeedback/UserFeedback.tsx

@@ -1,7 +1,9 @@
 // ============================================================================
 // Chatbot Main - Messages - Feedback Card
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
+
+import { useState, useRef, useEffect } from 'react';
 
 // Import PatternFly components
 import {
@@ -54,7 +56,7 @@ export interface UserFeedbackProps extends Omit<CardProps, 'onSubmit'>, OUIAProp
   timestamp?: string;
 }
 
-const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
+const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
   className,
   timestamp,
   title = 'Why did you choose this rating?',
@@ -74,11 +76,11 @@ const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
   isCompact,
   ...props
 }: UserFeedbackProps) => {
-  const [selectedResponse, setSelectedResponse] = React.useState<string>();
-  const [value, setValue] = React.useState('');
-  const divRef = React.useRef<HTMLDivElement>(null);
+  const [selectedResponse, setSelectedResponse] = useState<string>();
+  const [value, setValue] = useState('');
+  const divRef = useRef<HTMLDivElement>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (focusOnLoad) {
       divRef.current?.focus();
     }

package/src/Message/UserFeedback/UserFeedbackComplete.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { act, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';

package/src/Message/UserFeedback/UserFeedbackComplete.tsx

@@ -1,7 +1,9 @@
 // ============================================================================
 // Chatbot Main - Messages - Feedback Complete Card
 // ============================================================================
-import React from 'react';
+import type { MouseEvent as ReactMouseEvent, FunctionComponent } from 'react';
+
+import { useState, useRef, useEffect } from 'react';
 
 // Import PatternFly components
 import { Card, CardBody, CardHeader, CardProps, CardTitle, OUIAProps, useOUIAProps } from '@patternfly/react-core';
@@ -46,7 +48,7 @@ export interface UserFeedbackCompleteProps extends Omit<CardProps, 'ref'>, OUIAP
   timestamp?: string;
 }
 
-const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> = ({
+const UserFeedbackComplete: FunctionComponent<UserFeedbackCompleteProps> = ({
   className,
   title = 'Feedback submitted',
   body = "We've received your response. Thank you for sharing your feedback!",
@@ -66,21 +68,21 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
   isCompact,
   ...props
 }: UserFeedbackCompleteProps) => {
-  const [timedOut, setTimedOut] = React.useState(false);
-  const [timedOutAnimation, setTimedOutAnimation] = React.useState(true);
-  const [isMouseOver, setIsMouseOver] = React.useState<boolean | undefined>();
-  const [containsFocus, setContainsFocus] = React.useState<boolean | undefined>();
+  const [timedOut, setTimedOut] = useState(false);
+  const [timedOutAnimation, setTimedOutAnimation] = useState(true);
+  const [isMouseOver, setIsMouseOver] = useState<boolean | undefined>();
+  const [containsFocus, setContainsFocus] = useState<boolean | undefined>();
   const dismissed = timedOut && timedOutAnimation && !isMouseOver && !containsFocus;
-  const divRef = React.useRef<HTMLDivElement>(null);
+  const divRef = useRef<HTMLDivElement>(null);
   const ouiaProps = useOUIAProps('User Feedback Complete', ouiaId, ouiaSafe);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (focusOnLoad) {
       divRef.current?.focus();
     }
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const calculatedTimeout = timeout === true ? 8000 : Number(timeout);
     if (calculatedTimeout > 0) {
       const timer = setTimeout(() => setTimedOut(true), calculatedTimeout);
@@ -88,7 +90,7 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
     }
   }, [timeout]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onDocumentFocus = () => {
       if (divRef.current) {
         if (divRef.current.contains(document.activeElement)) {
@@ -103,14 +105,14 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
     return () => document.removeEventListener('focus', onDocumentFocus, true);
   }, [containsFocus]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (containsFocus === false || isMouseOver === false) {
       const timer = setTimeout(() => setTimedOutAnimation(true), timeoutAnimation);
       return () => clearTimeout(timer);
     }
   }, [containsFocus, isMouseOver, timeoutAnimation]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     dismissed && onTimeout && onTimeout();
   }, [dismissed, onTimeout]);
 
@@ -118,13 +120,13 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
     return null;
   }
 
-  const myOnMouseEnter = (ev: React.MouseEvent<HTMLDivElement>) => {
+  const myOnMouseEnter = (ev: ReactMouseEvent<HTMLDivElement>) => {
     setIsMouseOver(true);
     setTimedOutAnimation(false);
     onMouseEnter && onMouseEnter(ev);
   };
 
-  const myOnMouseLeave = (ev: React.MouseEvent<HTMLDivElement>) => {
+  const myOnMouseLeave = (ev: ReactMouseEvent<HTMLDivElement>) => {
     setIsMouseOver(false);
     onMouseLeave && onMouseLeave(ev);
   };

package/src/MessageBar/AttachButton.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';

package/src/MessageBar/AttachButton.tsx

@@ -1,7 +1,9 @@
 // ============================================================================
 // Chatbot Footer - Message Bar - Attach
 // ============================================================================
-import React from 'react';
+import type { Ref, FunctionComponent } from 'react';
+
+import { forwardRef } from 'react';
 
 // Import PatternFly components
 import { Button, ButtonProps, DropEvent, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
@@ -28,7 +30,7 @@ export interface AttachButtonProps extends ButtonProps {
   isCompact?: boolean;
 }
 
-const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
+const AttachButtonBase: FunctionComponent<AttachButtonProps> = ({
   onAttachAccepted,
   onClick,
   isDisabled,
@@ -81,6 +83,6 @@ const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
   );
 };
 
-export const AttachButton = React.forwardRef((props: AttachButtonProps, ref: React.Ref<any>) => (
+export const AttachButton = forwardRef((props: AttachButtonProps, ref: Ref<any>) => (
   <AttachButtonBase innerRef={ref} {...props} />
 ));

package/src/MessageBar/MessageBar.test.tsx

@@ -1,5 +1,4 @@
 import '@testing-library/jest-dom';
-import React from 'react';
 import { DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
 import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon } from '@patternfly/react-icons';
 import { render, screen } from '@testing-library/react';

package/src/MessageBar/MessageBar.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type { ChangeEvent, FunctionComponent, KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { ButtonProps, DropEvent, TextArea, TextAreaProps, TooltipProps } from '@patternfly/react-core';
 
 // Import Chatbot components
@@ -79,7 +80,7 @@ export interface MessageBarProps extends TextAreaProps {
   isCompact?: boolean;
 }
 
-export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
+export const MessageBar: FunctionComponent<MessageBarProps> = ({
   onSendMessage,
   className,
   alwayShowSendButton,
@@ -101,11 +102,11 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
 }: MessageBarProps) => {
   // Text Input
   // --------------------------------------------------------------------------
-  const [message, setMessage] = React.useState<string | number>(value ?? '');
-  const [isListeningMessage, setIsListeningMessage] = React.useState<boolean>(false);
-  const [hasSentMessage, setHasSentMessage] = React.useState(false);
-  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
-  const attachButtonRef = React.useRef<HTMLButtonElement>(null);
+  const [message, setMessage] = useState<string | number>(value ?? '');
+  const [isListeningMessage, setIsListeningMessage] = useState<boolean>(false);
+  const [hasSentMessage, setHasSentMessage] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const attachButtonRef = useRef<HTMLButtonElement>(null);
 
   const topMargin = '1rem';
 
@@ -151,7 +152,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
     return lines > 2;
   };
 
-  const setAutoWidth = React.useCallback((field: HTMLTextAreaElement) => {
+  const setAutoWidth = useCallback((field: HTMLTextAreaElement) => {
     const parent = field.parentElement;
     if (parent) {
       const grandparent = parent.parentElement;
@@ -169,7 +170,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const field = textareaRef.current;
     if (field) {
       if (field.value === '') {
@@ -200,19 +201,19 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
     };
   }, [setAutoWidth]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const field = textareaRef.current;
     if (field) {
       if (field.value === '') {
-        setInitialLineHeight(textareaRef.current);
+        setInitialLineHeight(field);
       } else {
-        setAutoHeight(textareaRef.current);
+        setAutoHeight(field);
         setAutoWidth(field);
       }
     }
   }, [displayMode, message, setAutoWidth]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const field = textareaRef.current;
     if (field) {
       setInitialLineHeight(field);
@@ -220,7 +221,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
     }
   }, [hasSentMessage]);
 
-  const handleChange = React.useCallback(
+  const handleChange = useCallback(
     (event) => {
       onChange && onChange(event, event.target.value);
       if (textareaRef.current) {
@@ -236,7 +237,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   );
 
   // Handle sending message
-  const handleSend = React.useCallback(
+  const handleSend = useCallback(
     (newMessage: string | number) => {
       onSendMessage(newMessage);
       setHasSentMessage(true);
@@ -245,8 +246,8 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
     [onSendMessage]
   );
 
-  const handleKeyDown = React.useCallback(
-    (event: React.KeyboardEvent) => {
+  const handleKeyDown = useCallback(
+    (event: ReactKeyboardEvent) => {
       if (event.key === 'Enter' && !event.shiftKey) {
         event.preventDefault();
         if (!isSendButtonDisabled && !hasStopButton) {
@@ -269,7 +270,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
 
   const handleSpeechRecognition = (message) => {
     setMessage(message);
-    onChange && onChange({} as React.ChangeEvent<HTMLTextAreaElement>, message);
+    onChange && onChange({} as ChangeEvent<HTMLTextAreaElement>, message);
   };
 
   const renderButtons = () => {

package/src/MessageBar/MicrophoneButton.tsx

@@ -1,7 +1,9 @@
 // ============================================================================
 // Chatbot Footer - Message Bar - Microphone
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
+
+import { useState, useCallback, useEffect } from 'react';
 
 // Import PatternFly components
 import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
@@ -27,7 +29,7 @@ export interface MicrophoneButtonProps extends ButtonProps {
   isCompact?: boolean;
 }
 
-export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> = ({
+export const MicrophoneButton: FunctionComponent<MicrophoneButtonProps> = ({
   isListening,
   onIsListeningChange,
   onSpeechRecognition,
@@ -40,10 +42,10 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
 }: MicrophoneButtonProps) => {
   // Microphone
   // --------------------------------------------------------------------------
-  const [speechRecognition, setSpeechRecognition] = React.useState<SpeechRecognition>();
+  const [speechRecognition, setSpeechRecognition] = useState<SpeechRecognition>();
 
   // Listen for speech
-  const startListening = React.useCallback(() => {
+  const startListening = useCallback(() => {
     if (speechRecognition) {
       speechRecognition.start();
       onIsListeningChange(true);
@@ -51,7 +53,7 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
   }, [onIsListeningChange, speechRecognition]);
 
   // Stop listening for speech
-  const stopListening = React.useCallback(() => {
+  const stopListening = useCallback(() => {
     if (speechRecognition && isListening) {
       speechRecognition.stop();
       onIsListeningChange(false);
@@ -59,7 +61,7 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
   }, [isListening, onIsListeningChange, speechRecognition]);
 
   // Detect speech recognition browser support
-  React.useEffect(() => {
+  useEffect(() => {
     if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
       // Initialize SpeechRecognition
       const recognition: SpeechRecognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();

package/src/MessageBar/SendButton.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';

package/src/MessageBar/SendButton.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Footer - Message Bar - Send
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
 import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
@@ -17,10 +17,11 @@ export interface SendButtonProps extends ButtonProps {
   tooltipProps?: Omit<TooltipProps, 'content'>;
   /** English text "Send" used in the tooltip */
   tooltipContent?: string;
+  /** Whether send button has compact styling */
   isCompact?: boolean;
 }
 
-export const SendButton: React.FunctionComponent<SendButtonProps> = ({
+export const SendButton: FunctionComponent<SendButtonProps> = ({
   className,
   onClick,
   tooltipProps,

package/src/MessageBar/StopButton.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';

package/src/MessageBar/StopButton.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Footer - Message Bar - Stop
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
 import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
@@ -15,10 +15,11 @@ export interface StopButtonProps extends ButtonProps {
   tooltipProps?: Omit<TooltipProps, 'content'>;
   /** English text "Stop" used in the tooltip */
   tooltipContent?: string;
+  /** Whether stop button has compact styling */
   isCompact?: boolean;
 }
 
-export const StopButton: React.FunctionComponent<StopButtonProps> = ({
+export const StopButton: FunctionComponent<StopButtonProps> = ({
   className,
   onClick,
   tooltipProps,

package/src/MessageBox/JumpButton.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import JumpButton from './JumpButton';

package/src/MessageBox/JumpButton.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Main - Messages - Jump to Top
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
 import { Button, Tooltip, Icon } from '@patternfly/react-core';
@@ -18,7 +18,7 @@ export interface JumpButtonProps {
   isHidden?: boolean;
 }
 
-const JumpButton: React.FunctionComponent<JumpButtonProps> = ({ position, isHidden, onClick }: JumpButtonProps) =>
+const JumpButton: FunctionComponent<JumpButtonProps> = ({ position, isHidden, onClick }: JumpButtonProps) =>
   isHidden ? null : (
     <Tooltip id={`pf-chatbot__tooltip--jump-${position}`} content={`Back to ${position}`} position="top">
       <Button

package/src/MessageBox/MessageBox.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { createRef } from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { MessageBox } from './MessageBox';
 import userEvent from '@testing-library/user-event';
@@ -14,7 +14,7 @@ describe('MessageBox', () => {
   });
 
   it('should assign ref to Message box', () => {
-    const ref = React.createRef<HTMLDivElement>();
+    const ref = createRef<HTMLDivElement>();
     render(
       <MessageBox ref={ref}>
         <div>Test message content</div>

package/src/MessageBox/MessageBox.tsx

@@ -1,10 +1,12 @@
 // ============================================================================
 // Chatbot Main - Messages
 // ============================================================================
-import React from 'react';
+import type { HTMLProps, Ref, FunctionComponent } from 'react';
+
+import { useState, useRef, useCallback, useEffect, forwardRef } from 'react';
 import JumpButton from './JumpButton';
 
-export interface MessageBoxProps extends React.HTMLProps<HTMLDivElement> {
+export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
   /** Content that can be announced, such as a new message, for screen readers */
   announcement?: string;
   /** Custom aria-label for scrollable portion of message box */
@@ -23,7 +25,7 @@ export interface MessageBoxProps extends React.HTMLProps<HTMLDivElement> {
   onScrollToBottomClick?: () => void;
 }
 
-const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
+const MessageBoxBase: FunctionComponent<MessageBoxProps> = ({
   announcement,
   ariaLabel = 'Scrollable message log',
   children,
@@ -34,10 +36,10 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
   onScrollToBottomClick,
   ...props
 }: MessageBoxProps) => {
-  const [atTop, setAtTop] = React.useState(false);
-  const [atBottom, setAtBottom] = React.useState(true);
-  const [isOverflowing, setIsOverflowing] = React.useState(false);
-  const defaultRef = React.useRef<HTMLDivElement>(null);
+  const [atTop, setAtTop] = useState(false);
+  const [atBottom, setAtBottom] = useState(true);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const defaultRef = useRef<HTMLDivElement>(null);
   let messageBoxRef;
   if (innerRef) {
     messageBoxRef = innerRef;
@@ -46,7 +48,7 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
   }
 
   // Configure handlers
-  const handleScroll = React.useCallback(() => {
+  const handleScroll = useCallback(() => {
     const element = messageBoxRef.current;
     if (element) {
       const { scrollTop, scrollHeight, clientHeight } = element;
@@ -55,7 +57,7 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
     }
   }, [messageBoxRef]);
 
-  const checkOverflow = React.useCallback(() => {
+  const checkOverflow = useCallback(() => {
     const element = messageBoxRef.current;
     if (element) {
       const { scrollHeight, clientHeight } = element;
@@ -63,7 +65,7 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
     }
   }, [messageBoxRef]);
 
-  const scrollToTop = React.useCallback(() => {
+  const scrollToTop = useCallback(() => {
     const element = messageBoxRef.current;
     if (element) {
       element.scrollTo({ top: 0, behavior: 'smooth' });
@@ -71,7 +73,7 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
     onScrollToTopClick && onScrollToTopClick();
   }, [messageBoxRef]);
 
-  const scrollToBottom = React.useCallback(() => {
+  const scrollToBottom = useCallback(() => {
     const element = messageBoxRef.current;
     if (element) {
       element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
@@ -80,7 +82,7 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
   }, [messageBoxRef]);
 
   // Detect scroll position
-  React.useEffect(() => {
+  useEffect(() => {
     const element = messageBoxRef.current;
     if (element) {
       // Listen for scroll events
@@ -117,7 +119,7 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
   );
 };
 
-export const MessageBox = React.forwardRef((props: MessageBoxProps, ref: React.Ref<any>) => (
+export const MessageBox = forwardRef((props: MessageBoxProps, ref: Ref<any>) => (
   <MessageBoxBase innerRef={ref} {...props} />
 ));