[improved] evaluation rename modal ui

web/oss/src/components/EvalRunDetails/HumanEvalRun/components/Modals/RenameEvalModal/assets/RenameEvalModalContent.tsx

@@ -1,32 +1,50 @@
-import {Input, Typography} from "antd"
+import {Input, Tag, Typography} from "antd"
 
 import {RenameEvalModalContentProps} from "../../types"
 
 const RenameEvalModalContent = ({
     loading,
     error,
+    currentName,
     editName,
     setEditName,
     editDescription,
     setEditDescription,
 }: RenameEvalModalContentProps) => {
     return (
-        <section className="flex flex-col gap-2 my-4">
-            <Input
-                value={editName}
-                onChange={(e) => setEditName(e.target.value)}
-                maxLength={100}
-                placeholder="Run name"
-                disabled={loading}
-            />
-            <Input.TextArea
-                value={editDescription}
-                onChange={(e) => setEditDescription(e.target.value)}
-                rows={3}
-                maxLength={500}
-                placeholder="Description (optional)"
-                disabled={loading}
-            />
+        <section className="flex flex-col gap-3 py-1">
+            <div className="flex flex-col gap-1">
+                <Typography.Text className=" font-medium">Evaluation</Typography.Text>
+                <Tag color="blue" className=" self-start">
+                    {currentName}
+                </Tag>
+            </div>
+
+            <div className="flex flex-col gap-1">
+                <Typography.Text className="font-medium">Rename to</Typography.Text>
+                <Input
+                    value={editName}
+                    onChange={(e) => setEditName(e.target.value)}
+                    maxLength={100}
+                    placeholder="Enter new name"
+                    disabled={loading}
+                    className="rounded-lg"
+                />
+            </div>
+
+            <div className="flex flex-col gap-1">
+                <Typography.Text className="font-medium">Description</Typography.Text>
+                <Input.TextArea
+                    value={editDescription}
+                    onChange={(e) => setEditDescription(e.target.value)}
+                    rows={2}
+                    maxLength={500}
+                    placeholder="Add description (optional)"
+                    disabled={loading}
+                    className="rounded-lg"
+                />
+            </div>
+
             {error && <Typography.Text type="danger">{error}</Typography.Text>}
         </section>
     )

web/oss/src/components/EvalRunDetails/HumanEvalRun/components/Modals/RenameEvalModal/index.tsx

@@ -87,18 +87,23 @@ const RenameEvalModal = ({
 
     return (
         <EnhancedModal
-            title="Rename"
+            title={<div className="text-lg font-semibold text-gray-900">Rename evaluation</div>}
             onOk={handleSave}
             confirmLoading={loading}
-            okText="Save"
+            okText="Confirm"
             afterClose={onAfterClose}
             onCancel={onCancel}
-            okButtonProps={{disabled: isDisabled}}
+            okButtonProps={{
+                disabled: isDisabled,
+                className: "bg-slate-900 hover:bg-slate-800 text-white",
+            }}
+            cancelButtonProps={{className: "text-gray-700"}}
             {...modalProps}
         >
             <RenameEvalModalContent
                 loading={loading}
                 error={error}
+                currentName={name}
                 editName={editName}
                 setEditName={setEditName}
                 editDescription={editDescription}

web/oss/src/components/EvalRunDetails/HumanEvalRun/components/Modals/types.d.ts

@@ -14,6 +14,7 @@ export interface RenameEvalModalProps extends ModalProps {
 export interface RenameEvalModalContentProps {
     loading?: boolean
     error: string | null
+    currentName: string
     editName: string
     setEditName: Dispatch<SetStateAction<string>>
     editDescription: string

web/oss/src/components/Playground/Components/PlaygroundGenerations/assets/GenerationChat/index.tsx

@@ -1,8 +1,6 @@
 import {Typography} from "antd"
 import clsx from "clsx"
-import {useAtomValue} from "jotai"
-import {atom} from "jotai"
-import {useSetAtom} from "jotai"
+import {atom, useAtomValue, useSetAtom} from "jotai"
 
 import LastTurnFooterControls from "@/oss/components/Playground/Components/ChatCommon/LastTurnFooterControls"
 import {isComparisonViewAtom} from "@/oss/components/Playground/state/atoms"
@@ -12,8 +10,8 @@ import {
 } from "@/oss/components/Playground/state/atoms/generationProperties"
 import {
     addChatTurnAtom,
-    runChatTurnAtom,
     cancelChatTurnAtom,
+    runChatTurnAtom,
 } from "@/oss/state/newPlayground/chat/actions"
 import {promptsAtomFamily} from "@/oss/state/newPlayground/core/prompts"
 
@@ -65,7 +63,7 @@ const GenerationChat = ({variantId, viewAs}: GenerationChatProps) => {
             >
                 <div className="flex flex-col gap-1">
                     {!isComparisonView && (
-                        <div className="shrink-0 top-[48px] sticky bg-colorBgContainer z-[10] w-full">
+                        <div className="shrink-0 top-[48px] sticky bg-white z-[10] w-full">
                             <Typography>Chat</Typography>
                         </div>
                     )}