Merge pull request #398 from Hexastack/fix/truncate-long-messages

fix: truncate long messages in visual editor

frontend/src/components/visual-editor/v2/CustomDiagramNodes/NodeWidget.tsx

@@ -30,6 +30,7 @@ import SimpleTextIcon from "@/app-components/svg/toolbar/SimpleTextIcon";
 import TriggerIcon from "@/app-components/svg/TriggerIcon";
 import { IBlockFull, Pattern } from "@/types/block.types";
 import { BlockPorts, BlockTypes, TBlock } from "@/types/visual-editor.types";
+import { truncate } from "@/utils/text";
 
 import { NodeModel } from "./NodeModel";
 
@@ -360,7 +361,7 @@ class NodeWidget extends React.Component<
                 color={this.config.color}
                 size="21px"
               />
-              {this.props.node.message[0]}
+              {truncate(this.props.node.message[0])}
             </div>
           ) : null}
           {[BlockTypes.quickReplies, BlockTypes.buttons].includes(
@@ -375,7 +376,7 @@ class NodeWidget extends React.Component<
               {
                 //TODO: need to be updated
                 // @ts-ignore
-                this.props.node.message.text
+                truncate(this.props.node.message.text)
               }
             </div>
           ) : null}

frontend/src/utils/text.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+export const truncate = (text: string, length = 300) => {
+  return text.length > length ? text.substring(0, length) + "..." : text;
+};