@promptbook/cli 0.103.0-1 → 0.103.0-100

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>
+    );
+}

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

@@ -0,0 +1,63 @@
+'use client';
+
+import { useState } from 'react';
+import { $clearAgentChatHistory } from '../../../utils/chatHistoryAdmin';
+
+type ClearAgentChatHistoryButtonProps = {
+    /**
+     * Agent name for which the chat history should be cleared.
+     */
+    agentName: string;
+
+    /**
+     * Optional callback invoked after successful clearing.
+     */
+    onCleared?: () => void;
+};
+
+/**
+ * Admin-only button to clear chat history 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 ClearAgentChatHistoryButton({ agentName, onCleared }: ClearAgentChatHistoryButtonProps) {
+    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 chat history for agent "${agentName}"?`,
+        );
+        if (!confirmed) return;
+
+        try {
+            setLoading(true);
+            setError(null);
+            await $clearAgentChatHistory(agentName);
+            if (onCleared) {
+                onCleared();
+            }
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to clear chat history');
+        } 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 history…' : 'Clear chat history'}
+            </button>
+            {error && <div className="text-xs text-red-600">{error}</div>}
+        </div>
+    );
+}

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

@@ -0,0 +1,41 @@
+'use client';
+
+import { CopyIcon } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+
+type CloneAgentButtonProps = {
+    agentName: string;
+};
+
+export function CloneAgentButton({ agentName }: CloneAgentButtonProps) {
+    const router = useRouter();
+
+    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');
+            }
+
+            const newAgent = await response.json();
+            router.push(`/${newAgent.agentName}`);
+            router.refresh();
+        } catch (error) {
+            alert('Failed to clone agent');
+            console.error(error);
+        }
+    };
+
+    return (
+        <button
+            onClick={handleClone}
+            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="mr-2 w-3 h-3" />
+            Clone
+        </button>
+    );
+}

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

@@ -0,0 +1,44 @@
+'use client';
+
+import { useState } from 'react';
+
+type CopyFieldProps = {
+    label: string;
+    value: string;
+};
+
+export function CopyField({ label, value }: CopyFieldProps) {
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(value);
+            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">{label}</label>
+            <div className="flex gap-2 items-center">
+                <input
+                    type="text"
+                    value={value}
+                    readOnly
+                    className="flex-1 px-2 py-1 border rounded text-sm bg-gray-50 text-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                    onFocus={(e) => e.target.select()}
+                />
+                <button
+                    type="button"
+                    className="px-3 py-1 bg-gray-800 text-white rounded text-xs font-semibold transition hover:bg-gray-700 active:bg-gray-900"
+                    onClick={handleCopy}
+                >
+                    {copied ? '✓ Copied' : 'Copy'}
+                </button>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,74 @@
+'use client';
+
+import { TODO_any } from '@promptbook-local/types';
+import { ShoppingBagIcon } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+
+type BeforeInstallPromptEvent = Event & {
+    prompt: () => Promise<void>;
+    userChoice: Promise<{ outcome: 'accepted' | 'dismissed'; platform: string }>;
+};
+
+export function InstallPwaButton() {
+    const [installPromptEvent, setInstallPromptEvent] = useState<BeforeInstallPromptEvent | null>(null);
+    const [isInstalled, setIsInstalled] = useState(false);
+    const [hasPrompted, setHasPrompted] = useState(false);
+
+    useEffect(() => {
+        function handleBeforeInstallPrompt(e: Event) {
+            // Some browsers (Chrome) fire this event when PWA is installable
+            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 onInstall = useCallback(async () => {
+        if (!installPromptEvent) return;
+        try {
+            installPromptEvent.prompt();
+            setHasPrompted(true);
+            const choice = await installPromptEvent.userChoice.catch(() => null);
+            if (choice?.outcome === 'accepted') {
+                setIsInstalled(true);
+            }
+        } finally {
+            // Clear stored event so button hides if dismissed
+            setInstallPromptEvent(null);
+        }
+    }, [installPromptEvent]);
+
+    if (isInstalled || (!installPromptEvent && hasPrompted)) return null;
+
+    return (
+        <button
+            type="button"
+            onClick={onInstall}
+            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',
+            }}
+            aria-label="Install App"
+            disabled={!installPromptEvent}
+        >
+            {/* Simple icon substitute: download arrow */}
+            <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>
+    );
+}

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

@@ -0,0 +1,24 @@
+'use client';
+
+import { useEffect } from 'react';
+
+type ServiceWorkerRegisterProps = {
+    scope: string;
+};
+
+export function ServiceWorkerRegister({ scope }: ServiceWorkerRegisterProps) {
+    useEffect(() => {
+        if ('serviceWorker' in navigator) {
+            navigator.serviceWorker
+                .register('/sw.js', { scope })
+                .then((registration) => {
+                    console.log('Service Worker registered with scope:', registration.scope);
+                })
+                .catch((error) => {
+                    console.error('Service Worker registration failed:', error);
+                });
+        }
+    }, [scope]);
+
+    return null;
+}

package/apps/agents-server/src/app/agents/[agentName]/TODO.txt

@@ -0,0 +1 @@
+TODO: [🚗] Components and pages here should be just tiny UI wraper around proper agent logic and conponents

package/apps/agents-server/src/app/agents/[agentName]/_utils.ts

@@ -0,0 +1,19 @@
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { parseAgentSource } from '@promptbook-local/core';
+
+export const AGENT_ACTIONS = ['Emails', 'Web chat', 'Read documents', 'Browser', 'WhatsApp', '<Coding/>'];
+
+export async function getAgentName(params: Promise<{ agentName: string }>) {
+    const { agentName } = await params;
+    return decodeURIComponent(agentName);
+}
+
+export async function getAgentProfile(agentName: string) {
+    const collection = await $provideAgentCollectionForServer();
+    const agentSource = await collection.getAgentSource(agentName);
+    return parseAgentSource(agentSource);
+}
+
+/**
+ * TODO: Split to multiple files
+ */

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/agents/route.ts

@@ -0,0 +1,67 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(
+    request: NextRequest,
+    { params }: { params: Promise<{ agentName: string }> }
+) {
+    try {
+        const { agentName } = await params;
+        // agentName is likely the federated server URL (e.g., "https://s6.ptbk.io")
+        // It comes decoded from the URL params if it was encoded in the request path
+        
+        let serverUrl = agentName;
+
+        // If the serverUrl doesn't look like a URL, it might be just a hostname or something else
+        // But the requirement says we look for /agents/[federated-server]/api/agents
+        // The client will likely pass the full URL or hostname.
+        // We'll assume if it doesn't start with http, we might need to prepend it, or it's invalid.
+        // However, the current federated servers list contains full URLs.
+        
+        // If it was somehow double encoded or something, we might need to handle it, but standard Next.js behavior is single decode.
+        
+        if (!serverUrl.startsWith('http')) {
+             // Maybe it is just a hostname?
+             // Let's try to assume https if missing
+             if (serverUrl.includes('.')) {
+                 serverUrl = `https://${serverUrl}`;
+             } else {
+                 return NextResponse.json(
+                    { error: 'Invalid federated server URL' },
+                    { status: 400 }
+                );
+             }
+        }
+
+        // Normalize URL (remove trailing slash)
+        serverUrl = serverUrl.replace(/\/$/, '');
+
+        const response = await fetch(`${serverUrl}/api/agents`, {
+            // Forward relevant headers if necessary, or just basic fetch
+            headers: {
+                'Content-Type': 'application/json',
+                // Add any other needed headers
+            },
+            next: { revalidate: 600 }, // Cache for 10 minutes
+        });
+
+        if (!response.ok) {
+            console.warn(`Proxy failed to fetch agents from ${serverUrl}: ${response.status} ${response.statusText}`);
+            return NextResponse.json(
+                { error: `Failed to fetch from ${serverUrl}` },
+                { status: response.status }
+            );
+        }
+
+        const data = await response.json();
+        return NextResponse.json(data);
+
+    } catch (error) {
+        console.error('Proxy error fetching federated agents:', error);
+        return NextResponse.json(
+            { error: 'Internal Server Error' },
+            { status: 500 }
+        );
+    }
+}