From 48404fb316b544b13eb6ef94b97a27841546ef36 Mon Sep 17 00:00:00 2001
From: zhaoweijie <zwjCheer@163.com>
Date: Tue, 19 Aug 2025 17:42:13 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=8E=86=E5=8F=B2=E8=AE=B0=E5=BD=95=E7=BB=84=E4=BB=B6=E5=92=8C?=
 =?UTF-8?q?=20playground=20=E5=B8=83=E5=B1=80-=20=E6=9B=B4=E6=96=B0=20Hist?=
 =?UTF-8?q?ory=20=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=E6=95=88=E6=9E=9C=20-=20=E8=B0=83=E6=95=B4=20Playgrou?=
 =?UTF-8?q?nd=20=E5=B8=83=E5=B1=80=E7=BB=93=E6=9E=84=20-=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=20Sidebar=20=E8=81=8A=E5=A4=A9=E8=AE=B0=E5=BD=95=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Common/Playground/History.tsx    |  8 ++------
 src/components/Option/Playground/Playground.tsx | 13 +++++++++----
 src/components/Option/Sidebar.tsx               | 10 ++++++++--
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/Common/Playground/History.tsx b/src/components/Common/Playground/History.tsx
index d1ace83..ed19284 100644
--- a/src/components/Common/Playground/History.tsx
+++ b/src/components/Common/Playground/History.tsx
@@ -31,12 +31,8 @@ export const PlaygroundHistory = () => {
 
   return (
     <Card
-      className={`flex flex-col [&>:nth-child(2)]:flex-1 [&>:nth-child(2)]:overflow-y-auto w-[300px] h-full pt-16 pb-5 transition-all duration-300 ease-in-out transform ${
-        show
-          ? 'opacity-100 translate-x-0'
-          : 'opacity-0 -translate-x-full absolute'
-      }`}
-      style={{ paddingTop: "4rem" }}
+      className={`flex flex-col [&>:nth-child(2)]:flex-1 [&>:nth-child(2)]:overflow-y-auto w-[300px] h-full pt-16 pb-5 transition-all duration-300 ease-in-out`}
+      style={{ paddingTop: "4rem", width: show ? "300px" : "0" }}
       title={
         <div className="flex items-center justify-between w-full">
           {t("sidebarTitle")}
diff --git a/src/components/Option/Playground/Playground.tsx b/src/components/Option/Playground/Playground.tsx
index 2cd6d1b..e011365 100644
--- a/src/components/Option/Playground/Playground.tsx
+++ b/src/components/Option/Playground/Playground.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useContext } from "react"
 
 import { Card } from "antd"
 
@@ -23,6 +23,7 @@ import { PlaygroundTeam } from "@/components/Common/Playground/Team.tsx"
 import { PlaygroundTokenStatistics } from "@/components/Common/Playground/TokenStatistics.tsx"
 import { PlaygroundHistory } from "@/components/Common/Playground/History.tsx"
 import { PlaygroundIodRelevant } from "@/components/Common/Playground/IodRelevant.tsx"
+import { HistoryContext } from "@/components/Layouts/Layout.tsx"
 
 
 export const Playground = () => {
@@ -140,13 +141,15 @@ export const Playground = () => {
     setRecentMessagesOnLoad()
   }, [])
 
+  const { show } = useContext(HistoryContext)
+
   return (
     <div
       ref={drop}
       className={`relative flex gap-3 h-full items-center ${
         dropState === "dragging" ? "bg-gray-100 dark:bg-gray-800" : ""
       } bg-white dark:bg-[#171717]`}>
-        <PlaygroundHistory />
+      <PlaygroundHistory />
       <div className="relative h-full flex-1 prose-lg flex justify-center [&>*]:max-w-[848px]">
         <div
           ref={containerRef}
@@ -166,8 +169,10 @@ export const Playground = () => {
           <PlaygroundForm dropedFile={dropedFile} />
         </div>
       </div>
-      {messages.length &&  (
-        <div className="w-1/4 h-full grid grid-rows-[auto_530px_165px] pt-16 pr-5 pb-0 border-l border-gray-200" style={{"paddingTop": "4rem"}}>
+      {messages.length && (
+        <div
+          className="w-1/4 h-full grid grid-rows-[auto_530px_165px] pt-16 pr-5 pb-0 border-l border-gray-200"
+          style={{ paddingTop: "4rem" }}>
           <div className="w-full  overflow-y-auto border-gray-200 border-b p-3">
             <PlaygroundIodRelevant />
           </div>
diff --git a/src/components/Option/Sidebar.tsx b/src/components/Option/Sidebar.tsx
index cc44b82..1f85f4a 100644
--- a/src/components/Option/Sidebar.tsx
+++ b/src/components/Option/Sidebar.tsx
@@ -24,6 +24,7 @@ import {
   getLastUsedChatSystemPrompt,
   lastUsedChatModelEnabled
 } from "@/services/model-settings"
+import { useState } from "react"
 
 type Props = {
   onClose: () => void
@@ -169,7 +170,12 @@ export const Sidebar = ({
                 {group.items.map((chat, index) => (
                   <div
                     key={index}
-                    className="flex py-2 px-2 items-center gap-3 relative rounded-md truncate hover:pr-4 group transition-opacity duration-300 ease-in-out bg-gray-100 dark:bg-[#232222] dark:text-gray-100 text-gray-800 border hover:bg-gray-200 dark:hover:bg-[#2d2d2d] dark:border-gray-800">
+                    className={`
+                    flex py-2 px-2 items-center gap-3 relative rounded-md truncate hover:pr-4 group transition-opacity duration-300 ease-in-out  border 
+                    hover:text-[#615ced] hover:bg-[#f3f2ff] dark:hover:bg-[#2d2d2d] dark:border-gray-800
+                    hover:[&_.more-vertical]:text-[#615ced]
+                    ${historyId === chat.id ? 'text-[#615ced] bg-[#f3f2ff] border-[#615ced]' : 'dark:text-gray-100 text-gray-800'}
+                    `}>
                     {chat?.message_source === "copilot" && (
                       <Tooltip title={t("common:sidebarChat")} placement="top">
                         <BotIcon className="size-3 text-green-500" />
@@ -265,7 +271,7 @@ export const Sidebar = ({
                         trigger={["click"]}
                         placement="bottomRight">
                         <button className="text-gray-500 dark:text-gray-400 opacity-80 hover:opacity-100">
-                          <MoreVertical className="w-4 h-4" />
+                          <MoreVertical className={`group-hover:text-[#615ced] w-4 h-4 more-vertical ${historyId === chat.id ? 'text-[#615ced]' : ''}`} />
                         </button>
                       </Dropdown>
                     </div>