@agents24/chat-react 0.5.5 → 0.5.6

package/dist/styles.css

@@ -209,10 +209,22 @@ button.a24-tool-trigger:focus-visible { outline: 2px solid var(--a24-focus); out
 .a24-timeline-error { padding-inline: 6px; }
 .a24-ask-user--resolved { padding-inline: 6px; }
 .a24-chat-message { display: flex; flex-direction: column; gap: .5rem; min-width: 0; width: 100%; }
-.a24-chat-message--user { margin-inline-start: auto; max-width: 80%; }
+.a24-chat-message--user { max-width: 100%; }
 .a24-chat-message--assistant { max-width: 100%; }
+.a24-chat-attachment-rows { align-self: flex-end; display: flex; flex-direction: column; gap: .375rem; max-width: 100%; min-width: 0; width: 100%; }
+.a24-chat-attachments { align-self: stretch; justify-content: safe flex-end; max-width: 100%; scrollbar-width: none; width: 100%; }
+.a24-chat-attachments[dir="rtl"] { justify-content: safe flex-start; }
+.a24-chat-attachment { align-items: center; border-radius: var(--radius, .75rem); flex-wrap: nowrap; max-width: min(22rem, 100%); min-height: 2.5rem; padding: .375rem .625rem !important; }
+.a24-chat-attachment-icon { border-radius: 0 !important; height: 1.75rem; width: 1.75rem; }
+.a24-chat-attachment-icon svg { display: block; height: 100%; width: 100%; }
+.a24-chat-attachment-content { overflow: hidden; }
+.a24-chat-image-attachment { border: 0; border-radius: var(--radius, .75rem); height: 6rem; min-width: 6rem; overflow: hidden; padding: 0 !important; width: 6rem; }
+.a24-chat-image-media { border-radius: inherit; height: 6rem; opacity: 1 !important; width: 6rem !important; }
+.a24-chat-image-media img { height: 100%; object-fit: cover; width: 100%; }
+.a24-chat-image-spinner { color: var(--a24-muted); }
+.a24-chat-image-remove { align-items: center; background: color-mix(in srgb, var(--a24-background) 88%, transparent); border: 0; border-radius: .375rem; color: var(--a24-text); display: inline-flex; height: 1.5rem; justify-content: center; position: absolute; right: .375rem; top: .375rem; width: 1.5rem; z-index: 2; }
 .a24-chat-message-content { display: flex; flex-direction: column; max-width: 100%; min-width: 0; }
-.a24-chat-message-content--user { align-self: flex-end; overflow: visible; width: fit-content; }
+.a24-chat-message-content--user { align-self: flex-end; max-width: 80%; overflow: visible; width: fit-content; }
 .a24-chat-message-content--assistant { overflow: visible; width: 100%; }
 .a24-message-response > :first-child { margin-top: 0; }
 .a24-message-response > :last-child { margin-bottom: 0; }

package/dist/ui/adapters.d.ts

@@ -28,8 +28,20 @@ export type ChatAttachmentData = Agents24ChatAttachment & {
 export type ChatAttachmentProps = React.ComponentProps<typeof Attachment> & {
     data: ChatAttachmentData;
     onRemove?: () => void;
+    resolveContent?: ChatAttachmentContentResolver;
 };
-export declare function ChatAttachment({ data, onRemove, orientation, ...props }: ChatAttachmentProps): React.ReactElement;
+export type ChatAttachmentContentResult = {
+    url: string;
+    validUntil?: string | null;
+};
+export type ChatAttachmentContentResolver = (attachment: ChatAttachmentData, signal: AbortSignal) => Promise<ChatAttachmentContentResult>;
+export declare function ChatAttachment({ className, data, onRemove, orientation, resolveContent, ...props }: ChatAttachmentProps): React.ReactElement;
 export type ChatAttachmentsProps = React.ComponentProps<typeof AttachmentGroup>;
 export declare function ChatAttachments({ children, className, ...props }: ChatAttachmentsProps): React.ReactElement | null;
-export { ChatAttachment as MessageAttachment, ChatAttachments as MessageAttachments, ChatMessage as Message, ChatMessageAction as MessageAction, ChatMessageActions as MessageActions, ChatMessageContent as MessageContent, };
+export type ChatAttachmentRowsProps = Omit<React.ComponentProps<"div">, "children"> & {
+    attachments: readonly ChatAttachmentData[];
+    onRemove?: (attachment: ChatAttachmentData) => void;
+    resolveContent?: ChatAttachmentContentResolver;
+};
+export declare function ChatAttachmentRows({ attachments, className, dir, onRemove, resolveContent, ...props }: ChatAttachmentRowsProps): React.ReactElement | null;
+export { ChatAttachment as MessageAttachment, ChatAttachmentRows as MessageAttachmentRows, ChatAttachments as MessageAttachments, ChatMessage as Message, ChatMessageAction as MessageAction, ChatMessageActions as MessageActions, ChatMessageContent as MessageContent, };

package/dist/ui/agent-chat-composer.d.ts

@@ -1,13 +1,6 @@
 import * as React from "react";
-import type { ChatAttachment } from "../types";
-export type AgentChatComposerFile = ChatAttachment & {
-    id: string;
-    type: "file";
-    url: string;
-    filename: string;
-    mediaType: string;
-    source: File;
-};
+import { type AgentChatComposerFile } from "./composer-attachments";
+export type { AgentChatComposerFile } from "./composer-attachments";
 export type AgentChatComposerSubmit = {
     text: string;
     files: AgentChatComposerFile[];

package/dist/ui/agent-chat-message.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import type { ChatHitlPart, ChatHitlResponse, ChatMessage } from "../types";
+import { type ChatAttachmentContentResolver } from "./adapters";
 import { type AgentChatMessageActionHandlers } from "./agent-chat-actions";
 import { type AgentChatPartActionState, type AgentChatTimelineComponent } from "./agent-response-timeline";
 export type AgentChatUserMessageContentProps = {
@@ -14,6 +15,7 @@ export type AgentChatMessageProps = {
     additionalActions?: React.ReactNode;
     actions?: React.ReactNode;
     actionsClassName?: string;
+    attachmentContentResolver?: ChatAttachmentContentResolver;
     className?: string;
     contentClassName?: string;
     dir?: "ltr" | "rtl";
@@ -39,4 +41,4 @@ export type AgentChatMessageProps = {
 };
 export declare function shouldCollapseUserMessage(content: string, threshold?: number | null | undefined): boolean;
 export declare function AgentChatUserMessageContent({ collapsedLines, collapseThreshold, content, showLessLabel, showMoreLabel, }: AgentChatUserMessageContentProps): import("react/jsx-runtime").JSX.Element;
-export declare function AgentChatMessage({ actionHandlers, additionalActions, actions, actionsClassName, className, contentClassName, dir, getHitlActionState, message, nodeActivityMode, onHitlAction, Timeline, renderAssistantContent, renderUserContent, showAssistantAttachments, streamingMessageId, userMessageCollapsedLines, userMessageContent, userMessageCollapseThreshold, userMessageShowLessLabel, userMessageShowMoreLabel, }: AgentChatMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentChatMessage({ actionHandlers, additionalActions, actions, actionsClassName, attachmentContentResolver, className, contentClassName, dir, getHitlActionState, message, nodeActivityMode, onHitlAction, Timeline, renderAssistantContent, renderUserContent, showAssistantAttachments, streamingMessageId, userMessageCollapsedLines, userMessageContent, userMessageCollapseThreshold, userMessageShowLessLabel, userMessageShowMoreLabel, }: AgentChatMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/composer-attachments.d.ts

@@ -0,0 +1,11 @@
+import type { ChatAttachment } from "../types";
+export type AgentChatComposerFile = ChatAttachment & {
+    id: string;
+    type: "file";
+    url: string;
+    filename: string;
+    mediaType: string;
+    source: File;
+};
+export declare function createAgentChatComposerFile(file: File): AgentChatComposerFile;
+export declare function revokeAgentChatComposerFiles(files: readonly AgentChatComposerFile[]): void;