Skip to content

MAIN = carousel support in message type #390

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
parakhjain23 wants to merge 1 commit into
base: react-main
Choose a base branch
from
Open

MAIN = carousel support in message type #390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 83 additions & 2 deletions components/Hello/RenderHelloInteractiveMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@ function RenderHelloInteractiveMessage({ message }: { message: any }) {
};

const renderInteractiveContent = () => {
switch (messageJson.type) {
const type = messageJson.type || message.message_type;
switch (type) {
case 'button':
return (
<div className="flex flex-col gap-2">
Expand Down Expand Up @@ -149,7 +150,7 @@ function RenderHelloInteractiveMessage({ message }: { message: any }) {
onClick={() => sendMessageToHello?.(row?.title)}
>
<div className="flex flex-col w-full items-start">
<div className="font-medium break-words w-full">{row?.title}</div>
<div className="font-medium break-words w-full text-inherit">{row?.title}</div>
{row?.description && (
<div className="text-xs text-gray-500 mt-1 w-full">
<div className="break-words" dangerouslySetInnerHTML={{ __html: linkify(row?.description) }}></div>
Expand All @@ -173,6 +174,17 @@ function RenderHelloInteractiveMessage({ message }: { message: any }) {
</div>
);

case 'carousel':
return (
<CarouselMessage
messageJson={messageJson}
backgroundColor={backgroundColor}
textColor={textColor}
sendMessageToHello={sendMessageToHello}
renderHeader={renderHeader}
/>
);

default:
return <div className="p-3 bg-gray-800 rounded-md">Unsupported Message Type</div>;
}
Expand All @@ -185,4 +197,73 @@ function RenderHelloInteractiveMessage({ message }: { message: any }) {
);
}

function CarouselMessage({ messageJson, backgroundColor, textColor, sendMessageToHello, renderHeader }: any) {
Copy link
Copy Markdown

@windsurf-bot windsurf-bot bot Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The CarouselMessage component is using any type for all its props. Consider defining a proper interface for better type safety and code maintainability:

Suggested change
function CarouselMessage({ messageJson, backgroundColor, textColor, sendMessageToHello, renderHeader }: any) {
interface CarouselMessageProps {
messageJson: any; // Consider creating a more specific type
backgroundColor: string;
textColor: string;
sendMessageToHello: (message: string) => void;
renderHeader: (header: any) => React.ReactNode;
}
function CarouselMessage({ messageJson, backgroundColor, textColor, sendMessageToHello, renderHeader }: CarouselMessageProps) {

return (
<div className="flex flex-col gap-2 max-w-[320px] sm:max-w-[400px] md:max-w-[500px] lg:max-w-[600px]">
{messageJson.body?.text && (
<div className="mb-2 px-1">
<div
className="text-sm"
dangerouslySetInnerHTML={{ __html: linkify(messageJson.body.text) }}
></div>
</div>
)}

<div className="carousel rounded-box w-full max-w-fit overflow-x-auto gap-3 py-2 px-1">
{messageJson.action?.cards?.map((card: any, index: number) => {
return (
<div key={index} className="carousel-item relative w-56 flex-col border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 rounded-xl shadow-sm h-auto overflow-hidden flex-shrink-0 p-4">
{card.header && renderHeader(card.header)}

<div className="flex flex-col flex-grow">
{card.body?.text && (
<div className="text-sm text-gray-800 dark:text-gray-200 mb-4 whitespace-pre-wrap">
<div dangerouslySetInnerHTML={{ __html: linkify(card.body.text) }}></div>
</div>
)}

<div className="flex flex-col gap-2 mt-auto pb-1 z-10 w-full min-h-min">
{card.action?.name === 'cta_url' && card.action?.parameters?.url && (
<a
href={card.action?.parameters?.url || "#"}
target="_blank"
rel="noopener noreferrer"
className="btn btn-sm rounded-md normal-case font-medium flex items-center justify-center gap-2"
style={{ backgroundColor, color: textColor, border: "none" }}
onClick={(e) => e.stopPropagation()}
>
Comment on lines +227 to +234
Copy link
Copy Markdown

@windsurf-bot windsurf-bot bot Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using '#' as a fallback URL can cause the page to jump to the top when clicked. Consider conditionally rendering the entire anchor element instead:

Suggested change
<a
href={card.action?.parameters?.url || "#"}
target="_blank"
rel="noopener noreferrer"
className="btn btn-sm rounded-md normal-case font-medium flex items-center justify-center gap-2"
style={{ backgroundColor, color: textColor, border: "none" }}
onClick={(e) => e.stopPropagation()}
>
{card.action?.name === 'cta_url' && card.action?.parameters?.url && (
<a
href={card.action.parameters.url}
target="_blank"
rel="noopener noreferrer"
className="btn btn-sm rounded-md normal-case font-medium flex items-center justify-center gap-2"
style={{ backgroundColor, color: textColor, border: "none" }}
onClick={(e) => e.stopPropagation()}
>

<ExternalLink size={14} />
{card.action?.parameters?.display_text || "View"}
</a>
)}

{card.action?.buttons && card.action.buttons.map((button: any, bIndex: number) => (
<button
key={bIndex}
className="btn btn-sm btn-outline rounded-md normal-case px-4 font-medium border-current"
onClick={(e) => {
e.stopPropagation();
const title = button?.quick_reply?.title || button?.reply?.title || button?.title;
if (title) sendMessageToHello?.(title);
}}
>
{button?.quick_reply?.title || button?.reply?.title || button?.title}
</button>
))}
</div>
</div>
</div>
);
})}
</div>

{messageJson.footer?.text && (
<div className="text-xs text-gray-500 mt-1 px-1 italic">
<div dangerouslySetInnerHTML={{ __html: linkify(messageJson.footer.text) }}></div>
</div>
)}
</div>
);
}

export default RenderHelloInteractiveMessage;
31 changes: 16 additions & 15 deletions components/Interface-Chatbot/Messages/ImageWithFallback.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ const FALLBACK_ICON = "https://cdn1.iconfinder.com/data/icons/leto-files/64/leto
const getFileType = (url: string): string => {
if (!url) return "other"; // e.g. null, undefined, empty string
const extension = url?.split(".")?.pop()?.toLowerCase()?.split("?")[0] || "";
if (["jpg", "jpeg", "png", "gif", "webp", "bmp"].includes(extension)) return "image";
if (["mp4", "webm", "ogg"].includes(extension)) return "video";
if (["jpg", "jpeg", "png", "gif", "webp", "bmp", "svg"].includes(extension)) return "image";
if (["mp4", "webm", "ogg", "mov"].includes(extension)) return "video";
if (["mp3", "wav", "aac", "flac"].includes(extension)) return "audio";
if (["pdf"].includes(extension)) return "pdf";
return "other"; // e.g. xlsx, csv, html, zip, etc.
Expand All @@ -45,29 +45,29 @@ const PlayIcon = () => (
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="text-white"
className="text-white mt-1"
>
<polygon points="5 3 19 12 5 21 5 3" />
</svg>
);

// Memoized error component
const ErrorDisplay = () => (
<div className="w-60 h-40 flex items-center justify-center border rounded-md bg-gray-100 text-gray-500">
<FileWarning className="w-6 h-6 mr-2" />
Failed to load
<div className="w-64 h-48 flex flex-col items-center justify-center border-2 border-dashed border-gray-200 dark:border-gray-700/60 rounded-2xl bg-gray-50/50 dark:bg-gray-800/20 backdrop-blur-sm transition-all text-gray-500 dark:text-gray-400 hover:bg-gray-100/50 dark:hover:bg-gray-800/40">
<div className="bg-gray-200/60 dark:bg-gray-700/50 p-3 rounded-full mb-3 ring-4 ring-gray-50 dark:ring-gray-800/50">
<FileWarning className="w-6 h-6 text-gray-400 dark:text-gray-500" />
</div>
<span className="text-sm font-medium">Failed to load media</span>
</div>
);

// Memoized download button
const DownloadButton = ({ onClick }: { onClick: () => void }) => (
<button
onClick={onClick}
className="absolute top-2 right-2 px-2 pt-1 ml-2 bg-gray-200 shadow-md rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-200"
onClick={(e) => { e.stopPropagation(); onClick(); }}
className="absolute top-2 right-2 p-2 bg-white/70 dark:bg-black/50 backdrop-blur-md text-gray-800 dark:text-gray-200 shadow-md rounded-full md:opacity-0 md:group-hover:opacity-100 transition-all duration-300 hover:scale-110 hover:bg-white dark:hover:bg-black/80 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500/50 z-10"
>
<div className="tooltip tooltip-left" data-tip="Download">
<Download size={18} />
</div>
<Download size={16} strokeWidth={2.5} />
</button>
);

Expand Down Expand Up @@ -112,7 +112,7 @@ const ImageWithFallback = ({

// Memoized container classes
const containerClasses = useMemo(() =>
`flex relative group ${isSmallScreen ? 'max-w-[80%]' : 'max-w-[40%]'} h-auto rounded-md cursor-pointer hover:opacity-90 transition-opacity`,
`flex relative group ${isSmallScreen ? 'max-w-[80%]' : 'max-w-[40%]'} h-auto rounded-2xl cursor-pointer transition-all duration-300`,
[isSmallScreen]
);

Expand All @@ -128,6 +128,7 @@ const ImageWithFallback = ({
onError={handleError}
onClick={handleClick}
style={style}
className="rounded-2xl shadow-sm group-hover:shadow-md transition-all duration-300"
/>
);

Expand All @@ -144,8 +145,8 @@ const ImageWithFallback = ({
>
<source src={src} type={videoType} />
</video>
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-12 h-12 bg-black bg-opacity-50 rounded-full flex items-center justify-center">
<div className="absolute inset-0 flex items-center justify-center bg-black/10 group-hover:bg-black/20 transition-colors">
<div className="w-14 h-14 bg-black/40 backdrop-blur-sm rounded-full flex items-center justify-center shadow-xl border border-white/20 group-hover:scale-110 transition-transform duration-300">
<PlayIcon />
</div>
</div>
Expand All @@ -157,7 +158,7 @@ const ImageWithFallback = ({
onError={handleError}
style={style}
>
<source src={src} type={videoType} />
<source src={src} />
Copy link
Copy Markdown

@windsurf-bot windsurf-bot bot Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The video source tag is missing the type attribute which could cause compatibility issues with some browsers. Consider keeping the type attribute for better compatibility.

Suggested change
<source src={src} />
<source src={src} type={videoType} />

Your browser does not support the video tag.
</video>
);
Expand Down
2 changes: 1 addition & 1 deletion components/Interface-Chatbot/Messages/UserMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const UserMessageCard = React.memo(({ message, backgroundColor, textColor, chatS
<div className="flex items-center gap-1 w-full justify-end">
<button
onClick={handleReplyClick}
className={`w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-50 transition-all duration-300 ${showReplyButton ? 'opacity-100' : 'opacity-0'}`}
className={`w-8 h-8 flex items-center justify-center rounded-full transition-all duration-300 ${showReplyButton ? 'opacity-100' : 'opacity-0'}`}
aria-label="Reply to message"
>
<Reply className="w-4 h-4 text-gray-600 dark:text-gray-300" />
Expand Down