LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-30 09:03:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed edit and resend issue

Browse Source
This commit is contained in:
Niharika Goulikar
2024-11-17 10:29:29 +00:00
parent bed4939652
commit a44319d815
5 changed files with 157 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
frontend/src/conversation/ConversationBubble.tsx
View File

@@ -13,6 +13,7 @@ import Document from '../assets/document.svg';
import Like from '../assets/like.svg?react';
import Link from '../assets/link.svg';
import Sources from '../assets/sources.svg';
import Edit from '../assets/edit.svg';
import Avatar from '../components/Avatar';
import CopyButton from '../components/CopyButton';
import Sidebar from '../components/Sidebar';
@@ -36,36 +37,103 @@ const ConversationBubble = forwardRef<
handleFeedback?: (feedback: FEEDBACK) => void;
sources?: { title: string; text: string; source: string }[];
retryBtn?: React.ReactElement;
questionNumber?: number;
handleUpdatedQuestionSubmission?: (
updatedquestion?: string,
updated?: boolean,
index?: number,
) => void;
}
>(function ConversationBubble(
{ message, type, className, feedback, handleFeedback, sources, retryBtn },
{
message,
type,
className,
feedback,
handleFeedback,
sources,
retryBtn,
questionNumber,
handleUpdatedQuestionSubmission,
},
ref,
) {
const chunks = useSelector(selectChunks);
const selectedDocs = useSelector(selectSelectedDocs);
const [isLikeHovered, setIsLikeHovered] = useState(false);
const [isEditClicked, setIsEditClicked] = useState(false);
const [isDislikeHovered, setIsDislikeHovered] = useState(false);
const [isQuestionHovered, setIsQuestionHovered] = useState(false);
const [editInputBox, setEditInputBox] = useState<string>('');
const [isLikeClicked, setIsLikeClicked] = useState(false);
const [isDislikeClicked, setIsDislikeClicked] = useState(false);
const [activeTooltip, setActiveTooltip] = useState<number | null>(null);
const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
const handleEditClick = () => {
setIsEditClicked(false);
handleUpdatedQuestionSubmission?.(editInputBox, true, questionNumber);
};
let bubble;
if (type === 'QUESTION') {
bubble = (
<div
ref={ref}
className={`flex flex-row-reverse self-end flex-wrap ${className}`}
onMouseEnter={() => setIsQuestionHovered(true)}
onMouseLeave={() => setIsQuestionHovered(false)}
>
<Avatar className="mt-2 text-2xl" avatar="🧑‍💻"></Avatar>
<div
style={{
wordBreak: 'break-word',
}}
className="ml-10 mr-2 flex items-center rounded-[28px] bg-purple-30 py-[14px] px-[19px] text-white max-w-full whitespace-pre-wrap leading-normal"
ref={ref}
className={`flex flex-row-reverse self-end flex-wrap ${className}`}
>
{message}
<Avatar className="mt-2 text-2xl" avatar="🧑‍💻"></Avatar>
{!isEditClicked && (
<div
style={{
wordBreak: 'break-word',
}}
className="ml-2 mr-2 flex items-center rounded-[28px] bg-purple-30 py-[14px] px-[19px] text-white max-w-full whitespace-pre-wrap leading-normal"
>
{message}
</div>
)}
{isEditClicked && (
<input
onChange={(e) => setEditInputBox(e.target.value)}
value={editInputBox}
className="ml-2 mr-2 rounded-[28px] py-[14px] px-[19px] border-[1.5px] border-black"
/>
)}
<div
className={` flex items-center ${isQuestionHovered ? 'visible' : 'invisible'}`}
>
<img
src={Edit}
alt="Edit"
className="cursor-pointer"
onClick={() => {
setIsEditClicked(true);
setEditInputBox(message);
}}
/>
</div>
</div>
{isEditClicked && (
<div className={`flex gap-3 self-end mt-3 sm:mt-0 `}>
<button
className="ml-2 mr-2 flex items-center rounded-[28px] font-semibold hover:font-bold py-[14px] px-[19px] no-underline hover:underline text-purple-500 max-w-full whitespace-pre-wrap leading-normal"
onClick={() => setIsEditClicked(false)}
>
Cancel
</button>
<button
className="ml-2 mr-2 flex items-center rounded-[28px] bg-purple-300 hover:bg-purple-100 font-bold py-[8px] px-[19px] text-purple-500 max-w-full whitespace-pre-wrap leading-normal"
onClick={() => handleEditClick()}
>
Update
</button>
</div>
)}
</div>
);
} else {