From a9610da61a1af053ae79290f18a12d898dd403e0 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Thu, 7 Nov 2024 15:00:26 -0500 Subject: [PATCH] Add avatars and adjust send button Need to add ability to disable send on input state to Virtual Assistant --- src/app/BaseChatbot/BaseChatbot.tsx | 12 +++++++----- src/app/Compare/CompareChild.tsx | 11 ++++++----- src/app/Compare/CompareLayout.tsx | 5 +---- src/app/app.css | 6 ++++++ src/app/bgimages/RHCAI-studio-avatar.svg | 11 +++++++++++ src/app/bgimages/avatarImg.svg | 18 ++++++++++++++++++ 6 files changed, 49 insertions(+), 14 deletions(-) create mode 100644 src/app/bgimages/RHCAI-studio-avatar.svg create mode 100644 src/app/bgimages/avatarImg.svg diff --git a/src/app/BaseChatbot/BaseChatbot.tsx b/src/app/BaseChatbot/BaseChatbot.tsx index 666b17e..e9db3d2 100644 --- a/src/app/BaseChatbot/BaseChatbot.tsx +++ b/src/app/BaseChatbot/BaseChatbot.tsx @@ -19,6 +19,9 @@ import { CannedChatbot } from '../types/CannedChatbot'; import { HeaderDropdown } from '@app/HeaderDropdown/HeaderDropdown'; import { ERROR_TITLE, getId } from '@app/utils/utils'; import { Button } from '@patternfly/react-core'; +import botAvatar from '@app/bgimages/RHCAI-studio-avatar.svg'; +import userAvatar from '@app/bgimages/avatarImg.svg'; + interface Source { link: string; } @@ -28,7 +31,6 @@ const BaseChatbot: React.FunctionComponent = () => { const [messages, setMessages] = React.useState([]); const [currentMessage, setCurrentMessage] = React.useState([]); const [currentSources, setCurrentSources] = React.useState(); - const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(false); const scrollToBottomRef = React.useRef(null); const [error, setError] = React.useState<{ title: string; body: string }>(); const [announcement, setAnnouncement] = React.useState(); @@ -165,11 +167,11 @@ const BaseChatbot: React.FunctionComponent = () => { } const handleSend = async (input: string) => { - setIsSendButtonDisabled(true); const date = new Date(); const newMessages = structuredClone(messages); if (currentMessage.length > 0) { newMessages.push({ + avatar: botAvatar, id: getId(), name: currentChatbot?.displayName, role: 'bot', @@ -184,6 +186,7 @@ const BaseChatbot: React.FunctionComponent = () => { setCurrentDate(undefined); } newMessages.push({ + avatar: userAvatar, id: getId(), name: 'You', role: 'user', @@ -201,7 +204,6 @@ const BaseChatbot: React.FunctionComponent = () => { } // make announcement to assistive devices that new message has been added currentMessage.length > 0 && setAnnouncement(`Message from Chatbot: ${currentMessage.join('')}`); - setIsSendButtonDisabled(false); setHasStopButton(false); }; @@ -218,7 +220,6 @@ const BaseChatbot: React.FunctionComponent = () => { setCurrentSources(undefined); setError(undefined); setAnnouncement(undefined); - setIsSendButtonDisabled(false); }; const handleStopButton = () => { @@ -260,6 +261,7 @@ const BaseChatbot: React.FunctionComponent = () => { ))} {currentMessage.length > 0 && ( { onSendMessage={handleSend} hasMicrophoneButton hasAttachButton={false} - isSendButtonDisabled={isSendButtonDisabled} hasStopButton={hasStopButton} handleStopButton={handleStopButton} + alwayShowSendButton /> diff --git a/src/app/Compare/CompareChild.tsx b/src/app/Compare/CompareChild.tsx index 208ef99..004a60b 100644 --- a/src/app/Compare/CompareChild.tsx +++ b/src/app/Compare/CompareChild.tsx @@ -15,6 +15,9 @@ import { CannedChatbot } from '../types/CannedChatbot'; import { HeaderDropdown } from '@app/HeaderDropdown/HeaderDropdown'; import { ERROR_TITLE, getId } from '@app/utils/utils'; import { useChildStatus } from './ChildStatusProvider'; +import botAvatar from '@app/bgimages/RHCAI-studio-avatar.svg'; +import userAvatar from '@app/bgimages/avatarImg.svg'; + interface Source { link: string; } @@ -22,7 +25,6 @@ interface Source { interface CompareChildProps { chatbot: CannedChatbot; allChatbots: CannedChatbot[]; - setIsSendButtonDisabled: (bool: boolean) => void; controller?: AbortController; setController: (controller: AbortController | undefined) => void; input?: string; @@ -35,7 +37,6 @@ interface CompareChildProps { const CompareChild: React.FunctionComponent = ({ chatbot, allChatbots, - setIsSendButtonDisabled, controller, setController, input, @@ -57,12 +58,12 @@ const CompareChild: React.FunctionComponent = ({ const displayMode = ChatbotDisplayMode.embedded; const handleSend = async (input: string) => { - setIsSendButtonDisabled(true); const date = new Date(); const newMessages = structuredClone(messages); // when a new message comes in, we add the last streaming message to the array and reset it if (currentMessage.length > 0) { newMessages.push({ + avatar: botAvatar, id: getId(), name: currentChatbot?.displayName, role: 'bot', @@ -76,6 +77,7 @@ const CompareChild: React.FunctionComponent = ({ setCurrentSources(undefined); } newMessages.push({ + avatar: userAvatar, id: getId(), name: 'You', role: 'user', @@ -94,7 +96,6 @@ const CompareChild: React.FunctionComponent = ({ } // make announcement to assistive devices that new message has been added currentMessage.length > 0 && setAnnouncement(`Message from Chatbot: ${currentMessage.join('')}`); - setIsSendButtonDisabled(false); // this is used to control state of stop button updateStatus(order === 'first' ? 'child1' : 'child2', { isMessageStreaming: false }); }; @@ -232,7 +233,6 @@ const CompareChild: React.FunctionComponent = ({ setCurrentSources(undefined); setError(undefined); setAnnouncement(undefined); - setIsSendButtonDisabled(false); setChatbot(value); setSearchParams(_event, value.name, order); updateStatus(order === 'first' ? 'child1' : 'child2', { @@ -267,6 +267,7 @@ const CompareChild: React.FunctionComponent = ({ ))} {currentMessage.length > 0 && ( { const { chatbots } = useLoaderData() as { chatbots: CannedChatbot[] }; // state - const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(false); const [input, setInput] = React.useState(); const [hasNewInput, setHasNewInput] = React.useState(false); const [firstController, setFirstController] = React.useState(); @@ -147,7 +146,6 @@ export const CompareLayout: React.FunctionComponent = () => { allChatbots={chatbots} controller={firstController} setController={setFirstController} - setIsSendButtonDisabled={setIsSendButtonDisabled} input={input} setChatbot={setFirstChatbot} hasNewInput={hasNewInput} @@ -161,7 +159,6 @@ export const CompareLayout: React.FunctionComponent = () => { allChatbots={chatbots} controller={secondController} setController={setSecondController} - setIsSendButtonDisabled={setIsSendButtonDisabled} input={input} setChatbot={setSecondChatbot} hasNewInput={hasNewInput} @@ -175,9 +172,9 @@ export const CompareLayout: React.FunctionComponent = () => { onSendMessage={handleSend} hasMicrophoneButton hasAttachButton={false} - isSendButtonDisabled={isSendButtonDisabled} hasStopButton={hasStopButton} handleStopButton={handleStopButton} + alwayShowSendButton /> diff --git a/src/app/app.css b/src/app/app.css index 89ad26f..24aac13 100644 --- a/src/app/app.css +++ b/src/app/app.css @@ -127,3 +127,9 @@ pf-v6-c-page__main-container.pf-m-fill { } } } + +.pf-chatbot__message.pf-chatbot__message--user { + img { + border: 1px solid var(--pf-t--global--border--color--default); + } +} diff --git a/src/app/bgimages/RHCAI-studio-avatar.svg b/src/app/bgimages/RHCAI-studio-avatar.svg new file mode 100644 index 0000000..89bad8b --- /dev/null +++ b/src/app/bgimages/RHCAI-studio-avatar.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/app/bgimages/avatarImg.svg b/src/app/bgimages/avatarImg.svg new file mode 100644 index 0000000..73726f9 --- /dev/null +++ b/src/app/bgimages/avatarImg.svg @@ -0,0 +1,18 @@ + + + + + + + + + +