QuivrHQ/quivr
1
1
Fork 0
mirror of https://github.com/QuivrHQ/quivr.git synced 2024-09-11 14:36:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: track source button usage

Browse Source
This commit is contained in:
mamadoudicko 2023-12-04 12:30:07 +01:00
parent 8752da437c
commit 48cc6ef26c
1 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,8 @@
import { useEffect, useRef, useState } from 'react';
import ReactDOM from 'react-dom';
import { FaQuestionCircle } from 'react-icons/fa';
import { useEffect, useRef, useState } from "react";
import ReactDOM from "react-dom";
import { FaQuestionCircle } from "react-icons/fa";
import { useEventTracking } from "@/services/analytics/june/useEventTracking";
type SourcesButtonProps = {
sources: string;
@ -9,6 +11,7 @@ type SourcesButtonProps = {
export const SourcesButton = ({ sources }: SourcesButtonProps): JSX.Element => {
const [showSources, setShowSources] = useState(false);
const [popupPosition, setPopupPosition] = useState({ top: 0, left: 0 });
const { track } = useEventTracking();
// Specify the type of element the ref will be attached to
const buttonRef = useRef<HTMLButtonElement>(null);
@ -24,18 +27,20 @@ export const SourcesButton = ({ sources }: SourcesButtonProps): JSX.Element => {
};
useEffect(() => {
window.addEventListener('scroll', updatePopupPosition);
window.addEventListener("scroll", updatePopupPosition);
// Remove the event listener when the component is unmounted
return () => {
window.removeEventListener('scroll', updatePopupPosition);
window.removeEventListener("scroll", updatePopupPosition);
};
}, []);
const sourcesList = (
<ul className="list-disc list-inside">
{sources.split(', ').map((source, index) => (
<li key={index} className="truncate">{source.trim()}</li>
{sources.split(", ").map((source, index) => (
<li key={index} className="truncate">
{source.trim()}
</li>
))}
</ul>
);
@ -47,6 +52,7 @@ export const SourcesButton = ({ sources }: SourcesButtonProps): JSX.Element => {
onMouseEnter={() => {
setShowSources(true);
updatePopupPosition();
void track("SOURCE_CHECKED");
}}
onMouseLeave={() => setShowSources(false)}
className="text-gray-500 hover:text-gray-700 transition p-1"
@ -54,14 +60,20 @@ export const SourcesButton = ({ sources }: SourcesButtonProps): JSX.Element => {
>
<FaQuestionCircle />
</button>
{showSources && ReactDOM.createPortal(
<div className="absolute z-50 min-w-max p-2 bg-white shadow-lg rounded-md border border-gray-200"
style={{ top: `${popupPosition.top}px`, left: `${popupPosition.left}px` }}>
{/* Display the sources list here */}
{sourcesList}
</div>,
document.body // Render the popup to the body element
)}
{showSources &&
ReactDOM.createPortal(
<div
className="absolute z-50 min-w-max p-2 bg-white shadow-lg rounded-md border border-gray-200"
style={{
top: `${popupPosition.top}px`,
left: `${popupPosition.left}px`,
}}
>
{/* Display the sources list here */}
{sourcesList}
</div>,
document.body // Render the popup to the body element
)}
</div>
);
};