@promptbook/cli 0.103.0-8 → 0.103.0

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,314 @@
+'use client';
+
+import { TODO_any } from '@promptbook-local/types';
+import {
+    CopyIcon,
+    CopyPlusIcon,
+    DownloadIcon,
+    MailIcon,
+    MessageCircleQuestionIcon,
+    MessageSquareIcon,
+    MessageSquareShareIcon,
+    MoreHorizontalIcon,
+    QrCodeIcon,
+    SmartphoneIcon,
+    SquareSplitHorizontalIcon,
+} from 'lucide-react';
+import { Barlow_Condensed } from 'next/font/google';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { string_data_url, string_url_image } from '../../../../../../src/types/typeAliases';
+import { getAgentLinks } from './agentLinks';
+
+type BeforeInstallPromptEvent = Event & {
+    prompt: () => Promise<void>;
+    userChoice: Promise<{ outcome: 'accepted' | 'dismissed'; platform: string }>;
+};
+
+const barlowCondensed = Barlow_Condensed({
+    subsets: ['latin'],
+    weight: ['300', '400', '500', '600', '700'],
+    variable: '--font-barlow-condensed',
+});
+
+type AgentOptionsMenuProps = {
+    agentName: string;
+    derivedAgentName: string;
+    agentUrl: string;
+    agentEmail: string;
+    brandColorHex: string;
+    isAdmin?: boolean;
+    backgroundImage: string_url_image & string_data_url;
+    onShowQrCode?: () => void;
+};
+
+export function AgentOptionsMenu({
+    agentName,
+    derivedAgentName,
+    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);
+
+    // PWA Install state
+    const [installPromptEvent, setInstallPromptEvent] = useState<BeforeInstallPromptEvent | null>(null);
+    const [isInstalled, setIsInstalled] = useState(false);
+
+    useEffect(() => {
+        function handleBeforeInstallPrompt(e: Event) {
+            e.preventDefault();
+            setInstallPromptEvent(e as BeforeInstallPromptEvent);
+        }
+
+        function updateInstalledStatus() {
+            const mediaMatch = window.matchMedia('(display-mode: standalone)');
+            const standalone = mediaMatch.matches || (window.navigator as TODO_any).standalone === true;
+            setIsInstalled(standalone);
+        }
+
+        window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
+        updateInstalledStatus();
+        window.matchMedia('(display-mode: standalone)').addEventListener('change', updateInstalledStatus);
+
+        return () => {
+            window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
+            window.matchMedia('(display-mode: standalone)').removeEventListener('change', updateInstalledStatus);
+        };
+    }, []);
+
+    const handleInstallApp = useCallback(async () => {
+        if (!installPromptEvent) return;
+        try {
+            installPromptEvent.prompt();
+            const choice = await installPromptEvent.userChoice.catch(() => null);
+            if (choice?.outcome === 'accepted') {
+                setIsInstalled(true);
+            }
+        } finally {
+            setInstallPromptEvent(null);
+        }
+    }, [installPromptEvent]);
+
+    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')!;
+
+    // "Update URL" logic
+    const showUpdateUrl = agentName !== derivedAgentName;
+    const updateUrlHref = `/agents/${encodeURIComponent(derivedAgentName)}`;
+
+    const handleUpdateUrl = () => {
+        if (
+            window.confirm(
+                `Are you sure you want to change the agent URL from "/agents/${agentName}" to "/agents/${derivedAgentName}"?`
+            )
+        ) {
+            window.location.href = updateUrlHref;
+        }
+    };
+
+    const menuItems = [
+        ...(showUpdateUrl
+            ? [
+                  {
+                      type: 'action' as const,
+                      icon: MoreHorizontalIcon,
+                      label: 'Update URL',
+                      onClick: handleUpdateUrl,
+                      highlight: true,
+                  },
+                  { type: 'divider' as const },
+              ]
+            : []),
+        {
+            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,
+        },
+        // Install App - only show if PWA is installable and not already installed
+        ...(!isInstalled && installPromptEvent
+            ? [
+                  {
+                      type: 'action' as const,
+                      icon: SmartphoneIcon,
+                      label: 'Install App',
+                      onClick: handleInstallApp,
+                  },
+              ]
+            : []),
+        // 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 z-[9999]">
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                className="p-3 rounded-full hover:bg-white/30 transition-all duration-200"
+                // style={{ backgroundColor: brandColorHex }}
+                aria-label="More options"
+            >
+                <MoreHorizontalIcon className="w-5 h-5 text-black" />
+            </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-[9999] animate-in fade-in slide-in-from-top-2 duration-200 ${barlowCondensed.className}`}
+                >
+                    {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 w-full text-left transition-colors
+                                    ${item.highlight
+                                        ? 'bg-yellow-100 text-yellow-900 font-bold hover:bg-yellow-200'
+                                        : 'text-gray-700 hover:bg-gray-50'}
+                                `}
+                            >
+                                <item.icon className={`w-4 h-4 ${item.highlight ? 'text-yellow-700' : '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,91 @@
+'use client';
+
+import { usePromise } from '@common/hooks/usePromise';
+import { Chat } from '@promptbook-local/components';
+import { RemoteAgent } from '@promptbook-local/core';
+import { useRouter } from 'next/navigation';
+import { useCallback, useMemo } from 'react';
+import spaceTrim from 'spacetrim';
+import { string_agent_url, string_color } from '../../../../../../src/types/typeAliases';
+
+type AgentProfileChatProps = {
+    agentUrl: string_agent_url;
+    agentName: string;
+    fullname: string;
+    brandColorHex: string_color;
+    avatarSrc: string;
+};
+
+export function AgentProfileChat({ agentUrl, agentName, fullname, brandColorHex, avatarSrc }: 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-[calc(100dvh-300px)] min-h-[350px] md:h-[500px]">
+            <Chat
+                title={`Chat with ${fullname}`}
+                participants={[
+                    {
+                        name: 'AGENT',
+                        fullname,
+                        isMe: false,
+                        color: brandColorHex,
+                        avatarSrc,
+                        // <- TODO: [🧠] Maybe this shouldnt be there
+                    },
+                ]}
+                messages={[
+                    {
+                        from: 'AGENT',
+                        content: initialMessage,
+                        date: new Date(),
+                        id: 'initial-message',
+                        isComplete: true,
+                    },
+                ]}
+                onMessage={handleMessage}
+                isSaveButtonEnabled={false}
+                isCopyButtonEnabled={false}
+                className="bg-transparent"
+                buttonColor={brandColorHex}
+                style={{ background: 'transparent' }}
+            />
+        </div>
+    );
+}

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

@@ -0,0 +1,48 @@
+'use client';
+
+import { AgentBasicInformation } from '@promptbook-local/types';
+import { AgentProfile } from '../../../components/AgentProfile/AgentProfile';
+import { AgentOptionsMenu } from './AgentOptionsMenu';
+
+type AgentProfileWrapperProps = {
+    agent: AgentBasicInformation;
+    agentUrl: string;
+    agentEmail: string;
+    agentName: string;
+    brandColorHex: string;
+    isAdmin: boolean;
+    isHeadless: boolean;
+    actions: React.ReactNode;
+    children: React.ReactNode;
+};
+
+export function AgentProfileWrapper(props: AgentProfileWrapperProps) {
+    const { agent, agentUrl, agentEmail, agentName, brandColorHex, isAdmin, isHeadless, actions, children } = props;
+
+    // Derived agentName from agent data
+    const derivedAgentName = agent.agentName;
+
+    return (
+        <AgentProfile
+            agent={agent}
+            agentUrl={agentUrl}
+            agentEmail={agentEmail}
+            isHeadless={isHeadless}
+            renderMenu={({ onShowQrCode }) => (
+                <AgentOptionsMenu
+                    agentName={agentName}
+                    derivedAgentName={derivedAgentName}
+                    agentUrl={agentUrl}
+                    agentEmail={agentEmail}
+                    brandColorHex={brandColorHex}
+                    isAdmin={isAdmin}
+                    onShowQrCode={onShowQrCode}
+                    backgroundImage="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjYJh39z8ABJgCe/ZvAS4AAAAASUVORK5CYII="
+                />
+            )}
+            actions={actions}
+        >
+            {children}
+        </AgentProfile>
+    );
+}

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

@@ -0,0 +1,40 @@
+'use client';
+
+import { string_agent_url } from '@promptbook-local/types';
+import { useState } from 'react';
+
+export function AgentUrlCopy({ agentUrl }: { agentUrl: string_agent_url }) {
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(agentUrl);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        } catch (err) {
+            console.error('Failed to copy:', err);
+        }
+    };
+
+    return (
+        <div className="w-full">
+            <label className="block text-xs text-gray-500 font-semibold mb-1">Agent Page URL</label>
+            <div className="flex gap-2 items-center">
+                <input
+                    type="text"
+                    value={agentUrl}
+                    readOnly
+                    className="flex-1 px-2 py-1 border rounded text-sm bg-gray-50 text-gray-700"
+                    onFocus={(e) => e.target.select()}
+                />
+                <button
+                    type="button"
+                    className="px-2 py-1 text-white rounded text-xs font-semibold transition hover:opacity-90"
+                    onClick={handleCopy}
+                >
+                    {copied ? '✓ Copied' : 'Copy'}
+                </button>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,63 @@
+'use client';
+
+import { useState } from 'react';
+import { $clearAgentChatFeedback } from '../../../utils/chatFeedbackAdmin';
+
+type ClearAgentChatFeedbackButtonProps = {
+    /**
+     * Agent name for which the chat feedback should be cleared.
+     */
+    agentName: string;
+
+    /**
+     * Optional callback invoked after successful clearing.
+     */
+    onCleared?: () => void;
+};
+
+/**
+ * Admin-only button to clear chat feedback for a specific agent.
+ *
+ * This is intentionally small and self-contained so it can be reused
+ * from different admin-oriented surfaces without duplicating logic.
+ */
+export function ClearAgentChatFeedbackButton({ agentName, onCleared }: ClearAgentChatFeedbackButtonProps) {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleClick = async () => {
+        if (!agentName) return;
+
+        const confirmed = window.confirm(
+            `Are you sure you want to permanently delete all feedback for agent "${agentName}"?`,
+        );
+        if (!confirmed) return;
+
+        try {
+            setLoading(true);
+            setError(null);
+            await $clearAgentChatFeedback(agentName);
+            if (onCleared) {
+                onCleared();
+            }
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to clear chat feedback');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="flex flex-col gap-2">
+            <button
+                type="button"
+                onClick={handleClick}
+                disabled={loading}
+                className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-red-300 bg-white px-3 py-1.5 text-xs font-semibold text-red-700 shadow-sm hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-60"
+            >
+                {loading ? 'Clearing feedback…' : 'Clear chat feedback'}
+            </button>
+            {error && <div className="text-xs text-red-600">{error}</div>}
+        </div>
+    );
+}