updating inside text modal but with bugs

src/frontend/src/components/stringReaderComponent/index.tsx

@@ -2,11 +2,13 @@ import TextModal from "../../modals/textModal";
 
 export default function StringReader({
   string,
+  setValue,
 }: {
   string: string;
+  setValue: (value: string) => void;
 }): JSX.Element {
   return (
-    <TextModal value={string}>
+    <TextModal setValue={setValue} value={string}>
       <span className="truncate">{string}</span>
     </TextModal>
   );

src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx

@@ -8,7 +8,8 @@ import { Badge } from "../../../ui/badge";
 
 export default function TableAutoCellRender({
   value,
-}: CustomCellRendererProps | { value: any }) {
+  setValue,
+}: CustomCellRendererProps) {
   function getCellType() {
     switch (typeof value) {
       case "object":
@@ -49,7 +50,7 @@ export default function TableAutoCellRender({
             </Badge>
           );
         } else {
-          return <StringReader string={value} />;
+          return <StringReader setValue={setValue!} string={value} />;
         }
       case "number":
         return <NumberReader number={value} />;

src/frontend/src/components/tableComponent/index.tsx

@@ -14,13 +14,14 @@ import ForwardedIconComponent from "../genericIconComponent";
 import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
 import TableOptions from "./components/TableOptions";
 import resetGrid from "./utils/reset-grid-columns";
+import { boolean } from "zod";
 
 interface TableComponentProps extends AgGridReactProps {
   columnDefs: NonNullable<AgGridReactProps["columnDefs"]>;
   rowData: NonNullable<AgGridReactProps["rowData"]>;
   alertTitle?: string;
   alertDescription?: string;
-  editable?: boolean | string[];
+  editable?: boolean | string[] | {field: string, onUpdate: (value:any)=>void,editableCell:boolean}[];
   pagination?: boolean;
   onDelete?: () => void;
   onDuplicate?: () => void;
@@ -52,14 +53,24 @@ const TableComponent = forwardRef<
       }
       if (
         (typeof props.editable === "boolean" && props.editable) ||
-        (Array.isArray(props.editable) &&
+        (Array.isArray(props.editable) && props.editable.every(field=>typeof field ==="string") &&
-          props.editable.includes(newCol.headerName ?? ""))
+          (props.editable as Array<string>).includes(newCol.headerName ?? ""))
       ) {
         newCol = {
           ...newCol,
           editable: true,
         };
       }
+      if(Array.isArray(props.editable) && props.editable.every(field=>typeof field ==="object")){
+        const field = (props.editable as Array<{field:string, onUpdate:(value:any)=>void,editableCell:boolean}>).find(field=>field.field===newCol.headerName);
+        if(field){
+          newCol = {
+            ...newCol,
+            editable: field.editableCell,
+            onCellValueChanged: (e)=>field.onUpdate(e)
+          }
+        }
+      }
       return newCol;
     });
     const gridRef = useRef(null);

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

@@ -1,4 +1,4 @@
-import { CellEditRequestEvent, SelectionChangedEvent } from "ag-grid-community";
+import { CellEditRequestEvent, NewValueParams, SelectionChangedEvent } from "ag-grid-community";
 import { useState } from "react";
 import TableComponent from "../../../../components/tableComponent";
 import useRemoveMessages from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages";
@@ -6,6 +6,7 @@ import useUpdateMessage from "../../../../pages/SettingsPage/pages/messagesPage/
 import useAlertStore from "../../../../stores/alertStore";
 import { useMessagesStore } from "../../../../stores/messagesStore";
 import { messagesSorter } from "../../../../utils/utils";
+import cloneDeep from "lodash/cloneDeep";
 
 export default function SessionView({ rows }: { rows: Array<any> }) {
   const columns = useMessagesStore((state) => state.columns);
@@ -23,15 +24,18 @@ export default function SessionView({ rows }: { rows: Array<any> }) {
 
   const { handleUpdate } = useUpdateMessage(setSuccessData, setErrorData);
 
-  function handleUpdateMessage(event: CellEditRequestEvent<any, string>) {
+  function handleUpdateMessage(event: NewValueParams<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,
     };
-    handleUpdate(data);
+    handleUpdate(data).catch((error) => {
+      event.data[field] = event.oldValue;
+      event.api.refreshCells();
+    });
   }
 
   return (
@@ -39,10 +43,7 @@ export default function SessionView({ rows }: { rows: Array<any> }) {
       key={"sessionView"}
       onDelete={handleRemoveMessages}
       readOnlyEdit
-      onCellEditRequest={(event) => {
+      editable={[{field:"text",onUpdate:handleUpdateMessage, editableCell:false}]}
-        handleUpdateMessage(event);
-      }}
-      editable={["Sender Name", "Message", "Text"]}
       overlayNoRowsTemplate="No data available"
       onSelectionChanged={(event: SelectionChangedEvent) => {
         setSelectedRows(event.api.getSelectedRows().map((row) => row.index));

src/frontend/src/modals/textModal/index.tsx

@@ -4,7 +4,7 @@ import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
 import "ace-builds/src-noconflict/theme-twilight";
 // import "ace-builds/webpack-resolver";
-import { cloneDeep } from "lodash";
+import { cloneDeep, set } from "lodash";
 import { useEffect, useState } from "react";
 import JsonView from "react18-json-view";
 import "react18-json-view/src/dark.css";
@@ -22,11 +22,14 @@ import BaseModal from "../baseModal";
 export default function TextModal({
   children,
   value,
+  setValue,
 }: {
   children: JSX.Element;
-  value: Object;
+  value: string;
+  setValue: (value: string) => void;
 }): JSX.Element {
   const [open, setOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState(value);
 
   return (
     <BaseModal size="medium-h-full" open={open} setOpen={setOpen}>
@@ -42,12 +45,18 @@ export default function TextModal({
       <BaseModal.Content>
         <div className="flex h-full w-full flex-col transition-all">
           <div className="h-[370px]">
-            <TextOutputView value={value} left={false} />
+            <TextOutputView onChange={(text)=>setInternalValue(text)} value={internalValue} left={false} />
           </div>
         </div>
       </BaseModal.Content>
       <BaseModal.Footer>
-        <div className="flex w-full justify-end pt-2">
+        <div className="flex w-full justify-end gap-2 pt-2">
+          <Button className="flex gap-2 px-3" onClick={() => {
+            setValue(internalValue);
+            setOpen(false);
+          }}>
+            Save
+          </Button>
           <Button className="flex gap-2 px-3" onClick={() => setOpen(false)}>
             Close
           </Button>

src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx

@@ -20,6 +20,7 @@ const useUpdateMessage = (setSuccessData, setErrorData) => {
       setErrorData({
         title: "Error updating messages.",
       });
+      return Promise.reject(error);
     }
   };
 

src/frontend/src/shared/components/textOutputView/index.tsx

@@ -1,6 +1,6 @@
 import { Textarea } from "../../../components/ui/textarea";
 
-const TextOutputView = ({ left, value }) => {
+const TextOutputView = ({ left, value,onChange }) => {
   if (typeof value === "object" && Object.keys(value).includes("text")) {
     value = value.text;
   }
@@ -10,7 +10,7 @@ const TextOutputView = ({ left, value }) => {
       placeholder={"Empty"}
       // update to real value on flowPool
       value={value}
-      readOnly
+      onChange={(e) => onChange(e.target.value)}
     />
   );
 };