full screen toggle (#100)

* full screen toggle

* Implement expand/collapse logic

* more updates

---------

Co-authored-by: Josejulio Martínez <[email protected]>
Co-authored-by: Justin Orringer <[email protected]>

Author: 3 people

src/Components/AstroChat/AstroChat.tsx

@@ -1,5 +1,19 @@
 import React, { Dispatch, KeyboardEventHandler, SetStateAction, useCallback, useLayoutEffect, useRef, useState } from 'react';
-import { Button, InputGroup, InputGroupText, Split, SplitItem, Stack, StackItem, Text, TextArea, TextContent } from '@patternfly/react-core';
+import {
+  Button,
+  InputGroup,
+  InputGroupText,
+  Split,
+  SplitItem,
+  Stack,
+  StackItem,
+  Text,
+  TextArea,
+  TextContent,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarItem,
+} from '@patternfly/react-core';
 import { original, produce } from 'immer';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 import { LoadingMessageEntry } from '../Message/LoadingMessageEntry';
@@ -9,6 +23,8 @@ import { SystemMessageEntry } from '../Message/SystemMessageEntry';
 import { UserMessageEntry } from '../Message/UserMessageEntry';
 import { FeedbackAssistantEntry } from '../Message/FeedbackMessageEntry';
 import PlaneIcon from '@patternfly/react-icons/dist/esm/icons/paper-plane-icon';
+import CompressAltIcon from '@patternfly/react-icons/dist/esm/icons/compress-alt-icon';
+import ExpandAltIcon from '@patternfly/react-icons/dist/esm/icons/expand-alt-icon';
 import { AskOptions } from './useAstro';
 import { BannerEntry } from '../Message/BannerEntry';
 import { ThumbsMessageEntry } from '../Message/ThumbsMessageEntry';
@@ -20,11 +36,22 @@ interface AstroChatProps {
   preview: boolean;
   onClose: () => void;
   blockInput: boolean;
+  fullscreen: boolean;
+  setFullScreen: (isFullScreen: boolean) => void;
 }
 
 const findConversationEndBanner = (message: Message) => message.from === From.INTERFACE && message.type === 'finish_conversation_banner';
 
-export const AstroChat: React.FunctionComponent<AstroChatProps> = ({ messages, setMessages, ask, preview, onClose, blockInput }) => {
+export const AstroChat: React.FunctionComponent<AstroChatProps> = ({
+  messages,
+  setMessages,
+  ask,
+  preview,
+  onClose,
+  blockInput,
+  fullscreen,
+  setFullScreen,
+}) => {
   const astroContainer = useRef<HTMLDivElement>(null);
   const [input, setInput] = useState<string>('');
 
@@ -85,23 +112,27 @@ export const AstroChat: React.FunctionComponent<AstroChatProps> = ({ messages, s
 
   return (
     <div ref={astroContainer}>
-      <Stack className="astro-l-stack">
-        <StackItem className="astro-l-stack__header pf-v5-pt-xs">
+      <Stack className={`astro-l-stack ${fullscreen ? 'astro-l-stack-full-screen' : ''}`}>
+        <StackItem className="astro-l-stack__header pf-v5-u-py-md">
           <Split hasGutter>
             <SplitItem isFilled>
-              <TextContent className="pf-v5-u-pt-md pf-v5-u-pl-lg pf-u-color-light-100 pf-v5-u-font-size-xl">
+              <TextContent className="pf-v5-u-pl-lg pf-u-color-light-100 pf-v5-u-font-size-xl">
                 <Text>Virtual Assistant</Text>
               </TextContent>
             </SplitItem>
             <SplitItem>
-              <Button
-                variant="plain"
-                aria-label="Close virtual assistant"
-                className="astro-c-button-minimize pf-v5-u-p-md pf-v5-u-pl-sm pf-v5-u-color-light-100"
-                onClick={onClose}
-              >
-                <AngleDownIcon />
-              </Button>
+              <ToolbarGroup variant="icon-button-group">
+                <ToolbarItem>
+                  <Button variant="plain" aria-label="Full screen" onClick={() => setFullScreen(!fullscreen)} className="pf-v5-u-color-light-100">
+                    {fullscreen ? <CompressAltIcon /> : <ExpandAltIcon />}
+                  </Button>
+                </ToolbarItem>
+                <ToolbarItem>
+                  <Button variant="plain" aria-label="Close virtual assistant" onClick={onClose} className="pf-v5-u-color-light-100">
+                    <AngleDownIcon />
+                  </Button>
+                </ToolbarItem>
+              </ToolbarGroup>
             </SplitItem>
           </Split>
         </StackItem>

src/Components/AstroChat/AstroChatSkeleton.tsx

@@ -12,30 +12,37 @@ import {
   TextArea,
   TextAreaReadOnlyVariant,
   TextContent,
+  ToolbarGroup,
+  ToolbarItem,
 } from '@patternfly/react-core';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
+import ExpandAltIcon from '@patternfly/react-icons/dist/esm/icons/expand-alt-icon';
 import PlaneIcon from '@patternfly/react-icons/dist/esm/icons/paper-plane-icon';
 
 export const AstroChatSkeleton: React.FunctionComponent<unknown> = () => {
   return (
     <div>
       <Stack className="astro-l-stack">
-        <StackItem className="astro-l-stack__header pf-v5-pt-xs">
+        <StackItem className="astro-l-stack__header pf-v5-u-py-md">
           <Split hasGutter>
             <SplitItem isFilled>
-              <TextContent className="pf-v5-u-pt-md pf-v5-u-pl-lg pf-u-color-light-100 pf-v5-u-font-size-xl">
+              <TextContent className="pf-v5-u-pl-lg pf-u-color-light-100 pf-v5-u-font-size-xl">
                 <Text>Virtual Assistant</Text>
               </TextContent>
             </SplitItem>
             <SplitItem>
-              <Button
-                variant="plain"
-                aria-label="Close virtual assistant"
-                className="astro-c-button-minimize pf-v5-u-p-md pf-v5-u-pl-sm pf-v5-u-color-light-100"
-                isDisabled
-              >
-                <AngleDownIcon />
-              </Button>
+              <ToolbarGroup variant="icon-button-group">
+                <ToolbarItem>
+                  <Button variant="plain" aria-label="Full screen" className="pf-v5-u-color-light-100">
+                    <ExpandAltIcon />
+                  </Button>
+                </ToolbarItem>
+                <ToolbarItem>
+                  <Button variant="plain" aria-label="Close virtual assistant" className="pf-v5-u-color-light-100">
+                    <AngleDownIcon />
+                  </Button>
+                </ToolbarItem>
+              </ToolbarGroup>
             </SplitItem>
           </Split>
         </StackItem>

src/SharedComponents/AstroVirtualAssistant/AstroVirtualAssistant.tsx

@@ -18,7 +18,8 @@ const messageProcessors = [commandMessageProcessor];
 
 export const AstroVirtualAssistant: FunctionComponent = () => {
   const { messages, setMessages, ask, start, status, loadingResponse } = useAstro(messageProcessors);
-  const [isOpen, setOpen] = useState<boolean>();
+  const [isOpen, setOpen] = useState<boolean>(false);
+  const [isFullScreen, setFullScreen] = useState<boolean>(false);
   const [sessionStatus, setSessionStatus] = useState<SessionStatus>();
   const chrome = useChrome();
 
@@ -53,6 +54,8 @@ export const AstroVirtualAssistant: FunctionComponent = () => {
             blockInput={loadingResponse}
             preview={chrome.isBeta()}
             onClose={() => setOpen(false)}
+            fullscreen={isFullScreen}
+            setFullScreen={setFullScreen}
           />
         )}
         {status === Status.LOADING && isOpen && <AstroChatSkeleton />}

src/SharedComponents/AstroVirtualAssistant/astro-virtual-assistant.scss

@@ -24,8 +24,9 @@
     background: url(../../assets/header-background-01.svg) var(--pf-v5-global--palette--red-200);
     background-repeat: no-repeat;
     background-position: 75% 0%;
-    .astro-c-button-minimize {
-      font-size: 24px;
+    button {
+      padding-left: 0;
+      padding-right: 14px;
     }
   }
   &__body {
@@ -146,6 +147,22 @@
   }
 }
 
+.astro-l-stack-full-screen {
+  height: calc(100vh - 220px);
+  @media screen and (max-width: 768px) {
+    width: 100vw;
+  }
+  @media screen and (min-width: 769px) {
+    width: 75vw;
+  }
+  @media screen and (min-width: 992px) {
+    width: 50vw;
+  }
+  @media screen and (min-width: 1200px) {
+    width: 40vw;
+  }
+}
+
 .astro-wrapper-stack {
   .astro-wrapper-stack__badge {
     align-self: end;