@promptbook/cli 0.113.0-8 → 0.114.0-0

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

@@ -1,6 +1,7 @@
 import { Card } from '../../../components/Homepage/Card';
 import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
 import { formatServerLanguageHumanReadableDate } from '../../../utils/localization/formatServerLanguageHumanReadableDate';
+import { AdminSortableTableHeaderCell } from '../_components/AdminSortableTableHeaderCell';
 import type { UseChatFeedbackState } from './useChatFeedbackState';
 
 /**
@@ -15,9 +16,9 @@ type ChatFeedbackTableProps = Pick<
     | 'page'
     | 'pageSize'
     | 'totalPages'
+    | 'sortBy'
     | 'sortOrder'
     | 'handleSortChange'
-    | 'isSortedBy'
     | 'handleViewChat'
     | 'handleDeleteRow'
     | 'goToPreviousPage'
@@ -81,9 +82,9 @@ export function ChatFeedbackTable({
     page,
     pageSize,
     totalPages,
+    sortBy,
     sortOrder,
     handleSortChange,
-    isSortedBy,
     handleViewChat,
     handleDeleteRow,
     goToPreviousPage,
@@ -105,26 +106,26 @@ export function ChatFeedbackTable({
                     <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">Rating</th>
                                 <th className="px-4 py-3 text-left font-medium text-gray-500">Text rating</th>
                                 <th className="px-4 py-3 text-left font-medium text-gray-500">User note</th>

package/apps/agents-server/src/app/admin/chat-feedback/useChatFeedbackState.ts

@@ -1,6 +1,7 @@
 import type { ChatMessage, string_date_iso8601 } from '@promptbook-local/types';
 import { useCallback, useEffect, useMemo, useState, type ChangeEvent, type FormEvent } from 'react';
 import { showAlert, showConfirm } from '../../../components/AsyncDialogs/asyncDialogs';
+import { resolveNextAdminTableSortState } from '../_components/adminTableSorting';
 import {
     $clearAgentChatFeedback,
     $deleteChatFeedbackRow,
@@ -57,6 +58,7 @@ export type UseChatFeedbackState = {
     totalPages: number;
     agentName: string;
     searchInput: string;
+    sortBy: ChatFeedbackSortField;
     sortOrder: ChatFeedbackSortOrder;
     selectedThread: ChatMessage[] | null;
     loading: boolean;
@@ -72,7 +74,6 @@ export type UseChatFeedbackState = {
     handleViewChat: (row: ChatFeedbackRow) => Promise<void>;
     handleDeleteRow: (row: ChatFeedbackRow) => Promise<void>;
     handleClearAgentFeedback: () => Promise<void>;
-    isSortedBy: (field: ChatFeedbackSortField) => boolean;
     goToPreviousPage: () => void;
     goToNextPage: () => void;
     closeThreadDialog: () => void;
@@ -376,13 +377,16 @@ export function useChatFeedbackState({ initialAgentName, formatText }: UseChatFe
 
     const handleSortChange = useCallback(
         (field: ChatFeedbackSortField) => {
-            if (sortBy === field) {
-                setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
-                return;
-            }
-
-            setSortBy(field);
-            setSortOrder(field === 'createdAt' ? 'desc' : 'asc');
+            const nextSortState = resolveNextAdminTableSortState({
+                currentSortBy: sortBy,
+                currentSortOrder: sortOrder,
+                nextSortBy: field,
+                resolveDefaultSortOrder: (nextSortBy) => (nextSortBy === 'createdAt' ? 'desc' : 'asc'),
+            });
+
+            setSortBy(nextSortState.sortBy);
+            setSortOrder(nextSortState.sortOrder);
+            setPage(1);
         },
         [sortBy, sortOrder],
     );
@@ -445,8 +449,6 @@ export function useChatFeedbackState({ initialAgentName, formatText }: UseChatFe
         }
     }, [agentName, applyChatFeedbackResponse, formatText, loadChatFeedback]);
 
-    const isSortedBy = useCallback((field: ChatFeedbackSortField) => sortBy === field, [sortBy]);
-
     const goToPreviousPage = useCallback(() => {
         setPage((previousPage) => Math.max(1, previousPage - 1));
     }, []);
@@ -467,6 +469,7 @@ export function useChatFeedbackState({ initialAgentName, formatText }: UseChatFe
         totalPages,
         agentName,
         searchInput,
+        sortBy,
         sortOrder,
         selectedThread,
         loading,
@@ -482,7 +485,6 @@ export function useChatFeedbackState({ initialAgentName, formatText }: UseChatFe
         handleViewChat,
         handleDeleteRow,
         handleClearAgentFeedback,
-        isSortedBy,
         goToPreviousPage,
         goToNextPage,
         closeThreadDialog,

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

@@ -0,0 +1,134 @@
+import { MockedChat } from '@promptbook-local/components';
+import { CHAT_VISUAL_MODES } from '../../../constants/chatVisualMode';
+import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
+import { ChatHistoryPagination } from './ChatHistoryPagination';
+import { ChatHistoryThreadList } from './ChatHistoryThreadList';
+import type { UseChatHistoryState } from './useChatHistoryState';
+
+/**
+ * Props for ChatHistoryChatView.
+ */
+type ChatHistoryChatViewProps = Pick<
+    UseChatHistoryState,
+    | 'chatId'
+    | 'selectedThread'
+    | 'chatMessages'
+    | 'threads'
+    | 'threadsLoading'
+    | 'handleChatThreadChange'
+    | 'handleCreateMockFromChatView'
+    | 'isCreatingMock'
+    | 'total'
+    | 'page'
+    | 'pageSize'
+    | 'totalPages'
+    | 'goToPreviousPage'
+    | 'goToNextPage'
+> & {
+    /**
+     * Active text formatter for agent naming.
+     */
+    formatText: (text: string) => string;
+
+    /**
+     * Active UI language used for date formatting.
+     */
+    language: ServerLanguageCode;
+};
+
+/**
+ * Renders the chat transcript view of the admin chat history.
+ *
+ * When no chat thread is selected it shows the list of recorded threads; once a
+ * thread is opened it renders that single conversation as a chat. The transcript
+ * is always shown in bubble mode so recorded chats stay readable regardless of the
+ * article-mode control-panel preference, and threads are never mixed together.
+ *
+ * @private function of <ChatHistoryClient/>
+ */
+export function ChatHistoryChatView({
+    chatId,
+    selectedThread,
+    chatMessages,
+    threads,
+    threadsLoading,
+    handleChatThreadChange,
+    handleCreateMockFromChatView,
+    isCreatingMock,
+    total,
+    page,
+    pageSize,
+    totalPages,
+    goToPreviousPage,
+    goToNextPage,
+    formatText,
+    language,
+}: ChatHistoryChatViewProps) {
+    if (!chatId) {
+        return (
+            <div className="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
+                <ChatHistoryThreadList
+                    threads={threads}
+                    threadsLoading={threadsLoading}
+                    handleChatThreadChange={handleChatThreadChange}
+                    formatText={formatText}
+                    language={language}
+                />
+            </div>
+        );
+    }
+
+    return (
+        <div className="bg-white rounded-lg shadow border border-gray-200 overflow-hidden flex flex-col">
+            <div className="flex flex-wrap items-center justify-between gap-3 border-b border-gray-200 bg-gray-50 p-3">
+                <div className="flex items-center gap-3">
+                    <button
+                        type="button"
+                        onClick={() => handleChatThreadChange('')}
+                        className="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
+                        title="Back to the list of chat threads"
+                    >
+                        ← All threads
+                    </button>
+                    <div className="min-w-0">
+                        <div className="truncate text-sm font-medium text-gray-900">
+                            {selectedThread?.title || 'Recorded chat'}
+                        </div>
+                        {selectedThread && (
+                            <div className="truncate text-xs text-gray-500">{selectedThread.agentName}</div>
+                        )}
+                    </div>
+                </div>
+                <button
+                    type="button"
+                    onClick={() => void handleCreateMockFromChatView()}
+                    disabled={isCreatingMock}
+                    className="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 disabled:cursor-not-allowed disabled:opacity-60"
+                    title="Create a mocked chat preset from the shown messages"
+                >
+                    {isCreatingMock ? 'Creating mock…' : 'Create mock'}
+                </button>
+            </div>
+            <div className="h-[800px] relative">
+                <MockedChat
+                    messages={chatMessages}
+                    isPausable={true}
+                    isResettable={false}
+                    isSaveButtonEnabled={true}
+                    layout="STANDALONE"
+                    visualMode={CHAT_VISUAL_MODES.BUBBLE_MODE}
+                />
+            </div>
+            <div className="p-4 bg-gray-50 border-t border-gray-200">
+                <ChatHistoryPagination
+                    total={total}
+                    page={page}
+                    pageSize={pageSize}
+                    totalPages={totalPages}
+                    goToPreviousPage={goToPreviousPage}
+                    goToNextPage={goToNextPage}
+                />
+            </div>
+        </div>
+    );
+}

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

@@ -1,10 +1,9 @@
 'use client';
 
-import { MockedChat } from '@promptbook-local/components';
 import { useAgentNaming } from '../../../components/AgentNaming/AgentNamingContext';
 import { useServerLanguage } from '../../../components/ServerLanguage/ServerLanguageProvider';
+import { ChatHistoryChatView } from './ChatHistoryChatView';
 import { ChatHistoryFiltersCard } from './ChatHistoryFiltersCard';
-import { ChatHistoryPagination } from './ChatHistoryPagination';
 import { ChatHistoryTable } from './ChatHistoryTable';
 import { useChatHistoryState } from './useChatHistoryState';
 
@@ -16,15 +15,38 @@ type ChatHistoryClientProps = {
      * Optional initial agent filter, taken from the URL query.
      */
     initialAgentName?: string;
+    /**
+     * Optional initial chat thread filter, taken from the URL query.
+     */
+    initialChatId?: string;
+    /**
+     * Optional initial user filter, taken from the URL query.
+     */
+    initialUserId?: number;
+    /**
+     * Optional initial view mode, taken from the URL query.
+     */
+    initialViewMode?: 'table' | 'chat';
 };
 
 /**
  * Handles chat history client.
  */
-export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps) {
+export function ChatHistoryClient({
+    initialAgentName,
+    initialChatId,
+    initialUserId,
+    initialViewMode,
+}: ChatHistoryClientProps) {
     const { formatText } = useAgentNaming();
     const { language } = useServerLanguage();
-    const chatHistoryState = useChatHistoryState({ initialAgentName, formatText });
+    const chatHistoryState = useChatHistoryState({
+        initialAgentName,
+        initialChatId,
+        initialUserId,
+        initialViewMode,
+        formatText,
+    });
 
     return (
         <div className="container mx-auto px-4 py-8 space-y-6">
@@ -88,33 +110,35 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
                 agents={chatHistoryState.agents}
                 agentsLoading={chatHistoryState.agentsLoading}
                 handleAgentChange={chatHistoryState.handleAgentChange}
+                chatId={chatHistoryState.chatId}
+                threads={chatHistoryState.threads}
+                threadsLoading={chatHistoryState.threadsLoading}
+                handleChatThreadChange={chatHistoryState.handleChatThreadChange}
                 pageSize={chatHistoryState.pageSize}
                 handlePageSizeChange={chatHistoryState.handlePageSizeChange}
                 handleClearAgentHistory={chatHistoryState.handleClearAgentHistory}
+                userId={chatHistoryState.userId}
             />
 
             {chatHistoryState.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={chatHistoryState.chatMessages}
-                            isPausable={true}
-                            isResettable={false}
-                            isSaveButtonEnabled={true}
-                            layout="STANDALONE"
-                        />
-                    </div>
-                    <div className="p-4 bg-gray-50 border-t border-gray-200">
-                        <ChatHistoryPagination
-                            total={chatHistoryState.total}
-                            page={chatHistoryState.page}
-                            pageSize={chatHistoryState.pageSize}
-                            totalPages={chatHistoryState.totalPages}
-                            goToPreviousPage={chatHistoryState.goToPreviousPage}
-                            goToNextPage={chatHistoryState.goToNextPage}
-                        />
-                    </div>
-                </div>
+                <ChatHistoryChatView
+                    formatText={formatText}
+                    language={language}
+                    chatId={chatHistoryState.chatId}
+                    selectedThread={chatHistoryState.selectedThread}
+                    chatMessages={chatHistoryState.chatMessages}
+                    threads={chatHistoryState.threads}
+                    threadsLoading={chatHistoryState.threadsLoading}
+                    handleChatThreadChange={chatHistoryState.handleChatThreadChange}
+                    handleCreateMockFromChatView={chatHistoryState.handleCreateMockFromChatView}
+                    isCreatingMock={chatHistoryState.isCreatingMock}
+                    total={chatHistoryState.total}
+                    page={chatHistoryState.page}
+                    pageSize={chatHistoryState.pageSize}
+                    totalPages={chatHistoryState.totalPages}
+                    goToPreviousPage={chatHistoryState.goToPreviousPage}
+                    goToNextPage={chatHistoryState.goToNextPage}
+                />
             ) : (
                 <ChatHistoryTable
                     formatText={formatText}
@@ -126,10 +150,12 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
                     page={chatHistoryState.page}
                     pageSize={chatHistoryState.pageSize}
                     totalPages={chatHistoryState.totalPages}
+                    sortBy={chatHistoryState.sortBy}
                     sortOrder={chatHistoryState.sortOrder}
                     handleSortChange={chatHistoryState.handleSortChange}
-                    isSortedBy={chatHistoryState.isSortedBy}
                     handleDeleteRow={chatHistoryState.handleDeleteRow}
+                    handleCreateMockFromRow={chatHistoryState.handleCreateMockFromRow}
+                    isCreatingMock={chatHistoryState.isCreatingMock}
                     goToPreviousPage={chatHistoryState.goToPreviousPage}
                     goToNextPage={chatHistoryState.goToNextPage}
                 />

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

@@ -1,6 +1,11 @@
 import { Card } from '../../../components/Homepage/Card';
 import type { UseChatHistoryState } from './useChatHistoryState';
 
+/**
+ * Legacy phrase used for the user filter summary.
+ */
+const SHOWING_CHAT_HISTORY_FOR_USER_TEXT = 'Showing chat history for user';
+
 /**
  * Props for ChatHistoryFiltersCard.
  */
@@ -13,9 +18,14 @@ type ChatHistoryFiltersCardProps = Pick<
     | 'agents'
     | 'agentsLoading'
     | 'handleAgentChange'
+    | 'chatId'
+    | 'threads'
+    | 'threadsLoading'
+    | 'handleChatThreadChange'
     | 'pageSize'
     | 'handlePageSizeChange'
     | 'handleClearAgentHistory'
+    | 'userId'
 > & {
     /**
      * Active text formatter for agent naming.
@@ -37,10 +47,16 @@ export function ChatHistoryFiltersCard({
     agents,
     agentsLoading,
     handleAgentChange,
+    chatId,
+    threads,
+    threadsLoading,
+    handleChatThreadChange,
     pageSize,
     handlePageSizeChange,
     handleClearAgentHistory,
+    userId,
 }: ChatHistoryFiltersCardProps) {
+    const isChatThreadFilterEnabled = Boolean(agentName);
     return (
         <Card>
             <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
@@ -84,7 +100,37 @@ export function ChatHistoryFiltersCard({
                                 </option>
                             ))}
                         </select>
-                        {agentsLoading && <span className="text-xs text-gray-400">{formatText('Loading agents…')}</span>}
+                        {agentsLoading && (
+                            <span className="text-xs text-gray-400">{formatText('Loading agents…')}</span>
+                        )}
+                    </div>
+
+                    <div className="flex flex-col gap-1">
+                        <label htmlFor="chatThreadFilter" className="text-sm font-medium text-gray-700">
+                            Chat thread
+                        </label>
+                        <select
+                            id="chatThreadFilter"
+                            value={chatId}
+                            onChange={(event) => handleChatThreadChange(event.target.value)}
+                            disabled={!isChatThreadFilterEnabled}
+                            className="w-full md:w-64 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400"
+                        >
+                            <option value="">All threads</option>
+                            {threads.map((thread) => (
+                                <option key={thread.chatId} value={thread.chatId}>
+                                    {thread.title} ({thread.messageCount})
+                                </option>
+                            ))}
+                        </select>
+                        {isChatThreadFilterEnabled && threadsLoading && (
+                            <span className="text-xs text-gray-400">Loading chat threads…</span>
+                        )}
+                        {!isChatThreadFilterEnabled && (
+                            <span className="text-xs text-gray-400">
+                                {formatText('Pick an agent to filter by chat thread')}
+                            </span>
+                        )}
                     </div>
 
                     <div className="flex flex-col gap-1">
@@ -121,6 +167,12 @@ export function ChatHistoryFiltersCard({
                     </button>
                 </div>
             )}
+            {userId ? (
+                <div className="mt-4 rounded-md border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-800">
+                    {formatText(SHOWING_CHAT_HISTORY_FOR_USER_TEXT)}{' '}
+                    <span className="font-semibold">#{userId}</span>.
+                </div>
+            ) : null}
         </Card>
     );
 }