Function AttachmentIcon

web/src/components/AttachmentIcon.tsx:25–106

(props: Props)

}

const AttachmentIcon = (props: Props) => {
  const { attachment } = props;
  const [previewImage, setPreviewImage] = useState<{ open: boolean; urls: string[]; index: number }>({
    open: false,
    urls: [],
    index: 0,
  });
  const resourceType = getAttachmentType(attachment);
  const attachmentUrl = getAttachmentUrl(attachment);
  const className = cn("w-full h-auto", props.className);
  const strokeWidth = props.strokeWidth;

  const previewResource = () => {
    window.open(attachmentUrl);
  };

  const handleImageClick = () => {
    setPreviewImage({ open: true, urls: [attachmentUrl], index: 0 });
  };

  if (resourceType === "image/*") {
    return (
      <>
        <SquareDiv className={cn(className, "flex items-center justify-center overflow-clip")}>
          <img
            className="min-w-full min-h-full object-cover"
            src={getAttachmentThumbnailUrl(attachment)}
            onClick={handleImageClick}
            onError={(e) => {
              // Fallback to original image if thumbnail fails
              const target = e.target as HTMLImageElement;
              if (target.src.includes("?thumbnail=true")) {
                console.warn("Thumbnail failed, falling back to original image:", attachmentUrl);
                target.src = attachmentUrl;
              }
            }}
            decoding="async"
            loading="lazy"
          />
        </SquareDiv>

        <PreviewImageDialog
          open={previewImage.open}
          onOpenChange={(open) => setPreviewImage((prev) => ({ ...prev, open }))}
          imgUrls={previewImage.urls}
          initialIndex={previewImage.index}
        />
      </>
    );
  }

  const getAttachmentIcon = () => {
    switch (resourceType) {
      case "video/*":
        return <FileVideo2Icon strokeWidth={strokeWidth} className="w-full h-auto" />;
      case "audio/*":
        return <FileAudioIcon strokeWidth={strokeWidth} className="w-full h-auto" />;
      case "text/*":