add output preview for grouped components

src/frontend/src/CustomNodes/GenericNode/components/outputModal/components/switchOutputView/index.tsx

@@ -18,10 +18,7 @@ const SwitchOutputView: React.FC<SwitchOutputViewProps> = ({
   nodeId,
   outputName,
 }) => {
-  const nodes = useFlowStore((state) => state.nodes);
   const flowPool = useFlowStore((state) => state.flowPool);
-  const node = nodes.find((node) => node?.id === nodeId);
-
   const flowPoolNode = (flowPool[nodeId] ?? [])[
     (flowPool[nodeId]?.length ?? 1) - 1
   ];
@@ -46,7 +43,7 @@ const SwitchOutputView: React.FC<SwitchOutputViewProps> = ({
         ></ErrorOutput>
       </Case>
 
-      <Case condition={node && resultType === "text"}>
+      <Case condition={resultType === "text"}>
         <TextOutputView left={false} value={resultMessage} />
       </Case>
 

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -24,7 +24,7 @@ import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { useShortcutsStore } from "../../../../stores/shortcuts";
 import { useTypesStore } from "../../../../stores/typesStore";
-import { APIClassType } from "../../../../types/api";
+import { APIClassType, VertexDataTypeAPI } from "../../../../types/api";
 import { ParameterComponentType } from "../../../../types/components";
 import { isErrorLog } from "../../../../types/utils/typeCheckingUtils";
 import {
@@ -34,6 +34,7 @@ import {
 import {
   convertObjToArray,
   convertValuesToNumbers,
+  getGroupOutputNodeId,
   hasDuplicateKeys,
   scapedJSONStringfy,
 } from "../../../../utils/reactflowUtils";
@@ -41,6 +42,9 @@ import {
   classNames,
   cn,
   isThereModal,
+  logHasMessage,
+  logTypeIsError,
+  logTypeIsUnknown,
 } from "../../../../utils/utils";
 import useFetchDataOnMount from "../../../hooks/use-fetch-data-on-mount";
 import useHandleOnNewValue from "../../../hooks/use-handle-new-value";
@@ -84,46 +88,30 @@ export default function ParameterComponent({
   const [openOutputModal, setOpenOutputModal] = useState(false);
   const flowPool = useFlowStore((state) => state.flowPool);
 
-  const logHasMessage = (data: any) => {
-    if (!outputName) return;
-    const logs = data?.logs[outputName];
-    if (Array.isArray(logs) && logs.length > 1) {
-      return logs.some((log) => log.message);
-    } else {
-      return logs?.message;
+  let flowPoolId = data.id;
+  let internalOutputName = outputName;
+  
+  if(data.node?.flow && outputProxy){
+    const realOutput =  getGroupOutputNodeId(data.node.flow, outputProxy.name, outputProxy.id)
+    if(realOutput){
+      flowPoolId = realOutput.id;
+      internalOutputName = realOutput.outputName;
     }
-  };
+  }
 
-  const logTypeIsUnknown = (data: any) => {
-    if (!outputName) return;
-    const logs = data?.logs[outputName];
-    if (Array.isArray(logs) && logs.length > 1) {
-      return logs.some((log) => log.type === "unknown");
-    } else {
-      return logs?.type === "unknown";
-    }
-  };
-
-  const logTypeIsError = (data: any) => {
-    if (!outputName) return;
-    const logs = data?.logs[outputName];
-    if (Array.isArray(logs) && logs.length > 1) {
-      return logs.some((log) => isErrorLog(log));
-    } else {
-      return isErrorLog(logs);
-    }
-  };
-
-  const flowPoolNode = (flowPool[data.id] ?? [])[
-    (flowPool[data.id]?.length ?? 1) - 1
+  const flowPoolNode = (flowPool[flowPoolId] ?? [])[
+    (flowPool[flowPoolId]?.length ?? 1) - 1
   ];
-  const displayOutputPreview =
-    !!flowPool[data.id] &&
-    logHasMessage(flowPool[data.id][flowPool[data.id].length - 1]?.data);
-
-  const unknownOutput = logTypeIsUnknown(flowPoolNode?.data);
-  const errorOutput = logTypeIsError(flowPoolNode?.data);
+  
+  const displayOutputPreview = !!flowPool[flowPoolId] && logHasMessage(flowPoolNode?.data,internalOutputName);
+  
+  const unknownOutput = logTypeIsUnknown(flowPoolNode?.data,internalOutputName);
+  const errorOutput = logTypeIsError(flowPoolNode?.data,internalOutputName);
 
+  if (outputProxy) {
+    console.log(logHasMessage(flowPoolNode?.data,internalOutputName))
+  }
+  
   const preventDefault = true;
 
   function handleOutputWShortcut() {
@@ -276,7 +264,7 @@ export default function ParameterComponent({
       className={
         "relative mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2" +
         ((name === "code" && type === "code") ||
-        (name.includes("code") && proxy)
+          (name.includes("code") && proxy)
           ? " hidden"
           : "")
       }
@@ -416,7 +404,7 @@ export default function ParameterComponent({
                   disabled={disabled}
                   value={
                     !data.node!.template[name]?.value ||
-                    data.node!.template[name]?.value === ""
+                      data.node!.template[name]?.value === ""
                       ? [""]
                       : data.node!.template[name]?.value
                   }
@@ -631,7 +619,7 @@ export default function ParameterComponent({
               editNode={false}
               value={
                 !data.node!.template[name]?.value ||
-                data.node!.template[name]?.value?.toString() === "{}"
+                  data.node!.template[name]?.value?.toString() === "{}"
                   ? {}
                   : data.node!.template[name]?.value
               }
@@ -648,7 +636,7 @@ export default function ParameterComponent({
               editNode={false}
               value={
                 data.node!.template[name]?.value?.length === 0 ||
-                !data.node!.template[name]?.value
+                  !data.node!.template[name]?.value
                   ? [{ "": "" }]
                   : convertObjToArray(data.node!.template[name]?.value, type!)
               }
@@ -670,9 +658,9 @@ export default function ParameterComponent({
         {openOutputModal && (
           <OutputModal
             open={openOutputModal}
-            nodeId={data.id}
+            nodeId={flowPoolId}
             setOpen={setOpenOutputModal}
-            outputName={outputName}
+            outputName={internalOutputName}
           />
         )}
       </>

src/frontend/src/types/api/index.ts

@@ -195,7 +195,7 @@ export type LogType = {
 // it has results, artifacts, timedelta, duration
 export type VertexDataTypeAPI = {
   results: { [key: string]: string };
-  logs: { [key: string]: LogType | LogType[] };
+  logs: { [key: string]: LogType };
   messages: ChatOutputType[] | ChatInputType[];
   inactive?: boolean;
   timedelta?: number;

src/frontend/src/utils/reactflowUtils.ts

@@ -1,4 +1,4 @@
-import { cloneDeep } from "lodash";
+import { cloneDeep, get } from "lodash";
 import {
   Connection,
   Edge,
@@ -1490,3 +1490,15 @@ export function updateGroupRecursion(groupNode: NodeType, edges: Edge[]) {
     updateEdgesIds(flowEdges, idsMap);
   }
 }
+
+export function getGroupOutputNodeId(flow:FlowType,p_name:string,p_node_id:string){
+  let node:NodeType|undefined = flow.data?.nodes.find((n) => n.id === p_node_id);
+  if(!node) return;
+  if(node.data.node?.flow){
+    let output = node.data.node.outputs?.find((o) => o.name === p_name);
+    if(output && output.proxy){
+      return getGroupOutputNodeId(node.data.node.flow,output.proxy.name,output.proxy.id);
+    }
+  }
+  return {id: node.id, outputName: p_name};
+}

src/frontend/src/utils/utils.ts

@@ -3,7 +3,7 @@ import clsx, { ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 import TableAutoCellRender from "../components/tableComponent/components/tableAutoCellRender";
 import { MESSAGES_TABLE_ORDER, MODAL_CLASSES } from "../constants/constants";
-import { APIDataType, InputFieldType } from "../types/api";
+import { APIDataType, InputFieldType, VertexDataTypeAPI } from "../types/api";
 import {
   groupedObjType,
   nodeGroupedObjType,
@@ -11,6 +11,7 @@ import {
 } from "../types/components";
 import { NodeType } from "../types/flow";
 import { FlowState } from "../types/tabs";
+import { isErrorLog } from "../types/utils/typeCheckingUtils";
 
 export function classNames(...classes: Array<string>): string {
   return classes.filter(Boolean).join(" ");
@@ -423,3 +424,33 @@ export function messagesSorter(a: any, b: any) {
 
   return orderA - orderB;
 }
+
+export const logHasMessage = (data: VertexDataTypeAPI,outputName:string|undefined) => {
+  if (!outputName) return;
+  const logs = data?.logs[outputName];
+  if (Array.isArray(logs) && logs.length > 1) {
+    return logs.some((log) => log.message);
+  } else {
+    return logs?.message;
+  }
+};
+
+export const logTypeIsUnknown = (data: VertexDataTypeAPI,outputName:string|undefined) => {
+  if (!outputName) return;
+  const logs = data?.logs[outputName];
+  if (Array.isArray(logs) && logs.length > 1) {
+    return logs.some((log) => log.type === "unknown");
+  } else {
+    return logs?.type === "unknown";
+  }
+};
+
+export const logTypeIsError = (data: VertexDataTypeAPI,outputName:string|undefined) => {
+  if (!outputName) return;
+  const logs = data?.logs[outputName];
+  if (Array.isArray(logs) && logs.length > 1) {
+    return logs.some((log) => isErrorLog(log));
+  } else {
+    return isErrorLog(logs);
+  }
+};