Merge branch 'main' into add-sycophancy-evaluation

Author: yaricom

apps/opik-frontend/src/components/pages-shared/llm/LLMPromptMessagesVariables/LLMPromptMessagesVariable.tsx

@@ -28,7 +28,7 @@ const LLMPromptMessagesVariable = ({
   return (
     <div className="relative flex justify-between">
       <div className="flex max-h-10 max-w-[50%] basis-1/2 items-center pr-2">
-        <Tag variant="green" size="lg" className="truncate">
+        <Tag variant="green" size="md" className="truncate">
           {variable.label}
         </Tag>
       </div>

apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsDetails/CompareExperimentsDetails.tsx

@@ -83,20 +83,20 @@ const CompareExperimentsDetails: React.FunctionComponent<
     if (isCompare) {
       const tag =
         experimentsIds.length === 2 ? (
-          <Tag size="lg" variant="gray" className="flex items-center gap-2">
+          <Tag size="md" variant="gray" className="flex items-center gap-2">
             <FlaskConical className="size-4 shrink-0" />
             <div className="truncate">{experiments[1]?.name}</div>
           </Tag>
         ) : (
-          <Tag size="lg" variant="gray">
+          <Tag size="md" variant="gray">
             {`${experimentsIds.length - 1} experiments`}
           </Tag>
         );
 
       return (
         <div className="flex h-11 items-center gap-2">
           <span className="text-nowrap">Baseline of</span>
-          <Tag size="lg" variant="gray" className="flex items-center gap-2">
+          <Tag size="md" variant="gray" className="flex items-center gap-2">
             <FlaskConical className="size-4 shrink-0" />
             <div className="truncate">{experiment?.name}</div>
           </Tag>

apps/opik-frontend/src/components/pages/CompareTrialsPage/CompareTrialsDetails/CompareTrialsDetails.tsx

@@ -62,20 +62,20 @@ const CompareTrialsDetails: React.FC<CompareTrialsDetailsProps> = ({
 
     const tag =
       experimentsIds.length === 2 ? (
-        <Tag size="lg" variant="gray" className="flex items-center gap-2">
+        <Tag size="md" variant="gray" className="flex items-center gap-2">
           <FlaskConical className="size-4 shrink-0" />
           <div className="truncate">{experiments[1]?.name}</div>
         </Tag>
       ) : (
-        <Tag size="lg" variant="gray">
+        <Tag size="md" variant="gray">
           {`${experimentsIds.length - 1} experiments`}
         </Tag>
       );
 
     return (
       <div className="flex h-11 items-center gap-2">
         <span className="text-nowrap">Baseline of</span>
-        <Tag size="lg" variant="gray" className="flex items-center gap-2">
+        <Tag size="md" variant="gray" className="flex items-center gap-2">
           <FlaskConical className="size-4 shrink-0" />
           <div className="truncate">{experiment?.name}</div>
         </Tag>

apps/opik-frontend/src/components/shared/ColoredTag/ColoredTag.tsx

@@ -1,19 +1,19 @@
 import React, { useMemo } from "react";
 
-import { Tag } from "@/components/ui/tag";
+import { Tag, TagProps } from "@/components/ui/tag";
 import { generateTagVariant } from "@/lib/traces";
 import TooltipWrapper from "@/components/shared/TooltipWrapper/TooltipWrapper";
 
 export interface ColoredTagProps {
   label: string;
-  size?: "default" | "sm" | "lg";
+  size?: TagProps["size"];
   testId?: string;
   className?: string;
 }
 
 const ColoredTag: React.FunctionComponent<ColoredTagProps> = ({
   label,
-  size = "lg",
+  size = "md",
   testId,
   className,
 }) => {

apps/opik-frontend/src/components/shared/DataTableCells/ListCell.tsx

@@ -24,7 +24,7 @@ const ListCell = (context: CellContext<unknown, unknown>) => {
     >
       <div
         className={cn(
-          "flex max-h-full flex-row gap-2",
+          "flex max-h-full flex-row gap-1.5",
           isSmall ? "overflow-x-auto" : "flex-wrap overflow-auto",
         )}
       >

apps/opik-frontend/src/components/shared/DataTableCells/TagCell.tsx

@@ -21,7 +21,7 @@ const TagCell = (context: CellContext<unknown, string>) => {
       {colored ? (
         <ColoredTag label={value}></ColoredTag>
       ) : (
-        <Tag size="lg">{value}</Tag>
+        <Tag size="md">{value}</Tag>
       )}
     </CellWrapper>
   );

apps/opik-frontend/src/components/shared/DateTag/DateTag.tsx

@@ -9,7 +9,7 @@ interface DateTagProps {
 
 const DateTag = ({ date }: DateTagProps) => {
   return (
-    <Tag size="lg" variant="gray" className="flex shrink-0 items-center gap-2">
+    <Tag size="md" variant="gray" className="flex shrink-0 items-center gap-2">
       <Clock className="size-4 shrink-0" />
       <div className="truncate">{formatDate(date)}</div>
     </Tag>

apps/opik-frontend/src/components/shared/RemovableTag/RemovableTag.tsx

@@ -39,7 +39,7 @@ const RemovableTag: React.FunctionComponent<RemovableTagProps> = ({
         <span className="mr-1 truncate">{label}</span>
         {isRemovable && (
           <Button
-            size="icon-xs"
+            size="icon-2xs"
             variant="ghost"
             className="hidden group-hover:flex"
             onClick={() => onDelete(label)}

apps/opik-frontend/src/components/shared/ResourceLink/ResourceLink.tsx

@@ -104,7 +104,7 @@ const ResourceLink: React.FunctionComponent<ResourceLinkProps> = ({
       {asTag ? (
         <TooltipWrapper content={text} stopClickPropagation>
           <Tag
-            size="lg"
+            size="md"
             variant="gray"
             className={cn(
               "flex items-center gap-2",

apps/opik-frontend/src/components/shared/TagListRenderer/TagListRenderer.tsx

@@ -45,14 +45,14 @@ const TagListRenderer: React.FC<TagListRendererProps> = ({
   };
 
   return (
-    <div className="flex min-h-7 w-full flex-wrap items-center gap-1 overflow-x-hidden">
+    <div className="flex min-h-7 w-full flex-wrap items-center gap-1.5 overflow-x-hidden">
       <Tag className="mx-1 size-4 text-muted-slate" />
       {[...tags].sort().map((tag) => {
         return (
           <RemovableTag
             label={tag}
             key={tag}
-            size="lg"
+            size="md"
             onDelete={() => onDeleteTag(tag)}
           />
         );
@@ -62,8 +62,7 @@ const TagListRenderer: React.FC<TagListRendererProps> = ({
           <Button
             data-testid="add-tag-button"
             variant="outline"
-            size="icon-sm"
-            className="size-7"
+            size="icon-2xs"
           >
             <Plus />
           </Button>