Skip to content

Commit

Permalink
Add avatars and adjust send button
Browse files Browse the repository at this point in the history 
Need to add ability to disable send on input state to Virtual Assistant
  • Loading branch information
@rebeccaalpert
rebeccaalpert committed Nov 7, 2024
1 parent 5344bcc commit a9610da
Show file tree
Hide file tree
Showing 6 changed files with 49 additions and 14 deletions.
12 changes: 7 additions & 5 deletions src/app/BaseChatbot/BaseChatbot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -28,7 +31,6 @@ const BaseChatbot: React.FunctionComponent = () => {
const [messages, setMessages] = React.useState<MessageProps[]>([]);
const [currentMessage, setCurrentMessage] = React.useState<string[]>([]);
const [currentSources, setCurrentSources] = React.useState<Source[]>();
const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(false);
const scrollToBottomRef = React.useRef<HTMLDivElement>(null);
const [error, setError] = React.useState<{ title: string; body: string }>();
const [announcement, setAnnouncement] = React.useState<string>();
Expand Down Expand Up @@ -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',
Expand All @@ -184,6 +186,7 @@ const BaseChatbot: React.FunctionComponent = () => {
setCurrentDate(undefined);
}
newMessages.push({
avatar: userAvatar,
id: getId(),
name: 'You',
role: 'user',
Expand All @@ -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);
};

Expand All @@ -218,7 +220,6 @@ const BaseChatbot: React.FunctionComponent = () => {
setCurrentSources(undefined);
setError(undefined);
setAnnouncement(undefined);
setIsSendButtonDisabled(false);
};

const handleStopButton = () => {
Expand Down Expand Up @@ -260,6 +261,7 @@ const BaseChatbot: React.FunctionComponent = () => {
))}
{currentMessage.length > 0 && (
<Message
avatar={botAvatar}
name={currentChatbot?.displayName}
key="currentMessage"
role="bot"
Expand All @@ -276,9 +278,9 @@ const BaseChatbot: React.FunctionComponent = () => {
onSendMessage={handleSend}
hasMicrophoneButton
hasAttachButton={false}
isSendButtonDisabled={isSendButtonDisabled}
hasStopButton={hasStopButton}
handleStopButton={handleStopButton}
alwayShowSendButton
/>
<ChatbotFootnote label="Verify all information from this tool. LLMs make mistakes." />
</ChatbotFooter>
Expand Down
11 changes: 6 additions & 5 deletions src/app/Compare/CompareChild.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,16 @@ 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;
}

interface CompareChildProps {
chatbot: CannedChatbot;
allChatbots: CannedChatbot[];
setIsSendButtonDisabled: (bool: boolean) => void;
controller?: AbortController;
setController: (controller: AbortController | undefined) => void;
input?: string;
Expand All @@ -35,7 +37,6 @@ interface CompareChildProps {
const CompareChild: React.FunctionComponent<CompareChildProps> = ({
chatbot,
allChatbots,
setIsSendButtonDisabled,
controller,
setController,
input,
Expand All @@ -57,12 +58,12 @@ const CompareChild: React.FunctionComponent<CompareChildProps> = ({
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',
Expand All @@ -76,6 +77,7 @@ const CompareChild: React.FunctionComponent<CompareChildProps> = ({
setCurrentSources(undefined);
}
newMessages.push({
avatar: userAvatar,
id: getId(),
name: 'You',
role: 'user',
Expand All @@ -94,7 +96,6 @@ const CompareChild: React.FunctionComponent<CompareChildProps> = ({
}
// 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 });
};
Expand Down Expand Up @@ -232,7 +233,6 @@ const CompareChild: React.FunctionComponent<CompareChildProps> = ({
setCurrentSources(undefined);
setError(undefined);
setAnnouncement(undefined);
setIsSendButtonDisabled(false);
setChatbot(value);
setSearchParams(_event, value.name, order);
updateStatus(order === 'first' ? 'child1' : 'child2', {
Expand Down Expand Up @@ -267,6 +267,7 @@ const CompareChild: React.FunctionComponent<CompareChildProps> = ({
))}
{currentMessage.length > 0 && (
<Message
avatar={botAvatar}
name={currentChatbot?.displayName}
key="currentMessage"
role="bot"
Expand Down
5 changes: 1 addition & 4 deletions src/app/Compare/CompareLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ export const CompareLayout: React.FunctionComponent = () => {
const { chatbots } = useLoaderData() as { chatbots: CannedChatbot[] };

// state
const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(false);
const [input, setInput] = React.useState<string>();
const [hasNewInput, setHasNewInput] = React.useState(false);
const [firstController, setFirstController] = React.useState<AbortController>();
Expand Down Expand Up @@ -147,7 +146,6 @@ export const CompareLayout: React.FunctionComponent = () => {
allChatbots={chatbots}
controller={firstController}
setController={setFirstController}
setIsSendButtonDisabled={setIsSendButtonDisabled}
input={input}
setChatbot={setFirstChatbot}
hasNewInput={hasNewInput}
Expand All @@ -161,7 +159,6 @@ export const CompareLayout: React.FunctionComponent = () => {
allChatbots={chatbots}
controller={secondController}
setController={setSecondController}
setIsSendButtonDisabled={setIsSendButtonDisabled}
input={input}
setChatbot={setSecondChatbot}
hasNewInput={hasNewInput}
Expand All @@ -175,9 +172,9 @@ export const CompareLayout: React.FunctionComponent = () => {
onSendMessage={handleSend}
hasMicrophoneButton
hasAttachButton={false}
isSendButtonDisabled={isSendButtonDisabled}
hasStopButton={hasStopButton}
handleStopButton={handleStopButton}
alwayShowSendButton
/>
<ChatbotFootnote label="Verify all information from this tool. LLMs make mistakes." />
</ChatbotFooter>
Expand Down
6 changes: 6 additions & 0 deletions src/app/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
11 changes: 11 additions & 0 deletions src/app/bgimages/RHCAI-studio-avatar.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions src/app/bgimages/avatarImg.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit a9610da

Please sign in to comment.