From 99d07b4e657122f81c1c0b0b4edb74e1437eada4 Mon Sep 17 00:00:00 2001
From: Martin Mark <martin.mark@wandb.com>
Date: Thu, 12 Dec 2024 12:58:14 -0500
Subject: [PATCH] Updated Playground editor component (#3217)

---
 .../Browse3/pages/ChatView/MessagePanel.tsx   |  7 +++++
 .../ChatView/PlaygroundMessagePanelEditor.tsx |  5 ++-
 .../pages/PlaygroundPage/StyledTextarea.tsx   | 31 ++++++++++++++++---
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/MessagePanel.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/MessagePanel.tsx
index f570b2f6295..8cec95707fa 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/MessagePanel.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/MessagePanel.tsx
@@ -47,6 +47,13 @@ export const MessagePanel = ({
     }
   }, [message.content, contentRef?.current?.scrollHeight]);
 
+  // Set isShowingMore to true when editor is opened
+  useEffect(() => {
+    if (editorHeight !== null) {
+      setIsShowingMore(true);
+    }
+  }, [editorHeight]);
+
   const isUser = message.role === 'user';
   const isSystemPrompt = message.role === 'system';
   const isTool = message.role === 'tool';
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/PlaygroundMessagePanelEditor.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/PlaygroundMessagePanelEditor.tsx
index aa519c9659b..d643f103481 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/PlaygroundMessagePanelEditor.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/PlaygroundMessagePanelEditor.tsx
@@ -68,13 +68,12 @@ export const PlaygroundMessagePanelEditor: React.FC<
     <div
       className={classNames(
         'w-full pt-[6px]',
-        isNested ? 'px-[4px]' : 'px-[8px]'
+        isNested ? 'px-[4px]' : 'px-[16px]'
       )}>
       <StyledTextArea
         value={editedContent}
         onChange={e => setEditedContent(e.target.value)}
-        autoGrow
-        maxHeight={160}
+        startHeight={320}
       />
       {/* 6px vs. 8px to make up for extra padding from textarea field */}
       <div className="z-100 mt-[6px] flex justify-end gap-[8px]">
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/StyledTextarea.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/StyledTextarea.tsx
index 14a5b121da5..97d6aa7d39b 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/StyledTextarea.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/StyledTextarea.tsx
@@ -8,11 +8,12 @@ import React, {forwardRef} from 'react';
 type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
   autoGrow?: boolean;
   maxHeight?: string | number;
+  startHeight?: string | number;
   reset?: boolean;
 };
 
 export const StyledTextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  ({className, autoGrow, maxHeight, reset, ...props}, ref) => {
+  ({className, autoGrow, maxHeight, startHeight, reset, ...props}, ref) => {
     const textareaRef = React.useRef<HTMLTextAreaElement>(null);
 
     React.useEffect(() => {
@@ -26,11 +27,22 @@ export const StyledTextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
           return;
         }
 
-        // Disable resize when autoGrow is true
-        textareaElement.style.resize = 'none';
+        // Only disable resize when autoGrow is true
+        textareaElement.style.resize = autoGrow ? 'none' : 'vertical';
+
+        // Set initial height if provided
+        if (startHeight && textareaElement.value === '') {
+          textareaElement.style.height =
+            typeof startHeight === 'number' ? `${startHeight}px` : startHeight;
+          return;
+        }
 
         if (reset || textareaElement.value === '') {
-          textareaElement.style.height = 'auto';
+          textareaElement.style.height = startHeight
+            ? typeof startHeight === 'number'
+              ? `${startHeight}px`
+              : startHeight
+            : 'auto';
           return;
         }
 
@@ -63,7 +75,7 @@ export const StyledTextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
 
       return () =>
         textareaRefElement.removeEventListener('input', adjustHeight);
-    }, [autoGrow, maxHeight, reset]);
+    }, [autoGrow, maxHeight, reset, startHeight]);
 
     return (
       <Tailwind style={{display: 'contents'}}>
@@ -86,6 +98,7 @@ export const StyledTextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
             'focus:outline-none',
             'relative bottom-0 top-0 items-center rounded-sm',
             'outline outline-1 outline-moon-250',
+            !autoGrow && 'resize-y',
             props.disabled
               ? 'opacity-50'
               : 'hover:outline hover:outline-2 hover:outline-teal-500/40 focus:outline-2',
@@ -94,6 +107,14 @@ export const StyledTextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
             'placeholder-moon-500 dark:placeholder-moon-600',
             className
           )}
+          style={{
+            height: startHeight
+              ? typeof startHeight === 'number'
+                ? `${startHeight}px`
+                : startHeight
+              : undefined,
+            ...props.style,
+          }}
           {...props}
         />
       </Tailwind>