@promptbook/cli 0.113.0-8 → 0.113.0-9

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.
      */

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

@@ -1,10 +1,6 @@
 import { type ReactElement } from 'react';
 import type { TODO_any } from '../../../utils/organization/TODO_any';
-import {
-    buildTimeoutToolPrimarySentence,
-    buildTimeoutToolScheduleSentence,
-    resolveTimeoutToolCallPresentation,
-} from '../utils/timeoutToolCallPresentation';
+import { buildTimeoutToolPrimarySentence, buildTimeoutToolScheduleSentence, resolveTimeoutToolCallPresentation } from '../utils/timeoutToolCallPresentation';
 import styles from './Chat.module.css';
 import { renderToolCallClockPanel } from './renderToolCallClockPanel';
 

package/src/book-components/Chat/Chat/useChatInputAreaComposer.ts

@@ -1,13 +1,13 @@
 'use client';
 
 import {
-    useCallback,
-    useEffect,
-    useRef,
-    useState,
-    type ChangeEvent,
-    type KeyboardEvent as ReactKeyboardEvent,
-    type MutableRefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type MutableRefObject
 } from 'react';
 import { spaceTrim } from 'spacetrim';
 import type { ChatMessage } from '../types/ChatMessage';
@@ -34,6 +34,18 @@ type PendingEnterIntentSnapshot = {
     readonly replyingToMessageId: string | null;
 };
 
+/**
+ * One programmatic request to replace the composer content with an editable draft.
+ *
+ * A fresh object identity is used for every request so repeated draft insertions
+ * (even with identical text) re-apply to the composer.
+ *
+ * @private function of `<ChatInputArea/>`
+ */
+export type ChatComposerDraft = {
+    readonly content: string;
+};
+
 /**
  * Props for `useChatInputAreaComposer`.
  *
@@ -43,6 +55,7 @@ type UseChatInputAreaComposerProps = {
     readonly onMessage?: ChatProps['onMessage'];
     readonly onChange?: ChatProps['onChange'];
     readonly defaultMessage?: string;
+    readonly draftMessage?: ChatComposerDraft;
     readonly enterBehavior?: ChatProps['enterBehavior'];
     readonly resolveEnterBehavior?: ChatProps['resolveEnterBehavior'];
     readonly isFocusedOnLoad?: boolean;
@@ -473,6 +486,38 @@ function useChatInputAreaComposerFocus({
     );
 }
 
+/**
+ * Applies programmatic draft-message insertions to the composer.
+ *
+ * Each new `draftMessage` object replaces the composer content and moves the caret
+ * to the end so the seeded draft can be edited before sending. Repeated requests with
+ * identical text still apply because every request carries a fresh object identity.
+ *
+ * @private function of `useChatInputAreaComposer`
+ */
+function useChatInputAreaDraftMessage(params: {
+    readonly draftMessage?: ChatComposerDraft;
+    readonly textareaRef: MutableRefObject<HTMLTextAreaElement | null>;
+    readonly applyMessageContent: (nextContent: string) => void;
+}): void {
+    const { draftMessage, textareaRef, applyMessageContent } = params;
+    const lastAppliedDraftMessageRef = useRef<ChatComposerDraft | undefined>(undefined);
+
+    useEffect(() => {
+        if (draftMessage === undefined || draftMessage === lastAppliedDraftMessageRef.current) {
+            return;
+        }
+
+        lastAppliedDraftMessageRef.current = draftMessage;
+        applyMessageContent(draftMessage.content);
+
+        const textareaElement = textareaRef.current;
+        if (textareaElement) {
+            focusTextareaCaret(textareaElement, draftMessage.content.length);
+        }
+    }, [applyMessageContent, draftMessage, textareaRef]);
+}
+
 /**
  * Creates the newline insertion action used by the composer Enter handling.
  *
@@ -695,6 +740,7 @@ export function useChatInputAreaComposer(props: UseChatInputAreaComposerProps) {
         onMessage,
         onChange,
         defaultMessage,
+        draftMessage,
         enterBehavior,
         resolveEnterBehavior,
         isFocusedOnLoad,
@@ -719,6 +765,12 @@ export function useChatInputAreaComposer(props: UseChatInputAreaComposerProps) {
         isMobile,
     });
 
+    useChatInputAreaDraftMessage({
+        draftMessage,
+        textareaRef,
+        applyMessageContent,
+    });
+
     const handleInsertNewline = useChatInputAreaNewlineHandler({
         textareaRef,
         messageContentRef,

package/src/book-components/Chat/Chat/useChatInputAreaDictation.ts

@@ -1,13 +1,13 @@
 'use client';
 
 import {
-    useCallback,
-    useEffect,
-    useRef,
-    useState,
-    type Dispatch,
-    type MutableRefObject,
-    type SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type Dispatch,
+  type MutableRefObject,
+  type SetStateAction
 } from 'react';
 import type { SpeechRecognitionErrorCode, SpeechRecognitionEvent } from '../../../types/SpeechRecognition';
 import type { ChatProps } from './ChatProps';

package/src/book-components/Chat/Chat/useChatToolCallModalState.ts

@@ -13,10 +13,7 @@ import { getToolCallTimestamp } from '../utils/toolCallParsing/getToolCallTimest
 import { parseTeamToolResult } from '../utils/toolCallParsing/parseTeamToolResult';
 import { parseToolCallResult } from '../utils/toolCallParsing/parseToolCallResult';
 import type { TeamToolResult } from '../utils/toolCallParsing/TeamToolResult';
-import {
-    createAdvancedToolCallReportFilename,
-    createAdvancedToolCallReportMarkdown,
-} from './renderAdvancedToolCallDetails';
+import { createAdvancedToolCallReportFilename, createAdvancedToolCallReportMarkdown } from './renderAdvancedToolCallDetails';
 
 /**
  * Tool-call snapshot rendered by the modal.

package/src/book-components/Chat/hooks/useChatRatings.ts

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
 import type { MutableRefObject } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type { Promisable } from 'type-fest';
 import type { id } from '../../../types/string_token';
 import type { ChatFeedbackMode, ChatFeedbackResponse, ChatProps } from '../Chat/ChatProps';

package/src/book-components/Chat/save/html/htmlSaveFormatDefinition.ts

@@ -4,7 +4,7 @@ import type { ChatParticipant } from '../../types/ChatParticipant';
 import { resolveCitationPreviewUrl } from '../../utils/citationHelpers';
 import { parseMessageButtons } from '../../utils/parseMessageButtons';
 import { renderMarkdown } from '../../utils/renderMarkdown';
-import type { ChatSaveFormatDefinition } from '../_common/ChatSaveFormatDefinition';
+import type { ChatExportCitationFootnoteRegistry, ChatExportCitationRenderModel } from '../_common/chatExportRendering';
 import {
     buildChatExportParticipantMap,
     createChatExportCitationFootnoteRegistry,
@@ -12,9 +12,8 @@ import {
     formatChatExportCitationFootnoteLabel,
     formatChatExportTimestamp,
     resolveChatExportParticipantVisuals,
-    type ChatExportCitationFootnoteRegistry,
-    type ChatExportCitationRenderModel,
 } from '../_common/chatExportRendering';
+import type { ChatSaveFormatDefinition } from '../_common/ChatSaveFormatDefinition';
 import { getPromptbookExportBranding } from '../_common/getPromptbookExportBranding';
 
 /**

package/src/book-components/Chat/save/markdown/mdSaveFormatDefinition.ts

@@ -2,7 +2,7 @@ import { spaceTrim } from 'spacetrim';
 import type { ChatMessage } from '../../types/ChatMessage';
 import type { ChatParticipant } from '../../types/ChatParticipant';
 import { resolveCitationPreviewUrl } from '../../utils/citationHelpers';
-import type { ChatSaveFormatDefinition } from '../_common/ChatSaveFormatDefinition';
+import type { ChatExportCitationFootnoteRegistry } from '../_common/chatExportRendering';
 import {
     buildChatExportParticipantMap,
     createChatExportCitationFootnoteRegistry,
@@ -10,8 +10,8 @@ import {
     formatChatExportCitationFootnoteLabel,
     formatChatExportTimestamp,
     resolveChatExportParticipantVisuals,
-    type ChatExportCitationFootnoteRegistry,
 } from '../_common/chatExportRendering';
+import type { ChatSaveFormatDefinition } from '../_common/ChatSaveFormatDefinition';
 import { getPromptbookExportBranding } from '../_common/getPromptbookExportBranding';
 
 /**

package/src/book-components/Chat/save/pdf/buildChatPdf.ts

@@ -4,8 +4,8 @@ import { spaceTrim } from 'spacetrim';
 import { UnexpectedError } from '../../../../errors/UnexpectedError';
 import type { ChatMessage } from '../../types/ChatMessage';
 import type { ChatParticipant } from '../../types/ChatParticipant';
-import { getPromptbookExportBranding } from '../_common/getPromptbookExportBranding';
 import { buildChatHtml, CHAT_HTML_EXPORT_RENDER_ROOT_CLASS_NAME } from '../html/htmlSaveFormatDefinition';
+import { getPromptbookExportBranding } from '../_common/getPromptbookExportBranding';
 
 /**
  * Pixel width used while the standalone HTML document is laid out for PDF pages.

package/src/book-components/Chat/utils/getToolCallChipletInfo.ts

@@ -3,11 +3,7 @@ import { ASSISTANT_PREPARATION_TOOL_CALL_NAME } from '../../../types/ToolCall';
 import type { AgentChipData } from '../AgentChip/AgentChip';
 import { formatToolCallLocalTime } from './formatToolCallLocalTime';
 import { formatToolCallTranslationTemplate } from './formatToolCallTranslationTemplate';
-import {
-    buildTimeoutToolCallChipLabel,
-    isTimeoutToolCallName,
-    resolveTimeoutToolCallPresentation,
-} from './timeoutToolCallPresentation';
+import { buildTimeoutToolCallChipLabel, isTimeoutToolCallName, resolveTimeoutToolCallPresentation } from './timeoutToolCallPresentation';
 import { getToolCallResultDate } from './toolCallParsing/getToolCallResultDate';
 import { parseTeamToolResult } from './toolCallParsing/parseTeamToolResult';
 import { parseToolCallArguments } from './toolCallParsing/parseToolCallArguments';

package/src/book-components/Chat/utils/isVisibleChatToolCall.ts

@@ -1,4 +1,5 @@
-import { ASSISTANT_PREPARATION_TOOL_CALL_NAME, type ToolCall } from '../../../types/ToolCall';
+import type { ToolCall } from '../../../types/ToolCall';
+import { ASSISTANT_PREPARATION_TOOL_CALL_NAME } from '../../../types/ToolCall';
 
 /**
  * Tool calls that stay available in message data but should not be surfaced as user-facing chat progress.

package/src/book-components/Chat/utils/parseMessageButtons.ts

@@ -9,6 +9,20 @@ export type MessageQuickButton = {
     message: string;
 };
 
+/**
+ * Represents a quick draft-message button parsed from chat markdown.
+ *
+ * Unlike `MessageQuickButton`, clicking this button prefills the composer with an
+ * editable draft instead of sending the message immediately.
+ *
+ * @private internal helper type of `MessageButton`
+ */
+export type MessageDraftQuickButton = {
+    type: 'messageDraft';
+    text: string;
+    messageDraft: string;
+};
+
 /**
  * Represents a quick action button parsed from chat markdown.
  *
@@ -25,7 +39,7 @@ export type ActionQuickButton = {
  *
  * @public exported from `@promptbook/components`
  */
-export type MessageButton = MessageQuickButton | ActionQuickButton;
+export type MessageButton = MessageQuickButton | MessageDraftQuickButton | ActionQuickButton;
 
 /**
  * Extracts one quick button definition from a markdown link query string.
@@ -48,6 +62,16 @@ function parseQuickButtonDefinition(text: string, query: string): MessageButton
         };
     }
 
+    const messageDraft = searchParams.get('messageDraft');
+
+    if (messageDraft !== null) {
+        return {
+            type: 'messageDraft',
+            text,
+            messageDraft,
+        };
+    }
+
     const code = searchParams.get('action');
 
     if (code !== null) {
@@ -62,7 +86,8 @@ function parseQuickButtonDefinition(text: string, query: string): MessageButton
 }
 
 /**
- * Parses markdown quick buttons in the format `[Button Text](?message=...)` or `[Button Text](?action=...)`.
+ * Parses markdown quick buttons in the format `[Button Text](?message=...)`, `[Button Text](?messageDraft=...)`
+ * or `[Button Text](?action=...)`.
  * Returns both the content without supported quick buttons and the extracted button definitions.
  *
  * @param content The markdown content that may contain buttons

package/src/cli/cli-commands/about.ts

@@ -1,6 +1,6 @@
 import colors from 'colors';
 import type {
-    Command as Program /* <- Note: [🔸] Using Program because Command is misleading name */,
+  Command as Program /* <- Note: [🔸] Using Program because Command is misleading name */
 } from 'commander';
 import { spaceTrim } from 'spacetrim';
 import { CLAIM } from '../../config';