@promptbook/cli 0.113.0-1 → 0.113.0-10

package/src/book-components/Chat/Chat/ChatMessageAttachments.tsx

@@ -0,0 +1,212 @@
+'use client';
+
+import { useState, type CSSProperties } from 'react';
+import { classNames } from '../../_common/react-utils/classNames';
+import { CloseIcon } from '../../icons/CloseIcon';
+import type { ChatMessage } from '../types/ChatMessage';
+import styles from './Chat.module.css';
+import { ChatImageAttachmentModal } from './ChatImageAttachmentModal';
+
+/**
+ * One uploaded file attached to a chat message.
+ *
+ * @private type of `<Chat/>`
+ */
+export type ChatMessageAttachment = NonNullable<ChatMessage['attachments']>[number];
+
+/**
+ * File extensions treated as image attachments when the MIME type is missing.
+ *
+ * @private constant of `<ChatMessageAttachments/>`
+ */
+const IMAGE_ATTACHMENT_EXTENSIONS = new Set(['avif', 'gif', 'jpg', 'jpeg', 'png', 'svg', 'webp']);
+
+/**
+ * Props accepted by the shared attachment chip list.
+ *
+ * @private props of `<Chat/>`
+ */
+type ChatMessageAttachmentsProps = {
+    readonly attachments: ReadonlyArray<ChatMessageAttachment>;
+    readonly mode: 'LIGHT' | 'DARK';
+    readonly className?: string;
+    readonly style?: CSSProperties;
+    readonly onRemoveAttachment?: (attachment: ChatMessageAttachment, attachmentIndex: number) => void;
+};
+
+/**
+ * Returns whether the attachment should open in the in-chat image preview.
+ *
+ * @private function of `<ChatMessageAttachments/>`
+ */
+function isImageChatMessageAttachment(attachment: ChatMessageAttachment): boolean {
+    if (attachment.type.toLowerCase().startsWith('image/')) {
+        return true;
+    }
+
+    const extension =
+        getChatMessageAttachmentExtension(attachment.url) || getChatMessageAttachmentExtension(attachment.name);
+
+    return Boolean(extension && IMAGE_ATTACHMENT_EXTENSIONS.has(extension));
+}
+
+/**
+ * Gets a file extension from an attachment URL or name.
+ *
+ * @private function of `<ChatMessageAttachments/>`
+ */
+function getChatMessageAttachmentExtension(value: string): string | null {
+    const pathname = value.split(/[?#]/)[0] ?? '';
+    const filename = pathname.split(/[\\/]/).pop();
+
+    if (!filename || !filename.includes('.')) {
+        return null;
+    }
+
+    return filename.split('.').pop()?.toLowerCase() || null;
+}
+
+/**
+ * Renders the shared clickable body of one attachment chip.
+ *
+ * @private component of `<ChatMessageAttachments/>`
+ */
+function ChatMessageAttachmentChipBody(props: {
+    readonly attachment: ChatMessageAttachment;
+    readonly isImageAttachment: boolean;
+    readonly className?: string;
+    readonly onOpenImageAttachment: (attachment: ChatMessageAttachment) => void;
+}) {
+    const { attachment, isImageAttachment, className, onOpenImageAttachment } = props;
+    const content = (
+        <>
+            <span className={styles.attachmentIcon}>📎</span>
+            <span className={styles.attachmentName}>{attachment.name}</span>
+        </>
+    );
+
+    if (isImageAttachment) {
+        return (
+            <button
+                type="button"
+                className={className || styles.attachment}
+                title={attachment.name}
+                aria-label={`Open image attachment ${attachment.name}`}
+                onPointerDown={(event) => {
+                    event.stopPropagation();
+                }}
+                onClick={(event) => {
+                    event.stopPropagation();
+                    onOpenImageAttachment(attachment);
+                }}
+            >
+                {content}
+            </button>
+        );
+    }
+
+    return (
+        <a
+            href={attachment.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={className || styles.attachment}
+            title={attachment.name}
+        >
+            {content}
+        </a>
+    );
+}
+
+/**
+ * Renders one attachment chip, optionally with composer removal controls.
+ *
+ * @private component of `<ChatMessageAttachments/>`
+ */
+function ChatMessageAttachmentChip(props: {
+    readonly attachment: ChatMessageAttachment;
+    readonly attachmentIndex: number;
+    readonly onOpenImageAttachment: (attachment: ChatMessageAttachment) => void;
+    readonly onRemoveAttachment?: (attachment: ChatMessageAttachment, attachmentIndex: number) => void;
+}) {
+    const { attachment, attachmentIndex, onOpenImageAttachment, onRemoveAttachment } = props;
+    const isImageAttachment = isImageChatMessageAttachment(attachment);
+
+    if (!onRemoveAttachment) {
+        return (
+            <ChatMessageAttachmentChipBody
+                attachment={attachment}
+                isImageAttachment={isImageAttachment}
+                onOpenImageAttachment={onOpenImageAttachment}
+            />
+        );
+    }
+
+    return (
+        <span className={classNames(styles.attachment, styles.attachmentWithRemove)} title={attachment.name}>
+            <ChatMessageAttachmentChipBody
+                attachment={attachment}
+                isImageAttachment={isImageAttachment}
+                className={styles.attachmentMainAction}
+                onOpenImageAttachment={onOpenImageAttachment}
+            />
+            <button
+                type="button"
+                className={styles.attachmentRemoveButton}
+                onPointerDown={(event) => {
+                    event.stopPropagation();
+                }}
+                onClick={(event) => {
+                    event.stopPropagation();
+                    onRemoveAttachment(attachment, attachmentIndex);
+                }}
+                aria-label={`Remove attachment ${attachment.name}`}
+                title="Remove attachment"
+            >
+                <CloseIcon />
+            </button>
+        </span>
+    );
+}
+
+/**
+ * Renders chat attachment chips and the shared image preview modal.
+ *
+ * @private component of `<Chat/>`
+ */
+export function ChatMessageAttachments({
+    attachments,
+    mode,
+    className,
+    style,
+    onRemoveAttachment,
+}: ChatMessageAttachmentsProps) {
+    const [selectedImageAttachment, setSelectedImageAttachment] = useState<ChatMessageAttachment | null>(null);
+
+    if (attachments.length === 0) {
+        return null;
+    }
+
+    return (
+        <>
+            <div className={classNames(styles.attachments, className)} style={style}>
+                {attachments.map((attachment, index) => (
+                    <ChatMessageAttachmentChip
+                        key={`${attachment.url}-${attachment.name}-${index}`}
+                        attachment={attachment}
+                        attachmentIndex={index}
+                        onOpenImageAttachment={setSelectedImageAttachment}
+                        onRemoveAttachment={onRemoveAttachment}
+                    />
+                ))}
+            </div>
+            <ChatImageAttachmentModal
+                attachment={selectedImageAttachment}
+                mode={mode}
+                onClose={() => {
+                    setSelectedImageAttachment(null);
+                }}
+            />
+        </>
+    );
+}

package/src/book-components/Chat/Chat/ChatMessageItem.tsx

@@ -17,8 +17,8 @@ import { MarkdownContent } from '../MarkdownContent/MarkdownContent';
 import { SourceChip } from '../SourceChip/SourceChip';
 import type { ChatMessage } from '../types/ChatMessage';
 import type { ChatParticipant } from '../types/ChatParticipant';
-import { createCitationFootnoteRenderModel } from '../utils/createCitationFootnoteRenderModel';
 import { resolveCitationPreviewUrl } from '../utils/citationHelpers';
+import { createCitationFootnoteRenderModel } from '../utils/createCitationFootnoteRenderModel';
 import { getChatMessageTimingDisplay } from '../utils/getChatMessageTimingDisplay';
 import type { ParsedCitation } from '../utils/parseCitationsFromContent';
 import type { MessageButton } from '../utils/parseMessageButtons';
@@ -32,6 +32,7 @@ import {
 import { splitMessageContentIntoSegments } from '../utils/splitMessageContentIntoSegments';
 import styles from './Chat.module.css';
 import { chatCssClassNames } from './chatCssClassNames';
+import { ChatMessageAttachments } from './ChatMessageAttachments';
 import { ChatMessageRichContent } from './ChatMessageRichContent';
 import { ChatMessageToolCallChips } from './ChatMessageToolCallChips';
 import type { ChatProps } from './ChatProps';
@@ -49,7 +50,7 @@ import { useChatMessageSpeechPlayback } from './useChatMessageSpeechPlayback';
  */
 type ChatMessageItemProps = Pick<
     ChatProps,
-    'onMessage' | 'onActionButton' | 'onQuickMessageButton' | 'participants'
+    'onMessage' | 'onActionButton' | 'onQuickMessageButton' | 'onQuickMessageDraftButton' | 'participants'
 > & {
     message: ChatMessage;
     participant: ChatParticipant | undefined;
@@ -243,6 +244,7 @@ export const ChatMessageItem = memo(
             onMessage,
             onActionButton,
             onQuickMessageButton,
+            onQuickMessageDraftButton,
             setExpandedMessageId,
             isExpanded,
             currentRating,
@@ -404,6 +406,14 @@ export const ChatMessageItem = memo(
                         return nextButtons;
                     }
 
+                    if (button.type === 'messageDraft') {
+                        if (onQuickMessageDraftButton) {
+                            nextButtons.push({ button, buttonIndex });
+                        }
+
+                        return nextButtons;
+                    }
+
                     if (!onActionButton || consumedActionButtonIndexes.has(buttonIndex)) {
                         return nextButtons;
                     }
@@ -411,7 +421,14 @@ export const ChatMessageItem = memo(
                     nextButtons.push({ button, buttonIndex });
                     return nextButtons;
                 }, []),
-            [buttons, consumedActionButtonIndexes, onActionButton, onMessage, onQuickMessageButton],
+            [
+                buttons,
+                consumedActionButtonIndexes,
+                onActionButton,
+                onMessage,
+                onQuickMessageButton,
+                onQuickMessageDraftButton,
+            ],
         );
         const shouldShowButtons = isLastMessage && renderableButtons.length > 0;
         const speechPlaybackEnabled = isSpeechPlaybackEnabled ?? true;
@@ -938,21 +955,7 @@ export const ChatMessageItem = memo(
                         </div>
 
                         {message.attachments && message.attachments.length > 0 && (
-                            <div className={styles.attachments}>
-                                {message.attachments.map((attachment, index) => (
-                                    <a
-                                        key={index}
-                                        href={attachment.url}
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className={styles.attachment}
-                                        title={attachment.name}
-                                    >
-                                        <span className={styles.attachmentIcon}>📎</span>
-                                        <span className={styles.attachmentName}>{attachment.name}</span>
-                                    </a>
-                                ))}
-                            </div>
+                            <ChatMessageAttachments attachments={message.attachments} mode={mode} />
                         )}
 
                         <ChatMessageToolCallChips chips={toolCallChips} onToolCallClick={onToolCallClick} />
@@ -1009,6 +1012,13 @@ export const ChatMessageItem = memo(
                                                 return;
                                             }
 
+                                            if (button.type === 'messageDraft') {
+                                                if (onQuickMessageDraftButton) {
+                                                    void onQuickMessageDraftButton(button.messageDraft);
+                                                }
+                                                return;
+                                            }
+
                                             void handleActionButtonClick(buttonIndex, button.code);
                                         }}
                                         disabled={button.type === 'action' && pendingActionButtonIndex === buttonIndex}
@@ -1162,6 +1172,10 @@ export const ChatMessageItem = memo(
             return false;
         }
 
+        if (prev.onQuickMessageDraftButton !== next.onQuickMessageDraftButton) {
+            return false;
+        }
+
         if (prev.onReplyToMessage !== next.onReplyToMessage) {
             return false;
         }

package/src/book-components/Chat/Chat/ChatMessageList.tsx

@@ -50,6 +50,7 @@ export type ChatMessageListProps = {
     onMessage?: (messageContent: string) => Promisable<void>;
     onActionButton?: ChatProps['onActionButton'];
     onQuickMessageButton?: ChatProps['onQuickMessageButton'];
+    onQuickMessageDraftButton?: ChatProps['onQuickMessageDraftButton'];
     onReplyToMessage?: ChatProps['onReplyToMessage'];
     canReplyToMessage?: ChatProps['canReplyToMessage'];
     onCreateAgent?: (bookContent: string) => void;
@@ -97,6 +98,7 @@ export function ChatMessageList(props: ChatMessageListProps) {
         onMessage,
         onActionButton,
         onQuickMessageButton,
+        onQuickMessageDraftButton,
         onReplyToMessage,
         canReplyToMessage,
         onCreateAgent,
@@ -149,6 +151,7 @@ export function ChatMessageList(props: ChatMessageListProps) {
                         onMessage={onMessage}
                         onActionButton={onActionButton}
                         onQuickMessageButton={onQuickMessageButton}
+                        onQuickMessageDraftButton={onQuickMessageDraftButton}
                         onReplyToMessage={onReplyToMessage}
                         canReplyToMessage={canReplyToMessage}
                         setExpandedMessageId={setExpandedMessageId}

package/src/book-components/Chat/Chat/ChatProps.tsx

@@ -549,6 +549,15 @@ export type ChatProps = {
      */
     onQuickMessageButton?(messageContent: string): Promisable<void>;
 
+    /**
+     * Called when user clicks a quick draft-message button parsed from message markdown.
+     *
+     * Unlike `onQuickMessageButton`, this prefills the composer with an editable draft
+     * instead of sending the message. When not provided, `<Chat/>` prefills its own
+     * composer so the draft can be edited before sending.
+     */
+    onQuickMessageDraftButton?(messageDraftContent: string): Promisable<void>;
+
     /**
      * Optional callback fired when the user starts replying to one existing message.
      */