StanGirard/quivr
1
1
Fork 0
mirror of https://github.com/StanGirard/quivr.git synced 2024-09-11 13:15:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(chat): added copy feature to message (#1192)

Browse Source
This commit is contained in:
Stan Girard 2023-09-18 00:26:53 +02:00 committed by GitHub
parent d855bfbee8
commit 143d32ddf1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.tsx
View File

@ -1,4 +1,5 @@
import React from "react";
import React, { useState } from "react";
import { FaCheckCircle, FaCopy } from "react-icons/fa";
import ReactMarkdown from "react-markdown";
import { cn } from "@/lib/utils";
@ -19,17 +20,26 @@ export const MessageRow = React.forwardRef(
ref: React.Ref<HTMLDivElement>
) => {
const isUserSpeaker = speaker === "user";
const [isCopied, setIsCopied] = useState(false);
const handleCopy = () => {
navigator.clipboard.writeText(text).then(
() => setIsCopied(true),
(err) => console.error('Failed to copy!', err)
);
setTimeout(() => setIsCopied(false), 2000); // Reset after 2 seconds
};
const containerClasses = cn(
"py-3 px-5 w-fit ",
"py-3 px-5 w-fit",
isUserSpeaker
? "bg-gray-100 bg-opacity-60 items-start "
? "bg-gray-100 bg-opacity-60 items-start"
: "bg-purple-100 bg-opacity-60 items-end",
"dark:bg-gray-800 rounded-3xl flex flex-col overflow-hidden scroll-pb-32"
);
const containerWrapperClasses = cn(
"flex flex-col",
isUserSpeaker ? "items-end" : "items-start"
);
@ -37,11 +47,21 @@ export const MessageRow = React.forwardRef(
return (
<div className={containerWrapperClasses}>
{" "}
<div ref={ref} className={containerClasses}>
<div className="w-full gap-1 flex">
<QuestionBrain brainName={brainName} />
<QuestionPrompt promptName={promptName} />
<div className="w-full gap-1 flex justify-between">
<div className="flex">
<QuestionBrain brainName={brainName} />
<QuestionPrompt promptName={promptName} />
</div>
{!isUserSpeaker && (
<button
className="text-gray-500 hover:text-gray-700 transition"
onClick={handleCopy}
title={isCopied ? "Copied!" : "Copy to clipboard"}
>
{isCopied ? <FaCheckCircle /> : <FaCopy />}
</button>
)}
</div>
<div data-testid="chat-message-text">
<ReactMarkdown className={markdownClasses}>{text}</ReactMarkdown>