@promptbook/cli 0.104.0-3 → 0.104.0-5

package/apps/agents-server/src/app/admin/messages/MessagesClient.tsx

@@ -0,0 +1,294 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { Card } from '../../../components/Homepage/Card';
+import {
+    $fetchMessages,
+    type MessageRow,
+    type MessageSendAttemptRow,
+} from '../../../utils/messagesAdmin';
+
+function formatDate(dateString: string | null | undefined): string {
+    if (!dateString) return '-';
+    const date = new Date(dateString);
+    if (Number.isNaN(date.getTime())) return dateString;
+    return date.toLocaleString();
+}
+
+function getMessagePreview(content: string, maxLength = 120): string {
+    if (!content) return '-';
+    return content.length > maxLength ? `${content.slice(0, maxLength)}…` : content;
+}
+
+function getStatusBadge(attempts: MessageSendAttemptRow[] | undefined) {
+    if (!attempts || attempts.length === 0) {
+        return <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">Pending</span>;
+    }
+    const success = attempts.find(a => a.isSuccessful);
+    if (success) {
+        return <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">Sent ({success.providerName})</span>;
+    }
+    return <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">Failed ({attempts.length})</span>;
+}
+
+export function MessagesClient() {
+    const [items, setItems] = useState<MessageRow[]>([]);
+    const [total, setTotal] = useState(0);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(20);
+    const [searchInput, setSearchInput] = useState('');
+    const [search, setSearch] = useState('');
+    const [channel, setChannel] = useState('');
+    const [direction, setDirection] = useState('');
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    // Load messages whenever filters / pagination change
+    useEffect(() => {
+        let isCancelled = false;
+
+        async function loadData() {
+            try {
+                setLoading(true);
+                setError(null);
+
+                const response = await $fetchMessages({
+                    page,
+                    pageSize,
+                    search: search || undefined,
+                    channel: channel || undefined,
+                    direction: direction || undefined,
+                });
+
+                if (isCancelled) return;
+
+                setItems(response.items);
+                setTotal(response.total);
+            } catch (err) {
+                if (isCancelled) return;
+                setError(err instanceof Error ? err.message : 'Failed to load messages');
+            } finally {
+                if (!isCancelled) {
+                    setLoading(false);
+                }
+            }
+        }
+
+        loadData();
+
+        return () => {
+            isCancelled = true;
+        };
+    }, [page, pageSize, search, channel, direction]);
+
+    const totalPages = useMemo(() => {
+        if (total <= 0 || pageSize <= 0) return 1;
+        return Math.max(1, Math.ceil(total / pageSize));
+    }, [total, pageSize]);
+
+    const handleSearchSubmit = (event: React.FormEvent) => {
+        event.preventDefault();
+        setPage(1);
+        setSearch(searchInput.trim());
+    };
+
+    const handlePageSizeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        const next = parseInt(event.target.value, 10);
+        if (!Number.isNaN(next) && next > 0) {
+            setPageSize(next);
+            setPage(1);
+        }
+    };
+
+    const pagination = (
+        <div className="mt-4 flex flex-col items-center justify-between gap-3 border-t border-gray-100 pt-4 text-xs text-gray-600 md:flex-row">
+            <div>
+                {total > 0 ? (
+                    <>
+                        Showing <span className="font-semibold">{Math.min((page - 1) * pageSize + 1, total)}</span> –{' '}
+                        <span className="font-semibold">{Math.min(page * pageSize, total)}</span> of{' '}
+                        <span className="font-semibold">{total}</span> messages
+                    </>
+                ) : (
+                    'No messages'
+                )}
+            </div>
+            <div className="flex items-center gap-2">
+                <button
+                    type="button"
+                    onClick={() => setPage((prev) => Math.max(1, prev - 1))}
+                    disabled={page <= 1}
+                    className="inline-flex items-center justify-center rounded-md border border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                    Previous
+                </button>
+                <span>
+                    Page <span className="font-semibold">{page}</span> of{' '}
+                    <span className="font-semibold">{totalPages}</span>
+                </span>
+                <button
+                    type="button"
+                    onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
+                    disabled={page >= totalPages}
+                    className="inline-flex items-center justify-center rounded-md border border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                    Next
+                </button>
+            </div>
+        </div>
+    );
+
+    return (
+        <div className="container mx-auto px-4 py-8 space-y-6">
+            <div className="mt-20 mb-4 flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
+                <div>
+                    <h1 className="text-3xl text-gray-900 font-light">Messages</h1>
+                    <p className="mt-1 text-sm text-gray-500">
+                        Inspect all inbound and outbound messages and their statuses.
+                    </p>
+                </div>
+                <div className="flex items-end gap-4 text-sm text-gray-500 md:text-right">
+                    <div>
+                        <div className="text-xl font-semibold text-gray-900">{total.toLocaleString()}</div>
+                        <div className="text-xs uppercase tracking-wide text-gray-400">Total messages</div>
+                    </div>
+                </div>
+            </div>
+            <Card>
+                <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
+                    <form onSubmit={handleSearchSubmit} className="flex flex-col gap-2 md:flex-row md:items-end">
+                        <div className="flex flex-col gap-1">
+                            <label htmlFor="search" className="text-sm font-medium text-gray-700">
+                                Search
+                            </label>
+                            <input
+                                id="search"
+                                type="text"
+                                value={searchInput}
+                                onChange={(event) => setSearchInput(event.target.value)}
+                                placeholder="Search in content..."
+                                className="w-full md:w-72 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            />
+                        </div>
+                        <button
+                            type="submit"
+                            className="mt-2 inline-flex items-center justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 md:mt-0 md:ml-3"
+                        >
+                            Apply
+                        </button>
+                    </form>
+
+                    <div className="flex flex-col gap-2 md:flex-row md:items-end md:gap-4">
+                        <div className="flex flex-col gap-1">
+                            <label htmlFor="channelFilter" className="text-sm font-medium text-gray-700">
+                                Channel
+                            </label>
+                            <select
+                                id="channelFilter"
+                                value={channel}
+                                onChange={(e) => { setChannel(e.target.value); setPage(1); }}
+                                className="w-full md:w-40 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            >
+                                <option value="">All</option>
+                                <option value="EMAIL">Email</option>
+                                <option value="PROMPTBOOK_CHAT">Chat</option>
+                            </select>
+                        </div>
+
+                        <div className="flex flex-col gap-1">
+                            <label htmlFor="directionFilter" className="text-sm font-medium text-gray-700">
+                                Direction
+                            </label>
+                            <select
+                                id="directionFilter"
+                                value={direction}
+                                onChange={(e) => { setDirection(e.target.value); setPage(1); }}
+                                className="w-full md:w-40 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            >
+                                <option value="">All</option>
+                                <option value="INBOUND">Inbound</option>
+                                <option value="OUTBOUND">Outbound</option>
+                            </select>
+                        </div>
+
+                        <div className="flex flex-col gap-1">
+                            <label htmlFor="pageSize" className="text-sm font-medium text-gray-700">
+                                Page size
+                            </label>
+                            <select
+                                id="pageSize"
+                                value={pageSize}
+                                onChange={handlePageSizeChange}
+                                className="w-28 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            >
+                                <option value={10}>10</option>
+                                <option value={20}>20</option>
+                                <option value={50}>50</option>
+                                <option value={100}>100</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </Card>
+
+            <Card>
+                <div className="flex items-center justify-between mb-4">
+                    <h2 className="text-lg font-medium text-gray-900">Message list</h2>
+                </div>
+                {error && <div className="mb-4 rounded-md bg-red-50 px-4 py-3 text-sm text-red-800">{error}</div>}
+
+                {loading && items.length === 0 ? (
+                    <div className="py-8 text-center text-gray-500">Loading messages…</div>
+                ) : items.length === 0 ? (
+                    <div className="py-8 text-center text-gray-500">No messages found.</div>
+                ) : (
+                    <div className="overflow-x-auto">
+                        <table className="min-w-full divide-y divide-gray-200 text-sm">
+                            <thead className="bg-gray-50">
+                                <tr>
+                                    <th className="px-4 py-3 text-left font-medium text-gray-500">Time</th>
+                                    <th className="px-4 py-3 text-left font-medium text-gray-500">Channel</th>
+                                    <th className="px-4 py-3 text-left font-medium text-gray-500">Direction</th>
+                                    <th className="px-4 py-3 text-left font-medium text-gray-500">Sender/Recipients</th>
+                                    <th className="px-4 py-3 text-left font-medium text-gray-500">Content</th>
+                                    <th className="px-4 py-3 text-left font-medium text-gray-500">Status</th>
+                                </tr>
+                            </thead>
+                            <tbody className="divide-y divide-gray-200 bg-white">
+                                {items.map((row) => (
+                                    <tr key={row.id}>
+                                        <td className="whitespace-nowrap px-4 py-3 text-gray-700">
+                                            {formatDate(row.createdAt)}
+                                        </td>
+                                        <td className="whitespace-nowrap px-4 py-3 text-gray-700">
+                                            {row.channel}
+                                        </td>
+                                        <td className="whitespace-nowrap px-4 py-3 text-gray-700">
+                                            {row.direction}
+                                        </td>
+                                        <td className="max-w-xs px-4 py-3 text-gray-700">
+                                            <div className="truncate" title={JSON.stringify({ sender: row.sender, recipients: row.recipients }, null, 2)}>
+                                                {/* Simple preview of sender/recipients */}
+                                                S: {JSON.stringify(row.sender)}<br/>
+                                                R: {JSON.stringify(row.recipients)}
+                                            </div>
+                                        </td>
+                                        <td className="max-w-md px-4 py-3 text-gray-700">
+                                            <div className="max-h-24 overflow-hidden overflow-ellipsis text-xs leading-snug">
+                                                {getMessagePreview(row.content)}
+                                            </div>
+                                        </td>
+                                        <td className="whitespace-nowrap px-4 py-3 text-gray-700">
+                                            {getStatusBadge(row.sendAttempts)}
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                )}
+                {pagination}
+            </Card>
+        </div>
+    );
+}

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

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

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/agents/[agentName]/api/profile/route.ts

@@ -29,6 +29,10 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
         const agentHash = computeAgentHash(agentSource);
         const isVoiceCallingEnabled = (await getMetadata('IS_EXPERIMENTAL_VOICE_CALLING_ENABLED')) === 'true';
 
+        if (!agentProfile.meta.image) {
+            agentProfile.meta.image = `/agents/${encodeURIComponent(agentName)}/images/default-avatar.png`;
+        }
+
         return new Response(
             JSON.stringify(
                 {

package/apps/agents-server/src/app/agents/[agentName]/images/default-avatar.png/route.ts

@@ -0,0 +1,139 @@
+import { $getTableName } from '@/src/database/$getTableName';
+import { $provideSupabaseForServer } from '@/src/database/$provideSupabaseForServer';
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { $provideCdnForServer } from '@/src/tools/$provideCdnForServer';
+import { $provideExecutionToolsForServer } from '@/src/tools/$provideExecutionToolsForServer';
+import { parseAgentSource } from '@promptbook-local/core';
+import { serializeError } from '@promptbook-local/utils';
+import { NextRequest, NextResponse } from 'next/server';
+import { assertsError } from '../../../../../../../../src/errors/assertsError';
+import { getSingleLlmExecutionTools } from '../../../../../../../../src/llm-providers/_multiple/getSingleLlmExecutionTools';
+import type { LlmExecutionTools } from '../../../../../../../../src/execution/LlmExecutionTools';
+import type { string_url } from '../../../../../../../../src/types/typeAliases';
+
+export async function GET(request: NextRequest, { params }: { params: Promise<{ agentName: string }> }) {
+    try {
+        let { agentName } = await params;
+        agentName = decodeURIComponent(agentName);
+
+        if (!agentName) {
+            return NextResponse.json({ error: 'Agent name is required' }, { status: 400 });
+        }
+
+        // Define a unique filename/key for this agent's default avatar
+        // This is used for DB lookup and CDN storage, distinct from generic images
+        const internalFilename = `agent-${agentName}-default-avatar.png`;
+
+        const supabase = $provideSupabaseForServer();
+
+        // Check if image already exists in database
+        const { data: existingImage, error: selectError } = await supabase
+            .from(await $getTableName(`Image`))
+            .select('cdnUrl')
+            .eq('filename', internalFilename)
+            .single();
+
+        if (selectError && selectError.code !== 'PGRST116') {
+            // PGRST116 is "not found"
+            throw selectError;
+        }
+
+        if (existingImage) {
+            // Image exists, redirect to CDN
+            return NextResponse.redirect(existingImage.cdnUrl as string_url);
+        }
+
+        // Image doesn't exist, generate it
+
+        // 1. Fetch agent data
+        const collection = await $provideAgentCollectionForServer();
+        let agentSource;
+        try {
+             agentSource = await collection.getAgentSource(agentName);
+        } catch (error) {
+            // If agent not found, return 404 or default generic image?
+            // User said: "Use the ... instead of Gravatar for agents that do not have custom uploaded avatar"
+            // If agent doesn't exist, we probably can't generate a specific avatar.
+            return NextResponse.json({ error: 'Agent not found' }, { status: 404 });
+        }
+
+        const agentProfile = parseAgentSource(agentSource);
+
+        // Extract required fields
+        const name = agentProfile.meta?.title || agentProfile.agentName || agentName;
+        const persona = agentProfile.personaDescription || 'an AI agent';
+        const color = agentProfile.meta?.color || 'blue';
+
+        // Construct prompt
+        // "Image of {agent.name}, {agent.persona}, portrait, use color ${agent.meta.color}, detailed, high quality"
+        const prompt = `Image of ${name}, ${persona}, portrait, use color ${color}, detailed, high quality`;
+
+        // 2. Generate image
+        const executionTools = await $provideExecutionToolsForServer();
+        const llmTools = getSingleLlmExecutionTools(executionTools.llm) as LlmExecutionTools;
+
+        if (!llmTools.callImageGenerationModel) {
+            throw new Error('Image generation is not supported by the current LLM configuration');
+        }
+
+        const imageResult = await llmTools.callImageGenerationModel({
+            title: `Generate default avatar for ${agentName}`,
+            content: prompt,
+            parameters: {
+                size: '1024x1792', // Vertical orientation
+            },
+            modelRequirements: {
+                modelVariant: 'IMAGE_GENERATION',
+                modelName: 'dall-e-3', 
+            },
+        });
+
+        if (!imageResult.content) {
+            throw new Error('Failed to generate image: no content returned');
+        }
+
+        // 3. Download and Upload to CDN
+        const imageResponse = await fetch(imageResult.content);
+        if (!imageResponse.ok) {
+            throw new Error(`Failed to download generated image: ${imageResponse.status}`);
+        }
+
+        const imageBuffer = await imageResponse.arrayBuffer();
+        const buffer = Buffer.from(imageBuffer);
+
+        const cdn = $provideCdnForServer();
+        const cdnKey = `generated-images/${internalFilename}`;
+        await cdn.setItem(cdnKey, {
+            type: 'image/png',
+            data: buffer,
+        });
+
+        const cdnUrl = cdn.getItemUrl(cdnKey);
+
+        // 4. Save to database
+        const { error: insertError } = await supabase.from(await $getTableName(`Image`)).insert({
+            filename: internalFilename,
+            prompt,
+            cdnUrl: cdnUrl.href,
+            cdnKey,
+        });
+
+        if (insertError) {
+            // Use upsert or handle race condition if needed, but insert is fine for now
+            // If parallel requests happen, one might fail. We can ignore dup key error or retry.
+            // But simple insert is what generic route does.
+            throw insertError;
+        }
+
+        // Redirect to the newly created image
+        return NextResponse.redirect(cdnUrl.href as string_url);
+
+    } catch (error) {
+        assertsError(error);
+        console.error('Error serving default avatar:', error);
+        return new Response(JSON.stringify(serializeError(error), null, 4), {
+            status: 500,
+            headers: { 'Content-Type': 'application/json' },
+        });
+    }
+}