Skip to content

[2.x] Disable the copy button in insecure contexts #1271

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

Open
wants to merge 11 commits into
base: 2.x
Choose a base branch
from
Open

[2.x] Disable the copy button in insecure contexts #1271

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
42398d4
Disable the copy button in insecure contexts
keerthi-swarna Mar 10, 2025
c932201
Publish 2.30.0
dlqqq Mar 14, 2025
b1691fd
Backport PR #1264 on branch 2.x (Allow embedding model fields, fix co…
meeseeksmachine Mar 20, 2025
a942271
Backport PR #1280: Ensure magics package version is consistent in fut…
meeseeksmachine Mar 20, 2025
edad98a
Publish 2.31.0
dlqqq Mar 20, 2025
7a59043
Backport PR #1287: Remove error log emitted when FAISS file is absent…
meeseeksmachine Mar 24, 2025
bcffd2c
Backport PR #1288: Added help text fields for embedding providers in …
meeseeksmachine Mar 25, 2025
f67b895
Backport PR #1294: Migrate old config schemas, fix v2.31.0 regression…
meeseeksmachine Mar 26, 2025
7534167
Publish 2.31.1
dlqqq Mar 26, 2025
8aeb669
Backport PR #1298: Updating embeddings config fields from prespecifie…
meeseeksmachine Apr 2, 2025
b5dbb13
Refactored code to utilise copyStatusparameter
keerthi-swarna Apr 3, 2025
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
8 changes: 6 additions & 2 deletions packages/jupyter-ai/src/components/chat-messages/chat-message-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ type ChatMessageMenuProps = {

export function ChatMessageMenu(props: ChatMessageMenuProps): JSX.Element {
const menuButtonRef = useRef<HTMLButtonElement | null>(null);
const { copy, copyLabel } = useCopy({
const { copy, copyLabel, isCopyDisabled } = useCopy({
labelOverrides: { [CopyStatus.None]: 'Copy response' }
});
const { replace, replaceLabel } = useReplace();
Expand Down Expand Up @@ -64,7 +64,11 @@ export function ChatMessageMenu(props: ChatMessageMenuProps): JSX.Element {
onClose={() => setMenuOpen(false)}
anchorEl={anchorEl}
>
<MenuItem onClick={() => copy(props.message.body)} sx={menuItemSx}>
<MenuItem
disabled={isCopyDisabled}
onClick={() => copy(props.message.body)}
sx={menuItemSx}
>
<copyIcon.react />
{copyLabel}
</MenuItem>
Expand Down
3 changes: 2 additions & 1 deletion packages/jupyter-ai/src/components/code-blocks/code-toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,10 +173,11 @@ function ReplaceButton(props: ToolbarButtonProps) {

export function CopyButton(props: ToolbarButtonProps): JSX.Element {
const telemetryHandler = useTelemetry();
const { copy, copyLabel } = useCopy();
const { copy, copyLabel, isCopyDisabled } = useCopy();

return (
<TooltippedIconButton
disabled={isCopyDisabled}
tooltip={copyLabel}
placement="top"
onClick={() => {
Expand Down
20 changes: 17 additions & 3 deletions packages/jupyter-ai/src/hooks/use-copy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import { useState, useRef, useCallback } from 'react';
export enum CopyStatus {
None,
Copying,
Copied
Copied,
Disabled
}

export type UseCopyProps = {
Expand All @@ -29,6 +30,14 @@ export type UseCopyReturn = {
* the `useCopy()` hook.
*/
copyLabel: string;
/**
* Boolean flag that indicates whether the copy functionality is disabled or not.
* This helps to disable the copy action button. The value is based on the presence
* of `navigator.clipboard`. If `navigator.clipboard` is unavailable, the copy
* functionality is considered disabled, and the `copyStatus` will be set to
* either `CopyStatus.None` or `CopyStatus.Disabled`.
*/
isCopyDisabled: boolean;
Copy link
Member

Choose a reason for hiding this comment

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

I don't think adding isCopyDisabled is necessary here, since consumers can already check if the status is disabled by using this condition:

disabled={copyStatus === CopyStatus.Disabled}

Generally, we should avoid having 2 sources of truth for the same thing, since a future change might accidentally cause the two to differ.

/**
* Function that takes a string and copies it to the clipboard.
*/
Expand All @@ -38,15 +47,19 @@ export type UseCopyReturn = {
const DEFAULT_LABELS_BY_COPY_STATUS: Record<CopyStatus, string> = {
[CopyStatus.None]: 'Copy to clipboard',
[CopyStatus.Copying]: 'Copying…',
[CopyStatus.Copied]: 'Copied!'
[CopyStatus.Copied]: 'Copied!',
[CopyStatus.Disabled]: 'Copy to clipboard disabled in insecure context'
Copy link
Member

@dlqqq dlqqq Mar 12, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

We should provide more helpful information to users in the tooltip, since many users will not know what an insecure context is.

Suggested change
[CopyStatus.Disabled]: 'Copy to clipboard disabled in insecure context'
[CopyStatus.Disabled]: 'The clipboard is disabled by your browser because you are accessing this page outside of a secure context. To enable the clipboard, you must access this page through a HTTPS connection.'

You may have to adjust the CSS set by the sx prop in MUI React Elements to get this to render in a readable way.

};

/**
* Hook that provides a function to copy a string to a clipboard and manages
* related UI state. Should be used by any button that intends to copy text.
*/
export function useCopy(props?: UseCopyProps): UseCopyReturn {
const [copyStatus, setCopyStatus] = useState<CopyStatus>(CopyStatus.None);
const isCopyDisabled = navigator.clipboard === undefined;
const [copyStatus, setCopyStatus] = useState<CopyStatus>(
isCopyDisabled ? CopyStatus.Disabled : CopyStatus.None
);
const timeoutId = useRef<number | null>(null);

const copy = useCallback(
Expand Down Expand Up @@ -84,6 +97,7 @@ export function useCopy(props?: UseCopyProps): UseCopyReturn {
return {
copyStatus,
copyLabel,
isCopyDisabled,
copy
};
}
Loading