attachment

1"use client";
2 
3import { PropsWithChildren, useEffect, useState, type FC } from "react";
4import { XIcon, PlusIcon, FileText } from "lucide-react";
5import {
6  AttachmentPrimitive,
7  ComposerPrimitive,
8  MessagePrimitive,
9  useAttachment,
10} from "@assistant-ui/react";
11import { useShallow } from "zustand/shallow";
12import {
13  Tooltip,
14  TooltipContent,
15  TooltipTrigger,
16} from "@/components/ui/tooltip";
17import {
18  Dialog,
19  DialogTitle,
20  DialogContent,
21  DialogTrigger,
22} from "@/components/ui/dialog";
23import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
24import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
25import { cn } from "@aomi-labs/react";
26 
27const useFileSrc = (file: File | undefined) => {
28  const [src, setSrc] = useState<string | undefined>(undefined);
29 
30  useEffect(() => {
31    if (!file) {
32      setSrc(undefined);
33      return;
34    }
35 
36    const objectUrl = URL.createObjectURL(file);
37    setSrc(objectUrl);
38 
39    return () => {
40      URL.revokeObjectURL(objectUrl);
41    };
42  }, [file]);
43 
44  return src;
45};
46 
47const useAttachmentSrc = () => {
48  const { file, src } = useAttachment(
49    useShallow((attachment): { file?: File; src?: string } => {
50      if (attachment.type !== "image") return {};
51      if (attachment.file) return { file: attachment.file };
52      const src = attachment.content?.filter((c) => c.type === "image")[0]
53        ?.image;
54      if (!src) return {};
55      return { src };
56    }),
57  );
58 
59  return useFileSrc(file) ?? src;
60};
61 
62type AttachmentPreviewProps = {
63  src: string;
64};
65 
66const AttachmentPreview: FC<AttachmentPreviewProps> = ({ src }) => {
67  const [isLoaded, setIsLoaded] = useState(false);
68  return (
69    // The publishable widget is framework-agnostic, so this must not depend on
70    // Next's image runtime.
71    <img
72      src={src}
73      alt="Image Preview"
74      width={1}
75      height={1}
76      className={
77        isLoaded
78          ? "aui-attachment-preview-image-loaded block h-auto max-h-[80vh] w-auto max-w-full object-contain"
79          : "aui-attachment-preview-image-loading hidden"
80      }
81      onLoad={() => setIsLoaded(true)}
82    />
83  );
84};
85 
86const AttachmentPreviewDialog: FC<PropsWithChildren> = ({ children }) => {
87  const src = useAttachmentSrc();
88 
89  if (!src) return children;
90 
91  return (
92    <Dialog>
93      <DialogTrigger
94        className="aui-attachment-preview-trigger hover:bg-accent/50 cursor-pointer transition-colors"
95        asChild
96      >
97        {children}
98// … truncated