Skip to content

Commit

Permalink
fix(chat): hide copy button if message hasn't content (Issue #125) (#…
Browse files Browse the repository at this point in the history 
…2873)
  • Loading branch information
@Alexander-Kezik
Alexander-Kezik authored Dec 24, 2024
1 parent 04e8295 commit cea1900
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 77 deletions.
7 changes: 4 additions & 3 deletions apps/chat/src/components/Chat/ChatMessage/ChatMessage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export const ChatMessage: FC<Props> = memo(
onEdit,
messageIndex,
messagesLength,
...props
isLikesEnabled,
}) => {
const { t } = useTranslation(Translation.Chat);

Expand Down Expand Up @@ -130,7 +130,7 @@ export const ChatMessage: FC<Props> = memo(
message={message}
onRegenerate={onRegenerate}
withButtons
{...props}
isLikesEnabled={isLikesEnabled}
/>
) : (
<Menu
Expand Down Expand Up @@ -171,14 +171,15 @@ export const ChatMessage: FC<Props> = memo(
: 0),
);
}}
{...props}
isLikesEnabled={isLikesEnabled}
/>
}
>
<MessageMobileButtons
isMessageStreaming={!!conversation.isMessageStreaming}
isLastMessage={isLastMessage}
message={message}
isLikesEnabled={isLikesEnabled}
onCopy={handleCopy}
messageCopied={messageCopied}
editDisabled={editDisabled}
Expand Down
161 changes: 87 additions & 74 deletions apps/chat/src/components/Chat/ChatMessage/MessageButtons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export const MessageAssistantButtons = ({
</Button>
</Tooltip>
)}
{(message.content.trim() || !message.errorMessage) &&
{message.content.trim() &&
(messageCopied ? (
<Tooltip key="copied" placement="top" tooltip={t('Text copied')}>
<IconCheck size={18} className="text-secondary" />
Expand Down Expand Up @@ -249,6 +249,7 @@ interface MessageMobileButtonsProps {
isEditTemplatesAvailable: boolean;
onToggleTemplatesEditing: () => void;
isLastMessage: boolean;
isLikesEnabled: boolean;
isMessageStreaming: boolean;
onRegenerate?: () => void;
isConversationInvalid: boolean;
Expand All @@ -258,6 +259,7 @@ export const MessageMobileButtons = ({
messageCopied,
editDisabled,
message,
isLikesEnabled,
onLike,
onCopy,
onDelete,
Expand All @@ -279,27 +281,28 @@ export const MessageMobileButtons = ({
!(isMessageStreaming && isLastMessage) &&
!isConversationInvalid && (
<>
{messageCopied ? (
<MenuItem
item={
<div className="flex items-center gap-3">
<IconCheck size={20} className="text-secondary" />
<p>{t('Copied')}</p>
</div>
}
/>
) : (
<MenuItem
className="hover:bg-accent-primary-alpha"
item={
<div className="flex items-center gap-3">
<IconCopy className="text-secondary" size={18} />
{t('Copy')}
</div>
}
onClick={onCopy}
/>
)}
{message.content.trim() &&
(messageCopied ? (
<MenuItem
item={
<div className="flex items-center gap-3">
<IconCheck size={20} className="text-secondary" />
<p>{t('Copied')}</p>
</div>
}
/>
) : (
<MenuItem
className="hover:bg-accent-primary-alpha"
item={
<div className="flex items-center gap-3">
<IconCopy className="text-secondary" size={18} />
{t('Copy')}
</div>
}
onClick={onCopy}
/>
))}
{onRegenerate && (
<MenuItem
item={
Expand All @@ -312,62 +315,72 @@ export const MessageMobileButtons = ({
onClick={onRegenerate}
/>
)}
{message.like !== LikeState.Disliked && (
<MenuItem
className={classNames(
message.like !== LikeState.Liked &&
'hover:bg-accent-primary-alpha',
)}
item={
<div className="flex items-center gap-3">
<IconThumbUp className="text-secondary" size={18} />
<p
{isLikesEnabled &&
(!message.errorMessage ||
(message.content.trim() && message.errorMessage)) && (
<>
{message.like !== LikeState.Disliked && (
<MenuItem
className={classNames(
message.like === LikeState.Liked && 'text-secondary',
message.like !== LikeState.Liked &&
'hover:bg-accent-primary-alpha',
)}
>
{message.like === LikeState.Liked ? t('Liked') : t('Like')}
</p>
</div>
}
disabled={message.like === LikeState.Liked}
data-qa="like"
onClick={() => {
if (message.like !== LikeState.NoState) {
onLike(LikeState.Liked);
}
}}
/>
)}
{message.like !== LikeState.Liked && (
<MenuItem
disabled={message.like === LikeState.Disliked}
className={classNames(
message.like !== LikeState.Disliked &&
'hover:bg-accent-primary-alpha',
)}
data-qa="dislike"
item={
<div className="flex items-center gap-3">
<IconThumbDown className="text-secondary" size={18} />
<p
item={
<div className="flex items-center gap-3">
<IconThumbUp className="text-secondary" size={18} />
<p
className={classNames(
message.like === LikeState.Liked &&
'text-secondary',
)}
>
{message.like === LikeState.Liked
? t('Liked')
: t('Like')}
</p>
</div>
}
disabled={message.like === LikeState.Liked}
data-qa="like"
onClick={() => {
if (message.like !== LikeState.NoState) {
onLike(LikeState.Liked);
}
}}
/>
)}
{message.like !== LikeState.Liked && (
<MenuItem
disabled={message.like === LikeState.Disliked}
className={classNames(
message.like === LikeState.Disliked && 'text-secondary',
message.like !== LikeState.Disliked &&
'hover:bg-accent-primary-alpha',
)}
>
{message.like === LikeState.Disliked
? t('Disliked')
: t('Dislike')}
</p>
</div>
}
onClick={() => {
if (message.like !== LikeState.NoState) {
onLike(LikeState.Disliked);
}
}}
/>
)}
data-qa="dislike"
item={
<div className="flex items-center gap-3">
<IconThumbDown className="text-secondary" size={18} />
<p
className={classNames(
message.like === LikeState.Disliked &&
'text-secondary',
)}
>
{message.like === LikeState.Disliked
? t('Disliked')
: t('Dislike')}
</p>
</div>
}
onClick={() => {
if (message.like !== LikeState.NoState) {
onLike(LikeState.Disliked);
}
}}
/>
)}
</>
)}
</>
)
);
Expand Down

0 comments on commit cea1900

Please sign in to comment.