4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T28ce,"use client"; import { memo, type FC } from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { FileIcon, FileTextIcon, ImageIcon, MusicIcon, VideoIcon, BracesIcon, DownloadIcon, } from "lucide-react"; import type { FileMessagePartComponent } from "@assistant-ui/react"; import { cn } from "@/lib/utils"; import { AudioPlayer, VideoPlayer } from "./media-player"; const fileVariants = cva( "aui-file-root inline-flex items-center gap-3 rounded-lg transition-colors", { variants: { variant: { outline: "border-border hover:bg-muted/50 border", ghost: "hover:bg-muted/50", muted: "bg-muted/50 hover:bg-muted/70", }, size: { sm: "px-2.5 py-1.5 text-xs", default: "px-3 py-2 text-sm", lg: "px-4 py-3 text-base", }, }, defaultVariants: { variant: "outline", size: "default", }, }, ); function getMimeTypeIcon(mimeType: string): FC<{ className?: string }> { const type = mimeType.toLowerCase(); if (type.startsWith("image/")) { return ImageIcon; } if (type === "application/pdf") { return FileTextIcon; } if (type === "application/json") { return BracesIcon; } if (type.startsWith("text/")) { return FileTextIcon; } if (type.startsWith("audio/")) { return MusicIcon; } if (type.startsWith("video/")) { return VideoIcon; } return FileIcon; } export type FileDataKind = "data-uri" | "url" | "base64" | "id"; function getFileDataKind( data: string, sourceType?: "url" | "id", ): FileDataKind { if (sourceType === "url" && /^data:/i.test(data)) return "data-uri"; if (sourceType) return sourceType; if (/^data:/i.test(data)) return "data-uri"; if (/^(https?:\/\/|blob:)/i.test(data)) return "url"; return "base64"; } function isUnsafeScheme(data: string): boolean { return ( /^[a-z][a-z\d+.-]*:/i.test(data) && !/^(data:|https?:\/\/|blob:)/i.test(data) ); } function getFileHref( data: string, mimeType: string, sourceType?: "url" | "id", ): string | null { if (isUnsafeScheme(data)) return null; const kind = getFileDataKind(data, sourceType); if (kind === "id") return null; if (kind === "data-uri") return /^data:[^,]*,/i.test(data) ? data : null; if (kind === "url") return /^(https?:\/\/|blob:)/i.test(data) ? data : null; return `data:${mimeType};base64,${data}`; } function getBase64PayloadSize(payload: string): number { const padding = payload.endsWith("==") ? 2 : payload.endsWith("=") ? 1 : 0; const firstNonBase64 = payload.search(/[^A-Za-z\d+/]/); if ( (firstNonBase64 !== -1 && firstNonBase64 !== payload.length - padding) || payload.length % 4 === 1 || (padding > 0 && payload.length % 4 !== 0) ) { return 0; } return Math.floor((payload.length * 3) / 4) - padding; } function getBase64Size(base64: string): number { const payload = /[\t\n\f\r ]/.test(base64) ? base64.replace(/[\t\n\f\r ]/g, "") : base64; return getBase64PayloadSize(payload); } function getDataUrlSize(data: string): number { const fragment = data.indexOf("#"); const end = fragment < 0 ? data.length : fragment; const comma = data.indexOf(","); if (comma < 0 || comma >= end) { return 0; } let payload = data.slice(comma + 1, end); if (/;base64$/i.test(data.slice(0, comma))) { if (/[%\t\n\f\r ]/.test(payload)) { payload = payload .replace(/%([\da-f]{2})/gi, (_match, hex: string) => String.fromCharCode(Number.parseInt(hex, 16)), ) .replace(/[\t\n\f\r ]/g, ""); } return getBase64PayloadSize(payload); } // Each percent escape is one byte, including octets that are not valid UTF-8. return new TextEncoder().encode(payload.replace(/%[\da-f]{2}/gi, "_")) .byteLength; } function getFileLabel(mimeType: string): string { const subtype = /^[^/;]+\/(?:x-)?(?:[^;+]*\.)?([^;+.\s]+)/.exec( mimeType.toLowerCase(), )?.[1]; if (!subtype || subtype === "octet-stream") return "File"; if (subtype === "plain") return "Text file"; return `${subtype.toUpperCase()} file`; } function formatFileSize(bytes: number): string { if (bytes < 1024) { return `${bytes} B`; } if (bytes < 1024 * 1024) { return `${(bytes / 1024).toFixed(1)} KB`; } return `${(bytes / (1024 * 1024)).toFixed(1)} MB`; } export type FileRootProps = React.ComponentProps<"div"> & VariantProps; function FileRoot({ className, variant, size, children, ...props }: FileRootProps) { return (

{children}

); } type FileIconDisplayProps = React.ComponentProps<"span"> & { mimeType?: string; }; function FileIconDisplay({ mimeType, className, children, ...props }: FileIconDisplayProps) { const IconComponent = mimeType ? getMimeTypeIcon(mimeType) : FileIcon; return ( {/* eslint-disable-next-line react-hooks/static-components -- The helper only selects module-level icon components. */} {children ?? } ); } function FileName({ className, children, ...props }: React.ComponentProps<"span">) { return ( {children || "Unnamed file"} ); } type FileSizeProps = React.ComponentProps<"span"> & { bytes: number; }; function FileSize({ bytes, className, ...props }: FileSizeProps) { return ( {formatFileSize(bytes)} ); } type FileDownloadProps = Omit, "href"> & { data: string; mimeType: string; filename?: string; sourceType?: "url" | "id"; }; function FileDownload({ data, mimeType, filename, sourceType, className, children, ...props }: FileDownloadProps) { if (typeof data !== "string") return null; const kind = getFileDataKind(data, sourceType); const href = getFileHref(data, mimeType, sourceType); if (!href) return null; return ( {children || } ); } export interface FilePlayerProps extends Omit< React.ComponentProps<"div">, "children" > { data: string; mimeType: string; filename?: string | undefined; sourceType?: "url" | "id" | undefined; } function FilePlayer({ data, mimeType, filename, sourceType, className, ...props }: FilePlayerProps) { const src = getFileHref(data, mimeType, sourceType); const normalizedMimeType = mimeType.toLowerCase(); if ( !src || (!normalizedMimeType.startsWith("audio/") && !normalizedMimeType.startsWith("video/")) ) { return null; } return (

{normalizedMimeType.startsWith("audio/") ? ( ) : ( )}

); } const FileImpl: FileMessagePartComponent = ({ filename, data, mimeType, sourceType, }) => { const kind = getFileDataKind(data, sourceType); const showSize = typeof data === "string" && (kind === "base64" || kind === "data-uri"); const mediaSource = getFileHref(data, mimeType, sourceType); const isMedia = mimeType.toLowerCase().startsWith("audio/") || mimeType.toLowerCase().startsWith("video/"); if (mediaSource && isMedia) { return (

{showSize && ( )}

); } return (

{filename || getFileLabel(mimeType)} {showSize && ( )}

); }; const File = memo(FileImpl) as unknown as FileMessagePartComponent & { Root: typeof FileRoot; Icon: typeof FileIconDisplay; Name: typeof FileName; Size: typeof FileSize; Download: typeof FileDownload; Player: typeof FilePlayer; }; File.displayName = "File"; File.Root = FileRoot; File.Icon = FileIconDisplay; File.Name = FileName; File.Size = FileSize; File.Download = FileDownload; File.Player = FilePlayer; export { File, FileRoot, FileIconDisplay, FileName, FileSize, FileDownload, FilePlayer, fileVariants, getMimeTypeIcon, getFileDataKind, getFileHref, getBase64Size, formatFileSize, }; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@assistant-ui/react@^0.15.29",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40assistant-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@assistant-ui/react@^0.15.29"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}]]}],["$","$L4e",null,{"namespace":"@assistant-ui","registryDependencies":["https://r.assistant-ui.com/elements-media-player.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/assistant-ui/elements/file.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]