@agents24/chat-react 0.5.5 → 0.5.7

package/dist/styles.css

@@ -57,7 +57,7 @@
 }
 .a24-scroller__viewport { flex: 1; height: 100%; min-height: 0; min-width: 0; overscroll-behavior: contain; overflow-y: auto; scrollbar-width: none; width: 100%; }
 .a24-scroller__viewport::-webkit-scrollbar { display: none; }
-.a24-scroller__content { display: flex; flex-direction: column; gap: 2rem; min-height: 100%; }
+.a24-scroller__content { display: flex; flex-direction: column; gap: .75rem; min-height: 100%; }
 .a24-scroller__item { animation: var(--a24-message-enter-animation); flex: 0 0 auto; min-width: 0; overflow: visible; }
 .a24-scroller__button {
   align-items: center;
@@ -155,7 +155,6 @@
 .a24-context-status__sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
 .a24-tool-disclosure { min-width: 0; width: 100%; }
 .a24-tool-trigger-row { align-items: center; display: flex; gap: .35rem; min-width: 0; }
-.a24-tool-trigger-row--text { padding-inline: 6px; }
 .a24-tool-trigger { align-items: center; appearance: none; background: transparent; border: 0; color: var(--a24-muted); display: flex; font: inherit; font-size: .875rem; gap: .35rem; line-height: 1.35; min-width: 0; padding: .125rem 0; text-align: start; }
 button.a24-tool-trigger { border-radius: .5rem; cursor: pointer; transition: background-color 140ms ease, color 140ms ease; }
 button.a24-tool-trigger:hover { color: var(--a24-text); }
@@ -208,11 +207,31 @@ button.a24-tool-trigger:focus-visible { outline: 2px solid var(--a24-focus); out
 .a24-message-response { box-sizing: border-box; max-width: 100%; min-width: 0; padding-inline: 6px; width: 100%; }
 .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--assistant { max-width: 100%; }
+.a24-chat-message { display: flex; flex-direction: column; min-width: 0; width: 100%; }
+.a24-chat-message--user { gap: 0; max-width: 100%; }
+.a24-chat-message--assistant { gap: .5rem; max-width: 100%; }
+.a24-chat-message-action-row--user { align-items: center; align-self: flex-start; display: flex; gap: .5rem; height: 2rem; margin-left: auto; margin-top: .25rem; padding-inline: .25rem; transition: opacity 150ms ease; width: auto; }
+.a24-user-message-actions { color: var(--a24-muted); font-family: inherit; font-size: .75rem; font-weight: 400; gap: .5rem; }
+.a24-user-message-actions time { white-space: nowrap; }
+.a24-user-message-copy { color: var(--a24-muted); height: 1.75rem; padding: 0; position: relative; width: 1.75rem; }
+.a24-user-message-copy:hover { color: var(--a24-text); }
+.a24-user-message-copy__check, .a24-user-message-copy__icon { height: .875rem; inset: 0; margin: auto; position: absolute; width: .875rem; }
+.a24-user-message-copy__icon { opacity: 0; transform: scale(.75); transition: opacity 150ms ease, transform 150ms ease; }
+.a24-chat-message-action-row--user.is-visible .a24-user-message-copy__icon { opacity: 1; transform: scale(1); }
+.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,8 @@ 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 AgentChatUserMessageActionRow({ children, className, }: {
+    children: React.ReactNode;
+    className?: string;
+}): 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;