@promptbook/editable 0.103.0-9 → 0.104.0-0

package/esm/typings/src/book-components/BookEditor/BookEditor.d.ts

@@ -1,7 +1,15 @@
-import type { CSSProperties } from 'react';
+import { CSSProperties } from 'react';
 import type { Promisable } from 'type-fest';
 import type { string_book } from '../../book-2.0/agent-source/string_book';
-import type { string_knowledge_source_content } from '../../types/typeAliases';
+import type { number_percent, number_positive, string_css_value, string_knowledge_source_content } from '../../types/typeAliases';
+/**
+ * Default height of the book editor
+ *
+ * Note: This height is computed based on the number of lines in the default book + padding multiplied by an estimated line height.
+ *
+ * @public exported from `@promptbook/components`
+ */
+export declare const DEFAULT_BOOK_EDITOR_HEIGHT: number;
 /**
  * Props of `BookEditor`
  *
@@ -12,10 +20,6 @@ export type BookEditorProps = {
      * The source of the agent to be displayed in the editor.
      */
     readonly agentSource?: string_book;
-    /**
-     * Callback function to be called when the editor is closed.
-     */
-    onClose?(): void;
     /**
      * Additional CSS classes to apply to the editor container.
      */
@@ -25,10 +29,21 @@ export type BookEditorProps = {
      */
     readonly style?: CSSProperties;
     /**
-     * CSS className for a font (e.g. from next/font) to style the editor text.
-     * If omitted, defaults to system serif fonts.
+     * Height of the `BookEditor` component
+     *
+     * - You can use any valid CSS value, e.g., `500px`, `100%`, `50vh`, etc.
+     * - If not set, the default height is `DEFAULT_BOOK_EDITOR_HEIGHT`.
+     * - If set to `null`, the height should be controlled entirely via `className` or `style`, otherwise the editor will have zero height.
+     *
+     * @default `DEFAULT_BOOK_EDITOR_HEIGHT`
+     */
+    readonly height?: string_css_value | null;
+    /**
+     * Zoom level of the editor
+     *
+     * @default 1 (100%)
      */
-    readonly fontClassName?: string;
+    readonly zoom?: number_percent & number_positive;
     /**
      * The book which is being edited.
      */
@@ -49,17 +64,73 @@ export type BookEditorProps = {
      * If true, disables border radius making the editor have sharp corners
      */
     readonly isBorderRadiusDisabled?: boolean;
-    /**
-     * If true, shows the footer with book title and version information.
-     * By default, the footer is hidden.
-     */
-    readonly isFooterShown?: boolean;
     /**
      * If true, the editor is in read-only mode
      *
      * @default false
      */
     readonly isReadonly?: boolean;
+    /**
+     * Optional translations for the component
+     */
+    readonly translations?: {
+        /**
+         * Message to show when trying to edit a readonly editor
+         *
+         * @default "You cannot edit this book"
+         */
+        readonly readonlyMessage?: string;
+    };
+    /**
+     * If true, shows the upload button in the action bar.
+     * By default, the upload button is shown.
+     */
+    readonly isUploadButtonShown?: boolean;
+    /**
+     * If true, shows the camera button in the action bar.
+     * By default, the camera button is shown on mobile devices.
+     */
+    readonly isCameraButtonShown?: boolean;
+    /**
+     * If true, shows the download button in the action bar.
+     * By default, the download button is shown.
+     */
+    readonly isDownloadButtonShown?: boolean;
+    /**
+     * If true, shows the about button in the action bar.
+     * By default, the about button is shown.
+     */
+    readonly isAboutButtonShown?: boolean;
+    /**
+     * If true, shows the fullscreen button in the action bar.
+     * By default, the fullscreen button is shown.
+     */
+    readonly isFullscreenButtonShown?: boolean;
+    /**
+     * Callback function to handle fullscreen button click.
+     * Note: This is for internal use between BookEditor and BookEditorMonaco
+     * @private
+     */
+    onFullscreenClick?(): void;
+    /**
+     * If true, the editor is in fullscreen mode.
+     * Note: This is for internal use between BookEditor and BookEditorMonaco
+     * @private
+     */
+    readonly isFullscreen?: boolean;
+    /**
+     * If defined, the editor will be synced with other editors with the same sync configuration.
+     */
+    readonly sync?: {
+        /**
+         * The URL of the y-websocket server.
+         */
+        readonly serverUrl: string;
+        /**
+         * The name of the room to join.
+         */
+        readonly roomName: string;
+    };
 };
 /**
  * Renders a book editor

package/esm/typings/src/book-components/BookEditor/BookEditorActionbar.d.ts

@@ -0,0 +1,18 @@
+type BookEditorActionbarProps = {
+    value: string | undefined;
+    isDownloadButtonShown?: boolean;
+    isUploadButtonShown?: boolean;
+    isCameraButtonShown?: boolean;
+    isAboutButtonShown?: boolean;
+    isFullscreenButtonShown?: boolean;
+    onFullscreenClick?: () => void;
+    onUploadDocument?: () => void;
+    onTakePhoto?: () => void;
+    isFullscreen?: boolean;
+};
+/**
+ *
+ * @private Internal component used by `BookEditor`
+ */
+export declare function BookEditorActionbar(props: BookEditorActionbarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/typings/src/book-components/BookEditor/BookEditorMonaco.d.ts

@@ -0,0 +1,5 @@
+import type { BookEditorProps } from './BookEditor';
+/**
+ * @private Internal component used by `BookEditor`
+ */
+export declare function BookEditorMonaco(props: BookEditorProps): import("react/jsx-runtime").JSX.Element;

package/esm/typings/src/book-components/Chat/AgentChat/AgentChat.d.ts

@@ -0,0 +1,17 @@
+import type { AgentChatProps } from './AgentChatProps';
+/**
+ * AgentChat component that provides chat functionality with LLM integration
+ *
+ * This component internally manages messages, participants, and task progress,
+ * and uses the provided LLM tools to generate responses via `LlmExecutionTools.callChatModel`.
+ *
+ * Note: There are multiple chat components:
+ * - `<Chat/>` renders chat as it is without any logic
+ * - `<AgentChat/>` connected to LLM Execution Tools of Promptbook
+ *
+ * @public exported from `@promptbook/components`
+ */
+export declare function AgentChat(props: AgentChatProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * TODO: !!!! Search ACRY ".meta.color" and make sure that we count that we count color can be array
+ */

package/esm/typings/src/book-components/Chat/AgentChat/AgentChatProps.d.ts

@@ -0,0 +1,13 @@
+import { Agent } from '../../../llm-providers/agent/Agent';
+import type { LlmChatProps } from '../LlmChat/LlmChatProps';
+/**
+ * Props for AgentChat component, derived from LlmChatProps but with Agent-specific modifications
+ *
+ * @public exported from `@promptbook/components`
+ */
+export type AgentChatProps = Omit<LlmChatProps, 'thread' | 'llmTools' | 'initialMessages' | 'userParticipantName' | 'llmParticipantName'> & {
+    /**
+     * The agent to chat with
+     */
+    readonly agent: Agent;
+};

package/esm/typings/src/book-components/Chat/Chat/ChatProps.d.ts

@@ -3,6 +3,8 @@ import type { Promisable } from 'type-fest';
 import type { string_chat_format_name } from '../save/_common/string_chat_format_name';
 import type { ChatMessage } from '../types/ChatMessage';
 import type { ChatParticipant } from '../types/ChatParticipant';
+import { string_color } from '../../../types/typeAliases';
+import { Color } from '../../../_packages/color.index';
 /**
  * @public exported from `@promptbook/components`
  */
@@ -44,6 +46,10 @@ export type ChatProps = {
      * Determines whether the voice recognition button is rendered
      */
     readonly isVoiceRecognitionButtonShown?: boolean;
+    /**
+     * Optional callback to trigger voice input
+     */
+    onVoiceInput?(): void;
     /**
      * The language code to use for voice recognition
      */
@@ -77,6 +83,16 @@ export type ChatProps = {
      * adding feature–specific controls (e.g. Pause / Resume in MockedChat).
      */
     readonly extraActions?: ReactNode;
+    /**
+     * Optional container to render the actions into (using React Portal).
+     * If provided, the actions toolbar will be rendered inside this element
+     * instead of its default position within the chat.
+     */
+    readonly actionsContainer?: HTMLElement | null;
+    /**
+     * Color of the action buttons (send, reset, voice, etc.)
+     */
+    readonly buttonColor?: string_color | Color;
     /**
      * Optional CSS class name which will be added to root <div/> element
      */

package/esm/typings/src/book-components/Chat/LlmChat/LlmChatProps.d.ts

@@ -52,4 +52,9 @@ export type LlmChatProps = Omit<ChatProps, 'messages' | 'onMessage' | 'onChange'
      * @default 'ASSISTANT'
      */
     readonly llmParticipantName?: id;
+    /**
+     * Optional message to be automatically sent as if the user typed it.
+     * This is useful for seamless transitions from other pages.
+     */
+    readonly autoExecuteMessage?: string;
 };

package/esm/typings/src/book-components/Chat/MarkdownContent/MarkdownContent.d.ts

@@ -0,0 +1,15 @@
+import type { string_markdown } from '../../../types/typeAliases';
+type MarkdownContentProps = {
+    content: string_markdown;
+    className?: string;
+};
+/**
+ * Renders markdown content with support for code highlighting, math, and tables.
+ *
+ * @public exported from `@promptbook/components`
+ */
+export declare function MarkdownContent(props: MarkdownContentProps): import("react/jsx-runtime").JSX.Element;
+export {};
+/**
+ * TODO: !!! Split into multiple files
+ */

package/esm/typings/src/book-components/Chat/MockedChat/MockedChat.d.ts

@@ -42,6 +42,11 @@ export type MockedChatDelayConfig = {
      * If true, disables typing effect and shows full message at once (BLOCKY_FLOW)
      */
     blocky?: boolean;
+    /**
+     * This prop will allow to show N first messages immediately, while the rest will be typed out with delays
+     * @default 0
+     */
+    showIntermediateMessages?: number;
 };
 /**
  * Props for MockedChat component

package/esm/typings/src/book-components/Chat/save/_common/ChatSaveFormatDefinition.d.ts

@@ -1,7 +1,7 @@
 import type { Promisable } from 'type-fest';
 import type { string_file_extension, string_mime_type } from '../../../../types/typeAliases';
 import type { ChatMessage } from '../../types/ChatMessage';
-import { ChatParticipant } from '../../types/ChatParticipant';
+import type { ChatParticipant } from '../../types/ChatParticipant';
 /**
  * Plugin contract for chat export formatNames
  *

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

@@ -15,5 +15,6 @@ export declare const htmlSaveFormatDefinition: {
     readonly fileExtension: "html";
 };
 /**
+ * TODO: !!! Add QR code with branding to the footer
  *  TODO: [😬] Take chat save to HTML from existing parallel implementation
  */

package/esm/typings/src/book-components/Chat/save/pdf/pdfSaveFormatDefinition.d.ts

@@ -14,3 +14,7 @@ export declare const pdfSaveFormatDefinition: {
     readonly mimeType: "application/pdf";
     readonly fileExtension: "pdf";
 };
+/**
+ * TODO: !!! Add QR code with branding to the footer
+ * TODO: !!! Add print option
+ */

package/esm/typings/src/book-components/Chat/types/ChatParticipant.d.ts

@@ -1,6 +1,6 @@
+import type { string_book } from '../../../book-2.0/agent-source/string_book';
 import type { id, string_color, string_person_fullname, string_url_image } from '../../../types/typeAliases';
 import { Color } from '../../../utils/color/Color';
-import type { string_book } from '../../../book-2.0/agent-source/string_book';
 /**
  * A participant in the chat
  *

package/esm/typings/src/book-components/PromptbookAgent/PromptbookAgentIntegration.d.ts

@@ -0,0 +1,67 @@
+import { CSSProperties } from 'react';
+import type { AgentBasicInformation } from '../../book-2.0/agent-source/AgentBasicInformation';
+import { string_css_class } from '../../types/typeAliases';
+/**
+ * @private props of PromptbookAgentIntegration component
+ */
+export type PromptbookAgentIntegrationProps = {
+    /**
+     * URL of the agent to connect to
+     *
+     * @example "http://s6.ptbk.io/benjamin-white"
+     */
+    readonly agentUrl: string;
+    /**
+     * Form of the agent integration
+     *
+     * @default `seamless`
+     *
+     * - `seamless` Default, current behavior
+     * - `book` Show the Agent as a book in BookEditor
+     * - `chat` Show the Agent as a chat which is not floating but as AgentChat component
+     * - `profile` Show the Agent as a profile using
+     */
+    readonly formfactor?: 'seamless' | 'book' | 'chat' | 'profile';
+    /**
+     * Optional metadata to show before the agent is connected
+     * Or to override the agent metadata if the agent does not provide it
+     */
+    readonly meta?: Partial<AgentBasicInformation['meta']>;
+    /**
+     * Callback when the window is opened or closed
+     */
+    onOpenChange?(isOpen: boolean): void;
+    /**
+     * Optional CSS class name which will be added to root element
+     */
+    readonly className?: string_css_class;
+    /**
+     * Optional CSS style which will be added to root element
+     */
+    readonly style?: CSSProperties;
+    /**
+     * Is the writing textarea automatically focused?
+     *
+     * @default false (to prevent focus being stolen when widget loads)
+     */
+    readonly isFocusedOnLoad?: boolean;
+    /**
+     * Use iframe instead of implementing the chat directly
+     *
+     * When `true`, the chat will be rendered in an iframe pointing to the agent's chat endpoint.
+     * When `false`, the chat will be rendered directly using React components.
+     *
+     * @default true
+     */
+    readonly isIframeUsed?: boolean;
+};
+/**
+ * Renders a floating agent button that opens a chat window with the remote agent.
+ *
+ * @public exported from `@promptbook/components`
+ */
+export declare function PromptbookAgentIntegration(props: PromptbookAgentIntegrationProps): import("react/jsx-runtime").JSX.Element | undefined;
+/**
+ * TODO: !!! Load the full branding
+ * TODO: !!! <promptbook-agent> element
+ */

package/esm/typings/src/book-components/PromptbookAgent/PromptbookAgentSeamlessIntegration.d.ts

@@ -0,0 +1,23 @@
+import { PromptbookAgentIntegrationProps } from './PromptbookAgentIntegration';
+type PromptbookAgentSeamlessIntegrationProps = Omit<PromptbookAgentIntegrationProps, 'formfactor'> & {
+    /**
+     * Use iframe instead of implementing the chat directly
+     *
+     * When `true`, the chat will be rendered in an iframe pointing to the agent's chat endpoint.
+     * When `false`, the chat will be rendered directly using React components.
+     *
+     * @default false
+     */
+    readonly isIframeUsed?: boolean;
+};
+/**
+ * Renders a floating agent button that opens a chat window with the remote agent.
+ *
+ * @private component of PromptbookAgentIntegration
+ */
+export declare function PromptbookAgentSeamlessIntegration(props: PromptbookAgentSeamlessIntegrationProps): import("react/jsx-runtime").JSX.Element;
+export {};
+/**
+ * TODO: !!! Load the full branding
+ * TODO: !!! <promptbook-agent> element
+ */

package/esm/typings/src/book-components/Qr/BrandedQrCode.d.ts

@@ -0,0 +1,18 @@
+import type { QrCodeOptions } from './useQrCode';
+type BrandedQrCodeProps = QrCodeOptions & {
+    /**
+     * Width and height of the QR code canvas
+     *
+     * @default 250
+     */
+    size?: number;
+    /**
+     * Additional CSS class names to apply to the container div
+     */
+    className?: string;
+};
+/**
+ * @public exported from `@promptbook/components`
+ */
+export declare function BrandedQrCode(props: BrandedQrCodeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/typings/src/book-components/Qr/GenericQrCode.d.ts

@@ -0,0 +1,10 @@
+type GenericQrCodeProps = {
+    value: string | number;
+    size?: number;
+    className?: string;
+};
+/**
+ * @public exported from `@promptbook/components`
+ */
+export declare function GenericQrCode({ value, size, className }: GenericQrCodeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/typings/src/book-components/Qr/PromptbookQrCode.d.ts

@@ -0,0 +1,18 @@
+type PromptbookQrCodeProps = {
+    value: string | number;
+    /**
+     * Width and height of the QR code canvas
+     *
+     * @default 250
+     */
+    size?: number;
+    /**
+     * Additional CSS class names to apply to the container div
+     */
+    className?: string;
+};
+/**
+ * @public exported from `@promptbook/components`
+ */
+export declare function PromptbookQrCode(props: PromptbookQrCodeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/typings/src/book-components/Qr/useQrCode.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { QRCodeRenderersOptions } from 'qrcode';
+import type { string_url_image } from '../../types/typeAliases';
+export type QrCodeOptions = QRCodeRenderersOptions & {
+    value: string | number;
+    logoSrc?: string_url_image;
+};
+/**
+ *
+ *
+ * @private utility of QR code components
+ */
+export declare function useQrCode(options: QrCodeOptions): {
+    canvasRef: import("react").RefObject<HTMLCanvasElement | null>;
+};

package/esm/typings/src/book-components/_common/Dropdown/Dropdown.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from 'react';
+type DropdownProps = {
+    actions: Array<{
+        icon: JSX.Element;
+        name: string;
+        onClick: () => void;
+    }>;
+};
+/**
+ * @@@
+ *
+ * @private internal subcomponent used by various components
+ */
+export declare function Dropdown({ actions }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/typings/src/book-components/_common/HamburgerMenu/HamburgerMenu.d.ts

@@ -0,0 +1,12 @@
+type HamburgerMenuProps = {
+    isOpen: boolean;
+    onClick?: () => void;
+    className?: string;
+};
+/**
+ * @@@
+ *
+ * @private Internal component
+ */
+export declare function HamburgerMenu({ isOpen, onClick, className }: HamburgerMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/typings/src/book-components/_common/Modal/Modal.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 /**
  *
- * @private internal subcomponent of `<Chat>` component
+ * @private internal subcomponent used by various components
  */
 export declare function Modal({ children, onClose, className, }: {
     children: ReactNode;
@@ -9,5 +9,5 @@ export declare function Modal({ children, onClose, className, }: {
     className?: string;
 }): import("react").ReactPortal;
 /**
- * TODO: !!!! Use this also for feedback modal in Chat component -Make modals DRY
+ * TODO: Use this also for feedback modal in Chat component - Make modals DRY
  */

package/esm/typings/src/book-components/_common/Tooltip/Tooltip.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+type TooltipProps = {
+    /**
+     * The content to display in the tooltip
+     */
+    content: string;
+    /**
+     * The element that triggers the tooltip
+     */
+    children: ReactNode;
+    /**
+     * The position of the tooltip relative to the trigger element
+     * @default "top"
+     */
+    position?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Optional delay before showing the tooltip (in milliseconds)
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * Render the tooltip wrapper as a block-level element that spans full width.
+     * Useful when wrapping grid/list items so the clickable area matches the visual card.
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Enable tooltip on touch devices. By default tooltips are disabled on touch to avoid
+     * stealing clicks from the underlying element (eg. agent card selection).
+     * @default false
+     */
+    isEnabledOnTouch?: boolean;
+    /**
+     * If true, the tooltip will not be displayed but the content will still be rendered.
+     * In this case <Tooltip> is equivalent to a <React.Fragment> with the content.
+     *
+     * Note: Tooltip sometimes breaks the hover, temporarily disable via this prop
+     */
+    isDisabled?: boolean;
+};
+/**
+ * A tooltip component that displays additional information when hovering over an element
+ *
+ * @private Used internally in book components
+ */
+export declare function Tooltip({ content, children, position, delay, block, isEnabledOnTouch: enableOnTouch, isDisabled, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/typings/src/book-components/icons/AboutIcon.d.ts

@@ -0,0 +1,9 @@
+import { SVGProps } from 'react';
+/**
+ * @@@
+ *
+ * @private internal subcomponent used by various components
+ */
+export declare function AboutIcon(props: SVGProps<SVGSVGElement> & {
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/typings/src/book-components/icons/CameraIcon.d.ts

@@ -0,0 +1,11 @@
+type CameraIconProps = {
+    size?: number;
+    color?: string;
+};
+/**
+ * @@@
+ *
+ * @public exported from `@promptbook/components`
+ */
+export declare function CameraIcon({ size, color }: CameraIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/typings/src/book-components/icons/CloseIcon.d.ts

@@ -1,11 +1,7 @@
-type CloseIconProps = {
-    size?: number;
-    color?: string;
-};
+import { JSX } from 'react';
 /**
- * @@@
+ * Renders an icon that represents the close action
  *
- * @public exported from `@promptbook/components`
+ * @private
  */
-export declare function CloseIcon({ size, color }: CloseIconProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function CloseIcon(): JSX.Element;

package/esm/typings/src/book-components/icons/DownloadIcon.d.ts

@@ -0,0 +1,9 @@
+import { SVGProps } from 'react';
+/**
+ * @@@
+ *
+ * @private internal subcomponent used by various components
+ */
+export declare function DownloadIcon(props: SVGProps<SVGSVGElement> & {
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/typings/src/book-components/icons/ExitFullscreenIcon.d.ts

@@ -0,0 +1,7 @@
+import { JSX } from 'react';
+/**
+ * Renders an icon that represents the exit fullscreen action
+ *
+ * @private
+ */
+export declare function ExitFullscreenIcon(): JSX.Element;

package/esm/typings/src/book-components/icons/FullscreenIcon.d.ts

@@ -0,0 +1,7 @@
+import { JSX } from 'react';
+/**
+ * Renders an icon that represents the fullscreen action
+ *
+ * @private
+ */
+export declare function FullscreenIcon(): JSX.Element;

package/esm/typings/src/book-components/icons/MenuIcon.d.ts

@@ -0,0 +1,12 @@
+import { SVGProps } from 'react';
+/**
+ * @@@
+ *
+ * @private internal subcomponent used by various components
+ */
+export declare function MenuIcon(props: SVGProps<SVGSVGElement> & {
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * TODO: !!! Mark all components to not be used outside of browser
+ */

package/esm/typings/src/book-components/icons/MicIcon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Shows simple microphone icon
+ *
+ * @public exported from `@promptbook/components`
+ */
+export declare const MicIcon: ({ size }: {
+    size: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/esm/typings/src/book-components/icons/SendIcon.d.ts

@@ -6,3 +6,6 @@
 export declare const SendIcon: ({ size }: {
     size: number;
 }) => import("react/jsx-runtime").JSX.Element;
+/**
+ * TODO: !!!! Search ACRY for "currentColor", it probably does not work and make no sense to have it in project
+ */