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

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
 import Chatbot from '@patternfly/chatbot/dist/dynamic/Chatbot';
 import ChatbotContent from '@patternfly/chatbot/dist/dynamic/ChatbotContent';
@@ -18,6 +17,7 @@ import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
+import { cloneElement, FunctionComponent, isValidElement, ReactNode, useState, Children } from 'react';
 
 const initialMenuItems = [
   <DropdownList key="list-1">
@@ -84,14 +84,14 @@ const messages: MessageProps[] = [
   }
 ];
 
-export const AttachmentMenuDemo: React.FunctionComponent = () => {
-  const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(true);
-  const [file, setFile] = React.useState<File>();
-  const [isLoadingFile, setIsLoadingFile] = React.useState<boolean>(false);
-  const [userFacingMenuItems, setUserFacingMenuItems] = React.useState<React.ReactNode>([]);
-  const [error, setError] = React.useState<string>();
-  const [showAlert, setShowAlert] = React.useState<boolean>(false);
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+export const AttachmentMenuDemo: FunctionComponent = () => {
+  const [chatbotVisible, setChatbotVisible] = useState<boolean>(true);
+  const [file, setFile] = useState<File>();
+  const [isLoadingFile, setIsLoadingFile] = useState<boolean>(false);
+  const [userFacingMenuItems, setUserFacingMenuItems] = useState<ReactNode>([]);
+  const [error, setError] = useState<string>();
+  const [showAlert, setShowAlert] = useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const { open, getInputProps } = useDropzone({
     onDropAccepted: (files: File[]) => {
@@ -162,18 +162,18 @@ export const AttachmentMenuDemo: React.FunctionComponent = () => {
     setUserFacingMenuItems(initialMenuItems.concat(uploadMenuItems));
   };
 
-  const findMatchingElements = (elements: React.ReactNode[], targetValue: string) => {
-    let matchingElements = [] as React.ReactNode[];
+  const findMatchingElements = (elements: ReactNode[], targetValue: string) => {
+    let matchingElements = [] as ReactNode[];
 
     elements.forEach((element) => {
-      if (React.isValidElement(element)) {
+      if (isValidElement(element)) {
         // Check if the element's value matches the targetValue
         if (element.props.value && element.props.value.toLowerCase().includes(targetValue.toLowerCase())) {
-          matchingElements.push(React.cloneElement(element, { key: element.props.value }));
+          matchingElements.push(cloneElement(element, { key: element.props.value }));
         }
 
         // Recursively check the element's children
-        const children = React.Children.toArray(element.props.children);
+        const children = Children.toArray(element.props.children);
         matchingElements = matchingElements.concat(findMatchingElements(children, targetValue));
       }
     });

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

@@ -1,5 +1,4 @@
-import React from 'react';
-
+import { useEffect, useRef, useState, FunctionComponent, MouseEvent } from 'react';
 import { Bullseye, Brand, DropdownList, DropdownItem, DropdownGroup, SkipToContent } from '@patternfly/react-core';
 
 import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
@@ -76,8 +75,6 @@ spec:
 Here is some JavaScript code:
 
 ~~~js
-import React from 'react';
-
 const MessageLoading = () => (
   <div className="pf-chatbot__message-loading">
     <span className="pf-chatbot__message-loading-dots">
@@ -164,39 +161,36 @@ const initialConversations = {
   ]
 };
 
-export const ChatbotDemo: React.FunctionComponent = () => {
-  const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(true);
-  const [displayMode, setDisplayMode] = React.useState<ChatbotDisplayMode>(ChatbotDisplayMode.default);
-  const [messages, setMessages] = React.useState<MessageProps[]>(initialMessages);
-  const [selectedModel, setSelectedModel] = React.useState('Granite 7B');
-  const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(false);
-  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
-  const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
+export const ChatbotDemo: FunctionComponent = () => {
+  const [chatbotVisible, setChatbotVisible] = useState<boolean>(true);
+  const [displayMode, setDisplayMode] = useState<ChatbotDisplayMode>(ChatbotDisplayMode.default);
+  const [messages, setMessages] = useState<MessageProps[]>(initialMessages);
+  const [selectedModel, setSelectedModel] = useState('Granite 7B');
+  const [isSendButtonDisabled, setIsSendButtonDisabled] = useState(false);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [conversations, setConversations] = useState<Conversation[] | { [key: string]: Conversation[] }>(
     initialConversations
   );
-  const [announcement, setAnnouncement] = React.useState<string>();
-  const scrollToBottomRef = React.useRef<HTMLDivElement>(null);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const chatbotRef = React.useRef<HTMLDivElement>(null);
-  const historyRef = React.useRef<HTMLButtonElement>(null);
+  const [announcement, setAnnouncement] = useState<string>();
+  const scrollToBottomRef = useRef<HTMLDivElement>(null);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const chatbotRef = useRef<HTMLDivElement>(null);
+  const historyRef = useRef<HTMLButtonElement>(null);
 
   // Auto-scrolls to the latest message
-  React.useEffect(() => {
+  useEffect(() => {
     // don't scroll the first load - in this demo, we know we start with two messages
     if (messages.length > 2) {
       scrollToBottomRef.current?.scrollIntoView({ behavior: 'smooth' });
     }
   }, [messages]);
 
-  const onSelectModel = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    value: string | number | undefined
-  ) => {
+  const onSelectModel = (_event: MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     setSelectedModel(value as string);
   };
 
   const onSelectDisplayMode = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    _event: MouseEvent<Element, MouseEvent> | undefined,
     value: string | number | undefined
   ) => {
     setDisplayMode(value as ChatbotDisplayMode);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent, MouseEvent, useEffect, useRef, useState } from 'react';
 
 import {
   Brand,
@@ -88,8 +88,6 @@ spec:
 Here is some JavaScript code:
 
 ~~~js
-import React from 'react';
-
 const MessageLoading = () => (
   <div className="pf-chatbot__message-loading">
     <span className="pf-chatbot__message-loading-dots">
@@ -176,19 +174,19 @@ const initialConversations = {
   ]
 };
 
-export const EmbeddedChatbotDemo: React.FunctionComponent = () => {
-  const [messages, setMessages] = React.useState<MessageProps[]>(initialMessages);
-  const [selectedModel, setSelectedModel] = React.useState('Granite 7B');
-  const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(false);
-  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
-  const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
+export const EmbeddedChatbotDemo: FunctionComponent = () => {
+  const [messages, setMessages] = useState<MessageProps[]>(initialMessages);
+  const [selectedModel, setSelectedModel] = useState('Granite 7B');
+  const [isSendButtonDisabled, setIsSendButtonDisabled] = useState(false);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [conversations, setConversations] = useState<Conversation[] | { [key: string]: Conversation[] }>(
     initialConversations
   );
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);
-  const [announcement, setAnnouncement] = React.useState<string>();
-  const scrollToBottomRef = React.useRef<HTMLDivElement>(null);
-  const historyRef = React.useRef<HTMLButtonElement>(null);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [announcement, setAnnouncement] = useState<string>();
+  const scrollToBottomRef = useRef<HTMLDivElement>(null);
+  const historyRef = useRef<HTMLButtonElement>(null);
+  const drawerRef = useRef<HTMLDivElement>();
 
   const displayMode = ChatbotDisplayMode.drawer;
   const isExpanded = true;
@@ -198,17 +196,14 @@ export const EmbeddedChatbotDemo: React.FunctionComponent = () => {
   };
 
   // Auto-scrolls to the latest message
-  React.useEffect(() => {
+  useEffect(() => {
     // don't scroll the first load - in this demo, we know we start with two messages
     if (messages.length > 2) {
       scrollToBottomRef.current?.scrollIntoView({ behavior: 'smooth' });
     }
   }, [messages]);
 
-  const onSelectModel = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    value: string | number | undefined
-  ) => {
+  const onSelectModel = (_event: MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     setSelectedModel(value as string);
   };
 
@@ -335,7 +330,7 @@ export const EmbeddedChatbotDemo: React.FunctionComponent = () => {
     </PageSidebar>
   );
 
-  const skipToChatbot = (event: React.MouseEvent) => {
+  const skipToChatbot = (event: MouseEvent) => {
     event.preventDefault();
     if (historyRef.current) {
       historyRef.current.focus();

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useEffect, useRef, useState, FunctionComponent, MouseEvent } from 'react';
 
 import {
   Bullseye,
@@ -86,8 +86,6 @@ spec:
 Here is some JavaScript code:
 
 ~~~js
-import React from 'react';
-
 const MessageLoading = () => (
   <div className="pf-chatbot__message-loading">
     <span className="pf-chatbot__message-loading-dots">
@@ -174,32 +172,29 @@ const initialConversations = {
   ]
 };
 
-export const EmbeddedChatbotDemo: React.FunctionComponent = () => {
-  const [messages, setMessages] = React.useState<MessageProps[]>(initialMessages);
-  const [selectedModel, setSelectedModel] = React.useState('Granite 7B');
-  const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(false);
-  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
-  const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
+export const EmbeddedChatbotDemo: FunctionComponent = () => {
+  const [messages, setMessages] = useState<MessageProps[]>(initialMessages);
+  const [selectedModel, setSelectedModel] = useState('Granite 7B');
+  const [isSendButtonDisabled, setIsSendButtonDisabled] = useState(false);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [conversations, setConversations] = useState<Conversation[] | { [key: string]: Conversation[] }>(
     initialConversations
   );
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);
-  const [announcement, setAnnouncement] = React.useState<string>();
-  const scrollToBottomRef = React.useRef<HTMLDivElement>(null);
-  const historyRef = React.useRef<HTMLButtonElement>(null);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [announcement, setAnnouncement] = useState<string>();
+  const scrollToBottomRef = useRef<HTMLDivElement>(null);
+  const historyRef = useRef<HTMLButtonElement>(null);
 
   const displayMode = ChatbotDisplayMode.embedded;
-  // Autu-scrolls to the latest message
-  React.useEffect(() => {
+  // Auto-scrolls to the latest message
+  useEffect(() => {
     // don't scroll the first load - in this demo, we know we start with two messages
     if (messages.length > 2) {
       scrollToBottomRef.current?.scrollIntoView({ behavior: 'smooth' });
     }
   }, [messages]);
 
-  const onSelectModel = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    value: string | number | undefined
-  ) => {
+  const onSelectModel = (_event: MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     setSelectedModel(value as string);
   };
 
@@ -327,7 +322,7 @@ export const EmbeddedChatbotDemo: React.FunctionComponent = () => {
     </PageSidebar>
   );
 
-  const skipToChatbot = (event: React.MouseEvent) => {
+  const skipToChatbot = (event: MouseEvent) => {
     event.preventDefault();
     if (historyRef.current) {
       historyRef.current.focus();

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, useRef, useCallback, useEffect, FunctionComponent } from 'react';
 
 import {
   Page,
@@ -27,9 +27,9 @@ import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
 
 export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled }) => {
-  const [messages, setMessages] = React.useState<MessageProps[]>([]);
-  const [announcement, setAnnouncement] = React.useState<string>();
-  const scrollToBottomRef = React.useRef<HTMLDivElement>(null);
+  const [messages, setMessages] = useState<MessageProps[]>([]);
+  const [announcement, setAnnouncement] = useState<string>();
+  const scrollToBottomRef = useRef<HTMLDivElement>(null);
   const displayMode = ChatbotDisplayMode.embedded;
 
   // you will likely want to come up with your own unique id function; this is for demo purposes only
@@ -38,7 +38,7 @@ export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled
     return id.toString();
   };
 
-  const handleSend = React.useCallback(
+  const handleSend = useCallback(
     (input: string) => {
       const date = new Date();
       const newMessages: MessageProps[] = [];
@@ -101,14 +101,14 @@ export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled
     [messages, name, setIsSendButtonDisabled]
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (input) {
       handleSend(input);
     }
   }, [hasNewInput, input]);
 
   // Auto-scrolls to the latest message
-  React.useEffect(() => {
+  useEffect(() => {
     // don't scroll the first load, but scroll if there's a current stream or a new source has popped up
     if (messages.length > 0) {
       scrollToBottomRef.current?.scrollIntoView();
@@ -133,11 +133,11 @@ export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled
   );
 };
 
-export const EmbeddedComparisonChatbotDemo: React.FunctionComponent = () => {
-  const [input, setInput] = React.useState<string>();
-  const [hasNewInput, setHasNewInput] = React.useState(false);
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);
-  const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(false);
+export const EmbeddedComparisonChatbotDemo: FunctionComponent = () => {
+  const [input, setInput] = useState<string>();
+  const [hasNewInput, setHasNewInput] = useState(false);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [isSendButtonDisabled, setIsSendButtonDisabled] = useState(false);
 
   const handleSend = (value: string) => {
     setInput(value);

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

@@ -1,15 +1,15 @@
-import React from 'react';
+import { FunctionComponent, useState, useRef } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
 
-export const MessageWithFeedbackExample: React.FunctionComponent = () => {
-  const [showUserFeedbackForm, setShowUserFeedbackForm] = React.useState(false);
-  const [showCompletionForm, setShowCompletionForm] = React.useState(false);
-  const [launchButton, setLaunchButton] = React.useState<string>();
-  const positiveRef = React.useRef<HTMLButtonElement>(null);
-  const negativeRef = React.useRef<HTMLButtonElement>(null);
+export const MessageWithFeedbackExample: FunctionComponent = () => {
+  const [showUserFeedbackForm, setShowUserFeedbackForm] = useState(false);
+  const [showCompletionForm, setShowCompletionForm] = useState(false);
+  const [launchButton, setLaunchButton] = useState<string>();
+  const positiveRef = useRef<HTMLButtonElement>(null);
+  const negativeRef = useRef<HTMLButtonElement>(null);
   const feedbackId = 'user-feedback-form';
   const completeId = 'user-feedback-received';
 

package/src/AttachMenu/AttachMenu.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Attachment Menu
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
 import {
@@ -41,7 +41,7 @@ export interface AttachMenuProps extends DropdownProps {
   toggle: DropdownToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode);
 }
 
-export const AttachMenu: React.FunctionComponent<AttachMenuProps> = ({
+export const AttachMenu: FunctionComponent<AttachMenuProps> = ({
   className,
   filteredItems,
   handleTextInputChange,

package/src/AttachmentEdit/AttachmentEdit.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import AttachmentEdit, { AttachmentEditProps } from './AttachmentEdit';
 
 describe('AttachmentEdit', () => {
@@ -52,4 +52,48 @@ describe('AttachmentEdit', () => {
     fireEvent.click(screen.getByText('Cancel'));
     expect(onCancelHandler).toHaveBeenCalled();
   });
+
+  it('should render custom button text for footer actions buttons', () => {
+    render(
+      <AttachmentEdit
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onCancel={jest.fn()}
+        onSave={jest.fn()}
+        handleModalToggle={jest.fn()}
+        primaryActionButtonText="Save"
+        secondaryActionButtonText="Close"
+      />
+    );
+
+    expect(screen.getByText('Save')).toBeInTheDocument();
+    expect(screen.getByText('Close')).toBeInTheDocument();
+  });
+
+  it('should render AttachmentEdit with custom classNames', async () => {
+    render(
+      <AttachmentEdit
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onCancel={jest.fn()}
+        onSave={jest.fn()}
+        handleModalToggle={jest.fn()}
+        primaryActionButtonText="Save"
+        secondaryActionButtonText="Close"
+        modalHeaderClassName="custom-header-class"
+        modalBodyClassName="custom-body-class"
+        modalFooterClassName="custom-footer-class"
+      ></AttachmentEdit>
+    );
+
+    const modal = screen.getByRole('dialog');
+    const modalHeader = within(modal).getByRole('banner');
+    expect(modalHeader).toHaveClass('custom-header-class');
+    const modalBody = modal.querySelector('#code-modal-body');
+    expect(modalBody).toHaveClass('custom-body-class');
+    const modalfooter = within(modal).getByRole('contentinfo');
+    expect(modalfooter).toHaveClass('custom-footer-class');
+  });
 });

package/src/AttachmentEdit/AttachmentEdit.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Attachment Edit - Chatbot Code Snippet Editor
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent, MouseEvent as ReactMouseEvent } from 'react';
 import CodeModal from '../CodeModal';
 import { ChatbotDisplayMode } from '../Chatbot';
 
@@ -24,9 +24,19 @@ export interface AttachmentEditProps {
   displayMode?: ChatbotDisplayMode;
   /** Sets modal to compact styling. */
   isCompact?: boolean;
+  /** Primary action button text */
+  primaryActionButtonText?: string;
+  /** Secondary action button text */
+  secondaryActionButtonText?: string;
+  /** Class applied to modal header */
+  modalHeaderClassName?: string;
+  /** Class applied to modal body */
+  modalBodyClassName?: string;
+  /** Class applied to modal footer */
+  modalFooterClassName?: string;
 }
 
-export const AttachmentEdit: React.FunctionComponent<AttachmentEditProps> = ({
+export const AttachmentEdit: FunctionComponent<AttachmentEditProps> = ({
   fileName,
   code,
   handleModalToggle,
@@ -35,14 +45,19 @@ export const AttachmentEdit: React.FunctionComponent<AttachmentEditProps> = ({
   onSave,
   title = 'Edit attachment',
   displayMode = ChatbotDisplayMode.default,
-  isCompact
+  isCompact,
+  modalHeaderClassName,
+  modalBodyClassName,
+  modalFooterClassName,
+  primaryActionButtonText = 'Save',
+  secondaryActionButtonText = 'Cancel'
 }: AttachmentEditProps) => {
-  const handleSave = (_event: React.MouseEvent | MouseEvent | KeyboardEvent, code) => {
+  const handleSave = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent, code) => {
     handleModalToggle(_event);
     onSave(_event, code);
   };
 
-  const handleCancel = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleCancel = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
     handleModalToggle(_event);
     onCancel(_event);
   };
@@ -55,11 +70,14 @@ export const AttachmentEdit: React.FunctionComponent<AttachmentEditProps> = ({
       isModalOpen={isModalOpen}
       onPrimaryAction={handleSave}
       onSecondaryAction={handleCancel}
-      primaryActionBtn="Save"
-      secondaryActionBtn="Cancel"
+      primaryActionBtn={primaryActionButtonText}
+      secondaryActionBtn={secondaryActionButtonText}
       title={title}
       displayMode={displayMode}
       isCompact={isCompact}
+      modalHeaderClassName={modalHeaderClassName}
+      modalBodyClassName={modalBodyClassName}
+      modalFooterClassName={modalFooterClassName}
     />
   );
 };

package/src/Chatbot/Chatbot.test.tsx

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

package/src/Chatbot/Chatbot.tsx

@@ -1,7 +1,9 @@
 // ============================================================================
 // Chatbot
 // ============================================================================
-import React from 'react';
+import type { Ref, FunctionComponent } from 'react';
+
+import { forwardRef } from 'react';
 import { motion } from 'framer-motion';
 
 export interface ChatbotProps {
@@ -29,7 +31,7 @@ export enum ChatbotDisplayMode {
   drawer = 'drawer'
 }
 
-const ChatbotBase: React.FunctionComponent<ChatbotProps> = ({
+const ChatbotBase: FunctionComponent<ChatbotProps> = ({
   children,
   displayMode = ChatbotDisplayMode.default,
   isVisible = true,
@@ -69,7 +71,7 @@ const ChatbotBase: React.FunctionComponent<ChatbotProps> = ({
   );
 };
 
-const Chatbot = React.forwardRef((props: ChatbotProps, ref: React.Ref<HTMLDivElement>) => (
+const Chatbot = forwardRef((props: ChatbotProps, ref: Ref<HTMLDivElement>) => (
   <ChatbotBase innerRef={ref} {...props} />
 ));
 

package/src/ChatbotAlert/ChatbotAlert.test.tsx

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

package/src/ChatbotAlert/ChatbotAlert.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { Alert, AlertActionCloseButton, AlertProps } from '@patternfly/react-core';
 
 export interface ChatbotAlert extends AlertProps {
@@ -6,7 +6,7 @@ export interface ChatbotAlert extends AlertProps {
   onClose?: () => void;
 }
 
-export const ChatbotAlert: React.FunctionComponent<ChatbotAlert> = ({
+export const ChatbotAlert: FunctionComponent<ChatbotAlert> = ({
   variant = 'info',
   title,
   children = '',

package/src/ChatbotContent/ChatbotContent.test.tsx

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

package/src/ChatbotContent/ChatbotContent.tsx

@@ -1,16 +1,16 @@
 // ============================================================================
 // Chatbot Main
 // ============================================================================
-import React from 'react';
+import type { HTMLProps, FunctionComponent } from 'react';
 
-export interface ChatbotContentProps extends React.HTMLProps<HTMLDivElement> {
+export interface ChatbotContentProps extends HTMLProps<HTMLDivElement> {
   /** Content to be displayed in the chatbot */
   children: React.ReactNode;
   /** Custom classname for the ChatbotContent component */
   className?: string;
 }
 
-export const ChatbotContent: React.FunctionComponent<ChatbotContentProps> = ({
+export const ChatbotContent: FunctionComponent<ChatbotContentProps> = ({
   children,
   className,
   ...props

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import '@testing-library/jest-dom';
 import { DropdownItem } from '@patternfly/react-core';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx

@@ -1,7 +1,9 @@
 // ============================================================================
 // Chatbot Header - Chatbot Conversation History Nav
 // ============================================================================
-import React from 'react';
+import type { MouseEvent, FunctionComponent, Ref } from 'react';
+
+import { useState } from 'react';
 
 // Import PatternFly components
 import { MenuToggleElement, Tooltip, MenuToggle, Dropdown, DropdownProps } from '@patternfly/react-core';
@@ -19,15 +21,15 @@ export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownPr
   onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
 }
 
-export const ChatbotConversationHistoryDropdown: React.FunctionComponent<ChatbotConversationHistoryDropdownProps> = ({
+export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConversationHistoryDropdownProps> = ({
   menuItems,
   menuClassName,
   onSelect,
   label
 }: ChatbotConversationHistoryDropdownProps) => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <Tooltip
       className="pf-chatbot__tooltip"
       content={label ?? 'Conversation options'}

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import '@testing-library/jest-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
@@ -6,6 +5,7 @@ import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ChatbotConversationHistoryNav, { Conversation } from './ChatbotConversationHistoryNav';
 import { EmptyStateStatus, Spinner } from '@patternfly/react-core';
 import { OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
+import { ComponentType } from 'react';
 
 const ERROR = {
   bodyText: (
@@ -25,13 +25,13 @@ const ERROR = {
 const NO_RESULTS = {
   bodyText: 'Adjust your search query and try again. Check your spelling or try a more general term.',
   titleText: 'No results found',
-  icon: SearchIcon
+  icon: SearchIcon as ComponentType<any>
 };
 
 const EMPTY_STATE = {
   bodyText: 'Access timely assistance by starting a conversation with an AI model.',
   titleText: 'Start a new chat',
-  icon: OutlinedCommentsIcon
+  icon: OutlinedCommentsIcon as ComponentType<any>
 };
 
 const ERROR_WITHOUT_BUTTON = {