@promptbook/cli 0.113.0-8 → 0.114.0-0

package/apps/agents-server/src/app/admin/_components/S3BrowserPanel.tsx

@@ -0,0 +1,292 @@
+import { ExternalLink, File, Folder, FolderUp, RefreshCcw } from 'lucide-react';
+import Link from 'next/link';
+
+import type { InternalS3BrowserEntry, InternalS3BrowserSnapshot } from '../../../utils/internalS3/internalS3Types';
+import { formatResourceBytes } from '../../../utils/resourceMonitor/formatResourceMonitorValue';
+
+/**
+ * Human-readable limit matching the S3 browser listing cap.
+ *
+ * @private shared storage admin UI constant
+ */
+const S3_BROWSER_VISIBLE_LIMIT_LABEL = '1,000';
+
+/**
+ * Props accepted by `S3BrowserPanel`.
+ *
+ * @private shared storage admin UI type
+ */
+type S3BrowserPanelProps = {
+    /**
+     * Directory snapshot to render.
+     */
+    readonly browser: InternalS3BrowserSnapshot;
+
+    /**
+     * Route that owns the `prefix` query parameter.
+     */
+    readonly route: string;
+
+    /**
+     * Panel heading.
+     */
+    readonly title?: string;
+
+    /**
+     * Label shown before the absolute S3 prefix.
+     */
+    readonly prefixLabel?: string;
+
+    /**
+     * Empty-state message.
+     */
+    readonly emptyMessage?: string;
+};
+
+/**
+ * Shared directory-style S3 object browser used by storage administration pages.
+ *
+ * @param props - Browser panel props.
+ * @returns S3 browser panel.
+ * @private shared storage admin UI component
+ */
+export function S3BrowserPanel({
+    browser,
+    route,
+    title = 'File browser',
+    prefixLabel = 'S3 prefix',
+    emptyMessage = 'No objects found.',
+}: S3BrowserPanelProps) {
+    return (
+        <section className="rounded-lg border border-gray-200 bg-white shadow-sm">
+            <div className="flex flex-col gap-3 border-b border-gray-200 px-5 py-4 md:flex-row md:items-start md:justify-between">
+                <div>
+                    <div className="flex items-center gap-2">
+                        <Folder className="h-5 w-5 text-gray-500" aria-hidden />
+                        <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
+                    </div>
+                    <S3BrowserBreadcrumbs relativePrefix={browser.relativePrefix} route={route} />
+                    <p className="mt-2 text-xs text-gray-500">
+                        {prefixLabel}:{' '}
+                        <span className="font-mono text-gray-700">{browser.absolutePrefix || 'bucket root'}</span>
+                    </p>
+                </div>
+                <Link
+                    href={buildS3BrowserHref(route, browser.relativePrefix)}
+                    className="inline-flex items-center gap-2 rounded-md border border-blue-200 bg-blue-50 px-3 py-1.5 text-xs font-semibold text-blue-700 hover:bg-blue-100"
+                >
+                    <RefreshCcw className="h-3.5 w-3.5" />
+                    Refresh browser
+                </Link>
+            </div>
+
+            {!browser.isAvailable ? (
+                <div className="px-5 py-6 text-sm text-rose-700">{browser.errorMessage}</div>
+            ) : (
+                <S3BrowserTable browser={browser} route={route} emptyMessage={emptyMessage} />
+            )}
+        </section>
+    );
+}
+
+/**
+ * Renders breadcrumb links for the current S3 browser prefix.
+ *
+ * @param props - Breadcrumb props.
+ * @returns Breadcrumb navigation.
+ * @private helper of `S3BrowserPanel`
+ */
+function S3BrowserBreadcrumbs({ relativePrefix, route }: { readonly relativePrefix: string; readonly route: string }) {
+    const segments = relativePrefix.replace(/\/+$/u, '').split('/').filter(Boolean);
+
+    let cumulativePrefix = '';
+
+    return (
+        <nav className="mt-2 flex flex-wrap items-center gap-1 text-sm text-gray-500" aria-label="S3 prefix">
+            <Link href={route} className="font-medium text-blue-600 hover:underline">
+                root
+            </Link>
+            {segments.map((segment) => {
+                cumulativePrefix = `${cumulativePrefix}${segment}/`;
+
+                return (
+                    <span key={cumulativePrefix} className="inline-flex items-center gap-1">
+                        <span className="text-gray-300">/</span>
+                        <Link
+                            href={buildS3BrowserHref(route, cumulativePrefix)}
+                            className="font-medium text-blue-600 hover:underline"
+                        >
+                            {segment}
+                        </Link>
+                    </span>
+                );
+            })}
+        </nav>
+    );
+}
+
+/**
+ * Renders S3 browser entries in a table.
+ *
+ * @param props - Table props.
+ * @returns Browser table.
+ * @private helper of `S3BrowserPanel`
+ */
+function S3BrowserTable({
+    browser,
+    route,
+    emptyMessage,
+}: {
+    readonly browser: InternalS3BrowserSnapshot;
+    readonly route: string;
+    readonly emptyMessage: string;
+}) {
+    const isEmpty = browser.entries.length === 0 && browser.parentPrefix === null;
+
+    return (
+        <>
+            <div className="overflow-x-auto">
+                <table className="w-full text-left text-sm text-gray-500">
+                    <thead className="border-b bg-gray-50 text-xs uppercase text-gray-700">
+                        <tr>
+                            <th className="px-5 py-3">Name</th>
+                            <th className="px-5 py-3">Type</th>
+                            <th className="px-5 py-3 text-right">Size</th>
+                            <th className="px-5 py-3">Last Modified</th>
+                            <th className="px-5 py-3">S3 Key</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {browser.parentPrefix !== null ? (
+                            <tr className="border-b bg-white hover:bg-gray-50">
+                                <td className="px-5 py-3">
+                                    <Link
+                                        href={buildS3BrowserHref(route, browser.parentPrefix)}
+                                        className="inline-flex items-center gap-2 font-medium text-blue-600 hover:underline"
+                                    >
+                                        <FolderUp className="h-4 w-4" aria-hidden />
+                                        ..
+                                    </Link>
+                                </td>
+                                <td className="px-5 py-3">Parent folder</td>
+                                <td className="px-5 py-3 text-right">—</td>
+                                <td className="px-5 py-3">—</td>
+                                <td className="px-5 py-3 font-mono text-xs text-gray-400">—</td>
+                            </tr>
+                        ) : null}
+                        {browser.entries.map((entry) => (
+                            <S3BrowserRow key={`${entry.kind}:${entry.key}`} entry={entry} route={route} />
+                        ))}
+                        {isEmpty ? (
+                            <tr>
+                                <td colSpan={5} className="px-5 py-6 text-center text-gray-500">
+                                    {emptyMessage}
+                                </td>
+                            </tr>
+                        ) : null}
+                    </tbody>
+                </table>
+            </div>
+            {browser.isTruncated ? (
+                <div className="border-t border-amber-200 bg-amber-50 px-5 py-3 text-sm text-amber-900">
+                    Showing the first {S3_BROWSER_VISIBLE_LIMIT_LABEL} entries in this prefix.
+                </div>
+            ) : null}
+        </>
+    );
+}
+
+/**
+ * Renders one S3 browser table row.
+ *
+ * @param props - Row props.
+ * @returns Browser row.
+ * @private helper of `S3BrowserPanel`
+ */
+function S3BrowserRow({ entry, route }: { readonly entry: InternalS3BrowserEntry; readonly route: string }) {
+    const Icon = entry.kind === 'directory' ? Folder : File;
+
+    return (
+        <tr className="border-b bg-white hover:bg-gray-50">
+            <td className="px-5 py-3">
+                {entry.kind === 'directory' && entry.relativePrefix !== null ? (
+                    <Link
+                        href={buildS3BrowserHref(route, entry.relativePrefix)}
+                        className="inline-flex max-w-md items-center gap-2 font-medium text-blue-600 hover:underline"
+                    >
+                        <Icon className="h-4 w-4 shrink-0" aria-hidden />
+                        <span className="truncate" title={entry.name}>
+                            {entry.name}
+                        </span>
+                    </Link>
+                ) : entry.publicUrl ? (
+                    <a
+                        href={entry.publicUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="inline-flex max-w-md items-center gap-2 font-medium text-blue-600 hover:underline"
+                    >
+                        <Icon className="h-4 w-4 shrink-0" aria-hidden />
+                        <span className="truncate" title={entry.name}>
+                            {entry.name}
+                        </span>
+                        <ExternalLink className="h-3.5 w-3.5 shrink-0" aria-hidden />
+                    </a>
+                ) : (
+                    <span className="inline-flex max-w-md items-center gap-2 text-gray-900">
+                        <Icon className="h-4 w-4 shrink-0 text-gray-400" aria-hidden />
+                        <span className="truncate" title={entry.name}>
+                            {entry.name}
+                        </span>
+                    </span>
+                )}
+            </td>
+            <td className="px-5 py-3">{entry.kind === 'directory' ? 'Folder' : 'Object'}</td>
+            <td className="px-5 py-3 text-right">
+                {entry.sizeBytes === null ? '—' : formatResourceBytes(entry.sizeBytes)}
+            </td>
+            <td className="whitespace-nowrap px-5 py-3">{formatS3BrowserTimestamp(entry.lastModified)}</td>
+            <td className="max-w-lg px-5 py-3">
+                <span className="block truncate font-mono text-xs text-gray-500" title={entry.key}>
+                    {entry.key}
+                </span>
+            </td>
+        </tr>
+    );
+}
+
+/**
+ * Formats an S3 object timestamp.
+ *
+ * @param timestamp - ISO timestamp, or `null`.
+ * @returns Display value.
+ * @private helper of `S3BrowserPanel`
+ */
+function formatS3BrowserTimestamp(timestamp: string | null): string {
+    if (!timestamp) {
+        return '—';
+    }
+
+    return new Date(timestamp).toLocaleString('en-US', {
+        dateStyle: 'medium',
+        timeStyle: 'medium',
+    });
+}
+
+/**
+ * Builds a route href for one S3 browser prefix.
+ *
+ * @param route - Route that owns the `prefix` query parameter.
+ * @param relativePrefix - Relative S3 browser prefix.
+ * @returns Browser route href.
+ * @private helper of `S3BrowserPanel`
+ */
+function buildS3BrowserHref(route: string, relativePrefix: string): string {
+    if (!relativePrefix) {
+        return route;
+    }
+
+    const searchParams = new URLSearchParams();
+    searchParams.set('prefix', relativePrefix);
+    return `${route}?${searchParams.toString()}`;
+}

package/apps/agents-server/src/app/admin/_components/adminTableSorting.ts

@@ -0,0 +1,266 @@
+'use client';
+
+import { useCallback, useMemo, useState } from 'react';
+
+/**
+ * Sort direction supported by admin tables.
+ *
+ * @private internal admin table utility
+ */
+export type AdminTableSortOrder = 'asc' | 'desc';
+
+/**
+ * Sort state shared by admin table controls.
+ *
+ * @private internal admin table utility
+ */
+export type AdminTableSortState<TSortField extends string> = {
+    readonly sortBy: TSortField;
+    readonly sortOrder: AdminTableSortOrder;
+};
+
+/**
+ * Values that can be compared by the generic admin table sorter.
+ *
+ * @private internal admin table utility
+ */
+export type AdminTableSortableValue = string | number | boolean | Date | null | undefined;
+
+/**
+ * Resolves the comparable value for one row and active sort field.
+ *
+ * @private internal admin table utility
+ */
+export type AdminTableSortableValueResolver<TRow, TSortField extends string> = (
+    row: TRow,
+    sortBy: TSortField,
+) => AdminTableSortableValue;
+
+/**
+ * Resolves the default direction when a user switches to another sort field.
+ *
+ * @private internal admin table utility
+ */
+export type AdminTableDefaultSortOrderResolver<TSortField extends string> = (
+    sortBy: TSortField,
+) => AdminTableSortOrder;
+
+/**
+ * Default direction for newly selected columns.
+ *
+ * @private internal admin table utility
+ */
+const DEFAULT_ADMIN_TABLE_SORT_ORDER: AdminTableSortOrder = 'asc';
+
+/**
+ * Collator used for human-friendly text sorting.
+ *
+ * @private internal admin table utility
+ */
+const ADMIN_TABLE_STRING_COLLATOR = new Intl.Collator(undefined, {
+    numeric: true,
+    sensitivity: 'base',
+});
+
+/**
+ * Inputs required to resolve the next sort state.
+ *
+ * @private internal admin table utility
+ */
+type ResolveNextAdminTableSortStateOptions<TSortField extends string> = {
+    readonly currentSortBy: TSortField;
+    readonly currentSortOrder: AdminTableSortOrder;
+    readonly nextSortBy: TSortField;
+    readonly resolveDefaultSortOrder?: AdminTableDefaultSortOrderResolver<TSortField>;
+};
+
+/**
+ * Options accepted by `useAdminTableSorting`.
+ *
+ * @private internal admin table utility
+ */
+type UseAdminTableSortingOptions<TRow, TSortField extends string> = {
+    readonly defaultSortBy: TSortField;
+    readonly defaultSortOrder?: AdminTableSortOrder;
+    readonly resolveDefaultSortOrder?: AdminTableDefaultSortOrderResolver<TSortField>;
+    readonly rows: ReadonlyArray<TRow>;
+    readonly resolveSortValue: AdminTableSortableValueResolver<TRow, TSortField>;
+};
+
+/**
+ * Result returned from `useAdminTableSorting`.
+ *
+ * @private internal admin table utility
+ */
+type UseAdminTableSortingResult<TRow, TSortField extends string> = AdminTableSortState<TSortField> & {
+    readonly handleSortChange: (sortBy: TSortField) => void;
+    readonly isSortedBy: (sortBy: TSortField) => boolean;
+    readonly sortedRows: Array<TRow>;
+};
+
+/**
+ * Resolves the next admin table sort state after a header click.
+ *
+ * @private internal admin table utility
+ */
+export function resolveNextAdminTableSortState<TSortField extends string>(
+    options: ResolveNextAdminTableSortStateOptions<TSortField>,
+): AdminTableSortState<TSortField> {
+    if (options.currentSortBy === options.nextSortBy) {
+        return {
+            sortBy: options.currentSortBy,
+            sortOrder: options.currentSortOrder === 'asc' ? 'desc' : 'asc',
+        };
+    }
+
+    return {
+        sortBy: options.nextSortBy,
+        sortOrder: options.resolveDefaultSortOrder?.(options.nextSortBy) ?? DEFAULT_ADMIN_TABLE_SORT_ORDER,
+    };
+}
+
+/**
+ * Sorts admin table rows by a resolved comparable value.
+ *
+ * @private internal admin table utility
+ */
+export function sortAdminTableRows<TRow, TSortField extends string>(options: {
+    readonly rows: ReadonlyArray<TRow>;
+    readonly sortBy: TSortField;
+    readonly sortOrder: AdminTableSortOrder;
+    readonly resolveSortValue: AdminTableSortableValueResolver<TRow, TSortField>;
+}): Array<TRow> {
+    return options.rows
+        .map((row, index) => ({ index, row }))
+        .sort((firstItem, secondItem) => {
+            const comparison =
+                compareAdminTableSortableValues(
+                    options.resolveSortValue(firstItem.row, options.sortBy),
+                    options.resolveSortValue(secondItem.row, options.sortBy),
+                    options.sortOrder,
+                ) || firstItem.index - secondItem.index;
+
+            return comparison;
+        })
+        .map((item) => item.row);
+}
+
+/**
+ * Keeps admin table sorting state and returns sorted rows for local datasets.
+ *
+ * @private internal admin table utility
+ */
+export function useAdminTableSorting<TRow, TSortField extends string>(
+    options: UseAdminTableSortingOptions<TRow, TSortField>,
+): UseAdminTableSortingResult<TRow, TSortField> {
+    const [sortState, setSortState] = useState<AdminTableSortState<TSortField>>({
+        sortBy: options.defaultSortBy,
+        sortOrder: options.defaultSortOrder ?? DEFAULT_ADMIN_TABLE_SORT_ORDER,
+    });
+
+    const handleSortChange = useCallback(
+        (sortBy: TSortField): void => {
+            setSortState((currentSortState) =>
+                resolveNextAdminTableSortState({
+                    currentSortBy: currentSortState.sortBy,
+                    currentSortOrder: currentSortState.sortOrder,
+                    nextSortBy: sortBy,
+                    resolveDefaultSortOrder: options.resolveDefaultSortOrder,
+                }),
+            );
+        },
+        [options.resolveDefaultSortOrder],
+    );
+
+    const isSortedBy = useCallback((sortBy: TSortField): boolean => sortState.sortBy === sortBy, [sortState.sortBy]);
+
+    const sortedRows = useMemo(
+        () =>
+            sortAdminTableRows({
+                rows: options.rows,
+                sortBy: sortState.sortBy,
+                sortOrder: sortState.sortOrder,
+                resolveSortValue: options.resolveSortValue,
+            }),
+        [options.resolveSortValue, options.rows, sortState.sortBy, sortState.sortOrder],
+    );
+
+    return {
+        sortBy: sortState.sortBy,
+        sortOrder: sortState.sortOrder,
+        handleSortChange,
+        isSortedBy,
+        sortedRows,
+    };
+}
+
+/**
+ * Compares two sortable values using the requested direction.
+ *
+ * Missing values stay last regardless of the active direction.
+ *
+ * @private internal admin table utility
+ */
+function compareAdminTableSortableValues(
+    firstValue: AdminTableSortableValue,
+    secondValue: AdminTableSortableValue,
+    sortOrder: AdminTableSortOrder,
+): number {
+    const isFirstValueMissing = firstValue === null || firstValue === undefined || firstValue === '';
+    const isSecondValueMissing = secondValue === null || secondValue === undefined || secondValue === '';
+
+    if (isFirstValueMissing && isSecondValueMissing) {
+        return 0;
+    }
+    if (isFirstValueMissing) {
+        return 1;
+    }
+    if (isSecondValueMissing) {
+        return -1;
+    }
+
+    const comparison = compareDefinedAdminTableSortableValues(firstValue, secondValue);
+    return sortOrder === 'asc' ? comparison : -comparison;
+}
+
+/**
+ * Compares two non-empty sortable values.
+ *
+ * @private internal admin table utility
+ */
+function compareDefinedAdminTableSortableValues(
+    firstValue: Exclude<AdminTableSortableValue, null | undefined>,
+    secondValue: Exclude<AdminTableSortableValue, null | undefined>,
+): number {
+    if (firstValue instanceof Date || secondValue instanceof Date) {
+        const firstTimeValue = getAdminTableTimeValue(firstValue);
+        const secondTimeValue = getAdminTableTimeValue(secondValue);
+
+        if (Number.isFinite(firstTimeValue) && Number.isFinite(secondTimeValue)) {
+            return firstTimeValue - secondTimeValue;
+        }
+    }
+
+    if (typeof firstValue === 'number' && typeof secondValue === 'number') {
+        return firstValue - secondValue;
+    }
+
+    if (typeof firstValue === 'boolean' && typeof secondValue === 'boolean') {
+        return Number(firstValue) - Number(secondValue);
+    }
+
+    return ADMIN_TABLE_STRING_COLLATOR.compare(String(firstValue), String(secondValue));
+}
+
+/**
+ * Converts sortable date-like values into numeric timestamps.
+ *
+ * @private internal admin table utility
+ */
+function getAdminTableTimeValue(value: Exclude<AdminTableSortableValue, null | undefined>): number {
+    if (value instanceof Date) {
+        return value.getTime();
+    }
+
+    return new Date(String(value)).getTime();
+}

package/apps/agents-server/src/app/admin/api-tokens/ApiTokensClient.tsx

@@ -7,6 +7,8 @@ import { SecretInput } from '../../../components/SecretInput/SecretInput';
 import { showConfirm } from '../../../components/AsyncDialogs/asyncDialogs';
 import { ApiTokenEntry, createApiToken, deleteApiToken, fetchApiTokens } from '../../../utils/apiTokensClient';
 import { formatServerLanguageHumanReadableDate } from '../../../utils/localization/formatServerLanguageHumanReadableDate';
+import { AdminSortableTableHeaderCell } from '../_components/AdminSortableTableHeaderCell';
+import { useAdminTableSorting, type AdminTableSortOrder } from '../_components/adminTableSorting';
 
 /**
  * Props for rendering a single API token in a masked input.
@@ -16,6 +18,11 @@ type TokenSecretFieldProps = {
     onCopy: (text: string) => void;
 };
 
+/**
+ * Sortable API token table columns.
+ */
+type ApiTokenTableSortField = 'token' | 'note' | 'createdAt';
+
 /**
  * Renders one token value using the shared secret field with visibility toggle and copy action.
  */
@@ -42,6 +49,20 @@ function TokenSecretField({ token, onCopy }: TokenSecretFieldProps) {
     );
 }
 
+/**
+ * Resolves the initial direction used when switching API token sort fields.
+ */
+function resolveApiTokenDefaultSortOrder(sortBy: ApiTokenTableSortField): AdminTableSortOrder {
+    return sortBy === 'createdAt' ? 'desc' : 'asc';
+}
+
+/**
+ * Resolves a comparable value for one API token row.
+ */
+function resolveApiTokenSortValue(entry: ApiTokenEntry, sortBy: ApiTokenTableSortField) {
+    return entry[sortBy];
+}
+
 /**
  * Renders the admin API token management UI.
  */
@@ -119,6 +140,14 @@ export function ApiTokensClient() {
         // You could add a toast notification here
     };
 
+    const tokenSorting = useAdminTableSorting<ApiTokenEntry, ApiTokenTableSortField>({
+        rows: tokens,
+        defaultSortBy: 'createdAt',
+        defaultSortOrder: 'desc',
+        resolveDefaultSortOrder: resolveApiTokenDefaultSortOrder,
+        resolveSortValue: resolveApiTokenSortValue,
+    });
+
     if (loading && tokens.length === 0) {
         return <div className="p-8 text-center">Loading tokens...</div>;
     }
@@ -156,15 +185,36 @@ export function ApiTokensClient() {
                 <table className="min-w-full divide-y divide-gray-200">
                     <thead className="bg-gray-50">
                         <tr>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            <AdminSortableTableHeaderCell
+                                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                                label="token"
+                                sortBy="token"
+                                activeSortBy={tokenSorting.sortBy}
+                                sortOrder={tokenSorting.sortOrder}
+                                onSortChange={tokenSorting.handleSortChange}
+                            >
                                 Token
-                            </th>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            </AdminSortableTableHeaderCell>
+                            <AdminSortableTableHeaderCell
+                                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                                label="note"
+                                sortBy="note"
+                                activeSortBy={tokenSorting.sortBy}
+                                sortOrder={tokenSorting.sortOrder}
+                                onSortChange={tokenSorting.handleSortChange}
+                            >
                                 Note
-                            </th>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            </AdminSortableTableHeaderCell>
+                            <AdminSortableTableHeaderCell
+                                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                                label="created at"
+                                sortBy="createdAt"
+                                activeSortBy={tokenSorting.sortBy}
+                                sortOrder={tokenSorting.sortOrder}
+                                onSortChange={tokenSorting.handleSortChange}
+                            >
                                 Created At
-                            </th>
+                            </AdminSortableTableHeaderCell>
                             <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                 Actions
                             </th>
@@ -178,7 +228,7 @@ export function ApiTokensClient() {
                                 </td>
                             </tr>
                         ) : (
-                            tokens.map((entry) => (
+                            tokenSorting.sortedRows.map((entry) => (
                                 <tr key={entry.id}>
                                     <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 font-mono">
                                         <TokenSecretField token={entry.token} onCopy={copyToClipboard} />

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

@@ -78,9 +78,9 @@ export function ChatFeedbackClient({ initialAgentName }: ChatFeedbackClientProps
                 page={chatFeedbackState.page}
                 pageSize={chatFeedbackState.pageSize}
                 totalPages={chatFeedbackState.totalPages}
+                sortBy={chatFeedbackState.sortBy}
                 sortOrder={chatFeedbackState.sortOrder}
                 handleSortChange={chatFeedbackState.handleSortChange}
-                isSortedBy={chatFeedbackState.isSortedBy}
                 handleViewChat={chatFeedbackState.handleViewChat}
                 handleDeleteRow={chatFeedbackState.handleDeleteRow}
                 goToPreviousPage={chatFeedbackState.goToPreviousPage}