add hsitory tab section to playground

src/frontend/src/modals/IOModal/index.tsx

@@ -19,7 +19,7 @@ import { InputOutput } from "../../constants/enums";
 import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { IOModalPropsType } from "../../types/components";
-import { NodeType } from "../../types/flow";
+import { NodeDataType, NodeType } from "../../types/flow";
 import { updateVerticesOrder } from "../../utils/buildUtils";
 import { cn } from "../../utils/utils";
 import BaseModal from "../baseModal";
@@ -113,13 +113,17 @@ export default function IOModal({
     setSelectedTab(inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0);
   }, [allNodes.length]);
 
+  const flow_sessions = allNodes
+    .map((node) => (node.data as NodeDataType).node?.template["session_id"])
+    .filter((session) => session !== undefined);
+
   useEffect(() => {
     setSelectedViewField(startView());
-    // if (haveChat) {
+    if (haveChat) {
-    //   getSessions().then((sessions) => {
+      getSessions().then((sessions) => {
-    //     setSessions(sessions);
+        setSessions(sessions);
-    //   });
+      });
-    // }
+    }
   }, [open]);
 
   return (
@@ -144,7 +148,6 @@ export default function IOModal({
       <BaseModal.Content>
         <div className="flex h-full flex-col ">
           <div className="flex-max-width h-full">
-            {selectedTab !== 0 && (
             <div
               className={cn(
                 "mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300",
@@ -167,20 +170,11 @@ export default function IOModal({
                     {outputs.length > 0 && (
                       <TabsTrigger value={"2"}>Outputs</TabsTrigger>
                     )}
-                      {/* {haveChat && (
+                    {haveChat && <TabsTrigger value={"0"}>History</TabsTrigger>}
-                        <TabsTrigger value={"3"}>History</TabsTrigger>
-                      )} */}
                   </TabsList>
                 </div>
 
-                  <TabsContent
+                <TabsContent value={"1"} className="api-modal-tabs-content">
-                    value={"1"}
-                    className="api-modal-tabs-content mt-4"
-                  >
-                    <div className="mx-2 mb-2 flex items-center gap-2 text-sm font-bold">
-                      <IconComponent className="h-4 w-4" name={"Type"} />
-                      {TEXT_INPUT_MODAL_TITLE}
-                    </div>
                   {nodes
                     .filter((node) =>
                       inputs.some((input) => input.id === node.id),
@@ -241,14 +235,7 @@ export default function IOModal({
                       );
                     })}
                 </TabsContent>
-                  <TabsContent
+                <TabsContent value={"2"} className="api-modal-tabs-content">
-                    value={"2"}
-                    className="api-modal-tabs-content mt-4"
-                  >
-                    <div className="mx-2 mb-2 flex items-center gap-2 text-sm font-bold">
-                      <IconComponent className="h-4 w-4" name={"Type"} />
-                      {OUTPUTS_MODAL_TITLE}
-                    </div>
                   {nodes
                     .filter((node) =>
                       outputs.some((output) => output.id === node.id),
@@ -309,10 +296,32 @@ export default function IOModal({
                       );
                     })}
                 </TabsContent>
+                <TabsContent value={"0"} className="api-modal-tabs-content">
+                  {sessions.map((session, index) => {
+                    return (
+                      <div className="flex items-center justify-between border-b px-2 align-middle">
+                        {session}
+                        <div className="flex items-center justify-center gap-2 align-middle">
+                          <Button variant="ghost" onClick={() => {}}>
+                            <ShadTooltip content={"delete"}>
+                              <IconComponent
+                                name="Trash2"
+                                className="h-4 w-4"
+                              ></IconComponent>
+                            </ShadTooltip>
+                          </Button>
+                          <div>
+                            <ShadTooltip content>
+                              <div className="h-2 w-2 rounded-full bg-red-500"></div>
+                            </ShadTooltip>
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </TabsContent>
               </Tabs>
             </div>
-            )}
-
             <div className="flex h-full min-w-96 flex-grow">
               {selectedViewField && (
                 <div