@assistant-ui/react
Version:
TypeScript/React library for AI Chat
62 lines • 2.61 kB
JavaScript
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { memo, useMemo } from "react";
import { useAssistantState, ComposerAttachmentByIndexProvider, } from "../../context/index.js";
const getComponent = (components, attachment) => {
const type = attachment.type;
switch (type) {
case "image":
return components?.Image ?? components?.Attachment;
case "document":
return components?.Document ?? components?.Attachment;
case "file":
return components?.File ?? components?.Attachment;
default:
const _exhaustiveCheck = type;
throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`);
}
};
const AttachmentComponent = ({ components }) => {
const attachment = useAssistantState(({ attachment }) => attachment);
if (!attachment)
return null;
const Component = getComponent(components, attachment);
if (!Component)
return null;
return _jsx(Component, {});
};
/**
* Renders a single attachment at the specified index within the composer.
*
* This component provides direct access to render a specific attachment
* from the composer's attachment list using the provided component configuration.
*
* @example
* ```tsx
* <ComposerPrimitive.AttachmentByIndex
* index={0}
* components={{
* Image: MyImageAttachment,
* Document: MyDocumentAttachment
* }}
* />
* ```
*/
export const ComposerPrimitiveAttachmentByIndex = memo(({ index, components }) => {
return (_jsx(ComposerAttachmentByIndexProvider, { index: index, children: _jsx(AttachmentComponent, { components: components }) }));
}, (prev, next) => prev.index === next.index &&
prev.components?.Image === next.components?.Image &&
prev.components?.Document === next.components?.Document &&
prev.components?.File === next.components?.File &&
prev.components?.Attachment === next.components?.Attachment);
ComposerPrimitiveAttachmentByIndex.displayName =
"ComposerPrimitive.AttachmentByIndex";
export const ComposerPrimitiveAttachments = ({ components }) => {
const attachmentsCount = useAssistantState((s) => s.composer.attachments.length);
const attachmentElements = useMemo(() => {
return Array.from({ length: attachmentsCount }, (_, index) => (_jsx(ComposerPrimitiveAttachmentByIndex, { index: index, components: components }, index)));
}, [attachmentsCount, components]);
return attachmentElements;
};
ComposerPrimitiveAttachments.displayName = "ComposerPrimitive.Attachments";
//# sourceMappingURL=ComposerAttachments.js.map