Merge pull request #672 from jeff-phillips-18/chat-eval-fixes

Fixes for chat eval layout and auto-scroll

Author: vishnoianil

package-lock.json

@@ -13,13 +13,13 @@
     "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": {
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@next/env": "^15.3.2",
-    "@patternfly/chatbot": "^2.2.1",
+    "@patternfly/chatbot": "6.3.0-prerelease.14",
     "@patternfly/react-core": "^6.2.2",
     "@patternfly/react-icons": "^6.2.0",
     "@patternfly/react-styles": "^6.2.0",

package.json

@@ -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/app/experimental/chat-eval/page.tsx

@@ -19,7 +19,7 @@ import {
   ValidatedOptions
 } from '@patternfly/react-core';
 import { ExclamationCircleIcon, OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
-import { fetchEndpointStatus } from '@/components/Chat/modelService';
+import { fetchEndpointStatus } from '@/services/modelService';
 
 const removeTrailingSlash = (inputUrl: string): string => {
   if (inputUrl.slice(-1) === '/') {

src/app/playground/endpoints/EditEndpointModal.tsx

@@ -24,7 +24,7 @@ import { Endpoint, ModelEndpointStatus } from '@/types';
 import EditEndpointModal from '@/app/playground/endpoints/EditEndpointModal';
 import DeleteEndpointModal from '@/app/playground/endpoints/DeleteEndpoinModal';
 import EndpointActions from '@/app/playground/endpoints/EndpointActions';
-import { fetchEndpointStatus } from '@/components/Chat/modelService';
+import { fetchEndpointStatus } from '@/services/modelService';
 
 const iconForStatus = (status: ModelEndpointStatus) => {
   switch (status) {

src/app/playground/endpoints/page.tsx

@@ -106,8 +106,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' }
             ]
           }
         ]

src/components/AppLayout.tsx

@@ -32,14 +32,11 @@ import {
   MessageProps
 } from '@patternfly/chatbot';
 import { Model } from '@/types';
-import { modelFetcher } from '@/components/Chat/modelService';
-const botAvatar = '/bot-icon-chat-32x32.svg';
-
-import { EllipsisVIcon, OutlinedQuestionCircleIcon, TimesIcon } from '@patternfly/react-icons';
-import styles from '@/components/Chat/chat.module.css';
+import { modelFetcher } from '@/services/modelService';
 import { ModelsContext } from '@/components/Chat/ModelsContext';
-import { useSession } from 'next-auth/react';
-import { useEffect, useState } from 'react';
+import { EllipsisVIcon, OutlinedQuestionCircleIcon, TimesIcon } from '@patternfly/react-icons';
+
+const botAvatar = '/bot-icon-chat-32x32.svg';
 
 export const getId = () => {
   const date = Date.now() + Math.random();
@@ -48,20 +45,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,
@@ -74,7 +73,6 @@ const ChatBotComponent: React.FunctionComponent<ChatbotComponentProps> = ({
   setController
 }) => {
   const router = useRouter();
-  const { data: session } = useSession();
   const { availableModels } = React.useContext(ModelsContext);
   const [isLoading, setIsLoading] = React.useState(false);
   const [isSelectOpen, setIsSelectOpen] = React.useState(false);
@@ -84,18 +82,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(() => {
@@ -106,32 +93,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);
@@ -157,24 +136,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);
@@ -221,7 +201,7 @@ const ChatBotComponent: React.FunctionComponent<ChatbotComponentProps> = ({
 
   return (
     <Chatbot displayMode={ChatbotDisplayMode.embedded}>
-      <ChatbotHeader className={styles.chatHeader}>
+      <ChatbotHeader>
         <ChatbotHeaderMain>
           <Select
             id="single-select"
@@ -284,7 +264,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/ChatBotComponent.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/ChatBotContainer.tsx

@@ -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/Chat/chat.module.css

@@ -1,6 +1,6 @@
 .pf-v6-c-label {
-   &.knowledge-contribution-label {
-   --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--color--status--custom--default);
+  &.knowledge-contribution-label {
+    --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--color--status--custom--default);
   }
   &.skill-contribution-label {
     --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);