fix(frontend): avatar profiles color

agenta-web/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import {Avatar as MainAvatar} from "antd"
+import {getColorPairFromStr} from "@/lib/helpers/colors"
+import {getInitials} from "@/lib/helpers/utils"
+
+type Props = {
+    name: string
+} & React.ComponentProps<typeof MainAvatar>
+
+const Avatar: React.FC<Props> = ({name, ...props}) => {
+    const color = getColorPairFromStr(name || "")
+
+    return (
+        <MainAvatar
+            shape="square"
+            style={{
+                backgroundColor: color.backgroundColor,
+                color: color.textColor,
+            }}
+            {...props}
+        >
+            {getInitials(name)}
+        </MainAvatar>
+    )
+}
+
+export default Avatar

agenta-web/src/components/HumanEvaluations/AbTestingEvaluation.tsx

@@ -2,7 +2,6 @@ import DeleteEvaluationModal from "@/components/DeleteEvaluationModal/DeleteEval
 import {HumanEvaluationListTableDataType, JSSTheme} from "@/lib/Types"
 import HumanEvaluationModal from "@/components/HumanEvaluationModal/HumanEvaluationModal"
 import {EvaluationType} from "@/lib/enums"
-import {getColorFromStr} from "@/lib/helpers/colors"
 import {getVotesPercentage} from "@/lib/helpers/evaluate"
 import {getInitials, isDemo} from "@/lib/helpers/utils"
 import {variantNameWithRev} from "@/lib/helpers/variantHelper"

agenta-web/src/components/Sidebar/Sidebar.tsx

@@ -1,17 +1,6 @@
 import React, {useEffect, useMemo, useState} from "react"
 import {useRouter} from "next/router"
-import {
-    Avatar,
-    Button,
-    Divider,
-    Dropdown,
-    Layout,
-    Menu,
-    Space,
-    Tag,
-    Tooltip,
-    Typography,
-} from "antd"
+import {Button, Divider, Dropdown, Layout, Menu, Space, Tag, Tooltip, Typography} from "antd"
 import Logo from "../Logo/Logo"
 import Link from "next/link"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
@@ -20,13 +9,13 @@ import {createUseStyles} from "react-jss"
 import {useLocalStorage} from "usehooks-ts"
 import {SidebarConfig, useSidebarConfig} from "./config"
 import {JSSTheme} from "@/lib/Types"
-import {getColorFromStr} from "@/lib/helpers/colors"
-import {getInitials, isDemo} from "@/lib/helpers/utils"
+import {isDemo} from "@/lib/helpers/utils"
 import {useProfileData} from "@/contexts/profile.context"
 import {useSession} from "@/hooks/useSession"
 import {CaretDown, Gear, SignOut} from "@phosphor-icons/react"
 import AlertPopup from "../AlertPopup/AlertPopup"
 import {dynamicContext} from "@/lib/helpers/dynamic"
+import Avatar from "@/components/Avatar/Avatar"
 
 const {Sider} = Layout
 const {Text} = Typography
@@ -117,10 +106,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
             },
         },
     },
-    userAvatar: {
-        backgroundColor: theme.colorPrimaryBgHover,
-        color: theme.colorPrimary,
-    },
     menuHeader: {
         padding: `${theme.paddingXS}px ${theme.padding}px`,
         color: theme.colorTextDescription,
@@ -375,13 +360,7 @@ const Sidebar: React.FC = () => {
                                             key: org.id,
                                             label: (
                                                 <Space>
-                                                    <Avatar
-                                                        size={"small"}
-                                                        className={classes.userAvatar}
-                                                        shape="square"
-                                                    >
-                                                        {getInitials(org.name)}
-                                                    </Avatar>
+                                                    <Avatar size="small" name={org.name} />
                                                     <Text>{org.name}</Text>
                                                 </Space>
                                             ),
@@ -428,15 +407,7 @@ const Sidebar: React.FC = () => {
                             >
                                 <Button className={classes.avatarMainContainer}>
                                     <div className={classes.avatarContainer}>
-                                        <Avatar
-                                            shape="square"
-                                            style={{
-                                                fontSize: 18,
-                                            }}
-                                            className={classes.userAvatar}
-                                        >
-                                            {getInitials(selectedOrg.name)}
-                                        </Avatar>
+                                        <Avatar className="text-lg" name={selectedOrg.name} />
 
                                         {!collapsed && (
                                             <div>

agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx

@@ -15,7 +15,7 @@ import {Button, DropdownProps, Space, Spin, Tag, Tooltip, Typography} from "antd
 import React, {useEffect, useMemo, useRef, useState} from "react"
 import {createUseStyles} from "react-jss"
 import {getFilterParams, getTypedValue, removeCorrectAnswerPrefix} from "@/lib/helpers/evaluate"
-import {getColorFromStr, getRandomColors} from "@/lib/helpers/colors"
+import {getColorPairFromStr, getRandomColors} from "@/lib/helpers/colors"
 import {CheckOutlined, CloseCircleOutlined, DownloadOutlined, UndoOutlined} from "@ant-design/icons"
 import {getAppValues} from "@/contexts/app.context"
 import {useQueryParam} from "@/hooks/useQuery"
@@ -114,10 +114,10 @@ const EvaluationCompareMode: React.FC<Props> = () => {
         const previous = new Set<string>()
         const colors = getRandomColors()
         return variants.map((v) => {
-            const color = getColorFromStr(v.evaluationId)
-            if (previous.has(color)) return colors.find((c) => !previous.has(c))!
-            previous.add(color)
-            return color
+            const {textColor} = getColorPairFromStr(v.evaluationId)
+            if (previous.has(textColor)) return colors.find((c) => !previous.has(c))!
+            previous.add(textColor)
+            return textColor
         })
     }, [variants])
 

agenta-web/src/lib/helpers/colors.ts

@@ -17,29 +17,6 @@ const gradients = [
     "linear-gradient(to bottom right, #60A5FA, #3B82F6)",
 ]
 
-const colors = [
-    "#FF5733",
-    "#00AABB",
-    "#FFC300",
-    "#FF0066",
-    "#22DD55",
-    "#FF3399",
-    "#FF9900",
-    "#44FFAA",
-    "#FF3366",
-    "#0088FF",
-    "#FFCC00",
-    "#DD33FF",
-    "#33FF99",
-    "#FF0033",
-    "#55AAFF",
-    "#FF6600",
-    "#FF00CC",
-    "#11FF44",
-    "#FF9933",
-    "#0099FF",
-]
-
 const tagColors = [
     "blue",
     "purple",
@@ -56,12 +33,28 @@ const tagColors = [
     "gold",
 ]
 
+const colorPairs = [
+    {backgroundColor: "#BAE0FF", textColor: "#1677FF"},
+    {backgroundColor: "#D9F7BE", textColor: "#389E0D"},
+    {backgroundColor: "#efdbff", textColor: "#722ED1"},
+    {backgroundColor: "#fff1b8", textColor: "#AD6800"},
+    {backgroundColor: "#D1F5F1", textColor: "#13C2C2"},
+    {backgroundColor: "#ffd6e7", textColor: "#EB2F96"},
+    {backgroundColor: "#f7cfcf", textColor: "#D61010"},
+    {backgroundColor: "#eaeff5", textColor: "#758391"},
+    {backgroundColor: "#D1E4E8", textColor: "#5E7579"},
+    {backgroundColor: "#F5E6D3", textColor: "#825E31"},
+    {backgroundColor: "#F9F6C1", textColor: "#84803A"},
+    {backgroundColor: "#F4E6E4", textColor: "#9C706A"},
+]
+
 export const getGradientFromStr = (value: string) => {
     return gradients[stringToNumberInRange(value, 0, gradients.length - 1)]
 }
 
-export const getColorFromStr = (value: string) => {
-    return colors[stringToNumberInRange(value, 0, colors.length - 1)]
+export const getColorPairFromStr = (value: string) => {
+    const index = stringToNumberInRange(value, 0, colorPairs.length - 1)
+    return colorPairs[index]
 }
 
 export const fadeColor = (hex: string, opacity: number) => {
@@ -80,4 +73,4 @@ export const fadeColor = (hex: string, opacity: number) => {
 
 export const getTagColors = () => [...tagColors]
 
-export const getRandomColors = () => [...colors]
+export const getRandomColors = () => colorPairs.map((color) => color.textColor)