@promptbook/cli 0.103.0-10 → 0.103.0-100

package/apps/agents-server/src/app/admin/users/page.tsx

@@ -0,0 +1,18 @@
+import { ForbiddenPage } from '../../../components/ForbiddenPage/ForbiddenPage';
+import { UsersList } from '../../../components/UsersList/UsersList';
+import { isUserAdmin } from '../../../utils/isUserAdmin';
+
+export default async function AdminUsersPage() {
+    const isAdmin = await isUserAdmin();
+
+    if (!isAdmin) {
+        return <ForbiddenPage />;
+    }
+
+    // Full users management (list + create) is only available on this page
+    return (
+        <div className="container mx-auto px-4 py-8">
+            <UsersList allowCreate />
+        </div>
+    );
+}

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

@@ -0,0 +1,78 @@
+'use client';
+
+import { usePromise } from '@common/hooks/usePromise';
+import { AgentChat } from '@promptbook-local/components';
+import { RemoteAgent } from '@promptbook-local/core';
+import { useCallback, useMemo } from 'react';
+import { string_agent_url } from '../../../../../../src/types/typeAliases';
+
+type AgentChatWrapperProps = {
+    agentUrl: string_agent_url;
+    defaultMessage?: string;
+    autoExecuteMessage?: string;
+};
+
+// TODO: [🐱‍🚀] Rename to AgentChatSomethingWrapper
+
+export function AgentChatWrapper(props: AgentChatWrapperProps) {
+    const { agentUrl, defaultMessage, autoExecuteMessage } = props;
+
+    const agentPromise = useMemo(
+        () =>
+            RemoteAgent.connect({
+                agentUrl,
+                isVerbose: true,
+            }),
+        [agentUrl],
+    );
+
+    const { value: agent } = usePromise(agentPromise, [agentPromise]);
+
+    const handleFeedback = useCallback(
+        async (feedback: {
+            rating: number;
+            textRating?: string;
+            chatThread?: string;
+            userNote?: string;
+            expectedAnswer?: string | null;
+        }) => {
+            if (!agent) {
+                return;
+            }
+
+            await fetch(`${agentUrl}/api/feedback`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    rating: feedback.rating.toString(),
+                    textRating: feedback.textRating,
+                    chatThread: feedback.chatThread,
+                    userNote: feedback.textRating, // Mapping textRating to userNote as well if needed, or just textRating
+                    expectedAnswer: feedback.expectedAnswer,
+                    agentHash: agent.agentHash,
+                }),
+            });
+        },
+        [agent, agentUrl],
+    );
+
+    if (!agent) {
+        return <>{/* <- TODO: [🐱‍🚀] <PromptbookLoading /> */}</>;
+    }
+
+    return (
+        <AgentChat
+            className={`w-full h-full`}
+            agent={agent}
+            onFeedback={handleFeedback}
+            defaultMessage={defaultMessage}
+            autoExecuteMessage={autoExecuteMessage}
+        />
+    );
+}
+
+/**
+ * TODO: [🚗] Transfer the saving logic to `<BookEditor/>` be aware of CRDT / yjs approach to be implementable in future
+ */

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]/AgentQrCode.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { PromptbookQrCode } from '@promptbook-local/components';
+import { AgentBasicInformation } from '@promptbook-local/types';
+import { useState } from 'react';
+import spaceTrim from 'spacetrim';
+
+type AgentQrCodeProps = Pick<AgentBasicInformation, 'agentName' | 'personaDescription' | 'meta'> & {
+    agentUrl: string;
+    agentEmail: string;
+};
+
+export function AgentQrCode({ agentName, agentUrl, agentEmail, personaDescription, meta }: AgentQrCodeProps) {
+    const [mode, setMode] = useState<'contact' | 'link'>('contact');
+
+    // TODO: [🧠] Should we include more info in VCARD?
+    const vcard = spaceTrim(`
+        BEGIN:VCARD
+        VERSION:3.0
+        FN:${meta.fullname || agentName}
+        URL:${agentUrl}
+        EMAIL:${agentEmail}
+        NOTE:${personaDescription}
+        END:VCARD
+    `);
+
+    const qrValue = mode === 'contact' ? vcard : agentUrl;
+    const label = mode === 'contact' ? 'Scan to add contact' : 'Scan to open agent';
+
+    return (
+        <div className="flex flex-col items-center">
+            <div className="flex bg-gray-100 p-1 rounded-lg mb-4">
+                <button
+                    onClick={() => setMode('contact')}
+                    className={`px-3 py-1 text-xs font-medium rounded-md transition-all ${
+                        mode === 'contact' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'
+                    }`}
+                >
+                    Contact
+                </button>
+                <button
+                    onClick={() => setMode('link')}
+                    className={`px-3 py-1 text-xs font-medium rounded-md transition-all ${
+                        mode === 'link' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'
+                    }`}
+                >
+                    Link
+                </button>
+            </div>
+
+            <PromptbookQrCode value={qrValue} className="" size={250} />
+            <span className="mt-2 text-xs text-gray-500">{label}</span>
+        </div>
+    );
+}