daren08 · daren08 · Jun 17, 2024 · Mar 3, 2025 · Mar 3, 2025 · Mar 3, 2025
diff --git a/app/frontend/index.html b/app/frontend/index.html
@@ -3,8 +3,9 @@
     <head>
         <meta charset="UTF-8" />
         <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>GPT + Enterprise data | Sample</title>
+        <title>GPT Enterprise</title>
     </head>
     <body>
         <div id="root"></div>

diff --git a/app/frontend/package.json b/app/frontend/package.json
@@ -12,30 +12,30 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@azure/msal-react": "^2.0.6",
     "@azure/msal-browser": "^3.17.0",
+    "@azure/msal-react": "^2.0.6",
     "@fluentui/react": "^8.112.5",
     "@fluentui/react-components": "^9.37.3",
     "@fluentui/react-icons": "^2.0.221",
     "@react-spring/web": "^9.7.3",
-    "marked": "^13.0.0",
     "dompurify": "^3.0.6",
+    "marked": "^13.0.0",
+    "ndjson-readablestream": "^1.0.7",
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.23.1",
-    "ndjson-readablestream": "^1.0.7",
     "react-syntax-highlighter": "^15.5.0",
     "scheduler": "^0.20.2"
   },
   "devDependencies": {
+    "@types/dom-speech-recognition": "^0.0.4",
     "@types/dompurify": "^3.0.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.2.14",
+    "@types/react-syntax-highlighter": "^15.5.7",
     "@vitejs/plugin-react": "^4.1.1",
     "prettier": "^3.0.3",
     "typescript": "^5.4.5",
-    "@types/react-syntax-highlighter": "^15.5.7",
-    "@types/dom-speech-recognition": "^0.0.4",
     "vite": "^4.5.3"
   }
 }
diff --git a/app/frontend/public/pow_whiddon.svg b/app/frontend/public/pow_whiddon.svg
diff --git a/app/frontend/src/components/AnalysisPanel/AnalysisPanel.module.css b/app/frontend/src/components/AnalysisPanel/AnalysisPanel.module.css
@@ -56,9 +56,68 @@
     border-radius: 10px;
     margin-bottom: 8px;
 }
-
 .citationImg {
-    height: 450px;
+    height: 28.125rem;
     max-width: 100%;
     object-fit: contain;
 }
+
+.customModal {
+    overflow: hidden !important;
+    width: 50% !important;
+    max-width: none !important;
+    min-width: none !important;
+    padding: 20px;
+    background-color: white;
+    border-radius: 4px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    display: flex;
+    flex-direction: column;
+    max-height: 80vh; /* Ensure the modal does not exceed 80% of the viewport height */
+}
+
+.customModal {
+    overflow: hidden !important;
+}
+
+.customModal .ms-Dialog-main {
+    overflow: hidden !important;
+}
+
+.customModal .ms-Modal-scrollableContent {
+    overflow: hidden !important;
+    max-height: none !important;
+}
+
+
+.modalHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.modalBody {
+    padding-top: 10px;
+    overflow: hidden !important;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.pdfViewer {
+    flex: 1;
+    width: 100%;
+    height: 70vh; /* Set a specific height for the PDF viewer */
+    border: none;
+}
+
+/* Ensure parent containers do not cause overflow */
+.modalContainer {
+    overflow: hidden !important;
+}
+
+.modalBackdrop {
+    overflow: hidden !important;
+}
diff --git a/app/frontend/src/components/AnalysisPanel/AnalysisPanel.tsx b/app/frontend/src/components/AnalysisPanel/AnalysisPanel.tsx
@@ -1,16 +1,15 @@
-import { Stack, Pivot, PivotItem } from "@fluentui/react";
+import { Stack, Pivot, PivotItem, Modal, IconButton } from "@fluentui/react";
+import { useState, useEffect } from "react";
+import { useMsal } from "@azure/msal-react";
 
 import styles from "./AnalysisPanel.module.css";
-
 import { SupportingContent } from "../SupportingContent";
 import { ChatAppResponse } from "../../api";
 import { AnalysisPanelTabs } from "./AnalysisPanelTabs";
 import { ThoughtProcess } from "./ThoughtProcess";
 import { MarkdownViewer } from "../MarkdownViewer";
-import { useMsal } from "@azure/msal-react";
 import { getHeaders } from "../../api";
 import { useLogin, getToken } from "../../authConfig";
-import { useState, useEffect } from "react";
 
 interface Props {
     className: string;
@@ -28,31 +27,32 @@ export const AnalysisPanel = ({ answer, activeTab, activeCitation, citationHeigh
     const isDisabledSupportingContentTab: boolean = !answer.context.data_points;
     const isDisabledCitationTab: boolean = !activeCitation;
     const [citation, setCitation] = useState("");
+    const [isModalOpen, setIsModalOpen] = useState(false);
 
     const client = useLogin ? useMsal().instance : undefined;
 
+
     const fetchCitation = async () => {
         const token = client ? await getToken(client) : undefined;
         if (activeCitation) {
-            // Get hash from the URL as it may contain #page=N
-            // which helps browser PDF renderer jump to correct page N
             const originalHash = activeCitation.indexOf("#") ? activeCitation.split("#")[1] : "";
             const response = await fetch(activeCitation, {
                 method: "GET",
                 headers: getHeaders(token)
             });
             const citationContent = await response.blob();
             let citationObjectUrl = URL.createObjectURL(citationContent);
-            // Add hash back to the new blob URL
             if (originalHash) {
                 citationObjectUrl += "#" + originalHash;
             }
             setCitation(citationObjectUrl);
+            setIsModalOpen(true);
         }
     };
+
     useEffect(() => {
         fetchCitation();
-    }, []);
+    }, [activeCitation]);
 
     const renderFileViewer = () => {
         if (!activeCitation) {
@@ -71,32 +71,57 @@ export const AnalysisPanel = ({ answer, activeTab, activeCitation, citationHeigh
     };
 
     return (
-        <Pivot
-            className={className}
-            selectedKey={activeTab}
-            onLinkClick={pivotItem => pivotItem && onActiveTabChanged(pivotItem.props.itemKey! as AnalysisPanelTabs)}
-        >
-            <PivotItem
-                itemKey={AnalysisPanelTabs.ThoughtProcessTab}
-                headerText="Thought process"
-                headerButtonProps={isDisabledThoughtProcessTab ? pivotItemDisabledStyle : undefined}
-            >
-                <ThoughtProcess thoughts={answer.context.thoughts || []} />
-            </PivotItem>
-            <PivotItem
-                itemKey={AnalysisPanelTabs.SupportingContentTab}
-                headerText="Supporting content"
-                headerButtonProps={isDisabledSupportingContentTab ? pivotItemDisabledStyle : undefined}
-            >
-                <SupportingContent supportingContent={answer.context.data_points} />
-            </PivotItem>
-            <PivotItem
-                itemKey={AnalysisPanelTabs.CitationTab}
-                headerText="Citation"
-                headerButtonProps={isDisabledCitationTab ? pivotItemDisabledStyle : undefined}
+        <>
+            <Pivot
+                className={className}
+                selectedKey={activeTab}
+                onLinkClick={pivotItem => pivotItem && onActiveTabChanged(pivotItem.props.itemKey! as AnalysisPanelTabs)}
             >
-                {renderFileViewer()}
-            </PivotItem>
-        </Pivot>
+                {/* <PivotItem
+                    itemKey={AnalysisPanelTabs.ThoughtProcessTab}
+                    headerText="Thought process"
+                    headerButtonProps={isDisabledThoughtProcessTab ? pivotItemDisabledStyle : undefined}
+                >
+                    <ThoughtProcess thoughts={answer.context.thoughts || []} />
+                </PivotItem> */}
+                <PivotItem
+                    itemKey={AnalysisPanelTabs.SupportingContentTab}
+                    headerText="Supporting content"
+                    headerButtonProps={isDisabledSupportingContentTab ? pivotItemDisabledStyle : undefined}
+                >
+                    <SupportingContent supportingContent={answer.context.data_points} />
+                </PivotItem>
+               {/* <PivotItem
+                    itemKey={AnalysisPanelTabs.CitationTab}
+                    headerText="Citation"
+                    headerButtonProps={isDisabledCitationTab ? pivotItemDisabledStyle : undefined}
+                >
+                </PivotItem>*/}
+            </Pivot>
+            {/* <Modal isOpen={isModalOpen} onDismiss={() => setIsModalOpen(false)} isBlocking={false} containerClassName={styles.modalContainer}>
+                <div className={styles.modalHeader}>
+                    <IconButton iconProps={{ iconName: "Cancel" }} ariaLabel="Close popup modal" onClick={() => setIsModalOpen(false)} />
+                </div>
+                <div className={styles.modalBody}>{renderFileViewer()}</div>
+            </Modal> */}
+<Modal
+    isOpen={isModalOpen}
+    onDismiss={() => setIsModalOpen(false)}
+    isBlocking={false}
+    containerClassName={styles.customModal}
+    scrollableContentClassName={styles.noScrollModal} // Removes internal scroll
+>
+    <div className={styles.modalHeader}>
+        <IconButton iconProps={{ iconName: "Cancel" }} ariaLabel="Close popup modal" onClick={() => setIsModalOpen(false)} />
+    </div>
+    <div className={styles.modalBody}>
+        <div className={styles.pdfViewerContainer}>
+            {renderFileViewer()}
+        </div>
+    </div>
+</Modal>
+
+
+        </>
     );
 };
diff --git a/app/frontend/src/components/Example/Example.tsx b/app/frontend/src/components/Example/Example.tsx
@@ -3,12 +3,13 @@ import styles from "./Example.module.css";
 interface Props {
     text: string;
     value: string;
+    bgColor: string;
     onClick: (value: string) => void;
 }
 
-export const Example = ({ text, value, onClick }: Props) => {
+export const Example = ({ text, value, bgColor, onClick }: Props) => {
     return (
-        <div className={styles.example} onClick={() => onClick(value)}>
+        <div className={styles.example} onClick={() => onClick(value)} style={{ backgroundColor: bgColor }}>
             <p className={styles.exampleText}>{text}</p>
         </div>
     );