Add LLM page improvements.

thehyve · Aug 5, 2024 · 03a43f3 · 03a43f3
1 parent aaf02b8
commit 03a43f3
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 15 deletions.
diff --git a/projects/mercury/src/dashboard/DashboardPage.js b/projects/mercury/src/dashboard/DashboardPage.js
@@ -2,21 +2,32 @@ import React, {useContext} from 'react';
 
 import withStyles from '@mui/styles/withStyles';
 import {Grid, Link, Paper, Typography, TextField} from '@mui/material';
+import {useHistory} from 'react-router-dom';
+import queryString from 'query-string';
 import styles from './DashboardPage.styles';
 import MetadataViewContext from '../metadata/views/MetadataViewContext';
 import ExternalMetadataSourceContext from '../metadata/metadata-sources/ExternalMetadataSourceContext';
 import UserContext from '../users/UserContext';
 import DomainInfo from './DomainInfo';
 import {APPLICATION_DOCS_URL, APPLICATION_NAME, THE_HYVE_URL} from '../constants';
 import InternalMetadataSourceContext from '../metadata/metadata-sources/InternalMetadataSourceContext';
+import FeaturesContext from '../common/contexts/FeaturesContext';
 
 const DashboardPage = props => {
     const {currentUser, classes} = props;
+    const history = useHistory();
     const {views} = useContext(MetadataViewContext);
     const {externalMetadataSources} = useContext(ExternalMetadataSourceContext);
     const {internalMetadataIcon, internalMetadataLabel} = useContext(InternalMetadataSourceContext);
     const canViewMetadata = currentUser && currentUser.canViewPublicMetadata && views && views.length > 0;
-    const askAIConfigured = false;
+    const {isFeatureEnabled} = useContext(FeaturesContext);
+    const isLlsSearchEnabled = isFeatureEnabled('LlmSearch');
+
+    const handleLlmInputChange = event => {
+        if (event.keyCode === 13) {
+            history.push('/ask/?' + queryString.stringify({q: event.target.value}));
+        }
+    };
 
     return (
         <Grid container spacing={5} className={classes.mainPage} direction="column" justifyContent="flex-start">
@@ -100,7 +111,7 @@ const DashboardPage = props => {
                 </Grid>
             </Grid>
             <Grid item xs={12}>
-                {askAIConfigured && (
+                {isLlsSearchEnabled && (
                     <Paper elevation={3} className={classes.paperContent}>
                         <Typography className={classes.header} variant="h4" paragraph align="center">
                             Ask AI
@@ -114,6 +125,7 @@ const DashboardPage = props => {
                                 placeholder="Type your quetion here..."
                                 variant="outlined"
                                 className={classes.textField}
+                                onKeyDown={event => handleLlmInputChange(event)}
                             />
                         </div>
                     </Paper>

diff --git a/projects/mercury/src/llm/Conversation.js b/projects/mercury/src/llm/Conversation.js
@@ -26,9 +26,9 @@ import LinkedDataEntityPage from '../metadata/common/LinkedDataEntityPage';
 import {LocalSearchAPI} from '../search/SearchAPI';
 
 const Conversation = props => {
-    const {classes} = props;
+    const {initialQuery = '', classes} = props;
 
-    const [query, setQuery] = useState('');
+    const [query, setQuery] = useState(initialQuery);
 
     const [messages, setMessages] = useState([]);
     const [responseMessage, setResponseMessage] = useState('');

diff --git a/projects/mercury/src/llm/Conversation.styles.js b/projects/mercury/src/llm/Conversation.styles.js
@@ -1,3 +1,4 @@
+import {alpha} from '@mui/material/styles';
 import * as consts from '../constants';
 
 const styles = theme => ({
@@ -45,8 +46,8 @@ const styles = theme => ({
         marginRight: '25px'
     },
     historyListContainer: {
-        borderTop: '1.5px solid ' + theme.palette.primary.light,
-        backgroundColor: '#F1F1F1'
+        borderTop: '1.5px solid ' + theme.palette.primary.light
+        // backgroundColor: theme.palette.mellow.light
     },
     historyListItem: {
         borderColor: theme.palette.primary.dark,
@@ -72,7 +73,8 @@ const styles = theme => ({
         padding: 10,
         marginBottom: 20,
         borderRadius: 15,
-        maxWidth: 500
+        maxWidth: 500,
+        backgroundColor: alpha(theme.palette.primary.main, 0.15)
     },
     allResults: {
         marginTop: 20,
@@ -83,7 +85,7 @@ const styles = theme => ({
         overflow: 'auto'
     },
     chatArticle: {
-        backgroundColor: '#F1F1F1',
+        backgroundColor: theme.palette.mellow.light,
         margin: 0,
         marginBottom: 10,
         paddingLeft: 10,
@@ -117,11 +119,11 @@ const styles = theme => ({
         marginBottom: 10
     },
     modalDialog: {
-        background: theme.palette.grey['200'],
+        background: theme.palette.primary.main,
         position: 'relative',
         top: 0,
         width: 800,
-        bgcolor: 'background.paper',
+        bgcolor: 'primary',
         border: '0px solid #000',
         boxShadow: 0,
         outline: 'none',

diff --git a/projects/mercury/src/llm/LlmSearchPage.js b/projects/mercury/src/llm/LlmSearchPage.js
@@ -4,17 +4,19 @@ import {Grid} from '@mui/material';
 import MetadataViewContext from '../metadata/views/MetadataViewContext';
 import UserContext from '../users/UserContext';
 import Conversation from './Conversation';
+import {getSearchQueryFromString} from '../search/searchUtils';
 
 const LlmSearchPage = props => {
-    const {currentUser} = props;
+    const {currentUser, location: {search} = ''} = props;
+    const query = getSearchQueryFromString(search);
     const {views} = useContext(MetadataViewContext);
     const canViewMetadata = currentUser && currentUser.canViewPublicMetadata && views && views.length > 0;
 
     return (
         <Grid container justifyContent="center" spacing="5">
             <Grid item xs={1} />
             <Grid item xs={10}>
-                {canViewMetadata && <Conversation />}
+                {canViewMetadata && <Conversation initialQuery={query} />}
             </Grid>
             <Grid item xs={1} />
         </Grid>

diff --git a/projects/mercury/src/routes/WorkspaceRoutes.js b/projects/mercury/src/routes/WorkspaceRoutes.js
@@ -48,10 +48,9 @@ const WorkspaceRoutes = () => {
 
             <Route
                 path="/ask"
-                exact
-                render={() => (
+                render={props => (
                     <LinkedDataMetadataProvider>
-                        <LlmSearchPage />
+                        <LlmSearchPage {...props} />
                     </LinkedDataMetadataProvider>
                 )}
             />