@promptbook/cli 0.113.0-8 → 0.114.0-0

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

@@ -1,17 +1,19 @@
 'use client';
 
+import { useEffect, useState } from 'react';
 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 type { CitationIframePreviewStatus } from './CitationIframePreview';
+import { CitationIframePreview } from './CitationIframePreview';
 
 /**
  * Props for the citation preview modal.
@@ -24,6 +26,13 @@ export type ChatCitationModalProps = {
     participants: ReadonlyArray<ChatParticipant>;
     resolveCitationLabel?: CitationLabelResolver;
     soundSystem?: ChatSoundSystem;
+
+    /**
+     * Optional agent identifier (name or permanent id) scoping the live browser fallback
+     * to the agent's persistent server-side browser profile.
+     */
+    agentIdentifier?: string;
+
     onClose: () => void;
 };
 
@@ -43,15 +52,20 @@ const EMPTY_MODAL_CITATION: ParsedCitation = {
  * @private component of `<Chat/>`
  */
 export function ChatCitationModal(props: ChatCitationModalProps) {
-    const { isOpen, citation, participants, resolveCitationLabel, soundSystem, onClose } = props;
+    const { isOpen, citation, participants, resolveCitationLabel, soundSystem, agentIdentifier, onClose } = props;
     const resolvedCitation = citation || EMPTY_MODAL_CITATION;
     const label = useResolvedCitationLabel(resolvedCitation, resolveCitationLabel);
+    const previewUrl = citation ? resolveCitationPreviewUrl(citation, participants) : null;
+    const [citationPreviewStatus, setCitationPreviewStatus] = useState<CitationIframePreviewStatus>('loading');
+
+    useEffect(() => {
+        setCitationPreviewStatus('loading');
+    }, [isOpen, previewUrl, citation?.source]);
 
     if (!isOpen || !citation) {
         return null;
     }
 
-    const previewUrl = resolveCitationPreviewUrl(citation, participants);
     const isValidUrl = !!previewUrl;
     const previewTarget = previewUrl ?? citation.source;
     const previewBase = previewTarget.split(/[?#]/)[0]!;
@@ -62,86 +76,113 @@ export function ChatCitationModal(props: ChatCitationModalProps) {
     const hasTextPreview = !isValidUrl && (citation.excerpt || isTextCitation);
     const textPreviewContent = isTextCitation ? citation.source : citation.excerpt ?? '';
     const textPreviewHeading = isTextCitation ? 'Text:' : 'Excerpt:';
+    const isLiveBrowserPreview = isValidUrl && !isImage && citationPreviewStatus === 'browser-stream';
+    const citationIframePreview =
+        isValidUrl && !isImage ? (
+            <CitationIframePreview
+                src={previewUrl ?? citation.source}
+                title={`Preview of ${label}`}
+                agentIdentifier={agentIdentifier}
+                onClose={isLiveBrowserPreview ? onClose : undefined}
+                onStatusChange={setCitationPreviewStatus}
+                initialStatus={citationPreviewStatus}
+            />
+        ) : null;
 
     return (
         <div
             className={styles.ratingModal}
+            data-chat-modal={isLiveBrowserPreview ? 'citation-browser' : undefined}
             onClick={(event) => {
                 if (event.target === event.currentTarget) {
                     onClose();
                 }
             }}
         >
-            <div className={classNames(styles.ratingModalContent, styles.toolCallModal)}>
-                <button type="button" className={styles.modalCloseButton} onClick={onClose} aria-label="Close dialog">
-                    <CloseIcon />
-                </button>
-                <div className={styles.searchModalHeader}>
-                    <span className={styles.searchModalIcon}>📄</span>
-                    <h3 className={styles.searchModalQuery}>{label}</h3>
-                </div>
+            <div
+                className={classNames(
+                    styles.ratingModalContent,
+                    styles.toolCallModal,
+                    isLiveBrowserPreview && styles.citationBrowserModal,
+                )}
+            >
+                {isLiveBrowserPreview ? (
+                    <div className={styles.citationBrowserModalBody}>{citationIframePreview}</div>
+                ) : (
+                    <>
+                        <button
+                            type="button"
+                            className={styles.modalCloseButton}
+                            onClick={onClose}
+                            aria-label="Close dialog"
+                        >
+                            <CloseIcon />
+                        </button>
+                        <div className={styles.searchModalHeader}>
+                            <span className={styles.searchModalIcon}>📄</span>
+                            <h3 className={styles.searchModalQuery}>{label}</h3>
+                        </div>
 
-                <div className={styles.searchModalContent}>
-                    <div className={styles.citationDetails}>
-                        {isValidUrl ? (
-                            <div className={styles.citationPreview}>
-                                {isImage ? (
-                                    <img
-                                        src={previewUrl ?? citation.source}
-                                        className={styles.citationImage}
-                                        alt={`Preview of ${citation.source}`}
-                                        style={{
-                                            maxWidth: '100%',
-                                            maxHeight: '100%',
-                                            objectFit: 'contain',
-                                            display: 'block',
-                                            margin: '0 auto',
-                                        }}
-                                    />
+                        <div className={styles.searchModalContent}>
+                            <div className={styles.citationDetails}>
+                                {isValidUrl ? (
+                                    <div className={styles.citationPreview}>
+                                        {isImage ? (
+                                            <img
+                                                src={previewUrl ?? citation.source}
+                                                className={styles.citationImage}
+                                                alt={`Preview of ${citation.source}`}
+                                                style={{
+                                                    maxWidth: '100%',
+                                                    maxHeight: '100%',
+                                                    objectFit: 'contain',
+                                                    display: 'block',
+                                                    margin: '0 auto',
+                                                }}
+                                            />
+                                        ) : (
+                                            citationIframePreview
+                                        )}
+                                    </div>
+                                ) : hasTextPreview ? (
+                                    <div className={styles.citationExcerpt}>
+                                        <h4>{textPreviewHeading}</h4>
+                                        <MarkdownContent content={textPreviewContent} />
+                                    </div>
                                 ) : (
-                                    <CitationIframePreview
-                                        src={previewUrl ?? citation.source}
-                                        title={`Preview of ${label}`}
-                                    />
+                                    <div
+                                        className={styles.noResults}
+                                        onClick={() => {
+                                            console.info({ citation });
+                                        }}
+                                    >
+                                        <p>📄 Document preview unavailable</p>
+                                    </div>
                                 )}
                             </div>
-                        ) : hasTextPreview ? (
-                            <div className={styles.citationExcerpt}>
-                                <h4>{textPreviewHeading}</h4>
-                                <MarkdownContent content={textPreviewContent} />
-                            </div>
-                        ) : (
-                            <div
-                                className={styles.noResults}
-                                onClick={() => {
-                                    console.info({ citation });
-                                }}
-                            >
-                                <p>📄 Document preview unavailable</p>
-                            </div>
-                        )}
-                    </div>
-                </div>
+                        </div>
 
-                <div className={styles.ratingActions}>
-                    {previewUrl && (
-                        <a
-                            href={previewUrl}
-                            download={citation.source}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className={styles.downloadButton}
-                            onClick={() => {
-                                if (soundSystem) {
-                                    /* not await */ soundSystem.play('button_click');
-                                }
-                            }}
-                        >
-                            <DownloadIcon size={18} />
-                            <span>Download</span>
-                        </a>
-                    )}
-                </div>
+                        <div className={styles.ratingActions}>
+                            {previewUrl && (
+                                <a
+                                    href={previewUrl}
+                                    download={citation.source}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className={styles.downloadButton}
+                                    onClick={() => {
+                                        if (soundSystem) {
+                                            /* not await */ soundSystem.play('button_click');
+                                        }
+                                    }}
+                                >
+                                    <DownloadIcon size={18} />
+                                    <span>Download</span>
+                                </a>
+                            )}
+                        </div>
+                    </>
+                )}
             </div>
         </div>
     );

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

@@ -0,0 +1,103 @@
+import { Star } from 'lucide-react';
+import type { CSSProperties, MouseEventHandler } from 'react';
+import { classNames } from '../../_common/react-utils/classNames';
+import styles from './Chat.module.css';
+
+/**
+ * Star values available in the chat feedback UI.
+ *
+ * @private constant of `<Chat/>`
+ */
+export const CHAT_FEEDBACK_STAR_RATINGS = [1, 2, 3, 4, 5] as const;
+
+/**
+ * Fill color used for selected chat feedback stars.
+ *
+ * @private constant of `<Chat/>`
+ */
+const CHAT_FEEDBACK_STAR_ACTIVE_COLOR = '#ffd700';
+
+/**
+ * Icon size follows the surrounding star text size.
+ *
+ * @private constant of `<Chat/>`
+ */
+const CHAT_FEEDBACK_STAR_ICON_SIZE = '1em';
+
+/**
+ * Props for the shared chat feedback star icon.
+ *
+ * @private type of `<Chat/>`
+ */
+type ChatFeedbackStarProps = {
+    readonly isActive: boolean;
+    readonly inactiveColor: string;
+    readonly className?: string;
+    readonly onClick?: MouseEventHandler<HTMLSpanElement>;
+    readonly onMouseEnter?: MouseEventHandler<HTMLSpanElement>;
+    readonly onMouseLeave?: MouseEventHandler<HTMLSpanElement>;
+};
+
+/**
+ * Resolves the inactive color for stars in the feedback controls.
+ *
+ * @param mode Current chat color mode.
+ * @param tone Visual weight for the inactive star.
+ * @returns Hex color for an inactive star.
+ *
+ * @private function of `<Chat/>`
+ */
+export function resolveChatFeedbackStarInactiveColor(mode: 'LIGHT' | 'DARK', tone: 'subtle' | 'muted' = 'subtle') {
+    if (tone === 'muted') {
+        return mode === 'LIGHT' ? '#888' : '#666';
+    }
+
+    return mode === 'LIGHT' ? '#ccc' : '#555';
+}
+
+/**
+ * Renders one CSS-colored feedback star.
+ *
+ * @private component of `<Chat/>`
+ */
+export function ChatFeedbackStar({
+    isActive,
+    inactiveColor,
+    className,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+}: ChatFeedbackStarProps) {
+    const chatFeedbackStarColor = isActive ? CHAT_FEEDBACK_STAR_ACTIVE_COLOR : inactiveColor;
+    const chatFeedbackStarFill = isActive ? 'currentColor' : 'none';
+    const chatFeedbackStarIconStyle = {
+        color: chatFeedbackStarColor,
+        fill: chatFeedbackStarFill,
+        stroke: chatFeedbackStarColor,
+    } as CSSProperties;
+
+    return (
+        <span
+            className={classNames(styles.feedbackStar, className)}
+            style={
+                {
+                    '--chat-feedback-star-color': chatFeedbackStarColor,
+                    '--chat-feedback-star-fill': chatFeedbackStarFill,
+                    color: chatFeedbackStarColor,
+                } as CSSProperties
+            }
+            onClick={onClick}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+        >
+            <Star
+                aria-hidden="true"
+                focusable="false"
+                className={styles.feedbackStarIcon}
+                size={CHAT_FEEDBACK_STAR_ICON_SIZE}
+                fill={chatFeedbackStarFill}
+                style={chatFeedbackStarIconStyle}
+            />
+        </span>
+    );
+}

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';
@@ -20,10 +19,13 @@ import styles from './Chat.module.css';
 import { chatCssClassNames } from './chatCssClassNames';
 import { ChatInputAreaDictationPanel } from './ChatInputAreaDictationPanel';
 import type { ChatInputUploadedFile } from './ChatInputUploadedFile';
+import type { ChatMessageAttachment } from './ChatMessageAttachments';
+import { ChatMessageAttachments } from './ChatMessageAttachments';
 import type { ChatProps, ChatSoundSystem } from './ChatProps';
 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 +50,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 +65,7 @@ export type ChatInputAreaProps = {
     onButtonClick: ChatInputButtonClickHandler;
     chatInputClassName?: string;
     chatUiTranslations?: ChatProps['chatUiTranslations'];
+    mode?: 'LIGHT' | 'DARK';
 };
 
 /**
@@ -87,6 +91,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 +199,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 +229,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 +530,7 @@ export function ChatInputArea(props: ChatInputAreaProps) {
         speechRecognition,
         speechRecognitionLanguage,
         defaultMessage,
+        draftMessage,
         replyingToMessage,
         onCancelReply,
         enterBehavior,
@@ -535,6 +545,7 @@ export function ChatInputArea(props: ChatInputAreaProps) {
         onButtonClick,
         chatInputClassName,
         chatUiTranslations,
+        mode = 'LIGHT',
     } = props;
     const {
         fileInputRef,
@@ -566,6 +577,7 @@ export function ChatInputArea(props: ChatInputAreaProps) {
         onMessage,
         onChange,
         defaultMessage,
+        draftMessage,
         enterBehavior,
         resolveEnterBehavior,
         isFocusedOnLoad,
@@ -629,7 +641,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)}