Changed view to not show chat

src/frontend/src/components/IOview/index.tsx

@@ -1,7 +1,10 @@
 import { ReactNode, useState } from "react";
+import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
+import BaseModal from "../../modals/baseModal";
 import useFlowStore from "../../stores/flowStore";
 import { NodeType } from "../../types/flow";
 import { isInputType, isOutputType } from "../../utils/reactflowUtils";
+import { cn } from "../../utils/utils";
 import AccordionComponent from "../AccordionComponent";
 import IOInputField from "../IOInputField";
 import IOOutputView from "../IOOutputView";
@@ -10,7 +13,7 @@ import NewChatView from "../newChatView";
 import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
 
-export default function IOView(): JSX.Element {
+export default function IOView({ children, open, setOpen }): JSX.Element {
   const inputs = useFlowStore((state) => state.inputs);
   const outputs = useFlowStore((state) => state.outputs);
   const inputIds = inputs.map((obj) => obj.id);
@@ -39,7 +42,7 @@ export default function IOView(): JSX.Element {
 
   function getCategories() {
     const categories: CategoriesType[] = [];
-    if (inputs.length > 0)
+    if (inputs.filter((input) => input.type !== "ChatInput").length > 0)
       categories.push({ name: "Inputs", icon: "TextCursorInput" });
     if (outputs.filter((output) => output.type !== "ChatOutput").length > 0)
       categories.push({ name: "Outputs", icon: "TerminalSquare" });
@@ -53,7 +56,7 @@ export default function IOView(): JSX.Element {
       return <IOInputField inputId={id!} inputType={type} />;
     if (isOutputType(type))
       return <IOOutputView outputId={id!} outputType={type} />;
-    else return <div>no view selected</div>;
+    else return undefined;
   }
 
   function UpdateAccordion() {
@@ -61,15 +64,36 @@ export default function IOView(): JSX.Element {
   }
 
   return (
-    <div className="form-modal-iv-box">
+    <BaseModal size={handleSelectChange() ? "large" : "small"} open={open} setOpen={setOpen}>
-      <div className="mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide">
+      <BaseModal.Trigger>{children}</BaseModal.Trigger>
+      {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}
+      <BaseModal.Header description={CHAT_FORM_DIALOG_SUBTITLE}>
+        <div className="flex items-center">
+          <span className="pr-2">Chat</span>
+          <IconComponent
+            name="prompts"
+            className="h-6 w-6 pl-1 text-foreground"
+            aria-hidden="true"
+          />
+        </div>
+      </BaseModal.Header>
+      <BaseModal.Content>
+        <div className="flex-max-width mt-2">
+          <div
+            className={cn(
+              "mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide",
+              handleSelectChange() ? "w-2/6" : "w-full"
+            )}
+          >
             <div className="flex items-start gap-4 py-2">
               {categories.map((category, index) => {
                 return (
                   //hide chat button if chat is alredy on the view
                   <Button
                     onClick={() => setSelectedCategory(index)}
-                variant={index === selectedCategory ? "primary" : "secondary"}
+                    variant={
+                      index === selectedCategory ? "primary" : "secondary"
+                    }
                     key={index}
                   >
                     <IconComponent
@@ -103,9 +127,14 @@ export default function IOView(): JSX.Element {
                 )}
             </div>
             {UpdateAccordion()
-          .filter((input) => input.type !== "ChatInput")
+              .filter(
+                (input) =>
+                  input.type !== "ChatInput" && input.type !== "ChatOutput"
+              )
               .map((input, index) => {
-            const node: NodeType = nodes.find((node) => node.id === input.id)!;
+                const node: NodeType = nodes.find(
+                  (node) => node.id === input.id
+                )!;
                 return (
                   <div className="file-component-accordion-div" key={index}>
                     <AccordionComponent
@@ -118,7 +147,10 @@ export default function IOView(): JSX.Element {
                             className="-mb-1 pr-4"
                             onClick={(event) => {
                               event.stopPropagation();
-                          setSelectedView({ type: input.type, id: input.id });
+                              setSelectedView({
+                                type: input.type,
+                                id: input.id,
+                              });
                             }}
                           >
                             <IconComponent
@@ -150,7 +182,9 @@ export default function IOView(): JSX.Element {
                 );
               })}
           </div>
-      {handleSelectChange()}
+          {handleSelectChange() && handleSelectChange()}
         </div>
+      </BaseModal.Content>
+    </BaseModal>
   );
 }

src/frontend/src/components/chatComponent/index.tsx

@@ -1,12 +1,8 @@
 import { useEffect, useRef, useState } from "react";
-import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
-import BaseModal from "../../modals/baseModal";
 import useFlowStore from "../../stores/flowStore";
 import { ChatType } from "../../types/chat";
 import IOView from "../IOview";
 import ChatTrigger from "../ViewTriggers/chat";
-import IconComponent from "../genericIconComponent";
-import BuildTrigger from "./buildTrigger";
 
 export default function Chat({ flow }: ChatType): JSX.Element {
   const [open, setOpen] = useState(false);
@@ -38,27 +34,9 @@ export default function Chat({ flow }: ChatType): JSX.Element {
       <div className="flex flex-col">
         {/* <BuildTrigger open={open} flow={flow} /> */}
         {hasIO && (
-          <BaseModal open={open} setOpen={setOpen}>
+          <IOView open={open} setOpen={setOpen}>
-            <BaseModal.Trigger asChild>
-              <div onClick={() => setOpen(true)}>
               <ChatTrigger />
-              </div>
+          </IOView>
-            </BaseModal.Trigger>
-            {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}
-            <BaseModal.Header description={CHAT_FORM_DIALOG_SUBTITLE}>
-              <div className="flex items-center">
-                <span className="pr-2">Chat</span>
-                <IconComponent
-                  name="prompts"
-                  className="h-6 w-6 pl-1 text-foreground"
-                  aria-hidden="true"
-                />
-              </div>
-            </BaseModal.Header>
-            <BaseModal.Content>
-              <IOView />
-            </BaseModal.Content>
-          </BaseModal>
         )}
       </div>
     </>

src/frontend/src/modals/formModal/index.tsx

@@ -439,7 +439,7 @@ export default function FormModal({
             <DialogDescription>{CHAT_FORM_DIALOG_SUBTITLE}</DialogDescription>
           </DialogHeader>
 
-          <div className="form-modal-iv-box ">
+          <div className="flex-max-width mt-2 h-[80vh]">
             <div className="form-modal-iv-size">
               <div className="file-component-arrangement">
                 <IconComponent

src/frontend/src/style/applies.css

@@ -926,9 +926,6 @@
   .form-modal-initial-prompt-btn {
     @apply mb-2 flex items-center gap-2 rounded-md border border-border bg-background px-4 py-2 text-sm font-semibold shadow-sm;
   }
-  .form-modal-iv-box {
-    @apply flex-max-width mt-2 h-[80vh];
-  }
   .form-modal-iv-size {
     @apply mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide;
   }