@promptbook/cli 0.103.0 → 0.104.0-1

package/README.md

@@ -27,6 +27,10 @@ Turn your company's scattered knowledge into AI ready Books
 
 
 
+<blockquote style="color: #ff8811">
+    <b>⚠ Warning:</b> This is a pre-release version of the library. It is not yet ready for production use. Please look at <a href="https://www.npmjs.com/package/@promptbook/core?activeTab=versions">latest stable release</a>.
+</blockquote>
+
 ## 📦 Package `@promptbook/cli`
 
 - Promptbooks are [divided into several](#-packages) packages, all are published from [single monorepo](https://github.com/webgptorg/promptbook).

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

@@ -0,0 +1,26 @@
+'use client';
+
+import { CodePreview } from '../../../../../../_common/components/CodePreview/CodePreview';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../../../../../_common/components/Tabs/Tabs';
+
+type WebsiteIntegrationTabsProps = {
+    reactCode: string;
+    htmlCode: string;
+};
+
+export function WebsiteIntegrationTabs({ reactCode, htmlCode }: WebsiteIntegrationTabsProps) {
+    return (
+        <Tabs defaultValue="react" className="w-full">
+            <TabsList>
+                <TabsTrigger value="react">React</TabsTrigger>
+                <TabsTrigger value="html">HTML</TabsTrigger>
+            </TabsList>
+            <TabsContent value="react">
+                <CodePreview code={reactCode} language="typescript" />
+            </TabsContent>
+            <TabsContent value="html">
+                <CodePreview code={htmlCode} language="xml" />
+            </TabsContent>
+        </Tabs>
+    );
+}

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

@@ -14,11 +14,12 @@ import { Color } from '../../../../../../../src/utils/color/Color';
 import { withAlpha } from '../../../../../../../src/utils/color/operators/withAlpha';
 import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
 import { CodePreview } from '../../../../../../_common/components/CodePreview/CodePreview';
+import { getAgentName, getAgentProfile } from '../_utils';
 import { getAgentLinks } from '../agentLinks';
 import { CopyField } from '../CopyField';
-import { getAgentName, getAgentProfile } from '../_utils';
 import { generateAgentMetadata } from '../generateAgentMetadata';
 import { SdkCodeTabs } from './SdkCodeTabs';
+import { WebsiteIntegrationTabs } from './WebsiteIntegrationTabs';
 
 export const generateMetadata = generateAgentMetadata;
 
@@ -71,13 +72,13 @@ export default async function AgentIntegrationPage({ params }: { params: Promise
 
     // Website Integration Code
     const { fullname, color, image, ...restMeta } = agentProfile.meta;
-    const websiteIntegrationCode = spaceTrim(
+    const websiteIntegrationReactCode = spaceTrim(
         (block) => `
-            import { PromptbookAgent } from '@promptbook/components';
+            import { PromptbookAgentIntegration } from '@promptbook/components';
 
             export function YourComponent() {
                 return(
-                    <PromptbookAgent
+                    <PromptbookAgentIntegration
                         agentUrl="${baseUrl}"
                         meta={${block(JSON.stringify({ fullname, color, image, ...restMeta }, null, 4))}}
                     />
@@ -86,6 +87,19 @@ export default async function AgentIntegrationPage({ params }: { params: Promise
         `,
     );
 
+    // HTML Integration Code - use single quotes for meta attribute to allow JSON with double quotes inside
+    const metaJsonString = JSON.stringify({ fullname, color, image, ...restMeta }, null, 4);
+    const websiteIntegrationHtmlCode = spaceTrim(
+        (block) => `
+            <script src="${publicUrl.href}api/embed.js" async defer></script>
+
+            <promptbook-agent-integration
+                agent-url="${baseUrl}"
+                meta='${block(metaJsonString)}'
+            />
+        `,
+    );
+
     // OpenAI Compatible Curl
     const curlCode = spaceTrim(`
         curl ${agentApiBase}/api/openai/v1/chat/completions \\
@@ -214,7 +228,10 @@ export default async function AgentIntegrationPage({ params }: { params: Promise
                                 </p>
                             </div>
                         </div>
-                        <CodePreview code={websiteIntegrationCode} language="typescript" />
+                        <WebsiteIntegrationTabs
+                            reactCode={websiteIntegrationReactCode}
+                            htmlCode={websiteIntegrationHtmlCode}
+                        />
                     </div>
 
                     {/* OpenAI API Compatible Endpoint */}

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

@@ -7,8 +7,9 @@ import { parseAgentSource } from '@promptbook-local/core';
 import { headers } from 'next/headers';
 import spaceTrim from 'spacetrim';
 import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
-import { CodePreview } from '../../../../../../_common/components/CodePreview/CodePreview';
+import { just } from '../../../../../../../src/utils/organization/just';
 import { generateAgentMetadata } from '../generateAgentMetadata';
+import { WebsiteIntegrationTabs } from '../integration/WebsiteIntegrationTabs';
 
 export const generateMetadata = generateAgentMetadata;
 
@@ -24,20 +25,31 @@ export default async function WebsiteIntegrationAgentPage({ params }: { params:
     const { publicUrl } = await $provideServer();
     const agentUrl = `${publicUrl.href}agents/${encodeURIComponent(agentName)}`;
 
-    const code = spaceTrim(
+    const reactCode = spaceTrim(
         (block) => `
-
-            import { PromptbookAgent } from '@promptbook/components';
+            import { PromptbookAgentIntegration } from '@promptbook/components';
 
             export function YourComponent() {
                 return(
-                    <PromptbookAgent
+                    <PromptbookAgentIntegration
                         agentUrl="${agentUrl}"
                         meta={${block(JSON.stringify({ fullname, color, image, ...restMeta }, null, 4))}}
                     />
                 );
             }
-            
+        `,
+    );
+
+    // HTML Integration Code - use single quotes for meta attribute to allow JSON with double quotes inside
+    const metaJsonString = JSON.stringify({ fullname, color, image, ...restMeta }, null, 4);
+    const htmlCode = spaceTrim(
+        (block) => `
+            <script src="${publicUrl.href}api/embed.js" async defer></script>
+
+            <promptbook-agent-integration
+                agent-url="${agentUrl}"
+                meta='${block(metaJsonString)}'
+            />
         `,
     );
 
@@ -49,17 +61,24 @@ export default async function WebsiteIntegrationAgentPage({ params }: { params:
                 React application using the <code>{'<PromptbookAgent />'}</code> component.
             </p>
 
-            <CodePreview code={code} />
-            <PromptbookAgentIntegration
-                formfactor="profile"
-                agentUrl={agentUrl}
-                meta={meta}
-                style={{
-                    width: '400px',
-                    height: '600px',
-                    // outline: `2px solid red`
-                }}
-            />
+            <WebsiteIntegrationTabs reactCode={reactCode} htmlCode={htmlCode} />
+            {just(false) && (
+                <PromptbookAgentIntegration
+                    // formfactor="profile"
+                    agentUrl={agentUrl}
+                    meta={meta}
+                    style={
+                        {
+                            // width: '400px',
+                            // height: '600px',
+                            // outline: `2px solid red`
+                        }
+                    }
+                />
+            )}
+            {htmlCode}
+            {just(true) && <div dangerouslySetInnerHTML={{ __html: htmlCode }} />}
+            {just(true) && <div dangerouslySetInnerHTML={{ __html: `<h1>Test</h1>` }} />}
         </main>
     );
 }

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

@@ -1,3 +1,4 @@
+import { spaceTrim } from '@promptbook-local/utils';
 import { NextRequest, NextResponse } from 'next/server';
 
 export async function GET(request: NextRequest) {
@@ -5,84 +6,103 @@ export async function GET(request: NextRequest) {
     const host = request.nextUrl.host;
     const baseUrl = `${protocol}//${host}`;
 
-    const script = `
-(function() {
-    if (customElements.get('promptbook-agent')) {
-        return;
-    }
+    const script = spaceTrim(`
+        console.info('[🔌] Promptbook integration script from ${baseUrl}');
 
-    class PromptbookAgentElement extends HTMLElement {
-        constructor() {
-            super();
-            this.iframe = null;
-        }
+        (function() {
+            if (customElements.get('promptbook-agent-integration')) {
+                return;
+            }
 
-        static get observedAttributes() {
-            return ['agent-url'];
-        }
+            class PromptbookAgentIntegrationElement extends HTMLElement {
+                constructor() {
+                    super();
+                    console.info('[🔌] Initializing <promptbook-agent-integration/>',this);
+                    this.iframe = null;
+                }
 
-        connectedCallback() {
-            this.render();
-            window.addEventListener('message', this.handleMessage.bind(this));
-        }
+                static get observedAttributes() {
+                    return ['agent-url', 'meta'];
+                }
 
-        disconnectedCallback() {
-            window.removeEventListener('message', this.handleMessage.bind(this));
-        }
+                connectedCallback() {
+                    this.render();
+                    window.addEventListener('message', this.handleMessage.bind(this));
+                }
 
-        attributeChangedCallback(name, oldValue, newValue) {
-            if (name === 'agent-url' && oldValue !== newValue) {
-                this.render();
-            }
-        }
+                disconnectedCallback() {
+                    window.removeEventListener('message', this.handleMessage.bind(this));
+                }
 
-        handleMessage(event) {
-            if (event.data && event.data.type === 'PROMPTBOOK_AGENT_RESIZE') {
-                if (event.data.isOpen) {
-                    this.iframe.style.width = '450px';
-                    this.iframe.style.height = '650px';
-                    this.iframe.style.maxHeight = '90vh';
-                    this.iframe.style.maxWidth = '90vw';
-                    this.iframe.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
-                    this.iframe.style.borderRadius = '12px';
-                } else {
-                    this.iframe.style.width = '60px';
-                    this.iframe.style.height = '60px';
-                    this.iframe.style.boxShadow = 'none';
-                    this.iframe.style.borderRadius = '0';
+                attributeChangedCallback(name, oldValue, newValue) {
+                    if ((name === 'agent-url' || name === 'meta') && oldValue !== newValue) {
+                        this.render();
+                    }
                 }
-            }
-        }
 
-        render() {
-            const agentUrl = this.getAttribute('agent-url');
-            if (!agentUrl) return;
+                handleMessage(event) {
+                    if (event.data && event.data.type === 'PROMPTBOOK_AGENT_RESIZE') {
+                        if (event.data.isOpen) {
+                            // Match PromptbookAgentSeamlessIntegration.module.css dimensions
+                            // Window is 380x600 + 20px padding on each side
+                            this.iframe.style.width = '420px';
+                            this.iframe.style.height = '640px';
+                            this.iframe.style.maxHeight = 'calc(80vh + 40px)';
+                            this.iframe.style.maxWidth = 'calc(100vw - 20px)';
+                        } else {
+                            // Closed state - button area with padding and shadow space
+                            // Button is ~140px wide + 20px right margin + shadow space
+                            this.iframe.style.width = '180px';
+                            this.iframe.style.height = '100px';
+                            this.iframe.style.maxHeight = 'none';
+                            this.iframe.style.maxWidth = 'none';
+                        }
+                    }
+                }
 
-            if (!this.iframe) {
-                this.attachShadow({ mode: 'open' });
-                this.iframe = document.createElement('iframe');
-                this.iframe.style.border = 'none';
-                this.iframe.style.position = 'fixed';
-                this.iframe.style.bottom = '20px';
-                this.iframe.style.right = '20px';
-                this.iframe.style.width = '60px';
-                this.iframe.style.height = '60px';
-                this.iframe.style.zIndex = '2147483647'; // Max z-index
-                this.iframe.style.transition = 'width 0.3s ease, height 0.3s ease';
-                this.iframe.style.backgroundColor = 'transparent';
-                this.iframe.setAttribute('allow', 'microphone'); // Allow microphone if needed for voice
-                this.shadowRoot.appendChild(this.iframe);
-            }
+                render() {
+                    const agentUrl = this.getAttribute('agent-url');
+                    if (!agentUrl) return;
 
-            // Construct embed URL pointing to the Next.js page we created
-            const embedUrl = '${baseUrl}/embed?agentUrl=' + encodeURIComponent(agentUrl);
-            this.iframe.src = embedUrl;
-        }
-    }
+                    if (!this.iframe) {
+                        this.attachShadow({ mode: 'open' });
+                        this.iframe = document.createElement('iframe');
+                        this.iframe.style.border = 'none';
+                        this.iframe.style.position = 'fixed';
+                        this.iframe.style.bottom = '0';
+                        this.iframe.style.right = '0';
+                        // Initial size for the closed button state (with padding and shadow space)
+                        this.iframe.style.width = '180px';
+                        this.iframe.style.height = '100px';
+                        this.iframe.style.zIndex = '2147483647'; // Max z-index
+                        this.iframe.style.transition = 'width 0.3s ease, height 0.3s ease';
+                        this.iframe.style.backgroundColor = 'transparent';
+                        this.iframe.setAttribute('allow', 'microphone'); // Allow microphone if needed for voice
+                        this.shadowRoot.appendChild(this.iframe);
+                    }
+
+                    // Construct embed URL pointing to the Next.js page we created
+                    let embedUrl = '${baseUrl}/embed?agentUrl=' + encodeURIComponent(agentUrl);
+                    
+                    // Add meta parameter if provided
+                    const metaAttr = this.getAttribute('meta');
+                    if (metaAttr) {
+                        try {
+                            // Validate that it's valid JSON
+                            JSON.parse(metaAttr);
+                            embedUrl += '&meta=' + encodeURIComponent(metaAttr);
+                        } catch (e) {
+                            console.error('[🔌] Invalid meta JSON:', e);
+                        }
+                    }
+                    
+                    this.iframe.src = embedUrl;
+                }
+            }
 
-    customElements.define('promptbook-agent', PromptbookAgentElement);
-})();
-    `;
+            customElements.define('promptbook-agent-integration', PromptbookAgentIntegrationElement);
+        })();
+    `);
 
     return new NextResponse(script, {
         headers: {

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

@@ -0,0 +1,31 @@
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+    title: 'Promptbook Agent Embed',
+    description: 'Embedded agent chat widget',
+};
+
+/**
+ * Minimal layout for the embed page - no header, footer, or other UI elements
+ * This layout is completely transparent and only renders the chat widget
+ */
+export default function EmbedLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <html lang="en">
+            <body
+                style={{
+                    margin: 0,
+                    padding: 0,
+                    background: 'transparent',
+                    overflow: 'hidden',
+                }}
+            >
+                {children}
+            </body>
+        </html>
+    );
+}

package/apps/agents-server/src/app/embed/page.tsx

@@ -2,23 +2,36 @@
 
 import { PromptbookAgentIntegration } from '@promptbook-local/components';
 import { useSearchParams } from 'next/navigation';
+import { useMemo } from 'react';
 
 export default function EmbedPage() {
     const searchParams = useSearchParams();
     const agentUrl = searchParams.get('agentUrl');
+    const metaParam = searchParams.get('meta');
+
+    const meta = useMemo(() => {
+        if (!metaParam) {
+            return undefined;
+        }
+        try {
+            return JSON.parse(metaParam);
+        } catch (e) {
+            console.error('[🔌] Failed to parse meta parameter:', e);
+            return undefined;
+        }
+    }, [metaParam]);
 
     if (!agentUrl) {
-        return <div className="text-red-500">Missing agentUrl parameter</div>;
+        return <div style={{ color: 'red' }}>Missing agentUrl parameter</div>;
     }
 
     return (
-        <div className="w-full h-full bg-transparent">
-            <PromptbookAgentIntegration
-                agentUrl={agentUrl}
-                onOpenChange={(isOpen) => {
-                    window.parent.postMessage({ type: 'PROMPTBOOK_AGENT_RESIZE', isOpen }, '*');
-                }}
-            />
-        </div>
+        <PromptbookAgentIntegration
+            agentUrl={agentUrl}
+            meta={meta}
+            onOpenChange={(isOpen) => {
+                window.parent.postMessage({ type: 'PROMPTBOOK_AGENT_RESIZE', isOpen }, '*');
+            }}
+        />
     );
 }

package/esm/index.es.js

@@ -47,7 +47,7 @@ const BOOK_LANGUAGE_VERSION = '2.0.0';
  * @generated
  * @see https://github.com/webgptorg/promptbook
  */
-const PROMPTBOOK_ENGINE_VERSION = '0.103.0';
+const PROMPTBOOK_ENGINE_VERSION = '0.104.0-1';
 /**
  * TODO: string_promptbook_version should be constrained to the all versions of Promptbook engine
  * Note: [💞] Ignore a discrepancy between file name and entity name