Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Help Center: Display message inside input field until its sent #97158

Draft
wants to merge 6 commits into
base: trunk
Choose a base branch
from
+34 −8
Draft

Help Center: Display message inside input field until its sent #97158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
831f9d7
Enhance chat message input styling with spinner margin adjustment
agrullon95 Dec 5, 2024
4c908b4
Rename chat message input container class for attachment button visib…
agrullon95 Dec 5, 2024
4af6237
Add attachmentButtonRef prop to AttachmentButton for improved ref han…
agrullon95 Dec 5, 2024
bc9e3b8
Add attachmentButtonRef to OdieSendMessageButton for improved attachm…
agrullon95 Dec 5, 2024
1f5bddf
Merge branch 'trunk' into update/disappearing-sent-message
agrullon95 Dec 6, 2024
7ec9c97
Clear message input field based on chat provider after sending
agrullon95 Dec 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions packages/help-center/src/components/help-center-chat.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,13 @@
max-width: 100%;
}

&.odie-chat-message-input-container__attachment-button-visible {
.odie-send-message-input-spinner {
/* stylelint-disable-next-line length-zero-no-unit */
margin: 0px 61px 0px 0px;
}
}

.odie-send-message-input {
&:disabled {
-webkit-text-fill-color: var(--color-neutral-20);
Expand Down
8 changes: 6 additions & 2 deletions packages/odie-client/src/components/send-message-input/attachment-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@ const getPlaceholderAttachmentMessage = ( file: File ) => {
} );
};

export const AttachmentButton: React.FC = () => {
export const AttachmentButton: React.FC< {
attachmentButtonRef?: React.RefObject< HTMLElement >;
} > = ( { attachmentButtonRef } ) => {
const { chat, addMessage, trackEvent } = useOdieAssistantContext();
const { data: authData } = useAuthenticateZendeskMessaging( true, 'messenger' );
const { isPending: isAttachingFile, mutateAsync: attachFileToConversation } =
Expand Down Expand Up @@ -83,7 +85,9 @@ export const AttachmentButton: React.FC = () => {
return (
<FormFileUpload accept="image/*" onChange={ onFileUpload } disabled={ isAttachingFile }>
{ isAttachingFile && <Spinner style={ { margin: 0 } } /> }
{ ! isAttachingFile && <Icon icon={ image } /> }
{ ! isAttachingFile && (
<Icon ref={ attachmentButtonRef as React.RefObject< HTMLElement > } icon={ image } />
) }
</FormFileUpload>
);
};
27 changes: 21 additions & 6 deletions packages/odie-client/src/components/send-message-input/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import './style.scss';
export const OdieSendMessageButton = () => {
const divContainerRef = useRef< HTMLDivElement >( null );
const inputRef = useRef< HTMLTextAreaElement >( null );
const attachmentButtonRef = useRef< HTMLElement >( null );
const { trackEvent, chat, shouldUseHelpCenterExperience } = useOdieAssistantContext();
const sendMessage = useSendChatMessage();
const isChatBusy = chat.status === 'loading' || chat.status === 'sending';
Expand Down Expand Up @@ -42,7 +43,10 @@ export const OdieSendMessageButton = () => {
return;
}
const messageString = inputRef.current?.value;
inputRef.current!.value = '';
// Immediately remove the message from the input field
if ( chat?.provider === 'odie' ) {
inputRef.current!.value = '';
}

try {
trackEvent( 'chat_message_action_send' );
Expand All @@ -56,6 +60,10 @@ export const OdieSendMessageButton = () => {
setSubmitDisabled( true );

await sendMessage( message );
// Removes the message from the input field after it has been sent
if ( chat?.provider === 'zendesk' ) {
inputRef.current!.value = '';
}

trackEvent( 'chat_message_action_receive' );
} catch ( e ) {
Expand All @@ -66,9 +74,14 @@ export const OdieSendMessageButton = () => {
} finally {
setSubmitDisabled( false );
}
}, [ sendMessage, isChatBusy, shouldUseHelpCenterExperience, trackEvent ] );
}, [ isChatBusy, shouldUseHelpCenterExperience, chat?.provider, trackEvent, sendMessage ] );

const inputContainerClasses = clsx(
'odie-chat-message-input-container',
attachmentButtonRef?.current && 'odie-chat-message-input-container__attachment-button-visible'
);

const classes = clsx(
const buttonClasses = clsx(
'odie-send-message-inner-button',
shouldUseHelpCenterExperience && 'odie-send-message-inner-button__flag'
);
Expand All @@ -79,7 +92,7 @@ export const OdieSendMessageButton = () => {
{ __( 'Message exceeds 4096 characters limit.' ) }
</div>
) }
<div className="odie-chat-message-input-container" ref={ divContainerRef }>
<div className={ inputContainerClasses } ref={ divContainerRef }>
<form
onSubmit={ ( event ) => {
event.preventDefault();
Expand All @@ -96,8 +109,10 @@ export const OdieSendMessageButton = () => {
keyUpHandle={ onKeyUp }
/>
{ isChatBusy && <Spinner className="odie-send-message-input-spinner" /> }
{ shouldUseHelpCenterExperience && <AttachmentButton /> }
<button type="submit" className={ classes } disabled={ submitDisabled }>
{ shouldUseHelpCenterExperience && (
<AttachmentButton attachmentButtonRef={ attachmentButtonRef } />
) }
<button type="submit" className={ buttonClasses } disabled={ submitDisabled }>
{ shouldUseHelpCenterExperience ? (
<SendMessageIcon />
) : (
Expand Down
Loading