@promptbook/cli 0.103.0-55 → 0.103.0-66

package/apps/agents-server/src/components/AgentProfile/AgentProfile.tsx

@@ -0,0 +1,334 @@
+'use client';
+
+import { AgentBasicInformation } from '@promptbook-local/types';
+import { RepeatIcon } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import spaceTrim from 'spacetrim';
+import { Color } from '../../../../../src/utils/color/Color';
+import { darken } from '../../../../../src/utils/color/operators/darken';
+import { lighten } from '../../../../../src/utils/color/operators/lighten';
+import { AgentQrCode } from './AgentQrCode';
+import { QrCodeModal } from './QrCodeModal';
+
+type AgentProfileProps = {
+    /**
+     * The agent to display
+     */
+    readonly agent: AgentBasicInformation;
+
+    /**
+     * URL of the agent page
+     *
+     * @default undefined - If not provided, some features like QR code for link might be disabled or use generic link
+     */
+    readonly agentUrl?: string;
+
+    /**
+     * Email of the agent
+     */
+    readonly agentEmail?: string;
+
+    /**
+     * Content for the menu (top right)
+     *
+     * @param props.onShowQrCode - Function to open QR code modal
+     */
+    readonly renderMenu?: (props: { onShowQrCode: () => void }) => React.ReactNode;
+
+    /**
+     * Content for the chat area
+     */
+    readonly children?: React.ReactNode;
+
+    /**
+     * Content for the secondary actions (links)
+     */
+    readonly actions?: React.ReactNode;
+
+    /**
+     * If true, hides the menu and actions for fullscreen/embedded view
+     */
+    readonly isHeadless?: boolean;
+
+    /**
+     * CSS class name
+     */
+    readonly className?: string;
+};
+
+export function AgentProfile(props: AgentProfileProps) {
+    const {
+        agent,
+        agentUrl = '',
+        agentEmail = '',
+        renderMenu,
+        children,
+        actions,
+        isHeadless = false,
+        className,
+    } = props;
+    const { meta, agentName } = agent;
+    const fullname = (meta.fullname as string) || agentName || 'Agent';
+    const personaDescription = agent.personaDescription || '';
+    const imageUrl = (meta.image as string) || null;
+
+    const [isQrModalOpen, setIsQrModalOpen] = useState(false);
+    const [isFlipped, setIsFlipped] = useState(false);
+
+    // Dynamic Font Loading
+    const fontString = meta.font;
+    let fontStyle: React.CSSProperties = {};
+
+    if (fontString) {
+        // [🧠] TODO: Properly parse font string to get family name
+        const primaryFont = fontString.split(',')[0].trim().replace(/['"]/g, '');
+        fontStyle = {
+            fontFamily: fontString,
+        };
+    }
+
+    // Compute Colors and Background
+    const { brandColorHex, brandColorLightHex, brandColorDarkHex, backgroundImage } = useMemo(() => {
+        // [🧠] Default color should be imported constant, but for now hardcoded fallback
+        const PROMPTBOOK_COLOR_HEX = '#f15b24'; // TODO: Import PROMPTBOOK_COLOR
+        const brandColorString = meta.color || PROMPTBOOK_COLOR_HEX;
+
+        let brandColor;
+        try {
+            brandColor = Color.fromSafe(brandColorString.split(',')[0].trim());
+        } catch {
+            brandColor = Color.fromHex(PROMPTBOOK_COLOR_HEX);
+        }
+
+        const brandColorHex = brandColor.toHex();
+        const brandColorLightHex = brandColor.then(lighten(0.2)).toHex();
+        const brandColorDarkHex = brandColor.then(darken(0.15)).toHex();
+
+        // Generate Noisy SVG Background
+        const color1 = brandColor;
+        // const color2 = brandColors[1] || brandColors[0]!; // Use secondary color if available?
+        // For simplicity using primary color for now or derive second one
+        const color2 = brandColor;
+
+        // [🧠] Make colors much lighter for the background
+        const color1Light = color1.then(lighten(0.3)).toHex();
+        const color1Main = color1.toHex();
+        const color1Dark = color1.then(darken(0.3)).toHex();
+
+        const color2Light = color2.then(lighten(0.3)).toHex();
+        const color2Main = color2.toHex();
+        const color2Dark = color2.then(darken(0.3)).toHex();
+
+        const svgContent = spaceTrim(`
+            <svg xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 1920 1080"
+              width="1920" height="1080"
+              preserveAspectRatio="xMidYMid slice">
+              <defs>
+                <!-- Bottom-left -->
+                <radialGradient id="grad1" cx="0%" cy="100%" r="90%">
+                  <stop offset="0%" stop-color="${color1Light}" />
+                  <stop offset="50%" stop-color="${color1Main}" />
+                  <stop offset="100%" stop-color="${color1Dark}" />
+                </radialGradient>
+
+                <!-- Bottom-right -->
+                <radialGradient id="grad2" cx="100%" cy="100%" r="90%">
+                  <stop offset="0%" stop-color="${color2Light}" />
+                  <stop offset="50%" stop-color="${color2Main}" />
+                  <stop offset="100%" stop-color="${color2Dark}" />
+                </radialGradient>
+
+                <!-- White top fade -->
+                <linearGradient id="whiteTopGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+                  <stop offset="0%" stop-color="#ffffff" stop-opacity="1" />
+                  <stop offset="100%" stop-color="#ffffff" stop-opacity="0.3" />
+                </linearGradient>
+
+                <!-- Strong grain -->
+                <filter id="grain" x="-10%" y="-10%" width="120%" height="120%">
+                  <feTurbulence type="fractalNoise" baseFrequency="3.5" numOctaves="3" seed="8" result="noise" />
+                  <feComponentTransfer>
+                    <feFuncR type="linear" slope="3.5" intercept="-1.2" />
+                    <feFuncG type="linear" slope="3.5" intercept="-1.2" />
+                    <feFuncB type="linear" slope="3.5" intercept="-1.2" />
+                    <feFuncA type="table" tableValues="0 0.8" />
+                  </feComponentTransfer>
+                </filter>
+              </defs>
+
+              <!-- White base -->
+              <rect width="100%" height="100%" fill="#ffffff" />
+
+              <!-- Gradients -->
+              <rect width="100%" height="100%" fill="url(#grad1)" />
+              <rect width="100%" height="100%" fill="url(#grad2)" style="mix-blend-mode:screen; opacity:0.85" />
+
+              <!-- White fade on top -->
+              <rect width="100%" height="100%" fill="url(#whiteTopGrad)" />
+
+              <!-- Strong visible noise -->
+              <rect width="100%" height="100%" filter="url(#grain)"
+                style="mix-blend-mode:soft-light; opacity:1.2" />
+            </svg>
+        `);
+
+        const backgroundImage = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgContent)}`;
+
+        return { brandColorHex, brandColorLightHex, brandColorDarkHex, backgroundImage };
+    }, [meta.color]);
+
+    return (
+        <>
+            {fontString && (
+                <style jsx global>{`
+                    @import url('https://fonts.googleapis.com/css2?family=${encodeURIComponent(
+                        fontString.split(',')[0].trim().replace(/['"]/g, ''),
+                    )}:wght@400;600;700&display=swap');
+                `}</style>
+            )}
+
+            {/* Full-screen background with agent color */}
+            <div
+                className={`w-full flex flex-col items-center justify-center p-6 md:p-12 relative overflow-hidden ${
+                    isHeadless ? 'min-h-screen' : 'min-h-[calc(100vh-60px)]'
+                } ${className || ''}`}
+                style={{
+                    background: `url("${backgroundImage}")`,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                    ...fontStyle,
+                }}
+            >
+                {/* Options menu in top right */}
+                {!isHeadless && renderMenu && (
+                    <div className="absolute top-4 right-4 z-[9999]">
+                        {renderMenu({ onShowQrCode: () => setIsQrModalOpen(true) })}
+                    </div>
+                )}
+
+                {/* Main profile content */}
+                <div className="relative z-10 flex flex-col md:flex-row items-center md:items-start gap-8 md:gap-12 max-w-5xl w-full">
+                    {/* Agent image card (Flippable) */}
+                    <div className="flex-shrink-0 perspective-1000 group" style={{ perspective: '1000px' }}>
+                        <div
+                            className="relative w-72 md:w-80 transition-all duration-700 transform-style-3d cursor-pointer"
+                            style={{
+                                aspectRatio: '1 / 1.618', // Golden Ratio
+                                transformStyle: 'preserve-3d',
+                                transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
+                            }}
+                            onClick={() => setIsFlipped(!isFlipped)}
+                        >
+                            {/* Front of Card (Image) */}
+                            <div
+                                className="absolute inset-0 w-full h-full backface-hidden rounded-3xl shadow-2xl overflow-hidden backdrop-blur-sm"
+                                style={{
+                                    backfaceVisibility: 'hidden',
+                                    backgroundColor: brandColorDarkHex,
+                                    boxShadow: `0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px ${brandColorLightHex}40`,
+                                }}
+                            >
+                                {imageUrl ? (
+                                    // eslint-disable-next-line @next/next/no-img-element
+                                    <img src={imageUrl} alt={fullname} className="w-full h-full object-cover" />
+                                ) : (
+                                    <div
+                                        className="w-full h-full flex items-center justify-center text-8xl font-bold text-white/80"
+                                        style={{ backgroundColor: brandColorDarkHex }}
+                                    >
+                                        {fullname.charAt(0).toUpperCase()}
+                                    </div>
+                                )}
+
+                                {/* Flip hint icon */}
+                                <div className="absolute bottom-4 right-4 bg-black/30 p-2 rounded-full text-white/80 backdrop-blur-md opacity-0 group-hover:opacity-100 transition-opacity">
+                                    <RepeatIcon className="w-5 h-5" />
+                                </div>
+                            </div>
+
+                            {/* Back of Card (QR Code) */}
+                            <div
+                                className="absolute inset-0 w-full h-full backface-hidden rounded-3xl shadow-2xl overflow-hidden backdrop-blur-sm flex flex-col items-center justify-center p-6"
+                                style={{
+                                    backfaceVisibility: 'hidden',
+                                    transform: 'rotateY(180deg)',
+                                    background: `linear-gradient(135deg, ${brandColorLightHex} 0%, #ffffff 100%)`,
+                                    boxShadow: `0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px ${brandColorLightHex}40`,
+                                }}
+                            >
+                                <div className="transform scale-90 md:scale-100">
+                                    <AgentQrCode
+                                        agentName={agentName}
+                                        agentUrl={agentUrl}
+                                        agentEmail={agentEmail}
+                                        personaDescription={personaDescription}
+                                        meta={meta}
+                                        isJustVcardShown
+                                    />
+                                </div>
+
+                                {/* Flip hint icon */}
+                                <div className="absolute bottom-4 right-4 bg-black/10 p-2 rounded-full text-black/50 backdrop-blur-md">
+                                    <RepeatIcon className="w-5 h-5" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Agent info */}
+                    <div className="flex flex-col items-center md:items-start text-center md:text-left gap-6">
+                        {/* Agent name with custom font */}
+                        <h1
+                            className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 tracking-tight"
+                            style={{
+                                textShadow: '0 2px 20px rgba(255, 255, 255, 0.5)',
+                            }}
+                        >
+                            {fullname}
+                        </h1>
+
+                        {/* Short description */}
+                        <p className="text-lg md:text-xl text-gray-700 max-w-lg leading-relaxed font-medium">
+                            {personaDescription}
+                        </p>
+
+                        {/* Chat */}
+                        <div className="w-full">{children}</div>
+
+                        {/* Secondary Actions */}
+                        {!isHeadless && (
+                            <div className="flex flex-wrap justify-center md:justify-start items-center gap-4 md:gap-6 mt-2">
+                                {actions}
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                {/* Subtle gradient overlay at bottom */}
+                <div
+                    className="absolute bottom-0 left-0 right-0 h-32 pointer-events-none"
+                    style={{
+                        background: `linear-gradient(to top, ${brandColorDarkHex}40, transparent)`,
+                    }}
+                />
+            </div>
+
+            {/* QR Code Modal */}
+            <QrCodeModal
+                isOpen={isQrModalOpen}
+                onClose={() => setIsQrModalOpen(false)}
+                agentName={agentName}
+                meta={meta}
+                personaDescription={personaDescription}
+                agentUrl={agentUrl}
+                agentEmail={agentEmail}
+                brandColorHex={brandColorHex}
+            />
+        </>
+    );
+}
+
+/**
+ * TODO: !!!! Use 3D badge @see https://vercel.com/blog/building-an-interactive-3d-event-badge-with-react-three-fiber
+ */

package/apps/agents-server/src/components/AgentProfile/AgentProfileFromSource.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { string_book } from '@promptbook-local/types';
+import { useMemo } from 'react';
+import { parseAgentSource } from '../../../../../src/book-2.0/agent-source/parseAgentSource';
+import { AgentProfile } from './AgentProfile';
+
+type AgentProfileFromSourceProps = Omit<React.ComponentProps<typeof AgentProfile>, 'agent'> & {
+    /**
+     * Source code of the agent (book)
+     */
+    readonly source: string_book;
+};
+
+export function AgentProfileFromSource(props: AgentProfileFromSourceProps) {
+    const { source, ...rest } = props;
+
+    const agent = useMemo(() => {
+        return parseAgentSource(source);
+    }, [source]);
+
+    return <AgentProfile agent={agent} {...rest} />;
+}

package/apps/agents-server/src/{app/agents/[agentName] → components/AgentProfile}/AgentQrCode.tsx

@@ -8,9 +8,12 @@ import spaceTrim from 'spacetrim';
 type AgentQrCodeProps = Pick<AgentBasicInformation, 'agentName' | 'personaDescription' | 'meta'> & {
     agentUrl: string;
     agentEmail: string;
+
+    isJustVcardShown?: boolean;
 };
 
-export function AgentQrCode({ agentName, agentUrl, agentEmail, personaDescription, meta }: AgentQrCodeProps) {
+export function AgentQrCode(props: AgentQrCodeProps) {
+    const { agentName, agentUrl, agentEmail, personaDescription, meta, isJustVcardShown } = props;
     const [mode, setMode] = useState<'contact' | 'link'>('contact');
 
     // TODO: [🧠] Should we include more info in VCARD?
@@ -27,6 +30,10 @@ export function AgentQrCode({ agentName, agentUrl, agentEmail, personaDescriptio
     const qrValue = mode === 'contact' ? vcard : agentUrl;
     const label = mode === 'contact' ? 'Scan to add contact' : 'Scan to open agent';
 
+    if (isJustVcardShown) {
+        return <PromptbookQrCode value={vcard} className="" size={250} />;
+    }
+
     return (
         <div className="flex flex-col items-center">
             <div className="flex bg-gray-100 p-1 rounded-lg mb-4">

package/apps/agents-server/src/components/AgentProfile/QrCodeModal.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { AgentBasicInformation } from '@promptbook-local/types';
+import { XIcon } from 'lucide-react';
+import { useEffect } from 'react';
+import { AgentQrCode } from './AgentQrCode';
+
+type QrCodeModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    agentName: string;
+    meta: AgentBasicInformation['meta'];
+    personaDescription: string;
+    agentUrl: string;
+    agentEmail: string;
+    brandColorHex: string;
+};
+
+export function QrCodeModal({
+    isOpen,
+    onClose,
+    agentName,
+    meta,
+    personaDescription,
+    agentUrl,
+    agentEmail,
+    brandColorHex,
+}: QrCodeModalProps) {
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = '';
+        }
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, [isOpen]);
+
+    useEffect(() => {
+        function handleEscape(event: KeyboardEvent) {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        }
+
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscape);
+        }
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [isOpen, onClose]);
+
+    if (!isOpen) return null;
+
+    return (
+        <div
+            className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+            onClick={onClose}
+        >
+            <div
+                className="relative bg-white rounded-2xl shadow-2xl p-8 max-w-sm w-full mx-4 animate-in zoom-in-95 duration-200"
+                onClick={(e) => e.stopPropagation()}
+            >
+                <button
+                    onClick={onClose}
+                    className="absolute top-4 right-4 p-2 rounded-full hover:bg-gray-100 transition-colors"
+                    aria-label="Close"
+                >
+                    <XIcon className="w-5 h-5 text-gray-500" />
+                </button>
+
+                <h3 className="text-xl font-semibold text-gray-900 mb-6 text-center">Scan to Chat</h3>
+
+                <div className="flex justify-center">
+                    <AgentQrCode
+                        agentName={agentName}
+                        meta={meta}
+                        personaDescription={personaDescription}
+                        agentUrl={agentUrl}
+                        agentEmail={agentEmail}
+                    />
+                </div>
+
+                <p className="mt-6 text-sm text-gray-500 text-center">
+                    Scan this QR code to start chatting with {(meta.fullname as string) || agentName}
+                </p>
+            </div>
+        </div>
+    );
+}

package/apps/agents-server/src/components/DocumentationContent/DocumentationContent.tsx

@@ -0,0 +1,87 @@
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { string_book } from '../../../../../src/book-2.0/agent-source/string_book';
+import { BookEditor } from '../../../../../src/book-components/BookEditor/BookEditor';
+import { OpenMojiIcon } from '../OpenMojiIcon/OpenMojiIcon';
+
+type DocumentationContentProps = {
+    primary: {
+        type: string;
+        icon: string;
+        description?: string;
+        documentation: string;
+    };
+    aliases?: string[];
+    isPrintOnly?: boolean;
+};
+
+export function DocumentationContent({ primary, aliases = [], isPrintOnly = false }: DocumentationContentProps) {
+    return (
+        <div className={`bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden ${isPrintOnly ? 'shadow-none border-none' : ''}`}>
+            <div className={`p-8 border-b border-gray-100 bg-gray-50/50 ${isPrintOnly ? 'border-none bg-white p-0 mb-4' : ''}`}>
+                <div className="flex items-center gap-4 mb-4">
+                    <h1 className="text-4xl font-bold text-gray-900 tracking-tight">
+                        <OpenMojiIcon icon={primary.icon} className="mr-3" />
+                        {primary.type}
+                        {aliases.length > 0 && (
+                            <span className="text-gray-400 font-normal ml-4 text-2xl">
+                                / {aliases.join(' / ')}
+                            </span>
+                        )}
+                    </h1>
+                    {!isPrintOnly && (
+                        <span className="px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
+                            Commitment
+                        </span>
+                    )}
+                </div>
+                {primary.description && (
+                    <p className="text-xl text-gray-600 leading-relaxed max-w-3xl">
+                        {primary.description}
+                    </p>
+                )}
+            </div>
+            
+            <div className={`p-8 ${isPrintOnly ? 'p-0' : ''}`}>
+                <article className="prose prose-lg prose-slate max-w-none prose-headings:font-bold prose-headings:tracking-tight prose-headings:text-gray-900 prose-h1:text-4xl prose-h1:mb-8 prose-h2:text-2xl prose-h2:mt-12 prose-h2:mb-6 prose-h2:pb-2 prose-h2:border-b prose-h2:border-gray-200 prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-4 prose-h3:text-gray-800 prose-p:text-gray-600 prose-p:leading-relaxed prose-p:mb-6 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:text-blue-700 hover:prose-a:underline prose-a:transition-colors prose-strong:font-bold prose-strong:text-gray-900 prose-code:text-blue-600 prose-code:bg-blue-50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:before:content-none prose-code:after:content-none prose-code:font-medium prose-pre:bg-gray-900 prose-pre:text-gray-100 prose-pre:shadow-lg prose-pre:rounded-xl prose-pre:p-6 prose-ul:list-disc prose-ul:pl-6 prose-li:marker:text-gray-400 prose-li:mb-2 prose-ol:list-decimal prose-ol:pl-6 prose-li:mb-2 prose-blockquote:border-l-4 prose-blockquote:border-blue-500 prose-blockquote:bg-blue-50/50 prose-blockquote:py-2 prose-blockquote:px-4 prose-blockquote:rounded-r-lg prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-blockquote:my-8 prose-img:rounded-xl prose-img:shadow-md prose-img:my-8 prose-hr:border-gray-200 prose-hr:my-10 prose-table:w-full prose-th:text-left prose-th:py-2 prose-th:px-3 prose-th:bg-gray-100 prose-th:font-semibold prose-th:text-gray-900 prose-td:py-2 prose-td:px-3 prose-td:border-b prose-td:border-gray-200 prose-tr:hover:bg-gray-50">
+                    <ReactMarkdown
+                        remarkPlugins={[remarkGfm]}
+                        components={{
+                            code(props) {
+                                const { children, className, node, ...rest } = props;
+                                const match = /language-(\w+)/.exec(className || '');
+                                if (match && match[1] === 'book') {
+                                    const value = String(children).replace(/\n$/, '');
+                                    // Estimate height: lines * 30px + padding
+                                    const lineCount = value.split('\n').length;
+                                    const height = lineCount * 30 + 40; // 30px per line + 40px buffer
+
+                                    return (
+                                        <div className="not-prose my-6 rounded-lg overflow-hidden border border-gray-200 shadow-sm print:border-gray-300">
+                                            <BookEditor
+                                                value={value as string_book}
+                                                isReadonly={true}
+                                                isVerbose={false}
+                                                height={`${height}px`}
+                                                isDownloadButtonShown={false}
+                                                isAboutButtonShown={false}
+                                                isFullscreenButtonShown={true}
+                                            />
+                                        </div>
+                                    );
+                                }
+                                return (
+                                    <code className={className} {...rest}>
+                                        {children}
+                                    </code>
+                                );
+                            },
+                        }}
+                    >
+                        {primary.documentation}
+                    </ReactMarkdown>
+                </article>
+            </div>
+        </div>
+    );
+}

package/apps/agents-server/src/components/LayoutWrapper/LayoutWrapper.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { usePathname } from 'next/navigation';
+import { usePathname, useSearchParams } from 'next/navigation';
 import { AgentBasicInformation } from '../../../../../src/book-2.0/agent-source/AgentBasicInformation';
 import type { UserInfo } from '../../utils/getCurrentUser';
 import { Footer, type FooterLink } from '../Footer/Footer';
@@ -28,12 +28,13 @@ export function LayoutWrapper({
     footerLinks,
 }: LayoutWrapperProps) {
     const pathname = usePathname();
-    const isAdminChatPage =
-        pathname?.startsWith('/admin/chat-history') || pathname?.startsWith('/admin/chat-feedback');
-    const isHeaderHidden = pathname?.includes('/chat') && !isAdminChatPage;
-    const isFooterHiddenOnPage = pathname ? /^\/agents\/[^/]+\/book(\+chat)?$/.test(pathname) : false;
+    const searchParams = useSearchParams();
+    const isHeadless = searchParams.has('headless');
+    // const isAdminChatPage = pathname?.startsWith('/admin/chat-history') || pathname?.startsWith('/admin/chat-feedback');
+    const isHeaderHidden = false; // pathname?.includes('/chat') && !isAdminChatPage;
+    const isFooterHiddenOnPage = pathname ? /^\/agents\/[^/]+\/(book|chat|book\+chat)$/.test(pathname) : false;
 
-    if (isHeaderHidden) {
+    if (isHeaderHidden || isHeadless) {
         return <main className={`pt-0`}>{children}</main>;
     }
 

package/apps/agents-server/src/components/OpenMojiIcon/OpenMojiIcon.tsx

@@ -0,0 +1,20 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
+
+type OpenMojiIconProps = DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
+    icon: string;
+};
+
+/**
+ * Renders an emoji using the OpenMoji black and white font
+ */
+export function OpenMojiIcon({ icon, className, style, ...rest }: OpenMojiIconProps) {
+    return (
+        <span
+            className={className}
+            style={{ ...style, fontFamily: '"OpenMojiBlack", sans-serif' }}
+            {...rest}
+        >
+            {icon}
+        </span>
+    );
+}

package/apps/agents-server/src/components/PrintButton/PrintButton.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { OpenMojiIcon } from '../OpenMojiIcon/OpenMojiIcon';
+
+export function PrintButton() {
+    return (
+        <button
+            onClick={() => window.print()}
+            className="fixed bottom-8 right-8 bg-blue-600 hover:bg-blue-700 text-white rounded-full p-4 shadow-lg transition-all hover:scale-105 print:hidden z-50 flex items-center justify-center gap-2 group"
+            title="Print documentation"
+        >
+            <OpenMojiIcon icon="🖨️" className="text-2xl" />
+            <span className="max-w-0 overflow-hidden group-hover:max-w-xs transition-all duration-300 ease-in-out whitespace-nowrap">
+                Print
+            </span>
+        </button>
+    );
+}

package/apps/agents-server/src/components/PrintHeader/PrintHeader.tsx

@@ -0,0 +1,18 @@
+export function PrintHeader({ title }: { title?: string }) {
+    return (
+        <div className="hidden print:block mb-8 border-b-2 border-blue-600 pb-4">
+            <div className="flex justify-between items-end">
+                <div>
+                    <h1 className="text-3xl font-bold text-gray-900 font-poppins">Agents Server</h1>
+                    <div className="text-sm text-gray-500 mt-1 flex items-center gap-1">
+                        Powered by <span className="font-semibold text-blue-600">Promptbook</span>
+                    </div>
+                </div>
+                {title && <h2 className="text-xl font-semibold text-gray-700">{title}</h2>}
+            </div>
+            <div className="text-xs text-gray-400 mt-2 text-right">
+                {new Date().toLocaleDateString()}
+            </div>
+        </div>
+    );
+}

package/apps/agents-server/src/database/metadataDefaults.ts

@@ -61,6 +61,12 @@ export const metadataDefaults = [
         note: 'Maximum size of file that can be uploaded in MB.',
         type: 'NUMBER',
     },
+    {
+        key: 'NAME_POOL',
+        value: 'ENGLISH',
+        note: 'Language for generating new agent names. Possible values: ENGLISH, CZECH.',
+        type: 'TEXT_SINGLE_LINE',
+    },
 ] as const satisfies ReadonlyArray<{
     key: string;
     value: string;

package/apps/agents-server/src/database/migrations/2025-12-0070-chat-history-source.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "ChatHistory" ADD COLUMN "source" TEXT CHECK ("source" IN ('AGENT_PAGE_CHAT', 'OPENAI_API_COMPATIBILITY'));
+ALTER TABLE "ChatHistory" ADD COLUMN "apiKey" TEXT;