feat: Refactor message bubble rendering for improved edit mode handling

Author: n4ze3m

src/components/Common/Playground/PlaygroundUserMessage.tsx

@@ -91,14 +91,24 @@ export const PlaygroundUserMessageBubble: React.FC<Props> = (props) => {
               ))}
           </div>
         )}
-      <div
-        dir="auto"
-        className={`message-bubble bg-gray-50 dark:bg-[#242424] rounded-3xl prose dark:prose-invert break-words text-primary min-h-7 prose-p:opacity-95 prose-strong:opacity-100 bg-foreground border border-input-border max-w-[100%] sm:max-w-[90%] px-4 py-2.5 rounded-br-lg dark:border-[#2D2D2D] ${
-          props.message_type && !editMode ? "italic" : ""
-        }`}>
-        {!editMode ? (
+
+      {!editMode && props?.message?.length > 0 && (
+        <div
+          dir="auto"
+          data-is-not-editable={!editMode}
+          className={`message-bubble bg-gray-50 dark:bg-[#242424] rounded-3xl prose dark:prose-invert break-words text-primary min-h-7 prose-p:opacity-95 prose-strong:opacity-100 bg-foreground border border-input-border max-w-[100%] sm:max-w-[90%] px-4 py-2.5 rounded-br-lg dark:border-[#2D2D2D] ${
+            props.message_type && !editMode ? "italic" : ""
+          }`}>
           <HumanMessage message={props.message} />
-        ) : (
+        </div>
+      )}
+
+      {editMode && (
+        <div
+          dir="auto"
+          className={`message-bubble bg-gray-50 dark:bg-[#242424] rounded-3xl prose dark:prose-invert break-words text-primary min-h-7 prose-p:opacity-95 prose-strong:opacity-100 bg-foreground border border-input-border max-w-[100%] sm:max-w-[90%] px-4 py-2.5 rounded-br-lg dark:border-[#2D2D2D] ${
+            props.message_type && !editMode ? "italic" : ""
+          }`}>
           <div className="w-screen max-w-[100%]">
             <EditMessageForm
               value={props.message}
@@ -107,8 +117,8 @@ export const PlaygroundUserMessageBubble: React.FC<Props> = (props) => {
               isBot={props.isBot}
             />
           </div>
-        )}
-      </div>
+        </div>
+      )}
 
       {props.images &&
         props.images.filter((img) => img.length > 0).length > 0 && (