mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-09-11 14:36:35 +03:00
feat: track source button usage
This commit is contained in:
parent
8752da437c
commit
48cc6ef26c
@ -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>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user