@promptbook/cli 0.103.0-48 → 0.103.0-50

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

@@ -1,15 +1,34 @@
+import { $getTableName } from '@/src/database/$getTableName';
+import { $provideSupabaseForServer } from '@/src/database/$provideSupabaseForServer';
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
 import { $provideOpenAiAssistantExecutionToolsForServer } from '@/src/tools/$provideOpenAiAssistantExecutionToolsForServer';
-import { Agent } from '@promptbook-local/core';
-import { serializeError } from '@promptbook-local/utils';
+import { Agent, computeAgentHash, PROMPTBOOK_ENGINE_VERSION } from '@promptbook-local/core';
+import { computeHash, serializeError } from '@promptbook-local/utils';
 import { assertsError } from '../../../../../../../../src/errors/assertsError';
 
-export async function GET(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
+/**
+ * Allow long-running streams: set to platform maximum (seconds)
+ */
+export const maxDuration = 300;
+
+export async function OPTIONS(request: Request) {
+    return new Response(null, {
+        status: 200,
+        headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type',
+        },
+    });
+}
+
+export async function POST(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
     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
+
+    const body = await request.json();
+    const { message = 'Tell me more about yourself.', thread } = body;
+    //      <- TODO: [🐱‍🚀] To configuration DEFAULT_INITIAL_HIDDEN_MESSAGE
 
     try {
         const collection = await $provideAgentCollectionForServer();
@@ -17,7 +36,7 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
         const openAiAssistantExecutionTools = await $provideOpenAiAssistantExecutionToolsForServer();
         const agentSource = await collection.getAgentSource(agentName);
         const agent = new Agent({
-            isVerbose: true, // <- TODO: !!! From environment variable
+            isVerbose: true, // <- TODO: [🐱‍🚀] From environment variable
             executionTools: {
                 // [▶️] ...executionTools,
                 llm: openAiAssistantExecutionTools, // Note: Providing the OpenAI Assistant LLM tools to the Agent to be able to create its own Assistants GPTs
@@ -25,20 +44,103 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
             agentSource,
         });
 
-        const response = await agent.callChatModel!({
-            title: `Chat with agent ${agentName /* <- TODO: [🕛] There should be `agentFullname` not `agentName` */}`,
-            parameters: {},
-            modelRequirements: {
-                modelVariant: 'CHAT',
-            },
+        const agentHash = computeAgentHash(agentSource);
+        const userAgent = request.headers.get('user-agent');
+        const ip =
+            request.headers.get('x-forwarded-for') ||
+            request.headers.get('x-real-ip') ||
+            request.headers.get('x-client-ip');
+
+        // Note: Capture language and platform information
+        const language = request.headers.get('accept-language');
+        // Simple platform extraction from userAgent parentheses content (e.g., Windows NT 10.0; Win64; x64)
+        const platform = userAgent ? userAgent.match(/\(([^)]+)\)/)?.[1] : undefined; // <- TODO: [🧠] Improve platform parsing
+
+        // Note: Identify the user message
+        const userMessageContent = {
+            role: 'USER',
             content: message,
+        };
+
+        // Record the user message
+        const supabase = $provideSupabaseForServer();
+        await supabase.from(await $getTableName('ChatHistory')).insert({
+            createdAt: new Date().toISOString(),
+            messageHash: computeHash(userMessageContent),
+            previousMessageHash: null, // <- TODO: [🧠] How to handle previous message hash?
+            agentName,
+            agentHash,
+            message: userMessageContent,
+            promptbookEngineVersion: PROMPTBOOK_ENGINE_VERSION,
+            url: request.url,
+            ip,
+            userAgent,
+            language,
+            platform,
         });
 
-        // TODO: [🐚] Implement streaming
+        const encoder = new TextEncoder();
+        const readableStream = new ReadableStream({
+            start(controller) {
+                agent.callChatModelStream!(
+                    {
+                        title: `Chat with agent ${
+                            agentName /* <- TODO: [🕛] There should be `agentFullname` not `agentName` */
+                        }`,
+                        parameters: {},
+                        modelRequirements: {
+                            modelVariant: 'CHAT',
+                        },
+                        content: message,
+                        thread,
+                    },
+                    (chunk) => {
+                        controller.enqueue(encoder.encode(chunk.content));
+                    },
+                )
+                    .then(async (response) => {
+                        // Note: Identify the agent message
+                        const agentMessageContent = {
+                            role: 'MODEL',
+                            content: response.content,
+                        };
 
-        return new Response(response.content, {
+                        // Record the agent message
+                        await supabase.from(await $getTableName('ChatHistory')).insert({
+                            createdAt: new Date().toISOString(),
+                            messageHash: computeHash(agentMessageContent),
+                            previousMessageHash: computeHash(userMessageContent),
+                            agentName,
+                            agentHash,
+                            message: agentMessageContent,
+                            promptbookEngineVersion: PROMPTBOOK_ENGINE_VERSION,
+                            url: request.url,
+                            ip,
+                            userAgent,
+                            language,
+                            platform,
+                        });
+
+                        // Note: [🐱‍🚀] Save the learned data
+                        const newAgentSource = agent.agentSource.value;
+                        if (newAgentSource !== agentSource) {
+                            await collection.updateAgentSource(agentName, newAgentSource);
+                        }
+
+                        controller.close();
+                    })
+                    .catch((error) => {
+                        controller.error(error);
+                    });
+            },
+        });
+
+        return new Response(readableStream, {
             status: 200,
-            headers: { 'Content-Type': 'text/markdown' },
+            headers: {
+                'Content-Type': 'text/markdown',
+                'Access-Control-Allow-Origin': '*', // <- Note: Allow embedding on other websites
+            },
         });
     } catch (error) {
         assertsError(error);
@@ -48,21 +150,15 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
         return new Response(
             JSON.stringify(
                 serializeError(error),
-                // <- TODO: !!! Rename `serializeError` to `errorToJson`
+                // <- TODO: [🐱‍🚀] Rename `serializeError` to `errorToJson`
                 null,
                 4,
-                // <- TODO: !!! Allow to configure pretty print for agent server
+                // <- TODO: [🐱‍🚀] Allow to configure pretty print for agent server
             ),
             {
-                status: 400, // <- TODO: !!! Make `errorToHttpStatusCode`
+                status: 400, // <- TODO: [🐱‍🚀] Make `errorToHttpStatusCode`
                 headers: { 'Content-Type': 'application/json' },
             },
         );
     }
 }
-
-
-/**
- * TODO: !!!!!! Record conversations to `ChatHistory`
- * TODO: !!!!!! Make api endpoint for feedback on agent responses `/apps/agents-server/src/app/agents/[agentName]/api/feedback/route.ts` and record to `ChatFeedback`
- */

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

@@ -0,0 +1,54 @@
+import { $provideSupabaseForServer } from '@/src/database/$provideSupabaseForServer';
+import { NextRequest, NextResponse } from 'next/server';
+import { PROMPTBOOK_ENGINE_VERSION } from '../../../../../../../../src/version';
+import { $getTableName } from '../../../../../database/$getTableName';
+
+type FeedbackRequest = {
+    agentHash: string;
+    rating?: string;
+    textRating?: string;
+    chatThread?: string;
+    userNote?: string;
+    expectedAnswer?: string;
+};
+
+export async function POST(request: NextRequest, { params }: { params: Promise<{ agentName: string }> }) {
+    try {
+        const { agentName } = await params;
+        const body = (await request.json()) as FeedbackRequest;
+        const { agentHash, rating, textRating, chatThread, userNote, expectedAnswer } = body;
+
+        if (!agentHash) {
+            return NextResponse.json({ message: 'Missing agentHash' }, { status: 400 });
+        }
+
+        const supabase = $provideSupabaseForServer();
+
+        const { error } = await supabase.from(await $getTableName('ChatFeedback')).insert({
+            createdAt: new Date().toISOString(),
+            agentName,
+            agentHash,
+            rating,
+            textRating,
+            chatThread,
+            userNote,
+            expectedAnswer,
+            promptbookEngineVersion: PROMPTBOOK_ENGINE_VERSION,
+            // Telemetry fields can be populated here if available in headers
+            // For now we leave them null or let Supabase handle default if any (though schema has them nullable)
+            url: request.headers.get('referer') || undefined,
+            userAgent: request.headers.get('user-agent') || undefined,
+            ip: request.headers.get('x-forwarded-for') || undefined,
+        });
+
+        if (error) {
+            console.error('Error inserting feedback:', error);
+            return NextResponse.json({ message: 'Failed to save feedback' }, { status: 500 });
+        }
+
+        return NextResponse.json({ message: 'Feedback saved' }, { status: 201 });
+    } catch (error) {
+        console.error('Unexpected error in feedback route:', error);
+        return NextResponse.json({ message: 'Internal server error' }, { status: 500 });
+    }
+}

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

@@ -17,10 +17,10 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
         return new Response(
             JSON.stringify(
                 modelRequirements,
-                // <- TODO: !!! Rename `serializeError` to `errorToJson`
+                // <- TODO: [🐱‍🚀] Rename `serializeError` to `errorToJson`
                 null,
                 4,
-                // <- TODO: !!! Allow to configure pretty print for agent server
+                // <- TODO: [🐱‍🚀] Allow to configure pretty print for agent server
             ),
             {
                 status: 200,
@@ -35,13 +35,13 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
         return new Response(
             JSON.stringify(
                 serializeError(error),
-                // <- TODO: !!! Rename `serializeError` to `errorToJson`
+                // <- TODO: [🐱‍🚀] Rename `serializeError` to `errorToJson`
                 null,
                 4,
-                // <- TODO: !!! Allow to configure pretty print for agent server
+                // <- TODO: [🐱‍🚀] Allow to configure pretty print for agent server
             ),
             {
-                status: 400, // <- TODO: !!! Make `errorToHttpStatusCode`
+                status: 400, // <- TODO: [🐱‍🚀] Make `errorToHttpStatusCode`
                 headers: { 'Content-Type': 'application/json' },
             },
         );
@@ -50,4 +50,4 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
 
 /**
  * TODO: [🍞] DRY - Make some common utility for API on one agent
- */
+ */

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

@@ -27,13 +27,13 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
         return new Response(
             JSON.stringify(
                 serializeError(error),
-                // <- TODO: !!! Rename `serializeError` to `errorToJson`
+                // <- TODO: [🐱‍🚀] Rename `serializeError` to `errorToJson`
                 null,
                 4,
-                // <- TODO: !!! Allow to configure pretty print for agent server
+                // <- TODO: [🐱‍🚀] Allow to configure pretty print for agent server
             ),
             {
-                status: 400, // <- TODO: !!! Make `errorToHttpStatusCode`
+                status: 400, // <- TODO: [🐱‍🚀] Make `errorToHttpStatusCode`
                 headers: { 'Content-Type': 'application/json' },
             },
         );

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

@@ -1,9 +1,21 @@
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
-import { parseAgentSource } from '@promptbook-local/core';
+import { computeAgentHash, 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 OPTIONS(request: Request) {
+    keepUnused(request);
+    return new Response(null, {
+        status: 200,
+        headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type',
+        },
+    });
+}
+
 export async function GET(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
     keepUnused(request /* <- Note: We dont need `request` parameter */);
     let { agentName } = await params;
@@ -13,18 +25,26 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
         const collection = await $provideAgentCollectionForServer();
         const agentSource = await collection.getAgentSource(agentName);
         const agentProfile = parseAgentSource(agentSource);
+        const agentHash = computeAgentHash(agentSource);
 
         return new Response(
             JSON.stringify(
-                agentProfile,
-                // <- TODO: !!! Rename `serializeError` to `errorToJson`
+                {
+                    ...agentProfile,
+                    agentHash,
+                    parameters: [], // <- TODO: [😰] Implement parameters
+                },
+                // <- TODO: [🐱‍🚀] Rename `serializeError` to `errorToJson`
                 null,
                 4,
-                // <- TODO: !!! Allow to configure pretty print for agent server
+                // <- TODO: [🐱‍🚀] Allow to configure pretty print for agent server
             ),
             {
                 status: 200,
-                headers: { 'Content-Type': 'application/json' },
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Access-Control-Allow-Origin': '*', // <- Note: Allow embedding on other websites
+                },
             },
         );
     } catch (error) {
@@ -35,20 +55,19 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
         return new Response(
             JSON.stringify(
                 serializeError(error),
-                // <- TODO: !!! Rename `serializeError` to `errorToJson`
+                // <- TODO: [🐱‍🚀] Rename `serializeError` to `errorToJson`
                 null,
                 4,
-                // <- TODO: !!! Allow to configure pretty print for agent server
+                // <- TODO: [🐱‍🚀] Allow to configure pretty print for agent server
             ),
             {
-                status: 400, // <- TODO: !!! Make `errorToHttpStatusCode`
+                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

@@ -9,7 +9,7 @@ type BookEditorWrapperProps = {
     initialAgentSource: string_book;
 };
 
-// TODO: !!!! Rename to BookEditorSavingWrapper
+// TODO: [🐱‍🚀] Rename to BookEditorSavingWrapper
 
 export function BookEditorWrapper({ agentName, initialAgentSource }: BookEditorWrapperProps) {
     const [agentSource, setAgentSource] = useState<string_book>(initialAgentSource);
@@ -126,15 +126,14 @@ export function BookEditorWrapper({ agentName, initialAgentSource }: BookEditorW
 
                     return shortFileUrl;
                 }}
-                // <- TODO: !!!! Create two-state solution for `<BookEditor onFileUpload={...} />`
             />
         </div>
     );
 }
 
 /**
+ * TODO: Prompt: Use `import { debounce } from '@promptbook-local/utils';` instead of custom debounce implementation
  * 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 error handling and retry logic
+ * TODO: [🐱‍🚀] Show save status indicator
  */

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

@@ -1,6 +1,8 @@
 'use server';
 
+import { ForbiddenPage } from '@/src/components/ForbiddenPage/ForbiddenPage';
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { isUserAdmin } from '@/src/utils/isUserAdmin';
 import { headers } from 'next/headers';
 import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
 import { BookEditorWrapper } from './BookEditorWrapper';
@@ -8,15 +10,20 @@ import { BookEditorWrapper } from './BookEditorWrapper';
 export default async function AgentBookPage({ params }: { params: Promise<{ agentName: string }> }) {
     $sideEffect(headers());
 
+    if (!(await isUserAdmin())) {
+        /* <- TODO: [👹] Here should be user permissions */
+        return <ForbiddenPage />;
+    }
+
     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`}>
+        <div className={`w-screen h-[calc(100vh-60px)]`}>
             <BookEditorWrapper agentName={agentName} initialAgentSource={agentSource} />
-        </main>
+        </div>
     );
 }
 

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

@@ -0,0 +1,23 @@
+'use client';
+
+import { ResizablePanelsAuto } from '@common/components/ResizablePanelsAuto/ResizablePanelsAuto';
+import { string_agent_url, string_book } from '@promptbook-local/types';
+import { BookEditorWrapper } from '../book/BookEditorWrapper';
+import { AgentChatWrapper } from '../AgentChatWrapper';
+
+type AgentBookAndChatProps = {
+    agentName: string;
+    initialAgentSource: string_book;
+    agentUrl: string_agent_url;
+};
+
+export function AgentBookAndChat(props: AgentBookAndChatProps) {
+    const { agentName, initialAgentSource, agentUrl } = props;
+
+    return (
+        <ResizablePanelsAuto name={`agent-book-and-chat-${agentName}`} className="w-full h-full">
+            <BookEditorWrapper agentName={agentName} initialAgentSource={initialAgentSource} />
+            <AgentChatWrapper agentUrl={agentUrl} />
+        </ResizablePanelsAuto>
+    );
+}

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

@@ -16,7 +16,7 @@ export function AgentBookAndChatComponent() {
 
     const [agentSource, setAgentSource] = useStateInLocalStorage<string_book>(
         'marigold-agentSource-1',
-        // TODO: !!! Uplad image to ptbk.io CDN
+        // TODO: [🐱‍🚀] Uplad image to ptbk.io CDN
         () => book`
             Marigold
 
@@ -53,7 +53,7 @@ export function AgentBookAndChatComponent() {
 
     const agent = useMemo(() => {
         /*/
-        // TODO: !!! Try working with `RemoteLlmExecutionTools`
+        // TODO: [🐱‍🚀] Try working with `RemoteLlmExecutionTools`
         const llm = new RemoteLlmExecutionTools({
             remoteServerUrl: 'https://promptbook.s5.ptbk.io/',
             identification: {
@@ -66,7 +66,7 @@ export function AgentBookAndChatComponent() {
         /**/
         const llm = new OpenAiAssistantExecutionTools({
             dangerouslyAllowBrowser: true,
-            isCreatingNewAssistantsAllowed: true, // <- TODO: !!! Test without whether warning is shown
+            isCreatingNewAssistantsAllowed: true, // <- TODO: [🐱‍🚀] Test without whether warning is shown
             apiKey,
             assistantId: 'asst_xI94Elk27nssnwAUkG2Cmok8', // <- TODO: [🧠] Make dynamic
             isVerbose: true,
@@ -155,6 +155,6 @@ export function AgentBookAndChatComponent() {
 }
 
 /**
- * TODO: !!!! Make self-learning book createAgentLlmExecutionTools, use bidirectional agentSource
+ * 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

@@ -1,21 +1,32 @@
-'use client';
+'use server';
 
-import dynamic from 'next/dynamic';
+import { ForbiddenPage } from '@/src/components/ForbiddenPage/ForbiddenPage';
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { isUserAdmin } from '@/src/utils/isUserAdmin';
+import { headers } from 'next/headers';
+import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
+import { generateAgentMetadata } from '../generateAgentMetadata';
+import { AgentBookAndChat } from './AgentBookAndChat';
 
-const SelfLearningBook = dynamic(
-    () => import('./AgentBookAndChatComponent').then((module) => module.AgentBookAndChatComponent),
-    {
-        ssr: false,
-    },
-);
+export const generateMetadata = generateAgentMetadata;
 
-export default function AgentBookAndChatPage() {
-    return <SelfLearningBook />;
-}
+export default async function AgentBookAndChatPage({ params }: { params: Promise<{ agentName: string }> }) {
+    $sideEffect(headers());
+
+    if (!(await isUserAdmin())) {
+        /* <- TODO: [👹] Here should be user permissions */
+        return <ForbiddenPage />;
+    }
 
-/**
- * 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
- */
+    let { agentName } = await params;
+    agentName = decodeURIComponent(agentName);
+    const collection = await $provideAgentCollectionForServer();
+    const agentSource = await collection.getAgentSource(agentName);
+    const agentUrl = `/agents/${agentName}`;
+
+    return (
+        <div className={`w-screen h-[calc(100vh-60px)]`}>
+            <AgentBookAndChat agentName={agentName} initialAgentSource={agentSource} agentUrl={agentUrl} />
+        </div>
+    );
+}

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

@@ -0,0 +1,21 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const SelfLearningBook = dynamic(
+    () => import('./AgentBookAndChatComponent').then((module) => module.AgentBookAndChatComponent),
+    {
+        ssr: false,
+    },
+);
+
+export default function AgentBookAndChatPage() {
+    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]/chat/AgentChatWrapper.tsx

@@ -3,14 +3,14 @@
 import { usePromise } from '@common/hooks/usePromise';
 import { AgentChat } from '@promptbook-local/components';
 import { RemoteAgent } from '@promptbook-local/core';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { string_agent_url } from '../../../../../../../src/types/typeAliases';
 
 type AgentChatWrapperProps = {
     agentUrl: string_agent_url;
 };
 
-// TODO: !!!! Rename to AgentChatSomethingWrapper
+// TODO: [🐱‍🚀] Rename to AgentChatSomethingWrapper
 
 export function AgentChatWrapper(props: AgentChatWrapperProps) {
     const { agentUrl } = props;
@@ -26,11 +26,41 @@ export function AgentChatWrapper(props: AgentChatWrapperProps) {
 
     const { value: agent } = usePromise(agentPromise, [agentPromise]);
 
+    const handleFeedback = useCallback(
+        async (feedback: {
+            rating: number;
+            textRating?: string;
+            chatThread?: string;
+            userNote?: string;
+            expectedAnswer?: string | null;
+        }) => {
+            if (!agent) {
+                return;
+            }
+
+            await fetch(`${agentUrl}/api/feedback`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    rating: feedback.rating.toString(),
+                    textRating: feedback.textRating,
+                    chatThread: feedback.chatThread,
+                    userNote: feedback.textRating, // Mapping textRating to userNote as well if needed, or just textRating
+                    expectedAnswer: feedback.expectedAnswer,
+                    agentHash: agent.agentHash,
+                }),
+            });
+        },
+        [agent, agentUrl],
+    );
+
     if (!agent) {
-        return <>{/* <- TODO: !!! <PromptbookLoading /> */}</>;
+        return <>{/* <- TODO: [🐱‍🚀] <PromptbookLoading /> */}</>;
     }
 
-    return <AgentChat className={`w-full h-full`} agent={agent} />;
+    return <AgentChat className={`w-full h-full`} agent={agent} onFeedback={handleFeedback} />;
 }
 
 /**

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

@@ -2,7 +2,10 @@
 
 import { headers } from 'next/headers';
 import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
-import { AgentChatWrapper } from './AgentChatWrapper';
+import { generateAgentMetadata } from '../generateAgentMetadata';
+import { AgentChatWrapper } from '../AgentChatWrapper';
+
+export const generateMetadata = generateAgentMetadata;
 
 export default async function AgentChatPage({ params }: { params: Promise<{ agentName: string }> }) {
     $sideEffect(headers());