Mobile UI update (#233)

* mobile ui fix * update docker * mobile updated ui * docker update * more mobile ui changes * more updated mobile ui changes * ready for PR * one click deployment URL changed --------- Co-authored-by: Francia Riesco <[email protected]>
Azure-Samples · Jan 29, 2024 · 31faf6f · 31faf6f
1 parent ca3f2cc
commit 31faf6f
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 17 deletions.
diff --git a/.env.sample b/.env.sample
@@ -49,4 +49,4 @@ ORCHESTRATION_STRATEGY=openai_functions
 #Speech-to-text feature
 AZURE_SPEECH_SERVICE_KEY=
 AZURE_SPEECH_SERVICE_REGION=
-AZURE_AUTH_TYPE=rbac
+AZURE_AUTH_TYPE=rbac
diff --git a/code/app/frontend/src/components/Answer/Answer.module.css b/code/app/frontend/src/components/Answer/Answer.module.css
@@ -7,6 +7,7 @@
     background: #FFFFFF;
     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12);
     border-radius: 5.419px;
+    max-width: 100%;
 }
 
 .answerText {
@@ -29,11 +30,9 @@
 
 .answerFooter {
     display: flex;
-    flex-flow: row nowrap;
+    flex-direction: column;
     width: 100%;
-    height: auto;
     box-sizing: border-box;
-    justify-content: space-between;
 }
 
 .answerDisclaimerContainer {
@@ -47,7 +46,9 @@
     font-weight: 400;
     font-size: 12px;
     line-height: 16px;
-
+    margin-right: 5px;
+    margin-left: 10px;
+    padding-bottom:5px;
     display: flex;
     align-items: center;
     text-align: center;
@@ -64,7 +65,7 @@
     font-weight: 600;
     font-size: 12px;
     line-height: 16px;
-
+    max-width: 100%;
     color: #115EA3;
     display: flex;
     flex-direction: row;
@@ -174,4 +175,16 @@
 sup {
     font-size: 10px;
     line-height: 10px;
-}
+}
+
+
+@media (max-width: 500px) {
+    .answerFooter {
+      flex-direction: column; 
+    }
+
+    .citationContainer {
+        width: 100%;
+        overflow-y: auto;
+    }
+  }
diff --git a/code/app/frontend/src/components/Answer/Answer.tsx b/code/app/frontend/src/components/Answer/Answer.tsx
@@ -73,7 +73,11 @@ export const Answer = ({
                         className={styles.answerText}
                     />
                 </Stack.Item>
-                <Stack horizontal className={styles.answerFooter}>
+                <Stack horizontal className={styles.answerFooter} verticalAlign="start">
+                <Stack.Item className={styles.answerDisclaimerContainer}>
+                    <span className={`${styles.answerDisclaimer} ${styles.mobileAnswerDisclaimer}`}>AI-generated content may be incorrect</span>
+                </Stack.Item>
+
                 {!!parsedAnswer.citations.length && (
                     <Stack.Item aria-label="References">
                         <Stack style={{width: "100%"}} >
@@ -92,12 +96,10 @@ export const Answer = ({
                         </Stack>
                     </Stack.Item>
                 )}
-                <Stack.Item className={styles.answerDisclaimerContainer}>
-                    <span className={styles.answerDisclaimer}>AI-generated content may be incorrect</span>
-                </Stack.Item>
+
                 </Stack>
                 {chevronIsExpanded && 
-                    <div style={{ marginTop: 8, display: "flex", flexFlow: "wrap column", maxHeight: "150px", gap: "4px" }}>
+                    <div style={{ marginTop: 8, display: "flex", flexDirection: "column", height: "100%", gap: "4px", maxWidth: "100%" }}>
                         {parsedAnswer.citations.map((citation, idx) => {
                             return (
                                 <span title={createCitationFilepath(citation, ++idx)} key={idx} onClick={() => onCitationClicked(citation)} className={styles.citationContainer}>

diff --git a/code/app/frontend/src/pages/chat/Chat.module.css b/code/app/frontend/src/pages/chat/Chat.module.css
@@ -248,3 +248,57 @@
     align-self: stretch;
     flex-grow: 0;
 } 
+
+.MobileChatContainer{
+    @media screen and (max-width: 600px)  {
+        max-width: 100%;
+        margin: 0 auto;
+        padding: 8px;
+
+      }
+}
+
+.mobileStyles {
+    @media screen and (max-width: 600px)  {
+        max-width: 100%;
+        flex-grow: 1; 
+        max-height: 100vh;
+    }
+  }
+
+  .mobileclearChatBroom{
+      @media screen and (max-width: 600px)  {
+        left: -30px;
+
+      }
+    }
+
+    .mobileCitationPanelTitle{
+        @media screen and (max-width: 600px)  {
+            font-weight: 400;
+            font-size: 12px;
+            margin-top: 8px;
+            margin-bottom: 8px;
+
+          }
+    }
+
+    .mobileCitationPanelContent{
+        @media screen and (max-width: 600px){
+            font-weight: 250;
+            font-size: 11px;
+
+        } 
+    }
+
+    @media screen and (max-width: 600px){
+        h1{
+            font-weight: 300;
+            font-size: 14px;
+        }
+
+        h2{
+            font-weight: 300;
+            font-size: 12px;
+        }
+     }
diff --git a/code/app/frontend/src/pages/chat/Chat.tsx b/code/app/frontend/src/pages/chat/Chat.tsx
@@ -265,7 +265,7 @@ const Chat = () => {
   return (
     <div className={styles.container}>
       <Stack horizontal className={styles.chatRoot}>
-        <div className={styles.chatContainer}>
+        <div className={`${styles.chatContainer} ${styles.MobileChatContainer}`}>
           {!lastQuestionRef.current ? (
             <Stack className={styles.chatEmptyState}>
               <img src={Azure} className={styles.chatIcon} aria-hidden="true" />
@@ -356,7 +356,7 @@ const Chat = () => {
               </Stack>
             )}
             <BroomRegular
-              className={styles.clearChatBroom}
+              className={`${styles.clearChatBroom} ${styles.mobileclearChatBroom}`}
               style={{
                 background:
                   isLoading || answers.length === 0
@@ -387,7 +387,7 @@ const Chat = () => {
           </Stack>
         </div>
         {answers.length > 0 && isCitationPanelOpen && activeCitation && (
-          <Stack.Item className={styles.citationPanel}>
+          <Stack.Item className={`${styles.citationPanel} ${styles.mobileStyles}`}>
             <Stack
               horizontal
               className={styles.citationPanelHeaderContainer}
@@ -400,9 +400,9 @@ const Chat = () => {
                 onClick={() => setIsCitationPanelOpen(false)}
               />
             </Stack>
-            <h5 className={styles.citationPanelTitle}>{activeCitation[2]}</h5>
+            <h5 className={`${styles.citationPanelTitle} ${styles.mobileCitationPanelTitle}`}>{activeCitation[2]}</h5>
             <ReactMarkdown
-              className={styles.citationPanelContent}
+              className={`${styles.citationPanelContent} ${styles.mobileCitationPanelContent}`}
               children={activeCitation[0]}
               remarkPlugins={[remarkGfm]}
               rehypePlugins={[rehypeRaw]}