@promptbook/cli 0.103.0-54 → 0.103.0-55

package/apps/agents-server/src/components/ChangePasswordForm/ChangePasswordForm.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import { Loader2, Lock } from 'lucide-react';
+import { useState } from 'react';
+
+type ChangePasswordFormProps = {
+    onSuccess?: () => void;
+    className?: string;
+};
+
+export function ChangePasswordForm(props: ChangePasswordFormProps) {
+    const { onSuccess, className } = props;
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        setIsLoading(true);
+        setError(null);
+        setSuccessMessage(null);
+
+        const formData = new FormData(event.currentTarget);
+        const currentPassword = formData.get('currentPassword') as string;
+        const newPassword = formData.get('newPassword') as string;
+        const confirmNewPassword = formData.get('confirmNewPassword') as string;
+
+        if (newPassword !== confirmNewPassword) {
+            setError('New passwords do not match');
+            setIsLoading(false);
+            return;
+        }
+
+        try {
+            const response = await fetch('/api/auth/change-password', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ currentPassword, newPassword }),
+            });
+
+            const result = await response.json();
+
+            if (response.ok) {
+                setSuccessMessage('Password changed successfully');
+                // Reset form
+                event.currentTarget.reset();
+                if (onSuccess) {
+                    setTimeout(onSuccess, 1500);
+                }
+            } else {
+                setError(result.error || 'An error occurred');
+            }
+        } catch (error) {
+            setError('An unexpected error occurred');
+            console.error(error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className={`space-y-4 ${className || ''}`}>
+            <div className="space-y-2">
+                <label
+                    htmlFor="currentPassword"
+                    className="text-sm font-medium text-gray-700 block"
+                >
+                    Current Password
+                </label>
+                <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
+                        <Lock className="w-4 h-4" />
+                    </div>
+                    <input
+                        id="currentPassword"
+                        name="currentPassword"
+                        type="password"
+                        required
+                        className="block w-full pl-10 h-10 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-promptbook-blue focus:border-transparent disabled:opacity-50"
+                        placeholder="Enter current password"
+                    />
+                </div>
+            </div>
+
+            <div className="space-y-2">
+                <label
+                    htmlFor="newPassword"
+                    className="text-sm font-medium text-gray-700 block"
+                >
+                    New Password
+                </label>
+                <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
+                        <Lock className="w-4 h-4" />
+                    </div>
+                    <input
+                        id="newPassword"
+                        name="newPassword"
+                        type="password"
+                        required
+                        className="block w-full pl-10 h-10 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-promptbook-blue focus:border-transparent disabled:opacity-50"
+                        placeholder="Enter new password"
+                    />
+                </div>
+            </div>
+
+            <div className="space-y-2">
+                <label
+                    htmlFor="confirmNewPassword"
+                    className="text-sm font-medium text-gray-700 block"
+                >
+                    Confirm New Password
+                </label>
+                <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
+                        <Lock className="w-4 h-4" />
+                    </div>
+                    <input
+                        id="confirmNewPassword"
+                        name="confirmNewPassword"
+                        type="password"
+                        required
+                        className="block w-full pl-10 h-10 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-promptbook-blue focus:border-transparent disabled:opacity-50"
+                        placeholder="Confirm new password"
+                    />
+                </div>
+            </div>
+
+            {error && (
+                <div className="p-3 text-sm text-red-500 bg-red-50 border border-red-200 rounded-md">
+                    {error}
+                </div>
+            )}
+
+            {successMessage && (
+                <div className="p-3 text-sm text-green-500 bg-green-50 border border-green-200 rounded-md">
+                    {successMessage}
+                </div>
+            )}
+
+            <button
+                type="submit"
+                disabled={isLoading}
+                className="w-full inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 bg-promptbook-blue-dark text-white hover:bg-promptbook-blue-dark/90 focus:outline-none focus:ring-2 focus:ring-promptbook-blue focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none transition-colors"
+            >
+                {isLoading ? (
+                    <>
+                        <Loader2 className="mr-2 w-4 h-4 animate-spin" />
+                        Changing Password...
+                    </>
+                ) : (
+                    'Change Password'
+                )}
+            </button>
+        </form>
+    );
+}

package/apps/agents-server/src/components/Header/Header.tsx

@@ -2,7 +2,7 @@
 
 import promptbookLogoBlueTransparent from '@/public/logo-blue-white-256.png';
 import { $createAgentAction, logoutAction } from '@/src/app/actions';
-import { ArrowRight, ChevronDown, LogIn, LogOut } from 'lucide-react';
+import { ArrowRight, ChevronDown, Lock, LogIn, LogOut, User } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
@@ -12,6 +12,7 @@ import { HamburgerMenu } from '../../../../../src/book-components/_common/Hambur
 import { just } from '../../../../../src/utils/organization/just';
 import type { UserInfo } from '../../utils/getCurrentUser';
 import { getVisibleCommitmentDefinitions } from '../../utils/getVisibleCommitmentDefinitions';
+import { ChangePasswordDialog } from '../ChangePasswordDialog/ChangePasswordDialog';
 import { LoginDialog } from '../LoginDialog/LoginDialog';
 import { useUsersAdmin } from '../UsersList/useUsersAdmin';
 
@@ -73,12 +74,16 @@ export function Header(props: HeaderProps) {
 
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const [isLoginOpen, setIsLoginOpen] = useState(false);
+    const [isChangePasswordOpen, setIsChangePasswordOpen] = useState(false);
     const [isAgentsOpen, setIsAgentsOpen] = useState(false);
     const [isDocsOpen, setIsDocsOpen] = useState(false);
     const [isUsersOpen, setIsUsersOpen] = useState(false);
+    const [isSystemOpen, setIsSystemOpen] = useState(false);
+    const [isProfileOpen, setIsProfileOpen] = useState(false);
     const [isMobileAgentsOpen, setIsMobileAgentsOpen] = useState(false);
     const [isMobileDocsOpen, setIsMobileDocsOpen] = useState(false);
     const [isMobileUsersOpen, setIsMobileUsersOpen] = useState(false);
+    const [isMobileSystemOpen, setIsMobileSystemOpen] = useState(false);
     const [isCreatingAgent, setIsCreatingAgent] = useState(false);
     const router = useRouter();
 
@@ -131,7 +136,9 @@ export function Header(props: HeaderProps) {
                             label: (
                                 <>
                                     {primary.type}
-                                    {aliases.length > 0 && <span className="text-gray-400 font-normal"> / {aliases.join(' / ')}</span>}
+                                    {aliases.length > 0 && (
+                                        <span className="text-gray-400 font-normal"> / {aliases.join(' / ')}</span>
+                                    )}
                                 </>
                             ),
                             href: `/docs/${primary.type}`,
@@ -210,24 +217,30 @@ export function Header(props: HeaderProps) {
                       ],
                   },
                   {
-                      type: 'link' as const,
-                      label: 'API Tokens',
-                      href: '/admin/api-tokens',
-                  },
-                  {
-                      type: 'link' as const,
-                      label: 'Metadata',
-                      href: '/admin/metadata',
-                  },
-                  {
-                      type: 'link' as const,
-                      label: 'Chat history',
-                      href: '/admin/chat-history',
-                  },
-                  {
-                      type: 'link' as const,
-                      label: 'Chat feedback',
-                      href: '/admin/chat-feedback',
+                      type: 'dropdown' as const,
+                      label: 'System',
+                      isOpen: isSystemOpen,
+                      setIsOpen: setIsSystemOpen,
+                      isMobileOpen: isMobileSystemOpen,
+                      setIsMobileOpen: setIsMobileSystemOpen,
+                      items: [
+                          {
+                              label: 'API Tokens',
+                              href: '/admin/api-tokens',
+                          },
+                          {
+                              label: 'Metadata',
+                              href: '/admin/metadata',
+                          },
+                          {
+                              label: 'Chat history',
+                              href: '/admin/chat-history',
+                          },
+                          {
+                              label: 'Chat feedback',
+                              href: '/admin/chat-feedback',
+                          },
+                      ],
                   },
                   {
                       type: 'link' as const,
@@ -241,6 +254,7 @@ export function Header(props: HeaderProps) {
     return (
         <header className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200 h-16">
             <LoginDialog isOpen={isLoginOpen} onClose={() => setIsLoginOpen(false)} />
+            <ChangePasswordDialog isOpen={isChangePasswordOpen} onClose={() => setIsChangePasswordOpen(false)} />
             <div className="container mx-auto px-4 h-full">
                 <div className="flex items-center justify-between h-full">
                     {/* Logo */}
@@ -370,24 +384,56 @@ export function Header(props: HeaderProps) {
 
                         {(currentUser || isAdmin) && (
                             <div className="hidden lg:flex items-center gap-3">
-                                <span className="inline text-sm text-gray-600">
-                                    Logged in as <strong>{currentUser?.username || 'Admin'}</strong>
-                                    {(currentUser?.isAdmin || isAdmin) && (
-                                        <span className="ml-2 bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">
-                                            Admin
-                                        </span>
+                                <div className="relative">
+                                    <button
+                                        onClick={() => setIsProfileOpen(!isProfileOpen)}
+                                        onBlur={() => setTimeout(() => setIsProfileOpen(false), 200)}
+                                        className="flex items-center gap-2 text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors px-3 py-2 rounded-md hover:bg-gray-50"
+                                    >
+                                        <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
+                                            <User className="w-4 h-4" />
+                                        </div>
+                                        <div className="flex flex-col items-start">
+                                            <span className="leading-none">{currentUser?.username || 'Admin'}</span>
+                                            {(currentUser?.isAdmin || isAdmin) && (
+                                                <span className="text-xs text-blue-600">Admin</span>
+                                            )}
+                                        </div>
+                                        <ChevronDown className="w-4 h-4 ml-1 opacity-50" />
+                                    </button>
+
+                                    {isProfileOpen && (
+                                        <div className="absolute top-full right-0 mt-2 w-56 bg-white rounded-md shadow-lg border border-gray-100 py-1 z-50 animate-in fade-in zoom-in-95 duration-200">
+                                            <div className="px-4 py-3 border-b border-gray-100">
+                                                <p className="text-sm font-medium text-gray-900">
+                                                    {currentUser?.username || 'Admin'}
+                                                </p>
+                                                {(currentUser?.isAdmin || isAdmin) && (
+                                                    <p className="text-xs text-blue-600 mt-1">Administrator</p>
+                                                )}
+                                            </div>
+
+                                            <button
+                                                onClick={() => setIsChangePasswordOpen(true)}
+                                                className="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-gray-900 flex items-center gap-2"
+                                            >
+                                                <Lock className="w-4 h-4" />
+                                                Change Password
+                                            </button>
+
+                                            <button
+                                                onClick={() => {
+                                                    handleLogout();
+                                                    setIsMenuOpen(false);
+                                                }}
+                                                className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 hover:text-red-700 flex items-center gap-2"
+                                            >
+                                                <LogOut className="w-4 h-4" />
+                                                Log out
+                                            </button>
+                                        </div>
                                     )}
-                                </span>
-                                <button
-                                    onClick={() => {
-                                        handleLogout();
-                                        setIsMenuOpen(false);
-                                    }}
-                                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium h-10 px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors"
-                                >
-                                    Log out
-                                    <LogOut className="ml-2 w-4 h-4" />
-                                </button>
+                                </div>
                             </div>
                         )}
 
@@ -403,7 +449,7 @@ export function Header(props: HeaderProps) {
                 {/* Mobile Navigation */}
                 {isMenuOpen && (
                     <div
-                        className="lg:hidden absolute top-16 left-0 right-0 z-50 bg-white/80 shadow-xl py-4 border-t border-gray-100 animate-in slide-in-from-top-2 h-[calc(100vh-4rem)] overflow-y-auto"
+                        className="lg:hidden absolute top-16 left-0 right-0 z-50 bg-white shadow-xl py-4 border-t border-gray-100 animate-in slide-in-from-top-2 h-[calc(100vh-4rem)] overflow-y-auto"
                         style={{
                             backdropFilter: 'blur(20px)',
                             WebkitBackdropFilter: 'blur(20px)',
@@ -435,6 +481,16 @@ export function Header(props: HeaderProps) {
                                                 </span>
                                             )}
                                         </div>
+                                        <button
+                                            onClick={() => {
+                                                setIsChangePasswordOpen(true);
+                                                setIsMenuOpen(false);
+                                            }}
+                                            className="flex items-center gap-2 text-base font-medium text-gray-600 hover:text-gray-900 w-full"
+                                        >
+                                            <Lock className="w-4 h-4" />
+                                            Change Password
+                                        </button>
                                         <button
                                             onClick={() => {
                                                 handleLogout();

package/apps/agents-server/src/middleware.ts

@@ -134,7 +134,7 @@ export async function middleware(req: NextRequest) {
             headers: {
                 'Access-Control-Allow-Origin': '*',
                 'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
-                'Access-Control-Allow-Headers': 'Content-Type',
+                'Access-Control-Allow-Headers': 'Content-Type, Authorization',
             },
         });
     }

package/apps/agents-server/src/utils/convertToCsv.ts

@@ -0,0 +1,31 @@
+/**
+ * Converts an array of objects to a CSV string
+ */
+export function convertToCsv(data: Array<Record<string, unknown>>): string {
+    if (data.length === 0) {
+        return '';
+    }
+
+    const headers = Object.keys(data[0]);
+    const csvRows = [headers.join(',')];
+
+    for (const row of data) {
+        const values = headers.map((header) => {
+            let value = row[header];
+
+            if (value === null || value === undefined) {
+                value = '';
+            } else if (typeof value === 'object') {
+                value = JSON.stringify(value);
+            } else {
+                value = String(value);
+            }
+
+            const escaped = (value as string).replace(/"/g, '""');
+            return `"${escaped}"`;
+        });
+        csvRows.push(values.join(','));
+    }
+
+    return csvRows.join('\n');
+}

package/apps/agents-server/src/utils/handleChatCompletion.ts

@@ -0,0 +1,183 @@
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { $provideExecutionToolsForServer } from '@/src/tools/$provideExecutionToolsForServer';
+import { Agent } from '@promptbook-local/core';
+import { ChatMessage, ChatPromptResult, Prompt, TODO_any } from '@promptbook-local/types';
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function handleChatCompletion(
+    request: NextRequest,
+    params: { agentName: string },
+    title: string = 'API Chat Completion'
+) {
+    const { agentName } = params;
+
+    // Note: Authentication is handled by middleware
+    // If we are here, the request is either authenticated or public access is allowed (but middleware blocks it if not)
+
+    try {
+        const body = await request.json();
+        const { messages, stream, model } = body;
+
+        if (!messages || !Array.isArray(messages) || messages.length === 0) {
+            return NextResponse.json(
+                {
+                    error: {
+                        message: 'Messages array is required and cannot be empty.',
+                        type: 'invalid_request_error',
+                    },
+                },
+                { status: 400 },
+            );
+        }
+
+        const collection = await $provideAgentCollectionForServer();
+        let agentSource;
+        try {
+            agentSource = await collection.getAgentSource(agentName);
+        } catch (error) {
+            return NextResponse.json(
+                { error: { message: `Agent '${agentName}' not found.`, type: 'invalid_request_error' } },
+                { status: 404 },
+            );
+        }
+
+        if (!agentSource) {
+            return NextResponse.json(
+                { error: { message: `Agent '${agentName}' not found.`, type: 'invalid_request_error' } },
+                { status: 404 },
+            );
+        }
+
+        const executionTools = await $provideExecutionToolsForServer();
+        const agent = new Agent({
+            agentSource,
+            executionTools,
+            isVerbose: true, // or false
+        });
+
+        // Prepare thread and content
+        const lastMessage = messages[messages.length - 1];
+        const previousMessages = messages.slice(0, -1);
+
+        const thread: ChatMessage[] = previousMessages.map((msg: TODO_any, index: number) => ({
+            id: `msg-${index}`, // Placeholder ID
+            from: msg.role === 'assistant' ? 'agent' : 'user', // Mapping standard OpenAI roles
+            content: msg.content,
+            isComplete: true,
+            date: new Date(), // We don't have the real date, using current
+        }));
+
+        const prompt: Prompt = {
+            title,
+            content: lastMessage.content,
+            modelRequirements: {
+                modelVariant: 'CHAT',
+                // We could pass 'model' from body if we wanted to enforce it, but Agent usually has its own config
+            },
+            parameters: {},
+            thread,
+        } as Prompt;
+        // Note: Casting as Prompt because the type definition might require properties we don't strictly use or that are optional but TS complains
+
+        if (stream) {
+            const encoder = new TextEncoder();
+            const readableStream = new ReadableStream({
+                async start(controller) {
+                    const runId = `chatcmpl-${Math.random().toString(36).substring(2, 15)}`;
+                    const created = Math.floor(Date.now() / 1000);
+
+                    let previousContent = '';
+
+                    try {
+                        await agent.callChatModelStream(prompt, (chunk: ChatPromptResult) => {
+                            const fullContent = chunk.content;
+                            const deltaContent = fullContent.substring(previousContent.length);
+                            previousContent = fullContent;
+
+                            if (deltaContent) {
+                                const chunkData = {
+                                    id: runId,
+                                    object: 'chat.completion.chunk',
+                                    created,
+                                    model: model || 'promptbook-agent',
+                                    choices: [
+                                        {
+                                            index: 0,
+                                            delta: {
+                                                content: deltaContent,
+                                            },
+                                            finish_reason: null,
+                                        },
+                                    ],
+                                };
+                                controller.enqueue(encoder.encode(`data: ${JSON.stringify(chunkData)}\n\n`));
+                            }
+                        });
+
+                        const doneChunkData = {
+                            id: runId,
+                            object: 'chat.completion.chunk',
+                            created,
+                            model: model || 'promptbook-agent',
+                            choices: [
+                                {
+                                    index: 0,
+                                    delta: {},
+                                    finish_reason: 'stop',
+                                },
+                            ],
+                        };
+                        controller.enqueue(encoder.encode(`data: ${JSON.stringify(doneChunkData)}\n\n`));
+                        controller.enqueue(encoder.encode('[DONE]'));
+                    } catch (error) {
+                        console.error('Error during streaming:', error);
+                        // OpenAI stream doesn't usually send error JSON in stream, just closes or sends error text?
+                        // But we should try to close gracefully or error.
+                        controller.error(error);
+                    }
+                    controller.close();
+                },
+            });
+
+            return new Response(readableStream, {
+                headers: {
+                    'Content-Type': 'text/event-stream',
+                    'Cache-Control': 'no-cache',
+                    Connection: 'keep-alive',
+                },
+            });
+        } else {
+            const result = await agent.callChatModel(prompt);
+
+            return NextResponse.json({
+                id: `chatcmpl-${Math.random().toString(36).substring(2, 15)}`,
+                object: 'chat.completion',
+                created: Math.floor(Date.now() / 1000),
+                model: model || 'promptbook-agent',
+                choices: [
+                    {
+                        index: 0,
+                        message: {
+                            role: 'assistant',
+                            content: result.content,
+                        },
+                        finish_reason: 'stop',
+                    },
+                ],
+                usage: {
+                    prompt_tokens: result.usage?.input?.tokensCount?.value || 0,
+                    completion_tokens: result.usage?.output?.tokensCount?.value || 0,
+                    total_tokens:
+                        (result.usage?.input?.tokensCount?.value || 0) +
+                        (result.usage?.output?.tokensCount?.value || 0),
+                },
+            });
+        }
+    } catch (error) {
+        console.error(`Error in ${title} handler:`, error);
+        return NextResponse.json(
+            { error: { message: (error as Error).message || 'Internal Server Error', type: 'server_error' } },
+            { status: 500 },
+        );
+    }
+}