@promptbook/cli 0.113.0-7 → 0.113.0-9

package/src/book-components/Chat/Chat/Chat.module.css

@@ -1433,6 +1433,65 @@
     text-decoration: none;
     transition: all 0.2s ease;
     max-width: 200px;
+    cursor: pointer;
+    font-family: inherit;
+    line-height: inherit;
+}
+
+.attachmentWithRemove {
+    gap: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.attachmentMainAction {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: 6px;
+    padding: 7px 8px 7px 12px;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    line-height: inherit;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.attachmentRemoveButton {
+    display: inline-flex;
+    flex: 0 0 auto;
+    width: 22px;
+    height: 22px;
+    align-items: center;
+    justify-content: center;
+    margin-right: 5px;
+    border: 0;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.24);
+    color: inherit;
+    cursor: pointer;
+    opacity: 0.85;
+    transition:
+        background 0.2s ease,
+        opacity 0.2s ease,
+        transform 0.2s ease;
+}
+
+.attachmentRemoveButton:hover {
+    background: rgba(239, 68, 68, 0.18);
+    opacity: 1;
+    transform: scale(1.04);
+}
+
+.attachmentRemoveButton svg {
+    width: 12px;
+    height: 12px;
+}
+
+.attachmentWithRemove .attachmentName {
+    min-width: 0;
 }
 
 .attachment:hover {
@@ -1667,6 +1726,15 @@
     margin-bottom: 8px;
 }
 
+.filePreviewContainer.attachments {
+    --message-bg-color: var(--input-bg-color);
+    --message-text-color: var(--input-text-color);
+    margin-top: 0;
+    padding-top: 0;
+    border-top: 0;
+    color: var(--input-text-color);
+}
+
 /* Individual file preview */
 .filePreview {
     display: flex;
@@ -2404,6 +2472,11 @@
     transition: color 0.2s;
 }
 
+.ratingModal[data-chat-modal='image-attachment'] {
+    box-sizing: border-box;
+    padding: 24px;
+}
+
 .toolCallModal {
     max-width: 800px;
     padding: 0;
@@ -2413,6 +2486,57 @@
     position: relative;
 }
 
+.imageAttachmentModal {
+    width: min(92vw, 1040px);
+    max-width: 1040px;
+    max-height: calc(100vh - 48px);
+    max-height: calc(100dvh - 48px);
+    padding: 0;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.imageAttachmentModalHeader {
+    flex: 0 0 auto;
+    padding: 20px 68px 14px 24px;
+    border-bottom: 1px solid #e2e8f0;
+    background: #f8fafc;
+}
+
+.imageAttachmentModalTitle {
+    margin: 0 !important;
+    color: #0f172a !important;
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    line-height: 1.35;
+    text-align: left !important;
+    overflow-wrap: anywhere;
+}
+
+.imageAttachmentModalPreview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1 1 auto;
+    min-height: 0;
+    max-height: calc(100vh - 130px);
+    max-height: calc(100dvh - 130px);
+    padding: 16px;
+    background: #0f172a;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+.imageAttachmentModalImage {
+    display: block;
+    max-width: 100%;
+    max-height: calc(100vh - 162px);
+    max-height: calc(100dvh - 162px);
+    object-fit: contain;
+}
+
 .toolCallHeader {
     display: flex;
     align-items: center;
@@ -4152,6 +4276,13 @@
         overflow-y: auto;
     }
 
+    .ratingModalContent.imageAttachmentModal {
+        padding: 0;
+        max-height: calc(100vh - 32px);
+        max-height: calc(100dvh - 32px);
+        overflow: hidden;
+    }
+
     .stars {
         gap: 6px;
         margin-bottom: 20px;
@@ -4299,6 +4430,11 @@
         align-items: flex-end;
     }
 
+    .ratingModal[data-chat-modal='image-attachment'] {
+        padding: 12px;
+        align-items: center;
+    }
+
     .ratingModalContent {
         margin: 0;
         width: 100%;
@@ -4306,6 +4442,29 @@
         max-height: 70vh;
         padding: 24px 16px 20px;
     }
+
+    .ratingModalContent.imageAttachmentModal {
+        width: 100%;
+        max-height: calc(100vh - 24px);
+        max-height: calc(100dvh - 24px);
+        padding: 0;
+        border-radius: 16px;
+    }
+
+    .imageAttachmentModalHeader {
+        padding: 16px 56px 12px 16px;
+    }
+
+    .imageAttachmentModalPreview {
+        max-height: calc(100vh - 96px);
+        max-height: calc(100dvh - 96px);
+        padding: 12px;
+    }
+
+    .imageAttachmentModalImage {
+        max-height: calc(100vh - 120px);
+        max-height: calc(100dvh - 120px);
+    }
 }
 
 /* Reduced motion support */

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

@@ -2,7 +2,7 @@
 // <- Note: [??] 'use client' is enforced by Next.js when building the https://book-components.ptbk.io/ but in ideal case,
 //          this would not be here because the `@promptbook/components` package should be React library independent of Next.js specifics
 
-import { useCallback, useMemo, type MouseEvent } from 'react';
+import { useCallback, useMemo, useState, type MouseEvent } from 'react';
 import { Color } from '../../../utils/color/Color';
 import { SolidArrowButton } from '../../icons/SolidArrowButton';
 import { classNames } from '../../_common/react-utils/classNames';
@@ -20,6 +20,7 @@ import { ChatMessageList } from './ChatMessageList';
 import type { ChatProps } from './ChatProps';
 import { ChatRatingModal } from './ChatRatingModal';
 import { ChatToolCallModal } from './ChatToolCallModal';
+import type { ChatComposerDraft } from './useChatInputAreaComposer';
 import { useChatPostprocessedMessages } from './useChatPostprocessedMessages';
 import { useChatScrollState } from './useChatScrollState';
 import { useChatToolCallState } from './useChatToolCallState';
@@ -79,6 +80,7 @@ export function Chat(props: ChatProps) {
         onMessage,
         onActionButton,
         onQuickMessageButton,
+        onQuickMessageDraftButton,
         onReplyToMessage,
         onCancelReply,
         onReset,
@@ -133,6 +135,16 @@ export function Chat(props: ChatProps) {
         () => participants.find((participant) => participant.name === 'AGENT'),
         [participants],
     );
+
+    // Note: A `?messageDraft=` quick button prefills the composer with an editable draft instead of
+    //       sending it. `<Chat/>` owns the composer, so it handles the draft itself unless the host
+    //       overrides the behavior via `onQuickMessageDraftButton`.
+    const [composerDraft, setComposerDraft] = useState<ChatComposerDraft | undefined>(undefined);
+    const handleInternalQuickMessageDraftButton = useCallback((messageDraftContent: string) => {
+        setComposerDraft({ content: messageDraftContent });
+    }, []);
+    const resolvedOnQuickMessageDraftButton =
+        onQuickMessageDraftButton ?? (onMessage ? handleInternalQuickMessageDraftButton : undefined);
     const postprocessedMessages = useChatPostprocessedMessages({
         messages,
         isAiTextHumanizedAndPromptbookified,
@@ -344,6 +356,7 @@ export function Chat(props: ChatProps) {
                         onMessage={onMessage}
                         onActionButton={onActionButton}
                         onQuickMessageButton={onQuickMessageButton}
+                        onQuickMessageDraftButton={resolvedOnQuickMessageDraftButton}
                         onReplyToMessage={onReplyToMessage}
                         canReplyToMessage={canReplyToMessage}
                         onCreateAgent={onCreateAgent}
@@ -377,6 +390,7 @@ export function Chat(props: ChatProps) {
                             replyingToMessage={replyingToMessage}
                             onCancelReply={onCancelReply}
                             defaultMessage={defaultMessage}
+                            draftMessage={composerDraft}
                             enterBehavior={enterBehavior}
                             resolveEnterBehavior={resolveEnterBehavior}
                             placeholderMessageContent={
@@ -390,6 +404,7 @@ export function Chat(props: ChatProps) {
                             soundSystem={soundSystem}
                             onButtonClick={handleButtonClick}
                             chatUiTranslations={chatUiTranslations}
+                            mode={mode}
                             chatInputClassName={classNames(
                                 isConstrainedArticleMode && styles.articleModeChatInput,
                                 getChatCssClassName('chatInput'),

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

@@ -3,15 +3,15 @@
 import { CloseIcon } from '../../icons/CloseIcon';
 import { DownloadIcon } from '../../icons/DownloadIcon';
 import { classNames } from '../../_common/react-utils/classNames';
+import { useResolvedCitationLabel } from '../hooks/useResolvedCitationLabel';
 import { MarkdownContent } from '../MarkdownContent/MarkdownContent';
 import type { ChatParticipant } from '../types/ChatParticipant';
 import type { CitationLabelResolver } from '../types/CitationLabelResolver';
-import { useResolvedCitationLabel } from '../hooks/useResolvedCitationLabel';
 import { isPlainTextCitation, resolveCitationPreviewUrl } from '../utils/citationHelpers';
 import type { ParsedCitation } from '../utils/parseCitationsFromContent';
 import styles from './Chat.module.css';
-import { CitationIframePreview } from './CitationIframePreview';
 import type { ChatSoundSystem } from './ChatProps';
+import { CitationIframePreview } from './CitationIframePreview';
 
 /**
  * Props for the citation preview modal.

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

@@ -0,0 +1,108 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { classNames } from '../../_common/react-utils/classNames';
+import { CloseIcon } from '../../icons/CloseIcon';
+import type { ChatMessage } from '../types/ChatMessage';
+import styles from './Chat.module.css';
+
+/**
+ * One attachment payload displayed by the chat image preview modal.
+ *
+ * @private type of `<ChatImageAttachmentModal/>`
+ */
+type ChatImageAttachment = NonNullable<ChatMessage['attachments']>[number];
+
+/**
+ * Props for the chat image attachment preview modal.
+ *
+ * @private props of `<ChatImageAttachmentModal/>`
+ */
+type ChatImageAttachmentModalProps = {
+    readonly attachment: ChatImageAttachment | null;
+    readonly mode?: 'LIGHT' | 'DARK';
+    readonly onClose: () => void;
+};
+
+/**
+ * Modal that previews an image attachment without leaving the chat surface.
+ *
+ * @private component of `<Chat/>`
+ */
+export function ChatImageAttachmentModal({ attachment, mode = 'LIGHT', onClose }: ChatImageAttachmentModalProps) {
+    const modalDialogRef = useRef<HTMLDivElement>(null);
+    const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+
+    useEffect(() => {
+        setPortalContainer(document.body);
+    }, []);
+
+    useEffect(() => {
+        if (!attachment || !portalContainer) {
+            return;
+        }
+
+        const previouslyFocusedElement = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+
+        function handleEscape(event: KeyboardEvent) {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        }
+
+        window.addEventListener('keydown', handleEscape);
+        modalDialogRef.current?.focus();
+
+        return () => {
+            window.removeEventListener('keydown', handleEscape);
+            previouslyFocusedElement?.focus();
+        };
+    }, [attachment, onClose, portalContainer]);
+
+    if (!attachment || !portalContainer) {
+        return null;
+    }
+
+    const attachmentName = attachment.name || 'Image attachment';
+
+    return createPortal(
+        <div
+            className={styles.ratingModal}
+            data-chat-modal="image-attachment"
+            data-chat-theme={mode.toLowerCase()}
+            onClick={(event) => {
+                event.stopPropagation();
+
+                if (event.target === event.currentTarget) {
+                    onClose();
+                }
+            }}
+        >
+            <div
+                ref={modalDialogRef}
+                className={classNames(styles.ratingModalContent, styles.imageAttachmentModal)}
+                role="dialog"
+                aria-modal="true"
+                aria-label={attachmentName}
+                tabIndex={-1}
+            >
+                <button
+                    type="button"
+                    className={styles.modalCloseButton}
+                    onClick={onClose}
+                    aria-label="Close image preview"
+                >
+                    <CloseIcon />
+                </button>
+                <div className={styles.imageAttachmentModalHeader}>
+                    <h3 className={styles.imageAttachmentModalTitle}>{attachmentName}</h3>
+                </div>
+                <div className={styles.imageAttachmentModalPreview}>
+                    <img src={attachment.url} alt={attachmentName} className={styles.imageAttachmentModalImage} />
+                </div>
+            </div>
+        </div>,
+        portalContainer,
+    );
+}

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

@@ -8,7 +8,6 @@ import { grayscale } from '../../../utils/color/operators/grayscale';
 import { lighten } from '../../../utils/color/operators/lighten';
 import type { WithTake } from '../../../utils/take/interfaces/ITakeChain';
 import { AttachmentIcon } from '../../icons/AttachmentIcon';
-import { CloseIcon } from '../../icons/CloseIcon';
 import { MicIcon } from '../../icons/MicIcon';
 import { SendIcon } from '../../icons/SendIcon';
 import { classNames } from '../../_common/react-utils/classNames';
@@ -21,9 +20,11 @@ import { chatCssClassNames } from './chatCssClassNames';
 import { ChatInputAreaDictationPanel } from './ChatInputAreaDictationPanel';
 import type { ChatInputUploadedFile } from './ChatInputUploadedFile';
 import type { ChatProps, ChatSoundSystem } from './ChatProps';
+import { ChatMessageAttachments, type ChatMessageAttachment } from './ChatMessageAttachments';
 import { ChatReplyPreview } from './ChatReplyPreview';
 import type { SpeechRecognitionUiDescriptor } from './resolveSpeechRecognitionUiDescriptor';
 import { useChatInputAreaAttachments } from './useChatInputAreaAttachments';
+import type { ChatComposerDraft } from './useChatInputAreaComposer';
 import { useChatInputAreaComposer } from './useChatInputAreaComposer';
 import { useChatInputAreaDictation } from './useChatInputAreaDictation';
 
@@ -48,6 +49,7 @@ export type ChatInputAreaProps = {
     speechRecognition?: ChatProps['speechRecognition'];
     speechRecognitionLanguage?: ChatProps['speechRecognitionLanguage'];
     defaultMessage?: string;
+    draftMessage?: ChatComposerDraft;
     replyingToMessage?: ChatMessage | null;
     onCancelReply?: ChatProps['onCancelReply'];
     enterBehavior?: ChatProps['enterBehavior'];
@@ -62,6 +64,7 @@ export type ChatInputAreaProps = {
     onButtonClick: ChatInputButtonClickHandler;
     chatInputClassName?: string;
     chatUiTranslations?: ChatProps['chatUiTranslations'];
+    mode?: 'LIGHT' | 'DARK';
 };
 
 /**
@@ -87,6 +90,19 @@ type ChatInputAreaColorModel = {
     readonly primaryButtonStyle: CSSProperties;
 };
 
+/**
+ * Converts one pending composer upload into the message attachment payload.
+ *
+ * @private function of `<ChatInputArea/>`
+ */
+function createUploadedFileAttachment(uploadedFile: ChatInputUploadedFile): ChatMessageAttachment {
+    return {
+        name: uploadedFile.file.name,
+        type: uploadedFile.file.type,
+        url: uploadedFile.content,
+    };
+}
+
 /**
  * Creates the shared color styles used by the composer.
  *
@@ -182,10 +198,6 @@ function createChatInputAreaRootProps(params: {
  *
  * @private component of `<ChatInputArea/>`
  */
-function formatUploadedFileSizeInKilobytes(fileSizeInBytes: number): string {
-    return `${(fileSizeInBytes / 1024).toFixed(1)} KB`;
-}
-
 /**
  * Renders the optional reply preview section.
  *
@@ -216,34 +228,30 @@ function ChatInputAreaReplyPreviewSection({ replyPreview }: { replyPreview: Chat
 function ChatInputAreaUploadedFilesSection(props: {
     readonly uploadedFiles: ReadonlyArray<ChatInputUploadedFile>;
     readonly removeUploadedFile: (fileId: string) => void;
+    readonly inputContainerStyle: CSSProperties;
+    readonly mode: 'LIGHT' | 'DARK';
 }) {
-    const { uploadedFiles, removeUploadedFile } = props;
+    const { uploadedFiles, removeUploadedFile, inputContainerStyle, mode } = props;
 
     if (uploadedFiles.length === 0) {
         return null;
     }
 
+    const attachments = uploadedFiles.map(createUploadedFileAttachment);
+
     return (
-        <div className={styles.filePreviewContainer}>
-            {uploadedFiles.map((uploadedFile) => (
-                <div key={uploadedFile.id} className={styles.filePreview}>
-                    <div className={styles.fileIcon}>📎</div>
-                    <div className={styles.fileInfo}>
-                        <div className={styles.fileName}>{uploadedFile.file.name}</div>
-                        <div className={styles.fileSize}>
-                            {formatUploadedFileSizeInKilobytes(uploadedFile.file.size)}
-                        </div>
-                    </div>
-                    <button
-                        className={styles.removeFileButton}
-                        onClick={() => removeUploadedFile(uploadedFile.id)}
-                        title="Remove file"
-                    >
-                        <CloseIcon />
-                    </button>
-                </div>
-            ))}
-        </div>
+        <ChatMessageAttachments
+            attachments={attachments}
+            className={styles.filePreviewContainer}
+            mode={mode}
+            onRemoveAttachment={(_attachment, attachmentIndex) => {
+                const uploadedFile = uploadedFiles[attachmentIndex];
+                if (uploadedFile) {
+                    removeUploadedFile(uploadedFile.id);
+                }
+            }}
+            style={inputContainerStyle}
+        />
     );
 }
 
@@ -521,6 +529,7 @@ export function ChatInputArea(props: ChatInputAreaProps) {
         speechRecognition,
         speechRecognitionLanguage,
         defaultMessage,
+        draftMessage,
         replyingToMessage,
         onCancelReply,
         enterBehavior,
@@ -535,6 +544,7 @@ export function ChatInputArea(props: ChatInputAreaProps) {
         onButtonClick,
         chatInputClassName,
         chatUiTranslations,
+        mode = 'LIGHT',
     } = props;
     const {
         fileInputRef,
@@ -566,6 +576,7 @@ export function ChatInputArea(props: ChatInputAreaProps) {
         onMessage,
         onChange,
         defaultMessage,
+        draftMessage,
         enterBehavior,
         resolveEnterBehavior,
         isFocusedOnLoad,
@@ -629,7 +640,12 @@ export function ChatInputArea(props: ChatInputAreaProps) {
         <div className={classNames(styles.chatInput, chatInputClassName, isDragOver && styles.dragOver)} {...rootProps}>
             <ChatInputAreaReplyPreviewSection replyPreview={replyPreview} />
 
-            <ChatInputAreaUploadedFilesSection uploadedFiles={uploadedFiles} removeUploadedFile={removeUploadedFile} />
+            <ChatInputAreaUploadedFilesSection
+                uploadedFiles={uploadedFiles}
+                removeUploadedFile={removeUploadedFile}
+                inputContainerStyle={inputContainerStyle}
+                mode={mode}
+            />
 
             <div
                 className={classNames(styles.inputContainer, chatCssClassNames.inputContainer)}