From f407d31054ab9da29cb2d9b5147c859575f5c6a1 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashrafdev365@gmail.com>
Date: Tue, 18 Jun 2024 14:51:22 +0600
Subject: [PATCH 1/2] refactor: removed style-props type code duplication

---
 agenta-web/src/components/AppSelector/AppSelector.tsx       | 5 +----
 agenta-web/src/components/AppSelector/TipsAndFeatures.tsx   | 5 +----
 agenta-web/src/components/AppSelector/Welcome.tsx           | 5 +----
 .../src/components/AppSelector/modals/AddNewAppModal.tsx    | 5 +----
 .../src/components/AppSelector/modals/MaxAppModal.tsx       | 5 +----
 .../src/components/AppSelector/modals/WriteOwnAppModal.tsx  | 5 +----
 .../components/Evaluations/AutomaticEvaluationResult.tsx    | 6 +-----
 .../EvaluationCardView/EvaluationVariantCard.tsx            | 6 +-----
 .../src/components/Evaluations/HumanEvaluationResult.tsx    | 6 +-----
 .../HumanEvaluationModal/HumanEvaluationModal.tsx           | 6 +-----
 agenta-web/src/components/Layout/Layout.tsx                 | 4 ++--
 .../Playground/AddToTestSetDrawer/AddToTestSetDrawer.tsx    | 6 +-----
 agenta-web/src/components/Playground/Views/TestView.tsx     | 6 +-----
 .../src/components/SecondaryButton/SecondaryButton.tsx      | 4 ----
 agenta-web/src/lib/Types.ts                                 | 4 ++++
 15 files changed, 18 insertions(+), 60 deletions(-)

diff --git a/agenta-web/src/components/AppSelector/AppSelector.tsx b/agenta-web/src/components/AppSelector/AppSelector.tsx
index 5cc43b43b..bd24ec2ff 100644
--- a/agenta-web/src/components/AppSelector/AppSelector.tsx
+++ b/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,9 +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) => ({
diff --git a/agenta-web/src/components/AppSelector/TipsAndFeatures.tsx b/agenta-web/src/components/AppSelector/TipsAndFeatures.tsx
index 1414cd667..750532717 100644
--- a/agenta-web/src/components/AppSelector/TipsAndFeatures.tsx
+++ b/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)",
diff --git a/agenta-web/src/components/AppSelector/Welcome.tsx b/agenta-web/src/components/AppSelector/Welcome.tsx
index 0d06a3bb9..711490b3d 100644
--- a/agenta-web/src/components/AppSelector/Welcome.tsx
+++ b/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: {
diff --git a/agenta-web/src/components/AppSelector/modals/AddNewAppModal.tsx b/agenta-web/src/components/AppSelector/modals/AddNewAppModal.tsx
index c40e5778e..c458a758b 100644
--- a/agenta-web/src/components/AppSelector/modals/AddNewAppModal.tsx
+++ b/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: {
diff --git a/agenta-web/src/components/AppSelector/modals/MaxAppModal.tsx b/agenta-web/src/components/AppSelector/modals/MaxAppModal.tsx
index ea634fbd9..1885a43f1 100644
--- a/agenta-web/src/components/AppSelector/modals/MaxAppModal.tsx
+++ b/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: {
diff --git a/agenta-web/src/components/AppSelector/modals/WriteOwnAppModal.tsx b/agenta-web/src/components/AppSelector/modals/WriteOwnAppModal.tsx
index a0242f6e8..c00d7c182 100644
--- a/agenta-web/src/components/AppSelector/modals/WriteOwnAppModal.tsx
+++ b/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) => ({
diff --git a/agenta-web/src/components/Evaluations/AutomaticEvaluationResult.tsx b/agenta-web/src/components/Evaluations/AutomaticEvaluationResult.tsx
index 251fbc631..c7a00dac7 100644
--- a/agenta-web/src/components/Evaluations/AutomaticEvaluationResult.tsx
+++ b/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,
diff --git a/agenta-web/src/components/Evaluations/EvaluationCardView/EvaluationVariantCard.tsx b/agenta-web/src/components/Evaluations/EvaluationCardView/EvaluationVariantCard.tsx
index 8cdb13ced..c778a7417 100644
--- a/agenta-web/src/components/Evaluations/EvaluationCardView/EvaluationVariantCard.tsx
+++ b/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,
diff --git a/agenta-web/src/components/Evaluations/HumanEvaluationResult.tsx b/agenta-web/src/components/Evaluations/HumanEvaluationResult.tsx
index 5eee97ec4..811adf13c 100644
--- a/agenta-web/src/components/Evaluations/HumanEvaluationResult.tsx
+++ b/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,
diff --git a/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx b/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx
index 983324b13..74396dab4 100644
--- a/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx
+++ b/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",
diff --git a/agenta-web/src/components/Layout/Layout.tsx b/agenta-web/src/components/Layout/Layout.tsx
index 38662ec4a..16a07a58a 100644
--- a/agenta-web/src/components/Layout/Layout.tsx
+++ b/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
 }
 
diff --git a/agenta-web/src/components/Playground/AddToTestSetDrawer/AddToTestSetDrawer.tsx b/agenta-web/src/components/Playground/AddToTestSetDrawer/AddToTestSetDrawer.tsx
index ba7d4f2a8..1d835e28d 100644
--- a/agenta-web/src/components/Playground/AddToTestSetDrawer/AddToTestSetDrawer.tsx
+++ b/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",
diff --git a/agenta-web/src/components/Playground/Views/TestView.tsx b/agenta-web/src/components/Playground/Views/TestView.tsx
index 4d9cb7ae6..ec54a974a 100644
--- a/agenta-web/src/components/Playground/Views/TestView.tsx
+++ b/agenta-web/src/components/Playground/Views/TestView.tsx
@@ -2,7 +2,7 @@ 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 +30,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..."
 
diff --git a/agenta-web/src/components/SecondaryButton/SecondaryButton.tsx b/agenta-web/src/components/SecondaryButton/SecondaryButton.tsx
index b67380055..0a6b78e5a 100644
--- a/agenta-web/src/components/SecondaryButton/SecondaryButton.tsx
+++ b/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()
 
diff --git a/agenta-web/src/lib/Types.ts b/agenta-web/src/lib/Types.ts
index c74224402..374d054a1 100644
--- a/agenta-web/src/lib/Types.ts
+++ b/agenta-web/src/lib/Types.ts
@@ -488,3 +488,7 @@ export type PaginationQuery = {
     page: number
     pageSize: number
 }
+
+export type StyleProps = {
+    themeMode: "dark" | "light"
+}

From f39501bb2e2a085b4104ea69d3cac0c56aac42a6 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashrafdev365@gmail.com>
Date: Thu, 20 Jun 2024 13:58:08 +0600
Subject: [PATCH 2/2] fix: fixed prettier format issue

---
 agenta-web/src/components/AppSelector/AppSelector.tsx  |  1 -
 .../src/components/Playground/Views/TestView.tsx       | 10 +++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/agenta-web/src/components/AppSelector/AppSelector.tsx b/agenta-web/src/components/AppSelector/AppSelector.tsx
index bd24ec2ff..2b4260a45 100644
--- a/agenta-web/src/components/AppSelector/AppSelector.tsx
+++ b/agenta-web/src/components/AppSelector/AppSelector.tsx
@@ -22,7 +22,6 @@ import {LlmProvider, getAllProviderLlmKeys} from "@/lib/helpers/llmProviders"
 import ResultComponent from "../ResultComponent/ResultComponent"
 import {dynamicContext} from "@/lib/helpers/dynamic"
 
-
 const useStyles = createUseStyles({
     container: ({themeMode}: StyleProps) => ({
         marginTop: 10,
diff --git a/agenta-web/src/components/Playground/Views/TestView.tsx b/agenta-web/src/components/Playground/Views/TestView.tsx
index ec54a974a..cf39a9583 100644
--- a/agenta-web/src/components/Playground/Views/TestView.tsx
+++ b/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, StyleProps} 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"