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.

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

Add copy to clipboard full response functionality in AssistantMessage… #6035

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,28 @@ import { LoadingDots } from '../../../components/LoadingDots'
import { BaseMessageCell, MESSAGE_CELL_AVATAR_SIZE } from '../BaseMessageCell'
import { ContextFocusActions } from './ContextFocusActions'

/**
* A small component that displays a copy icon.
*/
const CopyIcon: React.FC<{ className?: string }> = ({ className }) => (
<svg
role="img"
height={16}
width={16}
viewBox="0 0 16 16"
fill="currentColor"
className={className}
aria-label="Copy icon"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M4 4l1-1h5.414L14 6.586V14l-1 1H5l-1-1V4zm9 3l-3-3H5v10h8V7z"
/>
<path fillRule="evenodd" clipRule="evenodd" d="M3 1L2 2v10l1 1V2h6.414l-1-1H3z" />
</svg>
)

/**
* A component that displays a chat message from the assistant.
*/
Expand Down Expand Up @@ -139,11 +161,25 @@ export const AssistantMessageCell: FunctionComponent<{
)}
<div className="tw-flex tw-items-center tw-divide-x tw-transition tw-divide-muted tw-opacity-65 hover:tw-opacity-100">
{showFeedbackButtons && feedbackButtonsOnSubmit && (
Copy link
Collaborator

@PriNova PriNova Nov 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The CopyButton is only shown for the very last human message.
Leave it as it is if this behavior is intented.

If you want to show the copy button on every human message in the chat, refactor to that:

Suggested change
{showFeedbackButtons && feedbackButtonsOnSubmit && (
{showFeedbackButtons && feedbackButtonsOnSubmit && (
<div className="tw-flex tw-items-center">
<FeedbackButtons
feedbackButtonsOnSubmit={feedbackButtonsOnSubmit}
className="tw-pr-4"
/>
</div>
)}
<div className="tw-pl-4">
<button
type="button"
className="tw-flex tw-items-center tw-gap-2 tw-text-sm tw-text-muted-foreground hover:tw-text-foreground"
onClick={() => {
navigator.clipboard.writeText(message.text?.toString() || '')
copyButtonOnSubmit?.(message.text?.toString() || '')
}}
title="Copy message to clipboard"
>
<CopyIcon />
</button>
</div>
{!isLoading && (!message.error || isAborted) && (
<ContextFocusActions
humanMessage={humanMessage}
longResponseTime={hasLongerResponseTime}
className="tw-pl-5"
/>
)}

Copy link
Author

@cellamo cellamo Nov 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the detailed feedback and guidance! Trying my best to become a contributor to my favorite and most used tool.

<FeedbackButtons
feedbackButtonsOnSubmit={feedbackButtonsOnSubmit}
className="tw-pr-4"
/>
<div className="tw-flex tw-items-center">
<FeedbackButtons
feedbackButtonsOnSubmit={feedbackButtonsOnSubmit}
className="tw-pr-4"
/>
</div>
)}
<div className="tw-pl-4">
<button
type="button"
className="tw-flex tw-items-center tw-gap-2 tw-text-sm tw-text-muted-foreground hover:tw-text-foreground tw-mx-4"
onClick={() => {
navigator.clipboard.writeText(message.text?.toString() || '')
copyButtonOnSubmit?.(message.text?.toString() || '')
}}
>
<CopyIcon />
</button>
</div>
{!isLoading && (!message.error || isAborted) && (
<ContextFocusActions
humanMessage={humanMessage}
Expand Down
Loading