@promptbook/cli 0.104.0-1 → 0.104.0-3

package/apps/agents-server/src/app/admin/chat-history/ChatHistoryClient.tsx

@@ -54,10 +54,7 @@ function getMessagePreview(message: unknown, maxLength = 120): string {
     }
 
     if (typeof message === 'object') {
-        const content =
-            (message as { content?: unknown }).content ??
-            (message as { text?: unknown }).text ??
-            message;
+        const content = (message as { content?: unknown }).content ?? (message as { text?: unknown }).text ?? message;
 
         let text: string;
 
@@ -303,11 +300,12 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
             const message = row.message as { role?: string; content?: string };
             const role = (message.role || 'USER').toUpperCase();
             return {
+                // channel: 'PROMPTBOOK_CHAT',
                 id: String(row.id),
-                from: role === 'USER' ? 'USER' : 'ASSISTANT',
+                sender: role === 'USER' ? 'USER' : 'ASSISTANT',
                 content: message.content || JSON.stringify(message),
                 isComplete: true,
-                date: new Date(row.createdAt),
+                createdAt: new Date(row.createdAt),
             } satisfies ChatMessage;
         });
     }, [items, viewMode]);
@@ -317,17 +315,9 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
             <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
+                        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'
@@ -403,97 +393,90 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
                         </a>
                     </div>
                     <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 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 by agent name, URL or IP"
-                                    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"
+                <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 by agent name, URL or IP"
+                                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="agentFilter" className="text-sm font-medium text-gray-700">
+                                Agent filter
+                            </label>
+                            <select
+                                id="agentFilter"
+                                value={agentName}
+                                onChange={handleAgentChange}
+                                className="w-full md:w-64 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                             >
-                                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="agentFilter" className="text-sm font-medium text-gray-700">
-                                    Agent filter
-                                </label>
-                                <select
-                                    id="agentFilter"
-                                    value={agentName}
-                                    onChange={handleAgentChange}
-                                    className="w-full md:w-64 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 agents</option>
-                                    {agents.map((agent) => (
-                                        <option key={agent.agentName} value={agent.agentName}>
-                                            {agent.fullname || agent.agentName}
-                                        </option>
-                                    ))}
-                                </select>
-                                {agentsLoading && (
-                                    <span className="text-xs text-gray-400">Loading agents…</span>
-                                )}
-                            </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>
+                                <option value="">All agents</option>
+                                {agents.map((agent) => (
+                                    <option key={agent.agentName} value={agent.agentName}>
+                                        {agent.fullname || agent.agentName}
+                                    </option>
+                                ))}
+                            </select>
+                            {agentsLoading && <span className="text-xs text-gray-400">Loading agents…</span>}
                         </div>
-                    </div>
 
-                    {agentName && (
-                        <div className="mt-4 flex items-center justify-between gap-4 rounded-md border border-amber-200 bg-amber-50 px-4 py-3">
-                            <p className="text-sm text-amber-800">
-                                Showing chat history for agent{' '}
-                                <span className="font-semibold break-all">{agentName}</span>.
-                            </p>
-                            <button
-                                type="button"
-                                onClick={handleClearAgentHistory}
-                                className="inline-flex items-center justify-center rounded-md border border-red-300 bg-white px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-50"
+                        <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"
                             >
-                                Clear history for this agent
-                            </button>
+                                <option value={10}>10</option>
+                                <option value={20}>20</option>
+                                <option value={50}>50</option>
+                                <option value={100}>100</option>
+                            </select>
                         </div>
-                    )}
-                </Card>
+                    </div>
+                </div>
+
+                {agentName && (
+                    <div className="mt-4 flex items-center justify-between gap-4 rounded-md border border-amber-200 bg-amber-50 px-4 py-3">
+                        <p className="text-sm text-amber-800">
+                            Showing chat history for agent <span className="font-semibold break-all">{agentName}</span>.
+                        </p>
+                        <button
+                            type="button"
+                            onClick={handleClearAgentHistory}
+                            className="inline-flex items-center justify-center rounded-md border border-red-300 bg-white px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-50"
+                        >
+                            Clear history for this agent
+                        </button>
+                    </div>
+                )}
+            </Card>
 
             {viewMode === 'chat' ? (
                 <div className="bg-white rounded-lg shadow border border-gray-200 overflow-hidden flex flex-col">
@@ -505,22 +488,14 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
                             isSaveButtonEnabled={true}
                         />
                     </div>
-                    <div className="p-4 bg-gray-50 border-t border-gray-200">
-                        {pagination}
-                    </div>
+                    <div className="p-4 bg-gray-50 border-t border-gray-200">{pagination}</div>
                 </div>
             ) : (
                 <Card>
                     <div className="flex items-center justify-between mb-4">
-                        <h2 className="text-lg font-medium text-gray-900">
-                            Messages ({total})
-                        </h2>
+                        <h2 className="text-lg font-medium text-gray-900">Messages ({total})</h2>
                     </div>
-                    {error && (
-                        <div className="mb-4 rounded-md bg-red-50 px-4 py-3 text-sm text-red-800">
-                            {error}
-                        </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 chat history…</div>
@@ -555,27 +530,13 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
                                                 )}
                                             </button>
                                         </th>
-                                        <th className="px-4 py-3 text-left font-medium text-gray-500">
-                                            Role
-                                        </th>
-                                        <th className="px-4 py-3 text-left font-medium text-gray-500">
-                                            Message
-                                        </th>
-                                        <th className="px-4 py-3 text-left font-medium text-gray-500">
-                                            URL
-                                        </th>
-                                        <th className="px-4 py-3 text-left font-medium text-gray-500">
-                                            IP
-                                        </th>
-                                        <th className="px-4 py-3 text-left font-medium text-gray-500">
-                                            Language
-                                        </th>
-                                        <th className="px-4 py-3 text-left font-medium text-gray-500">
-                                            Platform
-                                        </th>
-                                        <th className="px-4 py-3 text-right font-medium text-gray-500">
-                                            Actions
-                                        </th>
+                                        <th className="px-4 py-3 text-left font-medium text-gray-500">Role</th>
+                                        <th className="px-4 py-3 text-left font-medium text-gray-500">Message</th>
+                                        <th className="px-4 py-3 text-left font-medium text-gray-500">URL</th>
+                                        <th className="px-4 py-3 text-left font-medium text-gray-500">IP</th>
+                                        <th className="px-4 py-3 text-left font-medium text-gray-500">Language</th>
+                                        <th className="px-4 py-3 text-left font-medium text-gray-500">Platform</th>
+                                        <th className="px-4 py-3 text-right font-medium text-gray-500">Actions</th>
                                     </tr>
                                 </thead>
                                 <tbody className="divide-y divide-gray-200 bg-white">
@@ -596,9 +557,7 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
                                                 </div>
                                             </td>
                                             <td className="max-w-xs px-4 py-3 text-gray-500">
-                                                <div className="truncate text-xs">
-                                                    {row.url || '-'}
-                                                </div>
+                                                <div className="truncate text-xs">{row.url || '-'}</div>
                                             </td>
                                             <td className="whitespace-nowrap px-4 py-3 text-gray-500">
                                                 {row.ip || '-'}
@@ -607,9 +566,7 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
                                                 {row.language || '-'}
                                             </td>
                                             <td className="max-w-xs px-4 py-3 text-gray-500">
-                                                <div className="truncate text-xs">
-                                                    {row.platform || '-'}
-                                                </div>
+                                                <div className="truncate text-xs">{row.platform || '-'}</div>
                                             </td>
                                             <td className="whitespace-nowrap px-4 py-3 text-right text-xs font-medium">
                                                 <button

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"