add copyable code blocks to Copilot Search response (#56126)

Author: Ebonsignori

data/ui.yml

@@ -61,6 +61,9 @@ search:
       query_too_large: Sorry, your question is too long. Please try shortening it and asking again.
       asked_too_many_times: Sorry, you've asked too many questions in a short time period. Please wait a few minutes and try again.
       invalid_query: Sorry, I'm unable to answer that question. Please try asking a different question.
+    response:
+      copy_code: Copy code to clipboard
+      copied_code: Copied!
   failure:
     general_title: There was an error loading search results.
     ai_title: There was an error loading Copilot.

src/fixtures/fixtures/data/ui.yml

@@ -61,6 +61,9 @@ search:
       query_too_large: Sorry, your question is too long. Please try shortening it and asking again.
       asked_too_many_times: Sorry, you've asked too many questions in a short time period. Please wait a few minutes and try again.
       invalid_query: Sorry, I'm unable to answer that question. Please try asking a different question.
+    response:
+      copy_code: Copy code to clipboard
+      copied_code: Copied!
   failure:
     general_title: There was an error loading search results.
     ai_title: There was an error loading Copilot.

src/frame/components/ui/MarkdownContent/UnrenderedMarkdownContent.tsx

@@ -1,35 +1,91 @@
+import React from 'react'
 import ReactMarkdown from 'react-markdown'
 import type { Components } from 'react-markdown'
-import cx from 'classnames'
 import remarkGfm from 'remark-gfm'
+import cx from 'classnames'
+import { IconButton } from '@primer/react'
+import { CopyIcon, CheckIcon } from '@primer/octicons-react'
+import { announce } from '@primer/live-region-element'
+
+import { useTranslation } from '@/languages/components/useTranslation'
+import useCopyClipboard from '@/rest/components/useClipboard'
+import { EventType } from '@/events/types'
+import { sendEvent } from '@/events/components/events'
 
 export type MarkdownContentPropsT = {
   children: string
   className?: string
   openLinksInNewTab?: boolean
   includeQueryParams?: boolean
+  codeBlocksCopyable?: boolean
   eventGroupKey?: string
   eventGroupId?: string
   as?: keyof JSX.IntrinsicElements
   tabIndex?: number
 }
 
-// For content that comes in a Markdown string
-// e.g. a GPT Response
-
 export const UnrenderedMarkdownContent = ({
   children,
   className,
   openLinksInNewTab = true,
   includeQueryParams = true,
+  codeBlocksCopyable = true,
   eventGroupKey = '',
   eventGroupId = '',
   ...restProps
 }: MarkdownContentPropsT) => {
+  const { t } = useTranslation('search')
   // Overrides for ReactMarkdown components
   const components = {} as Components
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  components.a = ({ node, ...props }) => {
+  if (codeBlocksCopyable) {
+    // Override the default code block to make multiline code blocks copyable
+    components.code = ({ ...props }) => {
+      // get the literal text of the code block
+      let text = String(props.children)
+      // If the codeblock is not multiline, return inline code block without copy functionality
+      if (!text.includes('\n')) {
+        return <code {...props}>{props.children}</code>
+      } else {
+        // Otherwise it's multiline and we want to make it copyable
+        text = text.replace(/\n$/, '')
+      }
+
+      const [isCopied, copyToClipboard] = useCopyClipboard(text, {
+        successDuration: 2000,
+      })
+
+      return (
+        <div>
+          <IconButton
+            size="small"
+            icon={isCopied ? CheckIcon : CopyIcon}
+            className="btn-octicon"
+            aria-label={t('search.ai.response.copy_code')}
+            onClick={async () => {
+              await copyToClipboard()
+              announce(t('search.ai.response.copied_code'))
+              sendEvent({
+                type: EventType.clipboard,
+                clipboard_operation: 'copy',
+                eventGroupKey: eventGroupKey,
+                eventGroupId: eventGroupId,
+              })
+            }}
+            sx={{
+              position: 'absolute',
+              right: '1.3rem',
+              marginTop: '-.7rem',
+              zIndex: 1,
+            }}
+          ></IconButton>
+          <code {...props}>{props.children}</code>
+        </div>
+      )
+    }
+  }
+
+  // Override the default anchor tag to open links in a new tab and include specific query parameters
+  components.a = ({ ...props }) => {
     let href = props.href || ''
     let existingAnchorParams = ''
     // When we want to include specific query parameters in the URL