@patternfly/chatbot 6.4.0-prerelease.17 → 6.4.0-prerelease.19

package/dist/esm/DeepThinking/DeepThinking.test.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import DeepThinking from './DeepThinking';
+describe('DeepThinking', () => {
+    const defaultProps = {
+        toggleContent: 'Show thinking'
+    };
+    it('should render with required props only', () => {
+        render(_jsx(DeepThinking, Object.assign({}, defaultProps)));
+        expect(screen.getByText('Show thinking')).toBeTruthy();
+    });
+    it('should render subheading when provided', () => {
+        const subheading = 'Thought for 3 seconds';
+        render(_jsx(DeepThinking, Object.assign({}, defaultProps, { subheading: subheading })));
+        expect(screen.getByText(subheading)).toBeTruthy();
+    });
+    it('should render body content when provided', () => {
+        const body = "Here's why I think that";
+        render(_jsx(DeepThinking, Object.assign({}, defaultProps, { body: body })));
+        expect(screen.getByText(body)).toBeTruthy();
+    });
+    it('should render with complex content including React elements', () => {
+        const body = (_jsxs("div", { children: [_jsx("p", { children: "Complex body content" }), _jsxs("ul", { children: [_jsx("li", { children: "Item 1" }), _jsx("li", { children: "Item 2" })] })] }));
+        render(_jsx(DeepThinking, Object.assign({}, defaultProps, { body: body })));
+        expect(screen.getByText('Complex body content')).toBeTruthy();
+        expect(screen.getByText('Item 1')).toBeTruthy();
+        expect(screen.getByText('Item 2')).toBeTruthy();
+    });
+    it('should apply custom className from cardProps', () => {
+        const { container } = render(_jsx(DeepThinking, Object.assign({}, defaultProps, { cardProps: { className: 'custom-tool-response-class' } })));
+        expect(container.querySelector('.custom-tool-response-class')).toBeTruthy();
+    });
+    it('should pass through expandableSectionProps', () => {
+        render(_jsx(DeepThinking, Object.assign({}, defaultProps, { expandableSectionProps: { className: 'custom-expandable-class' } })));
+        expect(document.querySelector('.custom-expandable-class')).toBeTruthy();
+    });
+    it('should not render subheading span when subheading is not provided', () => {
+        const { container } = render(_jsx(DeepThinking, Object.assign({}, defaultProps)));
+        const subheadingContainer = container.querySelector('.pf-chatbot__tool-response-subheading');
+        expect(subheadingContainer).toBeFalsy();
+    });
+});

package/dist/esm/DeepThinking/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './DeepThinking';
+export * from './DeepThinking';

package/dist/esm/DeepThinking/index.js

@@ -0,0 +1,2 @@
+export { default } from './DeepThinking';
+export * from './DeepThinking';

package/dist/esm/FilePreview/FilePreview.d.ts

@@ -0,0 +1,26 @@
+import { ModalBodyProps, ModalHeaderProps } from '@patternfly/react-core';
+import type { FunctionComponent } from 'react';
+import { ChatbotDisplayMode } from '../Chatbot';
+import { ChatbotModalProps } from '../ChatbotModal';
+export interface FilePreviewProps extends ChatbotModalProps {
+    /** Class applied to modal */
+    className?: string;
+    /** Function that handles modal toggle */
+    handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Whether modal is open */
+    isModalOpen: boolean;
+    /** Title of modal */
+    title?: string;
+    /** Display mode for the Chatbot parent; this influences the styles applied */
+    displayMode?: ChatbotDisplayMode;
+    /** File name */
+    fileName: string;
+    /** Sets modal to compact styling. */
+    isCompact?: boolean;
+    /** Additional props passed to modal header */
+    modalHeaderProps?: ModalHeaderProps;
+    /** Additional props passed to modal body */
+    modalBodyProps?: ModalBodyProps;
+}
+declare const FilePreview: FunctionComponent<FilePreviewProps>;
+export default FilePreview;

package/dist/esm/FilePreview/FilePreview.js

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ModalBody, ModalHeader } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
+import ChatbotModal from '../ChatbotModal';
+import { FileIcon } from '@patternfly/react-icons';
+const FilePreview = (_a) => {
+    var { isModalOpen, displayMode = ChatbotDisplayMode.default, children, fileName, isCompact, className, handleModalToggle, title = 'File preview', modalHeaderProps, modalBodyProps } = _a, props = __rest(_a, ["isModalOpen", "displayMode", "children", "fileName", "isCompact", "className", "handleModalToggle", "title", "modalHeaderProps", "modalBodyProps"]);
+    return (_jsxs(ChatbotModal, Object.assign({ isOpen: isModalOpen, className: `pf-chatbot__file-preview-modal pf-chatbot__file-preview-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`, displayMode: displayMode, onClose: handleModalToggle, isCompact: isCompact }, props, { children: [_jsx(ModalHeader, Object.assign({ title: title }, modalHeaderProps)), _jsxs(ModalBody, Object.assign({ className: "pf-chatbot__file-preview-body" }, modalBodyProps, { children: [_jsx(FileIcon, { className: "pf-chatbot__file-preview-icon" }), _jsx("h2", { className: "pf-chatbot__file-preview-name", children: fileName }), children && _jsx("div", { className: "pf-chatbot__file-preview-body", children: children })] }))] })));
+};
+export default FilePreview;

package/dist/esm/FilePreview/FilePreview.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/FilePreview/FilePreview.test.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import FilePreview from './FilePreview';
+import { ChatbotDisplayMode } from '../Chatbot';
+import { Button } from '@patternfly/react-core';
+describe('FilePreview', () => {
+    const defaultProps = {
+        isModalOpen: true,
+        handleModalToggle: jest.fn(),
+        fileName: 'test-file.txt',
+        children: 'File content preview'
+    };
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should render with basic props', () => {
+        render(_jsx(FilePreview, Object.assign({}, defaultProps)));
+        expect(screen.getByText('File preview')).toBeInTheDocument();
+        expect(screen.getByText('test-file.txt')).toBeInTheDocument();
+    });
+    it('should render with custom title', () => {
+        const customTitle = 'Custom file preview title';
+        render(_jsx(FilePreview, Object.assign({}, defaultProps, { title: customTitle })));
+        expect(screen.getByRole('heading', { name: customTitle })).toBeTruthy();
+    });
+    it('should handle modal toggle when closed', () => {
+        const mockToggle = jest.fn();
+        render(_jsx(FilePreview, Object.assign({}, defaultProps, { isModalOpen: false, handleModalToggle: mockToggle })));
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    it('should apply default display mode class', () => {
+        render(_jsx(FilePreview, Object.assign({}, defaultProps)));
+        const modal = screen.getByRole('dialog');
+        expect(modal).toHaveClass('pf-chatbot__file-preview-modal--default');
+    });
+    it('should apply custom display mode class', () => {
+        render(_jsx(FilePreview, Object.assign({}, defaultProps, { displayMode: ChatbotDisplayMode.fullscreen })));
+        const modal = screen.getByRole('dialog');
+        expect(modal).toHaveClass('pf-chatbot__file-preview-modal--fullscreen');
+    });
+    it('should apply compact styling when isCompact is true', () => {
+        render(_jsx(FilePreview, Object.assign({}, defaultProps, { isCompact: true })));
+        const modal = screen.getByRole('dialog');
+        expect(modal).toHaveClass('pf-m-compact');
+    });
+    it('should not apply compact styling when isCompact is false', () => {
+        render(_jsx(FilePreview, Object.assign({}, defaultProps, { isCompact: false })));
+        const modal = screen.getByRole('dialog');
+        expect(modal).not.toHaveClass('pf-m-compact');
+    });
+    it('should apply custom className', () => {
+        const customClass = 'custom-file-preview';
+        render(_jsx(FilePreview, Object.assign({}, defaultProps, { className: customClass })));
+        const modal = screen.getByRole('dialog');
+        expect(modal).toHaveClass(customClass);
+    });
+    it('should pass through additional props to ChatbotModal', () => {
+        render(_jsx(FilePreview, Object.assign({}, defaultProps, { "data-testid": "file-preview-modal" })));
+        const modal = screen.getByTestId('file-preview-modal');
+        expect(modal).toBeInTheDocument();
+    });
+    it('should pass modalHeaderProps to ModalHeader', () => {
+        const modalHeaderProps = {
+            'data-testid': 'custom-header'
+        };
+        render(_jsx(FilePreview, Object.assign({}, defaultProps, { modalHeaderProps: modalHeaderProps })));
+        const header = screen.getByTestId('custom-header');
+        expect(header).toBeInTheDocument();
+    });
+    it('should pass modalBodyProps to ModalBody', () => {
+        const modalBodyProps = {
+            'data-testid': 'custom-body'
+        };
+        render(_jsx(FilePreview, Object.assign({}, defaultProps, { modalBodyProps: modalBodyProps })));
+        const body = screen.getByTestId('custom-body');
+        expect(body).toBeInTheDocument();
+    });
+    it('should pass ouiaId to ChatbotModal', () => {
+        const ouiaId = 'file-preview-ouia-id';
+        render(_jsx(FilePreview, Object.assign({}, defaultProps, { ouiaId: ouiaId })));
+        const modal = screen.getByRole('dialog');
+        expect(modal).toHaveAttribute('data-ouia-component-id', ouiaId);
+    });
+    it('should handle complex children', () => {
+        const complexChildren = (_jsxs("div", { children: [_jsx("h3", { children: "File details" }), _jsx("p", { children: "Size: 1.2 MB" }), _jsx(Button, { children: "Download" })] }));
+        render(_jsx(FilePreview, Object.assign({}, defaultProps, { children: complexChildren })));
+        expect(screen.getByRole('heading', { name: /File details/i })).toBeTruthy();
+        expect(screen.getByText('Size: 1.2 MB')).toBeTruthy();
+        expect(screen.getByRole('button', { name: /Download/i })).toBeTruthy();
+    });
+});

package/dist/esm/FilePreview/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './FilePreview';
+export * from './FilePreview';

package/dist/esm/FilePreview/index.js

@@ -0,0 +1,2 @@
+export { default } from './FilePreview';
+export * from './FilePreview';

package/dist/esm/Message/Message.d.ts

@@ -11,6 +11,7 @@ import { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
 import { TableProps } from '@patternfly/react-table';
 import { PluggableList } from 'unified';
 import { ToolResponseProps } from '../ToolResponse';
+import { DeepThinkingProps } from '../DeepThinking';
 export interface MessageAttachment {
     /** Name of file attached to the message */
     name: string;
@@ -148,6 +149,8 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
     reactMarkdownProps?: Options;
     /** Props for tool response card */
     toolResponse?: ToolResponseProps;
+    /** Props for deep thinking card */
+    deepThinking?: DeepThinkingProps;
 }
 export declare const MessageBase: FunctionComponent<MessageProps>;
 declare const Message: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/Message/Message.js

@@ -45,8 +45,9 @@ import ErrorMessage from './ErrorMessage/ErrorMessage';
 import MessageInput from './MessageInput';
 import { rehypeMoveImagesOutOfParagraphs } from './Plugins/rehypeMoveImagesOutOfParagraphs';
 import ToolResponse from '../ToolResponse';
+import DeepThinking from '../DeepThinking';
 export const MessageBase = (_a) => {
-    var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact, isMarkdownDisabled, reactMarkdownProps, toolResponse } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact", "isMarkdownDisabled", "reactMarkdownProps", "toolResponse"]);
+    var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact, isMarkdownDisabled, reactMarkdownProps, toolResponse, deepThinking } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact", "isMarkdownDisabled", "reactMarkdownProps", "toolResponse", "deepThinking"]);
     const [messageText, setMessageText] = useState(content);
     useEffect(() => {
         setMessageText(content);
@@ -115,7 +116,7 @@ export const MessageBase = (_a) => {
         }
         return (_jsxs(_Fragment, { children: [beforeMainContent && _jsx(_Fragment, { children: beforeMainContent }), error ? _jsx(ErrorMessage, Object.assign({}, error)) : handleMarkdown()] }));
     };
-    return (_jsxs("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props, { children: [_jsx(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)), _jsxs("div", { className: "pf-chatbot__message-contents", children: [_jsxs("div", { className: "pf-chatbot__message-meta", children: [name && (_jsx("span", { className: "pf-chatbot__message-name", children: _jsx(Truncate, { content: name }) })), role === 'bot' && (_jsx(Label, { variant: "outline", isCompact: true, children: botWord })), _jsx(Timestamp, { date: date, children: timestamp })] }), _jsxs("div", { className: "pf-chatbot__message-response", children: [_jsxs("div", { className: "pf-chatbot__message-and-actions", children: [renderMessage(), afterMainContent && _jsx(_Fragment, { children: afterMainContent }), toolResponse && _jsx(ToolResponse, Object.assign({}, toolResponse)), !isLoading && sources && _jsx(SourcesCard, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && (_jsx(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })), !isLoading && !isEditable && actions && _jsx(ResponseActions, { actions: actions }), userFeedbackForm && _jsx(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })), userFeedbackComplete && (_jsx(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))), !isLoading && quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))] }), attachments && (_jsx("div", { className: "pf-chatbot__message-attachments-container", children: attachments.map((attachment) => {
+    return (_jsxs("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props, { children: [_jsx(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)), _jsxs("div", { className: "pf-chatbot__message-contents", children: [_jsxs("div", { className: "pf-chatbot__message-meta", children: [name && (_jsx("span", { className: "pf-chatbot__message-name", children: _jsx(Truncate, { content: name }) })), role === 'bot' && (_jsx(Label, { variant: "outline", isCompact: true, children: botWord })), _jsx(Timestamp, { date: date, children: timestamp })] }), _jsxs("div", { className: "pf-chatbot__message-response", children: [_jsxs("div", { className: "pf-chatbot__message-and-actions", children: [renderMessage(), afterMainContent && _jsx(_Fragment, { children: afterMainContent }), toolResponse && _jsx(ToolResponse, Object.assign({}, toolResponse)), deepThinking && _jsx(DeepThinking, Object.assign({}, deepThinking)), !isLoading && sources && _jsx(SourcesCard, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && (_jsx(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })), !isLoading && !isEditable && actions && _jsx(ResponseActions, { actions: actions }), userFeedbackForm && _jsx(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })), userFeedbackComplete && (_jsx(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))), !isLoading && quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))] }), attachments && (_jsx("div", { className: "pf-chatbot__message-attachments-container", children: attachments.map((attachment) => {
                                     var _a;
                                     return (_jsx("div", { className: "pf-chatbot__message-attachment", children: _jsx(FileDetailsLabel, { fileName: attachment.name, fileId: attachment.id, onClose: attachment.onClose, onClick: attachment.onClick, isLoading: attachment.isLoading, closeButtonAriaLabel: attachment.closeButtonAriaLabel, languageTestId: attachment.languageTestId, spinnerTestId: attachment.spinnerTestId }) }, (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name));
                                 }) })), !isLoading && endContent && _jsx(_Fragment, { children: endContent })] })] })] })));

package/dist/esm/Message/Message.test.js

@@ -138,6 +138,11 @@ const EMPTY_TABLE = `
  `;
 const IMAGE = `![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
 const INLINE_IMAGE = `inline text ![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
+const DEEP_THINKING = {
+    toggleContent: 'Show thinking',
+    subheading: 'Thought for 3 seconds',
+    body: "Here's why I said this."
+};
 const ERROR = {
     title: 'Could not load chat',
     children: 'Wait a few minutes and check your network settings. If the issue persists: ',
@@ -759,4 +764,10 @@ describe('Message', () => {
         // code block isn't rendering
         expect(screen.queryByRole('button', { name: 'Copy code' })).toBeFalsy();
     });
+    it('should render deep thinking section correctly', () => {
+        render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: "", deepThinking: DEEP_THINKING }));
+        expect(screen.getByRole('button', { name: /Show thinking/i })).toBeTruthy();
+        expect(screen.getByText('Thought for 3 seconds')).toBeTruthy();
+        expect(screen.getByText("Here's why I said this.")).toBeTruthy();
+    });
 });

package/dist/esm/index.d.ts

@@ -26,12 +26,16 @@ export { default as CodeModal } from './CodeModal';
 export * from './CodeModal';
 export { default as Compare } from './Compare';
 export * from './Compare';
+export { default as DeepThinking } from './DeepThinking';
+export * from './DeepThinking';
 export { default as FileDetails } from './FileDetails';
 export * from './FileDetails';
 export { default as FileDetailsLabel } from './FileDetailsLabel';
 export * from './FileDetailsLabel';
 export { default as FileDropZone } from './FileDropZone';
 export * from './FileDropZone';
+export { default as FilePreview } from './FilePreview';
+export * from './FilePreview';
 export { default as LoadingMessage } from './LoadingMessage';
 export * from './LoadingMessage';
 export { default as Message } from './Message';

package/dist/esm/index.js

@@ -27,12 +27,16 @@ export { default as CodeModal } from './CodeModal';
 export * from './CodeModal';
 export { default as Compare } from './Compare';
 export * from './Compare';
+export { default as DeepThinking } from './DeepThinking';
+export * from './DeepThinking';
 export { default as FileDetails } from './FileDetails';
 export * from './FileDetails';
 export { default as FileDetailsLabel } from './FileDetailsLabel';
 export * from './FileDetailsLabel';
 export { default as FileDropZone } from './FileDropZone';
 export * from './FileDropZone';
+export { default as FilePreview } from './FilePreview';
+export * from './FilePreview';
 export { default as LoadingMessage } from './LoadingMessage';
 export * from './LoadingMessage';
 export { default as Message } from './Message';

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderNewChatButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderNewChatButton.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.test.tsx","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.test.tsx","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageInput.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/Plugins/index.ts","../src/Message/Plugins/rehypeCodeBlockToggle.ts","../src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/MessageDivider/MessageDivider.test.tsx","../src/MessageDivider/MessageDivider.tsx","../src/MessageDivider/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/ToolResponse/ToolResponse.test.tsx","../src/ToolResponse/ToolResponse.tsx","../src/ToolResponse/index.ts","../src/__mocks__/rehype-external-links.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.ts"],"version":"5.6.3"}
+{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderNewChatButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderNewChatButton.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.test.tsx","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.test.tsx","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/DeepThinking/DeepThinking.test.tsx","../src/DeepThinking/DeepThinking.tsx","../src/DeepThinking/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/FilePreview/FilePreview.test.tsx","../src/FilePreview/FilePreview.tsx","../src/FilePreview/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageInput.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/Plugins/index.ts","../src/Message/Plugins/rehypeCodeBlockToggle.ts","../src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/MessageDivider/MessageDivider.test.tsx","../src/MessageDivider/MessageDivider.tsx","../src/MessageDivider/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/ToolResponse/ToolResponse.test.tsx","../src/ToolResponse/ToolResponse.tsx","../src/ToolResponse/index.ts","../src/__mocks__/rehype-external-links.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.ts"],"version":"5.6.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.4.0-prerelease.17",
+  "version": "6.4.0-prerelease.19",
   "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/Messages/FilePreview.tsx

@@ -0,0 +1,33 @@
+import { useState, FunctionComponent, MouseEvent as ReactMouseEvent } from 'react';
+import { Button, Checkbox } from '@patternfly/react-core';
+import FilePreview from '@patternfly/chatbot/dist/dynamic/FilePreview';
+
+export const AttachmentEditModalExample: FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isCompact, setIsCompact] = useState(false);
+
+  const handleModalToggle = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <>
+      <Checkbox
+        label="Show compact version"
+        isChecked={isCompact}
+        onChange={() => setIsCompact(!isCompact)}
+        id="modal-compact-no-preview"
+        name="modal-compact-no-preview"
+      ></Checkbox>
+      <Button onClick={handleModalToggle}>Launch file preview modal</Button>
+      <FilePreview
+        isModalOpen={isModalOpen}
+        handleModalToggle={handleModalToggle}
+        fileName="compressed-file.zip"
+        isCompact={isCompact}
+      >
+        Preview unavailable
+      </FilePreview>
+    </>
+  );
+};

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithDeepThinking.tsx

@@ -0,0 +1,17 @@
+import { FunctionComponent } from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
+
+export const MessageWithDeepThinkingExample: FunctionComponent = () => (
+  <Message
+    name="Bot"
+    role="bot"
+    avatar={patternflyAvatar}
+    content="This example has a body description that's within the recommended limit of 2 lines."
+    deepThinking={{
+      toggleContent: 'Show thinking',
+      subheading: 'Thought for 3 seconds',
+      body: "Here's why I said this."
+    }}
+  />
+);

package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

@@ -47,6 +47,7 @@ import { monitorSampleAppQuickStart } from '@patternfly/chatbot/src/Message/Quic
 import userAvatar from './user_avatar.svg';
 import squareImg from './PF-social-color-square.svg';
 import { CSSProperties, useState, Fragment, FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent, Ref, isValidElement, cloneElement, Children, ReactNode, useRef, useEffect } from 'react';
+import FilePreview from '@patternfly/chatbot/dist/dynamic/FilePreview';
 
 The `content` prop of the `<Message>` component is passed to a `<Markdown>` component (from [react-markdown](https://remarkjs.github.io/react-markdown/)), which is configured to translate plain text strings into PatternFly [`<Content>` components](/components/content) and code blocks into PatternFly [`<CodeBlock>` components.](/components/code-block)
 
@@ -186,6 +187,16 @@ If you are using [model context protocol (MCP)](https://www.redhat.com/en/blog/m
 
 ```
 
+### Messages with deep thinking
+
+You can share details about the "thought process" behind an LLM's response, also known as deep thinking. To display a customizable, expandable card with these details, pass `deepThinking` to `<Message>` and provide a subheading (optional) and content body. 
+
+Because this is an evolving area, this card content is currently fully customizable.
+
+```js file="./MessageWithDeepThinking.tsx"
+
+```
+
 ### Messages with quick start tiles
 
 [Quick start](/extensions/quick-starts/) tiles can be added to messages via the `quickStarts` prop. Users can initiate the quick start from a link within the message tile.
@@ -263,6 +274,14 @@ To allow users to edit an attached file, load a new code editor within the ChatB
 
 ```
 
+### File preview
+
+If the contents of an attachment cannot be previewed, load a file preview modal with a view of the file name and an unavailable message. When users close the modal, return to the main ChatBot window.
+
+```js file="./FilePreview.tsx"
+
+```
+
 ### Failed attachment error
 
 When an attachment upload fails, a [danger alert](/components/alert) is displayed to provide details about the reason for failure.

package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

@@ -87,6 +87,7 @@ import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import termsAndConditionsHeader from './PF-TermsAndConditionsHeader.svg';
 import { CloseIcon, SearchIcon, OutlinedCommentsIcon } from '@patternfly/react-icons';
 import { FunctionComponent, FormEvent, useState, useRef, MouseEvent, isValidElement, cloneElement, Children, ReactNode, Ref, MouseEvent as ReactMouseEvent, CSSProperties, useEffect} from 'react';
+import FilePreview from '@patternfly/chatbot/dist/dynamic/FilePreview';
 
 ## Structure
 

package/src/DeepThinking/DeepThinking.scss

@@ -0,0 +1,24 @@
+.pf-chatbot__deep-thinking {
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--control--read-only);
+  overflow: unset;
+}
+
+.pf-chatbot__deep-thinking-expandable-section {
+  --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--xs);
+}
+
+.pf-chatbot__deep-thinking-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--xs);
+}
+
+.pf-chatbot__deep-thinking-subheading {
+  font-size: var(--pf-t--global--font--size--body--sm);
+  font-weight: var(--pf-t--global--font--weight--body--default);
+  color: var(--pf-t--global--text--color--subtle);
+}
+
+.pf-chatbot__deep-thinking-body {
+  color: var(--pf-t--global--text--color--subtle);
+}

package/src/DeepThinking/DeepThinking.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import DeepThinking from './DeepThinking';
+
+describe('DeepThinking', () => {
+  const defaultProps = {
+    toggleContent: 'Show thinking'
+  };
+
+  it('should render with required props only', () => {
+    render(<DeepThinking {...defaultProps} />);
+    expect(screen.getByText('Show thinking')).toBeTruthy();
+  });
+
+  it('should render subheading when provided', () => {
+    const subheading = 'Thought for 3 seconds';
+    render(<DeepThinking {...defaultProps} subheading={subheading} />);
+    expect(screen.getByText(subheading)).toBeTruthy();
+  });
+
+  it('should render body content when provided', () => {
+    const body = "Here's why I think that";
+    render(<DeepThinking {...defaultProps} body={body} />);
+    expect(screen.getByText(body)).toBeTruthy();
+  });
+
+  it('should render with complex content including React elements', () => {
+    const body = (
+      <div>
+        <p>Complex body content</p>
+        <ul>
+          <li>Item 1</li>
+          <li>Item 2</li>
+        </ul>
+      </div>
+    );
+
+    render(<DeepThinking {...defaultProps} body={body} />);
+    expect(screen.getByText('Complex body content')).toBeTruthy();
+    expect(screen.getByText('Item 1')).toBeTruthy();
+    expect(screen.getByText('Item 2')).toBeTruthy();
+  });
+
+  it('should apply custom className from cardProps', () => {
+    const { container } = render(
+      <DeepThinking {...defaultProps} cardProps={{ className: 'custom-tool-response-class' }} />
+    );
+    expect(container.querySelector('.custom-tool-response-class')).toBeTruthy();
+  });
+
+  it('should pass through expandableSectionProps', () => {
+    render(<DeepThinking {...defaultProps} expandableSectionProps={{ className: 'custom-expandable-class' }} />);
+    expect(document.querySelector('.custom-expandable-class')).toBeTruthy();
+  });
+
+  it('should not render subheading span when subheading is not provided', () => {
+    const { container } = render(<DeepThinking {...defaultProps} />);
+    const subheadingContainer = container.querySelector('.pf-chatbot__tool-response-subheading');
+    expect(subheadingContainer).toBeFalsy();
+  });
+});