Fixes for chat eval layout and auto-scroll

Signed-off-by: Jeffrey Phillips <[email protected]>

Author: jeff-phillips-18

package.json

@@ -13,7 +13,7 @@
     "lint": "next lint",
     "type-check": "tsc --noEmit",
     "lint:fix": "npx eslint --fix 'src/**/*.{js,jsx,ts,tsx}'",
-    "pretty": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,md}'",
+    "pretty": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,scss,md}'",
     "test:e2e": "npx playwright test"
   },
   "dependencies": {

src/app/experimental/chat-eval/page.tsx

@@ -4,14 +4,14 @@
 import * as React from 'react';
 import '@patternfly/react-core/dist/styles/base.css';
 import { AppLayout } from '@/components/AppLayout';
-import ChatModelEval from '@/components/Experimental/ChatEval/ChatEval';
+import ChatEval from '@/components/Experimental/ChatEval/ChatEval';
 
-const ChatEval: React.FunctionComponent = () => {
+const ChatEvalPage: React.FunctionComponent = () => {
   return (
-    <AppLayout className="chat-eval-page">
-      <ChatModelEval />
+    <AppLayout className="chatBotPage">
+      <ChatEval />
     </AppLayout>
   );
 };
 
-export default ChatEval;
+export default ChatEvalPage;

src/components/AppLayout.tsx

@@ -110,8 +110,8 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children, className })
       path: '/experimental',
       label: 'Experimental Features',
       children: [
-        { path: '/experimental/fine-tune/', label: 'Fine-tuning' },
-        { path: '/experimental/chat-eval/', label: 'Model Chat Eval' }
+        { path: '/experimental/fine-tune', label: 'Fine-tuning' },
+        { path: '/experimental/chat-eval', label: 'Model Chat Eval' }
       ]
     }
   ].filter(Boolean) as Route[];

src/components/Chat/ChatBotComponent.tsx

@@ -30,14 +30,11 @@ import {
   MessageProps
 } from '@patternfly/chatbot';
 import { Model } from '@/types';
-import { modelFetcher } from '@/components/Chat/modelService';
+import { modelFetcher } from '@/services/modelService';
 const botAvatar = '/bot-icon-chat-32x32.svg';
 
 import { EllipsisVIcon, TimesIcon } from '@patternfly/react-icons';
-import styles from '@/components/Chat/chat.module.css';
 import { ModelsContext } from '@/components/Chat/ModelsContext';
-import { useSession } from 'next-auth/react';
-import { useEffect, useState } from 'react';
 
 export const getId = () => {
   const date = Date.now() + Math.random();
@@ -46,20 +43,22 @@ export const getId = () => {
 
 type ChatbotComponentProps = {
   model: Model;
+  userName: string;
   messages: MessageProps[];
   setMessages: React.Dispatch<React.SetStateAction<MessageProps[]>>;
   showCompare: boolean;
   onCompare: () => void;
   onChangeModel: (model: Model) => void;
   onClose?: () => void;
-  submittedMessage?: string;
+  submittedMessage?: MessageProps;
   setFetching: (fetching: boolean) => void;
   setStopCallback: (stopFn: () => void) => void;
   setController: (controller: AbortController) => void;
 };
 
 const ChatBotComponent: React.FunctionComponent<ChatbotComponentProps> = ({
   model,
+  userName,
   messages,
   setMessages,
   showCompare,
@@ -71,7 +70,6 @@ const ChatBotComponent: React.FunctionComponent<ChatbotComponentProps> = ({
   setStopCallback,
   setController
 }) => {
-  const { data: session } = useSession();
   const { availableModels } = React.useContext(ModelsContext);
   const [isLoading, setIsLoading] = React.useState(false);
   const [isSelectOpen, setIsSelectOpen] = React.useState(false);
@@ -81,18 +79,7 @@ const ChatBotComponent: React.FunctionComponent<ChatbotComponentProps> = ({
   const [announcement, setAnnouncement] = React.useState<string>();
   const [isActionsOpen, setActionsOpen] = React.useState<boolean>(false);
   const stopped = React.useRef<boolean>(false);
-  const [userName, setUserName] = useState<string>('');
-  const [userImage, setUserImage] = useState<string>('');
-
-  useEffect(() => {
-    if (session?.user?.name === 'Admin') {
-      setUserName(session?.user?.name);
-      setUserImage('/default-avatar.png');
-    } else {
-      setUserName(session?.user?.name ?? '');
-      setUserImage(session?.user?.image || '');
-    }
-  }, [session?.user?.name, session?.user?.image]);
+  const lastQuestionRef = React.useRef<string>();
 
   React.useEffect(() => {
     setStopCallback(() => {
@@ -103,32 +90,24 @@ const ChatBotComponent: React.FunctionComponent<ChatbotComponentProps> = ({
   }, []);
 
   const handleSubmit = React.useCallback(
-    async (input: string) => {
+    async (message: MessageProps) => {
       if (!model) {
         setShowNoModelAlert(true);
         return;
       }
-      if (!input.trim()) {
+      if (!message.content?.trim()) {
         setShowNoQuestionAlert(true);
         return;
       }
 
       const date = new Date();
 
       setMessages((prevMessages) => {
-        const newMessage: MessageProps = {
-          avatar: userImage,
-          id: getId(),
-          name: userName,
-          role: 'user',
-          content: input,
-          timestamp: `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
-        };
-        return [...prevMessages, newMessage];
+        return [...prevMessages, message];
       });
 
       // make announcement to assistive devices that new messages have been added
-      setAnnouncement(`Message from You: ${input}. Message from Chatbot is loading.`);
+      setAnnouncement(`Message from You: ${message.content}. Message from Chatbot is loading.`);
 
       setIsLoading(true);
       setFetching(true);
@@ -154,24 +133,25 @@ const ChatBotComponent: React.FunctionComponent<ChatbotComponentProps> = ({
 
       stopped.current = false;
       try {
-        await modelFetcher(model, input, setCurrentMessage, setController);
+        await modelFetcher(model, message.content, setCurrentMessage, setController);
       } catch (e) {
         console.error(`Model fetch failed: `, e);
       }
 
       setIsLoading(false);
       setFetching(false);
     },
-    [model, setController, setFetching, setMessages, userImage, userName]
+    [model, setController, setFetching, setMessages]
   );
 
   React.useEffect(() => {
-    if (submittedMessage) {
+    if (submittedMessage && submittedMessage.id !== lastQuestionRef.current) {
+      lastQuestionRef.current = submittedMessage.id;
       handleSubmit(submittedMessage);
     }
     // Do not update when handleSubmit changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [submittedMessage]);
+  }, [submittedMessage, handleSubmit]);
 
   const onToggleClick = () => {
     setIsSelectOpen(!isSelectOpen);
@@ -218,7 +198,7 @@ const ChatBotComponent: React.FunctionComponent<ChatbotComponentProps> = ({
 
   return (
     <Chatbot displayMode={ChatbotDisplayMode.embedded}>
-      <ChatbotHeader className={styles.chatHeader}>
+      <ChatbotHeader>
         <ChatbotHeaderMain>
           <Select
             id="single-select"
@@ -264,7 +244,7 @@ const ChatBotComponent: React.FunctionComponent<ChatbotComponentProps> = ({
         </ChatbotHeaderActions>
       </ChatbotHeader>
       <ChatbotContent>
-        <MessageBox announcement={announcement} className={styles.chatBotMessage}>
+        <MessageBox announcement={announcement}>
           <ChatbotWelcomePrompt title={`Hello, ${userName}`} description="Go ahead and ask me a question." />
           {messages.map((message) => (
             <Message key={message.id} {...message} />

src/components/Chat/ChatBotContainer.tsx

@@ -6,9 +6,9 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { ChatbotFooter, ChatbotFootnote, Compare, MessageBar, MessageProps } from '@patternfly/chatbot';
 import { Model } from '@/types';
 import { ModelsContext } from './ModelsContext';
-import { ChatBotComponent } from './ChatBotComponent';
+import { ChatBotComponent, getId } from './ChatBotComponent';
+import { useUserInfo } from '@/hooks/useUserInfo';
 
-import '@patternfly/chatbot/dist/css/main.css';
 import styles from './chat.module.css';
 
 const MAX_COMPARES = 2;
@@ -21,7 +21,9 @@ const ChatBotContainer: React.FC = () => {
     () => searchParams.get('models')?.split(',') ?? [availableModels[0]?.name],
     [searchParams, availableModels]
   );
-  const [submittedMessage, setSubmittedMessage] = React.useState<string>();
+  const [submittedMessage, setSubmittedMessage] = React.useState<MessageProps>();
+  const { userName, userImage } = useUserInfo();
+  const [question, setQuestion] = React.useState<string>('');
 
   const [mainChatMessages, setMainChatMessages] = React.useState<MessageProps[]>([]);
   const [mainChatFetching, setMainChatFetching] = React.useState<boolean>();
@@ -45,6 +47,24 @@ const ChatBotContainer: React.FC = () => {
     [modelNames, availableModels]
   );
 
+  const onSubmitMessage = React.useCallback(
+    (message: string | number) => {
+      const date = new Date();
+
+      const newMessage: MessageProps = {
+        avatar: userImage,
+        id: getId(),
+        name: userName,
+        role: 'user',
+        content: typeof message === 'string' ? message : String(message),
+        timestamp: `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
+      };
+
+      setSubmittedMessage(newMessage);
+    },
+    [userImage, userName]
+  );
+
   const onCloseChat = (indexToRemove: number) => {
     const remaining = [...modelNames.slice(0, indexToRemove), ...modelNames.slice(indexToRemove + 1)];
 
@@ -87,7 +107,8 @@ const ChatBotContainer: React.FC = () => {
   const mainChat = (
     <ChatBotComponent
       model={selectedModels[0]}
-      showCompare={selectedModels.length < MAX_COMPARES}
+      userName={userName}
+      showCompare={selectedModels.length < MAX_COMPARES && availableModels.length > 1}
       onCompare={onCompare}
       messages={mainChatMessages}
       setMessages={setMainChatMessages}
@@ -106,6 +127,7 @@ const ChatBotContainer: React.FC = () => {
     selectedModels.length > 1 ? (
       <ChatBotComponent
         model={selectedModels[1]}
+        userName={userName}
         showCompare={false}
         onCompare={onCompare}
         messages={altChatMessages}
@@ -124,7 +146,7 @@ const ChatBotContainer: React.FC = () => {
   return (
     <>
       {altChat ? (
-        <div className="pf-chatbot__compare-container">
+        <div className="pf-chatbot__compare-container m-is-unified">
           <Compare
             firstChild={mainChat}
             secondChild={altChat}
@@ -137,13 +159,14 @@ const ChatBotContainer: React.FC = () => {
       )}
       <ChatbotFooter>
         <MessageBar
-          className={styles.chatBotMessageBar}
-          onSendMessage={(message) => {
-            setSubmittedMessage(typeof message === 'string' ? message : String(message));
-          }}
+          onSendMessage={onSubmitMessage}
           hasMicrophoneButton
           hasAttachButton={false}
-          isSendButtonDisabled={mainChatFetching || altChatFetching}
+          onChange={(_, val) => {
+            setQuestion(typeof val === 'string' ? val : String(val));
+          }}
+          alwayShowSendButton
+          isSendButtonDisabled={!question.trim() || mainChatFetching || altChatFetching}
           hasStopButton={mainChatFetching || altChatFetching}
           handleStopButton={handleStopButton}
         />

src/components/Chat/chat.module.css

@@ -1,11 +1,4 @@
 /* Chat Bot Container */
-.chatHeader {
-  border-top: 1px solid var(--pf-t--global--border--color--100);
-  border-bottom: 1px solid var(--pf-t--global--border--color--100);
-}
-.chatBotMessageBar {
-  border: 1px solid var(--pf-t--global--border--color--100);
-}
 .chatBotContainer {
   flex: 1;
   overflow-y: hidden;

src/components/Contribute/Knowledge/FileConversionModal.tsx

@@ -79,7 +79,6 @@ export const FileConversionModal: React.FunctionComponent<Props> = ({ filesToCon
 
       if (!res.ok) {
         // Check if it's a 503 => offline service
-        console.log(res);
         if (res.status === 503) {
           console.error('Conversion service offline, only .md files accepted');
           throw new Error('The file conversion service is offline. Only Markdown file type can be accepted until service is restored.');
@@ -158,7 +157,7 @@ export const FileConversionModal: React.FunctionComponent<Props> = ({ filesToCon
     return () => {
       canceled = true;
     };
-  }, [convertToMarkdownIfNeeded, filesToConvert, isUploading, onConverted, onError]);
+  }, [convertToMarkdownIfNeeded, currentFiles, filesToConvert, isUploading, onConverted, onError]);
 
   return (
     <Modal isOpen title="Upload in progress" variant="small" aria-label="uploading" aria-labelledby="upload-modal-title" disableFocusTrap>

src/components/Experimental/ChatEval/ChatEval.css

@@ -1,10 +1,11 @@
-.chat-eval__chatbots-container {
+.chat-loading-container {
   display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  margin-left: 1rem;
-  margin-right: 1rem;
-  @media (min-width: 1695px) {
-    flex-direction: row;
-  }
+  gap: 0.5rem;
+  font-size: medium !important;
+  justify-content: center;
+  width: 50%;
+}
+
+.pf-chatbot__compare-toggle .pf-v6-c-toggle-group__button {
+  height: 100%;
 }