From be6b5397874fce621ba95b2b5f13dd78723ddc70 Mon Sep 17 00:00:00 2001
From: yz778 <ying17@gmail.com>
Date: Fri, 31 Jan 2025 20:00:16 -0800
Subject: [PATCH 1/2] fix: Fix layout shift cause by hovering over icons + misc
 items

---
 src/components/Common/Playground/Message.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Common/Playground/Message.tsx b/src/components/Common/Playground/Message.tsx
index a9991a8..e156a75 100644
--- a/src/components/Common/Playground/Message.tsx
+++ b/src/components/Common/Playground/Message.tsx
@@ -53,7 +53,7 @@ export const PlaygroundMessage = (props: Props) => {
   const { cancel, isSpeaking, speak } = useTTS()
   return (
     <div className="group w-full text-gray-800 dark:text-gray-100">
-      <div className="text-base md:max-w-2xl lg:max-w-xl xl:max-w-3xl  flex lg:px-0 m-auto w-full">
+      <div className="text-base md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full">
         <div className="flex flex-row gap-4 md:gap-6 p-4 md:py-6 lg:px-0 m-auto w-full">
           <div className="w-8 flex flex-col relative items-end">
             <div className="relative h-7 w-7 p-1 rounded-sm text-white flex items-center justify-center  text-opacity-100r">
@@ -132,7 +132,7 @@ export const PlaygroundMessage = (props: Props) => {
                   </>
                 ) : (
                   <p
-                    className={`prose dark:prose-invert whitespace-pre-line	 prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark ${
+                    className={`prose dark:prose-invert whitespace-pre-line	prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark ${
                       props.message_type &&
                       "italic text-gray-500 dark:text-gray-400 text-sm"
                     }`}>
@@ -148,7 +148,7 @@ export const PlaygroundMessage = (props: Props) => {
                 />
               )}
             </div>
-            {/* source if aviable */}
+            {/* source if available */}
             {props.images &&
               props.images &&
               props.images.filter((img) => img.length > 0).length > 0 && (
@@ -196,10 +196,10 @@ export const PlaygroundMessage = (props: Props) => {
             )}
             {!props.isProcessing && !editMode && (
               <div
-                className={`space-x-2 gap-2 mt-3 ${
+                className={`space-x-2 gap-2 mt-3 flex ${
                   props.currentMessageIndex !== props.totalMessages - 1
-                    ? "hidden group-hover:flex"
-                    : "flex"
+                    ? "invisible group-hover:visible"
+                    : ""
                 }`}>
                 {props.isTTSEnabled && (
                   <Tooltip title={t("tts")}>

From 509a73238ec45f77efb610a25e9a16d855e4c0cd Mon Sep 17 00:00:00 2001
From: yz778 <ying17@gmail.com>
Date: Fri, 31 Jan 2025 20:04:28 -0800
Subject: [PATCH 2/2] Whitespace fix

---
 src/components/Common/Playground/Message.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Common/Playground/Message.tsx b/src/components/Common/Playground/Message.tsx
index e156a75..1172c41 100644
--- a/src/components/Common/Playground/Message.tsx
+++ b/src/components/Common/Playground/Message.tsx
@@ -132,7 +132,7 @@ export const PlaygroundMessage = (props: Props) => {
                   </>
                 ) : (
                   <p
-                    className={`prose dark:prose-invert whitespace-pre-line	prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark ${
+                    className={`prose dark:prose-invert whitespace-pre-line prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark ${
                       props.message_type &&
                       "italic text-gray-500 dark:text-gray-400 text-sm"
                     }`}>