Tabular Data Assistant UI updates

app/backend/approaches/mathassistant.py

@@ -135,7 +135,7 @@ def process_agent_scratch_pad( question):
         if "actions" in chunk:
             for action in chunk["actions"]:
                 messages.append(f"Calling Tool: `{action.tool}` with input `{action.tool_input}`\n")
-                messages.append(f'I am thinking...: {action.log} \n')
+                messages.append(f'Processing: {action.log} \n')
         elif "steps" in chunk:
             for step in chunk["steps"]:
                 messages.append(f"Tool Result: `{step.observation}`\n")                               

app/backend/approaches/tabulardataassistant.py

@@ -90,7 +90,7 @@ def process_agent_scratch_pad(question, df):
         if "actions" in chunk:
             for action in chunk["actions"]:
                 messages.append(f"Calling Tool: `{action.tool}` with input `{action.tool_input}`\n")
-                messages.append(f'\nI am thinking...: {action.log}\n')
+                messages.append(f'\nProcessing...: {action.log}\n')
         elif "steps" in chunk:
             for step in chunk["steps"]:
                 if isinstance(step.observation, str):

app/frontend/src/components/RAIPanel/RAIPanel.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { Options16Filled, ArrowSync16Filled, Briefcase16Filled, Globe16Filled } from "@fluentui/react-icons";
+import { Options16Filled, ArrowSync16Filled, Briefcase16Filled, Globe16Filled, BuildingMultipleFilled } from "@fluentui/react-icons";
 
 import styles from "./RAIPanel.module.css";
 import { Icon } from "@fluentui/react";
@@ -32,11 +32,11 @@ export const RAIPanel = ({approach, chatMode, onAdjustClick, onRegenerateClick,
             {(approach == Approaches.ChatWebRetrieveRead && chatMode == ChatMode.WorkPlusWeb) &&
                     <>
                         <div className={styles.adjustInput} onClick={onRagSearchClicked}>
-                            <Briefcase16Filled primaryFill="rgba(133, 133, 133, 1)" />
+                            <BuildingMultipleFilled primaryFill="rgba(133, 133, 133, 1)" />
                             <span className={styles.adjustInputText}>Search Work</span>
                         </div>
                         <div className={styles.adjustInput} onClick={onRagCompareClicked}>
-                            <Briefcase16Filled primaryFill="rgba(133, 133, 133, 1)" />
+                            <BuildingMultipleFilled primaryFill="rgba(133, 133, 133, 1)" />
                             <span className={styles.adjustInputText}>Compare with Work</span>
                         </div>
                     </>

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

@@ -46,6 +46,7 @@
 }
 
 .chatEmptyStateTitle {
+    display: contents;
     font-size: 3rem;
     font-weight: 500;
     margin-top: 0;

app/frontend/src/pages/layout/Layout.tsx

@@ -51,14 +51,20 @@ export const Layout = () => {
                                 <li className={styles.headerNavLeftMargin}>
                                     <NavLink to="/tutor" className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}>
                                     Math Assistant
+                                    <br />  
+                                    <p className={styles.centered}>(preview)</p>
                                     </NavLink>
                                 </li>
                             }
                             {featureFlags?.ENABLE_TABULAR_DATA_ASSISTANT &&
                                 <li className={styles.headerNavLeftMargin}>
                                     <NavLink to="/tda" className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}>
                                     Tabular Data Assistant
-                                    </NavLink>    
+                                    <br />  
+                                    <p className={styles.centered}>(preview)</p>
+                                    </NavLink>
+
+
                                 </li>
                             }
                     </ul>

app/frontend/src/pages/tda/Tda.module.css

@@ -1,6 +1,41 @@
 /* Copyright (c) Microsoft Corporation.
    Licensed under the MIT license. */
-
+   .chatEmptyStateTitle {
+    font-size: 3rem;
+    font-weight: 500;
+    margin-top: 0;
+    margin-bottom: 10px;
+}
+   .centertext {
+    text-align: center !important;
+}
+   .App {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 600px;
+  }
+  .contentArea {
+    width: 100%;
+    margin-top: 10px;
+    /* display: flex; */
+    align-content: center;
+  }
+  .raiwarning {
+    font-size: 12px;
+    font-weight: 400;
+    color: rgb(133, 133, 133);
+    line-height: 22px;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    white-space: pre-line;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
    .mydetailslist:hover {
     overflow: scroll;
   }
@@ -26,8 +61,7 @@
   }
    h1 {
     align-items: flex-start !important;
-    margin-top: 5% !important; /* Sets the top margin to 10% */
-    margin-left: 20% !important; /* Sets the left margin to 20% */
+    margin-top: 0 !important;
 }
    .title {
     text-align: center;
@@ -55,13 +89,14 @@
 .centeredContainer {
     display: flex;
     flex-direction: column;
-    align-items: flex-start; /* Aligns items to the left */
+    align-items: center !important; /* Aligns items to the left */
     border: 1px solid lightgrey;
     border-radius: 10px;
     padding: 20px;
     margin: auto;
     margin-top: 5%;
-    width: 60%; /* Adjust as needed */
+    width: 70%; /* Adjust as needed */
+    text-align: left !important;
 
 }
 .formClass {

app/frontend/src/pages/tda/Tda.tsx

@@ -5,7 +5,7 @@ import { BlobServiceClient } from "@azure/storage-blob";
 import { CheckboxVisibility, DetailsList, DetailsListLayoutMode, IColumn, mergeStyles } from '@fluentui/react';
 import classNames from "classnames";
 import { nanoid } from "nanoid";
-import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
+import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { DropZone } from "./drop-zone"
 import styles from "./file-picker.module.css";
 import { FilesList } from "./files-list";
@@ -14,6 +14,9 @@ import Papa from "papaparse";
 import { postCsv, processCsvAgentResponse, getCsvAnalysis, refresh } from "../../api";
 import { Accordion, Card, Button } from 'react-bootstrap';
 import ReactMarkdown from "react-markdown";
+import estyles from "../../components/Example/Example.module.css";
+import { Example } from "../../components/Example";
+import { DocumentDataFilled, SparkleFilled, TableSearchFilled } from "@fluentui/react-icons";
 
 
 interface Props {
@@ -30,22 +33,36 @@ const Tda = ({folderPath, tags}: Props) => {
   const [fileUploaded, setFileUploaded] = useState(false);
   const [output, setOutput] = useState('');
   const [otherq, setOtherq] = useState('');
-  const [selectedQuery, setSelectedQuery] = useState('How many rows are there?');
+  const [selectedQuery, setSelectedQuery] = useState('');
   const [dataFrame, setDataFrame] = useState<object[]>([]);
   const [loading, setLoading] = useState(false);
   const [inputValue, setInputValue] = useState("");
   const [base64Images, setBase64Images] = useState<string[]>([]);
   const [fileu, setFile] = useState<File | null>(null);
 
-
+  type ExampleModel = {
+    text: string;
+    value: string;
+};
+
+const EXAMPLES: ExampleModel[] = [
+    { text: "How many rows are there?", value: "rows" },
+    { text: "What are the data types of each column?", value: "dataType" },
+    { text: "Are there any missing values in the dataset?", value: "missingValues" },
+    { text: "What are the summary statistics for categorical data?", value: "summaryStats" }
+];
+
+interface Props {
+    onExampleClicked: (value: string) => void;
+}
 
   const setImages = (newBase64Strings: string[]) => {
     setBase64Images(newBase64Strings);
   };
 
 
   const setOtherQ = (selectedQuery: string) => {
-    if (selectedQuery === "other") {
+    if (inputValue != "") {
       return inputValue;
     }
     return selectedQuery;
@@ -131,11 +148,10 @@ const Tda = ({folderPath, tags}: Props) => {
 
   // handler called when files are selected via the Dropzone component
 
-  const handleQueryChange = (event: { target: { value: any; }; }) => {
-    const query = event.target.value;
-    setSelectedQuery(query);
+  const handleQueryChange = (value: string) => {
+    setSelectedQuery(value);
     // Handle the selected query here
-  };
+};
 
   const handleOnChange = useCallback((files: any) => {
     let filesArray = Array.from(files);
@@ -211,6 +227,23 @@ const Tda = ({folderPath, tags}: Props) => {
     }
   }, [progress]);
 
+
+  const firstRender = useRef(true);
+
+  useEffect(() => {
+      if (firstRender.current) {
+          // Skip the effect on the first render
+          firstRender.current = false;
+      } else {
+        if (fileu) {
+          handleAnswer();
+        }
+        else {
+          setOutput("no file file has been uploaded.")
+          setLoading(false);
+        }
+      }
+  }, [selectedQuery]);
   let indexLength = 0;
 if (dataFrame.length > 0) {
   for (let i = 0; i < dataFrame.length; i++) {
@@ -259,10 +292,26 @@ if (dataFrame.length > 0) {
   const uploadComplete = useMemo(() => progress === 100, [progress]);
 
 
-  return (<div>
-    <div className={cstyle.centeredContainer}>
-      <p>Upload a CSV file</p>
+  return (<div className={cstyle.contentArea} >
+    <div className={cstyle.App} >
+    <TableSearchFilled fontSize={"6rem"} primaryFill={"#7719aa"} aria-hidden="true" aria-label="Supported File Types" />
+    <h1 className={cstyle.EmptyStateTitle}>
+      Tabular Data Assistant
+    </h1>
+    <span className={styles.chatEmptyObjectives}>
+      <i className={cstyle.centertext}>Information Assistant uses AI. Check for mistakes.</i> <a href="https://github.com/microsoft/PubSec-Info-Assistant/blob/main/docs/transparency.md" target="_blank" rel="noopener noreferrer"> Transparency Note</a>
+    </span>
+
 
+    <div className={cstyle.centeredContainer}>
+    <h2 className={styles.EmptyStateTitle}>Supported file types</h2>
+
+
+    <DocumentDataFilled fontSize={"40px"} primaryFill={"#7719aa"} aria-hidden="true" aria-label="Data" />
+            <span className={cstyle.EmptyObjectivesListItemText}><b>Data</b><br />
+                csv
+            </span>
+    <br />
     <div className={styles.wrapper}>
 
       {/* canvas */}
@@ -302,16 +351,19 @@ if (dataFrame.length > 0) {
         </button>
       ) : null}
     </div>
-    <div>
-      <p>Select an example query:</p>
-      <select className={cstyle.inputField} onChange={handleQueryChange} style={{ width: "100%" }}>
-        <option value="rows">How many rows are there?</option>
-        <option value="dataType">What is the data type of each column?</option>
-        <option value="summaryStats">What are the summary statistics for categorical data?</option>
-        <option value="other">Other</option>
-    </select>
-  {selectedQuery === 'other' && (
+
+    <p>Select an example query:</p>
+    <div >
+        <ul className={estyles.examplesNavList}>
+            {EXAMPLES.map((x, i) => (
+                <li key={i}>
+                    <Example text={x.text} value={x.value} onClick={handleQueryChange} />
+                </li>
+            ))}
+        </ul>
     <div >
+
+    <br></br>
     <p>Ask a question about your CSV:</p>
     <input
       className={cstyle.inputField}
@@ -320,14 +372,24 @@ if (dataFrame.length > 0) {
       value={inputValue}
       onChange={(e) => setInputValue(e.target.value)}
     />
+     <div className={cstyle.buttonContainer}>
+    <Button variant="secondary" onClick={handleAnalysis}>Here is my analysis</Button>
+    <Button variant="secondary" onClick={handleAnswer}>Show me the answer</Button>
+    </div>
+    {loading && <div className="spinner">Loading...</div>}
+    { output !== '' && (
+      <div style={{width: '100%'}}>
+        <h2>Tabular Data Assistant Response:</h2>
+        <ReactMarkdown>{output}</ReactMarkdown>
+        <div className={cstyle.raiwarning}>AI-generated content may be incorrect</div>
       </div>
-
     )}
       </div>
+      </div>
 
 
     </div>
-    <h1>Ouput</h1>
+
     <div className={cstyle.centeredContainer}>
     <details style={{ width: '100%' }}>
   <summary>See Dataframe</summary>
@@ -346,20 +408,7 @@ if (dataFrame.length > 0) {
   </div>
 </details>
     </div>
-  <div className={cstyle.centeredContainer}>
-    <div className={cstyle.buttonContainer}>
-    <Button variant="secondary" onClick={handleAnalysis}>Here is my analysis</Button>
-    <Button variant="secondary" onClick={handleAnswer}>Show me the answer</Button>
     </div>
-    {loading && <div className="spinner">Loading...</div>}
-    { output && (
-      <div style={{width: '100%'}}>
-        <h2>Tabular Data Assistant Response:</h2>
-        <ReactMarkdown>{output}</ReactMarkdown>
-      </div>
-    )}
-</div>
-
 </div>
   );
 };

app/frontend/src/pages/tutor/Tutor.module.css

@@ -209,3 +209,12 @@ h2 {
     margin-right: 20px;
     margin-bottom: 20px;
 }
+
+.App {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 600px;
+  }