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

[Odie] Wapuu scroll rework #93145

Merged
merged 5 commits into from
Aug 2, 2024
Merged

[Odie] Wapuu scroll rework #93145

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
39e76b0
Initial commit where I attempt to improve the readability of the code…
AllTerrainDeveloper Jul 30, 2024
2e12b8e
Improvements and fixes, near completeion, missing some edge async cas…
AllTerrainDeveloper Jul 31, 2024
af0f31f
Near completion, missing deep testing
AllTerrainDeveloper Jul 31, 2024
4a15963
Polish heights and hidden elements
AllTerrainDeveloper Aug 1, 2024
81ffaac
Better extra contact option flows
AllTerrainDeveloper Aug 1, 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
Next Next commit
Initial commit where I attempt to improve the readability of the code… 
… as well as refactoring and keep improving scrolling
  • Loading branch information
@AllTerrainDeveloper
AllTerrainDeveloper committed Aug 2, 2024
commit 39e76b0ef70f7c321a1464e0a8fa6cdc98f6c4d9
32 changes: 32 additions & 0 deletions packages/odie-client/src/components/message/dislike-feedback-message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { useI18n } from '@wordpress/react-i18n';
import Markdown from 'react-markdown';
import { useOdieAssistantContext } from '../../context';
import CustomALink from './custom-a-link';
import { uriTransformer } from './uri-transformer';

export const DislikeFeedbackMessage = () => {
const { extraContactOptions } = useOdieAssistantContext();
const { _x } = useI18n();
return (
<>
<Markdown
urlTransform={ uriTransformer }
components={ {
a: CustomALink,
} }
>
{
/* translators: Message displayed when the user dislikes a message from the bot */
_x(
'I’m sorry my last response didn’t meet your expectations! Here’s some other ways to get more in-depth help:',
'Message displayed when the user dislikes a message from the bot',
__i18n_text_domain__
)
}
</Markdown>
{ extraContactOptions }
</>
);
};

export default DislikeFeedbackMessage;
19 changes: 19 additions & 0 deletions packages/odie-client/src/components/message/error-message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import Markdown from 'react-markdown';
import { useOdieAssistantContext } from '../../context';
import CustomALink from './custom-a-link';
import { uriTransformer } from './uri-transformer';
import type { Message } from '../../types/';

export const ErrorMessage = ( { message }: { message: Message } ) => {
const { extraContactOptions } = useOdieAssistantContext();
return (
<>
<Markdown urlTransform={ uriTransformer } components={ { a: CustomALink } }>
{ message.content }
</Markdown>
{ extraContactOptions }
</>
);
};

export default ErrorMessage;
222 changes: 25 additions & 197 deletions packages/odie-client/src/components/message/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,19 @@
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import { Gravatar } from '@automattic/components';
import { ExternalLink } from '@wordpress/components';
import { sprintf } from '@wordpress/i18n';
import { useI18n } from '@wordpress/react-i18n';
import clsx from 'clsx';
import { useRef, useState } from 'react';
import ReactDOM from 'react-dom';
import Markdown from 'react-markdown';
import MaximizeIcon from '../../assets/maximize-icon.svg';
import MinimizeIcon from '../../assets/minimize-icon.svg';
import WapuuAvatar from '../../assets/wapuu-squared-avatar.svg';
import WapuuThinking from '../../assets/wapuu-thinking.svg';
import { useOdieAssistantContext } from '../../context';
import { uuid } from '../../query';
import Button from '../button';
import FoldableCard from '../foldable';
import SupportDocLink from '../support-link';
import CustomALink from './custom-a-link';
import { uriTransformer } from './uri-transformer';
import WasThisHelpfulButtons from './was-this-helpful-buttons';
import { MessageContent } from './message-content';
import type { CurrentUser, Message } from '../../types/';

import './style.scss';
Expand All @@ -31,28 +26,9 @@ export type ChatMessageProps = {

const ChatMessage = ( { message, currentUser }: ChatMessageProps ) => {
const isUser = message.role === 'user';
const {
botName,
extraContactOptions,
addMessage,
trackEvent,
navigateToContactOptions,
navigateToSupportDocs,
} = useOdieAssistantContext();
const { botName, addMessage } = useOdieAssistantContext();
const [ isFullscreen, setIsFullscreen ] = useState( false );
const { __, _x } = useI18n();

const hasSources = message?.context?.sources && message.context?.sources.length > 0;
const hasFeedback = !! message?.rating_value;

const isPositiveFeedback =
hasFeedback && message && message.rating_value && +message.rating_value === 1;

// dedupe sources based on url
let sources = message?.context?.sources ?? [];
if ( sources.length > 0 ) {
sources = [ ...new Map( sources.map( ( source ) => [ source.url, source ] ) ).values() ];
}
const { _x } = useI18n();

const isRequestingHumanSupport = message.context?.flags?.forward_to_human_support;
const fullscreenRef = useRef< HTMLDivElement >( null );
Expand All @@ -65,11 +41,6 @@ const ChatMessage = ( { message, currentUser }: ChatMessageProps ) => {
event.stopPropagation();
};

const messageClasses = clsx(
'odie-chatbox-message',
isUser ? 'odie-chatbox-message-user' : 'odie-chatbox-message-wapuu'
);

const handleFullscreenToggle = () => {
setIsFullscreen( ! isFullscreen );
};
Expand Down Expand Up @@ -151,191 +122,48 @@ const ChatMessage = ( { message, currentUser }: ChatMessageProps ) => {
}
setTimeout( () => {
addMessage( {
internal_message_id: uuid(),
content: '...',
role: 'bot',
type: 'dislike-feedback',
} );
}, 1200 );
};

const messageContent = (
<div className="odie-chatbox-message-sources-container" ref={ fullscreenRef }>
<div className={ messageClasses }>
{ messageHeader }
{ message.type === 'error' && (
<>
<Markdown
urlTransform={ uriTransformer }
components={ {
a: CustomALink,
} }
>
{ message.content }
</Markdown>
{ extraContactOptions }
</>
) }
{ ( message.type === 'message' || ! message.type ) && (
<>
<Markdown
urlTransform={ uriTransformer }
components={ {
a: CustomALink,
} }
>
{ message.content }
</Markdown>
{ ! hasFeedback && ! isUser && (
<WasThisHelpfulButtons message={ message } onDislike={ onDislike } />
) }
{ hasFeedback && ! isPositiveFeedback && extraContactOptions }
{ ! isUser && (
<>
{ ( ! hasFeedback || ( hasFeedback && ! isPositiveFeedback ) ) && (
<div className="disclaimer">
{ __( 'Feeling stuck?', __i18n_text_domain__ ) }{ ' ' }
<button
onClick={ () => {
trackEvent( 'chat_message_direct_escalation_link_click', {
message_id: message.message_id,
} );
if ( navigateToContactOptions ) {
navigateToContactOptions();
}
} }
className="odie-button-link"
>
{ __( 'Contact our support team.', __i18n_text_domain__ ) }
</button>
</div>
) }
<div className="disclaimer">
{ __(
"Generated by WordPress.com's Support AI. AI-generated responses may contain inaccurate information.",
__i18n_text_domain__
) }
<ExternalLink href="https://automattic.com/ai-guidelines">
{ ' ' }
{ __( 'Learn more.', __i18n_text_domain__ ) }
</ExternalLink>
</div>
</>
) }
</>
) }
{ message.type === 'introduction' && (
<div className="odie-introduction-message-content">
<div className="odie-chatbox-introduction-message">
<Markdown
urlTransform={ uriTransformer }
components={ {
a: CustomALink,
} }
>
{ message.content }
</Markdown>
</div>
</div>
) }
{ message.type === 'dislike-feedback' && (
<>
<Markdown
urlTransform={ uriTransformer }
components={ {
a: CustomALink,
} }
>
{
/* translators: Message displayed when the user dislikes a message from the bot */
_x(
'I’m sorry my last response didn’t meet your expectations! Here’s some other ways to get more in-depth help:',
'Message displayed when the user dislikes a message from the bot',
__i18n_text_domain__
)
}
</Markdown>
{ extraContactOptions }
</>
) }
{ isRequestingHumanSupport && extraContactOptions }
</div>
{ hasSources && (
<FoldableCard
className="odie-sources-foldable-card"
clickableHeader
header={
/* translators: Below this text are links to sources for the current message received from the bot. */
_x(
'Related Guides',
'Below this text are links to sources for the current message received from the bot.',
__i18n_text_domain__
)
}
onClose={ () =>
trackEvent( 'chat_message_action_sources', {
action: 'close',
message_id: message.message_id,
} )
}
onOpen={ () =>
trackEvent( 'chat_message_action_sources', {
action: 'open',
message_id: message.message_id,
} )
}
screenReaderText="More"
>
<div className="odie-chatbox-message-sources">
{ sources.length > 0 &&
sources.map( ( source, index ) =>
navigateToSupportDocs ? (
<SupportDocLink
key={ index }
link={ source.url }
onLinkClickHandler={ () => {
trackEvent( 'chat_message_action_click', {
action: 'link',
in_chat_view: true,
href: source.url,
} );
navigateToSupportDocs(
String( source.blog_id ),
String( source.post_id ),
source.url,
source.title
);
} }
title={ source.title }
/>
) : (
<CustomALink key={ index } href={ source.url } inline={ false }>
{ source?.title }
</CustomALink>
)
) }
</div>
</FoldableCard>
) }
</div>
);

const fullscreenContent = (
<div className="odie-fullscreen" onClick={ handleBackdropClick }>
<div className="odie-fullscreen-backdrop" onClick={ handleContentClick }>
{ messageContent }
<MessageContent
message={ message }
messageHeader={ messageHeader }
onDislike={ onDislike }
ref={ fullscreenRef }
/>
</div>
</div>
);

if ( isFullscreen ) {
return (
<>
{ messageContent }
<MessageContent
message={ message }
messageHeader={ messageHeader }
onDislike={ onDislike }
ref={ fullscreenRef }
/>
{ ReactDOM.createPortal( fullscreenContent, document.body ) }
</>
);
}
return messageContent;
return (
<MessageContent
message={ message }
messageHeader={ messageHeader }
onDislike={ onDislike }
ref={ fullscreenRef }
/>
);
};

export default ChatMessage;
57 changes: 57 additions & 0 deletions packages/odie-client/src/components/message/message-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import clsx from 'clsx';
import { ForwardedRef, forwardRef } from 'react';
import Markdown from 'react-markdown';
import { useOdieAssistantContext } from '../../context';
import { Message } from '../../types/';
import CustomALink from './custom-a-link';
import DislikeFeedbackMessage from './dislike-feedback-message';
import ErrorMessage from './error-message';
import Sources from './sources';
import { uriTransformer } from './uri-transformer';
import { UserMessage } from './user-message';

export const MessageContent = forwardRef<
HTMLDivElement,
{
message: Message;
messageHeader: React.ReactNode;
onDislike: () => void;
}
>( ( { message, messageHeader, onDislike }, ref: ForwardedRef< HTMLDivElement > ) => {
const { extraContactOptions } = useOdieAssistantContext();
const isRequestingHumanSupport = message.context?.flags?.forward_to_human_support;
const isUser = message.role === 'user';
const messageClasses = clsx(
'odie-chatbox-message',
isUser ? 'odie-chatbox-message-user' : 'odie-chatbox-message-wapuu'
);

return (
<div className="odie-chatbox-message-sources-container" ref={ ref }>
<div className={ messageClasses }>
{ messageHeader }
{ message.type === 'error' && <ErrorMessage message={ message } /> }
{ ( message.type === 'message' || ! message.type ) && (
<UserMessage message={ message } onDislike={ onDislike } />
) }
{ message.type === 'introduction' && (
<div className="odie-introduction-message-content">
<div className="odie-chatbox-introduction-message">
<Markdown
urlTransform={ uriTransformer }
components={ {
a: CustomALink,
} }
>
{ message.content }
</Markdown>
</div>
</div>
) }
{ message.type === 'dislike-feedback' && <DislikeFeedbackMessage /> }
{ isRequestingHumanSupport && extraContactOptions }
</div>
<Sources message={ message } />
</div>
);
} );
Loading