@patternfly/chatbot 6.3.2 → 6.4.0-prerelease.11

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

@@ -1,8 +1,43 @@
-import { Fragment, FunctionComponent } from 'react';
-
+import { Fragment, FunctionComponent, useState, useEffect } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import userAvatar from './user_avatar.svg';
-import { Alert, Badge, Button, Card, CardBody, CardFooter, CardTitle } from '@patternfly/react-core';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionToggle,
+  Alert,
+  Badge,
+  Button,
+  ButtonVariant,
+  Card,
+  CardBody,
+  CardExpandableContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  CodeBlock,
+  CodeBlockCode,
+  Content,
+  ContentVariants,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Flex,
+  FlexItem,
+  HelperText,
+  HelperTextItem,
+  Icon,
+  Progress,
+  ProgressMeasureLocation,
+  Spinner
+} from '@patternfly/react-core';
+import ArrowCircleDownIcon from '@patternfly/react-icons/dist/esm/icons/arrow-circle-down-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
+import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+import React from 'react';
 
 const UserActionEndContent = () => {
   // eslint-disable-next-line no-console
@@ -36,6 +71,350 @@ const BeforeMainContent = () => (
   </div>
 );
 
+const downloadCard = (
+  <Card>
+    <CardHeader isToggleRightAligned>
+      <CardTitle>
+        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+          <FlexItem>
+            <Icon size="lg" status="success">
+              <CheckCircleIcon />
+            </Icon>
+          </FlexItem>
+          <FlexItem>Your discovery ISO is ready</FlexItem>
+        </Flex>
+      </CardTitle>
+    </CardHeader>
+
+    <CardBody>
+      <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsLg' }}>
+        <FlexItem>
+          <Content component={ContentVariants.p}>
+            To begin adding hosts to your bare metal cluster, you first need to boot them with the generated Discovery
+            ISO. This allows the installation program to see and manage your hardware.
+          </Content>
+        </FlexItem>
+
+        <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsSm' }}>
+          <FlexItem>
+            <Button variant={ButtonVariant.primary} icon={<ArrowCircleDownIcon />} isBlock>
+              Download Discovery ISO
+            </Button>
+          </FlexItem>
+
+          <FlexItem alignSelf={{ default: 'alignSelfCenter' }}>
+            <Content component={ContentVariants.small}>1.2 GB • Expires in 24 hours</Content>
+          </FlexItem>
+        </Flex>
+      </Flex>
+    </CardBody>
+
+    <CardFooter>
+      <Content component={ContentVariants.small}>
+        <strong>Next step:</strong> After downloading, boot your bare metal hosts from this ISO image.
+      </Content>
+    </CardFooter>
+  </Card>
+);
+interface Stage {
+  id: string;
+  name: string;
+  startProgress: number;
+  endProgress: number;
+}
+
+const LiveProgressSummaryCard = () => {
+  const [isCardExpanded, setIsCardExpanded] = useState(false);
+  const [isAccordionExpanded, setIsAccordionExpanded] = useState('installing-toggle');
+  const [progress, setProgress] = useState(15);
+  const [isSimulationRunning, setIsSimulationRunning] = useState(false);
+  const [userManuallyExpandedAccordion, setUserManuallyExpandedAccordion] = useState(false);
+
+  const stages: Stage[] = [
+    {
+      id: 'installing-toggle',
+      name: 'Installing cluster bootstrap',
+      startProgress: 0,
+      endProgress: 25
+    },
+    {
+      id: 'setup-toggle',
+      name: 'Control plane setup',
+      startProgress: 25,
+      endProgress: 45
+    },
+    {
+      id: 'deploying-toggle',
+      name: 'Deploying cluster operators',
+      startProgress: 45,
+      endProgress: 85
+    },
+    {
+      id: 'finalizing-toggle',
+      name: 'Finalizing installation',
+      startProgress: 85,
+      endProgress: 100
+    }
+  ];
+
+  const getCurrentStage = () =>
+    stages.find((stage) => progress >= stage.startProgress && progress < stage.endProgress) ||
+    stages[stages.length - 1];
+
+  const getTimeRemaining = () => {
+    const remainingProgress = 100 - progress;
+    const estimatedMinutes = Math.max(1, Math.round((remainingProgress / 100) * 30)); // 30 minutes total simulation
+    return `About ${estimatedMinutes} minute${estimatedMinutes !== 1 ? 's' : ''} remaining`;
+  };
+
+  const getCurrentStageName = () => {
+    const currentStage = getCurrentStage();
+    return currentStage.name;
+  };
+
+  const getStageStatus = (stage: Stage) => {
+    if (progress >= stage.endProgress) {
+      return 'completed';
+    }
+    if (progress >= stage.startProgress) {
+      return 'in-progress';
+    }
+    return 'pending';
+  };
+
+  const renderStageIcon = (stage: Stage) => {
+    const status = getStageStatus(stage);
+
+    if (status === 'completed') {
+      return <CheckCircleIcon color="green" aria-label="Complete" />;
+    } else if (status === 'in-progress') {
+      return <Spinner size="sm" aria-valuetext="In progress" />;
+    } else {
+      return <div style={{ width: 'var(--pf-t--global--spacer--md)' }}>{/* Empty space for pending stages */}</div>;
+    }
+  };
+
+  // Auto-increment progress when simulation is running
+  useEffect(() => {
+    let interval;
+
+    if (isSimulationRunning && progress < 100) {
+      interval = setInterval(() => {
+        setProgress((prev) => {
+          const increment = Math.random() * 2 + 0.5; // Random increment between 0.5-2.5%
+          const newProgress = Math.min(prev + increment, 100);
+
+          // Stop simulation when complete
+          if (newProgress >= 100) {
+            setIsSimulationRunning(false);
+            setUserManuallyExpandedAccordion(false); // Reset manual override when simulation completes
+          }
+
+          return newProgress;
+        });
+      }, 800);
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [isSimulationRunning, progress]);
+
+  // Auto-expand accordion to show current stage (only if user hasn't manually overridden)
+  useEffect(() => {
+    if (isSimulationRunning && !userManuallyExpandedAccordion) {
+      setIsAccordionExpanded(getCurrentStage().id);
+    }
+  }, [progress, isSimulationRunning, userManuallyExpandedAccordion]);
+
+  const onExpandCard = (_event: React.MouseEvent) => {
+    setIsCardExpanded(!isCardExpanded);
+  };
+
+  const onExpandAccordion = (id: string) => {
+    setUserManuallyExpandedAccordion(true);
+
+    if (id === isAccordionExpanded) {
+      setIsAccordionExpanded('');
+    } else {
+      setIsAccordionExpanded(id);
+    }
+  };
+
+  const getStageContent = (stage: Stage) => {
+    const status = getStageStatus(stage);
+
+    if (status === 'in-progress') {
+      switch (stage.id) {
+        case 'installing-toggle':
+          return `Installing bootstrap node...
+Installing etcd cluster...
+Installing control plane...`;
+        case 'setup-toggle':
+          return `Configuring cluster networking...
+Setting up OpenShift API server...
+Configuring authentication...
+Setting up cluster operators...`;
+        case 'deploying-toggle':
+          return `Deploying openshift-apiserver operator...
+Deploying openshift-sdn operator...
+Deploying openshift-ingress operator...
+`;
+        case 'finalizing-toggle':
+          return `Finalizing cluster configuration...
+Running post-installation tasks...
+Setting up cluster console...`;
+      }
+    }
+    if (status === 'pending') {
+      return 'Processing...';
+    }
+    return 'Complete!';
+  };
+
+  const renderCodeBlock = (stage: Stage) => (
+    <CodeBlock
+      style={
+        {
+          '--pf-v6-c-code-block--BackgroundColor': 'var(--pf-t--color--gray--95)',
+          '--pf-v6-c-code-block--BorderRadius': 'var(--pf-t--global--border--radius--small)'
+        } as React.CSSProperties
+      }
+    >
+      <CodeBlockCode>{getStageContent(stage)}</CodeBlockCode>
+    </CodeBlock>
+  );
+
+  return (
+    <>
+      <Flex className="pf-v6-u-mt-lg" spaceItems={{ default: 'spaceItemsSm' }}>
+        <FlexItem>
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={() => {
+              setProgress(15);
+              setIsSimulationRunning(true);
+              setUserManuallyExpandedAccordion(false);
+            }}
+            isDisabled={isSimulationRunning}
+          >
+            {isSimulationRunning ? 'Simulation running...' : 'Start simulation of cluster installation progress'}
+          </Button>
+        </FlexItem>
+        <FlexItem>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => {
+              setIsSimulationRunning(false);
+              setProgress(15);
+              setIsAccordionExpanded('installing-toggle');
+              setUserManuallyExpandedAccordion(false);
+            }}
+          >
+            Reset
+          </Button>
+        </FlexItem>
+      </Flex>
+      <Card ouiaId="BasicCard" isExpanded={isCardExpanded}>
+        <CardHeader
+          onExpand={onExpandCard}
+          isToggleRightAligned
+          toggleButtonProps={{
+            id: 'toggle-button1',
+            'aria-label': 'Details',
+            'aria-labelledby': 'expandable-card-title toggle-button1',
+            'aria-expanded': isCardExpanded
+          }}
+        >
+          <DescriptionList>
+            <DescriptionListGroup
+              style={
+                {
+                  '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--md)'
+                } as React.CSSProperties
+              }
+            >
+              <DescriptionListTerm id="title-outside-progress-example-label">
+                OpenShift cluster installation
+              </DescriptionListTerm>
+              <DescriptionListDescription>
+                <Progress
+                  aria-labelledby="title-outside-progress-example-label"
+                  value={progress}
+                  measureLocation={ProgressMeasureLocation.outside}
+                  style={{ '--pf-v6-c-progress--GridGap': 'var(--pf-t--global--spacer--sm' } as React.CSSProperties}
+                  helperText={
+                    <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+                      <FlexItem>
+                        <HelperText>
+                          <HelperTextItem>
+                            {progress >= 100 ? 'Installation complete!' : getCurrentStageName()}
+                          </HelperTextItem>
+                        </HelperText>
+                      </FlexItem>
+                      <FlexItem>
+                        <HelperText>
+                          {/* Progress was getting announced on VoiceOver constantly - this helps avoid that */}
+                          <HelperTextItem aria-live="off">
+                            {progress >= 100 ? 'Completed' : getTimeRemaining()}
+                          </HelperTextItem>
+                        </HelperText>
+                      </FlexItem>
+                    </Flex>
+                  }
+                />
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+          </DescriptionList>
+        </CardHeader>
+        <CardExpandableContent>
+          <CardBody>
+            <hr className="pf-v6-u-mb-md" />
+            <Accordion
+              style={
+                {
+                  '--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart': 'var(--pf-t--global--spacer--md)',
+                  '--pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd': '0',
+                  '--pf-v6-c-accordion__expandable-content-body--PaddingInlineStart': '0',
+                  '--pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd': '0',
+                  '--pf-v6-c-accordion__expandable-content--BackgroundColor': 'initial',
+                  '--pf-v6-c-accordion__expandable-content--Color': '#fff'
+                } as React.CSSProperties
+              }
+            >
+              {stages.map((stage) => (
+                <AccordionItem key={stage.id} isExpanded={isAccordionExpanded === stage.id}>
+                  <AccordionToggle
+                    onClick={() => {
+                      onExpandAccordion(stage.id);
+                    }}
+                    id={stage.id}
+                  >
+                    <Flex spaceItems={{ default: 'spaceItemsSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+                      <FlexItem>{renderStageIcon(stage)}</FlexItem>
+                      <FlexItem>{stage.name}</FlexItem>
+                    </Flex>
+                  </AccordionToggle>
+                  <AccordionContent id={stage.id.replace('-toggle', '')}>{renderCodeBlock(stage)}</AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </CardBody>
+        </CardExpandableContent>
+        <CardFooter>
+          <Button isBlock variant="tertiary" icon={<ArrowRightIcon />} iconPosition="end">
+            Open in console
+          </Button>
+        </CardFooter>
+      </Card>
+    </>
+  );
+};
+
 export const UserMessageWithExtraContent: FunctionComponent = () => (
   <>
     <Message
@@ -50,5 +429,24 @@ export const UserMessageWithExtraContent: FunctionComponent = () => (
         endContent: <UserActionEndContent />
       }}
     />
+    <Message
+      avatar={userAvatar}
+      name="User"
+      role="user"
+      content="This is a main message."
+      timestamp="1 hour ago"
+      extraContent={{
+        afterMainContent: <LiveProgressSummaryCard />
+      }}
+    />
+    <Message
+      avatar={patternflyAvatar}
+      name="Bot"
+      role="bot"
+      content="All set! I've finished building the Discovery ISO. The next step is to download it and boot your hosts, which you can do using the summary card I've prepared for you:"
+      extraContent={{
+        endContent: downloadCard
+      }}
+    />
   </>
 );

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotConversationEditing.tsx

@@ -0,0 +1,202 @@
+// From Cursor, with aid
+import React, { FunctionComponent, useState, useRef, useEffect } from 'react';
+import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotConversationHistoryNav, {
+  Conversation
+} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import { ChatbotModal } from '@patternfly/chatbot/dist/dynamic/ChatbotModal';
+import {
+  Checkbox,
+  DropdownItem,
+  DropdownList,
+  Button,
+  TextInput,
+  Form,
+  FormGroup,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from '@patternfly/react-core';
+
+export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(true);
+  const displayMode = ChatbotDisplayMode.embedded;
+
+  // Modal state
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingConversationId, setEditingConversationId] = useState<string | number | null>(null);
+  const [editingText, setEditingText] = useState('');
+
+  // Ref for the text input
+  const textInputRef = useRef<HTMLInputElement>(null);
+
+  // Focus the text input when modal opens
+  useEffect(() => {
+    if (isModalOpen && textInputRef.current) {
+      textInputRef.current.focus();
+      // Move cursor to the end of the text
+      const length = textInputRef.current.value.length;
+      textInputRef.current.setSelectionRange(length, length);
+    }
+  }, [isModalOpen]);
+
+  const findConversationAndGroup = (conversations: { [key: string]: Conversation[] }, itemId: string | number) => {
+    for (const [groupKey, conversationList] of Object.entries(conversations)) {
+      const conversationIndex = conversationList.findIndex((conv) => conv.id === itemId);
+      if (conversationIndex !== -1) {
+        return { groupKey, conversationIndex, conversation: conversationList[conversationIndex] };
+      }
+    }
+    return null;
+  };
+
+  const onRenameClick = (itemId: string | number) => {
+    const result = findConversationAndGroup(conversations, itemId);
+    if (result) {
+      setEditingConversationId(itemId);
+      setEditingText(result.conversation.text);
+      setIsModalOpen(true);
+    }
+  };
+
+  const handleModalSave = () => {
+    if (editingConversationId) {
+      setConversations((prevConversations) => {
+        const result = findConversationAndGroup(prevConversations, editingConversationId);
+        if (!result) {
+          return prevConversations;
+        }
+
+        const { groupKey, conversationIndex } = result;
+        const newConversations = { ...prevConversations };
+        const newGroup = [...newConversations[groupKey]];
+
+        newGroup[conversationIndex] = { ...newGroup[conversationIndex], text: editingText };
+        newConversations[groupKey] = newGroup;
+
+        return newConversations;
+      });
+    }
+    handleModalClose();
+  };
+
+  const handleModalCancel = () => {
+    handleModalClose();
+  };
+
+  const handleModalClose = () => {
+    setIsModalOpen(false);
+    setEditingConversationId(null);
+    setEditingText('');
+  };
+
+  const handleTextInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      handleModalSave();
+    }
+  };
+
+  const renderMenuItems = (itemId: string | number) => [
+    <DropdownList key={`list-${itemId}`}>
+      <DropdownItem value="Download" id="Download">
+        Download
+      </DropdownItem>
+      <DropdownItem value="Rename" id="Rename" onClick={() => onRenameClick(itemId)}>
+        Rename
+      </DropdownItem>
+      <DropdownItem value="Archive" id="Archive">
+        Archive
+      </DropdownItem>
+      <DropdownItem value="Delete" id="Delete">
+        Delete
+      </DropdownItem>
+    </DropdownList>
+  ];
+
+  const initialConversations: { [key: string]: Conversation[] } = {
+    Today: [{ id: '1', text: 'Red Hat products and services' }],
+    'This month': [
+      {
+        id: '2',
+        text: 'Enterprise Linux installation and setup'
+      },
+      { id: '3', text: 'Troubleshoot system crash' }
+    ],
+    March: [
+      { id: '4', text: 'Ansible security and updates' },
+      { id: '5', text: 'Red Hat certification' },
+      { id: '6', text: 'Lightspeed user documentation' }
+    ],
+    February: [
+      { id: '7', text: 'Crashing pod assistance' },
+      { id: '8', text: 'OpenShift AI pipelines' },
+      { id: '9', text: 'Updating subscription plan' },
+      { id: '10', text: 'Red Hat licensing options' }
+    ],
+    January: [
+      { id: '11', text: 'RHEL system performance' },
+      { id: '12', text: 'Manage user accounts' }
+    ]
+  };
+
+  const [conversations, setConversations] = useState(initialConversations);
+
+  // Create conversations with menu items dynamically
+  const conversationsWithMenuItems = () => {
+    const newConversations = { ...conversations };
+    Object.keys(newConversations).forEach((groupKey) => {
+      newConversations[groupKey] = newConversations[groupKey].map((conv) => ({
+        ...conv,
+        menuItems: renderMenuItems(conv.id)
+      }));
+    });
+    return newConversations;
+  };
+
+  return (
+    <>
+      <Checkbox
+        label="Display drawer"
+        isChecked={isDrawerOpen}
+        onChange={() => setIsDrawerOpen(!isDrawerOpen)}
+        id="drawer-actions-visible"
+        name="drawer-actions-visible"
+      ></Checkbox>
+      <ChatbotConversationHistoryNav
+        displayMode={displayMode}
+        onDrawerToggle={() => setIsDrawerOpen(!isDrawerOpen)}
+        isDrawerOpen={isDrawerOpen}
+        setIsDrawerOpen={setIsDrawerOpen}
+        conversations={conversationsWithMenuItems()}
+        drawerContent={<div>Drawer content</div>}
+      />
+
+      <ChatbotModal displayMode={displayMode} isOpen={isModalOpen} onClose={handleModalClose}>
+        <ModalHeader title="Rename Conversation" />
+        <ModalBody>
+          <Form>
+            <FormGroup label="Conversation Name" fieldId="conversation-name" isRequired>
+              <TextInput
+                isRequired
+                ref={textInputRef}
+                value={editingText}
+                onChange={(_, value) => setEditingText(value)}
+                onKeyDown={handleTextInputKeyDown}
+                id="conversation-name"
+              />
+            </FormGroup>
+          </Form>
+        </ModalBody>
+        <ModalFooter>
+          <Button key="save" variant="primary" onClick={handleModalSave}>
+            Save
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalCancel}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </ChatbotModal>
+    </>
+  );
+};

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderBasic.tsx

@@ -17,7 +17,8 @@ import {
   ChatbotHeaderActions,
   ChatbotHeaderTitle,
   ChatbotHeaderOptionsDropdown,
-  ChatbotHeaderSelectorDropdown
+  ChatbotHeaderSelectorDropdown,
+  ChatbotHeaderNewChatButton
 } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
 import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
 import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
@@ -31,6 +32,7 @@ export const BasicDemo: FunctionComponent = () => {
   const [selectedModel, setSelectedModel] = useState('Granite Code 7B');
   const [showAll, setShowAll] = useState<boolean>(true);
   const [showMenu, setShowMenu] = useState<boolean>(true);
+  const [showNewChatButton, setShowNewChatButton] = useState<boolean>(true);
   const [showLogo, setShowLogo] = useState<boolean>(false);
   const [showCenteredLogo, setShowCenteredLogo] = useState<boolean>(true);
   const [showSelectorDropdown, setShowSelectorDropdown] = useState<boolean>(true);
@@ -58,9 +60,10 @@ export const BasicDemo: FunctionComponent = () => {
     <Stack hasGutter>
       <FormGroup role="radiogroup" isInline fieldId="header-variant-form-radio-group" label="Variant">
         <Checkbox
-          isChecked={showMenu && showCenteredLogo && showSelectorDropdown && showOptionsDropdown}
+          isChecked={showMenu && showNewChatButton && showCenteredLogo && showSelectorDropdown && showOptionsDropdown}
           onChange={() => {
             setShowMenu(true);
+            setShowNewChatButton(true);
             setShowCenteredLogo(true);
             setShowSelectorDropdown(true);
             setShowOptionsDropdown(true);
@@ -80,6 +83,16 @@ export const BasicDemo: FunctionComponent = () => {
           label="With menu"
           id="menu"
         />
+        <Checkbox
+          isChecked={showNewChatButton}
+          onChange={() => {
+            setShowNewChatButton(!showNewChatButton);
+            showAll && setShowAll(!showAll);
+          }}
+          name="basic-inline-radio"
+          label="With new chat button"
+          id="new-chat-button"
+        />
         <Checkbox
           isChecked={showLogo}
           onChange={() => {
@@ -124,9 +137,10 @@ export const BasicDemo: FunctionComponent = () => {
       </FormGroup>
 
       <ChatbotHeader>
-        {(showMenu || showLogo || showCenteredLogo) && (
+        {(showMenu || showNewChatButton || showLogo || showCenteredLogo) && (
           <ChatbotHeaderMain>
             {showMenu && <ChatbotHeaderMenu onMenuToggle={() => alert('Menu toggle clicked')} />}
+            {showNewChatButton && <ChatbotHeaderNewChatButton onClick={() => alert('New chat button clicked')} />}
             {(showLogo || showCenteredLogo) && (
               <ChatbotHeaderTitle>{showCenteredLogo ? <Bullseye>{title}</Bullseye> : title}</ChatbotHeaderTitle>
             )}