feat: add mutual exclusivity between ChatInput and Webhook components

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/__tests__/disable-item.test.ts

@@ -0,0 +1,100 @@
+import { disableItem } from "../disable-item";
+import type { UniqueInputsComponents } from "../../types";
+
+describe("disableItem", () => {
+  describe("ChatInput component", () => {
+    it("should disable ChatInput when ChatInput already exists", () => {
+      const uniqueInputs: UniqueInputsComponents = {
+        chatInput: true,
+        webhookInput: false,
+      };
+
+      expect(disableItem("ChatInput", uniqueInputs)).toBe(true);
+    });
+
+    it("should disable ChatInput when Webhook exists (mutual exclusivity)", () => {
+      const uniqueInputs: UniqueInputsComponents = {
+        chatInput: false,
+        webhookInput: true,
+      };
+
+      expect(disableItem("ChatInput", uniqueInputs)).toBe(true);
+    });
+
+    it("should not disable ChatInput when neither exists", () => {
+      const uniqueInputs: UniqueInputsComponents = {
+        chatInput: false,
+        webhookInput: false,
+      };
+
+      expect(disableItem("ChatInput", uniqueInputs)).toBe(false);
+    });
+
+    it("should disable ChatInput when both exist (edge case)", () => {
+      const uniqueInputs: UniqueInputsComponents = {
+        chatInput: true,
+        webhookInput: true,
+      };
+
+      expect(disableItem("ChatInput", uniqueInputs)).toBe(true);
+    });
+  });
+
+  describe("Webhook component", () => {
+    it("should disable Webhook when Webhook already exists", () => {
+      const uniqueInputs: UniqueInputsComponents = {
+        chatInput: false,
+        webhookInput: true,
+      };
+
+      expect(disableItem("Webhook", uniqueInputs)).toBe(true);
+    });
+
+    it("should disable Webhook when ChatInput exists (mutual exclusivity)", () => {
+      const uniqueInputs: UniqueInputsComponents = {
+        chatInput: true,
+        webhookInput: false,
+      };
+
+      expect(disableItem("Webhook", uniqueInputs)).toBe(true);
+    });
+
+    it("should not disable Webhook when neither exists", () => {
+      const uniqueInputs: UniqueInputsComponents = {
+        chatInput: false,
+        webhookInput: false,
+      };
+
+      expect(disableItem("Webhook", uniqueInputs)).toBe(false);
+    });
+  });
+
+  describe("Other components", () => {
+    it("should not disable other components when both ChatInput and Webhook exist", () => {
+      const uniqueInputs: UniqueInputsComponents = {
+        chatInput: true,
+        webhookInput: true,
+      };
+
+      expect(disableItem("SomeOtherComponent", uniqueInputs)).toBe(false);
+    });
+
+    it("should not disable other components when only ChatInput exists", () => {
+      const uniqueInputs: UniqueInputsComponents = {
+        chatInput: true,
+        webhookInput: false,
+      };
+
+      expect(disableItem("TextInput", uniqueInputs)).toBe(false);
+    });
+
+    it("should not disable other components when only Webhook exists", () => {
+      const uniqueInputs: UniqueInputsComponents = {
+        chatInput: false,
+        webhookInput: true,
+      };
+
+      expect(disableItem("TextInput", uniqueInputs)).toBe(false);
+    });
+  });
+});

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/__tests__/get-disabled-tooltip.test.ts

@@ -0,0 +1,81 @@
+import { getDisabledTooltip } from "../get-disabled-tooltip";
+import type { UniqueInputsComponents } from "../../types";
+
+describe("getDisabledTooltip", () => {
+  describe("ChatInput component", () => {
+    it("should return tooltip when ChatInput already exists", () => {
+      const uniqueInputs: UniqueInputsComponents = {
+        chatInput: true,
+        webhookInput: false,
+      };
+
+      expect(getDisabledTooltip("ChatInput", uniqueInputs)).toBe(
+        "Chat input already added",
+      );
+    });
+
+    it("should return tooltip when trying to add ChatInput while Webhook exists", () => {
+      const uniqueInputs: UniqueInputsComponents = {
+        chatInput: false,
+        webhookInput: true,
+      };
+
+      expect(getDisabledTooltip("ChatInput", uniqueInputs)).toBe(
+        "Cannot add Chat Input when Webhook is present",
+      );
+    });
+
+    it("should return empty string when ChatInput can be added", () => {
+      const uniqueInputs: UniqueInputsComponents = {
+        chatInput: false,
+        webhookInput: false,
+      };
+
+      expect(getDisabledTooltip("ChatInput", uniqueInputs)).toBe("");
+    });
+  });
+
+  describe("Webhook component", () => {
+    it("should return tooltip when Webhook already exists", () => {
+      const uniqueInputs: UniqueInputsComponents = {
+        chatInput: false,
+        webhookInput: true,
+      };
+
+      expect(getDisabledTooltip("Webhook", uniqueInputs)).toBe(
+        "Webhook already added",
+      );
+    });
+
+    it("should return tooltip when trying to add Webhook while ChatInput exists", () => {
+      const uniqueInputs: UniqueInputsComponents = {
+        chatInput: true,
+        webhookInput: false,
+      };
+
+      expect(getDisabledTooltip("Webhook", uniqueInputs)).toBe(
+        "Cannot add Webhook when Chat Input is present",
+      );
+    });
+
+    it("should return empty string when Webhook can be added", () => {
+      const uniqueInputs: UniqueInputsComponents = {
+        chatInput: false,
+        webhookInput: false,
+      };
+
+      expect(getDisabledTooltip("Webhook", uniqueInputs)).toBe("");
+    });
+  });
+
+  describe("Other components", () => {
+    it("should return empty string for other components", () => {
+      const uniqueInputs: UniqueInputsComponents = {
+        chatInput: true,
+        webhookInput: true,
+      };
+
+      expect(getDisabledTooltip("SomeOtherComponent", uniqueInputs)).toBe("");
+    });
+  });
+});

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/constants.ts

@@ -0,0 +1,19 @@
+// Component name constants
+export const CHAT_INPUT_COMPONENT = "ChatInput";
+export const WEBHOOK_COMPONENT = "Webhook";
+
+// Exclusivity rules: components that cannot coexist
+export const EXCLUSIVITY_RULES = {
+  [CHAT_INPUT_COMPONENT]: [WEBHOOK_COMPONENT],
+  [WEBHOOK_COMPONENT]: [CHAT_INPUT_COMPONENT],
+} as const;
+
+// Tooltip messages
+export const TOOLTIP_MESSAGES = {
+  CHAT_INPUT_ALREADY_ADDED: "Chat input already added",
+  WEBHOOK_ALREADY_ADDED: "Webhook already added",
+  CANNOT_ADD_CHAT_INPUT_WITH_WEBHOOK:
+    "Cannot add Chat Input when Webhook is present",
+  CANNOT_ADD_WEBHOOK_WITH_CHAT_INPUT:
+    "Cannot add Webhook when Chat Input is present",
+} as const;

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/disable-item.ts

@@ -1,14 +1,40 @@
 import type { UniqueInputsComponents } from "../types";
+import {
+  CHAT_INPUT_COMPONENT,
+  EXCLUSIVITY_RULES,
+  WEBHOOK_COMPONENT,
+} from "./constants";
 
 export const disableItem = (
   SBItemName: string,
   uniqueInputsComponents: UniqueInputsComponents,
 ) => {
-  if (SBItemName === "ChatInput" && uniqueInputsComponents.chatInput) {
+  // Check if component already exists
+  if (SBItemName === CHAT_INPUT_COMPONENT && uniqueInputsComponents.chatInput) {
     return true;
   }
-  if (SBItemName === "Webhook" && uniqueInputsComponents.webhookInput) {
+  if (SBItemName === WEBHOOK_COMPONENT && uniqueInputsComponents.webhookInput) {
     return true;
   }
+
+  // Check exclusivity rules
+  const exclusiveComponents = EXCLUSIVITY_RULES[SBItemName];
+  if (exclusiveComponents) {
+    for (const exclusiveComponent of exclusiveComponents) {
+      if (
+        exclusiveComponent === CHAT_INPUT_COMPONENT &&
+        uniqueInputsComponents.chatInput
+      ) {
+        return true;
+      }
+      if (
+        exclusiveComponent === WEBHOOK_COMPONENT &&
+        uniqueInputsComponents.webhookInput
+      ) {
+        return true;
+      }
+    }
+  }
+
   return false;
 };

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/get-disabled-tooltip.ts

@@ -1,14 +1,28 @@
 import type { UniqueInputsComponents } from "../types";
+import {
+  CHAT_INPUT_COMPONENT,
+  TOOLTIP_MESSAGES,
+  WEBHOOK_COMPONENT,
+} from "./constants";
 
 export const getDisabledTooltip = (
   SBItemName: string,
   uniqueInputsComponents: UniqueInputsComponents,
 ) => {
-  if (SBItemName === "ChatInput" && uniqueInputsComponents.chatInput) {
-    return "Chat input already added";
+  if (SBItemName === CHAT_INPUT_COMPONENT && uniqueInputsComponents.chatInput) {
+    return TOOLTIP_MESSAGES.CHAT_INPUT_ALREADY_ADDED;
   }
-  if (SBItemName === "Webhook" && uniqueInputsComponents.webhookInput) {
-    return "Webhook already added";
+  if (
+    SBItemName === CHAT_INPUT_COMPONENT &&
+    uniqueInputsComponents.webhookInput
+  ) {
+    return TOOLTIP_MESSAGES.CANNOT_ADD_CHAT_INPUT_WITH_WEBHOOK;
+  }
+  if (SBItemName === WEBHOOK_COMPONENT && uniqueInputsComponents.webhookInput) {
+    return TOOLTIP_MESSAGES.WEBHOOK_ALREADY_ADDED;
+  }
+  if (SBItemName === WEBHOOK_COMPONENT && uniqueInputsComponents.chatInput) {
+    return TOOLTIP_MESSAGES.CANNOT_ADD_WEBHOOK_WITH_CHAT_INPUT;
   }
   return "";
 };