Merge branch 'dev' into cz/fix-messages-deleting-error

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -26,6 +26,7 @@ import {
   TabsTrigger,
 } from "../../components/ui/tabs";
 import { LANGFLOW_SUPPORTED_TYPES } from "../../constants/constants";
+import getTabsOrder from "../../modals/apiModal/utils/get-tabs-order";
 import { Case } from "../../shared/components/caseComponent";
 import { useDarkStore } from "../../stores/darkStore";
 import useFlowStore from "../../stores/flowStore";
@@ -56,6 +57,8 @@ export default function CodeTabsComponent({
   setActiveTweaks,
   activeTweaks,
   allowExport = false,
+  isThereTweaks = false,
+  isThereWH = false,
 }: codeTabsPropsType) {
   const [isCopied, setIsCopied] = useState<Boolean>(false);
   const [data, setData] = useState(flow ? flow["data"]!["nodes"] : null);
@@ -93,6 +96,8 @@ export default function CodeTabsComponent({
     return node.data.node.template[templateParam].type;
   };
 
+  const tabsOrder = getTabsOrder(isThereWH, isThereTweaks);
+
   return (
     <Tabs
       value={activeTab}
@@ -172,7 +177,7 @@ export default function CodeTabsComponent({
           className="api-modal-tabs-content overflow-hidden"
           key={idx} // Remember to add a unique key prop
         >
-          {idx < 5 ? (
+          {tabsOrder[idx].toLowerCase() !== "tweaks" ? (
             <div className="flex h-full w-full flex-col">
               {tab.description && (
                 <div
@@ -188,7 +193,7 @@ export default function CodeTabsComponent({
                 {tab.code}
               </SyntaxHighlighter>
             </div>
-          ) : idx === 5 ? (
+          ) : tabsOrder[idx].toLowerCase() === "tweaks" ? (
             <>
               <div className="api-modal-according-display">
                 <div

src/frontend/src/components/dataOutputComponent/index.tsx

@@ -10,9 +10,14 @@ function DataOutputComponent({
   columnMode = "union",
 }: {
   pagination: boolean;
-  rows: any;
+  rows: any[];
   columnMode?: "intersection" | "union";
 }) {
+  // If the rows are not an array of objects, convert them to an array of objects
+  if (rows.some((row) => typeof row !== "object")) {
+    rows = rows.map((row) => ({ data: row }));
+  }
+
   const columns = extractColumnsFromRows(rows, columnMode);
 
   const columnDefs = columns.map((col, idx) => ({

src/frontend/src/controllers/API/index.ts

@@ -1124,5 +1124,8 @@ export async function deleteMessagesFn(ids: string[]) {
 }
 
 export async function updateMessageApi(data: Message) {
-  return await api.post(`${BASE_URL_API}monitor/messages/${data.id}`, data);
+  if (data.files && typeof data.files === "string") {
+    data.files = JSON.parse(data.files);
+  }
+  return await api.put(`${BASE_URL_API}monitor/messages/${data.id}`, data);
 }

src/frontend/src/modals/apiModal/index.tsx

@@ -44,11 +44,12 @@ const ApiModal = forwardRef(
     },
     ref,
   ) => {
+    const tweaksCode = buildTweaks(flow);
     const tweak = useTweaksStore((state) => state.tweak);
     const addTweaks = useTweaksStore((state) => state.setTweak);
     const setTweaksList = useTweaksStore((state) => state.setTweaksList);
     const tweaksList = useTweaksStore((state) => state.tweaksList);
-
+    const isThereTweaks = Object.keys(tweaksCode).length > 0;
     const [activeTweaks, setActiveTweaks] = useState(false);
     const { autoLogin } = useContext(AuthContext);
     const [open, setOpen] =
@@ -82,7 +83,6 @@ const ApiModal = forwardRef(
     const pythonCode = getPythonCode(flow?.name, tweak);
     const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
     const includeWebhook = flow.webhook;
-    const tweaksCode = buildTweaks(flow);
     const codesArray = [
       runCurlCode,
       webhookCurlCode,
@@ -121,7 +121,7 @@ const ApiModal = forwardRef(
 
       filterNodes();
 
-      if (Object.keys(tweaksCode).length > 0) {
+      if (isThereTweaks) {
         setActiveTab("0");
         setTabs(createTabsArray(codesArray, includeWebhook, true));
       } else {
@@ -215,7 +215,6 @@ const ApiModal = forwardRef(
       );
       const pythonCode = getPythonCode(flow?.name, cloneTweak);
       const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
-      const isThereTweaks = Object.keys(tweaksCode).length > 0;
       const codesObj = getCodesObj({
         runCurlCode,
         webhookCurlCode,
@@ -251,6 +250,8 @@ const ApiModal = forwardRef(
         </BaseModal.Header>
         <BaseModal.Content overflowHidden>
           <CodeTabsComponent
+            isThereTweaks={isThereTweaks}
+            isThereWH={includeWebhook ?? false}
             flow={flow}
             tabs={tabs!}
             activeTab={activeTab}

src/frontend/src/modals/apiModal/utils/get-tabs-order.tsx

@@ -1,10 +1,11 @@
+import { cloneDeep } from "lodash";
 import { TABS_ORDER } from "../../../constants/constants";
 
 export default function getTabsOrder(
   isThereWH: boolean = false,
   isThereTweaks: boolean = false,
 ): string[] {
-  const defaultOrder = TABS_ORDER;
+  const defaultOrder = cloneDeep(TABS_ORDER);
   if (isThereTweaks) {
     defaultOrder.push("tweaks");
   }

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -228,7 +228,13 @@ export default function Page({
   }
 
   function handleCopy(e: KeyboardEvent) {
-    if (!isWrappedWithClass(e, "nocopy")) {
+    const multipleSelection = lastSelection?.nodes
+      ? lastSelection?.nodes.length > 0
+      : false;
+    if (
+      !isWrappedWithClass(e, "nocopy") &&
+      (isWrappedWithClass(e, "react-flow__node") || multipleSelection)
+    ) {
       e.preventDefault();
       (e as unknown as Event).stopImmediatePropagation();
       if (window.getSelection()?.toString().length === 0 && lastSelection) {

src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx

@@ -4,6 +4,7 @@ import {
   ColGroupDef,
   SelectionChangedEvent,
 } from "ag-grid-community";
+import { cloneDeep } from "lodash";
 import { useState } from "react";
 import TableComponent from "../../../../components/tableComponent";
 import useAlertStore from "../../../../stores/alertStore";
@@ -37,7 +38,7 @@ export default function MessagesPage() {
   function handleUpdateMessage(event: CellEditRequestEvent<any, string>) {
     const newValue = event.newValue;
     const field = event.column.getColId();
-    const row = event.data;
+    const row = cloneDeep(event.data);
     const data = {
       ...row,
       [field]: newValue,

src/frontend/src/types/components/index.ts

@@ -695,6 +695,8 @@ type codeTabsFuncTempType = {
 };
 
 export type codeTabsPropsType = {
+  isThereTweaks?: boolean;
+  isThereWH?: boolean;
   flow?: FlowType;
   tabs: Array<tabsArrayType>;
   activeTab: string;

src/frontend/src/types/messages/index.ts

@@ -6,6 +6,7 @@ type Message = {
   sender_name: string;
   session_id: string;
   timestamp: string;
+  files: Array<string>;
   id: string;
 };
 

src/frontend/src/utils/reactflowUtils.ts

@@ -1117,6 +1117,18 @@ export function updateProxyIdsOnTemplate(
   });
 }
 
+export function updateProxyIdsOnOutputs(
+  outputs: OutputFieldType[] | undefined,
+  idsMap: { [key: string]: string },
+) {
+  if (!outputs) return;
+  outputs.forEach((output) => {
+    if (output.proxy && idsMap[output.proxy.id]) {
+      output.proxy.id = idsMap[output.proxy.id];
+    }
+  });
+}
+
 export function updateEdgesIds(
   edges: Edge[],
   idsMap: { [key: string]: string },
@@ -1485,6 +1497,7 @@ export function updateGroupRecursion(groupNode: NodeType, edges: Edge[]) {
     let newFlow = groupNode.data.node!.flow;
     const idsMap = updateIds(newFlow.data!);
     updateProxyIdsOnTemplate(groupNode.data.node!.template, idsMap);
+    updateProxyIdsOnOutputs(groupNode.data.node.outputs, idsMap);
     let flowEdges = edges;
     updateEdgesIds(flowEdges, idsMap);
   }