UniqAI/hexabot
1
0
Fork 0
mirror of https://github.com/hexastack/hexabot synced 2025-04-25 16:59:07 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

fix: display carousel navigation buttons when we have more than one item

Browse Source
This commit is contained in:
abdou6666 2024-11-29 16:11:58 +01:00
parent e0a8bc2b0c
commit a7ab87cfa5
1 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
widget/src/components/messages/CarouselMessage.tsx
View File

@ -81,6 +81,7 @@ const CarouselMessage: React.FC<CarouselMessageProps> = ({
setActiveIndex((prevIndex) => (prevIndex + 1) % items.length); setActiveIndex((prevIndex) => (prevIndex + 1) % items.length);
}; };
const colors = allColors[messageCarousel.direction || "received"]; const colors = allColors[messageCarousel.direction || "received"];
const shouldDisplayNavigationButtons = items.length > 1;
return ( return (
<div <div
@ -98,15 +99,19 @@ const CarouselMessage: React.FC<CarouselMessageProps> = ({
<CarouselItem key={idx} message={message} idx={idx} /> <CarouselItem key={idx} message={message} idx={idx} />
))} ))}
</div> </div>
<button {shouldDisplayNavigationButtons && (
className="sc-message--carousel-control prev" <>
onClick={goToPrevious} <button
> className="sc-message--carousel-control prev"
&#10094; onClick={goToPrevious}
</button> >
<button className="sc-message--carousel-control next" onClick={goToNext}> &#10094;
&#10095; </button>
</button> <button className="sc-message--carousel-control next" onClick={goToNext}>
&#10095;
</button>
</>
)}
</div> </div>
); );
}; };