Refactor: remove StyleProps type to eliminate code duplication

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

@@ -2,7 +2,7 @@ import {useState, useEffect, useMemo} from "react"
 import {PlusOutlined} from "@ant-design/icons"
 import {Input, Modal, ConfigProvider, theme, Card, Button, notification, Divider} from "antd"
 import AppCard from "./AppCard"
-import {Template, GenericObject} from "@/lib/Types"
+import {Template, GenericObject, StyleProps} from "@/lib/Types"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
 import TipsAndFeatures from "./TipsAndFeatures"
 import Welcome from "./Welcome"
@@ -22,10 +22,6 @@ import {LlmProvider, getAllProviderLlmKeys} from "@/lib/helpers/llmProviders"
 import ResultComponent from "../ResultComponent/ResultComponent"
 import {dynamicContext} from "@/lib/helpers/dynamic"
 
-type StyleProps = {
-    themeMode: "dark" | "light"
-}
-
 const useStyles = createUseStyles({
     container: ({themeMode}: StyleProps) => ({
         marginTop: 10,

agenta-web/src/components/AppSelector/TipsAndFeatures.tsx

@@ -3,15 +3,12 @@ import {BulbFilled} from "@ant-design/icons"
 import {Space} from "antd"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
 import {MDXProvider} from "@mdx-js/react"
+import {StyleProps} from "@/lib/Types"
 
 import slide1 from "../../welcome-highlights/tip1.mdx"
 import slide2 from "../../welcome-highlights/tip2.mdx"
 import {createUseStyles} from "react-jss"
 
-type StyleProps = {
-    themeMode: "dark" | "light"
-}
-
 const useStyles = createUseStyles({
     container: ({themeMode}: StyleProps) => ({
         backgroundColor: themeMode === "dark" ? "#000" : "rgba(0,0,0,0.03)",

agenta-web/src/components/AppSelector/Welcome.tsx

@@ -3,10 +3,7 @@ import React from "react"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
 import {createUseStyles} from "react-jss"
 import {CheckCircleFilled, ClockCircleOutlined} from "@ant-design/icons"
-
-type StyleProps = {
-    themeMode: "dark" | "light"
-}
+import {StyleProps} from "@/lib/Types"
 
 const useStyles = createUseStyles({
     head: {

agenta-web/src/components/AppSelector/modals/AddNewAppModal.tsx

@@ -3,10 +3,7 @@ import {AppstoreAddOutlined, CodeOutlined} from "@ant-design/icons"
 import {Col, Modal, Row, Typography} from "antd"
 import React from "react"
 import {createUseStyles} from "react-jss"
-
-type StyleProps = {
-    themeMode: "dark" | "light"
-}
+import {StyleProps} from "@/lib/Types"
 
 const useStyles = createUseStyles({
     modal: {

agenta-web/src/components/AppSelector/modals/MaxAppModal.tsx

@@ -3,10 +3,7 @@ import {AppstoreAddOutlined, CodeOutlined} from "@ant-design/icons"
 import {Col, Modal, Row, Typography} from "antd"
 import React from "react"
 import {createUseStyles} from "react-jss"
-
-type StyleProps = {
-    themeMode: "dark" | "light"
-}
+import {StyleProps} from "@/lib/Types"
 
 const useStyles = createUseStyles({
     modal: {

agenta-web/src/components/AppSelector/modals/WriteOwnAppModal.tsx

@@ -6,10 +6,7 @@ import React, {useEffect, useRef} from "react"
 import {createUseStyles} from "react-jss"
 import YouTube, {YouTubeProps} from "react-youtube"
 import {isDemo} from "@/lib/helpers/utils"
-
-type StyleProps = {
-    themeMode: "dark" | "light"
-}
+import {StyleProps} from "@/lib/Types"
 
 const useStyles = createUseStyles({
     modal: ({themeMode}: StyleProps) => ({

agenta-web/src/components/Evaluations/AutomaticEvaluationResult.tsx

@@ -7,7 +7,7 @@ import {Button, Spin, Statistic, Table, Typography} from "antd"
 import {useRouter} from "next/router"
 import {useEffect, useState} from "react"
 import {ColumnsType} from "antd/es/table"
-import {Evaluation, GenericObject} from "@/lib/Types"
+import {Evaluation, GenericObject, StyleProps} from "@/lib/Types"
 import {DeleteOutlined} from "@ant-design/icons"
 import {EvaluationFlow, EvaluationType} from "@/lib/enums"
 import {createUseStyles} from "react-jss"
@@ -41,10 +41,6 @@ interface EvaluationListTableDataType {
     variant_revision_ids: string[]
 }
 
-type StyleProps = {
-    themeMode: "dark" | "light"
-}
-
 const useStyles = createUseStyles({
     container: {
         marginBottom: 20,

agenta-web/src/components/Evaluations/EvaluationCardView/EvaluationVariantCard.tsx

@@ -1,14 +1,10 @@
 import {useAppTheme} from "@/components/Layout/ThemeContextProvider"
-import {Evaluation, Variant} from "@/lib/Types"
+import {Evaluation, Variant, StyleProps} from "@/lib/Types"
 import {Typography} from "antd"
 import React from "react"
 import {createUseStyles} from "react-jss"
 import {VARIANT_COLORS} from "."
 
-type StyleProps = {
-    themeMode: "dark" | "light"
-}
-
 const useStyles = createUseStyles({
     root: ({themeMode}: StyleProps) => ({
         flex: 1,

agenta-web/src/components/Evaluations/HumanEvaluationResult.tsx

@@ -4,7 +4,7 @@ import {Button, Spin, Statistic, Table, Typography} from "antd"
 import {useRouter} from "next/router"
 import {useEffect, useState} from "react"
 import {ColumnsType} from "antd/es/table"
-import {EvaluationResponseType} from "@/lib/Types"
+import {EvaluationResponseType, StyleProps} from "@/lib/Types"
 import {DeleteOutlined} from "@ant-design/icons"
 import {EvaluationFlow, EvaluationType} from "@/lib/enums"
 import {createUseStyles} from "react-jss"
@@ -47,10 +47,6 @@ export interface HumanEvaluationListTableDataType {
     variantNames: string[]
 }
 
-type StyleProps = {
-    themeMode: "dark" | "light"
-}
-
 const useStyles = createUseStyles({
     container: {
         marginBottom: 20,

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

@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from "react"
-import {GenericObject, JSSTheme, Parameter, Variant} from "@/lib/Types"
+import {GenericObject, JSSTheme, Parameter, Variant, StyleProps} from "@/lib/Types"
 import {fetchVariants} from "@/services/api"
 import {createNewEvaluation} from "@/services/human-evaluations/api"
 import {isDemo} from "@/lib/helpers/utils"
@@ -16,10 +16,6 @@ import EvaluationErrorModal from "../Evaluations/EvaluationErrorModal"
 import {dynamicComponent} from "@/lib/helpers/dynamic"
 import {useLoadTestsetsList} from "@/services/testsets/api"
 
-type StyleProps = {
-    themeMode: "dark" | "light"
-}
-
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     evaluationContainer: {
         border: "1px solid lightgrey",

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

@@ -28,11 +28,11 @@ import moonIcon from "@/media/night.png"
 import sunIcon from "@/media/sun.png"
 import {useProfileData} from "@/contexts/profile.context"
 import {ThemeProvider} from "react-jss"
+import {StyleProps as MainStyleProps} from "@/lib/Types"
 
 const {Content, Footer} = Layout
 
-type StyleProps = {
-    themeMode: "dark" | "light"
+interface StyleProps extends MainStyleProps {
     footerHeight: number
 }
 

agenta-web/src/components/Playground/AddToTestSetDrawer/AddToTestSetDrawer.tsx

@@ -1,6 +1,6 @@
 import AlertPopup from "@/components/AlertPopup/AlertPopup"
 import {useAppTheme} from "../../Layout/ThemeContextProvider"
-import {ChatMessage, ChatRole, GenericObject, testset} from "@/lib/Types"
+import {ChatMessage, ChatRole, GenericObject, testset, StyleProps} from "@/lib/Types"
 import {removeKeys, renameVariables} from "@/lib/helpers/utils"
 import {
     createNewTestset,
@@ -29,10 +29,6 @@ import {useLocalStorage, useUpdateEffect} from "usehooks-ts"
 import ChatInputs from "@/components/ChatInputs/ChatInputs"
 import _ from "lodash"
 
-type StyleProps = {
-    themeMode: "dark" | "light"
-}
-
 const useStyles = createUseStyles({
     footer: {
         display: "flex",

agenta-web/src/components/Playground/Views/TestView.tsx

@@ -2,7 +2,15 @@ import React, {useContext, useEffect, useRef, useState} from "react"
 import {Button, Input, Card, Row, Col, Space, Form, Modal} from "antd"
 import {CaretRightOutlined, CloseCircleOutlined, PlusOutlined} from "@ant-design/icons"
 import {callVariant} from "@/services/api"
-import {ChatMessage, ChatRole, GenericObject, JSSTheme, Parameter, Variant} from "@/lib/Types"
+import {
+    ChatMessage,
+    ChatRole,
+    GenericObject,
+    JSSTheme,
+    Parameter,
+    Variant,
+    StyleProps,
+} from "@/lib/Types"
 import {batchExecute, randString, removeKeys} from "@/lib/helpers/utils"
 import LoadTestsModal from "../LoadTestsModal"
 import AddToTestSetDrawer from "../AddToTestSetDrawer/AddToTestSetDrawer"
@@ -30,10 +38,6 @@ const promptRevision: any = dynamicService("promptVersioning/api")
 dayjs.extend(relativeTime)
 dayjs.extend(duration)
 
-type StyleProps = {
-    themeMode: "dark" | "light"
-}
-
 const {TextArea} = Input
 const LOADING_TEXT = "Loading..."
 

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

@@ -10,10 +10,6 @@ type SecondaryBtnProps = {
     onClick: () => void
 }
 
-type StyleProps = {
-    themeMode: "dark" | "light"
-}
-
 const SecondaryButton: React.FC<SecondaryBtnProps> = ({children, ...props}) => {
     const {appTheme} = useAppTheme()
 

agenta-web/src/lib/Types.ts

@@ -488,3 +488,7 @@ export type PaginationQuery = {
     page: number
     pageSize: number
 }
+
+export type StyleProps = {
+    themeMode: "dark" | "light"
+}