@patternfly/chatbot 2.1.0-prerelease.17

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

@@ -0,0 +1,278 @@
+import React from 'react';
+import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
+import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotContent from '@patternfly/chatbot/dist/dynamic/ChatbotContent';
+import ChatbotWelcomePrompt from '@patternfly/chatbot/dist/dynamic/ChatbotWelcomePrompt';
+import ChatbotFooter, { ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic/ChatbotFooter';
+import MessageBar from '@patternfly/chatbot/dist/dynamic/MessageBar';
+import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox';
+import Message, { MessageProps } from '@patternfly/chatbot/dist/dynamic/Message';
+import FileDropZone from '@patternfly/chatbot/dist/dynamic/FileDropZone';
+import { Brand, Bullseye, DropdownGroup, DropdownItem, DropdownList, DropEvent } from '@patternfly/react-core';
+import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel';
+import PreviewAttachment from '@patternfly/chatbot/dist/dynamic/PreviewAttachment';
+import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
+import ChatbotHeader, {
+  ChatbotHeaderMenu,
+  ChatbotHeaderTitle,
+  ChatbotHeaderActions,
+  ChatbotHeaderOptionsDropdown,
+  ChatbotHeaderMain
+} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
+import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert';
+import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
+import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon';
+import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
+import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
+import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
+import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
+import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
+import userAvatar from '../Messages/user_avatar.jpg';
+import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+
+interface ModalData {
+  code: string;
+  fileName: string;
+}
+
+export const BasicDemo: React.FunctionComponent = () => {
+  const onAttachmentClose = (attachmentId: string) => {
+    const index = messages.findIndex((message) => message.attachmentId === attachmentId);
+    const updatedMessages: MessageProps[] = [];
+    if (index >= 0) {
+      messages.forEach((message) => updatedMessages.push(message));
+      delete updatedMessages[index].attachmentName;
+      delete updatedMessages[index].attachmentId;
+      delete updatedMessages[index].onAttachmentClick;
+      delete updatedMessages[index].onAttachmentClose;
+      setMessages(updatedMessages);
+    }
+  };
+  const initialMessages: MessageProps[] = [
+    {
+      role: 'user',
+      content: "I'm referring to this attachment for added context in our conversation.",
+      name: 'User',
+      avatar: userAvatar,
+      attachmentName: 'auth-operator.yml',
+      attachmentId: '1',
+      onAttachmentClose,
+      onAttachmentClick: () => {
+        setCurrentModalData({ fileName: 'auth-operator.yml', code: 'test' });
+        setIsEditModalOpen(false);
+        setIsPreviewModalOpen(true);
+      }
+    },
+    {
+      role: 'bot',
+      content: 'Great, I can reference this attachment throughout our conversation.',
+      avatar: patternflyAvatar,
+      name: 'Bot'
+    }
+  ];
+
+  const [error, setError] = React.useState<string>();
+  const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(true);
+  const [file, setFile] = React.useState<File>();
+  const [isLoadingFile, setIsLoadingFile] = React.useState<boolean>(false);
+  const [messages, setMessages] = React.useState<MessageProps[]>(initialMessages);
+  const [isPreviewModalOpen, setIsPreviewModalOpen] = React.useState<boolean>(false);
+  const [isEditModalOpen, setIsEditModalOpen] = React.useState<boolean>(false);
+  const [currentModalData, setCurrentModalData] = React.useState<ModalData>();
+  const [showAlert, setShowAlert] = React.useState<boolean>(false);
+  const [displayMode, setDisplayMode] = React.useState<ChatbotDisplayMode>(ChatbotDisplayMode.default);
+
+  const onSelectDisplayMode = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    setDisplayMode(value as ChatbotDisplayMode);
+  };
+
+  const handleSend = (message) => alert(message);
+
+  // Attachments
+  // --------------------------------------------------------------------------
+  // example of how you can read a text file
+  const readFile = (file: File) =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = () => reject(reader.error);
+      reader.readAsDataURL(file);
+      // you can use reader.readAsText(file) for human-readable file types;
+    });
+
+  // handle file drop/selection
+  const handleFile = (fileArr: File[]) => {
+    setIsLoadingFile(true);
+    // any custom validation you may want
+    if (fileArr.length > 1) {
+      setShowAlert(true);
+      setFile(undefined);
+      setError('Uploaded more than one file.');
+      return;
+    }
+    // this is 25MB in bytes; size is in bytes
+    if (fileArr[0].size > 25000000) {
+      setShowAlert(true);
+      setFile(undefined);
+      setError('File is larger than 25MB.');
+      return;
+    }
+
+    readFile(fileArr[0])
+      .then((data) => {
+        // eslint-disable-next-line no-console
+        console.log(data);
+        setFile(fileArr[0]);
+        setShowAlert(false);
+        setError(undefined);
+        // this is just for demo purposes, to make the loading state really obvious
+        setTimeout(() => {
+          setIsLoadingFile(false);
+        }, 1000);
+      })
+      .catch((error: DOMException) => {
+        setError(`Failed to read file: ${error.message}`);
+      });
+  };
+
+  const handleFileDrop = (event: DropEvent, data: File[]) => {
+    handleFile(data);
+  };
+
+  const handleAttach = (data: File[]) => {
+    handleFile(data);
+  };
+
+  const onClose = () => {
+    setFile(undefined);
+  };
+
+  const horizontalLogo = (
+    <Bullseye>
+      <Brand className="show-light" src={PFHorizontalLogoColor} alt="PatternFly" />
+      <Brand className="show-dark" src={PFHorizontalLogoReverse} alt="PatternFly" />
+    </Bullseye>
+  );
+
+  const iconLogo = (
+    <>
+      <Brand className="show-light" src={PFIconLogoColor} alt="PatternFly" />
+      <Brand className="show-dark" src={PFIconLogoReverse} alt="PatternFly" />
+    </>
+  );
+
+  return (
+    <>
+      <ChatbotToggle
+        toolTipLabel="Chatbot"
+        isChatbotVisible={chatbotVisible}
+        onToggleChatbot={() => {
+          setChatbotVisible(!chatbotVisible);
+          setIsEditModalOpen(false);
+          setIsPreviewModalOpen(false);
+        }}
+      />
+      <Chatbot isVisible={chatbotVisible} displayMode={displayMode}>
+        <ChatbotHeader>
+          <ChatbotHeaderMain>
+            <ChatbotHeaderMenu onMenuToggle={() => alert('Menu toggle clicked')} />
+            <ChatbotHeaderTitle displayMode={displayMode} showOnFullScreen={horizontalLogo} showOnDefault={iconLogo} />
+          </ChatbotHeaderMain>
+          <ChatbotHeaderActions>
+            <ChatbotHeaderOptionsDropdown onSelect={onSelectDisplayMode}>
+              <DropdownGroup label="Display mode">
+                <DropdownList>
+                  <DropdownItem
+                    value={ChatbotDisplayMode.default}
+                    key="switchDisplayOverlay"
+                    icon={<OutlinedWindowRestoreIcon aria-hidden />}
+                    isSelected={displayMode === ChatbotDisplayMode.default}
+                  >
+                    <span>Overlay</span>
+                  </DropdownItem>
+                  <DropdownItem
+                    value={ChatbotDisplayMode.docked}
+                    key="switchDisplayDock"
+                    icon={<OpenDrawerRightIcon aria-hidden />}
+                    isSelected={displayMode === ChatbotDisplayMode.docked}
+                  >
+                    <span>Dock to window</span>
+                  </DropdownItem>
+                  <DropdownItem
+                    value={ChatbotDisplayMode.fullscreen}
+                    key="switchDisplayFullscreen"
+                    icon={<ExpandIcon aria-hidden />}
+                    isSelected={displayMode === ChatbotDisplayMode.fullscreen}
+                  >
+                    <span>Fullscreen</span>
+                  </DropdownItem>
+                </DropdownList>
+              </DropdownGroup>
+            </ChatbotHeaderOptionsDropdown>
+          </ChatbotHeaderActions>
+        </ChatbotHeader>
+        <FileDropZone onFileDrop={handleFileDrop} displayMode={displayMode}>
+          <ChatbotContent>
+            <MessageBox>
+              {showAlert && (
+                <ChatbotAlert
+                  variant="danger"
+                  onClose={() => {
+                    setShowAlert(false);
+                    setError(undefined);
+                  }}
+                  title="File upload failed"
+                >
+                  {error}
+                </ChatbotAlert>
+              )}
+              <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />
+              {messages.map((message) => (
+                <Message key={message.name} {...message} />
+              ))}
+            </MessageBox>
+          </ChatbotContent>
+          <ChatbotFooter>
+            {file && (
+              <div>
+                <FileDetailsLabel fileName={file.name} isLoading={isLoadingFile} onClose={onClose} />
+              </div>
+            )}
+            <MessageBar onSendMessage={handleSend} hasAttachButton handleAttach={handleAttach} />
+            <ChatbotFootnote label="Lightspeed uses AI. Check for mistakes." />
+          </ChatbotFooter>
+        </FileDropZone>
+      </Chatbot>
+      {currentModalData && (
+        <PreviewAttachment
+          code={currentModalData?.code}
+          fileName={currentModalData?.fileName}
+          isModalOpen={isPreviewModalOpen}
+          onEdit={() => {
+            setIsPreviewModalOpen(false);
+            setIsEditModalOpen(true);
+          }}
+          onDismiss={() => setCurrentModalData(undefined)}
+          handleModalToggle={() => setIsPreviewModalOpen(false)}
+          displayMode={displayMode}
+        />
+      )}
+      {currentModalData && (
+        <AttachmentEdit
+          code={currentModalData?.code}
+          fileName={currentModalData?.fileName}
+          isModalOpen={isEditModalOpen}
+          onSave={() => {
+            setIsEditModalOpen(false);
+          }}
+          onCancel={() => setCurrentModalData(undefined)}
+          handleModalToggle={() => setIsEditModalOpen(false)}
+          displayMode={displayMode}
+        />
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,268 @@
+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';
+import ChatbotWelcomePrompt from '@patternfly/chatbot/dist/dynamic/ChatbotWelcomePrompt';
+import ChatbotFooter, { ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic/ChatbotFooter';
+import MessageBar from '@patternfly/chatbot/dist/dynamic/MessageBar';
+import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox';
+import Message, { MessageProps } from '@patternfly/chatbot/dist/dynamic/Message';
+import FileDropZone from '@patternfly/chatbot/dist/dynamic/FileDropZone';
+import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem';
+import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert';
+import { Divider, DropdownGroup, DropdownItem, DropdownList, DropEvent } from '@patternfly/react-core';
+import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel';
+import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
+import { useDropzone } from 'react-dropzone';
+import userAvatar from '../Messages/user_avatar.jpg';
+import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+
+const initialMenuItems = [
+  <DropdownList key="list-1">
+    <DropdownItem value="auth-operator Pod" id="0" className="pf-chatbot-source-details-dropdown-item">
+      <SourceDetailsMenuItem
+        icon={
+          <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M0 12.5C0 5.87258 5.37258 0.5 12 0.5C18.6274 0.5 24 5.87258 24 12.5C24 19.1274 18.6274 24.5 12 24.5C5.37258 24.5 0 19.1274 0 12.5Z"
+              fill="currentColor"
+            />
+            <g clipPath="url(#clip0_3280_27488)">
+              <path
+                d="M8.25 8.75C8.25 7.92266 8.92266 7.25 9.75 7.25H12C14.0719 7.25 15.75 8.92812 15.75 11C15.75 13.0719 14.0719 14.75 12 14.75H9.75V17C9.75 17.4148 9.41484 17.75 9 17.75C8.58516 17.75 8.25 17.4148 8.25 17V14V8.75ZM9.75 13.25H12C13.2422 13.25 14.25 12.2422 14.25 11C14.25 9.75781 13.2422 8.75 12 8.75H9.75V13.25Z"
+                fill="white"
+              />
+            </g>
+            <defs>
+              <clipPath id="clip0_3280_27488">
+                <rect width="7.5" height="12" fill="white" transform="translate(8.25 6.5)" />
+              </clipPath>
+            </defs>
+          </svg>
+        }
+        name="auth-operator"
+        type="Pod"
+      />
+    </DropdownItem>
+  </DropdownList>,
+  <DropdownGroup key="group2">
+    <DropdownList>
+      <DropdownItem value="Alerts" id="1" icon={<BellIcon />}>
+        Alerts
+      </DropdownItem>
+      <DropdownItem value="Events" id="2" icon={<CalendarAltIcon />}>
+        Events
+      </DropdownItem>
+      <DropdownItem value="Logs" id="3" icon={<ClipboardIcon />}>
+        Logs
+      </DropdownItem>
+      <DropdownItem value="YAML - Status" id="4" icon={<CodeIcon />}>
+        YAML - Status
+      </DropdownItem>
+      <DropdownItem value="YAML - All contents" id="5" icon={<CodeIcon />}>
+        YAML - All contents
+      </DropdownItem>
+    </DropdownList>
+  </DropdownGroup>
+];
+
+const messages: MessageProps[] = [
+  {
+    role: 'user',
+    content: 'Hello, can you give me an example of what you can do?',
+    name: 'User',
+    avatar: userAvatar
+  },
+  {
+    role: 'bot',
+    content: 'I sure can!',
+    name: 'Bot',
+    avatar: patternflyAvatar
+  }
+];
+
+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);
+
+  const { open, getInputProps } = useDropzone({
+    onDropAccepted: (files: File[]) => {
+      setIsLoadingFile(true);
+      setIsOpen(false);
+      // any custom validation you may want
+      if (files.length > 1) {
+        setShowAlert(true);
+        setFile(undefined);
+        setError('Uploaded more than one file.');
+        return;
+      }
+      // this is 25MB in bytes; size is in bytes
+      if (files[0].size > 25000000) {
+        setShowAlert(true);
+        setFile(undefined);
+        setError('File is larger than 25MB.');
+        return;
+      }
+
+      setFile(files[0]);
+      setShowAlert(false);
+      setError(undefined);
+      // this is just for demo purposes, to make the loading state really obvious
+      setTimeout(() => {
+        setIsLoadingFile(false);
+      }, 1000);
+    }
+  });
+
+  const handleSend = (message) => alert(message);
+
+  // Attachments
+  // --------------------------------------------------------------------------
+  const handleFileDrop = (event: DropEvent, data: File[]) => {
+    setFile(data[0]);
+    setIsLoadingFile(true);
+    setTimeout(() => {
+      setIsLoadingFile(false);
+    }, 1000);
+  };
+
+  const onClose = () => {
+    setFile(undefined);
+  };
+
+  // Attachmenu menu
+  // --------------------------------------------------------------------------
+  const uploadMenuItems = [
+    <Divider key="divider" />,
+    <DropdownList key="list-2">
+      <DropdownItem
+        onClick={() => {
+          open();
+          setIsOpen(!isOpen);
+        }}
+        key="upload"
+        value="upload"
+        id="upload"
+        icon={<UploadIcon />}
+      >
+        Upload from computer
+      </DropdownItem>
+    </DropdownList>
+  ];
+
+  const onToggleClick = () => {
+    setUserFacingMenuItems(initialMenuItems.concat(uploadMenuItems));
+  };
+
+  const findMatchingElements = (elements: React.ReactNode[], targetValue: string) => {
+    let matchingElements = [] as React.ReactNode[];
+
+    elements.forEach((element) => {
+      if (React.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 }));
+        }
+
+        // Recursively check the element's children
+        const children = React.Children.toArray(element.props.children);
+        matchingElements = matchingElements.concat(findMatchingElements(children, targetValue));
+      }
+    });
+
+    return matchingElements;
+  };
+
+  const onTextChange = (textValue: string) => {
+    if (textValue === '') {
+      setUserFacingMenuItems(initialMenuItems.concat(uploadMenuItems));
+      return;
+    }
+
+    const newMenuItems = findMatchingElements(initialMenuItems, textValue);
+    // this is necessary because the React nodes we find traversing the recursive search
+    // aren't correctly wrapped in a DropdownList. This leads to problems with the
+    // auth-operator item where it winds up floating in a bad place in the DOM and never
+    // gets removed
+    setUserFacingMenuItems(
+      <>
+        <DropdownList>
+          {newMenuItems.length === 0 ? (
+            <DropdownItem key="no-items">No results found</DropdownItem>
+          ) : (
+            newMenuItems.map((item) => item)
+          )}
+        </DropdownList>
+        {uploadMenuItems.map((item) => item)}
+      </>
+    );
+  };
+
+  // Main return statement
+  // --------------------------------------------------------------------------
+  return (
+    <>
+      {/* this is required for react-dropzone to work in Safari and Firefox */}
+      <input {...getInputProps()} />
+      <ChatbotToggle
+        toolTipLabel="Chatbot"
+        isChatbotVisible={chatbotVisible}
+        onToggleChatbot={() => setChatbotVisible(!chatbotVisible)}
+      />
+      <Chatbot isVisible={chatbotVisible}>
+        <FileDropZone onFileDrop={handleFileDrop}>
+          <>
+            <ChatbotContent>
+              <MessageBox>
+                {showAlert && (
+                  <ChatbotAlert
+                    variant="danger"
+                    onClose={() => {
+                      setShowAlert(false);
+                      setError(undefined);
+                    }}
+                    title="File upload failed"
+                  >
+                    {error}
+                  </ChatbotAlert>
+                )}
+                <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />
+                {messages.map((message) => (
+                  <Message key={message.name} {...message} />
+                ))}
+              </MessageBox>
+            </ChatbotContent>
+            <ChatbotFooter>
+              {file && (
+                <div>
+                  <FileDetailsLabel fileName={file.name} isLoading={isLoadingFile} onClose={onClose} />
+                </div>
+              )}
+              <MessageBar
+                onSendMessage={handleSend}
+                attachMenuProps={{
+                  isAttachMenuOpen: isOpen,
+                  setIsAttachMenuOpen: setIsOpen,
+                  attachMenuItems: userFacingMenuItems,
+                  onAttachMenuSelect: (_ev, value) => {
+                    // eslint-disable-next-line no-console
+                    console.log('selected', value);
+                  },
+                  attachMenuInputPlaceholder: 'Search cluster resources...',
+                  onAttachMenuInputChange: onTextChange,
+                  onAttachMenuToggleClick: onToggleClick
+                }}
+              />
+              <ChatbotFootnote label="Lightspeed uses AI. Check for mistakes." />
+            </ChatbotFooter>
+          </>
+        </FileDropZone>
+      </Chatbot>
+    </>
+  );
+};