feat: Improve clipboard copy functionality

The clipboard copy functionality has been improved across several components, utilizing a centralized utility function to handle clipboard operations for enhanced consistency and reliability.
n4ze3m · Sep 19, 2024 · c24f6b7 · c24f6b7
1 parent 70d8e5f
commit c24f6b7
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 9 deletions.
diff --git a/app/ui/src/components/Bot/Integration/IntegrationForm.tsx b/app/ui/src/components/Bot/Integration/IntegrationForm.tsx
@@ -8,6 +8,7 @@ import axios from "axios";
 import { ClipboardIcon } from "@heroicons/react/24/outline";
 // import Switch from antd as AntdSwitch
 import { Switch as AntdSwitch } from "antd";
+import { clipbardCopy } from "../../../utils/clipboard";
 
 //@ts-ignore
 function classNames(...classes) {
@@ -163,8 +164,8 @@ export const IntegrationForm: React.FC<Props> = ({ onClose, data }) => {
                   <div className="flex-shrink-0 ml-3">
                     <button
                       type="button"
-                      onClick={() => {
-                        navigator.clipboard.writeText(
+                      onClick={async () => {
+                        await clipbardCopy(
                           `${hostUrl}/api/v1/bot/integration/${params.id}/whatsapp`
                         );
                         notification.success({

diff --git a/app/ui/src/components/Bot/Playground/Message.tsx b/app/ui/src/components/Bot/Playground/Message.tsx
@@ -11,6 +11,7 @@ import { removeUUID } from "../../../utils/filename";
 import { useSpeechSynthesis } from "../../../hooks/useSpeechSynthesis";
 import { useElevenLabsTTS } from "../../../hooks/useElevenLabsTTS";
 import { Collapse } from "antd";
+import { clipbardCopy } from "../../../utils/clipboard";
 
 type Props = Message & {
   onSourceClick(source: any): void;
@@ -98,8 +99,8 @@ export const PlaygroundMessage = (props: Props) => {
             <div className="flex space-x-2">
               {!props.hideCopy && (
                 <button
-                  onClick={() => {
-                    navigator.clipboard.writeText(props.message);
+                  onClick={async () => {
+                    await clipbardCopy(props.message);
                     setIsBtnPressed(true);
                     setTimeout(() => {
                       setIsBtnPressed(false);

diff --git a/app/ui/src/components/Common/CopyBtn.tsx b/app/ui/src/components/Common/CopyBtn.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { ClipboardIcon, CheckIcon } from "@heroicons/react/24/outline";
 import { clcx } from "../../utils/classname";
+import { clipbardCopy } from "../../utils/clipboard";
 
 type Props = {
   value: string;
@@ -19,7 +20,7 @@ export const CopyBtn: React.FC<Props> = ({
 
   const handleCopy = async () => {
     try {
-      await navigator.clipboard.writeText(value);
+      await clipbardCopy(value);
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
     } catch (err) {

diff --git a/app/ui/src/components/Common/Markdown.tsx b/app/ui/src/components/Common/Markdown.tsx
@@ -10,6 +10,7 @@ import React from "react";
 import { Modal, Tooltip } from "antd";
 import Mermaid from "./Mermaid";
 import { useMessage } from "../../hooks/useMessage";
+import { clipbardCopy } from "../../utils/clipboard";
 
 export default function Markdown({ message }: { message: string }) {
   const [isBtnPressed, setIsBtnPressed] = React.useState(false);
@@ -64,8 +65,8 @@ export default function Markdown({ message }: { message: string }) {
                     )}
                     <Tooltip title="Copy to clipboard">
                       <button
-                        onClick={() => {
-                          navigator.clipboard.writeText(children[0] as string);
+                        onClick={async () => {
+                          await clipbardCopy(children[0] as string);
                           setIsBtnPressed(true);
                         }}
                         className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-200 hover:bg-gray-700 hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-100"

diff --git a/app/ui/src/components/Common/Mermaid.tsx b/app/ui/src/components/Common/Mermaid.tsx
@@ -11,6 +11,7 @@ import {
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { nightOwl } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { useMessage } from "../../hooks/useMessage";
+import { clipbardCopy } from "../../utils/clipboard";
 mermaid.initialize({
   startOnLoad: true,
   flowchart: {
@@ -112,8 +113,8 @@ const Mermaid = React.memo((props: { code: string }) => {
 
           <Tooltip title="Copy to clipboard">
             <button
-              onClick={() => {
-                navigator.clipboard.writeText(props.code);
+              onClick={async () => {
+                await clipbardCopy(props.code);
                 setIsBtnCopied(true);
 
                 setTimeout(() => {

diff --git a/app/ui/src/utils/clipboard.ts b/app/ui/src/utils/clipboard.ts
@@ -0,0 +1,12 @@
+export const clipbardCopy = async (value: string) => {
+    if (navigator.clipboard) {
+        await navigator.clipboard.writeText(value);
+    } else {
+        const textArea = document.createElement("textarea");
+        textArea.value = value;
+        document.body.appendChild(textArea);
+        textArea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textArea);
+    }
+}