@promptbook/cli 0.103.0-45 → 0.103.0-47

package/apps/agents-server/config.ts.todo

@@ -187,21 +187,21 @@ export const AZURE_COMPUTER_VISION_KEY = config.get('AZURE_COMPUTER_VISION_KEY')
 
 // TODO: [🧠] How to do required only on server
 export const CDN_BUCKET = config.get('CDN_BUCKET') /*.required([📐])*/.value;
-export const CDN_PATH_PREFIX = config.get('CDN_PATH_PREFIX') /*.required([📐])*/.value;
+export const NEXT_PUBLIC_CDN_PATH_PREFIX = config.get('NEXT_PUBLIC_CDN_PATH_PREFIX') /*.required([📐])*/.value;
 export const CDN_ENDPOINT = config.get('CDN_ENDPOINT') /*.required([📐])*/.value;
 export const CDN_ACCESS_KEY_ID = config.get('CDN_ACCESS_KEY_ID') /*.required([📐])*/.value;
 export const CDN_SECRET_ACCESS_KEY = config.get('CDN_SECRET_ACCESS_KEY') /*.required([📐])*/.value;
-export const CDN_PUBLIC_URL = config.get('CDN_PUBLIC_URL').url() /*.required([📐])*/.value;
+export const NEXT_PUBLIC_CDN_PUBLIC_URL = config.get('NEXT_PUBLIC_CDN_PUBLIC_URL').url() /*.required([📐])*/.value;
 
 export const CDN = (CDN_BUCKET &&
     // [📐]
     new DigitalOceanSpaces({
         bucket: CDN_BUCKET!,
-        pathPrefix: CDN_PATH_PREFIX!,
+        pathPrefix: NEXT_PUBLIC_CDN_PATH_PREFIX!,
         endpoint: CDN_ENDPOINT!,
         accessKeyId: CDN_ACCESS_KEY_ID!,
         secretAccessKey: CDN_SECRET_ACCESS_KEY!,
-        cdnPublicUrl: CDN_PUBLIC_URL!,
+        cdnPublicUrl: NEXT_PUBLIC_CDN_PUBLIC_URL!,
         gzip: false /* <- TODO: Maybe just remove this functionality from WebGPT repository */,
     })) as DigitalOceanSpaces;
 

package/apps/agents-server/next.config.ts

@@ -2,6 +2,9 @@ import type { NextConfig } from 'next';
 import path from 'path';
 
 const nextConfig: NextConfig = {
+    output: 'standalone',
+    // <- TODO: !!!! How to propperly build Next.js app
+
     experimental: {
         externalDir: true,
     },

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

@@ -0,0 +1,86 @@
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { padBook, validateBook } from '@promptbook-local/core';
+import { serializeError } from '@promptbook-local/utils';
+import spaceTrim from 'spacetrim';
+import { assertsError } from '../../../../../../../../src/errors/assertsError';
+import { keepUnused } from '../../../../../../../../src/utils/organization/keepUnused';
+
+export async function GET(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
+    keepUnused(request /* <- Note: We dont need `request` parameter */);
+    let { agentName } = await params;
+    agentName = decodeURIComponent(agentName);
+
+    try {
+        const collection = await $provideAgentCollectionForServer();
+        const agentSource = await collection.getAgentSource(agentName);
+
+        return new Response(agentSource, {
+            status: 200,
+            headers: { 'Content-Type': 'text/plain' /* <- TODO: [🎳] Mime type of book */ },
+        });
+    } catch (error) {
+        assertsError(error);
+
+        console.error(error);
+
+        return new Response(
+            JSON.stringify(
+                serializeError(error),
+                // <- TODO: !!! Rename `serializeError` to `errorToJson`
+                null,
+                4,
+                // <- TODO: !!! Allow to configure pretty print for agent server
+            ),
+            {
+                status: 400, // <- TODO: !!! Make `errorToHttpStatusCode`
+                headers: { 'Content-Type': 'application/json' },
+            },
+        );
+    }
+}
+
+export async function PUT(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
+    let { agentName } = await params;
+    agentName = decodeURIComponent(agentName);
+
+    try {
+        const collection = await $provideAgentCollectionForServer();
+        let agentSourceUnchecked = await request.text();
+        agentSourceUnchecked = spaceTrim(agentSourceUnchecked);
+        let agentSource = validateBook(agentSourceUnchecked);
+        agentSource = padBook(agentSource);
+
+        await collection.updateAgentSource(agentName, agentSource);
+        // <- TODO: !!! Properly type as string_book
+
+        return new Response(
+            JSON.stringify({
+                isSuccessful: true,
+                message: `Agent "${agentName}" updated successfully`,
+                agentSource, // <- TODO: !!! Remove from response
+            }),
+            {
+                status: 200,
+                headers: { 'Content-Type': 'application/json' },
+            },
+        );
+    } catch (error) {
+        assertsError(error);
+
+        console.error(error);
+
+        return new Response(
+            JSON.stringify(
+                serializeError(error),
+                // <- TODO: !!! Rename `serializeError` to `errorToJson`
+                null,
+                4,
+                // <- TODO: !!! Allow to configure pretty print for agent server
+            ),
+            {
+                status: 400, // <- TODO: !!! Make `errorToHttpStatusCode`
+                headers: { 'Content-Type': 'application/json' },
+            },
+        );
+    }
+}

package/apps/agents-server/src/app/agents/[agentName]/api/book/test.http

@@ -0,0 +1,37 @@
+### Get the book
+
+GET http://localhost:4440/agents/Gabriel%20Gray/api/book
+
+
+
+# _______________________________________
+### Update the book 1
+
+
+PUT http://localhost:4440/agents/Gabriel%20Gray/api/book
+Content-Type: text/plain
+# <- TODO: [🎳] Mime type of book
+
+
+Gabriel Gray
+
+META COLOR #c9c9c9
+PERSONA Friendly and helpful AI agent.
+RULE Be kind and respectful.
+
+
+
+
+# _______________________________________
+### Update the book 2
+
+
+PUT http://localhost:4440/agents/Gabriel%20Gray/api/book
+Content-Type: text/plain
+# <- TODO: [🎳] Mime type of book
+
+Gabriel Gray
+
+META COLOR #242424
+PERSONA Strict and professional AI agent.
+RULE Be strict and professional.

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

@@ -5,7 +5,8 @@ import { serializeError } from '@promptbook-local/utils';
 import { assertsError } from '../../../../../../../../src/errors/assertsError';
 
 export async function GET(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
-    const { agentName } = await params;
+    let { agentName } = await params;
+    agentName = decodeURIComponent(agentName);
     const { searchParams } = new URL(request.url);
     const message = searchParams.get('message') || 'Tell me more about yourself.';
     //                                               <- TODO: !!!! To configuration DEFAULT_INITIAL_HIDDEN_MESSAGE
@@ -23,9 +24,8 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
             },
             agentSource,
         });
-        const llmTools = agent.getLlmExecutionTools();
 
-        const response = await llmTools.callChatModel!({
+        const response = await agent.callChatModel!({
             title: `Chat with agent ${agentName}`,
             parameters: {},
             modelRequirements: {
@@ -34,9 +34,11 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
             content: message,
         });
 
+        // TODO: [🐚] Implement streaming
+
         return new Response(response.content, {
             status: 200,
-            headers: { 'Content-Type': 'text/plain' },
+            headers: { 'Content-Type': 'text/markdown' },
         });
     } catch (error) {
         assertsError(error);

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

@@ -0,0 +1 @@
+TODO: [🎣][🧠] Maybe do API / Page for transpilers, Allow to export each agent

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

@@ -0,0 +1,53 @@
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { createAgentModelRequirements } from '@promptbook-local/core';
+import { serializeError } from '@promptbook-local/utils';
+import { assertsError } from '../../../../../../../../src/errors/assertsError';
+import { keepUnused } from '../../../../../../../../src/utils/organization/keepUnused';
+
+export async function GET(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
+    keepUnused(request /* <- Note: We dont need `request` parameter */);
+    let { agentName } = await params;
+    agentName = decodeURIComponent(agentName);
+
+    try {
+        const collection = await $provideAgentCollectionForServer();
+        const agentSource = await collection.getAgentSource(agentName);
+        const modelRequirements = await createAgentModelRequirements(agentSource);
+
+        return new Response(
+            JSON.stringify(
+                modelRequirements,
+                // <- TODO: !!! Rename `serializeError` to `errorToJson`
+                null,
+                4,
+                // <- TODO: !!! Allow to configure pretty print for agent server
+            ),
+            {
+                status: 200,
+                headers: { 'Content-Type': 'application/json' },
+            },
+        );
+    } catch (error) {
+        assertsError(error);
+
+        console.error(error);
+
+        return new Response(
+            JSON.stringify(
+                serializeError(error),
+                // <- TODO: !!! Rename `serializeError` to `errorToJson`
+                null,
+                4,
+                // <- TODO: !!! Allow to configure pretty print for agent server
+            ),
+            {
+                status: 400, // <- TODO: !!! Make `errorToHttpStatusCode`
+                headers: { 'Content-Type': 'application/json' },
+            },
+        );
+    }
+}
+
+/**
+ * TODO: [🍞] DRY - Make some common utility for API on one agent
+ */

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

@@ -0,0 +1,45 @@
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { createAgentModelRequirements } from '@promptbook-local/core';
+import { serializeError } from '@promptbook-local/utils';
+import { assertsError } from '../../../../../../../../../src/errors/assertsError';
+import { keepUnused } from '../../../../../../../../../src/utils/organization/keepUnused';
+
+export async function GET(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
+    keepUnused(request /* <- Note: We dont need `request` parameter */);
+    let { agentName } = await params;
+    agentName = decodeURIComponent(agentName);
+
+    try {
+        const collection = await $provideAgentCollectionForServer();
+        const agentSource = await collection.getAgentSource(agentName);
+        const modelRequirements = await createAgentModelRequirements(agentSource);
+        const { systemMessage } = modelRequirements;
+
+        return new Response(systemMessage, {
+            status: 200,
+            headers: { 'Content-Type': 'text/markdown' },
+        });
+    } catch (error) {
+        assertsError(error);
+
+        console.error(error);
+
+        return new Response(
+            JSON.stringify(
+                serializeError(error),
+                // <- TODO: !!! Rename `serializeError` to `errorToJson`
+                null,
+                4,
+                // <- TODO: !!! Allow to configure pretty print for agent server
+            ),
+            {
+                status: 400, // <- TODO: !!! Make `errorToHttpStatusCode`
+                headers: { 'Content-Type': 'application/json' },
+            },
+        );
+    }
+}
+
+/**
+ * TODO: [🍞] DRY - Make some common utility for API on one agent
+ */

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

@@ -0,0 +1,54 @@
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { parseAgentSource } from '@promptbook-local/core';
+import { serializeError } from '@promptbook-local/utils';
+import { assertsError } from '../../../../../../../../src/errors/assertsError';
+import { keepUnused } from '../../../../../../../../src/utils/organization/keepUnused';
+
+export async function GET(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
+    keepUnused(request /* <- Note: We dont need `request` parameter */);
+    let { agentName } = await params;
+    agentName = decodeURIComponent(agentName);
+
+    try {
+        const collection = await $provideAgentCollectionForServer();
+        const agentSource = await collection.getAgentSource(agentName);
+        const agentProfile = parseAgentSource(agentSource);
+
+        return new Response(
+            JSON.stringify(
+                agentProfile,
+                // <- TODO: !!! Rename `serializeError` to `errorToJson`
+                null,
+                4,
+                // <- TODO: !!! Allow to configure pretty print for agent server
+            ),
+            {
+                status: 200,
+                headers: { 'Content-Type': 'application/json' },
+            },
+        );
+    } catch (error) {
+        assertsError(error);
+
+        console.error(error);
+
+        return new Response(
+            JSON.stringify(
+                serializeError(error),
+                // <- TODO: !!! Rename `serializeError` to `errorToJson`
+                null,
+                4,
+                // <- TODO: !!! Allow to configure pretty print for agent server
+            ),
+            {
+                status: 400, // <- TODO: !!! Make `errorToHttpStatusCode`
+                headers: { 'Content-Type': 'application/json' },
+            },
+        );
+    }
+}
+
+
+/**
+ * TODO: [🍞] DRY - Make some common utility for API on one agent
+ */

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

@@ -0,0 +1,140 @@
+'use client';
+
+import { BookEditor } from '@promptbook-local/components';
+import { string_book } from '@promptbook-local/types';
+import { useEffect, useRef, useState } from 'react';
+
+type BookEditorWrapperProps = {
+    agentName: string;
+    initialAgentSource: string_book;
+};
+
+// TODO: !!!! Rename to BookEditorSavingWrapper
+
+export function BookEditorWrapper({ agentName, initialAgentSource }: BookEditorWrapperProps) {
+    const [agentSource, setAgentSource] = useState<string_book>(initialAgentSource);
+    const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
+
+    // Debounce timer ref so we can clear previous pending save
+    const debounceTimerRef = useRef<number | null>(null);
+    // Configurable debounce delay (ms) - tweak if needed
+    const DEBOUNCE_DELAY = 600;
+
+    const performSave = async (sourceToSave: string_book) => {
+        setSaveStatus('saving');
+        try {
+            const response = await fetch(`/agents/${encodeURIComponent(agentName)}/api/book`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'text/plain' },
+                body: sourceToSave,
+            });
+            if (!response.ok) {
+                throw new Error(`Failed to save: ${response.statusText}`);
+            }
+            setSaveStatus('saved');
+            setTimeout(() => setSaveStatus('idle'), 2000); // Reset status after 2 seconds
+        } catch (error) {
+            console.error('Error saving agent source:', error);
+            setSaveStatus('error');
+            setTimeout(() => setSaveStatus('idle'), 3000);
+        }
+    };
+
+    const scheduleSave = (nextSource: string_book) => {
+        // Clear existing pending save
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        // We stay 'idle' while typing; could add a 'pending' status in future if desired
+        // Schedule new save
+        debounceTimerRef.current = window.setTimeout(() => {
+            performSave(nextSource);
+        }, DEBOUNCE_DELAY);
+    };
+
+    const handleChange = (newSource: string_book) => {
+        setAgentSource(newSource);
+        scheduleSave(newSource);
+    };
+
+    // Cleanup on unmount to avoid lingering timeouts
+    useEffect(() => {
+        return () => {
+            if (debounceTimerRef.current) {
+                clearTimeout(debounceTimerRef.current);
+            }
+        };
+    }, []);
+
+    return (
+        <div className="w-full h-full">
+            {saveStatus !== 'idle' && (
+                <div
+                    role="status"
+                    aria-live="polite"
+                    className={`fixed top-5 right-28 z-50 px-4 py-2 text-sm rounded shadow-md ${
+                        saveStatus === 'saving'
+                            ? 'bg-blue-100 text-blue-800'
+                            : saveStatus === 'saved'
+                            ? 'bg-green-100 text-green-800'
+                            : 'bg-red-100 text-red-800'
+                    }`}
+                >
+                    {saveStatus === 'saving' && '💾 Saving...'}
+                    {saveStatus === 'saved' && '✅ Saved'}
+                    {saveStatus === 'error' && '❌ Failed to save'}
+                </div>
+            )}
+
+            <BookEditor
+                className="w-full h-full"
+                height={null}
+                value={agentSource}
+                onChange={handleChange}
+                onFileUpload={async (file) => {
+                    const formData = new FormData();
+                    formData.append('file', file);
+
+                    const response = await fetch('/api/upload', {
+                        method: 'POST',
+                        body: formData,
+                    });
+
+                    if (!response.ok) {
+                        throw new Error(`Failed to upload file: ${response.statusText}`);
+                    }
+
+                    const { fileUrl: longFileUrl } = await response.json();
+
+                    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);
+
+                    console.log(`File uploaded:`, {
+                        LONG_URL,
+                        SHORT_URL,
+                        longFileUrl,
+                        shortFileUrl,
+                        file,
+                        formData,
+                        response,
+                    });
+
+                    return shortFileUrl;
+                }}
+                // <- TODO: !!!! Create two-state solution for `<BookEditor onFileUpload={...} />`
+            />
+        </div>
+    );
+}
+
+/**
+ * TODO: [🚗] Transfer the saving logic to `<BookEditor/>` be aware of CRDT / yjs approach to be implementable in future
+ * DONE: Implement debouncing for auto-save (600ms delay) ✅
+ * TODO: !!! Add error handling and retry logic
+ * TODO: !!! Show save status indicator
+ * TODO: !!!!! Add file upload capability
+ */

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

@@ -0,0 +1,25 @@
+'use server';
+
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { headers } from 'next/headers';
+import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
+import { BookEditorWrapper } from './BookEditorWrapper';
+
+export default async function AgentBookPage({ params }: { params: Promise<{ agentName: string }> }) {
+    $sideEffect(headers());
+
+    let { agentName } = await params;
+    agentName = decodeURIComponent(agentName);
+    const collection = await $provideAgentCollectionForServer();
+    const agentSource = await collection.getAgentSource(decodeURIComponent(agentName));
+
+    return (
+        <main className={`w-screen h-screen`}>
+            <BookEditorWrapper agentName={agentName} initialAgentSource={agentSource} />
+        </main>
+    );
+}
+
+/**
+ * TODO: [🚗] Components and pages here should be just tiny UI wrapper around proper agent logic and components
+ */

package/apps/agents-server/src/app/agents/[agentName]/book+chat/{SelfLearningBook.tsx → AgentBookAndChatComponent.tsx}

@@ -2,15 +2,14 @@
 
 import { ResizablePanelsAuto } from '@common/components/ResizablePanelsAuto/ResizablePanelsAuto';
 import { useStateInLocalStorage } from '@common/hooks/useStateInLocalStorage';
-import { BookEditor, LlmChat } from '@promptbook-local/components';
+import { AgentChat, BookEditor } from '@promptbook-local/components';
 import { Agent, book } from '@promptbook-local/core';
 // import { RemoteLlmExecutionTools } from '@promptbook-local/remote-client';
 import { OpenAiAssistantExecutionTools } from '@promptbook-local/openai';
 import type { string_book } from '@promptbook-local/types';
-import { spaceTrim } from '@promptbook-local/utils';
 import { useMemo, useState } from 'react';
 
-export function SelfLearningBook() {
+export function AgentBookAndChatComponent() {
     const [apiKey, setApiKey] = useStateInLocalStorage<string>('openai-apiKey', () => '');
     const [isApiKeyVisible, setIsApiKeyVisible] = useState(false);
     const [isApiKeySectionCollapsed, setIsApiKeySectionCollapsed] = useState(!!apiKey);
@@ -85,10 +84,7 @@ export function SelfLearningBook() {
         return agent;
     }, [agentSource, setAgentSource, apiKey]);
 
-    const llmTools = useMemo(() => {
-        const llmTools = agent.getLlmExecutionTools();
-        return llmTools;
-    }, [agent]);
+
 
     return (
         <div className="min-h-screen relative">
@@ -153,45 +149,8 @@ export function SelfLearningBook() {
                         return file.name;
                     }}
                 />
-                {/*
-                <AgentChat className="w-full h-full" persistenceKey="marigold-chat" {...{ agent }} />
-                TODO: !!! Move to `AgentChat` component
-                */}
-                <LlmChat
-                    title={`Chat with ${agent.agentName || 'Agent'}`}
-                    // TODO: !!! Pass persistenceKey="chat-with-pavol-hejny"
-                    userParticipantName="USER"
-                    llmParticipantName="AGENT" // <- TODO: [🧠] Maybe dynamic agent id
-                    initialMessages={[
-                        {
-                            from: 'AGENT',
-                            content: spaceTrim(`
-                                
-                                Hello! I am ${agent.agentName || 'an AI Agent'}.
-                                
-                                [Hello](?message=Hello, can you tell me about yourself?)
-                            `),
-                        },
-                    ]}
-                    participants={[
-                        {
-                            name: 'AGENT',
-                            fullname: agent.agentName || 'Agent',
-                            avatarSrc: agent.meta.image,
-                            color: agent.meta.color,
-                            isMe: false,
-                            agentSource,
-                        },
-                        {
-                            name: 'USER',
-                            fullname: 'User',
-                            color: '#115EB6',
-                            isMe: true,
-                        },
-                    ]}
-                    {...{ llmTools }}
-                    className={`h-full flex flex-col`}
-                />
+        
+                <AgentChat className={`h-full flex flex-col`} {...{ agent }} />
             </ResizablePanelsAuto>
         </div>
     );

package/apps/agents-server/src/app/agents/[agentName]/book+chat/page.tsx

@@ -2,11 +2,14 @@
 
 import dynamic from 'next/dynamic';
 
-const SelfLearningBook = dynamic(() => import('./SelfLearningBook').then((module) => module.SelfLearningBook), {
-    ssr: false,
-});
+const SelfLearningBook = dynamic(
+    () => import('./AgentBookAndChatComponent').then((module) => module.AgentBookAndChatComponent),
+    {
+        ssr: false,
+    },
+);
 
-export default function SelfLearningBookPage() {
+export default function AgentBookAndChatPage() {
     return <SelfLearningBook />;
 }
 

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

@@ -0,0 +1,38 @@
+'use client';
+
+import { usePromise } from '@common/hooks/usePromise';
+import { AgentChat } from '@promptbook-local/components';
+import { RemoteAgent } from '@promptbook-local/core';
+import { useMemo } from 'react';
+import { string_agent_url } from '../../../../../../../src/types/typeAliases';
+
+type AgentChatWrapperProps = {
+    agentUrl: string_agent_url;
+};
+
+// TODO: !!!! Rename to AgentChatSomethingWrapper
+
+export function AgentChatWrapper(props: AgentChatWrapperProps) {
+    const { agentUrl } = props;
+
+    const agentPromise = useMemo(
+        () =>
+            RemoteAgent.connect({
+                agentUrl,
+                isVerbose: true,
+            }),
+        [agentUrl],
+    );
+
+    const { value: agent } = usePromise(agentPromise, [agentPromise]);
+
+    if (!agent) {
+        return <>{/* <- TODO: !!! <PromptbookLoading /> */}</>;
+    }
+
+    return <AgentChat className={`w-full h-full`} agent={agent} />;
+}
+
+/**
+ * TODO: [🚗] Transfer the saving logic to `<BookEditor/>` be aware of CRDT / yjs approach to be implementable in future
+ */