feat: Chat UI updates (#433)

Author: niallthomson

plugins/genai/frontend/src/components/AgentPage/AgentPage.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import { ChatHistoryComponent } from '../ChatHistoryComponent';
 import { ChatInputComponent } from '../ChatInputComponent';
 import { useParams } from 'react-router-dom';
-import { makeStyles } from '@material-ui/core';
+import { LinearProgress, makeStyles } from '@material-ui/core';
 import { useChatSession } from '../../hooks';
 
 const useStyles = makeStyles({
@@ -34,6 +34,10 @@ const useStyles = makeStyles({
     maxHeight: '100%',
     marginBottom: '1rem',
   },
+
+  chatInputContainer: {
+    margin: '1rem',
+  },
 });
 
 export const AgentPage = ({ title = 'Chat Assistant' }: { title?: string }) => {
@@ -50,28 +54,39 @@ export const AgentPage = ({ title = 'Chat Assistant' }: { title?: string }) => {
     throw new Error('agent name is not defined');
   }
 
-  const { messages, isLoading, onUserMessage, onClear } = useChatSession({
-    agentName,
-  });
+  const { messages, isInitializing, isLoading, onUserMessage, onClear } =
+    useChatSession({
+      agentName,
+    });
+
+  if (isInitializing) {
+    return (
+      <Content>
+        <LinearProgress />
+      </Content>
+    );
+  }
 
   return (
     <Page themeId="tool">
       <Header title={title} />
-      <Content>
+      <Content noPadding>
         <div className={classes.flex}>
           <ChatHistoryComponent
             messages={messages}
             className={classes.grow}
             isStreaming={isLoading}
             showInformation={showInformation}
           />
-          <InfoCard>
-            <ChatInputComponent
-              onMessage={onUserMessage}
-              disabled={isLoading}
-              onClear={onClear}
-            />
-          </InfoCard>
+          <div className={classes.chatInputContainer}>
+            <InfoCard>
+              <ChatInputComponent
+                onMessage={onUserMessage}
+                disabled={isLoading}
+                onClear={onClear}
+              />
+            </InfoCard>
+          </div>
         </div>
       </Content>
     </Page>

plugins/genai/frontend/src/components/ChatHistoryComponent/ChatHistoryComponent.tsx

@@ -27,6 +27,7 @@ const useStyles = makeStyles(theme => ({
   container: {
     display: 'flex',
     flexDirection: 'column',
+    margin: '0',
   },
 
   markdownContainer: {
@@ -217,7 +218,9 @@ export const ChatHistoryComponent = ({
                 <div className={`${classes.ChatItemChatText}`}>
                   <MarkdownContent
                     content={
-                      message.payload.length === 0 ? '...' : message.payload
+                      message.payload.length === 0
+                        ? 'Working...'
+                        : message.payload
                     }
                     dialect="gfm"
                   />

plugins/genai/frontend/src/components/ChatInputComponent/ChatInputComponent.tsx

@@ -13,6 +13,8 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 import { Button, makeStyles, TextField } from '@material-ui/core';
+import SendIcon from '@material-ui/icons/Send';
+import DeleteIcon from '@material-ui/icons/Delete';
 
 const useStyles = makeStyles({
   ChatInputLayout: {
@@ -25,14 +27,20 @@ const useStyles = makeStyles({
   },
 
   ChatInputButtons: {
-    marginLeft: '2rem',
+    marginLeft: '0.5rem',
     display: 'flex',
     alignItems: 'center',
   },
+
+  ChatInputButton: {
+    marginLeft: '0.5rem',
+    minWidth: '36px',
+    padding: '10px',
+  },
 });
 
 interface ChatInputComponentProps {
-  onMessage?: (message: string) => void;
+  onMessage: (message: string) => void;
   disabled?: boolean;
   onClear?: () => void;
 }
@@ -54,43 +62,63 @@ export const ChatInputComponent = ({
     }
   }, [disabled]);
 
+  const processMessage = () => {
+    onMessage(message);
+    setMessage('');
+  };
+
   const checkKeyPress = (evt: React.KeyboardEvent<HTMLInputElement>) => {
     if (evt.code === 'Enter') {
       if (!evt.shiftKey) {
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        onMessage && onMessage(message);
-        setMessage('');
+        processMessage();
         evt.preventDefault();
       }
     }
   };
 
   return (
-    <div className={classes.ChatInputLayout}>
-      <div className={classes.ChatInputContainer}>
-        <TextField
-          id="outlined-multiline-flexible"
-          label="Type a message"
-          helperText="Hold <shift> when pressing <enter> for multiline"
-          multiline
-          variant="standard"
-          value={message}
-          style={{
-            marginRight: '1rem',
-          }}
-          maxRows={8}
-          minRows={1}
-          onKeyDown={checkKeyPress}
-          onChange={evt => setMessage(evt.target.value)}
-          fullWidth
-          disabled={disabled}
-          ref={inputRef}
-        />
-      </div>
-      <div className={classes.ChatInputButtons}>
-        <Button variant="outlined" onClick={onClear} disabled={disabled}>
-          Clear Chat
-        </Button>
+    <div>
+      <div className={classes.ChatInputLayout}>
+        <div className={classes.ChatInputContainer}>
+          <TextField
+            id="outlined-multiline-flexible"
+            label="Type a message"
+            multiline
+            variant="outlined"
+            value={message}
+            style={{
+              marginRight: '1rem',
+            }}
+            maxRows={8}
+            minRows={1}
+            onKeyDown={checkKeyPress}
+            onChange={evt => setMessage(evt.target.value)}
+            fullWidth
+            disabled={disabled}
+            ref={inputRef}
+          />
+        </div>
+        <div className={classes.ChatInputButtons}>
+          <Button
+            title="Send"
+            onClick={processMessage}
+            disabled={disabled}
+            variant="contained"
+            color="primary"
+            className={classes.ChatInputButton}
+          >
+            <SendIcon />
+          </Button>
+          <Button
+            title="Clear"
+            onClick={onClear}
+            disabled={disabled}
+            variant="text"
+            className={classes.ChatInputButton}
+          >
+            <DeleteIcon />
+          </Button>
+        </div>
       </div>
     </div>
   );

plugins/genai/frontend/src/hooks/useChatSession.ts

@@ -24,6 +24,7 @@ interface UseChatSessionProps {
 interface UseChatSessionResult {
   messages: ChatMessage[];
   isLoading: boolean;
+  isInitializing: boolean;
   onUserMessage: (userMessage: string) => Promise<void>;
   onClear: () => void;
 }
@@ -34,6 +35,7 @@ export const useChatSession = ({
   const agentApi = useApi(agentApiRef);
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [isInitializing, setIsInitializing] = useState(false);
 
   const [chatManager] = useState(
     () =>
@@ -45,8 +47,10 @@ export const useChatSession = ({
   );
 
   useEffect(() => {
+    setIsInitializing(true);
     chatManager.loadFromStorage();
     setMessages(chatManager.getMessages());
+    setIsInitializing(false);
   }, [chatManager]);
 
   const onUserMessage = useCallback(
@@ -69,6 +73,7 @@ export const useChatSession = ({
   return {
     messages,
     isLoading,
+    isInitializing,
     onUserMessage,
     onClear,
   };