Feature/report

report-front-end/src/common/constant/constants.ts

@@ -35,6 +35,5 @@ export const APP_RIGHT_LOGO = process.env.VITE_RIGHT_LOGO || "";
 
 export const SQL_DISPLAY = process.env.VITE_SQL_DISPLAY;
 
-// TODO: decide whether to add an env var for this style switch?
 // https://cloudscape.design/patterns/general/density-settings/
-export const COMPACT_STYLE = true;
+export const APP_STYLE_DEFAULT_COMPACT = true;

report-front-end/src/common/helpers/storage.ts

@@ -1,8 +1,15 @@
-import { applyMode, Mode } from "@cloudscape-design/global-styles";
+import {
+  applyDensity,
+  applyMode,
+  Density,
+  Mode,
+} from "@cloudscape-design/global-styles";
 import { NavigationPanelState } from "../types";
+import { APP_STYLE_DEFAULT_COMPACT } from "../constant/constants";
 
 const PREFIX = "genai-chatbot";
 const THEME_STORAGE_NAME = `${PREFIX}-theme`;
+const DENSITY_STORAGE_NAME = `${PREFIX}-density`;
 const NAVIGATION_PANEL_STATE_STORAGE_NAME = `${PREFIX}-navigation-panel-state`;
 
 export abstract class Storage {
@@ -23,6 +30,20 @@ export abstract class Storage {
     return theme;
   }
 
+  static getDensity(): Density {
+    let density = localStorage.getItem(DENSITY_STORAGE_NAME) as Density | null;
+    if (!density) {
+      density = APP_STYLE_DEFAULT_COMPACT
+        ? Density.Compact
+        : Density.Comfortable;
+    }
+    return density;
+  }
+  static applyDensity(density: Density) {
+    localStorage.setItem(DENSITY_STORAGE_NAME, density);
+    applyDensity(density);
+  }
+
   static getNavigationPanelState(): NavigationPanelState {
     const value =
       localStorage.getItem(NAVIGATION_PANEL_STATE_STORAGE_NAME) ??
@@ -48,5 +69,4 @@ export abstract class Storage {
 
     return newState;
   }
-
 }

report-front-end/src/components/chatbot-panel/chat.tsx

@@ -1,18 +1,9 @@
-import {
-  Box,
-  SpaceBetween,
-  Spinner,
-  StatusIndicator,
-} from "@cloudscape-design/components";
+import { Box, SpaceBetween, Spinner, StatusIndicator } from "@cloudscape-design/components";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { getSelectData } from "../../common/api/API";
 import { createWssClient } from "../../common/api/WebSocket";
-import {
-  ActionType,
-  LLMConfigState,
-  UserState,
-} from "../../common/helpers/types";
+import { ActionType, LLMConfigState, UserState } from "../../common/helpers/types";
 import ChatInputPanel from "./chat-input-panel";
 import ChatMessage from "./chat-message";
 import styles from "./chat.module.scss";
@@ -23,7 +14,7 @@ export default function Chat(props: {
   toolsHide: boolean;
 }) {
   const [messageHistory, setMessageHistory] = useState<ChatBotHistoryItem[]>(
-    []
+    [],
   );
   const [statusMessage, setStatusMessage] = useState<ChatBotMessageItem[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
@@ -40,12 +31,19 @@ export default function Chat(props: {
     ) {
       getSelectData().then((response) => {
         if (response) {
-          const configInfo: LLMConfigState = {
-            ...userState.queryConfig,
-            selectedLLM: response["bedrock_model_ids"][0],
-            selectedDataPro: response["data_profiles"][0],
-          };
-          dispatch({ type: ActionType.UpdateConfig, state: configInfo });
+          if (!userState.queryConfig.selectedLLM && response["bedrock_model_ids"]) {
+            const configInfo: LLMConfigState = {
+              ...userState.queryConfig,
+              selectedLLM: response["bedrock_model_ids"].length > 0 ? response["bedrock_model_ids"][0] : userState.queryConfig.selectedLLM,
+            };
+            dispatch({ type: ActionType.UpdateConfig, state: configInfo });
+          } else if (!userState.queryConfig.selectedDataPro && response["data_profiles"]) {
+            const configInfo: LLMConfigState = {
+              ...userState.queryConfig,
+              selectedDataPro: response["data_profiles"].length > 0 ? response["data_profiles"][0] : userState.queryConfig.selectedDataPro,
+            };
+            dispatch({ type: ActionType.UpdateConfig, state: configInfo });
+          }
         }
       });
     }
@@ -62,7 +60,7 @@ export default function Chat(props: {
                 message={message}
                 setLoading={setLoading}
                 setMessageHistory={(
-                  history: SetStateAction<ChatBotHistoryItem[]>
+                  history: SetStateAction<ChatBotHistoryItem[]>,
                 ) => setMessageHistory(history)}
                 sendMessage={sendJsonMessage}
               />
@@ -76,9 +74,7 @@ export default function Chat(props: {
                 const displayMessage =
                   idx % 2 === 1
                     ? true
-                    : idx === statusMessage.length - 1
-                    ? true
-                    : false;
+                    : idx === statusMessage.length - 1;
                 return displayMessage ? (
                   <StatusIndicator
                     key={idx}

report-front-end/src/components/chatbot-panel/custom-questions.tsx

@@ -57,7 +57,7 @@ export default function CustomQuestions(props: RecommendQuestionsProps) {
       configuration: userState.queryConfig,
       setMessageHistory: props.setMessageHistory
     }).then();*/
-
+    setShowMoreQuestions(true)
     // Call WebSocket API
     queryWithWS({
       query: question,
@@ -121,4 +121,4 @@ export default function CustomQuestions(props: RecommendQuestionsProps) {
       )}
     </div>
   );
-}
+}

report-front-end/src/components/config-panel/index.tsx

@@ -1,9 +1,9 @@
 import { Divider } from "@aws-amplify/ui-react";
 import {
   Button,
+  Drawer,
   FormField,
   Grid,
-  HelpPanel,
   Input,
   Select,
   Slider,
@@ -158,8 +158,8 @@ const ConfigPanel = (props: {
   };
 
   return (
-    <HelpPanel header="Configuration">
-      <SpaceBetween size="xs">
+    <Drawer header="Configurations">
+      <SpaceBetween size="xxl">
         <SpaceBetween size="m">
           <FormField label="Large Language Model">
             <Select
@@ -216,7 +216,7 @@ const ConfigPanel = (props: {
 
         <Divider label="Model Configuration" />
 
-        <SpaceBetween size="xxxs">
+        <SpaceBetween size="xs">
           <Grid
             gridDefinition={[
               { colspan: { default: 6, xxs: 12 } },
@@ -362,16 +362,11 @@ const ConfigPanel = (props: {
           </Grid>
         </SpaceBetween>
 
-        <Button
-          variant="primary"
-          iconName="status-positive"
-          onClick={onSave}
-          className="save-button"
-        >
+        <Button variant="primary" iconName="status-positive" onClick={onSave}>
           Save
         </Button>
       </SpaceBetween>
-    </HelpPanel>
+    </Drawer>
   );
 };
 export default ConfigPanel;
@@ -387,4 +382,5 @@ function VerticalDivider() {
       }}
     />
   );
-}2
+}
+2;

report-front-end/src/components/config-panel/style.scss

@@ -1,10 +1,6 @@
 .input-wrapper {
   position: absolute;
-  top: -20px;
+  top: -18px;
   right: 0;
   width: 80px;
 }
-
-.save-button {
-  margin-top: 12px;
-}

report-front-end/src/components/top-navigation/index.tsx

@@ -3,15 +3,16 @@ import {
   TopNavigation,
 } from "@cloudscape-design/components";
 // import { Mode } from '@cloudscape-design/global-styles'
+import { Density } from "@cloudscape-design/global-styles";
 import { Auth } from "aws-amplify";
 import { useEffect, useState } from "react";
-// import { Storage } from '../../common/helpers/storage'
 import {
   APP_LOGO,
   APP_RIGHT_LOGO,
   APP_TITLE,
   CHATBOT_NAME,
 } from "../../common/constant/constants";
+import { Storage } from "../../common/helpers/storage";
 import "./style.scss";
 
 export default function CustomTopNavigation() {
@@ -52,6 +53,10 @@ export default function CustomTopNavigation() {
     }
   };
 
+  const [isCompact, setIsCompact] = useState<boolean>(
+    Storage.getDensity() === Density.Compact
+  );
+
   return (
     <div
       style={{ zIndex: 1002, top: 0, left: 0, right: 0, position: "fixed" }}
@@ -77,6 +82,20 @@ export default function CustomTopNavigation() {
           //   text: theme === Mode.Dark ? 'Light Mode' : 'Dark Mode',
           //   onClick: onChangeThemeClick,
           // },
+          {
+            type: "button",
+            iconName: isCompact ? "view-full" : "zoom-to-fit",
+            text: isCompact ? "Compact" : "Comfortable",
+            ariaLabel: "SpacingSwitch",
+            onClick: () => {
+              setIsCompact((prev) => {
+                Storage.applyDensity(
+                  !prev ? Density.Compact : Density.Comfortable
+                );
+                return !prev;
+              });
+            },
+          },
           {
             type: "menu-dropdown",
             text: userName,

report-front-end/src/main.tsx

@@ -1,21 +1,20 @@
-import "regenerator-runtime/runtime";
+import "@cloudscape-design/global-styles/index.css";
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { Storage } from "./common/helpers/storage";
-import "@cloudscape-design/global-styles/index.css";
 import { Provider } from "react-redux";
+import "regenerator-runtime/runtime";
+import { Storage } from "./common/helpers/storage";
 import userReduxStore from "./common/helpers/store";
 import AppConfigured from "./pages/login-page";
-import { applyDensity, Density } from "@cloudscape-design/global-styles";
-import { COMPACT_STYLE } from "./common/constant/constants";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
 
 const theme = Storage.getTheme();
 Storage.applyTheme(theme);
-applyDensity(COMPACT_STYLE ? Density.Compact : Density.Comfortable);
+const density = Storage.getDensity();
+Storage.applyDensity(density);
 
 root.render(
   <React.StrictMode>