diff --git a/src/App.tsx b/src/App.tsx index 41ba1ae..02bee58 100644 --- a/src/App.tsx +++ b/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 ( <> Results Summary from LLM - {results.summary ?

{results.summary}

: There was an error generating a summary.} + {results.summary ? ( +
+ +

This results summary was generated by an LLM that can make mistakes. Refer below to the Results Table from KG for ground-truth data.

+

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.

+
+ +

{results.summary}

+
+ ) : There was an error generating a summary.} +
- Results Table from KG + + + 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> + ) diff --git a/src/components/Chat/Chat.module.scss b/src/components/Chat/Chat.module.scss index 016d4ed..221b1ff 100644 --- a/src/components/Chat/Chat.module.scss +++ b/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 { diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx index 905e54b..3d6e6cf 100644 --- a/src/components/Chat/Chat.tsx +++ b/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 (
+ +

This was generated by an LLM that can make mistakes.

+
+ {text} + return ( +
+ +

This was generated by an LLM that can make mistakes.

+
+ +
{text}
+
+ ) } @@ -204,9 +217,9 @@ function RenderSparqlQuery({
{post}

- +
- +
diff --git a/src/components/IDTable/IDTable.tsx b/src/components/IDTable/IDTable.tsx index b29ffc2..405e598 100644 --- a/src/components/IDTable/IDTable.tsx +++ b/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 (
- Entity-Relation Table from KG + + 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> + {content}
) diff --git a/src/components/InfoModal.tsx b/src/components/InfoModal.tsx new file mode 100644 index 0000000..5ec1baa --- /dev/null +++ b/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 ( + <> + + {children} + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/LLMWarning.tsx b/src/components/LLMWarning.tsx new file mode 100644 index 0000000..e88357a --- /dev/null +++ b/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 ( + <> + + {children} + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/QueryEditor/QueryEditor.module.scss b/src/components/QueryEditor/QueryEditor.module.scss index 1d85fc5..e18f120 100644 --- a/src/components/QueryEditor/QueryEditor.module.scss +++ b/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; + } } \ No newline at end of file diff --git a/src/components/QueryEditor/QueryEditor.tsx b/src/components/QueryEditor/QueryEditor.tsx index 72d8bbc..4f10fe9 100644 --- a/src/components/QueryEditor/QueryEditor.tsx +++ b/src/components/QueryEditor/QueryEditor.tsx @@ -52,15 +52,12 @@ export function QueryEditor() { {queryHistory.map((record,i) => { return ( -
-
- -
+ ) })}