hobokenchicken
cb4df31f43
- Fix DM backend ListMessages to use DESC + reverse (match channel handler) - Remove spurious .reverse() from frontend message/conversation stores - Create shared MessageInput component with Slack-style single toolbar row - Add file upload via + button with progress bar and drag-and-drop - Add markdown/rich text toggle with full WYSIWYG block formatting (lists, blockquotes, links, headings, code blocks) - Add frontend+backend security for file uploads (extension + content-type guards)
32 lines
858 B
TypeScript
32 lines
858 B
TypeScript
import { useState } from 'react';
|
|
|
|
interface ExpandableImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
|
|
src?: string;
|
|
}
|
|
|
|
export function ExpandableImage({ src, alt, ...props }: ExpandableImageProps) {
|
|
const [expanded, setExpanded] = useState(false);
|
|
|
|
const finalSrc = src?.startsWith("https://media") && src.includes(".giphy.com/")
|
|
? `/api/v1/gifs/proxy?url=${encodeURIComponent(src)}`
|
|
: src;
|
|
|
|
return (
|
|
<img
|
|
{...props}
|
|
src={finalSrc}
|
|
alt={alt || "image"}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setExpanded(!expanded);
|
|
}}
|
|
className={
|
|
expanded
|
|
? "max-w-full max-h-[65vh] object-contain rounded my-1 block cursor-zoom-out"
|
|
: "max-w-[240px] max-h-[240px] object-contain rounded my-1 block cursor-zoom-in"
|
|
}
|
|
loading="lazy"
|
|
/>
|
|
);
|
|
}
|