@promptbook/cli 0.113.0-9 → 0.114.0-1

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

@@ -1,6 +1,11 @@
+import { MarkdownContent } from '@promptbook-local/components';
+import Link from 'next/link';
 import { Card } from '../../../components/Homepage/Card';
 import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
+import { buildAdminChatTaskDetailHref } from '../../../utils/adminChatTaskLinks';
+import { resolveChatHistoryMessageRole, resolveChatHistoryMessageText } from '../../../utils/chatHistoryMessage';
 import { formatServerLanguageHumanReadableDate } from '../../../utils/localization/formatServerLanguageHumanReadableDate';
+import { AdminSortableTableHeaderCell } from '../_components/AdminSortableTableHeaderCell';
 import { ChatHistoryPagination } from './ChatHistoryPagination';
 import type { UseChatHistoryState } from './useChatHistoryState';
 
@@ -16,10 +21,12 @@ type ChatHistoryTableProps = Pick<
     | 'page'
     | 'pageSize'
     | 'totalPages'
+    | 'sortBy'
     | 'sortOrder'
     | 'handleSortChange'
-    | 'isSortedBy'
     | 'handleDeleteRow'
+    | 'handleCreateMockFromRow'
+    | 'isCreatingMock'
     | 'goToPreviousPage'
     | 'goToNextPage'
 > & {
@@ -42,49 +49,22 @@ function formatDate(dateString: string | null | undefined, language: ServerLangu
 }
 
 /**
- * Gets message role.
- */
-function getMessageRole(message: unknown): string {
-    if (!message || typeof message !== 'object') return '-';
-
-    const role = (message as { role?: string }).role;
-    return role || '-';
-}
-
-/**
- * Gets message preview.
+ * Renders the message cell used in the chat history table with rendered Markdown.
+ *
+ * @private function of <ChatHistoryTable/>
  */
-function getMessagePreview(message: unknown, maxLength = 120): string {
-    if (message == null) return '-';
-
-    if (typeof message === 'string') {
-        return message.length > maxLength ? `${message.slice(0, maxLength)}…` : message;
-    }
-
-    if (typeof message === 'object') {
-        const content = (message as { content?: unknown }).content ?? (message as { text?: unknown }).text ?? message;
-
-        let text: string;
-
-        if (typeof content === 'string') {
-            text = content;
-        } else if (Array.isArray(content)) {
-            text = content.map((part) => String(part)).join(' ');
-        } else {
-            text = JSON.stringify(content);
-        }
+function ChatHistoryPreviewCell({ message }: { message: unknown }) {
+    const text = resolveChatHistoryMessageText(message);
 
-        return text.length > maxLength ? `${text.slice(0, maxLength)}…` : text;
+    if (!text) {
+        return <span className="text-gray-400">-</span>;
     }
 
-    return String(message);
-}
-
-/**
- * Renders the preview cell used in the chat history table.
- */
-function ChatHistoryPreviewCell({ message }: { message: unknown }) {
-    return <div className="max-h-24 overflow-hidden overflow-ellipsis text-xs leading-snug">{getMessagePreview(message)}</div>;
+    return (
+        <div className="max-h-24 overflow-y-auto text-xs leading-snug">
+            <MarkdownContent content={text} />
+        </div>
+    );
 }
 
 /**
@@ -102,10 +82,12 @@ export function ChatHistoryTable({
     page,
     pageSize,
     totalPages,
+    sortBy,
     sortOrder,
     handleSortChange,
-    isSortedBy,
     handleDeleteRow,
+    handleCreateMockFromRow,
+    isCreatingMock,
     goToPreviousPage,
     goToNextPage,
 }: ChatHistoryTableProps) {
@@ -125,27 +107,29 @@ export function ChatHistoryTable({
                     <table className="min-w-full divide-y divide-gray-200 text-sm">
                         <thead className="bg-gray-50">
                             <tr>
-                                <th className="px-4 py-3 text-left font-medium text-gray-500">
-                                    <button
-                                        type="button"
-                                        onClick={() => handleSortChange('createdAt')}
-                                        className="inline-flex items-center gap-1"
-                                    >
-                                        Time
-                                        {isSortedBy('createdAt') && <span>{sortOrder === 'asc' ? '▲' : '▼'}</span>}
-                                    </button>
-                                </th>
-                                <th className="px-4 py-3 text-left font-medium text-gray-500">
-                                    <button
-                                        type="button"
-                                        onClick={() => handleSortChange('agentName')}
-                                        className="inline-flex items-center gap-1"
-                                    >
-                                        {formatText('Agent')}
-                                        {isSortedBy('agentName') && <span>{sortOrder === 'asc' ? '▲' : '▼'}</span>}
-                                    </button>
-                                </th>
+                                <AdminSortableTableHeaderCell
+                                    className="px-4 py-3 text-left font-medium text-gray-500"
+                                    label="time"
+                                    sortBy="createdAt"
+                                    activeSortBy={sortBy}
+                                    sortOrder={sortOrder}
+                                    onSortChange={handleSortChange}
+                                >
+                                    Time
+                                </AdminSortableTableHeaderCell>
+                                <AdminSortableTableHeaderCell
+                                    className="px-4 py-3 text-left font-medium text-gray-500"
+                                    label={formatText('Agent')}
+                                    sortBy="agentName"
+                                    activeSortBy={sortBy}
+                                    sortOrder={sortOrder}
+                                    onSortChange={handleSortChange}
+                                >
+                                    {formatText('Agent')}
+                                </AdminSortableTableHeaderCell>
+                                <th className="px-4 py-3 text-left font-medium text-gray-500">User</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">Source</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>
@@ -161,7 +145,22 @@ export function ChatHistoryTable({
                                         {formatDate(row.createdAt, language)}
                                     </td>
                                     <td className="whitespace-nowrap px-4 py-3 text-gray-700">{row.agentName}</td>
-                                    <td className="whitespace-nowrap px-4 py-3 text-gray-700">{getMessageRole(row.message)}</td>
+                                    <td className="whitespace-nowrap px-4 py-3 text-gray-700">
+                                        {row.userId ? (
+                                            <Link
+                                                href={`/admin/users/${encodeURIComponent(String(row.userId))}`}
+                                                className="text-blue-600 hover:text-blue-800"
+                                            >
+                                                #{row.userId}
+                                            </Link>
+                                        ) : (
+                                            '-'
+                                        )}
+                                    </td>
+                                    <td className="whitespace-nowrap px-4 py-3 text-gray-700">
+                                        {resolveChatHistoryMessageRole(row.message)}
+                                    </td>
+                                    <td className="whitespace-nowrap px-4 py-3 text-gray-700">{row.source || '-'}</td>
                                     <td className="max-w-xs px-4 py-3 text-gray-700">
                                         <ChatHistoryPreviewCell message={row.message} />
                                     </td>
@@ -174,13 +173,33 @@ export function ChatHistoryTable({
                                         <div className="truncate text-xs">{row.platform || '-'}</div>
                                     </td>
                                     <td className="whitespace-nowrap px-4 py-3 text-right text-xs font-medium">
-                                        <button
-                                            type="button"
-                                            onClick={() => handleDeleteRow(row)}
-                                            className="text-red-600 hover:text-red-800"
-                                        >
-                                            Delete
-                                        </button>
+                                        <div className="flex items-center justify-end gap-3">
+                                            <button
+                                                type="button"
+                                                onClick={() => void handleCreateMockFromRow(row)}
+                                                disabled={isCreatingMock}
+                                                className="text-blue-600 hover:text-blue-800 disabled:cursor-not-allowed disabled:opacity-60"
+                                                title="Create a mocked chat preset from this chat"
+                                            >
+                                                Create mock
+                                            </button>
+                                            {row.taskId ? (
+                                                <Link
+                                                    href={buildAdminChatTaskDetailHref(row.taskId)}
+                                                    className="text-blue-600 hover:text-blue-800"
+                                                    title="Open the chat completion task of this message"
+                                                >
+                                                    Task
+                                                </Link>
+                                            ) : null}
+                                            <button
+                                                type="button"
+                                                onClick={() => handleDeleteRow(row)}
+                                                className="text-red-600 hover:text-red-800"
+                                            >
+                                                Delete
+                                            </button>
+                                        </div>
                                     </td>
                                 </tr>
                             ))}

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

@@ -0,0 +1,67 @@
+import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
+import { formatServerLanguageHumanReadableDate } from '../../../utils/localization/formatServerLanguageHumanReadableDate';
+import type { UseChatHistoryState } from './useChatHistoryState';
+
+/**
+ * Props for ChatHistoryThreadList.
+ */
+type ChatHistoryThreadListProps = Pick<UseChatHistoryState, 'threads' | 'threadsLoading' | 'handleChatThreadChange'> & {
+    /**
+     * Active text formatter for agent naming.
+     */
+    formatText: (text: string) => string;
+
+    /**
+     * Active UI language used for date formatting.
+     */
+    language: ServerLanguageCode;
+};
+
+/**
+ * Renders the selectable list of recorded chat threads shown in the chat view
+ * before a single conversation is opened, so threads are never mixed together.
+ *
+ * @private function of <ChatHistoryChatView/>
+ */
+export function ChatHistoryThreadList({
+    threads,
+    threadsLoading,
+    handleChatThreadChange,
+    formatText,
+    language,
+}: ChatHistoryThreadListProps) {
+    if (threadsLoading && threads.length === 0) {
+        return <div className="py-12 text-center text-gray-500">Loading chat threads…</div>;
+    }
+
+    if (threads.length === 0) {
+        return <div className="py-12 text-center text-gray-500">No chat threads found.</div>;
+    }
+
+    return (
+        <div className="divide-y divide-gray-100">
+            <div className="px-4 py-3 text-xs uppercase tracking-wide text-gray-400">
+                {formatText('Select a chat thread to view the conversation')}
+            </div>
+            {threads.map((thread) => (
+                <button
+                    key={thread.chatId}
+                    type="button"
+                    onClick={() => handleChatThreadChange(thread.chatId)}
+                    className="flex w-full flex-col gap-1 px-4 py-3 text-left hover:bg-gray-50 focus:outline-none focus:bg-gray-50"
+                >
+                    <span className="truncate text-sm font-medium text-gray-900">{thread.title}</span>
+                    <span className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-gray-500">
+                        <span className="font-medium text-gray-600">{thread.agentName}</span>
+                        <span>
+                            {thread.messageCount} {thread.messageCount === 1 ? 'message' : 'messages'}
+                        </span>
+                        <span>
+                            {formatServerLanguageHumanReadableDate(thread.lastMessageAt, language, { fallbackLabel: '-' })}
+                        </span>
+                    </span>
+                </button>
+            ))}
+        </div>
+    );
+}

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

@@ -1,5 +1,6 @@
 import { ForbiddenPage } from '../../../components/ForbiddenPage/ForbiddenPage';
 import { isUserAdmin } from '../../../utils/isUserAdmin';
+import { parsePositiveUserId } from '../../../utils/parsePositiveUserId';
 import { ChatHistoryClient } from './ChatHistoryClient';
 
 /**
@@ -8,6 +9,9 @@ import { ChatHistoryClient } from './ChatHistoryClient';
 type AdminChatHistoryPageProps = {
     searchParams?: Promise<{
         agentName?: string;
+        chatId?: string;
+        userId?: string;
+        view?: string;
     }>;
 };
 
@@ -19,7 +23,18 @@ export default async function AdminChatHistoryPage({ searchParams }: AdminChatHi
         return <ForbiddenPage />;
     }
 
-    const initialAgentName = (await searchParams)?.agentName || undefined;
+    const resolvedSearchParams = await searchParams;
+    const initialAgentName = resolvedSearchParams?.agentName || undefined;
+    const initialChatId = resolvedSearchParams?.chatId || undefined;
+    const initialUserId = parsePositiveUserId(resolvedSearchParams?.userId ?? null) ?? undefined;
+    const initialViewMode = resolvedSearchParams?.view === 'chat' ? 'chat' : undefined;
 
-    return <ChatHistoryClient initialAgentName={initialAgentName} />;
+    return (
+        <ChatHistoryClient
+            initialAgentName={initialAgentName}
+            initialChatId={initialChatId}
+            initialUserId={initialUserId}
+            initialViewMode={initialViewMode}
+        />
+    );
 }