@promptbook/cli 0.103.0-54 → 0.103.0-56

package/apps/agents-server/src/app/agents/[agentName]/AgentOptionsMenu.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+import {
+    CopyIcon,
+    CopyPlusIcon,
+    DownloadIcon,
+    MailIcon,
+    MessageCircleQuestionIcon,
+    MessageSquareIcon,
+    MessageSquareShareIcon,
+    MoreHorizontalIcon,
+    QrCodeIcon,
+    SquareSplitHorizontalIcon,
+} from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { string_data_url, string_url_image } from '../../../../../../src/types/typeAliases';
+import { getAgentLinks } from './agentLinks';
+
+type AgentOptionsMenuProps = {
+    agentName: string;
+    agentUrl: string;
+    agentEmail: string;
+    brandColorHex: string;
+    isAdmin?: boolean;
+    backgroundImage: string_url_image & string_data_url;
+    onShowQrCode?: () => void;
+};
+
+export function AgentOptionsMenu({
+    agentName,
+    agentUrl,
+    agentEmail,
+    brandColorHex,
+    isAdmin = false,
+    backgroundImage,
+    onShowQrCode,
+}: AgentOptionsMenuProps) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [copyFeedback, setCopyFeedback] = useState<string | null>(null);
+    const menuRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        function handleClickOutside(event: MouseEvent) {
+            if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+                setIsOpen(false);
+            }
+        }
+
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    const handleCopy = async (value: string, label: string) => {
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopyFeedback(label);
+            setTimeout(() => setCopyFeedback(null), 2000);
+        } catch (error) {
+            console.error('Failed to copy:', error);
+        }
+    };
+
+    const links = getAgentLinks(agentName);
+    const editBookLink = links.find((l) => l.title === 'Edit Book')!;
+    const integrationLink = links.find((l) => l.title === 'Integration')!;
+    const historyLink = links.find((l) => l.title === 'History & Feedback')!;
+    const allLinksLink = links.find((l) => l.title === 'All Links')!;
+
+    const menuItems = [
+        {
+            type: 'link' as const,
+            href: `/agents/${encodeURIComponent(agentName)}/chat`,
+            icon: MessageSquareShareIcon,
+            label: 'Standalone Chat',
+        },
+        {
+            type: 'link' as const,
+            href: `/agents/${encodeURIComponent(agentName)}/book+chat`,
+            icon: SquareSplitHorizontalIcon,
+            label: 'Edit Book & Chat',
+        },
+        {
+            type: 'link' as const,
+            href: editBookLink.href,
+            icon: editBookLink.icon,
+            label: editBookLink.title,
+        },
+        { type: 'divider' as const },
+        {
+            type: 'link' as const,
+            href: integrationLink.href,
+            icon: integrationLink.icon,
+            label: integrationLink.title,
+        },
+        {
+            type: 'link' as const,
+            href: historyLink.href,
+            icon: historyLink.icon,
+            label: historyLink.title, // 'History & Feedback'
+        },
+        {
+            type: 'link' as const,
+            href: allLinksLink.href,
+            icon: allLinksLink.icon,
+            label: allLinksLink.title,
+        },
+        { type: 'divider' as const },
+        {
+            type: 'action' as const,
+            icon: CopyIcon,
+            label: copyFeedback === 'URL' ? 'Copied!' : 'Copy Agent URL',
+            onClick: () => handleCopy(agentUrl, 'URL'),
+        },
+        {
+            type: 'action' as const,
+            icon: MailIcon,
+            label: copyFeedback === 'Email' ? 'Copied!' : 'Copy Agent Email',
+            onClick: () => handleCopy(agentEmail, 'Email'),
+        },
+        {
+            type: 'action' as const,
+            icon: QrCodeIcon,
+            label: 'Show QR Code',
+            onClick: onShowQrCode,
+        },
+        // Admin-only items
+        ...(isAdmin
+            ? [
+                  { type: 'divider' as const },
+                  {
+                      type: 'link' as const,
+                      href: `/admin/chat-history?agentName=${encodeURIComponent(agentName)}`,
+                      icon: MessageSquareIcon,
+                      label: 'Chat History',
+                  },
+                  {
+                      type: 'link' as const,
+                      href: `/admin/chat-feedback?agentName=${encodeURIComponent(agentName)}`,
+                      icon: MessageCircleQuestionIcon,
+                      label: 'Chat Feedback',
+                  },
+                  {
+                      type: 'link' as const,
+                      href: `/agents/${encodeURIComponent(agentName)}/clone`,
+                      icon: CopyPlusIcon,
+                      label: 'Clone Agent',
+                  },
+                  {
+                      type: 'link' as const,
+                      href: `/agents/${encodeURIComponent(agentName)}/export`,
+                      icon: DownloadIcon,
+                      label: 'Export Agent',
+                  },
+                  // {
+                  //     type: 'link' as const,
+                  //     href: backgroundImage,
+                  //     icon: DownloadIcon,
+                  //     label: 'Download Background Image',
+                  // },
+              ]
+            : []),
+    ];
+
+    return (
+        <div ref={menuRef} className="relative">
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                className="p-3 rounded-full bg-white/20 hover:bg-white/30 transition-all duration-200 backdrop-blur-sm"
+                style={{ backgroundColor: brandColorHex }}
+                aria-label="More options"
+            >
+                <MoreHorizontalIcon className="w-5 h-5 text-white" />
+            </button>
+
+            {isOpen && (
+                <div className="absolute right-0 top-full mt-2 w-56 bg-white rounded-xl shadow-2xl border border-gray-100 py-2 z-50 animate-in fade-in slide-in-from-top-2 duration-200">
+                    {menuItems.map((item, index) => {
+                        if (item.type === 'divider') {
+                            return <div key={index} className="h-px bg-gray-100 my-2" />;
+                        }
+
+                        if (item.type === 'link') {
+                            return (
+                                <a
+                                    key={index}
+                                    href={item.href}
+                                    className="flex items-center gap-3 px-4 py-2.5 text-gray-700 hover:bg-gray-50 transition-colors"
+                                    onClick={() => setIsOpen(false)}
+                                >
+                                    <item.icon className="w-4 h-4 text-gray-500" />
+                                    <span className="text-sm font-medium">{item.label}</span>
+                                </a>
+                            );
+                        }
+
+                        return (
+                            <button
+                                key={index}
+                                onClick={() => {
+                                    item.onClick?.();
+                                    if (item.label !== 'Show QR Code') {
+                                        // Keep menu open for copy feedback
+                                    }
+                                }}
+                                className="flex items-center gap-3 px-4 py-2.5 text-gray-700 hover:bg-gray-50 transition-colors w-full text-left"
+                            >
+                                <item.icon className="w-4 h-4 text-gray-500" />
+                                <span className="text-sm font-medium">{item.label}</span>
+                            </button>
+                        );
+                    })}
+                </div>
+            )}
+        </div>
+    );
+}

package/apps/agents-server/src/app/agents/[agentName]/AgentProfileChat.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { Chat } from '@promptbook-local/components';
+import { RemoteAgent } from '@promptbook-local/core';
+import spaceTrim from 'spacetrim';
+import { useCallback, useMemo } from 'react';
+import { usePromise } from '@common/hooks/usePromise';
+import { useRouter } from 'next/navigation';
+import { string_agent_url } from '../../../../../../src/types/typeAliases';
+
+type AgentProfileChatProps = {
+    agentUrl: string_agent_url;
+    agentName: string;
+    fullname: string;
+};
+
+export function AgentProfileChat({ agentUrl, agentName, fullname }: AgentProfileChatProps) {
+    const router = useRouter();
+
+    const agentPromise = useMemo(
+        () =>
+            RemoteAgent.connect({
+                agentUrl,
+                isVerbose: true,
+            }),
+        [agentUrl],
+    );
+
+    const { value: agent } = usePromise(agentPromise, [agentPromise]);
+
+    const handleMessage = useCallback(
+        async (message: string) => {
+            // Redirect to chat page with the message
+            router.push(`/agents/${encodeURIComponent(agentName)}/chat?message=${encodeURIComponent(message)}`);
+        },
+        [agentName, router],
+    );
+
+    const initialMessage = useMemo(() => {
+        if (!agent) {
+            return 'Loading...';
+        }
+        return (
+            agent.initialMessage ||
+            spaceTrim(`
+                Hello! I am ${fullname || agentName || 'an AI Agent'}.
+                
+                [Hello](?message=Hello, can you tell me about yourself?)
+            `)
+        );
+    }, [agent, fullname, agentName]);
+
+    // If agent is not loaded yet, we can show a skeleton or just the default Chat structure
+    // But to match "same initial message", we need the agent loaded or at least the default fallback.
+    // The fallback above matches AgentChat.tsx default.
+
+    return (
+        <div className="w-full h-[400px] md:h-[500px]">
+             <Chat
+                title={`Chat with ${fullname}`}
+                messages={[
+                    {
+                        from: 'AGENT',
+                        content: initialMessage,
+                        date: new Date(),
+                        id: 'initial-message',
+                        isComplete: true
+                    },
+                ]}
+                onMessage={handleMessage}
+                isSaveButtonEnabled={false}
+                isCopyButtonEnabled={false}
+                className="bg-transparent"
+                style={{ background: 'transparent' }}
+            />
+        </div>
+    );
+}

package/apps/agents-server/src/app/agents/[agentName]/AgentProfileView.tsx

@@ -0,0 +1,233 @@
+'use client';
+
+import { AgentBasicInformation, string_data_url, string_url_image } from '@promptbook-local/types';
+import { RepeatIcon } from 'lucide-react';
+import { useState } from 'react';
+import { getAgentLinks } from './agentLinks';
+import { AgentOptionsMenu } from './AgentOptionsMenu';
+import { AgentProfileChat } from './AgentProfileChat';
+import { AgentQrCode } from './AgentQrCode';
+import { QrCodeModal } from './QrCodeModal';
+
+type AgentProfileViewProps = {
+    agentName: string;
+    fullname: string;
+    personaDescription: string;
+    imageUrl: string | null;
+    agentUrl: string;
+    agentEmail: string;
+    brandColorHex: string;
+    brandColorLightHex: string;
+    brandColorDarkHex: string;
+    brandColorsHex: string[];
+    backgroundImage: string_url_image & string_data_url;
+    meta: AgentBasicInformation['meta'];
+    isAdmin?: boolean;
+};
+
+export function AgentProfileView({
+    agentName,
+    fullname,
+    personaDescription,
+    imageUrl,
+    agentUrl,
+    agentEmail,
+    brandColorHex,
+    brandColorLightHex,
+    brandColorDarkHex,
+    brandColorsHex,
+    backgroundImage,
+    meta,
+    isAdmin = false,
+}: AgentProfileViewProps) {
+    const [isQrModalOpen, setIsQrModalOpen] = useState(false);
+    const [isFlipped, setIsFlipped] = useState(false);
+
+    // Dynamic Font Loading
+    const fontString = meta.font;
+    let fontStyle: React.CSSProperties = {};
+
+    if (fontString) {
+        const primaryFont = fontString.split(',')[0].trim().replace(/['"]/g, '');
+        const googleFontUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(
+            primaryFont,
+        )}:wght@400;600;700&display=swap`;
+
+        fontStyle = {
+            fontFamily: fontString,
+        };
+
+        // TODO: [🧠] Is this the best way to load fonts? Maybe use next/font/google?
+        // But next/font/google requires known font at build time or generic loader which might be tricky dynamically.
+        // Inserting a link tag is a simple dynamic solution.
+    }
+
+    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="min-h-[calc(100vh-60px)] w-full flex flex-col items-center justify-center p-6 md:p-12 relative overflow-hidden"
+                style={{
+                    background: `url("${backgroundImage}")`,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                    ...fontStyle,
+                }}
+            >
+                {/* Options menu in top right */}
+                <div className="absolute top-4 right-4 z-10">
+                    <AgentOptionsMenu
+                        agentName={agentName}
+                        agentUrl={agentUrl}
+                        agentEmail={agentEmail}
+                        brandColorHex={brandColorHex}
+                        isAdmin={isAdmin}
+                        onShowQrCode={() => setIsQrModalOpen(true)}
+                        backgroundImage={backgroundImage}
+                    />
+                </div>
+
+                {/* Main profile content */}
+                <div className="relative z-10 flex flex-col md:flex-row items-center 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.62', // 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 border-4 border-white/20 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 border-4 border-white/20 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}
+                                    />
+                                </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={{
+                                // fontFamily: 'var(--font-poppins), Poppins, sans-serif', // <- [🧠] Should we keep this fallback or just use inherited font?
+                                // Using inherited font from the wrapper div which has dynamic font
+                                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">
+                            <AgentProfileChat agentUrl={agentUrl} agentName={agentName} fullname={fullname} />
+                        </div>
+
+                        {/* Secondary Actions */}
+                        <div className="flex flex-wrap justify-center md:justify-start items-center gap-4 md:gap-6 mt-2">
+                            {getAgentLinks(agentName)
+                                .filter((link) => ['Edit Book', 'Integration', 'All Links'].includes(link.title))
+                                .map((link) => (
+                                    <a
+                                        key={link.href}
+                                        href={link.href}
+                                        className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors group"
+                                        title={link.title}
+                                    >
+                                        <div className="p-2 rounded-full bg-white/40 group-hover:bg-white/60 transition-colors shadow-sm">
+                                            <link.icon className="w-5 h-5" />
+                                        </div>
+                                        <span className="font-medium text-sm">{link.title}</span>
+                                    </a>
+                                ))}
+                        </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}
+            />
+        </>
+    );
+}

package/apps/agents-server/src/app/agents/[agentName]/CloneAgentButton.tsx

@@ -12,10 +12,10 @@ export function CloneAgentButton({ agentName }: CloneAgentButtonProps) {
 
     const handleClone = async () => {
         if (!window.confirm(`Clone agent "${agentName}"?`)) return;
-        
+
         try {
             const response = await fetch(`/api/agents/${encodeURIComponent(agentName)}/clone`, { method: 'POST' });
-            
+
             if (!response.ok) {
                 throw new Error('Failed to clone agent');
             }
@@ -32,9 +32,9 @@ export function CloneAgentButton({ agentName }: CloneAgentButtonProps) {
     return (
         <button
             onClick={handleClone}
-            className="flex-1 inline-flex items-center justify-center whitespace-nowrap bg-white hover:bg-gray-100 text-gray-800 px-4 py-2 rounded shadow font-semibold transition border border-gray-200"
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 shadow-sm hover:bg-gray-50"
         >
-            <CopyIcon className="ml-2 w-4 h-4 mr-2" />
+            <CopyIcon className="mr-2 w-3 h-3" />
             Clone
         </button>
     );

package/apps/agents-server/src/app/agents/[agentName]/InstallPwaButton.tsx

@@ -58,7 +58,7 @@ export function InstallPwaButton() {
         <button
             type="button"
             onClick={onInstall}
-            className="flex-1 inline-flex items-center justify-center whitespace-nowrap bg-white hover:bg-gray-100 text-gray-800 px-4 py-2 rounded shadow font-semibold transition border border-gray-200"
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 shadow-sm hover:bg-gray-50"
             style={{
                 opacity: installPromptEvent ? 1 : 0.5,
                 cursor: installPromptEvent ? 'pointer' : 'wait',
@@ -67,7 +67,7 @@ export function InstallPwaButton() {
             disabled={!installPromptEvent}
         >
             {/* Simple icon substitute: download arrow */}
-            <ShoppingBagIcon className="ml-2 w-4 h-4 mr-2" />
+            <ShoppingBagIcon className="mr-2 w-3 h-3" />
             Install
         </button>
     );

package/apps/agents-server/src/app/agents/[agentName]/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>
+    );
+}