🐛 fix(buildTrigger): rename import of TabsState to FlowsState to improve semantics

🐛 fix(EditNodeModal): rename import of TabsState to FlowsState to improve semantics
🐛 fix(formModal): rename import of TabsState to FlowsState to improve semantics
🐛 fix(PageComponent): rename import of TabsState to FlowsState to improve semantics
🐛 fix(reactflowUtils): rename import of TabsState to FlowsState to improve semantics
🐛 fix(utils): rename import of TabsState to FlowsState to improve semantics
🚚 chore(server.ts): change port variable case from lowercase port to uppercase PORT to improve semantics
✨ feat(server.ts): add support for process.env.PORT environment variable to be able to run app on a configurable port

src/frontend/src/components/chatComponent/buildTrigger/index.tsx

@@ -9,7 +9,7 @@ import { FlowType } from "../../../types/flow";
 
 import { FlowsContext } from "../../../contexts/flowsContext";
 import { parsedDataType } from "../../../types/components";
-import { TabsState } from "../../../types/tabs";
+import { FlowsState } from "../../../types/tabs";
 import { validateNodes } from "../../../utils/reactflowUtils";
 import RadialProgressComponent from "../../RadialProgress";
 import IconComponent from "../../genericIconComponent";
@@ -99,7 +99,7 @@ export default function BuildTrigger({
           setSuccessData({ title: parsedData.log });
         } else if (parsedData.input_keys !== undefined) {
           //@ts-ignore
-          setTabsState((old: TabsState) => {
+          setTabsState((old: FlowsState) => {
             return {
               ...old,
               [flowId]: {

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -36,7 +36,7 @@ import { limitScrollFieldsModal } from "../../constants/constants";
 import { FlowsContext } from "../../contexts/flowsContext";
 import { typesContext } from "../../contexts/typesContext";
 import { NodeDataType } from "../../types/flow";
-import { TabsState } from "../../types/tabs";
+import { FlowsState } from "../../types/tabs";
 import {
   convertObjToArray,
   convertValuesToNumbers,
@@ -542,7 +542,7 @@ const EditNodeModal = forwardRef(
               const newData = cloneDeep(myData.current);
               myData.current = newData;
               //@ts-ignore
-              setTabsState((prev: TabsState) => {
+              setTabsState((prev: FlowsState) => {
                 return {
                   ...prev,
                   [tabId]: {

src/frontend/src/modals/formModal/index.tsx

@@ -26,7 +26,7 @@ import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
 import { FlowsContext } from "../../contexts/flowsContext";
 import { getBuildStatus } from "../../controllers/API";
-import { TabsState } from "../../types/tabs";
+import { FlowsState } from "../../types/tabs";
 import { validateNodes } from "../../utils/reactflowUtils";
 
 export default function FormModal({
@@ -401,7 +401,7 @@ export default function FormModal({
         chatKey: chatKey!,
       });
       //@ts-ignore
-      setTabsState((old: TabsState) => {
+      setTabsState((old: FlowsState) => {
         if (!chatKey) return old;
         let newTabsState = _.cloneDeep(old);
         newTabsState[id.current].formKeysData.input_keys![chatKey] = "";
@@ -522,7 +522,7 @@ export default function FormModal({
                             }
                             onChange={(e) => {
                               //@ts-ignore
-                              setTabsState((old: TabsState) => {
+                              setTabsState((old: FlowsState) => {
                                 let newTabsState = _.cloneDeep(old);
                                 newTabsState[
                                   id.current
@@ -634,7 +634,7 @@ export default function FormModal({
                       setChatValue={(value) => {
                         setChatValue(value);
                         //@ts-ignore
-                        setTabsState((old: TabsState) => {
+                        setTabsState((old: FlowsState) => {
                           let newTabsState = _.cloneDeep(old);
                           newTabsState[id.current].formKeysData.input_keys![
                             chatKey!

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

@@ -34,7 +34,7 @@ import { typesContext } from "../../../../contexts/typesContext";
 import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import { APIClassType } from "../../../../types/api";
 import { FlowType, NodeType, targetHandleType } from "../../../../types/flow";
-import { TabsState } from "../../../../types/tabs";
+import { FlowsState } from "../../../../types/tabs";
 import {
   generateFlow,
   generateNodeFromFlow,
@@ -208,7 +208,7 @@ export default function Page({
         return newX;
       });
       //@ts-ignore
-      setTabsState((prev: TabsState) => {
+      setTabsState((prev: FlowsState) => {
         return {
           ...prev,
           [tabId]: {
@@ -225,7 +225,7 @@ export default function Page({
     (change: NodeChange[]) => {
       onNodesChange(change);
       //@ts-ignore
-      setTabsState((prev: TabsState) => {
+      setTabsState((prev: FlowsState) => {
         return {
           ...prev,
           [tabId]: {

src/frontend/src/utils/reactflowUtils.ts

@@ -25,7 +25,7 @@ import {
   unselectAllNodesType,
   updateEdgesHandleIdsType,
 } from "../types/utils/reactflowUtils";
-import { getFieldTitle } from "./utils";
+import { getFieldTitle, toTitleCase } from "./utils";
 
 export function cleanEdges({
   flow: { edges, nodes },
@@ -506,7 +506,7 @@ export function generateFlow(
   name: string
 ): generateFlowType {
   const newFlowData = reactFlowInstance.toObject();
-
+  const uid = new ShortUniqueId({ length: 5 });
   /*	remove edges that are not connected to selected nodes on both ends
 		in future we can save this edges to when ungrouping reconect to the old nodes
 	*/
@@ -869,7 +869,7 @@ export function ungroupNode(
     let { field, id } = template[key].proxy!;
     let nodeIndex = gNodes.findIndex((n) => n.id === id);
     if (nodeIndex !== -1) {
-      let display_name: string;
+      let display_name: string | undefined;
       let show = gNodes[nodeIndex].data.node!.template[field].show;
       let advanced = gNodes[nodeIndex].data.node!.template[field].advanced;
       if (gNodes[nodeIndex].data.node!.template[field].display_name) {
@@ -959,7 +959,7 @@ export function expandGroupNode(
     let nodeIndex = gNodes.findIndex((n) => n.id === id);
     if (nodeIndex !== -1) {
       let proxy: { id: string; field: string } | undefined;
-      let display_name: string;
+      let display_name: string | undefined;
       let show = gNodes[nodeIndex].data.node!.template[field].show;
       let advanced = gNodes[nodeIndex].data.node!.template[field].advanced;
       if (gNodes[nodeIndex].data.node!.template[field].display_name) {

src/frontend/src/utils/utils.ts

@@ -12,7 +12,7 @@ import {
   tweakType,
 } from "../types/components";
 import { FlowType, NodeType } from "../types/flow";
-import { TabsState } from "../types/tabs";
+import { FlowsState } from "../types/tabs";
 import { buildTweaks } from "./reactflowUtils";
 
 export function classNames(...classes: Array<string>): string {
@@ -57,7 +57,8 @@ export function normalCaseToSnakeCase(str: string): string {
     .join("_");
 }
 
-export function toTitleCase(str: string): string {
+export function toTitleCase(str: string | undefined): string {
+  if (!str) return "";
   let result = str
     .split("_")
     .map((word, index) => {
@@ -199,7 +200,7 @@ export function groupByFamily(
       }));
 }
 
-export function buildInputs(tabsState: TabsState, id: string): string {
+export function buildInputs(tabsState: FlowsState, id: string): string {
   return tabsState &&
     tabsState[id] &&
     tabsState[id].formKeysData &&
@@ -277,10 +278,10 @@ export function buildTweakObject(tweak: tweakType) {
 /**
  * Function to get Chat Input Field
  * @param {FlowType} flow - The current flow.
- * @param {TabsState} tabsState - The current tabs state.
+ * @param {FlowsState} tabsState - The current tabs state.
  * @returns {string} - The chat input field
  */
-export function getChatInputField(flow: FlowType, tabsState?: TabsState) {
+export function getChatInputField(flow: FlowType, tabsState?: FlowsState) {
   let chat_input_field = "text";
 
   if (
@@ -305,7 +306,7 @@ export function getPythonApiCode(
   flow: FlowType,
   isAuth: boolean,
   tweak?: any[],
-  tabsState?: TabsState
+  tabsState?: FlowsState
 ): string {
   const flowId = flow.id;
 
@@ -369,7 +370,7 @@ export function getCurlCode(
   flow: FlowType,
   isAuth: boolean,
   tweak?: any[],
-  tabsState?: TabsState
+  tabsState?: FlowsState
 ): string {
   const flowId = flow.id;
   const tweaks = buildTweaks(flow);
@@ -397,7 +398,7 @@ export function getCurlCode(
 export function getPythonCode(
   flow: FlowType,
   tweak?: any[],
-  tabsState?: TabsState
+  tabsState?: FlowsState
 ): string {
   const flowName = flow.name;
   const tweaks = buildTweaks(flow);
@@ -422,7 +423,7 @@ flow(inputs)`;
 export function getWidgetCode(
   flow: FlowType,
   isAuth: boolean,
-  tabsState?: TabsState
+  tabsState?: FlowsState
 ): string {
   const flowId = flow.id;
   const flowName = flow.name;