From a9910713beb809b93d4cbed34e2269123527f5ee Mon Sep 17 00:00:00 2001
From: Willy Douhard <willy.douhard@gmail.com>
Date: Tue, 7 Jan 2025 09:48:01 +0100
Subject: [PATCH] fix: raw block code

---
 backend/chainlit/translations/en-US.json               | 2 +-
 frontend/src/components/AutoResizeTextarea.tsx         | 4 ++--
 frontend/src/components/CodeSnippet.tsx                | 8 ++++----
 frontend/src/components/chat/MessageComposer/index.tsx | 2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/backend/chainlit/translations/en-US.json b/backend/chainlit/translations/en-US.json
index f8a7fd096e..13d77e671a 100644
--- a/backend/chainlit/translations/en-US.json
+++ b/backend/chainlit/translations/en-US.json
@@ -176,7 +176,7 @@
             }
           },
           "DeleteThreadButton": {
-            "confirmMessage": "This will delete the thread as well as it's messages and elements.",
+            "confirmMessage": "This will delete the thread as well as its messages and elements.",
             "cancel": "Cancel",
             "confirm": "Confirm",
             "deletingChat": "Deleting chat",
diff --git a/frontend/src/components/AutoResizeTextarea.tsx b/frontend/src/components/AutoResizeTextarea.tsx
index 00d523b619..629cad31e6 100644
--- a/frontend/src/components/AutoResizeTextarea.tsx
+++ b/frontend/src/components/AutoResizeTextarea.tsx
@@ -35,7 +35,7 @@ const AutoResizeTextarea = ({
   useEffect(() => {
     const textarea = textareaRef.current;
     if (!textarea || !maxHeight) return;
-    textarea.style.height = 'auto';
+    textarea.style.height = '40px';
     const newHeight = Math.min(textarea.scrollHeight, maxHeight);
     textarea.style.height = `${newHeight}px`;
   }, [props.value]);
@@ -55,7 +55,7 @@ const AutoResizeTextarea = ({
       onCompositionStart={() => setIsComposing(true)}
       onCompositionEnd={() => setIsComposing(false)}
       className={cn(
-        'p-0 min-h-6 rounded-none resize-none border-none overflow-y-auto shadow-none focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0',
+        'p-0 min-h-[40px] h-[40px] rounded-none resize-none border-none overflow-y-auto shadow-none focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0',
         className
       )}
       placeholder={placeholder}
diff --git a/frontend/src/components/CodeSnippet.tsx b/frontend/src/components/CodeSnippet.tsx
index e0a02e3b7d..4bb900173a 100644
--- a/frontend/src/components/CodeSnippet.tsx
+++ b/frontend/src/components/CodeSnippet.tsx
@@ -29,7 +29,7 @@ const HighlightedCode = ({ language, children }: CodeSnippetProps) => {
     <pre className="m-0">
       <code
         ref={codeRef}
-        className={`language-${language} font-mono text-sm rounded-b-lg block`}
+        className={`language-${language} font-mono text-sm rounded-b-md block`}
       >
         {children}
       </code>
@@ -51,7 +51,7 @@ interface CodeProps {
   };
 }
 
-export default function CodeSnippet({ children, ...props }: CodeProps) {
+export default function CodeSnippet({ ...props }: CodeProps) {
   const codeChildren = props.node?.children?.[0];
   const className = codeChildren?.properties?.className?.[0];
   const match = /language-(\w+)/.exec(className || '');
@@ -64,8 +64,8 @@ export default function CodeSnippet({ children, ...props }: CodeProps) {
   ) : null;
 
   const nonHighlightedCode = showSyntaxHighlighter ? null : (
-    <div className="rounded-lg p-2 min-h-20 overflow-x-auto bg-accent">
-      <code className="whitespace-pre-wrap">{children}</code>
+    <div className="p-2 rounded-b-md min-h-20 overflow-x-auto bg-accent">
+      <code className="whitespace-pre-wrap">{code}</code>
     </div>
   );
 
diff --git a/frontend/src/components/chat/MessageComposer/index.tsx b/frontend/src/components/chat/MessageComposer/index.tsx
index 0b9aa846f5..c73a027d7c 100644
--- a/frontend/src/components/chat/MessageComposer/index.tsx
+++ b/frontend/src/components/chat/MessageComposer/index.tsx
@@ -143,7 +143,7 @@ export default function MessageComposer({
         onPaste={onPaste}
         onEnter={submit}
         onChange={(e) => setValue(e.target.value)}
-        className="mt-1 bg-transparent placeholder:text-base placeholder:font-medium text-base"
+        className="bg-transparent placeholder:text-base placeholder:font-medium text-base"
         maxHeight={250}
         placeholder={t('components.organisms.chat.inputBox.input.placeholder')}
       />