[feature] Make sample app responsive (#634)

Co-authored-by: Ian Seabock (Centific Technologies Inc) <[email protected]>

frontend/src/components/ChatHistory/ChatHistoryPanel.module.css

@@ -1,7 +1,6 @@
 .container {
     max-height: calc(100vh - 100px);
     width: 300px;
-
 }
 
 .listContainer {
@@ -71,4 +70,10 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+}
+
+@media (max-width: 480px) {
+    .container {
+        width: 100%; 
+    }
 }

frontend/src/components/QuestionInput/QuestionInput.module.css

@@ -54,3 +54,10 @@
     width: 27px;
     height: 30px;
 }
+
+
+@media (max-width: 480px) {
+    .questionInputContainer {
+        left: 16.5%;
+    }
+}

frontend/src/components/common/Button.module.css

@@ -0,0 +1,48 @@
+.shareButtonRoot {
+    width: 86px;
+    height: 32px;
+    border-radius: 4px;
+    background: radial-gradient(109.81% 107.82% at 100.1% 90.19%, #0F6CBD 33.63%, #2D87C3 70.31%, #8DDDD8 100%);
+    padding: 5px 12px;
+    margin-right: 20px;
+  }
+
+  .shareButtonRoot:hover {
+    background: linear-gradient(135deg, #0F6CBD 0%, #2D87C3 51.04%, #8DDDD8 100%);
+  }
+
+  .shareButtonRoot span {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+    color: #FFFFFF;
+  }
+
+  .shareButtonRoot i, .shareButtonRoot:hover i {
+    color: #FFFFFF !important;
+  }
+
+  .historyButtonRoot {
+    width: 180px;
+    border: 1px solid #D1D1D1;
+  }
+
+  .historyButtonRoot:hover {
+    border: 1px solid #D1D1D1;
+  }
+
+  .historyButtonRoot:active {
+    border: 1px solid #D1D1D1;
+  }
+
+  @media (max-width: 480px) {
+    .shareButtonRoot {
+      width: auto; 
+      padding: 5px 8px; 
+    }
+
+    .historyButtonRoot {
+      width: auto;
+      padding: 0 8px  
+    }
+  }

frontend/src/components/common/Button.tsx

@@ -1,70 +1,31 @@
-import { CommandBarButton, DefaultButton, IButtonProps, IButtonStyles, ICommandBarStyles } from "@fluentui/react";
+import { CommandBarButton, DefaultButton, IButtonProps } from "@fluentui/react";
 
-interface ShareButtonProps extends IButtonProps {
-    onClick: () => void;
-  }
+import styles from './Button.module.css';
 
-export const ShareButton: React.FC<ShareButtonProps> = ({onClick}) => {
-    const shareButtonStyles: ICommandBarStyles & IButtonStyles = {
-        root: {
-          width: 86,
-          height: 32,
-          borderRadius: 4,
-          background: 'radial-gradient(109.81% 107.82% at 100.1% 90.19%, #0F6CBD 33.63%, #2D87C3 70.31%, #8DDDD8 100%)',
-        //   position: 'absolute',
-        //   right: 20,
-          padding: '5px 12px',
-          marginRight: '20px'
-        },
-        icon: {
-          color: '#FFFFFF',
-        },
-        rootHovered: {
-          background: 'linear-gradient(135deg, #0F6CBD 0%, #2D87C3 51.04%, #8DDDD8 100%)',
-        },
-        label: {
-          fontWeight: 600,
-          fontSize: 14,
-          lineHeight: '20px',
-          color: '#FFFFFF',
-        },
-      };
-
-      return (
-        <CommandBarButton
-                styles={shareButtonStyles}
-                iconProps={{ iconName: 'Share' }}
-                onClick={onClick}
-                text="Share"
-        />
-      )
+interface ButtonProps extends IButtonProps {
+  onClick: () => void;
+  text: string | undefined;
 }
 
-interface HistoryButtonProps extends IButtonProps {
-    onClick: () => void;
-    text: string;
-  }
+export const ShareButton: React.FC<ButtonProps> = ({ onClick, text }) => {
 
-export const HistoryButton: React.FC<HistoryButtonProps> = ({onClick, text}) => {
-    const historyButtonStyles: ICommandBarStyles & IButtonStyles = {
-        root: {
-            width: '180px',
-            border: `1px solid #D1D1D1`,
-          },
-          rootHovered: {
-            border: `1px solid #D1D1D1`,
-          },
-          rootPressed: {
-            border: `1px solid #D1D1D1`,
-          },
-      };
+  return (
+    <CommandBarButton
+      className={styles.shareButtonRoot}
+      iconProps={{ iconName: 'Share' }}
+      onClick={onClick}
+      text={text}
+    />
+  )
+}
 
-      return (
-        <DefaultButton
-            text={text}
-            iconProps={{ iconName: 'History' }}
-            onClick={onClick}
-            styles={historyButtonStyles}
-        />
-      )
+export const HistoryButton: React.FC<ButtonProps> = ({ onClick, text }) => {
+  return (
+    <DefaultButton
+      className={styles.historyButtonRoot}
+      text={text}
+      iconProps={{ iconName: 'History' }}
+      onClick={onClick}
+    />
+  )
 }

frontend/src/pages/chat/Chat.module.css

@@ -53,7 +53,6 @@
     font-weight: 400;
     font-size: 16px;
     line-height: 150%;
-    display: flex;
     align-items: flex-end;
     text-align: center;
     letter-spacing: -0.01em;
@@ -323,4 +322,27 @@ a {
 .viewSourceButton:hover {
     text-decoration: underline;
     cursor: pointer;
+}
+
+@media (max-width: 480px) {
+    .chatInput {
+        width: 90%;
+        max-width: 90%;
+    }
+
+    .newChatIcon {
+        left: 0px;
+    }
+
+    .clearChatBroom {
+        left: 0px;
+    }
+
+    .clearChatBroomNoCosmos {
+        left: 0px;
+    }
+
+    .chatEmptyStateTitle {
+        line-height: 36px;
+    }
 }

frontend/src/pages/chat/Chat.tsx

@@ -629,10 +629,8 @@ const Chat = () => {
                     <ShieldLockRegular className={styles.chatIcon} style={{ color: 'darkorange', height: "200px", width: "200px" }} />
                     <h1 className={styles.chatEmptyStateTitle}>Authentication Not Configured</h1>
                     <h2 className={styles.chatEmptyStateSubtitle}>
-                        This app does not have authentication configured. Please add an identity provider by finding your app in the
-                        <a href="https://portal.azure.com/" target="_blank"> Azure Portal </a>
-                        and following
-                        <a href="https://learn.microsoft.com/en-us/azure/app-service/scenario-secure-app-authentication-app-service#3-configure-authentication-and-authorization" target="_blank"> these instructions</a>.
+                        This app does not have authentication configured. Please add an identity provider by finding your app in the <a href="https://portal.azure.com/" target="_blank">Azure Portal</a> 
+                        and following <a href="https://learn.microsoft.com/en-us/azure/app-service/scenario-secure-app-authentication-app-service#3-configure-authentication-and-authorization" target="_blank">these instructions</a>.
                     </h2>
                     <h2 className={styles.chatEmptyStateSubtitle} style={{ fontSize: "20px" }}><strong>Authentication configuration takes a few minutes to apply. </strong></h2>
                     <h2 className={styles.chatEmptyStateSubtitle} style={{ fontSize: "20px" }}><strong>If you deployed in the last 10 minutes, please wait and reload the page after 10 minutes.</strong></h2>

frontend/src/pages/layout/Layout.module.css

@@ -110,4 +110,14 @@
     display: flex;
     align-items: center;
     color: #242424;
+}
+
+@media (max-width: 480px) {
+    .headerTitleContainer {
+        margin-left: 4px;
+    }
+
+    .headerIcon {
+        margin-left: 26px;
+    }
 }

frontend/src/pages/layout/Layout.tsx

@@ -1,8 +1,8 @@
 import { Outlet, Link } from "react-router-dom";
 import styles from "./Layout.module.css";
 import Contoso from "../../assets/Contoso.svg";
-import { CopyRegular, ShareRegular } from "@fluentui/react-icons";
-import { Dialog, Stack, TextField, ICommandBarStyles, IButtonStyles } from "@fluentui/react";
+import { CopyRegular } from "@fluentui/react-icons";
+import { Dialog, Stack, TextField } from "@fluentui/react";
 import { useContext, useEffect, useState } from "react";
 import { HistoryButton, ShareButton } from "../../components/common/Button";
 import { AppStateContext } from "../../state/AppProvider";
@@ -12,6 +12,9 @@ const Layout = () => {
     const [isSharePanelOpen, setIsSharePanelOpen] = useState<boolean>(false);
     const [copyClicked, setCopyClicked] = useState<boolean>(false);
     const [copyText, setCopyText] = useState<string>("Copy URL");
+    const [shareLabel, setShareLabel] = useState<string | undefined>("Share");
+    const [hideHistoryLabel, setHideHistoryLabel] = useState<string>("Hide chat history");
+    const [showHistoryLabel, setShowHistoryLabel] = useState<string>("Show chat history");
     const appStateContext = useContext(AppStateContext)
     const ui = appStateContext?.state.frontendSettings?.ui;
 
@@ -42,6 +45,25 @@ const Layout = () => {
 
     useEffect(() => { }, [appStateContext?.state.isCosmosDBAvailable.status]);
 
+    useEffect(() => {
+        const handleResize = () => {
+          if (window.innerWidth < 480) {
+            setShareLabel(undefined)
+            setHideHistoryLabel("Hide history")
+            setShowHistoryLabel("Show history")
+          } else {
+            setShareLabel("Share")
+            setHideHistoryLabel("Hide chat history")
+            setShowHistoryLabel("Show chat history")
+          }
+        };
+
+        window.addEventListener('resize', handleResize);
+        handleResize();
+
+        return () => window.removeEventListener('resize', handleResize);
+      }, []);
+
     return (
         <div className={styles.layout}>
             <header className={styles.header} role={"banner"}>
@@ -59,9 +81,9 @@ const Layout = () => {
                     {ui?.show_share_button &&
                         <Stack horizontal tokens={{ childrenGap: 4 }}>
                             {(appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured) &&
-                                <HistoryButton onClick={handleHistoryClick} text={appStateContext?.state?.isChatHistoryOpen ? "Hide chat history" : "Show chat history"} />
+                                <HistoryButton onClick={handleHistoryClick} text={appStateContext?.state?.isChatHistoryOpen ? hideHistoryLabel : showHistoryLabel} />
                             }
-                            <ShareButton onClick={handleShareClick} />
+                            <ShareButton onClick={handleShareClick} text={shareLabel} />
                         </Stack>
                     }
                 </Stack>