From ef76cc195e84f33aac3e12f5416506b5fc2c3057 Mon Sep 17 00:00:00 2001
From: Yuichi Oneda <ohneda@gmail.com>
Date: Mon, 10 Jun 2024 10:01:07 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(Textarea):=20Message=20Edi?=
 =?UTF-8?q?t=20Textarea=20Styling=20(#3009)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Chat/Messages/Content/EditMessage.tsx     | 66 ++++++++++---------
 1 file changed, 36 insertions(+), 30 deletions(-)

diff --git a/client/src/components/Chat/Messages/Content/EditMessage.tsx b/client/src/components/Chat/Messages/Content/EditMessage.tsx
index e17a17356d..a439eab561 100644
--- a/client/src/components/Chat/Messages/Content/EditMessage.tsx
+++ b/client/src/components/Chat/Messages/Content/EditMessage.tsx
@@ -3,7 +3,7 @@ import { EModelEndpoint } from 'librechat-data-provider';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { useUpdateMessageMutation } from 'librechat-data-provider/react-query';
 import type { TEditProps } from '~/common';
-import { cn, removeFocusOutlines } from '~/utils';
+import { cn, removeFocusRings } from '~/utils';
 import { useChatContext } from '~/Providers';
 import { useLocalize } from '~/hooks';
 import Container from './Container';
@@ -111,36 +111,42 @@ const EditMessage = ({
 
   return (
     <Container message={message}>
-      <TextareaAutosize
-        ref={textAreaRef}
-        onChange={(e) => {
-          setEditedText(e.target.value);
-        }}
-        onKeyDown={handleKeyDown}
-        data-testid="message-text-editor"
-        className={cn(
-          'markdown prose dark:prose-invert light whitespace-pre-wrap break-words dark:text-gray-20',
-          'm-0 w-full resize-none border-0 bg-transparent p-0',
-          removeFocusOutlines,
-        )}
-        onPaste={(e) => {
-          e.preventDefault();
+      <div className="bg-token-main-surface-primary relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border dark:border-gray-600 dark:text-white [&:has(textarea:focus)]:border-gray-300 [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)] dark:[&:has(textarea:focus)]:border-gray-500">
+        <TextareaAutosize
+          ref={textAreaRef}
+          onChange={(e) => {
+            setEditedText(e.target.value);
+          }}
+          onKeyDown={handleKeyDown}
+          data-testid="message-text-editor"
+          className={cn(
+            'markdown prose dark:prose-invert light whitespace-pre-wrap break-words',
+            'pl-3 md:pl-4',
+            'm-0 w-full resize-none border-0 bg-transparent py-[10px]',
+            'placeholder-black/50 focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder-white/50 md:py-3.5  ',
+            'pr-3 md:pr-4',
+            'max-h-[65vh] md:max-h-[75vh]',
+            removeFocusRings,
+          )}
+          onPaste={(e) => {
+            e.preventDefault();
 
-          const pastedData = e.clipboardData.getData('text/plain');
-          const textArea = textAreaRef.current;
-          if (!textArea) {
-            return;
-          }
-          const start = textArea.selectionStart;
-          const end = textArea.selectionEnd;
-          const newValue =
-            textArea.value.substring(0, start) + pastedData + textArea.value.substring(end);
-          setEditedText(newValue);
-        }}
-        contentEditable={true}
-        value={editedText}
-        suppressContentEditableWarning={true}
-      />
+            const pastedData = e.clipboardData.getData('text/plain');
+            const textArea = textAreaRef.current;
+            if (!textArea) {
+              return;
+            }
+            const start = textArea.selectionStart;
+            const end = textArea.selectionEnd;
+            const newValue =
+              textArea.value.substring(0, start) + pastedData + textArea.value.substring(end);
+            setEditedText(newValue);
+          }}
+          contentEditable={true}
+          value={editedText}
+          suppressContentEditableWarning={true}
+        />
+      </div>
       <div className="mt-2 flex w-full justify-center text-center">
         <button
           className="btn btn-primary relative mr-2"