Disable the copy button in insecure contexts

Author: keerthi-swarna

packages/jupyter-ai/src/components/chat-messages/chat-message-menu.tsx

@@ -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();
@@ -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>

packages/jupyter-ai/src/components/code-blocks/code-toolbar.tsx

@@ -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={() => {

packages/jupyter-ai/src/hooks/use-copy.ts

@@ -3,7 +3,8 @@ import { useState, useRef, useCallback } from 'react';
 export enum CopyStatus {
   None,
   Copying,
-  Copied
+  Copied,
+  Disabled
 }
 
 export type UseCopyProps = {
@@ -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;
   /**
    * Function that takes a string and copies it to the clipboard.
    */
@@ -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'
 };
 
 /**
  * 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(
@@ -84,6 +97,7 @@ export function useCopy(props?: UseCopyProps): UseCopyReturn {
   return {
     copyStatus,
     copyLabel,
+    isCopyDisabled,
     copy
   };
 }