@promptbook/cli 0.113.0-8 → 0.114.0-0

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

@@ -942,11 +942,27 @@
     cursor: pointer;
     font-size: 20px;
     transition: color 0.2s;
-    color: var(--star-inactive-color, #ccc);
+    color: var(--chat-feedback-star-color, var(--star-inactive-color, #ccc));
 }
 
-.ratingStar.active {
-    color: #ffd700;
+.feedbackStar {
+    color: var(--chat-feedback-star-color, #ccc);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+}
+
+.feedbackStarIcon {
+    display: block;
+    color: var(--chat-feedback-star-color, currentColor) !important;
+    fill: var(--chat-feedback-star-fill, none) !important;
+    stroke: var(--chat-feedback-star-color, currentColor) !important;
+}
+
+.feedbackStarIcon * {
+    fill: var(--chat-feedback-star-fill, none) !important;
+    stroke: var(--chat-feedback-star-color, currentColor) !important;
 }
 
 /* Sender Avatar */
@@ -1433,6 +1449,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 +1742,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;
@@ -2322,8 +2406,7 @@
     right: 0;
     bottom: 0;
 
-    background-color: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(8px);
+    background-color: rgba(15, 23, 42, 0.76);
 
     display: flex;
     justify-content: center;
@@ -2335,11 +2418,9 @@
 @keyframes modalFadeIn {
     from {
         opacity: 0;
-        backdrop-filter: blur(0px);
     }
     to {
         opacity: 1;
-        backdrop-filter: blur(8px);
     }
 }
 
@@ -2404,6 +2485,16 @@
     transition: color 0.2s;
 }
 
+.ratingModal[data-chat-modal='image-attachment'] {
+    box-sizing: border-box;
+    padding: 24px;
+}
+
+.ratingModal[data-chat-modal='citation-browser'] {
+    box-sizing: border-box;
+    padding: 24px;
+}
+
 .toolCallModal {
     max-width: 800px;
     padding: 0;
@@ -2413,6 +2504,76 @@
     position: relative;
 }
 
+.citationBrowserModal {
+    width: min(90vw, 800px);
+    max-width: 800px;
+    max-height: calc(100vh - 48px);
+    max-height: calc(100dvh - 48px);
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    background: #f8fafc;
+}
+
+.citationBrowserModalBody {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+}
+
+.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;
@@ -3356,41 +3517,160 @@
     text-decoration: underline;
 }
 
-.citationBrowserStreamFallback {
+.liveBrowserPreview {
     width: 100%;
-    position: relative;
+    min-height: 0;
     display: flex;
     flex-direction: column;
+    background: #f8fafc;
+}
+
+.citationBrowserModal .liveBrowserPreview {
+    flex: 1 1 auto;
+    min-height: 0;
+}
+
+.liveBrowserPreview:fullscreen {
+    background: #0f172a;
+}
+
+.liveBrowserPreviewToolbar {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 6px 8px;
+    background: #f1f5f9;
+    border-bottom: 1px solid #e2e8f0;
+}
+
+.liveBrowserPreviewToolbarButton {
+    flex: none;
+    min-width: 28px;
+    height: 28px;
+    padding: 0 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: #334155;
+    font-size: 14px;
+    line-height: 1;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background 0.15s;
+}
+
+.liveBrowserPreviewToolbarButton:hover:not(:disabled) {
+    background: #e2e8f0;
 }
 
-.citationBrowserStreamImage {
+.liveBrowserPreviewToolbarButton:disabled {
+    opacity: 0.35;
+    cursor: default;
+}
+
+.liveBrowserPreviewZoomLabel {
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+}
+
+.liveBrowserPreviewToolbarCloseButton {
+    margin-left: 2px;
+}
+
+.liveBrowserPreviewToolbarCloseButton svg {
+    width: 14px;
+    height: 14px;
+}
+
+.liveBrowserPreviewUrlForm {
+    flex: 1;
+    min-width: 0;
+    margin: 0 4px;
+}
+
+.liveBrowserPreviewUrlInput {
     width: 100%;
-    max-height: 60vh;
+    padding: 5px 12px;
+    border: 1px solid #e2e8f0;
+    border-radius: 999px;
+    background: #ffffff;
+    color: #0f172a;
+    font-size: 12px;
+    outline: none;
+}
+
+.liveBrowserPreviewUrlInput:focus {
+    border-color: #94a3b8;
+}
+
+.liveBrowserPreviewStreamArea {
+    position: relative;
+    height: 60vh;
     min-height: 400px;
-    object-fit: cover;
-    object-position: top;
+    overflow: auto;
+    background: #f8f8f8;
+    outline: none;
+    touch-action: none;
+}
+
+.citationBrowserModal .liveBrowserPreviewStreamArea {
+    height: min(60vh, 640px);
+    min-height: min(400px, calc(100dvh - 140px));
+}
+
+.liveBrowserPreviewStreamArea:focus-visible {
+    box-shadow: inset 0 0 0 2px #94a3b8;
+}
+
+.liveBrowserPreview:fullscreen .liveBrowserPreviewStreamArea {
+    flex: 1;
+    height: auto;
+    min-height: 0;
+}
+
+.liveBrowserPreviewStreamImage {
+    position: relative;
     display: block;
-    cursor: crosshair;
+    width: 100%;
+    background: #ffffff;
     user-select: none;
     touch-action: none;
 }
 
-.citationBrowserStreamLink {
-    display: block;
-    text-align: center;
-    padding: 10px 16px;
-    background: #f0f0f0;
-    color: #333;
+.liveBrowserPreviewConnecting {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #64748b;
     font-size: 0.9em;
-    font-weight: 500;
-    text-decoration: none;
-    border-top: 1px solid #ddd;
-    transition: background 0.15s;
 }
 
-.citationBrowserStreamLink:hover {
-    background: #e0e0e0;
-    text-decoration: underline;
+.liveBrowserPreviewOverlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    background: rgba(15, 23, 42, 0.55);
+    color: #ffffff;
+    text-align: center;
+}
+
+.liveBrowserPreviewOverlayButton {
+    padding: 8px 20px;
+    border: none;
+    border-radius: 999px;
+    background: #ffffff;
+    color: #0f172a;
+    font-weight: 600;
+    cursor: pointer;
 }
 
 .citationMetadata {
@@ -4152,6 +4432,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 +4586,16 @@
         align-items: flex-end;
     }
 
+    .ratingModal[data-chat-modal='image-attachment'] {
+        padding: 12px;
+        align-items: center;
+    }
+
+    .ratingModal[data-chat-modal='citation-browser'] {
+        padding: 8px;
+        align-items: center;
+    }
+
     .ratingModalContent {
         margin: 0;
         width: 100%;
@@ -4306,6 +4603,42 @@
         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;
+    }
+
+    .ratingModalContent.citationBrowserModal {
+        width: 100%;
+        max-height: calc(100vh - 16px);
+        max-height: calc(100dvh - 16px);
+        padding: 0;
+        border-radius: 14px;
+    }
+
+    .citationBrowserModal .liveBrowserPreviewStreamArea {
+        height: 58vh;
+        min-height: min(320px, calc(100dvh - 112px));
+    }
+
+    .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,
@@ -117,6 +119,7 @@ export function Chat(props: ChatProps) {
         toolTitles,
         teammates,
         teamAgentProfiles,
+        markdownInlineReferences,
         layout,
         visualMode = 'ARTICLE_MODE',
         theme = 'LIGHT',
@@ -126,6 +129,7 @@ export function Chat(props: ChatProps) {
         isSpeechPlaybackEnabled = true,
         elevenLabsVoiceId,
         chatUiTranslations,
+        agentIdentifier,
     } = props;
 
     const buttonColor = useMemo(() => Color.from(buttonColorRaw || '#0066cc'), [buttonColorRaw]);
@@ -133,6 +137,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,12 +358,14 @@ export function Chat(props: ChatProps) {
                         onMessage={onMessage}
                         onActionButton={onActionButton}
                         onQuickMessageButton={onQuickMessageButton}
+                        onQuickMessageDraftButton={resolvedOnQuickMessageDraftButton}
                         onReplyToMessage={onReplyToMessage}
                         canReplyToMessage={canReplyToMessage}
                         onCreateAgent={onCreateAgent}
                         toolTitles={toolTitles}
                         teammates={teammates}
                         teamAgentProfiles={teamAgentProfiles}
+                        markdownInlineReferences={markdownInlineReferences}
                         visualMode={visualMode}
                         soundSystem={soundSystem}
                         onToolCallClick={openToolCall}
@@ -377,6 +393,7 @@ export function Chat(props: ChatProps) {
                             replyingToMessage={replyingToMessage}
                             onCancelReply={onCancelReply}
                             defaultMessage={defaultMessage}
+                            draftMessage={composerDraft}
                             enterBehavior={enterBehavior}
                             resolveEnterBehavior={resolveEnterBehavior}
                             placeholderMessageContent={
@@ -390,6 +407,7 @@ export function Chat(props: ChatProps) {
                             soundSystem={soundSystem}
                             onButtonClick={handleButtonClick}
                             chatUiTranslations={chatUiTranslations}
+                            mode={mode}
                             chatInputClassName={classNames(
                                 isConstrainedArticleMode && styles.articleModeChatInput,
                                 getChatCssClassName('chatInput'),
@@ -422,6 +440,7 @@ export function Chat(props: ChatProps) {
                 participants={participants}
                 resolveCitationLabel={resolveCitationLabel}
                 soundSystem={soundSystem}
+                agentIdentifier={agentIdentifier}
                 onClose={closeCitationModal}
             />