@promptbook/cli 0.103.0-44 → 0.103.0-45

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,155 @@
+'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)}`;
+
+    // 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="#"
+                            className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded shadow font-semibold transition"
+                        >
+                            💬 Chat
+                        </a>
+                        <a
+                            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: [🚗] 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' },
+    });
+}

package/apps/agents-server/src/app/globals.css

@@ -0,0 +1,113 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+:root {
+    --background: #ffffff;
+    --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background: #0a0a0a;
+        --foreground: #ededed;
+    }
+}
+
+body {
+    background: var(--background);
+    color: var(--foreground);
+    font-family: 'Barlow Condensed', Arial, Helvetica, sans-serif;
+}
+
+/* Custom utilities */
+.line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+/* Mermaid diagram styling */
+.mermaid-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.mermaid-container svg {
+    max-width: 100%;
+    height: auto;
+}
+
+/* Code block styling */
+pre code {
+    font-family: var(--font-mono), 'Courier New', monospace;
+}
+
+/* Smooth transitions */
+* {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
+        transform, filter, backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+
+/* Focus styles */
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+textarea:focus-visible {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f5f9;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+}
+
+/* Loading animation */
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.animate-spin {
+    animation: spin 1s linear infinite;
+}
+
+/* Gradient backgrounds */
+.bg-gradient-to-br {
+    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+}
+
+/* Component preview container */
+.component-preview {
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    border: 1px solid #e2e8f0;
+}

package/apps/agents-server/src/app/layout.tsx

@@ -0,0 +1,72 @@
+import faviconLogoImage from '@/public/favicon.ico';
+import type { Metadata } from 'next';
+import { Barlow_Condensed } from 'next/font/google';
+import './globals.css';
+
+const barlowCondensed = Barlow_Condensed({
+    subsets: ['latin'],
+    weight: ['300', '400', '500', '600', '700'],
+});
+
+export const metadata: Metadata = {
+    title: 'Promptbook agents server',
+    description: '@@@',
+    keywords: ['@@@'],
+    authors: [{ name: 'Promptbook Team' }],
+    openGraph: {
+        title: 'Promptbook agents server',
+        description: '@@@',
+        type: 'website',
+        images: [
+            /*
+            TODO:
+            {
+                url: 'https://www.ptbk.io/design',
+                width: 1200,
+                height: 630,
+                alt: 'Promptbook agents server',
+            },
+            */
+        ],
+    },
+    twitter: {
+        card: 'summary_large_image',
+        title: 'Promptbook agents server',
+        description: '@@@',
+        // TODO: images: ['https://www.ptbk.io/design'],
+    },
+};
+
+export default function RootLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <html lang="en">
+            <head>
+                {/* Favicon for light mode */}
+                {/*
+                <link
+                    rel="icon"
+                    href="https://www.ptbk.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo-blue-transparent-256.493b7e49.png&w=64&q=75"
+                    media="(prefers-color-scheme: light)"
+                    type="image/svg+xml"
+                />
+                */}
+                {/* Favicon for dark mode */}
+                {/*
+                <link
+                    rel="icon"
+                    href="https://www.ptbk.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo-blue-transparent-256.493b7e49.png&w=64&q=75"
+                    media="(prefers-color-scheme: dark)"
+                    type="image/svg+xml"
+                />
+                */}
+                {/* Default favicon as a fallback */}
+                <link rel="icon" href={faviconLogoImage.src} type="image/x-icon" />
+            </head>
+            <body className={`${barlowCondensed.className} antialiased bg-white text-gray-900`}>{children}</body>
+        </html>
+    );
+}