@assistant-ui/react
Version:
React components for AI chat.
165 lines (164 loc) • 7.13 kB
JavaScript
;
"use client";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/ui/attachment.tsx
var attachment_exports = {};
__export(attachment_exports, {
default: () => attachment_default
});
module.exports = __toCommonJS(attachment_exports);
var import_react = require("react");
var import_lucide_react = require("lucide-react");
var import_withDefaults = require("./utils/withDefaults.cjs");
var import_thread_config = require("./thread-config.cjs");
var import_tooltip_icon_button = require("./base/tooltip-icon-button.cjs");
var import_primitives = require("../primitives/index.cjs");
var import_AttachmentContext = require("../context/react/AttachmentContext.cjs");
var import_base = require("./base/index.cjs");
var import_dialog = require("./base/dialog.cjs");
var import_react_avatar = require("@radix-ui/react-avatar");
var import_shallow = require("zustand/shallow");
var import_react_dialog = require("@radix-ui/react-dialog");
var import_jsx_runtime = (
// eslint-disable-next-line @next/next/no-img-element
require("react/jsx-runtime")
);
var AttachmentRoot = (0, import_withDefaults.withDefaults)(import_primitives.AttachmentPrimitive.Root, {
className: "aui-attachment-root"
});
AttachmentRoot.displayName = "AttachmentRoot";
var useFileSrc = (file) => {
const [src, setSrc] = (0, import_react.useState)(void 0);
(0, import_react.useEffect)(() => {
if (!file) {
setSrc(void 0);
return;
}
const objectUrl = URL.createObjectURL(file);
setSrc(objectUrl);
return () => {
URL.revokeObjectURL(objectUrl);
};
}, [file]);
return src;
};
var useAttachmentSrc = () => {
const { file, src } = (0, import_AttachmentContext.useAttachment)(
(0, import_shallow.useShallow)((a) => {
if (a.type !== "image") return {};
if (a.file) return { file: a.file };
const src2 = a.content?.filter((c) => c.type === "image")[0]?.image;
if (!src2) return {};
return { src: src2 };
})
);
return useFileSrc(file) ?? src;
};
var AttachmentPreview = ({ src }) => {
const [isLoaded, setIsLoaded] = (0, import_react.useState)(false);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"img",
{
src,
style: {
width: "auto",
height: "auto",
maxWidth: "75dvh",
maxHeight: "75dvh",
display: isLoaded ? "block" : "none",
overflow: "clip"
},
onLoad: () => setIsLoaded(true),
alt: "Image Preview"
}
);
};
var AttachmentPreviewDialog = ({ children }) => {
const src = useAttachmentSrc();
if (!src) return children;
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dialog.Dialog, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogTrigger, { className: "aui-attachment-preview-trigger", asChild: true, children }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dialog.DialogContent, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_dialog.DialogTitle, { className: "aui-sr-only", children: "Image Attachment Preview" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AttachmentPreview, { src })
] })
] });
};
var AttachmentThumb = () => {
const isImage = (0, import_AttachmentContext.useAttachment)((a) => a.type === "image");
const src = useAttachmentSrc();
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_base.AvatarRoot, { className: "aui-attachment-thumb", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_avatar.AvatarFallback, { delayMs: isImage ? 200 : 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.FileIcon, {}) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_base.AvatarImage, { src })
] });
};
var Attachment = () => {
const canRemove = (0, import_AttachmentContext.useAttachment)((a) => a.source !== "message");
const typeLabel = (0, import_AttachmentContext.useAttachment)((a) => {
const type = a.type;
switch (type) {
case "image":
return "Image";
case "document":
return "Document";
case "file":
return "File";
default:
const _exhaustiveCheck = type;
throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`);
}
});
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_base.Tooltip, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AttachmentPreviewDialog, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_base.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AttachmentRoot, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AttachmentThumb, {}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "aui-attachment-text", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "aui-attachment-name", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_primitives.AttachmentPrimitive.Name, {}) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "aui-attachment-type", children: typeLabel })
] }),
canRemove && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AttachmentRemove, {})
] }) }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_base.TooltipContent, { side: "top", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_primitives.AttachmentPrimitive.Name, {}) })
] });
};
Attachment.displayName = "Attachment";
var AttachmentRemove = (0, import_react.forwardRef)((props, ref) => {
const {
strings: {
composer: { removeAttachment: { tooltip = "Remove file" } = {} } = {}
} = {}
} = (0, import_thread_config.useThreadConfig)();
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_primitives.AttachmentPrimitive.Remove, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_tooltip_icon_button.TooltipIconButton,
{
tooltip,
className: "aui-attachment-remove",
side: "top",
...props,
ref,
children: props.children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.CircleXIcon, {})
}
) });
});
AttachmentRemove.displayName = "AttachmentRemove";
var exports2 = {
Root: AttachmentRoot,
Remove: AttachmentRemove
};
var attachment_default = Object.assign(Attachment, exports2);
//# sourceMappingURL=attachment.js.map