@promptbook/cli 0.103.0-54 → 0.103.0-56

package/apps/agents-server/package.json

@@ -8,5 +8,11 @@
         "start": "next start -p 4440",
         "lint": "next lint",
         "postinstall": "cd ../../ && npm ci"
+    },
+    "devDependencies": {
+        "@tailwindcss/typography": "^0.5.19"
+    },
+    "dependencies": {
+        "remark-gfm": "^4.0.1"
     }
 }

package/apps/agents-server/src/app/admin/chat-feedback/ChatFeedbackClient.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { Chat } from '@promptbook-local/components';
+import type { ChatMessage } from '@promptbook-local/types';
 import { useEffect, useMemo, useState } from 'react';
 import { Card } from '../../../components/Homepage/Card';
 import {
@@ -62,6 +64,7 @@ export function ChatFeedbackClient({ initialAgentName }: ChatFeedbackClientProps
     const [search, setSearch] = useState('');
     const [sortBy, setSortBy] = useState<ChatFeedbackSortField>('createdAt');
     const [sortOrder, setSortOrder] = useState<ChatFeedbackSortOrder>('desc');
+    const [selectedThread, setSelectedThread] = useState<ChatMessage[] | null>(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
 
@@ -192,6 +195,25 @@ export function ChatFeedbackClient({ initialAgentName }: ChatFeedbackClientProps
         }
     };
 
+    const handleViewChat = (row: ChatFeedbackRow) => {
+        if (!row.chatThread) {
+            alert('No chat thread available for this feedback.');
+            return;
+        }
+        try {
+            // Ensure dates are Date objects
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const thread = (row.chatThread as unknown as any[]).map((msg) => ({
+                ...msg,
+                date: msg.date ? new Date(msg.date) : (msg.createdAt ? new Date(msg.createdAt) : undefined),
+            })) as ChatMessage[];
+            setSelectedThread(thread);
+        } catch (e) {
+            console.error('Failed to parse chat thread', e);
+            alert('Failed to parse chat thread.');
+        }
+    };
+
     const handleDeleteRow = async (row: ChatFeedbackRow) => {
         if (!row.id) return;
 
@@ -250,6 +272,14 @@ export function ChatFeedbackClient({ initialAgentName }: ChatFeedbackClientProps
 
     const isSortedBy = (field: ChatFeedbackSortField) => sortBy === field;
 
+    const getExportUrl = () => {
+        const params = new URLSearchParams();
+        if (agentName) {
+            params.set('agentName', agentName);
+        }
+        return `/api/chat-feedback/export?${params.toString()}`;
+    };
+
     return (
         <div className="container mx-auto px-4 py-8 space-y-6">
             <div className="mt-20 mb-4 flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
@@ -259,12 +289,24 @@ export function ChatFeedbackClient({ initialAgentName }: ChatFeedbackClientProps
                         Review and triage user feedback collected from your agents.
                     </p>
                 </div>
-                <div className="text-sm text-gray-500 md:text-right">
-                    <div className="text-xl font-semibold text-gray-900">
-                        {total.toLocaleString()}
+                <div className="flex items-end gap-4 text-sm text-gray-500 md:text-right">
+                    <div>
+                        <a
+                            href={getExportUrl()}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                        >
+                            Download CSV
+                        </a>
                     </div>
-                    <div className="text-xs uppercase tracking-wide text-gray-400">
-                        Total feedback entries
+                    <div>
+                        <div className="text-xl font-semibold text-gray-900">
+                            {total.toLocaleString()}
+                        </div>
+                        <div className="text-xs uppercase tracking-wide text-gray-400">
+                            Total feedback entries
+                        </div>
                     </div>
                 </div>
             </div>
@@ -468,7 +510,16 @@ export function ChatFeedbackClient({ initialAgentName }: ChatFeedbackClientProps
                                                     {row.platform || '-'}
                                                 </div>
                                             </td>
-                                            <td className="whitespace-nowrap px-4 py-3 text-right text-xs font-medium">
+                                            <td className="whitespace-nowrap px-4 py-3 text-right text-xs font-medium space-x-2">
+                                                {row.chatThread && (
+                                                    <button
+                                                        type="button"
+                                                        onClick={() => handleViewChat(row)}
+                                                        className="text-blue-600 hover:text-blue-800"
+                                                    >
+                                                        View Chat
+                                                    </button>
+                                                )}
                                                 <button
                                                     type="button"
                                                     onClick={() => handleDeleteRow(row)}
@@ -536,6 +587,28 @@ export function ChatFeedbackClient({ initialAgentName }: ChatFeedbackClientProps
                         </div>
                     </div>
                 </Card>
+
+            {selectedThread && (
+                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4">
+                    <div className="bg-white rounded-lg shadow-xl w-full max-w-4xl h-[80vh] flex flex-col overflow-hidden">
+                        <div className="flex justify-between items-center p-4 border-b border-gray-200">
+                            <h3 className="text-lg font-medium text-gray-900">Chat Thread</h3>
+                            <button
+                                onClick={() => setSelectedThread(null)}
+                                className="text-gray-400 hover:text-gray-500"
+                            >
+                                <span className="sr-only">Close</span>
+                                <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                                </svg>
+                            </button>
+                        </div>
+                        <div className="flex-1 overflow-hidden relative">
+                            <Chat messages={selectedThread} />
+                        </div>
+                    </div>
+                </div>
+            )}
         </div>
     );
 }

package/apps/agents-server/src/app/admin/chat-history/ChatHistoryClient.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { MockedChat } from '@promptbook-local/components';
+import type { ChatMessage } from '@promptbook-local/types';
 import { useEffect, useMemo, useState } from 'react';
 import { Card } from '../../../components/Homepage/Card';
 import {
@@ -83,6 +85,7 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
     const [search, setSearch] = useState('');
     const [sortBy, setSortBy] = useState<ChatHistorySortField>('createdAt');
     const [sortOrder, setSortOrder] = useState<ChatHistorySortOrder>('desc');
+    const [viewMode, setViewMode] = useState<'table' | 'chat'>('table');
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
 
@@ -213,6 +216,21 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
         }
     };
 
+    const handleViewModeChange = (mode: 'table' | 'chat') => {
+        setViewMode(mode);
+        if (mode === 'chat') {
+            // When switching to chat view, sort by creation date ascending to make sense of conversation flow
+            setSortBy('createdAt');
+            setSortOrder('asc');
+            setPageSize(100); // Show more messages in chat view
+        } else {
+            // Default back to desc when switching to table
+            setSortBy('createdAt');
+            setSortOrder('desc');
+            setPageSize(20);
+        }
+    };
+
     const handleDeleteRow = async (row: ChatHistoryRow) => {
         if (!row.id) return;
 
@@ -271,6 +289,75 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
 
     const isSortedBy = (field: ChatHistorySortField) => sortBy === field;
 
+    const getExportUrl = () => {
+        const params = new URLSearchParams();
+        if (agentName) {
+            params.set('agentName', agentName);
+        }
+        return `/api/chat-history/export?${params.toString()}`;
+    };
+
+    const chatMessages = useMemo(() => {
+        if (viewMode !== 'chat') return [];
+        return items.map((row) => {
+            const message = row.message as { role?: string; content?: string };
+            const role = (message.role || 'USER').toUpperCase();
+            return {
+                id: String(row.id),
+                from: role === 'USER' ? 'USER' : 'ASSISTANT',
+                content: message.content || JSON.stringify(message),
+                isComplete: true,
+                date: new Date(row.createdAt),
+            } satisfies ChatMessage;
+        });
+    }, [items, viewMode]);
+
+    const pagination = (
+        <div className="mt-4 flex flex-col items-center justify-between gap-3 border-t border-gray-100 pt-4 text-xs text-gray-600 md:flex-row">
+            <div>
+                {total > 0 ? (
+                    <>
+                        Showing{' '}
+                        <span className="font-semibold">
+                            {Math.min((page - 1) * pageSize + 1, total)}
+                        </span>{' '}
+                        –{' '}
+                        <span className="font-semibold">
+                            {Math.min(page * pageSize, total)}
+                        </span>{' '}
+                        of{' '}
+                        <span className="font-semibold">{total}</span>{' '}
+                        messages
+                    </>
+                ) : (
+                    'No messages'
+                )}
+            </div>
+            <div className="flex items-center gap-2">
+                <button
+                    type="button"
+                    onClick={() => setPage((prev) => Math.max(1, prev - 1))}
+                    disabled={page <= 1}
+                    className="inline-flex items-center justify-center rounded-md border border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                    Previous
+                </button>
+                <span>
+                    Page <span className="font-semibold">{page}</span> of{' '}
+                    <span className="font-semibold">{totalPages}</span>
+                </span>
+                <button
+                    type="button"
+                    onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
+                    disabled={page >= totalPages}
+                    className="inline-flex items-center justify-center rounded-md border border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                    Next
+                </button>
+            </div>
+        </div>
+    );
+
     return (
         <div className="container mx-auto px-4 py-8 space-y-6">
             <div className="mt-20 mb-4 flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
@@ -280,12 +367,48 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
                         Inspect and manage all recorded chat messages across your agents.
                     </p>
                 </div>
-                <div className="text-sm text-gray-500 md:text-right">
-                    <div className="text-xl font-semibold text-gray-900">
-                        {total.toLocaleString()}
+                <div className="flex items-end gap-4 text-sm text-gray-500 md:text-right">
+                    <div className="flex rounded-md shadow-sm" role="group">
+                        <button
+                            type="button"
+                            onClick={() => handleViewModeChange('table')}
+                            className={`px-4 py-2 text-sm font-medium border border-gray-300 rounded-l-lg ${
+                                viewMode === 'table'
+                                    ? 'bg-blue-600 text-white border-blue-600'
+                                    : 'bg-white text-gray-700 hover:bg-gray-50'
+                            }`}
+                        >
+                            Table
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => handleViewModeChange('chat')}
+                            className={`px-4 py-2 text-sm font-medium border border-gray-300 rounded-r-lg border-l-0 ${
+                                viewMode === 'chat'
+                                    ? 'bg-blue-600 text-white border-blue-600'
+                                    : 'bg-white text-gray-700 hover:bg-gray-50'
+                            }`}
+                        >
+                            Chat
+                        </button>
+                    </div>
+                    <div>
+                        <a
+                            href={getExportUrl()}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                        >
+                            Download CSV
+                        </a>
                     </div>
-                    <div className="text-xs uppercase tracking-wide text-gray-400">
-                        Total messages
+                    <div>
+                        <div className="text-xl font-semibold text-gray-900">
+                            {total.toLocaleString()}
+                        </div>
+                        <div className="text-xs uppercase tracking-wide text-gray-400">
+                            Total messages
+                        </div>
                     </div>
                 </div>
             </div>
@@ -372,12 +495,27 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
                     )}
                 </Card>
 
-            <Card>
-                <div className="flex items-center justify-between mb-4">
-                    <h2 className="text-lg font-medium text-gray-900">
-                        Messages ({total})
-                    </h2>
+            {viewMode === 'chat' ? (
+                <div className="bg-white rounded-lg shadow border border-gray-200 overflow-hidden flex flex-col">
+                    <div className="h-[800px] relative">
+                        <MockedChat
+                            messages={chatMessages}
+                            isPausable={true}
+                            isResettable={false}
+                            isSaveButtonEnabled={true}
+                        />
+                    </div>
+                    <div className="p-4 bg-gray-50 border-t border-gray-200">
+                        {pagination}
+                    </div>
                 </div>
+            ) : (
+                <Card>
+                    <div className="flex items-center justify-between mb-4">
+                        <h2 className="text-lg font-medium text-gray-900">
+                            Messages ({total})
+                        </h2>
+                    </div>
                     {error && (
                         <div className="mb-4 rounded-md bg-red-50 px-4 py-3 text-sm text-red-800">
                             {error}
@@ -417,13 +555,27 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
                                                 )}
                                             </button>
                                         </th>
-                                        <th className="px-4 py-3 text-left font-medium text-gray-500">Role</th>
-                                        <th className="px-4 py-3 text-left font-medium text-gray-500">Message</th>
-                                        <th className="px-4 py-3 text-left font-medium text-gray-500">URL</th>
-                                        <th className="px-4 py-3 text-left font-medium text-gray-500">IP</th>
-                                        <th className="px-4 py-3 text-left font-medium text-gray-500">Language</th>
-                                        <th className="px-4 py-3 text-left font-medium text-gray-500">Platform</th>
-                                        <th className="px-4 py-3 text-right font-medium text-gray-500">Actions</th>
+                                        <th className="px-4 py-3 text-left font-medium text-gray-500">
+                                            Role
+                                        </th>
+                                        <th className="px-4 py-3 text-left font-medium text-gray-500">
+                                            Message
+                                        </th>
+                                        <th className="px-4 py-3 text-left font-medium text-gray-500">
+                                            URL
+                                        </th>
+                                        <th className="px-4 py-3 text-left font-medium text-gray-500">
+                                            IP
+                                        </th>
+                                        <th className="px-4 py-3 text-left font-medium text-gray-500">
+                                            Language
+                                        </th>
+                                        <th className="px-4 py-3 text-left font-medium text-gray-500">
+                                            Platform
+                                        </th>
+                                        <th className="px-4 py-3 text-right font-medium text-gray-500">
+                                            Actions
+                                        </th>
                                     </tr>
                                 </thead>
                                 <tbody className="divide-y divide-gray-200 bg-white">
@@ -474,59 +626,9 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
                             </table>
                         </div>
                     )}
-
-                    <div className="mt-4 flex flex-col items-center justify-between gap-3 border-t border-gray-100 pt-4 text-xs text-gray-600 md:flex-row">
-                        <div>
-                            {total > 0 ? (
-                                <>
-                                    Showing{' '}
-                                    <span className="font-semibold">
-                                        {Math.min((page - 1) * pageSize + 1, total)}
-                                    </span>{' '}
-                                    –{' '}
-                                    <span className="font-semibold">
-                                        {Math.min(page * pageSize, total)}
-                                    </span>{' '}
-                                    of{' '}
-                                    <span className="font-semibold">
-                                        {total}
-                                    </span>{' '}
-                                    messages
-                                </>
-                            ) : (
-                                'No messages'
-                            )}
-                        </div>
-                        <div className="flex items-center gap-2">
-                            <button
-                                type="button"
-                                onClick={() => setPage((prev) => Math.max(1, prev - 1))}
-                                disabled={page <= 1}
-                                className="inline-flex items-center justify-center rounded-md border border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
-                            >
-                                Previous
-                            </button>
-                            <span>
-                                Page{' '}
-                                <span className="font-semibold">
-                                    {page}
-                                </span>{' '}
-                                of{' '}
-                                <span className="font-semibold">
-                                    {totalPages}
-                                </span>
-                            </span>
-                            <button
-                                type="button"
-                                onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
-                                disabled={page >= totalPages}
-                                className="inline-flex items-center justify-center rounded-md border border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
-                            >
-                                Next
-                            </button>
-                        </div>
-                    </div>
+                    {pagination}
                 </Card>
+            )}
         </div>
     );
 }

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

@@ -9,12 +9,13 @@ import { string_agent_url } from '../../../../../../src/types/typeAliases';
 type AgentChatWrapperProps = {
     agentUrl: string_agent_url;
     defaultMessage?: string;
+    autoExecuteMessage?: string;
 };
 
 // TODO: [🐱‍🚀] Rename to AgentChatSomethingWrapper
 
 export function AgentChatWrapper(props: AgentChatWrapperProps) {
-    const { agentUrl, defaultMessage } = props;
+    const { agentUrl, defaultMessage, autoExecuteMessage } = props;
 
     const agentPromise = useMemo(
         () =>
@@ -67,6 +68,7 @@ export function AgentChatWrapper(props: AgentChatWrapperProps) {
             agent={agent}
             onFeedback={handleFeedback}
             defaultMessage={defaultMessage}
+            autoExecuteMessage={autoExecuteMessage}
         />
     );
 }