add copy button (#206)

Author: ewilliams-cloudera

ui/src/pages/RagChatTab/ChatOutput/ChatMessages/ChatMessageBody.tsx

@@ -46,6 +46,7 @@ import Markdown from "react-markdown";
 import Remark from "remark-gfm";
 import { Evaluations } from "pages/RagChatTab/ChatOutput/ChatMessages/Evaluations.tsx";
 import RatingFeedbackWrapper from "pages/RagChatTab/ChatOutput/ChatMessages/RatingFeedbackWrapper.tsx";
+import CopyButton from "pages/RagChatTab/ChatOutput/ChatMessages/CopyButton.tsx";
 
 export const ChatMessageBody = ({ data }: { data: ChatMessageType }) => {
   return (
@@ -96,6 +97,7 @@ export const ChatMessageBody = ({ data }: { data: ChatMessageType }) => {
                 </Markdown>
               </Typography.Text>
               <Flex gap={16} align="center">
+                <CopyButton message={data} />
                 <Evaluations evaluations={data.evaluations} />
                 <RatingFeedbackWrapper responseId={data.id} />
               </Flex>

ui/src/pages/RagChatTab/ChatOutput/ChatMessages/CopyButton.tsx

@@ -0,0 +1,61 @@
+/*
+ * CLOUDERA APPLIED MACHINE LEARNING PROTOTYPE (AMP)
+ * (C) Cloudera, Inc. 2025
+ * All rights reserved.
+ *
+ * Applicable Open Source License: Apache 2.0
+ *
+ * NOTE: Cloudera open source products are modular software products
+ * made up of hundreds of individual components, each of which was
+ * individually copyrighted.  Each Cloudera open source product is a
+ * collective work under U.S. Copyright Law. Your license to use the
+ * collective work is as provided in your written agreement with
+ * Cloudera.  Used apart from the collective work, this file is
+ * licensed for your use pursuant to the open source license
+ * identified above.
+ *
+ * This code is provided to you pursuant a written agreement with
+ * (i) Cloudera, Inc. or (ii) a third-party authorized to distribute
+ * this code. If you do not have a written agreement with Cloudera nor
+ * with an authorized and properly licensed third party, you do not
+ * have any rights to access nor to use this code.
+ *
+ * Absent a written agreement with Cloudera, Inc. ("Cloudera") to the
+ * contrary, A) CLOUDERA PROVIDES THIS CODE TO YOU WITHOUT WARRANTIES OF ANY
+ * KIND; (B) CLOUDERA DISCLAIMS ANY AND ALL EXPRESS AND IMPLIED
+ * WARRANTIES WITH RESPECT TO THIS CODE, INCLUDING BUT NOT LIMITED TO
+ * IMPLIED WARRANTIES OF TITLE, NON-INFRINGEMENT, MERCHANTABILITY AND
+ * FITNESS FOR A PARTICULAR PURPOSE; (C) CLOUDERA IS NOT LIABLE TO YOU,
+ * AND WILL NOT DEFEND, INDEMNIFY, NOR HOLD YOU HARMLESS FOR ANY CLAIMS
+ * ARISING FROM OR RELATED TO THE CODE; AND (D)WITH RESPECT TO YOUR EXERCISE
+ * OF ANY RIGHTS GRANTED TO YOU FOR THE CODE, CLOUDERA IS NOT LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, PUNITIVE OR
+ * CONSEQUENTIAL DAMAGES INCLUDING, BUT NOT LIMITED TO, DAMAGES
+ * RELATED TO LOST REVENUE, LOST PROFITS, LOSS OF INCOME, LOSS OF
+ * BUSINESS ADVANTAGE OR UNAVAILABILITY, OR LOSS OR CORRUPTION OF
+ * DATA.
+ */
+
+import { ChatMessageType } from "src/api/chatApi.ts";
+import messageQueue from "src/utils/messageQueue.ts";
+import { Button, Tooltip } from "antd";
+import { CopyOutlined } from "@ant-design/icons";
+
+const CopyButton = ({ message }: { message: ChatMessageType }) => {
+  return (
+    <Tooltip title="Copy the assistant's response">
+      <Button
+        onClick={() => {
+          navigator.clipboard
+            .writeText(message.rag_message.assistant)
+            .catch(() => {
+              messageQueue.error("Failed to copy to clipboard");
+            });
+        }}
+        type="text"
+        icon={<CopyOutlined />}
+      />
+    </Tooltip>
+  );
+};
+export default CopyButton;