From 725566d527cb1d847bc67f75f3604acaac5623db Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 20 Mar 2024 14:05:30 +0100
Subject: [PATCH] Make big view appear when chat not available

---
 src/frontend/src/components/IOview/index.tsx | 72 ++++++++++----------
 src/frontend/src/modals/baseModal/index.tsx  |  9 ++-
 2 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index 3af96dc51..2e57bf269 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/src/frontend/src/components/IOview/index.tsx
@@ -105,7 +105,13 @@ export default function IOView({
 
   return (
     <BaseModal
-      size={haveChat ? (selectedTab === 0 ? "large-thin" : "large") : "small"}
+      size={
+        haveChat || selectedViewField
+          ? selectedTab === 0
+            ? "large-thin"
+            : "large"
+          : "small"
+      }
       open={open}
       setOpen={setOpen}
       disable={disable}
@@ -123,13 +129,13 @@ export default function IOView({
         </div>
       </BaseModal.Header>
       <BaseModal.Content>
-        <div className="flex h-full flex-col">
+        <div className="flex h-full flex-col overflow-hidden">
           <div className="flex-max-width mt-2 h-full">
             {selectedTab !== 0 && (
               <div
                 className={cn(
-                  "mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start",
-                  haveChat ? "w-2/6" : "w-full"
+                  "mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300",
+                  haveChat || selectedViewField ? "w-2/6" : "w-full"
                 )}
               >
                 <Tabs
@@ -179,20 +185,18 @@ export default function IOView({
                                   <Badge variant="gray" size="md">
                                     {node.data.node.display_name}
                                   </Badge>
-                                  {haveChat && (
-                                    <div
-                                      className="-mb-1 pr-4"
-                                      onClick={(event) => {
-                                        event.stopPropagation();
-                                        setSelectedViewField(input);
-                                      }}
-                                    >
-                                      <IconComponent
-                                        className="h-4 w-4"
-                                        name="ExternalLink"
-                                      ></IconComponent>
-                                    </div>
-                                  )}
+                                  <div
+                                    className="-mb-1 pr-4"
+                                    onClick={(event) => {
+                                      event.stopPropagation();
+                                      setSelectedViewField(input);
+                                    }}
+                                  >
+                                    <IconComponent
+                                      className="h-4 w-4"
+                                      name="ExternalLink"
+                                    ></IconComponent>
+                                  </div>
                                 </div>
                               }
                               key={index}
@@ -248,20 +252,18 @@ export default function IOView({
                                       </Badge>
                                     </div>
                                   </ShadTooltip>
-                                  {haveChat && (
-                                    <div
-                                      className="-mb-1 pr-4"
-                                      onClick={(event) => {
-                                        event.stopPropagation();
-                                        setSelectedViewField(output);
-                                      }}
-                                    >
-                                      <IconComponent
-                                        className="h-4 w-4"
-                                        name="ExternalLink"
-                                      ></IconComponent>
-                                    </div>
-                                  )}
+                                  <div
+                                    className="-mb-1 pr-4"
+                                    onClick={(event) => {
+                                      event.stopPropagation();
+                                      setSelectedViewField(output);
+                                    }}
+                                  >
+                                    <IconComponent
+                                      className="h-4 w-4"
+                                      name="ExternalLink"
+                                    ></IconComponent>
+                                  </div>
                                 </div>
                               }
                               key={index}
@@ -287,12 +289,12 @@ export default function IOView({
               </div>
             )}
 
-            {haveChat ? (
+            {haveChat || selectedViewField ? (
               <div className="flex h-full min-w-96 flex-grow">
                 {selectedViewField && (
                   <div
                     className={cn(
-                      "flex h-full w-full flex-col items-start gap-4 p-4",
+                      "flex h-full w-full flex-col items-start gap-4 pt-4",
                       !selectedViewField ? "hidden" : ""
                     )}
                   >
@@ -347,7 +349,7 @@ export default function IOView({
       </BaseModal.Content>
       <BaseModal.Footer>
         {!haveChat && (
-          <div className="flex w-full justify-end pt-6">
+          <div className="flex w-full justify-end pt-2">
             <Button
               variant={"outline"}
               className="flex gap-2 px-3"
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index 695d4a72e..a8a59dad3 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@@ -10,6 +10,7 @@ import {
   DialogTrigger,
 } from "../../components/ui/dialog";
 import { modalHeaderType } from "../../types/components";
+import { cn } from "../../utils/utils";
 
 type ContentProps = { children: ReactNode };
 type HeaderProps = { children: ReactNode; description: string };
@@ -157,11 +158,15 @@ function BaseModal({
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       {triggerChild}
-      <DialogContent className={minWidth}>
+      <DialogContent className={cn(minWidth, "duration-300")}>
         <div className="truncate-doubleline word-break-break-word">
           {headerChild}
         </div>
-        <div className={`flex flex-col ${height!} w-full `}>{ContentChild}</div>
+        <div
+          className={`flex flex-col ${height!} w-full transition-all duration-300`}
+        >
+          {ContentChild}
+        </div>
         {ContentFooter && (
           <div className="flex flex-row-reverse">{ContentFooter}</div>
         )}