added icons

Author: Harry Li

src/App.tsx

@@ -7,6 +7,8 @@ import { Chat } from 'components/Chat/Chat';
 import { DemoModeModal } from 'components/DemoModeModal';
 import { ErrorMessage } from 'components/ErrorMessage';
 import { IDTableContainer } from 'components/IDTable/IDTable';
+import { InfoModal } from 'components/InfoModal';
+import { LLMWarning } from 'components/LLMWarning';
 import { QueryEditor } from 'components/QueryEditor/QueryEditor'
 import { QueryVisualization } from "components/QueryVisualization/QueryVisualization";
 import { ResultsTable } from 'components/ResultsTable/ResultsTable';
@@ -67,9 +69,26 @@ function Results() {
     return (
       <>
         <Title order={4}>Results Summary from LLM</Title>
-        {results.summary ? <p>{results.summary}</p> : <ErrorMessage>There was an error generating a summary.</ErrorMessage>}
+        {results.summary ? (
+          <div>
+            <LLMWarning>
+              <p>This results summary was generated by an LLM that can make mistakes. Refer below to the Results Table from KG for ground-truth data.</p>
+              <p>Note that the absence of data does not necessairly mean that there is no data. It is possible that the query did not find what that you are looking for.</p>
+            </LLMWarning>
+
+            <p>{results.summary}</p>
+          </div>
+        ) : <ErrorMessage>There was an error generating a summary.</ErrorMessage>}
+        
         <hr/>
-        <Title order={4}>Results Table from KG</Title>
+        
+        <Title order={4}>
+          Results Table from KG
+          <InfoModal title="Results Table from KG">
+            <p>These are ground-truth results retrieved from the KG using the query you executed.</p>
+            <p>Note that the absence of data does not necessairly mean that there is no data. It is possible that the query did not find what that you are looking for.</p>
+          </InfoModal>
+        </Title>
         <ResultsTable data={results.data}/>
       </>
     )

src/components/Chat/Chat.module.scss

@@ -43,10 +43,6 @@
         padding: 0.5rem;
         margin-bottom: 0.5rem;
         border-radius: 5px;
-
-        button {
-          margin-top: 0.5rem;
-        }
       }
 
       &.user {

src/components/Chat/Chat.tsx

@@ -10,6 +10,7 @@ import { useMutation } from "@tanstack/react-query";
 import { IconCaretRight, IconSettings, IconZoomCode } from '@tabler/icons-react';
 
 import { ErrorMessage } from 'components/ErrorMessage';
+import { LLMWarning } from 'components/LLMWarning';
 
 import { useMakeChatGPTAPIInstance } from 'hooks/useMakeChatGPTAPIInstance';
 import { useRunQuery } from 'hooks/useRunQuery';
@@ -152,6 +153,10 @@ function RenderLLMResponse({
   if(parsedQuery) {
     return (
       <div className={styles.chat}>
+        <LLMWarning>
+          <p>This was generated by an LLM that can make mistakes.</p>
+        </LLMWarning>
+
         <RenderSparqlQuery
           pre={parsedQuery.pre}
           query={parsedQuery.query.trim()}
@@ -163,7 +168,15 @@ function RenderLLMResponse({
     )
   }
 
-  return <pre className={styles.chat}>{text}</pre>
+  return (
+    <div className={styles.chat}>
+      <LLMWarning>
+        <p>This was generated by an LLM that can make mistakes.</p>
+      </LLMWarning>
+      
+      <pre>{text}</pre>
+    </div>
+  )
 }
 
 
@@ -204,9 +217,9 @@ function RenderSparqlQuery({
       </div>
       <pre>{post}</pre>
       <br/>
-      <Button onClick={() => setInputText("You identified the wrong data. I was actually looking for: ")}>You identified the wrong data</Button>
+      <Button onClick={() => setInputText("You identified the wrong data. I was actually looking for: ")} style={{marginTop:"0.5rem"}}>You identified the wrong data</Button>
       <br/>
-      <Button onClick={() => setInputText("You misunderstood my question. I was actually asking about: ")}>You misunderstood my question</Button>
+      <Button onClick={() => setInputText("You misunderstood my question. I was actually asking about: ")} style={{marginTop:"0.5rem"}}>You misunderstood my question</Button>
       <br/>
       <Button onClick={() => setInputText("I want to ask something different: ")}>I want to ask something different</Button>
     </>

src/components/IDTable/IDTable.tsx

@@ -4,6 +4,8 @@
 import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { Table, Title } from "@mantine/core";
 
+import { InfoModal } from "components/InfoModal";
+
 import { useAppSelector } from "redux/store";
 
 import { IDTableEntitiesType } from "types/idTable";
@@ -38,7 +40,12 @@ export function IDTableContainer () {
 
     return (
         <div id={styles["id-table-container"]}>
-            <Title order={4}>Entity-Relation Table from KG</Title>
+            <Title order={4}>
+                Entity-Relation Table from KG
+                <InfoModal title="Entity-Relation Table from KG">
+                    <p>This table extracts the IDs from your query and explains what they mean in the KG.</p>
+                </InfoModal>
+            </Title>
             {content}
         </div>
     )

src/components/InfoModal.tsx

@@ -0,0 +1,28 @@
+import { useDisclosure } from '@mantine/hooks';
+import { Modal, ActionIcon } from '@mantine/core';
+import { IconQuestionMark } from '@tabler/icons-react';
+
+export const InfoModal = ({
+  children,
+  title,
+}:{
+  children: React.ReactNode,
+  title: string,
+}) => {
+  const [opened, { open, close }] = useDisclosure(false);
+
+  return (
+    <>
+      <Modal opened={opened} onClose={close} title={title}>
+        {children}
+      </Modal>
+
+      <ActionIcon size="xs" variant="filled" aria-label={title} color="gray" onClick={open} style={{
+        marginLeft: "0.5em",
+        transform: "translateY(0.1em)",
+      }}>
+        <IconQuestionMark/>
+      </ActionIcon>
+    </>
+  );
+}

src/components/LLMWarning.tsx

@@ -0,0 +1,23 @@
+import { useDisclosure } from '@mantine/hooks';
+import { Modal, ActionIcon } from '@mantine/core';
+import { IconAlertTriangle } from '@tabler/icons-react';
+
+export const LLMWarning = ({
+  children,
+}:{
+  children: React.ReactNode,
+}) => {
+  const [opened, { open, close }] = useDisclosure(false);
+
+  return (
+    <>
+      <Modal opened={opened} onClose={close} title="LLM Hallucination Warning">
+        {children}
+      </Modal>
+
+      <ActionIcon size="xs" variant="filled" aria-label="LLM Hallucination Warning" color="yellow" onClick={open} style={{float:"right"}}>
+        <IconAlertTriangle/>
+      </ActionIcon>
+    </>
+  );
+}

src/components/QueryEditor/QueryEditor.module.scss

@@ -6,4 +6,13 @@
   background-color: #fff;
   width: 100%;
   overflow-x: auto;
+}
+
+.query-history-button {
+  margin-top: 1em;
+
+  span {
+    white-space: wrap;
+    overflow: auto;
+  }
 }

src/components/QueryEditor/QueryEditor.tsx

@@ -52,15 +52,12 @@ export function QueryEditor() {
               <Divider/>
               {queryHistory.map((record,i) => {
                 return (
-                  <div key={i}>
-                    <br/>
-                    <Button key={i} variant='default' onClick={() => {
-                      dispatch(setQueryValue(record.query))
-                      dispatch(setResults(record.results))
-                    }}>
-                      {i+1}: {record.name || "There was an error generating a name for this query"}
-                    </Button>
-                  </div>
+                  <Button key={i} className={styles["query-history-button"]} fullWidth variant='default' onClick={() => {
+                    dispatch(setQueryValue(record.query))
+                    dispatch(setResults(record.results))
+                  }}>
+                    {i+1}: {record.name || "There was an error generating a name for this query"}
+                  </Button>
                 )
               })}