@agents24/chat-react 0.5.30 → 0.5.31

package/dist/styles.css

@@ -255,6 +255,9 @@ button.a24-tool-trigger:focus-visible { outline: 2px solid var(--a24-focus); out
 .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-composer-attachment-row { padding: .5rem .375rem; }
+.a24-composer-attachment-row .a24-chat-attachments { padding-top: 0; align-items: center; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
+.a24-composer-attachment-row .a24-chat-attachment { flex-shrink: 0; }
 .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; }
@@ -263,6 +266,17 @@ button.a24-tool-trigger:focus-visible { outline: 2px solid var(--a24-focus); out
 .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; }
+/* Only draft cards change size; sent-message attachment styles stay above. */
+.a24-composer-attachment-row .a24-composer-attachment-card { width: 7rem; height: 7rem; min-width: 0; max-width: none; flex: 0 0 7rem; overflow: hidden; border-radius: .625rem; }
+.a24-composer-attachment-row .a24-chat-attachment { display: grid; grid-template-columns: 1rem minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 2rem; gap: 0 .5rem; align-items: center; padding: 0 .625rem !important; }
+.a24-composer-file-preview { grid-column: 1 / -1; align-self: stretch; display: flex; align-items: center; justify-content: center; margin-inline: -.625rem; background: var(--a24-surface, #f5f5f5); border-bottom: 1px solid var(--a24-border, #e5e5e5); }
+.a24-composer-file-preview svg { width: 2.5rem; height: 2.5rem; }
+.a24-composer-attachment-row .a24-chat-attachment-icon { grid-row: 2; width: 1rem; height: 1rem; }
+.a24-composer-attachment-row .a24-chat-attachment-content { grid-row: 2; font-size: .75rem; }
+.a24-composer-attachment-row .a24-chat-attachment > button { position: absolute; right: .375rem; top: .375rem; background: var(--a24-background, white); }
+.a24-composer-attachment-row .a24-chat-image-attachment { flex-wrap: nowrap; border: 1px solid var(--a24-border, #e5e5e5); padding: 0 !important; gap: 0; }
+.a24-composer-attachment-row .a24-chat-image-media { width: 100% !important; height: calc(100% - 2rem); border-radius: 0 !important; }
+.a24-composer-image-caption { display: block; width: 100%; height: 2rem; padding: .375rem .5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; }
 .a24-chat-message-content { display: flex; flex-direction: column; max-width: 100%; min-width: 0; }
 .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%; }

package/dist/ui/adapters.d.ts

@@ -27,6 +27,7 @@ export type ChatAttachmentData = Agents24ChatAttachment & {
 };
 export type ChatAttachmentProps = React.ComponentProps<typeof Attachment> & {
     data: ChatAttachmentData;
+    presentation?: "message" | "composer";
     onRemove?: () => void;
     resolveContent?: ChatAttachmentContentResolver;
 };
@@ -35,13 +36,15 @@ export type ChatAttachmentContentResult = {
     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 declare function ChatAttachment({ className, data, presentation, 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 type ChatAttachmentRowsProps = Omit<React.ComponentProps<"div">, "children"> & {
     attachments: readonly ChatAttachmentData[];
+    /** Composer drafts use one left-aligned row; transcript grouping stays unchanged. */
+    layout?: "message" | "composer";
     onRemove?: (attachment: ChatAttachmentData) => void;
     resolveContent?: ChatAttachmentContentResolver;
 };
-export declare function ChatAttachmentRows({ attachments, className, dir, onRemove, resolveContent, ...props }: ChatAttachmentRowsProps): React.ReactElement | null;
+export declare function ChatAttachmentRows({ attachments, layout, 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

@@ -14,6 +14,7 @@ export type AgentChatComposerProps = {
     contextWindow?: ContextWindow | null;
     accept?: string;
     allowAttachments?: boolean;
+    /** @deprecated Draft attachments are always contained inside the composer. */
     attachmentLayout?: "flow" | "overlay";
     className?: string;
     disabled?: boolean;
@@ -33,4 +34,4 @@ export type AgentChatComposerProps = {
     } | null;
     textareaRef?: React.Ref<HTMLTextAreaElement>;
 };
-export declare function AgentChatComposer({ inputContract, recordingEnabled, contextWindow, accept, allowAttachments, attachmentLayout, className, disabled, forceExpanded, focusKey, inputToolbarContent, isRunning, isCancelling, onAttachmentCountChange, onStop, onSubmit, placeholder, restoredDraft, textareaRef, }: AgentChatComposerProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentChatComposer({ inputContract, recordingEnabled, contextWindow, accept, allowAttachments, className, disabled, forceExpanded, focusKey, inputToolbarContent, isRunning, isCancelling, onAttachmentCountChange, onStop, onSubmit, placeholder, restoredDraft, textareaRef, }: AgentChatComposerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,8 +2,6 @@ import type { ThreadMessage, ThreadMessageQueueState } from "@agents24/client";
 export type AgentChatQueueProps = {
     pending: readonly ThreadMessage[];
     queue: ThreadMessageQueueState | null;
-    canSteer: boolean;
-    onSteer(message: ThreadMessage): Promise<void>;
     onRemove(message: ThreadMessage): Promise<void>;
     onEdit(message: ThreadMessage): Promise<void>;
     onResume(): Promise<void>;