StanGirard/quivr
1
1
Fork 0
mirror of https://github.com/StanGirard/quivr.git synced 2024-12-29 14:25:20 +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 ReactMarkdown from "react-markdown";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@ -19,17 +20,26 @@ export const MessageRow = React.forwardRef(
ref: React.Ref<HTMLDivElement> ref: React.Ref<HTMLDivElement>
) => { ) => {
const isUserSpeaker = speaker === "user"; 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( const containerClasses = cn(
"py-3 px-5 w-fit ", "py-3 px-5 w-fit",
isUserSpeaker 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", : "bg-purple-100 bg-opacity-60 items-end",
"dark:bg-gray-800 rounded-3xl flex flex-col overflow-hidden scroll-pb-32" "dark:bg-gray-800 rounded-3xl flex flex-col overflow-hidden scroll-pb-32"
); );
const containerWrapperClasses = cn( const containerWrapperClasses = cn(
"flex flex-col", "flex flex-col",
isUserSpeaker ? "items-end" : "items-start" isUserSpeaker ? "items-end" : "items-start"
); );
@ -37,11 +47,21 @@ export const MessageRow = React.forwardRef(
return ( return (
<div className={containerWrapperClasses}> <div className={containerWrapperClasses}>
{" "}
<div ref={ref} className={containerClasses}> <div ref={ref} className={containerClasses}>
<div className="w-full gap-1 flex"> <div className="w-full gap-1 flex justify-between">
<QuestionBrain brainName={brainName} /> <div className="flex">
<QuestionPrompt promptName={promptName} /> <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>
<div data-testid="chat-message-text"> <div data-testid="chat-message-text">
<ReactMarkdown className={markdownClasses}>{text}</ReactMarkdown> <ReactMarkdown className={markdownClasses}>{text}</ReactMarkdown>