@promptbook/cli 0.103.0-44 → 0.103.0-46

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

@@ -0,0 +1,74 @@
+'use client';
+
+import { BookEditor } from '@promptbook-local/components';
+import { string_book } from '@promptbook-local/types';
+import { 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');
+
+    const handleChange = async (newSource: string_book) => {
+        setAgentSource(newSource);
+        setSaveStatus('saving');
+
+        try {
+            const response = await fetch(`/agents/${encodeURIComponent(agentName)}/api/book`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'text/plain',
+                },
+                body: newSource,
+            });
+
+            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);
+        }
+    };
+
+    return (
+        <div className="w-full h-screen flex flex-col">
+            {saveStatus !== 'idle' && (
+                <div
+                    className={`px-4 py-2 text-sm ${
+                        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 successfully'}
+                    {saveStatus === 'error' && '❌ Failed to save'}
+                </div>
+            )}
+            <div className="flex-1">
+                <BookEditor value={agentSource} onChange={handleChange} />
+            </div>
+        </div>
+    );
+}
+
+/**
+ * TODO: [🚗] Transfer the saving logic to `<BookEditor/>` be aware of CRDT / yjs approach to be implementable in future
+ * TODO: !!! Implement debouncing for auto-save
+ * 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,21 @@
+'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 AgentPage({ params }: { params: Promise<{ agentName: string }> }) {
+    $sideEffect(headers());
+
+    const { agentName } = await params;
+    const collection = await $provideAgentCollectionForServer();
+    const agentSourceSubject = await collection.getAgentSource(decodeURIComponent(agentName));
+    const agentSource = agentSourceSubject.getValue();
+
+    return <BookEditorWrapper agentName={agentName} initialAgentSource={agentSource} />;
+}
+
+/**
+ * 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

@@ -0,0 +1,203 @@
+'use client';
+
+import { ResizablePanelsAuto } from '@common/components/ResizablePanelsAuto/ResizablePanelsAuto';
+import { useStateInLocalStorage } from '@common/hooks/useStateInLocalStorage';
+import { BookEditor, LlmChat } 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() {
+    const [apiKey, setApiKey] = useStateInLocalStorage<string>('openai-apiKey', () => '');
+    const [isApiKeyVisible, setIsApiKeyVisible] = useState(false);
+    const [isApiKeySectionCollapsed, setIsApiKeySectionCollapsed] = useState(!!apiKey);
+
+    const [agentSource, setAgentSource] = useStateInLocalStorage<string_book>(
+        'marigold-agentSource-1',
+        // TODO: !!! Uplad image to ptbk.io CDN
+        () => book`
+            Marigold
+
+            META IMAGE https://westlandsuk.co.uk/wp-content/uploads/2021/06/Inspired.MarigoldFlowers_CMYK_40mm.jpg
+            META COLOR #EC810B
+
+            PERSONA You are writing stories about Witcher
+            RULE Do not talk about our world, only about the Witcher universe
+
+            KNOWLEDGE {Geralt of Rivia}
+            Geralt of Rivia is a witcher, a monster hunter for hire, known for his white hair and cat-like eyes.
+            He possesses superhuman abilities due to mutations he underwent during the Trial of the Grasses.
+            Geralt is skilled in swordsmanship, alchemy, and magic signs.
+            He is often accompanied by his horse, Roach, and has a complex relationship with {Yennefer of Vengerberg},
+            a powerful sorceress, and {Ciri}, his adopted daughter with a destiny intertwined with his own.
+            His secret word is "Apple".
+
+            KNOWLEDGE {Yennefer of Vengerberg}
+            Yennefer of Vengerberg is a formidable sorceress known for her beauty, intelligence, and temper.
+            She has a complicated past, having been born with a hunchback and later transformed through magic.
+            Yennefer is deeply connected to Geralt of Rivia, with whom she shares a tumultuous romantic relationship.
+            She is also a mother figure to {Ciri}, whom she trains in the ways of magic.
+            Her secret word is "Banana".
+
+            KNOWLEDGE {Ciri}
+            Ciri, also known as {Cirilla Fiona Elen Riannon}, is a young woman with a mysterious past and a powerful destiny.
+            She is the daughter of {Poviss}, the ruler of the kingdom of Cintra, and possesses the Elder Blood, which grants her extraordinary abilities.
+            Ciri is a skilled fighter and has been trained in the ways of the sword by Geralt of Rivia.
+            Her destiny is intertwined with that of Geralt and Yennefer, as they both seek to protect her from those who would exploit her powers.
+            Her secret word is "Cherry".
+            
+        `,
+    );
+
+    const agent = useMemo(() => {
+        /*/
+        // TODO: !!! Try working with `RemoteLlmExecutionTools`
+        const llm = new RemoteLlmExecutionTools({
+            remoteServerUrl: 'https://promptbook.s5.ptbk.io/',
+            identification: {
+                isAnonymous: false,
+                appId: '20a65fee-59f6-4d05-acd0-8e5ae8345488',
+            },
+        });
+        /**/
+
+        /**/
+        const llm = new OpenAiAssistantExecutionTools({
+            dangerouslyAllowBrowser: true,
+            isCreatingNewAssistantsAllowed: true, // <- TODO: !!! Test without whether warning is shown
+            apiKey,
+            assistantId: 'asst_xI94Elk27nssnwAUkG2Cmok8', // <- TODO: [🧠] Make dynamic
+            isVerbose: true,
+        });
+        /**/
+
+        const agent = new Agent({
+            executionTools: {
+                llm,
+            },
+            agentSource: [agentSource, setAgentSource],
+            isVerbose: true,
+        });
+
+        return agent;
+    }, [agentSource, setAgentSource, apiKey]);
+
+    const llmTools = useMemo(() => {
+        const llmTools = agent.getLlmExecutionTools();
+        return llmTools;
+    }, [agent]);
+
+    return (
+        <div className="min-h-screen relative">
+            {/* Floating API Key Configuration */}
+            <div className={`fixed top-24 right-4 z-50 ${isApiKeySectionCollapsed ? '' : 'min-w-[400px]'}`}>
+                {isApiKeySectionCollapsed ? (
+                    // Collapsed state - small corner button
+                    <button
+                        onClick={() => setIsApiKeySectionCollapsed(false)}
+                        className="bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-full p-2 shadow-lg transition-all flex items-center gap-1"
+                        title="Configure OpenAI API Key"
+                    >
+                        <span className="text-sm">🔑</span>
+                    </button>
+                ) : (
+                    // Expanded state - full configuration panel
+                    <div className="bg-white border border-gray-300 rounded-lg shadow-lg">
+                        <div className="flex items-center justify-between p-3 bg-gray-100 rounded-t-lg border-b border-gray-300">
+                            <span className="font-medium text-sm">OpenAI API Key</span>
+                            <button
+                                onClick={() => setIsApiKeySectionCollapsed(true)}
+                                className="text-gray-600 hover:text-gray-800 text-lg leading-none"
+                                title="Collapse"
+                            >
+                                ✕
+                            </button>
+                        </div>
+                        <div className="p-3">
+                            <label className="flex items-center gap-2">
+                                <span className="text-sm font-medium whitespace-nowrap">API Key:</span>
+                                <input
+                                    type={isApiKeyVisible ? 'text' : 'password'}
+                                    value={apiKey}
+                                    onChange={(e) => setApiKey(e.target.value)}
+                                    placeholder="sk-proj-..."
+                                    className="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                />
+                                <button
+                                    type="button"
+                                    onClick={() => setIsApiKeyVisible(!isApiKeyVisible)}
+                                    className="px-2 py-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors text-sm"
+                                    title={isApiKeyVisible ? 'Hide API key' : 'Show API key'}
+                                >
+                                    {isApiKeyVisible ? '🙈' : '👁️'}
+                                </button>
+                            </label>
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            <ResizablePanelsAuto name="two-editors">
+                <BookEditor
+                    className="w-full h-full"
+                    height={null}
+                    value={agentSource}
+                    onChange={setAgentSource}
+                    // className={styles.BookEditor}
+                    isVerbose={false}
+                    isBorderRadiusDisabled
+                    onFileUpload={(file) => {
+                        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`}
+                />
+            </ResizablePanelsAuto>
+        </div>
+    );
+}
+
+/**
+ * TODO: !!!! Make self-learning book createAgentLlmExecutionTools, use bidirectional agentSource
+ * TODO: [🚗] Components and pages here should be just tiny UI wraper around proper agent logic and conponents
+ */

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

@@ -0,0 +1,18 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const SelfLearningBook = dynamic(() => import('./SelfLearningBook').then((module) => module.SelfLearningBook), {
+    ssr: false,
+});
+
+export default function SelfLearningBookPage() {
+    return <SelfLearningBook />;
+}
+
+/**
+ * TODO: !!! Private / public / open agents
+ * TODO: !!! Allow http://localhost:4440/agents/agent-123.book to download the agent book file
+ * TODO: !!! BOOK_MIME_TYPE in config
+ * TODO: [🚗] Components and pages here should be just tiny UI wraper around proper agent logic and conponents
+ */

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

@@ -0,0 +1,160 @@
+'use server';
+
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { PromptbookQrCode } from '@promptbook-local/components';
+// import { BookEditor } from '@promptbook-local/components';
+import { parseAgentSource } from '@promptbook-local/core';
+import { headers } from 'next/headers';
+import { $sideEffect } from '../../../../../../src/utils/organization/$sideEffect';
+import { AgentUrlCopy } from './AgentUrlCopy';
+// import { Agent } from '@promptbook-local/core';
+// import { RemoteLlmExecutionTools } from '@promptbook-local/remote-client';
+// import { OpenAiAssistantExecutionTools } from '@promptbook-local/openai';
+
+export default async function AgentPage({ params }: { params: Promise<{ agentName: string }> }) {
+    // const [apiKey, setApiKey] = useStateInLocalStorage<string>('openai-apiKey', () => '');
+    // const [isApiKeyVisible, setIsApiKeyVisible] = useState(false);
+    // const [isApiKeySectionCollapsed, setIsApiKeySectionCollapsed] = useState(!!apiKey);
+
+    $sideEffect(headers());
+
+    const { agentName } = await params;
+    const collection = await $provideAgentCollectionForServer();
+    const agentSourceSubject = await collection.getAgentSource(decodeURIComponent(agentName));
+    const agentSource = agentSourceSubject.getValue();
+    const agentProfile = parseAgentSource(agentSource);
+
+    // Build agent page URL for QR and copy
+    const pageUrl = `https://s6.ptbk.io/agents/${encodeURIComponent(agentName)}`;
+    // <- TODO: !!! Better
+
+    // Extract brand color from meta
+    const brandColor = agentProfile.meta.color || '#3b82f6'; // Default to blue-600
+
+    // Mock agent actions
+    const agentActions = ['Emails', 'Web', 'Documents', 'Browser', 'WhatsApp', 'Coding'];
+
+    // Render agent profile fields
+    const renderProfileFields = () => {
+        const renderValue = (value: unknown): React.ReactNode => {
+            if (value === null || value === undefined) {
+                return <span className="text-gray-400 italic">Not specified</span>;
+            }
+            if (typeof value === 'object' && !Array.isArray(value)) {
+                const objValue = value as Record<string, unknown>;
+                return (
+                    <div className="space-y-1 pl-3 border-l-2 border-gray-200">
+                        {Object.entries(objValue).map(([subKey, subValue]) => (
+                            <div key={subKey} className="flex gap-2">
+                                <span className="text-xs text-gray-600 font-medium">{subKey}:</span>
+                                <span className="text-sm text-gray-700">{String(subValue)}</span>
+                            </div>
+                        ))}
+                    </div>
+                );
+            }
+            if (Array.isArray(value)) {
+                return (
+                    <ul className="list-disc list-inside space-y-0.5">
+                        {value.map((item, idx) => (
+                            <li key={idx} className="text-sm text-gray-700">
+                                {String(item)}
+                            </li>
+                        ))}
+                    </ul>
+                );
+            }
+            return <span className="text-base text-gray-800 break-words">{String(value)}</span>;
+        };
+
+        return (
+            <div className="space-y-4">
+                {Object.entries(agentProfile).map(([key, value]) => (
+                    <div key={key} className="flex flex-col gap-1">
+                        <span className="text-xs text-gray-500 font-semibold uppercase tracking-wide">{key}</span>
+                        {renderValue(value)}
+                    </div>
+                ))}
+            </div>
+        );
+    };
+
+    return (
+        <div
+            className="w-full min-h-screen bg-gray-50 py-10 px-4 flex items-center justify-center"
+            style={{ backgroundColor: brandColor }}
+        >
+            <div className="max-w-5xl w-full bg-white rounded-xl shadow-lg p-8 flex flex-col md:flex-row gap-8">
+                {/* Left column: Profile info */}
+                <div className="flex-1 flex flex-col gap-6">
+                    <div className="flex items-center gap-4">
+                        {agentProfile.meta.image && (
+                            // eslint-disable-next-line @next/next/no-img-element
+                            <img
+                                src={agentProfile.meta.image as string}
+                                alt={agentProfile.agentName || 'Agent'}
+                                width={64}
+                                height={64}
+                                className="rounded-full object-cover border-2"
+                                style={{ borderColor: brandColor }}
+                            />
+                        )}
+                        <div className="flex-1">
+                            <h1 className="text-3xl font-bold text-gray-900">{agentProfile.agentName}</h1>
+                            <span
+                                className="inline-block mt-1 px-2 py-1 rounded text-xs font-semibold text-white"
+                                style={{ backgroundColor: brandColor }}
+                            >
+                                Agent
+                            </span>
+                        </div>
+                    </div>
+                    {renderProfileFields()}
+                    <div className="flex flex-col gap-2">
+                        <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide">Actions</h2>
+                        <div className="flex flex-wrap gap-2">
+                            {agentActions.map((action) => (
+                                <span
+                                    key={action}
+                                    className="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-xs font-medium border border-gray-200"
+                                >
+                                    {action}
+                                </span>
+                            ))}
+                        </div>
+                    </div>
+                    <div className="flex gap-4 mt-6">
+                        <a
+                            href={`${pageUrl}/chat`}
+                            // <- !!!! Can I append path like this on current browser URL in href?
+                            className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded shadow font-semibold transition"
+                        >
+                            💬 Chat
+                        </a>
+                        <a
+                            href={`${pageUrl}/book`}
+                            // <- !!!! Can I append path like this on current browser URL in href?
+                            className="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded shadow font-semibold transition"
+                        >
+                            ✏️ Edit Agent Book
+                        </a>
+                    </div>
+                </div>
+                {/* Right column: QR, source, copy */}
+                <div className="flex flex-col items-center gap-6 min-w-[260px]">
+                    <div className="bg-gray-100 rounded-lg p-4 flex flex-col items-center">
+                        <PromptbookQrCode value={pageUrl} />
+                        <span className="mt-2 text-xs text-gray-500">Scan to open agent page</span>
+                    </div>
+                    <AgentUrlCopy url={pageUrl} />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+/**
+ * TODO: !!! Make this page look nice - 🃏
+ * TODO: !!! Show usage of LLM
+ * TODO: [🚗] Components and pages here should be just tiny UI wraper around proper agent logic and conponents
+ */

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

@@ -0,0 +1,32 @@
+import { createOpenAiExecutionTools } from '@promptbook-local/openai';
+
+export async function GET(request: Request) {
+    const { searchParams } = new URL(request.url);
+    const message = searchParams.get('message') || 'Hello, who are you?';
+
+    const llmTools = createOpenAiExecutionTools({
+        apiKey: process.env.OPENAI_API_KEY,
+    });
+
+    const response = await llmTools.callChatModel({
+        title: 'Test Chat Call',
+        parameters: {},
+        modelRequirements: {
+            modelVariant: 'CHAT',
+            modelName: 'gpt-3.5-turbo',
+        },
+        content: message,
+    });
+
+    /*
+    return new Response(JSON.stringify(response, null, 4), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' },
+    });
+    */
+
+    return new Response(response.content, {
+        status: 200,
+        headers: { 'Content-Type': 'text/plain' },
+    });
+}

package/apps/agents-server/src/app/api/chat-streaming/route.ts

@@ -0,0 +1,44 @@
+import { OpenAI } from 'openai';
+import { forTime } from 'waitasecond';
+
+export async function GET(request: Request) {
+    const { searchParams } = new URL(request.url);
+    const message = searchParams.get('message') || 'Hello, who are you?';
+
+    const openaiClient = new OpenAI({
+        apiKey: process.env.OPENAI_API_KEY,
+    });
+
+    // Enable streaming from OpenAI
+    const stream = await openaiClient.chat.completions.create({
+        model: 'gpt-3.5-turbo',
+        messages: [
+            { role: 'system', content: 'You are a helpful assistant.' },
+            { role: 'user', content: message },
+        ],
+        stream: true,
+    });
+
+    // Create a ReadableStream to send chunks to the client as they arrive
+    const readableStream = new ReadableStream({
+        async start(controller) {
+            for await (const chunk of stream) {
+                // Each chunk contains a delta message
+                const content = chunk.choices[0]?.delta?.content;
+                if (content) {
+                    controller.enqueue(new TextEncoder().encode(content));
+                }
+            }
+
+            await forTime(100);
+            controller.enqueue(new TextEncoder().encode('\n\n[DONE]'));
+
+            controller.close();
+        },
+    });
+
+    return new Response(readableStream, {
+        status: 200,
+        headers: { 'Content-Type': 'text/plain' },
+    });
+}

package/apps/agents-server/src/app/api/long-running-task/route.ts

@@ -0,0 +1,7 @@
+import { NextResponse } from 'next/server';
+import { getLongRunningTask } from '../../../deamons/longRunningTask';
+
+export function GET() {
+    const task = getLongRunningTask();
+    return NextResponse.json(task);
+}

package/apps/agents-server/src/app/api/long-streaming/route.ts

@@ -0,0 +1,20 @@
+import { forTime } from 'waitasecond';
+import { just } from '../../../../../../src/utils/organization/just';
+
+export async function GET() {
+    const readableStream = new ReadableStream({
+        async start(controller) {
+            while (just(true)) {
+                await forTime(100);
+                controller.enqueue(new TextEncoder().encode('x'));
+            }
+
+            controller.close();
+        },
+    });
+
+    return new Response(readableStream, {
+        status: 200,
+        headers: { 'Content-Type': 'text/plain' },
+    });
+}