@promptbook/cli 0.113.0-9 → 0.114.0-0

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

@@ -19,8 +19,9 @@ 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 { ChatMessageAttachments, type ChatMessageAttachment } from './ChatMessageAttachments';
 import { ChatReplyPreview } from './ChatReplyPreview';
 import type { SpeechRecognitionUiDescriptor } from './resolveSpeechRecognitionUiDescriptor';
 import { useChatInputAreaAttachments } from './useChatInputAreaAttachments';

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

@@ -35,10 +35,12 @@ import { chatCssClassNames } from './chatCssClassNames';
 import { ChatMessageAttachments } from './ChatMessageAttachments';
 import { ChatMessageRichContent } from './ChatMessageRichContent';
 import { ChatMessageToolCallChips } from './ChatMessageToolCallChips';
+import { CHAT_FEEDBACK_STAR_RATINGS, ChatFeedbackStar, resolveChatFeedbackStarInactiveColor } from './ChatFeedbackStar';
 import type { ChatProps } from './ChatProps';
 import { ChatReplyPreview } from './ChatReplyPreview';
 import { createChatMessageToolCallRenderModel } from './createChatMessageToolCallRenderModel';
 import { createProgressCardChecklistMarkdown, isProgressCardVisible } from './createProgressCardChecklistMarkdown';
+import { resolveChatRatingMessageKey } from './resolveChatRatingMessageKey';
 import { resolveStreamingFeaturePlaceholderKind } from './StreamingFeaturePlaceholder';
 import { useChatMessageAvatarTooltip } from './useChatMessageAvatarTooltip';
 import { useChatMessageSpeechPlayback } from './useChatMessageSpeechPlayback';
@@ -118,6 +120,10 @@ type ChatMessageItemProps = Pick<
      * Optional cached metadata keyed by TEAM tool names to enrich tool call chips.
      */
     teamAgentProfiles?: ChatProps['teamAgentProfiles'];
+    /**
+     * Optional inline references rendered from `[[reference]]` tokens in message markdown.
+     */
+    markdownInlineReferences?: ChatProps['markdownInlineReferences'];
     /**
      * Controls whether assistant replies render as bubbles or article blocks.
      */
@@ -264,6 +270,7 @@ export const ChatMessageItem = memo(
             onReplyToMessage,
             canReplyToMessage,
             teamAgentProfiles,
+            markdownInlineReferences,
             visualMode = 'ARTICLE_MODE',
             onToolCallClick,
             onCitationClick,
@@ -631,7 +638,7 @@ export const ChatMessageItem = memo(
                         isReportIssueFeedbackMode
                             ? undefined
                             : () => {
-                                  setExpandedMessageId(message.id || message.content /* <-[💃] */);
+                                  setExpandedMessageId(resolveChatRatingMessageKey(message));
                               }
                     }
                     onMouseLeave={
@@ -656,36 +663,23 @@ export const ChatMessageItem = memo(
                             ⚠
                         </button>
                     ) : isExpanded ? (
-                        [1, 2, 3, 4, 5].map((star) => (
-                            <span
+                        CHAT_FEEDBACK_STAR_RATINGS.map((star) => (
+                            <ChatFeedbackStar
                                 key={star}
                                 onClick={() => handleRating(message, star)}
                                 onMouseEnter={() => setLocalHoveredRating(star)}
-                                className={classNames(
-                                    styles.ratingStar,
-                                    star <= (localHoveredRating || currentRating || 0) && styles.active,
-                                )}
-                                style={
-                                    {
-                                        '--star-inactive-color': mode === 'LIGHT' ? '#ccc' : '#555',
-                                    } as CSSProperties
-                                }
-                            >
-                                ⭐
-                            </span>
+                                className={styles.ratingStar}
+                                isActive={star <= (localHoveredRating || currentRating || 0)}
+                                inactiveColor={resolveChatFeedbackStarInactiveColor(mode)}
+                            />
                         ))
                     ) : (
-                        <span
+                        <ChatFeedbackStar
                             onClick={() => handleRating(message, currentRating || 1)}
-                            className={classNames(styles.ratingStar, currentRating && styles.active)}
-                            style={
-                                {
-                                    '--star-inactive-color': mode === 'LIGHT' ? '#888' : '#666',
-                                } as CSSProperties
-                            }
-                        >
-                            ⭐
-                        </span>
+                            className={styles.ratingStar}
+                            isActive={Boolean(currentRating)}
+                            inactiveColor={resolveChatFeedbackStarInactiveColor(mode, 'muted')}
+                        />
                     )}
                 </div>
             );
@@ -950,6 +944,7 @@ export const ChatMessageItem = memo(
                                 contentSegments={contentSegments}
                                 streamingFeaturePlaceholderKind={streamingFeaturePlaceholderKind}
                                 onCreateAgent={onCreateAgent}
+                                markdownInlineReferences={markdownInlineReferences}
                                 mode={mode}
                             />
                         </div>
@@ -1224,6 +1219,10 @@ export const ChatMessageItem = memo(
             return false;
         }
 
+        if (prev.markdownInlineReferences !== next.markdownInlineReferences) {
+            return false;
+        }
+
         if (prev.onToolCallClick !== next.onToolCallClick) {
             return false;
         }

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

@@ -10,6 +10,7 @@ import type { ParsedCitation } from '../utils/parseCitationsFromContent';
 import styles from './Chat.module.css';
 import { ChatMessageItem } from './ChatMessageItem';
 import type { ChatProps } from './ChatProps';
+import { resolveChatRatingMessageKey } from './resolveChatRatingMessageKey';
 
 /**
  * Props for the Chat message list container.
@@ -57,6 +58,10 @@ export type ChatMessageListProps = {
     toolTitles?: Record<string, string>;
     teammates?: ChatProps['teammates'];
     teamAgentProfiles?: ChatProps['teamAgentProfiles'];
+    /**
+     * Optional inline references rendered from `[[reference]]` tokens in message markdown.
+     */
+    markdownInlineReferences?: ChatProps['markdownInlineReferences'];
     visualMode?: ChatProps['visualMode'];
     onToolCallClick?: (toolCall: NonNullable<ChatMessage['toolCalls']>[number]) => void;
     onCitationClick?: (citation: ParsedCitation) => void;
@@ -104,6 +109,7 @@ export function ChatMessageList(props: ChatMessageListProps) {
         onCreateAgent,
         toolTitles,
         teammates,
+        markdownInlineReferences,
         onToolCallClick,
         onCitationClick,
         visualMode,
@@ -138,8 +144,9 @@ export function ChatMessageList(props: ChatMessageListProps) {
             {messages.map((message, index) => {
                 const participant = participants.find((entry) => entry.name === message.sender);
                 const isLastMessage = index === messages.length - 1;
-                const isExpanded = expandedMessageId === message.id;
-                const currentRating = messageRatings.get(message.id || message.content /* <-[??] */) || 0;
+                const messageRatingKey = resolveChatRatingMessageKey(message);
+                const isExpanded = expandedMessageId === messageRatingKey;
+                const currentRating = messageRatings.get(messageRatingKey) || 0;
 
                 return (
                     <ChatMessageItem
@@ -171,6 +178,7 @@ export function ChatMessageList(props: ChatMessageListProps) {
                         toolTitles={toolTitles}
                         teammates={teammates}
                         teamAgentProfiles={teamAgentProfiles}
+                        markdownInlineReferences={markdownInlineReferences}
                         visualMode={visualMode}
                         onToolCallClick={onToolCallClick}
                         onCitationClick={onCitationClick}

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

@@ -3,6 +3,7 @@
 import { CodeBlock } from '../CodeBlock/CodeBlock';
 import { MarkdownContent } from '../MarkdownContent/MarkdownContent';
 import type { ChatMessage } from '../types/ChatMessage';
+import type { MarkdownInlineReference } from '../utils/renderMarkdown';
 import type { ChatMessageContentSegment } from '../utils/splitMessageContentIntoSegments';
 import { ChatMessageMap } from './ChatMessageMap';
 import { LOADING_INTERACTIVE_IMAGE } from './constants';
@@ -32,6 +33,10 @@ export type ChatMessageRichContentProps = {
      * Optional callback for creating a new agent from a book code block.
      */
     readonly onCreateAgent?: (bookContent: string) => void;
+    /**
+     * Optional inline references rendered from `[[reference]]` tokens in message markdown.
+     */
+    readonly markdownInlineReferences?: ReadonlyArray<MarkdownInlineReference>;
     /**
      * Resolved theme used by nested code blocks and editors.
      */
@@ -44,7 +49,8 @@ export type ChatMessageRichContentProps = {
  * @private internal component of `<ChatMessageItem/>`
  */
 export function ChatMessageRichContent(props: ChatMessageRichContentProps) {
-    const { content, contentSegments, streamingFeaturePlaceholderKind, onCreateAgent, mode } = props;
+    const { content, contentSegments, streamingFeaturePlaceholderKind, onCreateAgent, markdownInlineReferences, mode } =
+        props;
 
     if (content === LOADING_INTERACTIVE_IMAGE) {
         return null;
@@ -58,6 +64,7 @@ export function ChatMessageRichContent(props: ChatMessageRichContentProps) {
                         <MarkdownContent
                             key={`text-${segmentIndex}`}
                             content={segment.content}
+                            inlineReferences={markdownInlineReferences}
                             onCreateAgent={onCreateAgent}
                         />
                     );

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

@@ -14,6 +14,7 @@ import type { ChatMessage } from '../types/ChatMessage';
 import type { ChatParticipant } from '../types/ChatParticipant';
 import type { CitationLabelResolver } from '../types/CitationLabelResolver';
 import type { ChatSaveFormatHandlerMap } from '../save/_common/ChatSaveFormatHandler';
+import type { MarkdownInlineReference } from '../utils/renderMarkdown';
 
 /**
  * Response data returned by the optional `onFeedback` handler.
@@ -509,6 +510,15 @@ export type ChatProps = {
      */
     readonly title?: string;
 
+    /**
+     * Optional identifier (name or permanent id) of the agent owning this chat.
+     *
+     * When set, server-side live browser previews opened from the chat (for example from
+     * knowledge citation chips) run inside the agent's persistent browser profile, so logins
+     * performed by the user in the live session are saved for the agent's future browsing.
+     */
+    readonly agentIdentifier?: string;
+
     /**
      * Messages to render - they are rendered as they are
      */
@@ -796,6 +806,11 @@ export type ChatProps = {
      */
     readonly teamAgentProfiles?: Record<string, AgentChipData>;
 
+    /**
+     * Optional inline references rendered from `[[reference]]` tokens in message markdown.
+     */
+    readonly markdownInlineReferences?: ReadonlyArray<MarkdownInlineReference>;
+
     /**
      * Optional callback to create a new agent from the template.
      * If provided, renders the [Create Agent] button for book code blocks.

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

@@ -2,17 +2,11 @@
 
 import type { MouseEventHandler } from 'react';
 import type { id } from '../../../types/string_token';
-import { classNames } from '../../_common/react-utils/classNames';
 import type { ChatMessage } from '../types/ChatMessage';
+import { CHAT_FEEDBACK_STAR_RATINGS, ChatFeedbackStar, resolveChatFeedbackStarInactiveColor } from './ChatFeedbackStar';
 import styles from './Chat.module.css';
 import type { ChatFeedbackMode, ChatProps } from './ChatProps';
-
-/**
- * Supported star values rendered by the rating UI.
- *
- * @private component of `<ChatRatingModal/>`
- */
-const STAR_RATINGS = [1, 2, 3, 4, 5] as const;
+import { resolveChatRatingMessageKey } from './resolveChatRatingMessageKey';
 
 /**
  * Localized copy rendered by the rating modal.
@@ -61,15 +55,6 @@ export type ChatRatingModalProps = {
     submitRating: () => Promise<void>;
 };
 
-/**
- * Resolves the key used to persist message rating state.
- *
- * @private function of `<ChatRatingModal/>`
- */
-function resolveChatRatingMessageKey(message: Pick<ChatMessage, 'id' | 'content'>) {
-    return message.id || message.content /* <-[??] */;
-}
-
 /**
  * Returns whether the modal should render the report-issue flow.
  *
@@ -193,19 +178,6 @@ function resolveSelectedChatRating(params: {
     return hoveredRating || messageRatings.get(resolveChatRatingMessageKey(selectedMessage)) || 0;
 }
 
-/**
- * Resolves the color for one star in the rating picker.
- *
- * @private function of `<ChatRatingModal/>`
- */
-function resolveChatRatingStarColor(star: number, selectedRating: number, mode: 'LIGHT' | 'DARK'): string {
-    if (star <= selectedRating) {
-        return '#FFD700';
-    }
-
-    return mode === 'LIGHT' ? '#ccc' : '#555';
-}
-
 /**
  * Returns the placeholder used in the expected-answer field.
  *
@@ -262,8 +234,8 @@ function ChatRatingModalStarsSection(props: {
 
     return (
         <div className={styles.stars}>
-            {STAR_RATINGS.map((star) => (
-                <span
+            {CHAT_FEEDBACK_STAR_RATINGS.map((star) => (
+                <ChatFeedbackStar
                     key={star}
                     onClick={() =>
                         setMessageRatings((previousRatings) => {
@@ -274,13 +246,10 @@ function ChatRatingModalStarsSection(props: {
                     }
                     onMouseEnter={() => setHoveredRating(star)}
                     onMouseLeave={() => setHoveredRating(0)}
-                    className={classNames(styles.ratingModalStar)}
-                    style={{
-                        color: resolveChatRatingStarColor(star, selectedRating, mode),
-                    }}
-                >
-                    ⭐
-                </span>
+                    className={styles.ratingModalStar}
+                    isActive={star <= selectedRating}
+                    inactiveColor={resolveChatFeedbackStarInactiveColor(mode)}
+                />
             ))}
         </div>
     );

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

@@ -1,7 +1,8 @@
 'use client';
 
-import { useEffect, useMemo, useState, type MouseEvent, type WheelEvent } from 'react';
+import { useEffect, useState } from 'react';
 import styles from './Chat.module.css';
+import { LiveBrowserPreview } from './pagePreview/LiveBrowserPreview';
 
 /**
  * Props for the citation iframe preview component.
@@ -11,6 +12,27 @@ import styles from './Chat.module.css';
 export type CitationIframePreviewProps = {
     src: string;
     title: string;
+
+    /**
+     * Optional agent identifier (name or permanent id) scoping the live browser fallback
+     * to the agent's persistent server-side browser profile.
+     */
+    agentIdentifier?: string;
+
+    /**
+     * Optional close handler passed to the live browser toolbar when the preview fills a modal.
+     */
+    onClose?: () => void;
+
+    /**
+     * Reports whether the URL is embedded directly or shown through the live browser fallback.
+     */
+    onStatusChange?: (status: CitationIframePreviewStatus) => void;
+
+    /**
+     * Initial preview status used when the parent already knows the resolved mode.
+     */
+    initialStatus?: CitationIframePreviewStatus;
 };
 
 /**
@@ -18,35 +40,11 @@ export type CitationIframePreviewProps = {
  *
  * @private type of `<CitationIframePreview/>`
  */
-type EmbedStatus = 'loading' | 'embed' | 'browser-stream';
-
-/**
- * Prefix shared with the Agents Server page-preview stream route.
- *
- * @private component constant of `<CitationIframePreview/>`
- */
-const BROWSER_PREVIEW_SESSION_ID_PREFIX = 'page-preview-';
-
-/**
- * Fallback suffix length used when `crypto.randomUUID` is unavailable.
- *
- * @private component constant of `<CitationIframePreview/>`
- */
-const BROWSER_PREVIEW_RANDOM_SUFFIX_LENGTH = 24;
-
-/**
- * Pointer ratio resolved from one browser preview interaction.
- *
- * @private type of `<CitationIframePreview/>`
- */
-type BrowserPreviewPointerRatio = {
-    readonly xRatio: number;
-    readonly yRatio: number;
-};
+export type CitationIframePreviewStatus = 'loading' | 'embed' | 'browser-stream';
 
 /**
  * Renders a citation URL preview as an iframe when the target page allows embedding,
- * or falls back to a live server-side browser stream with an "Open in new tab" link
+ * or falls back to an interactive live server-side browser session (`<LiveBrowserPreview/>`)
  * when it does not (e.g. X-Frame-Options: DENY / SAMEORIGIN).
  *
  * Embedding capability is determined by `GET /api/page-preview/check?url=<url>`.
@@ -54,152 +52,50 @@ type BrowserPreviewPointerRatio = {
  *
  * @private component of `<ChatCitationModal/>`
  */
-export function CitationIframePreview({ src, title }: CitationIframePreviewProps) {
-    const [status, setStatus] = useState<EmbedStatus>('loading');
-    const browserPreviewSessionId = useMemo(() => createBrowserPreviewSessionId(), [src]);
+export function CitationIframePreview({
+    src,
+    title,
+    agentIdentifier,
+    onClose,
+    onStatusChange,
+    initialStatus = 'loading',
+}: CitationIframePreviewProps) {
+    const [status, setStatus] = useState<CitationIframePreviewStatus>(initialStatus);
 
     useEffect(() => {
         let cancelled = false;
+        setStatus(initialStatus);
+        onStatusChange?.(initialStatus);
 
         fetch(`/api/page-preview/check?url=${encodeURIComponent(src)}`)
             .then((response) => response.json())
             .then((data: { canEmbed: boolean }) => {
                 if (!cancelled) {
-                    setStatus(data.canEmbed ? 'embed' : 'browser-stream');
+                    const nextStatus = data.canEmbed ? 'embed' : 'browser-stream';
+                    setStatus(nextStatus);
+                    onStatusChange?.(nextStatus);
                 }
             })
             .catch(() => {
                 // API not available — fall back to iframe (e.g. outside agents-server)
                 if (!cancelled) {
                     setStatus('embed');
+                    onStatusChange?.('embed');
                 }
             });
 
         return () => {
             cancelled = true;
         };
-    }, [src]);
+    }, [initialStatus, onStatusChange, src]);
 
     if (status === 'loading') {
         return <div className={styles.citationIframeLoading}>Loading preview…</div>;
     }
 
     if (status === 'browser-stream') {
-        return (
-            <div className={styles.citationBrowserStreamFallback}>
-                <img
-                    src={`/api/page-preview/stream?url=${encodeURIComponent(src)}&sessionId=${encodeURIComponent(
-                        browserPreviewSessionId,
-                    )}`}
-                    alt={`Live browser preview of ${title}`}
-                    className={styles.citationBrowserStreamImage}
-                    draggable={false}
-                    onClick={(event) => {
-                        const pointerRatio = resolveBrowserPreviewPointerRatio(event);
-                        if (!pointerRatio) {
-                            return;
-                        }
-
-                        sendBrowserPreviewInput({
-                            sessionId: browserPreviewSessionId,
-                            type: 'click',
-                            ...pointerRatio,
-                        });
-                    }}
-                    onWheel={(event) => {
-                        event.preventDefault();
-                        const pointerRatio = resolveBrowserPreviewPointerRatio(event);
-                        if (!pointerRatio) {
-                            return;
-                        }
-
-                        sendBrowserPreviewInput({
-                            sessionId: browserPreviewSessionId,
-                            type: 'wheel',
-                            deltaX: event.deltaX,
-                            deltaY: event.deltaY,
-                            ...pointerRatio,
-                        });
-                    }}
-                />
-                <a href={src} target="_blank" rel="noopener noreferrer" className={styles.citationBrowserStreamLink}>
-                    Open in new tab ↗
-                </a>
-            </div>
-        );
+        return <LiveBrowserPreview src={src} title={title} agentIdentifier={agentIdentifier} onClose={onClose} />;
     }
 
     return <iframe src={src} className={styles.citationIframe} title={title} />;
 }
-
-/**
- * Creates one client-side browser preview session id.
- *
- * @returns Session id accepted by Agents Server page-preview stream routes.
- */
-function createBrowserPreviewSessionId(): string {
-    const randomId =
-        globalThis.crypto && 'randomUUID' in globalThis.crypto
-            ? globalThis.crypto.randomUUID()
-            : createFallbackBrowserPreviewSessionSuffix();
-
-    return `${BROWSER_PREVIEW_SESSION_ID_PREFIX}${randomId}`.toLowerCase();
-}
-
-/**
- * Creates a sufficiently long fallback session suffix when Web Crypto UUIDs are unavailable.
- *
- * @returns Lowercase random suffix.
- */
-function createFallbackBrowserPreviewSessionSuffix(): string {
-    let suffix = '';
-
-    while (suffix.length < BROWSER_PREVIEW_RANDOM_SUFFIX_LENGTH) {
-        suffix += Math.random().toString(36).slice(2);
-    }
-
-    return suffix.slice(0, BROWSER_PREVIEW_RANDOM_SUFFIX_LENGTH);
-}
-
-/**
- * Resolves pointer coordinates as ratios inside the streamed preview image.
- *
- * @param event - Mouse or wheel event fired inside the live preview image.
- * @returns Pointer ratio or `null` when the image has no measurable size.
- */
-function resolveBrowserPreviewPointerRatio(
-    event: MouseEvent<HTMLImageElement> | WheelEvent<HTMLImageElement>,
-): BrowserPreviewPointerRatio | null {
-    const rect = event.currentTarget.getBoundingClientRect();
-    if (rect.width <= 0 || rect.height <= 0) {
-        return null;
-    }
-
-    return {
-        xRatio: (event.clientX - rect.left) / rect.width,
-        yRatio: (event.clientY - rect.top) / rect.height,
-    };
-}
-
-/**
- * Sends one browser-preview interaction to the Agents Server stream session.
- *
- * @param payload - Browser-preview input payload.
- */
-function sendBrowserPreviewInput(payload: {
-    readonly sessionId: string;
-    readonly type: 'click' | 'wheel';
-    readonly xRatio: number;
-    readonly yRatio: number;
-    readonly deltaX?: number;
-    readonly deltaY?: number;
-}): void {
-    void fetch('/api/page-preview/input', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(payload),
-        keepalive: true,
-    }).catch(() => undefined);
-}