Merge branch 'main' into tool-use

frontend/src/components/Avatar.tsx

@@ -5,7 +5,7 @@ export default function Avatar({
   size,
   className,
 }: {
-  avatar: string | ReactNode;
+  avatar: ReactNode;
   size?: 'SMALL' | 'MEDIUM' | 'LARGE';
   className: string;
 }) {

frontend/src/components/DocumentPagination.tsx

@@ -19,7 +19,10 @@ const Pagination: React.FC<PaginationProps> = ({
   onPageChange,
   onRowsPerPageChange,
 }) => {
-  const [rowsPerPageOptions] = useState([5, 10, 15, 20]);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const rowsPerPageOptions = [5, 10, 20, 50];
+
+  const toggleDropdown = () => setIsDropdownOpen((prev) => !prev);
 
   const handlePreviousPage = () => {
     if (currentPage > 1) {
@@ -41,31 +44,51 @@ const Pagination: React.FC<PaginationProps> = ({
     onPageChange(totalPages);
   };
 
+  const handleSelectRowsPerPage = (rows: number) => {
+    setIsDropdownOpen(false);
+    onRowsPerPageChange(rows);
+  };
+
   return (
     <div className="flex items-center text-xs justify-end gap-4 mt-2 p-2 border-gray-200">
-      <div className="flex items-center gap-2 ">
+      {/* Rows per page dropdown */}
+      <div className="flex items-center gap-2 relative">
         <span className="text-gray-900 dark:text-gray-50">Rows per page:</span>
-        <select
-          value={rowsPerPage}
-          onChange={(e) => onRowsPerPageChange(Number(e.target.value))}
-          className="border border-gray-300 rounded px-2 py-1 dark:bg-dark-charcoal dark:text-gray-50"
-        >
-          {rowsPerPageOptions.map((option) => (
-            <option
-              className="bg-white dark:bg-dark-charcoal dark:text-gray-50"
-              key={option}
-              value={option}
-            >
-              {option}
-            </option>
-          ))}
-        </select>
+        <div className="relative">
+          <button
+            onClick={toggleDropdown}
+            className="px-3 py-1 border rounded dark:bg-dark-charcoal dark:text-light-gray hover:bg-gray-200 dark:hover:bg-neutral-700"
+          >
+            {rowsPerPage}
+          </button>
+          <div
+            className={`absolute z-50 right-0 mt-1 w-28 transform  bg-white dark:bg-dark-charcoal shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-200 ease-in-out ${
+              isDropdownOpen
+                ? 'scale-100 opacity-100 block'
+                : 'scale-95 opacity-0 hidden'
+            }`}
+          >
+            {rowsPerPageOptions.map((option) => (
+              <div
+                key={option}
+                onClick={() => handleSelectRowsPerPage(option)}
+                className={`cursor-pointer px-4 py-2 text-xs hover:bg-gray-100 dark:hover:bg-neutral-700  ${
+                  rowsPerPage === option
+                    ? 'bg-gray-100 dark:bg-neutral-700 dark:text-light-gray'
+                    : 'bg-white dark:bg-dark-charcoal dark:text-light-gray'
+                }`}
+              >
+                {option}
+              </div>
+            ))}
+          </div>
+        </div>
       </div>
 
+      {/* Pagination controls */}
       <div className="text-gray-900 dark:text-gray-50">
         Page {currentPage} of {totalPages}
       </div>
-
       <div className="flex items-center gap-2 text-gray-900 dark:text-gray-50">
         <button
           onClick={handleFirstPage}
@@ -74,7 +97,7 @@ const Pagination: React.FC<PaginationProps> = ({
         >
           <img
             src={DoubleArrowLeft}
-            alt="arrow"
+            alt="First page"
             className="dark:invert dark:sepia dark:brightness-200"
           />
         </button>
@@ -85,7 +108,7 @@ const Pagination: React.FC<PaginationProps> = ({
         >
           <img
             src={SingleArrowLeft}
-            alt="arrow"
+            alt="Previous page"
             className="dark:invert dark:sepia dark:brightness-200"
           />
         </button>
@@ -96,7 +119,7 @@ const Pagination: React.FC<PaginationProps> = ({
         >
           <img
             src={SingleArrowRight}
-            alt="arrow"
+            alt="Next page"
             className="dark:invert dark:sepia dark:brightness-200"
           />
         </button>
@@ -107,7 +130,7 @@ const Pagination: React.FC<PaginationProps> = ({
         >
           <img
             src={DoubleArrowRight}
-            alt="arrow"
+            alt="Last page"
             className="dark:invert dark:sepia dark:brightness-200"
           />
         </button>

frontend/src/components/DropdownMenu.tsx

@@ -48,7 +48,7 @@ export default function DropdownMenu({
     <div className="static inline-block text-left" ref={dropdownRef}>
       <button
         onClick={handleToggle}
-        className="flex w-20 cursor-pointer flex-row items-center gap-px rounded-3xl border-purple-30/25 bg-purple-30 p-2 text-xs text-white hover:bg-[#6F3FD1] focus:outline-none"
+        className="flex w-20 cursor-pointer flex-row  gap-1 rounded-3xl border-purple-30/25 bg-purple-30 p-2 text-xs text-white hover:bg-[#6F3FD1] focus:outline-none"
       >
         {icon && <img src={icon} alt="OptionIcon" className="h-4 w-4" />}
         {selectedOption.value !== 'never' ? selectedOption.label : name}