@promptbook/cli 0.103.0-55 → 0.103.0-66

package/apps/agents-server/package.json

@@ -8,5 +8,14 @@
         "start": "next start -p 4440",
         "lint": "next lint",
         "postinstall": "cd ../../ && npm ci"
+    },
+    "devDependencies": {
+        "@tailwindcss/typography": "^0.5.19",
+        "autoprefixer": "^10.4.21",
+        "postcss": "^8.5.6",
+        "tailwindcss": "^3.4.18"
+    },
+    "dependencies": {
+        "remark-gfm": "^4.0.1"
     }
 }

package/apps/agents-server/src/app/actions.ts

@@ -4,6 +4,7 @@ import { $generateBookBoilerplate } from '@promptbook-local/core';
 import { string_agent_name } from '@promptbook-local/types';
 import { revalidatePath } from 'next/cache';
 import { cookies } from 'next/headers';
+import { getMetadata } from '../database/getMetadata';
 import { $provideAgentCollectionForServer } from '../tools/$provideAgentCollectionForServer';
 import { authenticateUser } from '../utils/authenticateUser';
 import { isUserAdmin } from '../utils/isUserAdmin';
@@ -16,7 +17,8 @@ export async function $createAgentAction(): Promise<string_agent_name> {
     }
 
     const collection = await $provideAgentCollectionForServer();
-    const agentSource = $generateBookBoilerplate();
+    const namePool = (await getMetadata('NAME_POOL')) || 'ENGLISH';
+    const agentSource = $generateBookBoilerplate({ namePool });
 
     const { agentName } = await collection.createAgent(agentSource);
 

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

@@ -9,12 +9,13 @@ 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 } = props;
+    const { agentUrl, defaultMessage, autoExecuteMessage } = props;
 
     const agentPromise = useMemo(
         () =>
@@ -67,6 +68,7 @@ export function AgentChatWrapper(props: AgentChatWrapperProps) {
             agent={agent}
             onFeedback={handleFeedback}
             defaultMessage={defaultMessage}
+            autoExecuteMessage={autoExecuteMessage}
         />
     );
 }

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

@@ -0,0 +1,282 @@
+'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;
+    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);
+
+    // 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')!;
+
+    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,
+        },
+        // 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 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,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-[400px] 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,44 @@
+'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;
+
+    return (
+        <AgentProfile
+            agent={agent}
+            agentUrl={agentUrl}
+            agentEmail={agentEmail}
+            isHeadless={isHeadless}
+            renderMenu={({ onShowQrCode }) => (
+                <AgentOptionsMenu
+                    agentName={agentName}
+                    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]/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]/agentLinks.tsx

@@ -0,0 +1,80 @@
+import {
+    BookOpenIcon,
+    CodeIcon,
+    GlobeIcon,
+    HistoryIcon,
+    LinkIcon,
+    MessageSquareIcon,
+    NotebookPenIcon,
+} from 'lucide-react';
+import type { ComponentType } from 'react';
+
+type AgentLink = {
+    title: string;
+    href: string;
+    icon: ComponentType<{ className?: string }>;
+    description?: string;
+    target?: '_blank' | '_self';
+    rel?: string;
+};
+
+export const getAgentLinks = (agentName: string): AgentLink[] => {
+    const encodedName = encodeURIComponent(agentName);
+    return [
+        {
+            title: 'Chat with Agent',
+            href: `/agents/${encodedName}`,
+            icon: MessageSquareIcon,
+            description: 'Direct interface to converse with the agent.',
+        },
+        {
+            title: 'Edit Book',
+            href: `/agents/${encodedName}/book`,
+            icon: NotebookPenIcon,
+            description: "Edit the agent's knowledge book.",
+        },
+        {
+            title: 'Integration',
+            href: `/agents/${encodedName}/integration`,
+            icon: CodeIcon,
+            description: 'Learn how to integrate this agent into your applications.',
+        },
+        {
+            title: 'History & Feedback',
+            href: `/agents/${encodedName}/history`,
+            icon: HistoryIcon,
+            description: 'View past conversations and provide feedback.',
+        },
+        {
+            title: 'All Links',
+            href: `/agents/${encodedName}/links`,
+            icon: LinkIcon,
+            description: 'Signpost & Links',
+        },
+        {
+            title: 'Website Integration',
+            href: `/agents/${encodedName}/website-integration`,
+            icon: GlobeIcon,
+            description: 'Embed the agent chat widget directly into your React application.',
+        },
+    ];
+};
+
+export const getAgentExternalLinks = (): AgentLink[] => [
+    {
+        title: 'Promptbook Studio',
+        href: 'https://promptbook.studio',
+        icon: BookOpenIcon,
+        description: 'Create and manage your own agents',
+        target: '_blank',
+        rel: 'noopener noreferrer',
+    },
+    {
+        title: 'GitHub Repository',
+        href: 'https://github.com/webgptorg/promptbook',
+        icon: CodeIcon,
+        description: 'Star us and contribute to the project',
+        target: '_blank',
+        rel: 'noopener noreferrer',
+    },
+];

package/apps/agents-server/src/app/agents/[agentName]/api/book/route.ts

@@ -1,4 +1,5 @@
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { resolveInheritedAgentSource } from '@/src/utils/resolveInheritedAgentSource';
 import { padBook, validateBook } from '@promptbook-local/core';
 import { serializeError } from '@promptbook-local/utils';
 import spaceTrim from 'spacetrim';
@@ -13,8 +14,9 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
     try {
         const collection = await $provideAgentCollectionForServer();
         const agentSource = await collection.getAgentSource(agentName);
+        const effectiveAgentSource = await resolveInheritedAgentSource(agentSource, collection);
 
-        return new Response(agentSource, {
+        return new Response(effectiveAgentSource, {
             status: 200,
             headers: { 'Content-Type': 'text/plain' /* <- TODO: [🎳] Mime type of book */ },
         });

package/apps/agents-server/src/app/agents/[agentName]/api/chat/route.ts

@@ -77,11 +77,15 @@ export async function POST(request: Request, { params }: { params: Promise<{ age
             userAgent,
             language,
             platform,
+            source: 'AGENT_PAGE_CHAT',
+            apiKey: null,
         });
 
         const encoder = new TextEncoder();
         const readableStream = new ReadableStream({
             start(controller) {
+                let previousContent = '';
+
                 agent.callChatModelStream!(
                     {
                         title: `Chat with agent ${
@@ -95,7 +99,11 @@ export async function POST(request: Request, { params }: { params: Promise<{ age
                         thread,
                     },
                     (chunk) => {
-                        controller.enqueue(encoder.encode(chunk.content));
+                        const fullContent = chunk.content;
+                        const deltaContent = fullContent.substring(previousContent.length);
+                        previousContent = fullContent;
+
+                        controller.enqueue(encoder.encode(deltaContent));
                     },
                 )
                     .then(async (response) => {
@@ -119,6 +127,8 @@ export async function POST(request: Request, { params }: { params: Promise<{ age
                             userAgent,
                             language,
                             platform,
+                            source: 'AGENT_PAGE_CHAT',
+                            apiKey: null,
                         });
 
                         // Note: [🐱‍🚀] Save the learned data