= ({
-
+
diff --git a/src/components/ChatDemo/MessageBubble.tsx b/src/components/ChatDemo/MessageBubble.tsx
index 54b1281..dca0db7 100644
--- a/src/components/ChatDemo/MessageBubble.tsx
+++ b/src/components/ChatDemo/MessageBubble.tsx
@@ -10,7 +10,7 @@ const MessageBubble: React.FC<{ message: Message; isStreaming?: boolean }> = ({
return (
-
{message.content}
+
{message.content.trim()}
);
@@ -21,7 +21,7 @@ const MessageBubble: React.FC<{ message: Message; isStreaming?: boolean }> = ({
className={`bg-gray-200 rounded-lg p-3 max-w-xs lg:max-w-md ${message.isStreaming ? 'animate-pulse' : ''}`}
>
- {message.content}
+ {message.content.trim()}
{message.isStreaming && (
▋
)}
diff --git a/src/components/ChatDemo/Table.tsx b/src/components/ChatDemo/Table.tsx
index 222aa8a..afbd1c5 100644
--- a/src/components/ChatDemo/Table.tsx
+++ b/src/components/ChatDemo/Table.tsx
@@ -16,6 +16,9 @@ import {
TooltipTrigger,
} from '@/components/ui/tooltip';
+// Import your HoverTruncatedCell component
+import HoverTruncatedCell from './HoverTruncatedCell';
+
export interface Column {
key: string;
label: string;
@@ -28,9 +31,12 @@ export interface Column {
truncatedSubstring?: boolean;
copyable?: boolean;
selected?: boolean;
+
+ // Optional tooltip content for the header
+ headerTooltip?: string | React.ReactNode;
}
-interface TableProps {
+export interface TableProps {
data: T[];
columns: Column[];
itemsPerPage?: number;
@@ -51,6 +57,12 @@ interface TableProps {
enableColumnToggle?: boolean;
totalEntries?: number;
getRowKey?: (item: T) => string | number;
+ /**
+ * The text to display when the table has no data.
+ * Defaults to "No data available."
+ */
+ emptyTableText?: string;
+ maxLength?: number;
}
function Table({
@@ -77,15 +89,21 @@ function Table({
const id = item[idKey];
return id ? id.toString() : Math.random().toString();
},
+ emptyTableText = 'No data available.',
+ maxLength = 20,
}: TableProps) {
const [sort, setSort] = useState(
initialSort || { key: '', order: 'asc' as const }
);
const [filters, setFilters] = useState(initialFilters || {});
+ /**
+ * Filter + Sort logic
+ */
const filteredAndSortedData = useMemo(() => {
let result = [...data];
+ // Filters
Object.entries(filters).forEach(([key, value]) => {
const column = columns.find((col) => col.key === key);
if (
@@ -104,7 +122,7 @@ function Table({
return itemValue === value;
} else if (typeof value === 'string') {
return itemValue
- .toString()
+ ?.toString()
.toLowerCase()
.includes(value.toLowerCase());
}
@@ -113,6 +131,7 @@ function Table({
}
});
+ // Sorting
if (sort.key) {
result.sort((a, b) => {
const aValue = (a as any)[sort.key];
@@ -135,6 +154,9 @@ function Table({
? Math.ceil(totalEntries / itemsPerPage)
: Math.ceil(filteredAndSortedData.length / itemsPerPage);
+ /**
+ * Pagination logic
+ */
const currentPageData = useMemo(() => {
const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
@@ -172,6 +194,9 @@ function Table({
}
};
+ /**
+ * Sorting handlers
+ */
const handleSort = (key: string) => {
const newSort: { key: string; order: 'asc' | 'desc' } = {
key,
@@ -183,6 +208,9 @@ function Table({
}
};
+ /**
+ * Filtering handlers
+ */
const handleFilter = (key: string, value: any) => {
const newFilters = { ...filters, [key]: value };
setFilters(newFilters);
@@ -191,9 +219,14 @@ function Table({
}
};
- const isAllSelected = currentPageData.every((item) =>
- selectedItems.includes(getRowKey(item).toString())
- );
+ /**
+ * Selection logic
+ */
+ const isAllSelected =
+ currentPageData.length > 0 &&
+ currentPageData.every((item) =>
+ selectedItems.includes(getRowKey(item).toString())
+ );
const handleSelectAllInternal = (checked: boolean) => {
if (onSelectAll) {
@@ -210,11 +243,17 @@ function Table({
}
};
+ /**
+ * Cell rendering logic
+ */
const renderCellContent = (item: T, col: Column) => {
if (col.renderCell) {
return col.renderCell(item);
}
+
const content = (item as any)[col.key];
+
+ // 1) If "truncate" is true, use old logic (truncate in the middle)
if (col.truncate && typeof content === 'string') {
const truncated = `${content.substring(0, 8)}...${content.slice(-4)}`;
return col.copyable ? (
@@ -222,29 +261,57 @@ function Table({
) : (
truncated
);
- } else if (col.truncatedSubstring && typeof content === 'string') {
- const maxLength = 20;
- const truncated =
- content.length > maxLength
- ? `${content.substring(0, maxLength)}...`
- : content;
- return col.copyable ? (
-
- ) : (
- truncated
- );
}
+
+ // 2) If "truncatedSubstring" is true, show a snippet + tooltip on hover
+ if (col.truncatedSubstring && typeof content === 'string') {
+ // const maxLength = 5; // or 20, depending on your preference
+ if (col.copyable) {
+ // Combine copy icon + hover-truncated snippet
+ return (
+
+ }
+ />
+ );
+ }
+ // Not copyable => just hover-truncated
+ return ;
+ }
+
+ // 3) If column is copyable but not truncated
+ if (col.copyable && typeof content === 'string') {
+ return ;
+ }
+
+ // 4) Otherwise, just return the content as is
return content;
};
+ /**
+ * We track how many rows we need to fill to maintain table height,
+ * especially if there's pagination.
+ */
const visibleRowsCount = currentPageData.length;
const emptyRowsCount = Math.max(0, itemsPerPage - visibleRowsCount);
+ /**
+ * Compute total number of columns for spanning the "empty table" row
+ */
+ const totalColumnCount =
+ columns.length + (onSelectAll ? 1 : 0) + (actions ? 1 : 0);
+
return (
- {/* Remove the column toggle popover as it's now handled in DocumentsTable */}
+ {/* Table container with forced scrollbar */}
@@ -265,14 +332,28 @@ function Table({
className="px-4 py-2 text-white text-center overflow-hidden"
>
-
{col.label}
+
+ {col.headerTooltip ? (
+
+
+
+ {col.label}
+
+ {col.headerTooltip}
+
+
+ ) : (
+ // If no tooltip, just render label
+ {col.label}
+ )}
+
{col.sortable && (
@@ -440,5 +537,529 @@ function Table
({
);
}
-export type { TableProps };
export default Table;
+
+// import { ChevronUpSquare, ChevronDownSquare, Filter } from 'lucide-react';
+// import React, { useState, useMemo } from 'react';
+
+// import { Checkbox } from '@/components/ui/checkbox';
+// import CopyableContent from '@/components/ui/CopyableContent';
+// import Pagination from '@/components/ui/pagination';
+// import {
+// Popover,
+// PopoverTrigger,
+// PopoverContent,
+// } from '@/components/ui/popover';
+// import {
+// Tooltip,
+// TooltipContent,
+// TooltipProvider,
+// TooltipTrigger,
+// } from '@/components/ui/tooltip';
+// import HoverTruncatedCell from './HoverTruncatedCell';
+
+// export interface Column {
+// key: string;
+// label: string;
+// sortable?: boolean;
+// filterable?: boolean;
+// filterType?: 'text' | 'select' | 'multiselect';
+// filterOptions?: string[];
+// renderCell?: (item: T) => React.ReactNode;
+// truncate?: boolean;
+// truncatedSubstring?: boolean;
+// copyable?: boolean;
+// selected?: boolean;
+
+// // NEW: optional tooltip content
+// headerTooltip?: string | React.ReactNode;
+// }
+
+// export interface TableProps {
+// data: T[];
+// columns: Column[];
+// itemsPerPage?: number;
+// onSelectAll?: (selected: boolean) => void;
+// onSelectItem?: (itemId: string, selected: boolean) => void;
+// selectedItems?: string[];
+// actions?: (item: T) => React.ReactNode;
+// initialSort?: { key: string; order: 'asc' | 'desc' };
+// initialFilters?: Record;
+// filters?: Record;
+// tableHeight?: string;
+// currentPage: number;
+// onPageChange: (page: number) => void;
+// onSort?: (key: string, order: 'asc' | 'desc') => void;
+// onFilter?: (filters: Record) => void;
+// showPagination?: boolean;
+// loading: boolean;
+// enableColumnToggle?: boolean;
+// totalEntries?: number;
+// getRowKey?: (item: T) => string | number;
+// /**
+// * The text to display when the table has no data.
+// * Defaults to "No data available."
+// */
+// emptyTableText?: string;
+// }
+
+// function Table({
+// data,
+// columns,
+// itemsPerPage = 10,
+// onSelectAll,
+// onSelectItem,
+// selectedItems = [],
+// actions,
+// initialSort,
+// initialFilters,
+// tableHeight = '600px',
+// currentPage,
+// onPageChange,
+// onSort,
+// onFilter,
+// showPagination = true,
+// loading,
+// enableColumnToggle = true,
+// totalEntries,
+// getRowKey = (item: T) => {
+// const idKey = 'id' as keyof T;
+// const id = item[idKey];
+// return id ? id.toString() : Math.random().toString();
+// },
+// /**
+// * The text to display when the table is empty.
+// */
+// emptyTableText = 'No data available.',
+// }: TableProps) {
+// const [sort, setSort] = useState(
+// initialSort || { key: '', order: 'asc' as const }
+// );
+// const [filters, setFilters] = useState(initialFilters || {});
+
+// /**
+// * Filter + Sort logic
+// */
+// const filteredAndSortedData = useMemo(() => {
+// let result = [...data];
+
+// // Filters
+// Object.entries(filters).forEach(([key, value]) => {
+// const column = columns.find((col) => col.key === key);
+// if (
+// column &&
+// value !== undefined &&
+// value !== null &&
+// value !== '' &&
+// ((Array.isArray(value) && value.length > 0) ||
+// typeof value === 'string')
+// ) {
+// result = result.filter((item) => {
+// const itemValue = (item as any)[key];
+// if (column.filterType === 'multiselect') {
+// return value.includes(itemValue?.toLowerCase());
+// } else if (column.filterType === 'select') {
+// return itemValue === value;
+// } else if (typeof value === 'string') {
+// return itemValue
+// ?.toString()
+// .toLowerCase()
+// .includes(value.toLowerCase());
+// }
+// return itemValue === value;
+// });
+// }
+// });
+
+// // Sorting
+// if (sort.key) {
+// result.sort((a, b) => {
+// const aValue = (a as any)[sort.key];
+// const bValue = (b as any)[sort.key];
+// if (aValue < bValue) {
+// return sort.order === 'asc' ? -1 : 1;
+// }
+// if (aValue > bValue) {
+// return sort.order === 'asc' ? 1 : -1;
+// }
+// return 0;
+// });
+// }
+
+// return result;
+// }, [data, filters, sort, columns]);
+
+// const totalItems = filteredAndSortedData.length;
+// const totalPages = totalEntries
+// ? Math.ceil(totalEntries / itemsPerPage)
+// : Math.ceil(filteredAndSortedData.length / itemsPerPage);
+
+// /**
+// * Pagination logic
+// */
+// const currentPageData = useMemo(() => {
+// const startIndex = (currentPage - 1) * itemsPerPage;
+// const endIndex = startIndex + itemsPerPage;
+
+// // When using filtered data, apply pagination after filtering
+// if (Object.keys(filters).length > 0 || sort.key) {
+// return filteredAndSortedData.slice(startIndex, endIndex);
+// }
+
+// // For unfiltered data, use the entire dataset
+// const paginatedData = data.slice(startIndex, endIndex);
+
+// // Ensure uniqueness using getRowKey
+// const uniqueData = new Map();
+// paginatedData.forEach((item) => {
+// const key = getRowKey(item);
+// if (!uniqueData.has(key)) {
+// uniqueData.set(key, item);
+// }
+// });
+// return Array.from(uniqueData.values());
+// }, [
+// data,
+// currentPage,
+// itemsPerPage,
+// filters,
+// sort.key,
+// filteredAndSortedData,
+// getRowKey,
+// ]);
+
+// const handlePageChangeInternal = (page: number) => {
+// if (page >= 1 && page <= totalPages && !loading) {
+// onPageChange(page);
+// }
+// };
+
+// /**
+// * Sorting handlers
+// */
+// const handleSort = (key: string) => {
+// const newSort: { key: string; order: 'asc' | 'desc' } = {
+// key,
+// order: sort.key === key && sort.order === 'asc' ? 'desc' : 'asc',
+// };
+// setSort(newSort);
+// if (onSort) {
+// onSort(newSort.key, newSort.order);
+// }
+// };
+
+// /**
+// * Filtering handlers
+// */
+// const handleFilter = (key: string, value: any) => {
+// const newFilters = { ...filters, [key]: value };
+// setFilters(newFilters);
+// if (onFilter) {
+// onFilter(newFilters);
+// }
+// };
+
+// /**
+// * Selection logic
+// */
+// const isAllSelected =
+// currentPageData.length > 0 &&
+// currentPageData.every((item) =>
+// selectedItems.includes(getRowKey(item).toString())
+// );
+
+// const handleSelectAllInternal = (checked: boolean) => {
+// if (onSelectAll) {
+// onSelectAll(checked);
+// }
+// };
+
+// const handleSelectItemInternal = (
+// item: T,
+// checked: boolean | 'indeterminate'
+// ) => {
+// if (onSelectItem && typeof checked === 'boolean') {
+// onSelectItem(getRowKey(item).toString(), checked);
+// }
+// };
+
+// /**
+// * Cell rendering logic
+// */
+// const renderCellContent = (item: T, col: Column) => {
+// if (col.renderCell) {
+// return col.renderCell(item);
+// }
+// const content = (item as any)[col.key];
+// if (col.truncate && typeof content === 'string') {
+// const truncated = `${content.substring(0, 8)}...${content.slice(-4)}`;
+// return col.copyable ? (
+//
+// ) : (
+// truncated
+// );
+// } else if (col.truncatedSubstring && typeof content === 'string') {
+// const maxLength = 20;
+// const truncated =
+// content.length > maxLength
+// ? `${content.substring(0, maxLength)}...`
+// : content;
+// return col.copyable ? (
+//
+// ) : (
+// truncated
+// );
+// }
+// return content;
+// };
+
+// /**
+// * We track how many rows we need to fill to maintain table height,
+// * especially if there's pagination.
+// */
+// const visibleRowsCount = currentPageData.length;
+// const emptyRowsCount = Math.max(0, itemsPerPage - visibleRowsCount);
+
+// /**
+// * Compute total number of columns for spanning the "empty table" row
+// */
+// const totalColumnCount =
+// columns.length + (onSelectAll ? 1 : 0) + (actions ? 1 : 0);
+
+// return (
+//
+// {/* Column toggle popover might be handled externally; removed here */}
+//
+//
+//
+//
+// {onSelectAll && (
+// |
+//
+// |
+// )}
+// {columns.map((col) => (
+//
+//
+//
+
+// {col.headerTooltip ? (
+//
+//
+//
+// {col.label}
+//
+//
+// {col.headerTooltip}
+//
+//
+//
+// ) : (
+// // If no tooltip, just render label
+//
+// {col.label}
+//
+// )}
+//
+
+// {col.sortable && (
+//
+//
+//
+//
+//
+//
+//
+// Sort by {col.label}{' '}
+// {sort.order === 'asc'
+// ? 'Descending'
+// : 'Ascending'}
+//
+//
+//
+//
+// )}
+// {col.filterable && (
+//
+//
+//
+//
+//
+//
+//
+//
+// Filter by {col.label}
+//
+//
+// {col.filterType === 'multiselect' ? (
+//
+// {col.filterOptions?.map((option) => (
+//
+// {
+// const currentFilters =
+// filters[col.key] || [];
+// const newFilters =
+// checked === true
+// ? [...currentFilters, option]
+// : currentFilters.filter(
+// (f: string) => f !== option
+// );
+// handleFilter(col.key, newFilters);
+// }}
+// />
+//
+//
+// ))}
+//
+// ) : col.filterType === 'select' ? (
+//
+// ) : (
+//
+// handleFilter(col.key, e.target.value)
+// }
+// className="w-full p-2 border rounded"
+// />
+// )}
+//
+// )}
+// |
+// ))}
+// {actions && (
+//
+// Actions
+// |
+// )}
+//
+//
+//
+// {currentPageData.length === 0 ? (
+//
+// |
+// {emptyTableText}
+// |
+//
+// ) : (
+// <>
+// {currentPageData.map((item) => (
+//
+// {onSelectItem && (
+// |
+//
+// handleSelectItemInternal(item, checked as boolean)
+// }
+// />
+// |
+// )}
+// {columns.map((col) => (
+//
+//
+// {renderCellContent(item, col)}
+//
+// |
+// ))}
+// {actions && (
+//
+// {actions(item)}
+// |
+// )}
+//
+// ))}
+
+// {Array.from({ length: emptyRowsCount }).map((_, index) => (
+//
+// {onSelectItem && | }
+// {columns.map((col) => (
+// |
+// ))}
+// {actions && | }
+//
+// ))}
+//
+// )}
+//
+//
+//
+// {showPagination && (
+//
+// )}
+//