From 9b7b8dc15b7bd99f0c4eb3cb6b019db1d8860163 Mon Sep 17 00:00:00 2001
From: Marcelo Jose <marcelojosedasilva@gmail.com>
Date: Tue, 6 Feb 2024 21:12:29 -0300
Subject: [PATCH] Included button to copy chat history item (#789)

### Motivation and Context

  1. Why is this change required?
      UX
  2. What problem does it solve?
      Improve user experience when need copy chat history item

### Description

If the current message is from a bot and if the message has a prompt, it
renders a Tooltip component with a Button inside it.
The Tooltip component is used to display a small pop-up box when the
user hovers over an element. The content of the Tooltip changes based on
the state of messagedCopied. If messagedCopied is true, the Tooltip
displays 'Copied', otherwise, it displays 'Copy text'.
Inside the Tooltip, there is a Button component. The icon of the Button
changes based on the messagedCopied state. If messagedCopied is true, it
shows a ClipboardTask20Regular icon, otherwise, it shows a
Clipboard20Regular icon.
The Button has an onClick event handler that triggers the copyOnClick
function when the button is clicked.

### Contribution Checklist

<!-- Before submitting this PR, please make sure: -->

- [ x ] The code builds clean without any errors or warnings
- [ x ] The PR follows the [Contribution
Guidelines](https://github.com/microsoft/chat-copilot/blob/main/CONTRIBUTING.md)
and the [pre-submission formatting
script](https://github.com/microsoft/chat-copilot/blob/main/CONTRIBUTING.md#development-scripts)
raises no violations
- [ x ] All unit tests pass, and I have added new tests where possible
- [ x ] I didn't break anyone :smile:


![copy_button](https://github.com/microsoft/chat-copilot/assets/6529846/98f64934-1a64-475e-9727-daf397c97004)

Co-authored-by: Marcelo Jose <msilva@veloe.com.br>
---
 .../chat/chat-history/ChatHistoryItem.tsx     | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/webapp/src/components/chat/chat-history/ChatHistoryItem.tsx b/webapp/src/components/chat/chat-history/ChatHistoryItem.tsx
index a809ac8ad..4061198f7 100644
--- a/webapp/src/components/chat/chat-history/ChatHistoryItem.tsx
+++ b/webapp/src/components/chat/chat-history/ChatHistoryItem.tsx
@@ -2,14 +2,23 @@
 
 import {
     AvatarProps,
+    Button,
     Persona,
     Text,
     ToggleButton,
+    Tooltip,
     makeStyles,
     mergeClasses,
     shorthands,
 } from '@fluentui/react-components';
-import { ChevronDown20Regular, ChevronUp20Regular, ThumbDislikeFilled, ThumbLikeFilled } from '@fluentui/react-icons';
+import {
+    ChevronDown20Regular,
+    ChevronUp20Regular,
+    Clipboard20Regular,
+    ClipboardTask20Regular,
+    ThumbDislikeFilled,
+    ThumbLikeFilled,
+} from '@fluentui/react-icons';
 import React, { useState } from 'react';
 import { useChat } from '../../../libs/hooks/useChat';
 import { AuthorRoles, ChatMessageType, IChatMessage, UserFeedback } from '../../../libs/models/ChatMessage';
@@ -116,6 +125,17 @@ export const ChatHistoryItem: React.FC<ChatHistoryItemProps> = ({ message, messa
         : chat.getChatUserById(message.userName, selectedId, conversations[selectedId].users);
     const fullName = user?.fullName ?? message.userName;
 
+    const [messagedCopied, setMessageCopied] = useState(false);
+
+    const copyOnClick = async () => {
+        await navigator.clipboard.writeText(message.content).then(() => {
+            setMessageCopied(true);
+            setTimeout(() => {
+                setMessageCopied(false);
+            }, 2000);
+        });
+    };
+
     const avatar: AvatarProps = isBot
         ? { image: { src: conversations[selectedId].botProfilePicture } }
         : isDefaultUser
@@ -168,6 +188,17 @@ export const ChatHistoryItem: React.FC<ChatHistoryItemProps> = ({ message, messa
                     {!isMe && <Text weight="semibold">{fullName}</Text>}
                     <Text className={classes.time}>{timestampToDateString(message.timestamp, true)}</Text>
                     {isBot && <PromptDialog message={message} />}
+                    {isBot && message.prompt && (
+                        <Tooltip content={messagedCopied ? 'Copied' : 'Copy text'} relationship="label">
+                            <Button
+                                icon={messagedCopied ? <ClipboardTask20Regular /> : <Clipboard20Regular />}
+                                appearance="transparent"
+                                onClick={() => {
+                                    void copyOnClick();
+                                }}
+                            />
+                        </Tooltip>
+                    )}
                 </div>
                 {content}
                 {showExtra && (