@promptbook/cli 0.104.0-1 → 0.104.0-10

package/apps/agents-server/src/app/admin/messages/send-email/SendEmailClient.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { useState } from 'react';
+import { assertsError } from '../../../../../../../src/errors/assertsError';
+import { sendEmailAction } from './actions';
+
+export function SendEmailClient() {
+    const [status, setStatus] = useState<'IDLE' | 'LOADING' | 'SUCCESS' | 'ERROR'>('IDLE');
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        setStatus('LOADING');
+        setErrorMessage(null);
+
+        const formData = new FormData(event.currentTarget);
+
+        try {
+            await sendEmailAction(formData);
+            setStatus('SUCCESS');
+        } catch (error) {
+            assertsError(error);
+            console.error(error);
+            setStatus('ERROR');
+            setErrorMessage(error.message);
+        }
+    };
+
+    return (
+        <div className="container mx-auto p-4">
+            <h1 className="text-2xl font-bold mb-4">Send Email (Test)</h1>
+
+            {status === 'SUCCESS' && (
+                <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
+                    Email sent successfully!
+                </div>
+            )}
+
+            {status === 'ERROR' && (
+                <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+                    Error: {errorMessage}
+                </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-4 max-w-lg">
+                <div>
+                    <label className="block text-sm font-medium text-gray-700">From</label>
+                    <input
+                        name="from"
+                        type="text"
+                        defaultValue="Test Promptbook <test@ptbk.io>"
+                        required
+                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border p-2"
+                    />
+                </div>
+
+                <div>
+                    <label className="block text-sm font-medium text-gray-700">To</label>
+                    <input
+                        name="to"
+                        type="text"
+                        placeholder="recipient@example.com"
+                        defaultValue="Pavol Hejný <pavol@ptbk.io>"
+                        required
+                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border p-2"
+                    />
+                    <p className="text-xs text-gray-500 mt-1">Separate multiple addresses with commas</p>
+                </div>
+
+                <div>
+                    <label className="block text-sm font-medium text-gray-700">Subject</label>
+                    <input
+                        name="subject"
+                        type="text"
+                        placeholder="Test Email"
+                        defaultValue="Test Email"
+                        required
+                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border p-2"
+                    />
+                </div>
+
+                <div>
+                    <label className="block text-sm font-medium text-gray-700">Body</label>
+                    <textarea
+                        name="body"
+                        rows={6}
+                        placeholder="Hello, this is a test email."
+                        defaultValue="Hello, this is a test email."
+                        required
+                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border p-2"
+                    />
+                </div>
+
+                <button
+                    type="submit"
+                    disabled={status === 'LOADING'}
+                    className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
+                >
+                    {status === 'LOADING' ? 'Sending...' : 'Send Email'}
+                </button>
+            </form>
+        </div>
+    );
+}

package/apps/agents-server/src/app/admin/messages/send-email/actions.ts

@@ -0,0 +1,35 @@
+'use server';
+
+import type { string_email, string_emails, string_html } from '@promptbook-local/types';
+import { parseEmailAddress } from '../../../../message-providers/email/_common/utils/parseEmailAddress';
+import { parseEmailAddresses } from '../../../../message-providers/email/_common/utils/parseEmailAddresses';
+import { stringifyEmailAddress } from '../../../../message-providers/email/_common/utils/stringifyEmailAddress';
+import { sendMessage } from '../../../../utils/messages/sendMessage';
+
+export async function sendEmailAction(formData: FormData) {
+    const from = formData.get('from') as string;
+    const to = formData.get('to') as string;
+    const subject = formData.get('subject') as string;
+    const body = formData.get('body') as string;
+
+    if (!from || !to || !subject || !body) {
+        throw new Error('All fields are required');
+    }
+
+    const sender = stringifyEmailAddress(parseEmailAddress(from as string_email));
+    const recipients = parseEmailAddresses(to as string_emails).map(stringifyEmailAddress);
+
+    await sendMessage({
+        channel: 'EMAIL',
+        direction: 'OUTBOUND',
+        sender,
+        recipients,
+        subject,
+        content: body as string_html,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        threadId: crypto.randomUUID() as any,
+        cc: [],
+        attachments: [],
+        metadata: {},
+    });
+}

package/apps/agents-server/src/app/admin/messages/send-email/page.tsx

@@ -0,0 +1,13 @@
+import { ForbiddenPage } from '../../../../components/ForbiddenPage/ForbiddenPage';
+import { isUserAdmin } from '../../../../utils/isUserAdmin';
+import { SendEmailClient } from './SendEmailClient';
+
+export default async function AdminSendEmailPage() {
+    const isAdmin = await isUserAdmin();
+
+    if (!isAdmin) {
+        return <ForbiddenPage />;
+    }
+
+    return <SendEmailClient />;
+}

package/apps/agents-server/src/app/admin/metadata/MetadataClient.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { FileText, Hash, Image, Shield, ToggleLeft, Type, Upload } from 'lucide-react';
+import { upload } from '@vercel/blob/client';
+import { FileTextIcon, HashIcon, ImageIcon, ShieldIcon, ToggleLeftIcon, TypeIcon, Upload } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { metadataDefaults, MetadataType } from '../../../database/metadataDefaults';
 
@@ -148,19 +149,19 @@ export function MetadataClient() {
     const getTypeIcon = (type?: MetadataType) => {
         switch (type) {
             case 'TEXT_SINGLE_LINE':
-                return <Type className="w-4 h-4" />;
+                return <TypeIcon className="w-4 h-4" />;
             case 'TEXT':
-                return <FileText className="w-4 h-4" />;
+                return <FileTextIcon className="w-4 h-4" />;
             case 'NUMBER':
-                return <Hash className="w-4 h-4" />;
+                return <HashIcon className="w-4 h-4" />;
             case 'BOOLEAN':
-                return <ToggleLeft className="w-4 h-4" />;
+                return <ToggleLeftIcon className="w-4 h-4" />;
             case 'IMAGE_URL':
-                return <Image className="w-4 h-4" />;
+                return <ImageIcon className="w-4 h-4" />;
             case 'IP_RANGE':
-                return <Shield className="w-4 h-4" />;
+                return <ShieldIcon className="w-4 h-4" />;
             default:
-                return <Type className="w-4 h-4" />;
+                return <TypeIcon className="w-4 h-4" />;
         }
     };
 
@@ -185,26 +186,29 @@ export function MetadataClient() {
 
         try {
             setIsUploading(true);
-            const formData = new FormData();
-            formData.append('file', file);
 
-            const response = await fetch('/api/upload', {
-                method: 'POST',
-                body: formData,
+            // Build the full path including prefix and user/files directory
+            const pathPrefix = process.env.NEXT_PUBLIC_CDN_PATH_PREFIX || '';
+            const uploadPath = pathPrefix ? `${pathPrefix}/user/files/${file.name}` : `user/files/${file.name}`;
+
+            // Upload directly to Vercel Blob using client upload
+            const blob = await upload(uploadPath, file, {
+                access: 'public',
+                handleUploadUrl: '/api/upload',
+                clientPayload: JSON.stringify({
+                    purpose: formState.key || 'METADATA_IMAGE',
+                    contentType: file.type,
+                }),
             });
 
-            if (!response.ok) {
-                throw new Error(`Failed to upload file: ${response.statusText}`);
-            }
-
-            const { fileUrl: longFileUrl } = await response.json();
+            const fileUrl = blob.url;
 
             const LONG_URL = `${process.env.NEXT_PUBLIC_CDN_PUBLIC_URL!}/${process.env
                 .NEXT_PUBLIC_CDN_PATH_PREFIX!}/user/files/`;
             const SHORT_URL = `https://ptbk.io/k/`;
             // <- TODO: [🌍] Unite this logic in one place
 
-            const shortFileUrl = longFileUrl.split(LONG_URL).join(SHORT_URL);
+            const shortFileUrl = fileUrl.split(LONG_URL).join(SHORT_URL);
             setFormState((prev) => ({ ...prev, value: shortFileUrl }));
         } catch (err) {
             setError(err instanceof Error ? err.message : 'Failed to upload image');

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

@@ -3,7 +3,7 @@
 import { usePromise } from '@common/hooks/usePromise';
 import { AgentChat } from '@promptbook-local/components';
 import { RemoteAgent } from '@promptbook-local/core';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { string_agent_url } from '../../../../../../src/types/typeAliases';
 
 type AgentChatWrapperProps = {
@@ -58,6 +58,20 @@ export function AgentChatWrapper(props: AgentChatWrapperProps) {
         [agent, agentUrl],
     );
 
+    // Remove the 'message' query parameter from URL after auto-executing a message
+    useEffect(() => {
+        if (autoExecuteMessage && typeof window !== 'undefined') {
+            // Wait for the message to be processed, then remove the query parameter
+            const timer = setTimeout(() => {
+                const url = new URL(window.location.href);
+                url.searchParams.delete('message');
+                window.history.replaceState({}, '', url.toString());
+            }, 1000); // 1 second delay to ensure message processing is complete
+
+            return () => clearTimeout(timer);
+        }
+    }, [autoExecuteMessage]);
+
     if (!agent) {
         return <>{/* <- TODO: [🐱‍🚀] <PromptbookLoading /> */}</>;
     }

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

@@ -2,9 +2,11 @@
 
 import { TODO_any } from '@promptbook-local/types';
 import {
+    CodeIcon,
     CopyIcon,
     CopyPlusIcon,
     DownloadIcon,
+    FileTextIcon,
     MailIcon,
     MessageCircleQuestionIcon,
     MessageSquareIcon,
@@ -13,10 +15,12 @@ import {
     QrCodeIcon,
     SmartphoneIcon,
     SquareSplitHorizontalIcon,
+    TrashIcon,
 } 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 { string_agent_permanent_id, string_data_url, string_url_image } from '../../../../../../src/types/typeAliases';
+import { deleteAgent } from '../../recycle-bin/actions';
 import { getAgentLinks } from './agentLinks';
 
 type BeforeInstallPromptEvent = Event & {
@@ -33,6 +37,7 @@ const barlowCondensed = Barlow_Condensed({
 type AgentOptionsMenuProps = {
     agentName: string;
     derivedAgentName: string;
+    permanentId?: string_agent_permanent_id;
     agentUrl: string;
     agentEmail: string;
     brandColorHex: string;
@@ -44,11 +49,10 @@ type AgentOptionsMenuProps = {
 export function AgentOptionsMenu({
     agentName,
     derivedAgentName,
+    permanentId,
     agentUrl,
     agentEmail,
-    brandColorHex,
     isAdmin = false,
-    backgroundImage,
     onShowQrCode,
 }: AgentOptionsMenuProps) {
     const [isOpen, setIsOpen] = useState(false);
@@ -115,7 +119,7 @@ export function AgentOptionsMenu({
         }
     };
 
-    const links = getAgentLinks(agentName);
+    const links = getAgentLinks(permanentId || 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')!;
@@ -128,13 +132,29 @@ export function AgentOptionsMenu({
     const handleUpdateUrl = () => {
         if (
             window.confirm(
-                `Are you sure you want to change the agent URL from "/agents/${agentName}" to "/agents/${derivedAgentName}"?`
+                `Are you sure you want to change the agent URL from "/agents/${agentName}" to "/agents/${derivedAgentName}"?`,
             )
         ) {
             window.location.href = updateUrlHref;
         }
     };
 
+    const handleDeleteAgent = async () => {
+        if (
+            window.confirm(
+                `Are you sure you want to delete the agent "${agentName}"? This action can be undone by restoring it from the recycle bin.`,
+            )
+        ) {
+            try {
+                await deleteAgent(agentName);
+                window.location.href = '/';
+            } catch (error) {
+                console.error('Failed to delete agent:', error);
+                alert('Failed to delete agent. Please try again.');
+            }
+        }
+    };
+
     const menuItems = [
         ...(showUpdateUrl
             ? [
@@ -166,6 +186,18 @@ export function AgentOptionsMenu({
             icon: editBookLink.icon,
             label: editBookLink.title,
         },
+        {
+            type: 'link' as const,
+            href: `/agents/${encodeURIComponent(agentName)}/system-message`,
+            icon: FileTextIcon,
+            label: 'System Message',
+        },
+        {
+            type: 'link' as const,
+            href: `/agents/${encodeURIComponent(agentName)}/code`,
+            icon: CodeIcon,
+            label: 'View Code',
+        },
         { type: 'divider' as const },
         {
             type: 'link' as const,
@@ -243,6 +275,12 @@ export function AgentOptionsMenu({
                       icon: DownloadIcon,
                       label: 'Export Agent',
                   },
+                  {
+                      type: 'action' as const,
+                      icon: TrashIcon,
+                      label: 'Delete Agent',
+                      onClick: handleDeleteAgent,
+                  },
                   // {
                   //     type: 'link' as const,
                   //     href: backgroundImage,
@@ -297,12 +335,16 @@ export function AgentOptionsMenu({
                                     }
                                 }}
                                 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.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'}`} />
+                                <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>
                         );

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

@@ -3,10 +3,14 @@
 import { usePromise } from '@common/hooks/usePromise';
 import { Chat } from '@promptbook-local/components';
 import { RemoteAgent } from '@promptbook-local/core';
+import { string_book } from '@promptbook-local/types';
 import { useRouter } from 'next/navigation';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import spaceTrim from 'spacetrim';
 import { string_agent_url, string_color } from '../../../../../../src/types/typeAliases';
+import { keepUnused } from '../../../../../../src/utils/organization/keepUnused';
+import { $createAgentFromBookAction } from '../../../app/actions';
+import { DeletedAgentBanner } from '../../../components/DeletedAgentBanner';
 
 type AgentProfileChatProps = {
     agentUrl: string_agent_url;
@@ -14,10 +18,21 @@ type AgentProfileChatProps = {
     fullname: string;
     brandColorHex: string_color;
     avatarSrc: string;
+    isDeleted?: boolean;
 };
 
-export function AgentProfileChat({ agentUrl, agentName, fullname, brandColorHex, avatarSrc }: AgentProfileChatProps) {
+export function AgentProfileChat({
+    agentUrl,
+    agentName,
+    fullname,
+    brandColorHex,
+    avatarSrc,
+    isDeleted = false,
+}: AgentProfileChatProps) {
     const router = useRouter();
+    const [isCreatingAgent, setIsCreatingAgent] = useState(false);
+
+    keepUnused(isCreatingAgent);
 
     const agentPromise = useMemo(
         () =>
@@ -38,6 +53,24 @@ export function AgentProfileChat({ agentUrl, agentName, fullname, brandColorHex,
         [agentName, router],
     );
 
+    const handleCreateAgent = useCallback(
+        async (bookContent: string) => {
+            setIsCreatingAgent(true);
+            try {
+                const { permanentId } = await $createAgentFromBookAction(bookContent as string_book);
+                if (permanentId) {
+                    router.push(`/agents/${permanentId}`);
+                }
+            } catch (error) {
+                console.error('Failed to create agent:', error);
+                alert('Failed to create agent. Please try again.');
+            } finally {
+                setIsCreatingAgent(false);
+            }
+        },
+        [router],
+    );
+
     const initialMessage = useMemo(() => {
         if (!agent) {
             return 'Loading...';
@@ -52,6 +85,15 @@ export function AgentProfileChat({ agentUrl, agentName, fullname, brandColorHex,
         );
     }, [agent, fullname, agentName]);
 
+    // If agent is deleted, show banner instead of chat
+    if (isDeleted) {
+        return (
+            <div className="w-full min-h-[350px] md:min-h-[500px] flex items-center justify-center">
+                <DeletedAgentBanner message="This agent has been deleted. You can restore it from the Recycle Bin." />
+            </div>
+        );
+    }
+
     // 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.
@@ -72,14 +114,15 @@ export function AgentProfileChat({ agentUrl, agentName, fullname, brandColorHex,
                 ]}
                 messages={[
                     {
-                        from: 'AGENT',
+                        sender: 'AGENT',
                         content: initialMessage,
-                        date: new Date(),
+                        createdAt: new Date(),
                         id: 'initial-message',
                         isComplete: true,
                     },
                 ]}
                 onMessage={handleMessage}
+                onCreateAgent={handleCreateAgent}
                 isSaveButtonEnabled={false}
                 isCopyButtonEnabled={false}
                 className="bg-transparent"

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

@@ -1,37 +1,79 @@
 'use client';
 
-import { AgentBasicInformation } from '@promptbook-local/types';
+import { AgentBasicInformation, string_agent_name } 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;
+    /***
+     * @@@
+     */
+    readonly agent: AgentBasicInformation;
+
+    /***
+     * @@@
+     */
+    readonly agentUrl: string;
+
+    /**
+     * Base URL of the agents server
+     */
+    readonly publicUrl: URL;
+
+    /***
+     * @@@
+     */
+    readonly agentEmail: string;
+
+    /***
+     * @@@
+     */
+    readonly agentName: string_agent_name;
+
+    /***
+     * @@@
+     */
+    readonly brandColorHex: string;
+
+    /***
+     * @@@
+     */
+    readonly isAdmin: boolean;
+
+    /***
+     * @@@
+     */
+    readonly isHeadless: boolean;
+
+    readonly actions: React.ReactNode;
+
+    /***
+     * @@@
+     */
+    readonly children: React.ReactNode;
 };
 
 export function AgentProfileWrapper(props: AgentProfileWrapperProps) {
-    const { agent, agentUrl, agentEmail, agentName, brandColorHex, isAdmin, isHeadless, actions, children } = props;
+    const { agent, agentUrl, publicUrl, agentEmail, agentName, brandColorHex, isAdmin, isHeadless, actions, children } =
+        props;
 
     // Derived agentName from agent data
     const derivedAgentName = agent.agentName;
+    const permanentId = agent.permanentId;
 
     return (
         <AgentProfile
             agent={agent}
             agentUrl={agentUrl}
+            publicUrl={publicUrl}
+            permanentId={permanentId || agentName}
             agentEmail={agentEmail}
             isHeadless={isHeadless}
             renderMenu={({ onShowQrCode }) => (
                 <AgentOptionsMenu
                     agentName={agentName}
                     derivedAgentName={derivedAgentName}
+                    permanentId={permanentId}
                     agentUrl={agentUrl}
                     agentEmail={agentEmail}
                     brandColorHex={brandColorHex}

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

@@ -1,5 +1,7 @@
+import { $getTableName } from '@/src/database/$getTableName';
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
 import { parseAgentSource } from '@promptbook-local/core';
+import { $provideSupabaseForServer } from '../../../database/$provideSupabaseForServer';
 
 export const AGENT_ACTIONS = ['Emails', 'Web chat', 'Read documents', 'Browser', 'WhatsApp', '<Coding/>'];
 
@@ -10,10 +12,28 @@ export async function getAgentName(params: Promise<{ agentName: string }>) {
 
 export async function getAgentProfile(agentName: string) {
     const collection = await $provideAgentCollectionForServer();
-    const agentSource = await collection.getAgentSource(agentName);
-    return parseAgentSource(agentSource);
+    const agentId = await collection.getAgentPermanentId(agentName);
+    const agentSource = await collection.getAgentSource(agentId);
+    const agentProfile = parseAgentSource(agentSource);
+    return agentProfile;
+}
+
+export async function isAgentDeleted(agentName: string): Promise<boolean> {
+    const supabase = $provideSupabaseForServer();
+
+    const result = await supabase
+        .from(await $getTableName(`Agent`))
+        .select('deletedAt')
+        .eq('agentName', agentName)
+        .single();
+
+    if (result.error || !result.data) {
+        return false; // If agent doesn't exist or error, consider not deleted
+    }
+
+    return result.data.deletedAt !== null;
 }
 
 /**
- * TODO: Split to multiple files
+ * TODO: Split to multiple files, refactor
  */