From 8229bf4b4e9a216c3be58a4c30c119f734d5fffe Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 29 Jun 2023 22:32:56 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(chatInput):=20adjust=20paddi?=
 =?UTF-8?q?ng-right=20value=20to=20align=20input=20field=20properly=20?=
 =?UTF-8?q?=F0=9F=90=9B=20fix(chatMessage):=20set=20max-width=20to=20preve?=
 =?UTF-8?q?nt=20overflow=20of=20markdown=20content=20=F0=9F=90=9B=20fix(fo?=
 =?UTF-8?q?rmModal):=20remove=20unnecessary=20badge=20for=20handle=20keys?=
 =?UTF-8?q?=20in=20accordion=20item?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/modals/formModal/chatInput/index.tsx   | 4 ++--
 src/frontend/src/modals/formModal/chatMessage/index.tsx | 2 +-
 src/frontend/src/modals/formModal/index.tsx             | 8 +++++---
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/modals/formModal/chatInput/index.tsx b/src/frontend/src/modals/formModal/chatInput/index.tsx
index 50d42dd3f..3bcdec887 100644
--- a/src/frontend/src/modals/formModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/formModal/chatInput/index.tsx
@@ -53,7 +53,7 @@ export default function ChatInput({
           lockChat
             ? " bg-input text-black dark:bg-gray-700 dark:text-gray-300"
             : "  bg-white-200 text-black dark:bg-gray-900 dark:text-gray-300",
-          "p-4 form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-12 sm:text-sm" +
+          "p-4 form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-16 sm:text-sm" +
             INPUT_STYLE
         )}
         placeholder={"Send a message..."}
@@ -62,7 +62,7 @@ export default function ChatInput({
         <button className={classNames("p-2 px-1 transition-all duration-300 rounded-md",chatValue == "" ? "text-primary" : " bg-indigo-600 text-background")} disabled={lockChat} onClick={() => sendMessage()}>
           {lockChat ? (
             <Lock
-              className="h-5 w-5 ml-1 mr-11 animate-pulse"
+              className="h-5 w-5 ml-1 mr-1 animate-pulse"
               aria-hidden="true"
             />
           ) : (
diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx
index 3b7bdf650..765f35fac 100644
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@@ -92,7 +92,7 @@ export default function ChatMessage({
                     <ReactMarkdown
                       remarkPlugins={[remarkGfm, remarkMath]}
                       rehypePlugins={[rehypeMathjax]}
-                      className="markdown prose dark:prose-invert text-primary"
+                      className="markdown prose dark:prose-invert text-primary max-w-full"
                       components={{
                         code({ node, inline, className, children, ...props }) {
                           if (children.length) {
diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index a1c7e416b..ca8133708 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -382,8 +382,8 @@ export default function FormModal({
             <DialogDescription>{CHAT_FORM_DIALOG_SUBTITLE}</DialogDescription>
           </DialogHeader>
 
-          <div className="flex h-[80vh] w-full mt-2">
-            <div className="w-1/4 h-full flex flex-col justify-start mr-6">
+          <div className="flex h-[80vh] w-full mt-2 ">
+            <div className="w-1/4 h-full overflow-auto scrollbar-hide flex flex-col justify-start mr-6">
               <div className="flex py-2">
                 <Variable className="w-6 h-6 pe-1 text-gray-700 stroke-2 dark:text-slate-200"></Variable>
                 <span className="text-md font-semibold text-gray-800 dark:text-white">
@@ -393,9 +393,10 @@ export default function FormModal({
               <Accordion type="single" collapsible className="w-full">
                 {Object.keys(tabsState[id.current].formKeysData.input_keys).map((i, k) => (
                   <AccordionItem key={k} value={i}>
-                    <AccordionTrigger className="flex gap-2"><Badge variant="gray" size="md">{i}</Badge>{tabsState[id.current].formKeysData.handle_keys.some((t) => t === i) && <Badge size="md" variant="secondary">Handle</Badge>}</AccordionTrigger>
+                    <AccordionTrigger className="flex gap-2"><Badge variant="gray" size="md">{i}</Badge></AccordionTrigger>
                     <AccordionContent>
                       <div className="p-1 flex flex-col gap-2">
+                      {tabsState[id.current].formKeysData.handle_keys.some((t) => t === i) ? <div className="font-normal text-muted-foreground ">Handle</div> :
                         <div className="flex items-center space-x-2">
                           <Label htmlFor="airplane-mode" className="-mt-1">From Chat</Label>
                           <ToggleShadComponent
@@ -407,6 +408,7 @@ export default function FormModal({
                             disabled={false}
                           />
                         </div>
+                      }
                         <Textarea
                           value={tabsState[id.current].formKeysData.input_keys[i]}
                           onChange={(e) =>