diff --git a/ui/litellm-dashboard/src/components/view_users/columns.tsx b/ui/litellm-dashboard/src/components/view_users/columns.tsx index 73750d7a48..4b9fad8f23 100644 --- a/ui/litellm-dashboard/src/components/view_users/columns.tsx +++ b/ui/litellm-dashboard/src/components/view_users/columns.tsx @@ -3,7 +3,8 @@ import { Badge, Grid, Icon } from "@tremor/react"; import { Tooltip, Checkbox } from "antd"; import { UserInfo } from "./types"; import { PencilAltIcon, TrashIcon, InformationCircleIcon, RefreshIcon } from "@heroicons/react/outline"; -import { formatNumberWithCommas } from "@/utils/dataUtils"; +import { CopyOutlined } from "@ant-design/icons"; +import { formatNumberWithCommas, copyToClipboard } from "@/utils/dataUtils"; interface SelectionOptions { selectedUsers: UserInfo[]; @@ -29,9 +30,22 @@ export const columns = ( accessorKey: "user_id", enableSorting: true, cell: ({ row }) => ( - - {row.original.user_id ? `${row.original.user_id.slice(0, 7)}...` : "-"} - +
+ + {row.original.user_id ? `${row.original.user_id.slice(0, 7)}...` : "-"} + + {row.original.user_id && ( + + { + e.stopPropagation(); + copyToClipboard(row.original.user_id, "User ID copied to clipboard"); + }} + className="cursor-pointer text-gray-500 hover:text-blue-500 text-xs" + /> + + )} +
), }, {