@patternfly/chatbot 6.4.0-prerelease.2 → 6.4.0-prerelease.20

package/src/ToolResponse/ToolResponse.tsx

@@ -0,0 +1,95 @@
+// ============================================================================
+// Tool Response Card
+// ============================================================================
+import {
+  Card,
+  CardBody,
+  CardBodyProps,
+  CardProps,
+  CardTitle,
+  CardTitleProps,
+  Divider,
+  DividerProps,
+  ExpandableSection,
+  ExpandableSectionProps
+} from '@patternfly/react-core';
+import { useState, type FunctionComponent } from 'react';
+
+export interface ToolResponseProps {
+  /** Toggle content shown for expandable section */
+  toggleContent: React.ReactNode;
+  /** Additional props passed to expandable section */
+  expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
+  /** Subheading rendered inside expandable section */
+  subheading?: string;
+  /** Body text rendered inside expandable section */
+  body?: React.ReactNode | string;
+  /** Content passed into tool response card body */
+  cardBody: React.ReactNode;
+  /** Content passed into tool response card title */
+  cardTitle: React.ReactNode;
+  /** Additional props passed to main card */
+  cardProps?: CardProps;
+  /** Additional props passed to main card body */
+  cardBodyProps?: CardBodyProps;
+  /** Additional props passed to tool response card */
+  toolResponseCardProps?: CardProps;
+  /** Additional props passed to tool response card body */
+  toolResponseCardBodyProps?: CardBodyProps;
+  /** Additional props passed to tool response card divider */
+  toolResponseCardDividerProps?: DividerProps;
+  /** Additional props passed to tool response card title */
+  toolResponseCardTitleProps?: CardTitleProps;
+}
+
+export const ToolResponse: FunctionComponent<ToolResponseProps> = ({
+  body,
+  cardProps,
+  expandableSectionProps,
+  subheading,
+  cardBody,
+  cardTitle,
+  cardBodyProps,
+  toggleContent,
+  toolResponseCardBodyProps,
+  toolResponseCardDividerProps,
+  toolResponseCardProps,
+  toolResponseCardTitleProps
+}: ToolResponseProps) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <Card isCompact className="pf-chatbot__tool-response" {...cardProps}>
+      <CardBody {...cardBodyProps}>
+        <ExpandableSection
+          toggleContent={toggleContent}
+          onToggle={onToggle}
+          isExpanded={isExpanded}
+          isIndented
+          className="pf-chatbot__tool-response-expandable-section"
+          {...expandableSectionProps}
+        >
+          <div className="pf-chatbot__tool-response-section">
+            {subheading && (
+              <div className="pf-chatbot__tool-response-subheading">
+                <span>{subheading}</span>
+              </div>
+            )}
+            {body && <div className="pf-chatbot__tool-response-body">{body}</div>}
+            <Card isCompact className="pf-chatbot__tool-response-card" {...toolResponseCardProps}>
+              <CardTitle {...toolResponseCardTitleProps}>{cardTitle}</CardTitle>
+              <Divider {...toolResponseCardDividerProps} />
+              <CardBody {...toolResponseCardBodyProps}>{cardBody}</CardBody>
+            </Card>
+          </div>
+        </ExpandableSection>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default ToolResponse;

package/src/ToolResponse/index.ts

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

package/src/index.ts

@@ -42,6 +42,9 @@ 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';
 
@@ -51,6 +54,9 @@ 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';
 
@@ -84,5 +90,8 @@ export * from './SourcesCard';
 export { default as TermsOfUse } from './TermsOfUse';
 export * from './TermsOfUse';
 
+export { default as ToolResponse } from './ToolResponse';
+export * from './ToolResponse';
+
 export { default as tracking } from './tracking';
 export * from './tracking';

package/src/main.scss

@@ -11,9 +11,11 @@
 @import './ChatbotWelcomePrompt/ChatbotWelcomePrompt';
 @import './CodeModal/CodeModal';
 @import './Compare/Compare';
+@import './DeepThinking/DeepThinking';
 @import './FileDetails/FileDetails';
 @import './FileDetailsLabel/FileDetailsLabel';
 @import './FileDropZone/FileDropZone';
+@import './FilePreview/FilePreview.scss';
 @import './Message/Message';
 @import './Message/CodeBlockMessage/CodeBlockMessage';
 @import './Message/ImageMessage/ImageMessage';
@@ -33,6 +35,7 @@
 @import './SourcesCard/SourcesCard.scss';
 @import './SourceDetailsMenuItem/SourceDetailsMenuItem';
 @import './TermsOfUse/TermsOfUse';
+@import './ToolResponse/ToolResponse';
 
 .ws-full-page-utils {
   left: 0 !important;