From 22c69fef40580dd05d8dd1bdcb3eb18a3b72cf9e Mon Sep 17 00:00:00 2001
From: 1AhmedYasser <26207361+1AhmedYasser@users.noreply.github.com>
Date: Tue, 19 May 2026 14:08:06 +0300
Subject: [PATCH 01/18] chore(982): Added mcq branch manual connection support

---
 .../components/Flow/McqBranchSelectModal.tsx  |  29 ++++
 .../components/Flow/NodeTypes/CustomNode.tsx  |  32 ++++-
 .../components/FlowBuilder/FlowBuilder.tsx    |  48 +++----
 .../components/FlowElementsPopup/index.tsx    |   4 +-
 GUI/src/hooks/flow/useEdgeAdd.ts              |   9 ++
 GUI/src/hooks/flow/useMcqConnect.ts           | 121 ++++++++++++++++
 GUI/src/i18n/en/common.json                   |   4 +
 GUI/src/i18n/et/common.json                   |   4 +
 GUI/src/store/new-services.store.ts           |   1 +
 GUI/src/utils/mcq-flow-utils.test.ts          |  47 ++++++
 GUI/src/utils/mcq-flow-utils.ts               | 134 ++++++++++++++++++
 11 files changed, 398 insertions(+), 35 deletions(-)
 create mode 100644 GUI/src/components/Flow/McqBranchSelectModal.tsx
 create mode 100644 GUI/src/hooks/flow/useMcqConnect.ts
 create mode 100644 GUI/src/utils/mcq-flow-utils.test.ts
 create mode 100644 GUI/src/utils/mcq-flow-utils.ts

diff --git a/GUI/src/components/Flow/McqBranchSelectModal.tsx b/GUI/src/components/Flow/McqBranchSelectModal.tsx
new file mode 100644
index 000000000..aa0b95b2b
--- /dev/null
+++ b/GUI/src/components/Flow/McqBranchSelectModal.tsx
@@ -0,0 +1,29 @@
+import { Button, Modal, Track } from 'components';
+import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { McqEmptyBranch } from 'utils/mcq-flow-utils';
+
+type McqBranchSelectModalProps = {
+  emptyBranches: McqEmptyBranch[];
+  onSelect: (branch: McqEmptyBranch) => void;
+  onClose: () => void;
+};
+
+const McqBranchSelectModal: FC<McqBranchSelectModalProps> = ({ emptyBranches, onSelect, onClose }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Modal title={t('serviceFlow.mcq.selectBranchTitle')} onClose={onClose}>
+      <p>{t('serviceFlow.mcq.emptyBranchesMessage', { count: emptyBranches.length })}</p>
+      <Track direction="vertical" gap={8} style={{ marginTop: 16 }}>
+        {emptyBranches.map((branch) => (
+          <Button key={branch.edgeId} onClick={() => onSelect(branch)}>
+            {branch.label}
+          </Button>
+        ))}
+      </Track>
+    </Modal>
+  );
+};
+
+export default McqBranchSelectModal;
diff --git a/GUI/src/components/Flow/NodeTypes/CustomNode.tsx b/GUI/src/components/Flow/NodeTypes/CustomNode.tsx
index d75ffb5f0..47b3198dc 100644
--- a/GUI/src/components/Flow/NodeTypes/CustomNode.tsx
+++ b/GUI/src/components/Flow/NodeTypes/CustomNode.tsx
@@ -1,12 +1,14 @@
-import { Handle, NodeProps, Position, useUpdateNodeInternals } from '@xyflow/react';
+import { Handle, NodeProps, Position, useStore, useUpdateNodeInternals } from '@xyflow/react';
 import './Node.scss';
 import Button from 'components/Button';
 import Icon from 'components/Icon';
 import Track from 'components/Track';
-import React, { FC, useEffect } from 'react';
+import React, { FC, useEffect, useMemo } from 'react';
 import { MdDeleteOutline, MdOutlineEdit, MdOutlineRemoveRedEye } from 'react-icons/md';
 import useServiceStore from 'store/services.store';
+import { StepType } from 'types';
 import { NodeDataProps } from 'types/service-flow';
+import { MCQ_SOURCE_HANDLE_ID, mcqHasEmptyBranches } from 'utils/mcq-flow-utils';
 
 import StepNode from './StepNode';
 
@@ -17,13 +19,21 @@ type CustomNodeProps = {
 const CustomNode: FC<NodeProps & CustomNodeProps> = (props) => {
   const { data, isConnectable, id } = props;
   const orientation = useServiceStore((state) => state.orientation);
-  const shouldOffsetHandles = data.childrenCount > 1;
+  const isMcq = data.stepType === StepType.MultiChoiceQuestion;
+  const shouldOffsetHandles = !isMcq && data.childrenCount > 1;
+
+  const edges = useStore((state) => state.edges);
+  const nodes = useStore((state) => state.nodes);
+
+  const mcqCanConnect = useMemo(() => !isMcq || mcqHasEmptyBranches(id, nodes, edges), [edges, id, isMcq, nodes]);
+
+  const canConnect = isConnectable && mcqCanConnect;
 
   const updateNodeInternals = useUpdateNodeInternals();
 
   useEffect(() => {
     updateNodeInternals(id);
-  }, [data.childrenCount, id, updateNodeInternals, orientation]);
+  }, [data.childrenCount, id, isMcq, mcqCanConnect, updateNodeInternals, orientation]);
 
   const isFinishingStep = () => {
     return data.type === 'finishing-step';
@@ -38,6 +48,18 @@ const CustomNode: FC<NodeProps & CustomNodeProps> = (props) => {
   };
 
   const bottomHandles = (): React.JSX.Element => {
+    if (isMcq) {
+      return (
+        <Handle
+          id={MCQ_SOURCE_HANDLE_ID}
+          type="source"
+          position={getSourcePosition()}
+          isConnectable={canConnect}
+          hidden={isFinishingStep()}
+        />
+      );
+    }
+
     return (
       <>
         {new Array(data.childrenCount).fill(0).map((_, i) => (
@@ -64,7 +86,7 @@ const CustomNode: FC<NodeProps & CustomNodeProps> = (props) => {
 
   return (
     <>
-      <Handle type="target" position={getTargetPosition()} isConnectable={isConnectable} />
+      <Handle type="target" position={getTargetPosition()} isConnectable={canConnect} />
       <StepNode data={data} />
       {data.stepType !== 'rule' && (
         <Track style={{ position: 'fixed', top: 8, right: 8 }}>
diff --git a/GUI/src/components/FlowBuilder/FlowBuilder.tsx b/GUI/src/components/FlowBuilder/FlowBuilder.tsx
index a922006b3..7ff089974 100644
--- a/GUI/src/components/FlowBuilder/FlowBuilder.tsx
+++ b/GUI/src/components/FlowBuilder/FlowBuilder.tsx
@@ -7,8 +7,10 @@ import LassoSelectionControls from 'components/Flow/Controls/LassoSelectionContr
 import UndoRedoControls from 'components/Flow/Controls/UndoRedoControls';
 import edgeTypes from 'components/Flow/EdgeTypes';
 import { Lasso } from 'components/Flow/LassoSelection/Lasso';
+import McqBranchSelectModal from 'components/Flow/McqBranchSelectModal';
 import nodeTypes from 'components/Flow/NodeTypes';
 import useLayout from 'hooks/flow/useLayout';
+import useMcqConnect from 'hooks/flow/useMcqConnect';
 import { useOnNodesDelete } from 'hooks/flow/useOnNodeDelete';
 import { ChangeEventHandler, FC, useCallback, useEffect, useState } from 'react';
 import '@xyflow/react/dist/style.css';
@@ -17,6 +19,7 @@ import { MdCenterFocusStrong, MdOutlineCenterFocusStrong } from 'react-icons/md'
 import useNewServiceStore from 'store/new-services.store';
 import useServiceStore from 'store/services.store';
 import { StepType } from 'types';
+import { applySimpleConnection } from 'utils/mcq-flow-utils';
 import '../Flow/LassoSelection/Lasso.css';
 import './FlowBuilder.scss';
 
@@ -59,42 +62,26 @@ const FlowBuilder: FC<FlowBuilderProps> = ({ nodes, edges }) => {
   const { fitView } = useReactFlow();
 
   const { runLayout } = useLayout();
+  const { pendingConnection, handleConnect, isValidConnection, confirmBranch, cancelBranchSelection } = useMcqConnect();
 
   const onConnect = useCallback(
-    ({ source, target }: any) => {
+    (connection: { source?: string | null; target?: string | null; sourceHandle?: string | null }) => {
+      if (handleConnect(connection)) return;
+
       const nodes = getNodes();
       const edges = getEdges();
-
-      const parentOutgoingEdges = edges.filter((edge) => edge.source === source);
-
-      const ghostEdges = parentOutgoingEdges.filter((edge) => {
-        const targetNode = nodes.find((n) => n.id === edge.target);
-        return targetNode?.type === 'ghost';
+      const { nodes: finalNodes, edges: finalEdges } = applySimpleConnection({
+        nodes,
+        edges,
+        connection,
       });
 
-      let finalNodes = nodes;
-      let finalEdges = edges;
-
-      if (ghostEdges.length > 0) {
-        const ghostNodeIds = new Set(ghostEdges.map((edge) => edge.target));
-        finalEdges = edges.filter((edge) => !ghostEdges.includes(edge));
-        finalNodes = nodes.filter((node) => !ghostNodeIds.has(node.id));
-      }
-
-      const newEdge = {
-        id: `${source}->${target}`,
-        source: source,
-        target: target,
-        type: 'step',
-      };
-      finalEdges = [...finalEdges, newEdge];
-
       setNodes(finalNodes);
       setEdges(finalEdges);
       setHasUnsavedChanges(true);
       saveToHistory({ nodes: finalNodes, edges: finalEdges });
     },
-    [getEdges, getNodes, setEdges, setHasUnsavedChanges, setNodes, saveToHistory],
+    [getEdges, getNodes, handleConnect, setEdges, setHasUnsavedChanges, setNodes, saveToHistory],
   );
 
   const zIndexStyle = { zIndex: 20 };
@@ -103,10 +90,6 @@ const FlowBuilder: FC<FlowBuilderProps> = ({ nodes, edges }) => {
     setColorMode(evt.target.value as ColorMode);
   };
 
-  const isValidConnection = useCallback((connection: any) => {
-    return connection.source !== connection.target;
-  }, []);
-
   const onSelectionChange = useCallback(
     ({ nodes: selectedNodes }: { nodes: Node[] }) => {
       setFlowSelectedNodes(selectedNodes);
@@ -262,6 +245,13 @@ const FlowBuilder: FC<FlowBuilderProps> = ({ nodes, edges }) => {
           </Track>
         </Modal>
       )}
+      {pendingConnection && (
+        <McqBranchSelectModal
+          emptyBranches={pendingConnection.emptyBranches}
+          onSelect={confirmBranch}
+          onClose={cancelBranchSelection}
+        />
+      )}
     </>
   );
 };
diff --git a/GUI/src/components/FlowElementsPopup/index.tsx b/GUI/src/components/FlowElementsPopup/index.tsx
index b9e75d600..fba3bdc91 100644
--- a/GUI/src/components/FlowElementsPopup/index.tsx
+++ b/GUI/src/components/FlowElementsPopup/index.tsx
@@ -11,7 +11,6 @@ import { DynamicChoices } from 'types/dynamic-choices';
 import { EndpointData } from 'types/endpoint';
 import { MultiChoiceQuestionButton } from 'types/multi-choice-question';
 import { NodeDataProps } from 'types/service-flow';
-import { generateUniqueId } from 'utils/flow-utils';
 import { getValueByPath } from 'utils/object-util';
 import {
   getLastDigits,
@@ -207,6 +206,7 @@ const FlowElementsPopup: React.FC = () => {
         dynamicChoices: node.data.stepType === StepType.DynamicChoices ? dynamicChoices : undefined,
         endpoint: nodeEndpoint ?? node.data?.endpoint,
         testingPassed: undefined,
+        childrenCount: node.data.stepType === StepType.MultiChoiceQuestion ? 1 : node.data.childrenCount,
       },
     };
 
@@ -395,6 +395,8 @@ const FlowElementsPopup: React.FC = () => {
       draggable: false,
     }));
 
+    updatedNode.data.childrenCount = 1;
+
     let finalNodes = [...nodes.filter((n) => n.id !== updatedNode.id), updatedNode, ...newGhostNodes];
     let finalEdges = [...filteredEdges, ...newEdges];
 
diff --git a/GUI/src/hooks/flow/useEdgeAdd.ts b/GUI/src/hooks/flow/useEdgeAdd.ts
index 099597533..bb5c6794b 100644
--- a/GUI/src/hooks/flow/useEdgeAdd.ts
+++ b/GUI/src/hooks/flow/useEdgeAdd.ts
@@ -18,6 +18,14 @@ function useEdgeAdd(id: string) {
 
     const newNodeId = generateUniqueId();
 
+    const defaultMcqButtons = [
+      { id: '1', title: 'Jah', payload: '' },
+      { id: '2', title: 'Ei', payload: '' },
+    ];
+
+    const multiChoiceQuestion =
+      stepType === StepType.MultiChoiceQuestion ? { question: '', buttons: defaultMcqButtons } : undefined;
+
     const insertNode = {
       id: newNodeId,
       position: { x: targetNode.position.x, y: targetNode.position.y },
@@ -31,6 +39,7 @@ function useEdgeAdd(id: string) {
         stepType: stepType,
         readonly: [StepType.Auth, StepType.FinishingStepEnd, StepType.FinishingStepRedirect].includes(stepType),
         endpoint: step.data,
+        multiChoiceQuestion,
         setClickedNode: useServiceStore.getState().setClickedNode,
       },
       className: (() => {
diff --git a/GUI/src/hooks/flow/useMcqConnect.ts b/GUI/src/hooks/flow/useMcqConnect.ts
new file mode 100644
index 000000000..b69fbd365
--- /dev/null
+++ b/GUI/src/hooks/flow/useMcqConnect.ts
@@ -0,0 +1,121 @@
+import { Connection, useReactFlow } from '@xyflow/react';
+import { useCallback, useState } from 'react';
+import useServiceStore from 'store/new-services.store';
+import {
+  applyMcqBranchConnection,
+  applySimpleConnection,
+  getEmptyMcqBranches,
+  getMcqNodeIdFromConnection,
+  McqEmptyBranch,
+} from 'utils/mcq-flow-utils';
+
+export type PendingMcqConnection = {
+  connection: Connection;
+  emptyBranches: McqEmptyBranch[];
+};
+
+function useMcqConnect() {
+  const { getNodes, getEdges, setNodes, setEdges, getNode } = useReactFlow();
+  const saveToHistory = useServiceStore((state) => state.saveToHistory);
+  const setHasUnsavedChanges = useServiceStore((state) => state.setHasUnsavedChanges);
+  const [pendingConnection, setPendingConnection] = useState<PendingMcqConnection | null>(null);
+
+  const commitConnection = useCallback(
+    (nodes: ReturnType<typeof getNodes>, edges: ReturnType<typeof getEdges>) => {
+      setNodes(nodes);
+      setEdges(edges);
+      setHasUnsavedChanges(true);
+      saveToHistory({ nodes, edges });
+    },
+    [saveToHistory, setEdges, setHasUnsavedChanges, setNodes],
+  );
+
+  const applyMcqOutgoingConnection = useCallback(
+    (connection: Connection, branch: McqEmptyBranch) => {
+      const { source, target } = connection;
+      if (!source || !target) return;
+
+      const nodes = getNodes();
+      const edges = getEdges();
+      const result = applyMcqBranchConnection({
+        nodes,
+        edges,
+        mcqId: source,
+        targetId: target,
+        branch,
+      });
+      commitConnection(result.nodes, result.edges);
+    },
+    [commitConnection, getEdges, getNodes],
+  );
+
+  const applyMcqIncomingConnection = useCallback(
+    (connection: Connection) => {
+      const nodes = getNodes();
+      const edges = getEdges();
+      const result = applySimpleConnection({ nodes, edges, connection });
+      commitConnection(result.nodes, result.edges);
+    },
+    [commitConnection, getEdges, getNodes],
+  );
+
+  const handleConnect = useCallback(
+    (connection: Connection) => {
+      const mcqId = getMcqNodeIdFromConnection(connection, getNode);
+      if (!mcqId) return false;
+
+      const nodes = getNodes();
+      const edges = getEdges();
+      const emptyBranches = getEmptyMcqBranches(mcqId, nodes, edges);
+      if (emptyBranches.length === 0) return true;
+
+      if (connection.source === mcqId) {
+        if (emptyBranches.length === 1) {
+          applyMcqOutgoingConnection(connection, emptyBranches[0]);
+        } else {
+          setPendingConnection({ connection, emptyBranches });
+        }
+        return true;
+      }
+
+      applyMcqIncomingConnection(connection);
+      return true;
+    },
+    [applyMcqIncomingConnection, applyMcqOutgoingConnection, getEdges, getNode, getNodes],
+  );
+
+  const confirmBranch = useCallback(
+    (branch: McqEmptyBranch) => {
+      if (!pendingConnection) return;
+      applyMcqOutgoingConnection(pendingConnection.connection, branch);
+      setPendingConnection(null);
+    },
+    [applyMcqOutgoingConnection, pendingConnection],
+  );
+
+  const cancelBranchSelection = useCallback(() => {
+    setPendingConnection(null);
+  }, []);
+
+  const isValidConnection = useCallback(
+    (connection: Connection) => {
+      if (connection.source === connection.target) return false;
+
+      const mcqId = getMcqNodeIdFromConnection(connection, getNode);
+      if (!mcqId) return true;
+
+      return getEmptyMcqBranches(mcqId, getNodes(), getEdges()).length > 0;
+    },
+    [getEdges, getNode, getNodes],
+  );
+
+  return {
+    pendingConnection,
+    handleConnect,
+    isValidConnection,
+    confirmBranch,
+    cancelBranchSelection,
+  };
+}
+
+export default useMcqConnect;
diff --git a/GUI/src/i18n/en/common.json b/GUI/src/i18n/en/common.json
index 0a1441603..5861ff264 100644
--- a/GUI/src/i18n/en/common.json
+++ b/GUI/src/i18n/en/common.json
@@ -406,6 +406,10 @@
       "openObjectEditor": "Open object editor",
       "confirmImport": "The current service will be rewritten!"
     },
+    "mcq": {
+      "selectBranchTitle": "Select branch",
+      "emptyBranchesMessage": "This multi-choice question has {{count}} empty branches. Which branch do you want to connect?"
+    },
     "previousVariables": {
       "assignElements": "Assign Elements",
       "dateAndTime": {
diff --git a/GUI/src/i18n/et/common.json b/GUI/src/i18n/et/common.json
index 8259fb591..665a7f1b0 100644
--- a/GUI/src/i18n/et/common.json
+++ b/GUI/src/i18n/et/common.json
@@ -406,6 +406,10 @@
       "openObjectEditor": "Ava objekti redaktor",
       "confirmImport": "Teenus kirjutatakse üle!"
     },
+    "mcq": {
+      "selectBranchTitle": "Vali haru",
+      "emptyBranchesMessage": "Sellel valikvastuse küsimusel on {{count}} tühja haru. Millisele harule soovid ühendada?"
+    },
     "previousVariables": {
       "assignElements": "Määra elemendid",
       "noName": "<Nimeta>",
diff --git a/GUI/src/store/new-services.store.ts b/GUI/src/store/new-services.store.ts
index 1a3f8b3b4..ca7117453 100644
--- a/GUI/src/store/new-services.store.ts
+++ b/GUI/src/store/new-services.store.ts
@@ -811,6 +811,7 @@ const useServiceStore = create<ServiceStoreState>((set, get) => ({
             testingPassed: updatedNode.data.testingPassed,
             assignElements: updatedNode.data.assignElements ?? prevNode.data.assignElements,
             rules: updatedNode.data.rules ?? prevNode.data.rules,
+            childrenCount: updatedNode.data.childrenCount ?? prevNode.data.childrenCount,
           },
         };
       }),
diff --git a/GUI/src/utils/mcq-flow-utils.test.ts b/GUI/src/utils/mcq-flow-utils.test.ts
new file mode 100644
index 000000000..786601159
--- /dev/null
+++ b/GUI/src/utils/mcq-flow-utils.test.ts
@@ -0,0 +1,47 @@
+import { Edge, Node } from '@xyflow/react';
+import { StepType } from 'types';
+import { describe, expect, it } from 'vitest';
+
+import { getEmptyMcqBranches, mcqHasEmptyBranches } from './mcq-flow-utils';
+
+const mcqNode: Node = {
+  id: 'mcq-1',
+  type: 'custom',
+  position: { x: 0, y: 0 },
+  data: {
+    stepType: StepType.MultiChoiceQuestion,
+    multiChoiceQuestion: {
+      question: 'Q?',
+      buttons: [
+        { id: '1', title: 'Yes', payload: '' },
+        { id: '2', title: 'No', payload: '' },
+      ],
+    },
+  },
+};
+
+describe('mcq-flow-utils', () => {
+  it('finds empty branches connected to ghost nodes', () => {
+    const nodes: Node[] = [
+      mcqNode,
+      { id: 'ghost-1', type: 'ghost', position: { x: 0, y: 0 }, data: {} },
+      { id: 'step-1', type: 'custom', position: { x: 0, y: 0 }, data: {} },
+    ];
+    const edges: Edge[] = [
+      { id: 'e1', source: 'mcq-1', target: 'ghost-1', label: 'Yes' },
+      { id: 'e2', source: 'mcq-1', target: 'step-1', label: 'No' },
+    ];
+
+    expect(getEmptyMcqBranches('mcq-1', nodes, edges)).toEqual([
+      { edgeId: 'e1', label: 'Yes', ghostNodeId: 'ghost-1', handleIndex: 0 },
+    ]);
+    expect(mcqHasEmptyBranches('mcq-1', nodes, edges)).toBe(true);
+  });
+
+  it('returns false when all branches are connected', () => {
+    const nodes: Node[] = [mcqNode, { id: 'step-1', type: 'custom', position: { x: 0, y: 0 }, data: {} }];
+    const edges: Edge[] = [{ id: 'e1', source: 'mcq-1', target: 'step-1', label: 'Yes' }];
+
+    expect(mcqHasEmptyBranches('mcq-1', nodes, edges)).toBe(false);
+  });
+});
diff --git a/GUI/src/utils/mcq-flow-utils.ts b/GUI/src/utils/mcq-flow-utils.ts
new file mode 100644
index 000000000..8fefaf6ff
--- /dev/null
+++ b/GUI/src/utils/mcq-flow-utils.ts
@@ -0,0 +1,134 @@
+import { Connection, Edge, getIncomers, getOutgoers, Node } from '@xyflow/react';
+import { StepType } from 'types';
+import { MultiChoiceQuestionButton } from 'types/multi-choice-question';
+
+export const MCQ_SOURCE_HANDLE_ID = 'mcq-out';
+
+export type McqEmptyBranch = {
+  edgeId: string;
+  label: string;
+  ghostNodeId: string;
+  handleIndex: number;
+};
+
+export const getMcqNodeIdFromConnection = (
+  connection: Connection,
+  getNode: (id: string) => Node | undefined,
+): string | null => {
+  const sourceNode = connection.source ? getNode(connection.source) : undefined;
+  const targetNode = connection.target ? getNode(connection.target) : undefined;
+
+  if (sourceNode?.data?.stepType === StepType.MultiChoiceQuestion) return sourceNode.id;
+  if (targetNode?.data?.stepType === StepType.MultiChoiceQuestion) return targetNode.id;
+  return null;
+};
+
+export const getMcqButtons = (mcqNode: Node): MultiChoiceQuestionButton[] =>
+  mcqNode.data?.multiChoiceQuestion?.buttons ?? [];
+
+export const getEmptyMcqBranches = (mcqNodeId: string, nodes: Node[], edges: Edge[]): McqEmptyBranch[] => {
+  const mcqNode = nodes.find((n) => n.id === mcqNodeId);
+  if (!mcqNode || mcqNode.data?.stepType !== StepType.MultiChoiceQuestion) return [];
+
+  const buttons = getMcqButtons(mcqNode);
+  const outgoing = edges.filter((e) => e.source === mcqNodeId);
+
+  return buttons.flatMap((button, handleIndex) => {
+    const edge = outgoing.find((e) => e.label === button.title);
+    if (!edge) return [];
+
+    const target = nodes.find((n) => n.id === edge.target);
+    if (target?.type !== 'ghost') return [];
+
+    return [
+      {
+        edgeId: edge.id,
+        label: button.title,
+        ghostNodeId: edge.target,
+        handleIndex,
+      },
+    ];
+  });
+};
+
+export const mcqHasEmptyBranches = (mcqNodeId: string, nodes: Node[], edges: Edge[]): boolean =>
+  getEmptyMcqBranches(mcqNodeId, nodes, edges).length > 0;
+
+export const applyMcqBranchConnection = ({
+  nodes,
+  edges,
+  mcqId,
+  targetId,
+  branch,
+}: {
+  nodes: Node[];
+  edges: Edge[];
+  mcqId: string;
+  targetId: string;
+  branch: McqEmptyBranch;
+}): { nodes: Node[]; edges: Edge[] } => {
+  let finalNodes = nodes.filter((n) => n.id !== branch.ghostNodeId);
+  let finalEdges = edges.filter((e) => e.id !== branch.edgeId);
+
+  finalEdges = [
+    ...finalEdges,
+    {
+      id: `${mcqId}->${targetId}`,
+      source: mcqId,
+      target: targetId,
+      type: 'step',
+      label: branch.label,
+      animated: false,
+      deletable: false,
+    },
+  ];
+
+  finalNodes = finalNodes.filter(
+    (node) =>
+      node.type !== 'ghost' ||
+      getIncomers(node, finalNodes, finalEdges).length > 0 ||
+      getOutgoers(node, finalNodes, finalEdges).length > 0,
+  );
+
+  return { nodes: finalNodes, edges: finalEdges };
+};
+
+export const applySimpleConnection = ({
+  nodes,
+  edges,
+  connection,
+}: {
+  nodes: Node[];
+  edges: Edge[];
+  connection: Connection;
+}): { nodes: Node[]; edges: Edge[] } => {
+  const { source, target } = connection;
+  if (!source || !target) return { nodes, edges };
+
+  const parentOutgoingEdges = edges.filter((edge) => edge.source === source);
+  const ghostEdges = parentOutgoingEdges.filter((edge) => {
+    const targetNode = nodes.find((n) => n.id === edge.target);
+    return targetNode?.type === 'ghost';
+  });
+
+  let finalNodes = nodes;
+  let finalEdges = edges;
+
+  if (ghostEdges.length > 0) {
+    const ghostNodeIds = new Set(ghostEdges.map((edge) => edge.target));
+    finalEdges = edges.filter((edge) => !ghostEdges.includes(edge));
+    finalNodes = nodes.filter((node) => !ghostNodeIds.has(node.id));
+  }
+
+  finalEdges = [
+    ...finalEdges,
+    {
+      id: `${source}->${target}`,
+      source,
+      target,
+      type: 'step',
+    },
+  ];
+
+  return { nodes: finalNodes, edges: finalEdges };
+};

From b58660487c209e630f56ef551f1c936c784acdcc Mon Sep 17 00:00:00 2001
From: 1AhmedYasser <26207361+1AhmedYasser@users.noreply.github.com>
Date: Tue, 19 May 2026 14:16:42 +0300
Subject: [PATCH 02/18] chore(982): Handled buttons long texts

---
 GUI/src/components/Flow/McqBranchSelectModal.scss | 10 ++++++++++
 GUI/src/components/Flow/McqBranchSelectModal.tsx  |  9 ++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 GUI/src/components/Flow/McqBranchSelectModal.scss

diff --git a/GUI/src/components/Flow/McqBranchSelectModal.scss b/GUI/src/components/Flow/McqBranchSelectModal.scss
new file mode 100644
index 000000000..4689633a2
--- /dev/null
+++ b/GUI/src/components/Flow/McqBranchSelectModal.scss
@@ -0,0 +1,10 @@
+.mcq-branch-select-modal__button {
+  display: inline-flex;
+  width: fit-content;
+  max-width: 100%;
+  overflow: hidden;
+
+  .multiple-choice-question-button__text {
+    max-width: 100%;
+  }
+}
diff --git a/GUI/src/components/Flow/McqBranchSelectModal.tsx b/GUI/src/components/Flow/McqBranchSelectModal.tsx
index aa0b95b2b..f6715332d 100644
--- a/GUI/src/components/Flow/McqBranchSelectModal.tsx
+++ b/GUI/src/components/Flow/McqBranchSelectModal.tsx
@@ -3,6 +3,9 @@ import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { McqEmptyBranch } from 'utils/mcq-flow-utils';
 
+import '../FlowElementsPopup/styles.scss';
+import './McqBranchSelectModal.scss';
+
 type McqBranchSelectModalProps = {
   emptyBranches: McqEmptyBranch[];
   onSelect: (branch: McqEmptyBranch) => void;
@@ -15,10 +18,10 @@ const McqBranchSelectModal: FC<McqBranchSelectModalProps> = ({ emptyBranches, on
   return (
     <Modal title={t('serviceFlow.mcq.selectBranchTitle')} onClose={onClose}>
       <p>{t('serviceFlow.mcq.emptyBranchesMessage', { count: emptyBranches.length })}</p>
-      <Track direction="vertical" gap={8} style={{ marginTop: 16 }}>
+      <Track direction="vertical" gap={8} align="left" style={{ marginTop: 16, width: '100%' }}>
         {emptyBranches.map((branch) => (
-          <Button key={branch.edgeId} onClick={() => onSelect(branch)}>
-            {branch.label}
+          <Button key={branch.edgeId} className="mcq-branch-select-modal__button" onClick={() => onSelect(branch)}>
+            <span className="multiple-choice-question-button__text">{branch.label}</span>
           </Button>
         ))}
       </Track>

From 1d6bd9b175d840a36190b89bf99341222533dcaa Mon Sep 17 00:00:00 2001
From: 1AhmedYasser <26207361+1AhmedYasser@users.noreply.github.com>
Date: Tue, 19 May 2026 16:08:16 +0300
Subject: [PATCH 03/18] chore(982): Addressed PR Comments

---
 GUI/src/components/Flow/McqBranchSelectModal.tsx | 6 +++---
 GUI/src/hooks/flow/useMcqConnect.ts              | 4 ++--
 GUI/src/utils/mcq-flow-utils.ts                  | 8 ++++----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/GUI/src/components/Flow/McqBranchSelectModal.tsx b/GUI/src/components/Flow/McqBranchSelectModal.tsx
index f6715332d..58f17b33a 100644
--- a/GUI/src/components/Flow/McqBranchSelectModal.tsx
+++ b/GUI/src/components/Flow/McqBranchSelectModal.tsx
@@ -7,9 +7,9 @@ import '../FlowElementsPopup/styles.scss';
 import './McqBranchSelectModal.scss';
 
 type McqBranchSelectModalProps = {
-  emptyBranches: McqEmptyBranch[];
-  onSelect: (branch: McqEmptyBranch) => void;
-  onClose: () => void;
+  readonly emptyBranches: McqEmptyBranch[];
+  readonly onSelect: (branch: McqEmptyBranch) => void;
+  readonly onClose: () => void;
 };
 
 const McqBranchSelectModal: FC<McqBranchSelectModalProps> = ({ emptyBranches, onSelect, onClose }) => {
diff --git a/GUI/src/hooks/flow/useMcqConnect.ts b/GUI/src/hooks/flow/useMcqConnect.ts
index b69fbd365..5ba83c235 100644
--- a/GUI/src/hooks/flow/useMcqConnect.ts
+++ b/GUI/src/hooks/flow/useMcqConnect.ts
@@ -10,8 +10,8 @@ import {
 } from 'utils/mcq-flow-utils';
 
 export type PendingMcqConnection = {
-  connection: Connection;
-  emptyBranches: McqEmptyBranch[];
+  readonly connection: Connection;
+  readonly emptyBranches: McqEmptyBranch[];
 };
 
 function useMcqConnect() {
diff --git a/GUI/src/utils/mcq-flow-utils.ts b/GUI/src/utils/mcq-flow-utils.ts
index 8fefaf6ff..f3b7b4972 100644
--- a/GUI/src/utils/mcq-flow-utils.ts
+++ b/GUI/src/utils/mcq-flow-utils.ts
@@ -5,10 +5,10 @@ import { MultiChoiceQuestionButton } from 'types/multi-choice-question';
 export const MCQ_SOURCE_HANDLE_ID = 'mcq-out';
 
 export type McqEmptyBranch = {
-  edgeId: string;
-  label: string;
-  ghostNodeId: string;
-  handleIndex: number;
+  readonly edgeId: string;
+  readonly label: string;
+  readonly ghostNodeId: string;
+  readonly handleIndex: number;
 };
 
 export const getMcqNodeIdFromConnection = (

From e583908ada56fe7b95b3eeaa69b684cc0a389187 Mon Sep 17 00:00:00 2001
From: 1AhmedYasser <26207361+1AhmedYasser@users.noreply.github.com>
Date: Tue, 19 May 2026 16:30:48 +0300
Subject: [PATCH 04/18] chore(1016): stripped html from mcq question

---
 GUI/src/services/service-builder.ts | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/GUI/src/services/service-builder.ts b/GUI/src/services/service-builder.ts
index bfac092b1..41be8b110 100644
--- a/GUI/src/services/service-builder.ts
+++ b/GUI/src/services/service-builder.ts
@@ -22,6 +22,14 @@ import {
 
 import api from '../services/api-dev';
 
+const htmlToMarkdown = new NodeHtmlMarkdown({
+  textReplace: [
+    [/\\_/g, '_'],
+    [/\\\[/g, '['],
+    [/\\\]/g, ']'],
+  ],
+});
+
 /**
  * Normalises MCQ button payloads on all MultiChoiceQuestion nodes.
  *
@@ -706,14 +714,6 @@ function handleTextField(
   parentNode: Node,
   childNode: Node<NodeDataProps> | undefined,
 ) {
-  const htmlToMarkdown = new NodeHtmlMarkdown({
-    textReplace: [
-      [/\\_/g, '_'],
-      [/\\\[/g, '['],
-      [/\\\]/g, ']'],
-    ],
-  });
-
   const spacePlaceholder = '___SPACE___';
   const rawMessage = typeof parentNode.data.message === 'string' ? decodeHtmlEntities(parentNode.data.message) : '';
   const rawMessageWithSpaceholders = replaceSpacesOutsideTags(
@@ -884,11 +884,14 @@ function handleMultiChoiceQuestion(
     b.payload = b.payload.replace(/\/[^/]*_mcq_/, `/${rootServiceName}_mcq_`);
   });
 
+  const rawQuestion = decodeHtmlEntities(parentNode?.data?.multiChoiceQuestion?.question ?? '');
+  const markdownQuestion = htmlToMarkdown.translate(rawQuestion);
+
   return finishedFlow.set(parentStepName, {
     assign: {
       buttons: parentNode?.data?.multiChoiceQuestion?.buttons ?? [],
       res: {
-        result: parentNode?.data?.multiChoiceQuestion?.question ?? '',
+        result: markdownQuestion,
       },
     },
     next: childNode ? toSnakeCase(childNode.data.label ?? 'format_messages') : 'format_messages',

From ebce0db82e2074e814b7e35a5e7f42f91f3b03b5 Mon Sep 17 00:00:00 2001
From: 1AhmedYasser <26207361+1AhmedYasser@users.noreply.github.com>
Date: Wed, 20 May 2026 01:14:34 +0300
Subject: [PATCH 05/18] chore(963): Added Service settings to service
 import/export

---
 .../components/ExportServicesModal/index.tsx  |  2 +-
 .../Flow/Controls/ImportExportControls.tsx    | 32 +++++-----
 GUI/src/components/ServicesTable/columns.tsx  |  2 +-
 GUI/src/store/new-services.store.ts           |  9 +--
 GUI/src/types/service-flow.ts                 |  8 +++
 GUI/src/utils/service-export.ts               |  5 +-
 GUI/src/utils/service-flow-artifact.ts        | 60 +++++++++++++++++++
 GUI/src/utils/service-import.ts               | 22 ++++---
 8 files changed, 108 insertions(+), 32 deletions(-)
 create mode 100644 GUI/src/utils/service-flow-artifact.ts

diff --git a/GUI/src/components/ExportServicesModal/index.tsx b/GUI/src/components/ExportServicesModal/index.tsx
index 5488bb840..a601e2820 100644
--- a/GUI/src/components/ExportServicesModal/index.tsx
+++ b/GUI/src/components/ExportServicesModal/index.tsx
@@ -99,7 +99,7 @@ const ExportServicesModal: FC<ExportServicesModalProps> = ({ isVisible, onClose
       const servicesWithStructure = await Promise.all(
         selectedServices.map(async (service) => {
           const response = await api.post(getServiceById(), { id: service.serviceId, search: '' });
-          return { ...service, structure: response.data.structure };
+          return { ...response.data, structure: response.data.structure };
         }),
       );
       const success = await exportServices(servicesWithStructure);
diff --git a/GUI/src/components/Flow/Controls/ImportExportControls.tsx b/GUI/src/components/Flow/Controls/ImportExportControls.tsx
index 0fe2d5b95..ea3816a80 100644
--- a/GUI/src/components/Flow/Controls/ImportExportControls.tsx
+++ b/GUI/src/components/Flow/Controls/ImportExportControls.tsx
@@ -8,6 +8,13 @@ import { updateFlowInputRules } from 'services/flow-builder';
 import useServiceStore from 'store/new-services.store';
 import useToastStore from 'store/toasts.store';
 import { FlowData } from 'types/service-flow';
+import {
+  applyServiceSettings,
+  buildServiceSettingsFromStore,
+  isValidFlowData,
+  parseFlowArtifact,
+  serializeFlowArtifact,
+} from 'utils/service-flow-artifact';
 import { removeTrailingUnderscores } from 'utils/string-util';
 
 const ImportExportControls: FC = () => {
@@ -21,7 +28,7 @@ const ImportExportControls: FC = () => {
 
   const handleExport = useCallback(async () => {
     try {
-      const dataString = JSON.stringify({ nodes: getNodes(), edges: getEdges() });
+      const dataString = serializeFlowArtifact(getNodes(), getEdges(), buildServiceSettingsFromStore());
       const fileName = `${serviceName != undefined && serviceName != '' ? serviceName : 'flow'}_${format(new Date(), 'yyyy_MM_dd_HH_mm_ss')}.json`;
 
       if ('showSaveFilePicker' in window) {
@@ -56,8 +63,9 @@ const ImportExportControls: FC = () => {
   }, [getNodes, getEdges, serviceName, t]);
 
   const applyImportedFlow = useCallback(
-    (flowData: FlowData) => {
+    (flowData: FlowData, settings?: FlowData['settings']) => {
       if (isValidFlowData(flowData)) {
+        applyServiceSettings(settings);
         const nodes = flowData.nodes.map((node: any) => {
           if (node.type !== 'custom') return node;
           node.data = {
@@ -90,13 +98,14 @@ const ImportExportControls: FC = () => {
       reader.onload = (e) => {
         try {
           const content = e.target?.result as string;
-          const flowData = JSON.parse(content) as FlowData;
+          const { nodes, edges, settings } = parseFlowArtifact(content);
+          const flowData = { nodes, edges } as FlowData;
           const currentNodes = getNodes().filter((node) => node.type !== 'ghost');
 
           if (currentNodes.length === 1 && currentNodes[0].type === 'start') {
-            applyImportedFlow(flowData);
+            applyImportedFlow(flowData, settings);
           } else {
-            setImportedFlowData(flowData);
+            setImportedFlowData({ ...flowData, settings });
             setIsConfirmImportModalVisible(true);
           }
         } catch (error) {
@@ -117,7 +126,8 @@ const ImportExportControls: FC = () => {
 
   const handleConfirmImport = useCallback(() => {
     if (importedFlowData) {
-      applyImportedFlow(importedFlowData);
+      const { settings, ...flowData } = importedFlowData;
+      applyImportedFlow(flowData, settings);
     }
     setIsConfirmImportModalVisible(false);
     setImportedFlowData(null);
@@ -128,16 +138,6 @@ const ImportExportControls: FC = () => {
     setImportedFlowData(null);
   }, []);
 
-  const isValidFlowData = (data: any): data is FlowData => {
-    return (
-      data &&
-      Array.isArray(data.nodes) &&
-      Array.isArray(data.edges) &&
-      data.nodes.every((node: any) => node.id && node.type) &&
-      data.edges.every((edge: any) => edge.id && edge.source && edge.target)
-    );
-  };
-
   const triggerFileInput = useCallback(() => {
     if (fileInputRef.current) {
       fileInputRef.current.click();
diff --git a/GUI/src/components/ServicesTable/columns.tsx b/GUI/src/components/ServicesTable/columns.tsx
index d9bf92bc5..5bceb730b 100644
--- a/GUI/src/components/ServicesTable/columns.tsx
+++ b/GUI/src/components/ServicesTable/columns.tsx
@@ -186,7 +186,7 @@ export const getColumns = ({ isCommon, navigate, hideDeletePopup, showReadyPopup
             appearance="text"
             onClick={async () => {
               const response = await api.post(getServiceById(), { id: props.row.original.serviceId, search: '' });
-              await exportServices([{ ...props.row.original, structure: response.data.structure }]);
+              await exportServices([{ ...response.data, structure: response.data.structure }]);
             }}
           >
             <Icon icon={<AiOutlineExport />} size="medium" />
diff --git a/GUI/src/store/new-services.store.ts b/GUI/src/store/new-services.store.ts
index 00a72107f..c798397ad 100644
--- a/GUI/src/store/new-services.store.ts
+++ b/GUI/src/store/new-services.store.ts
@@ -442,6 +442,7 @@ const useServiceStore = create<ServiceStoreState>((set, get) => ({
       serviceResponse = await api.post<Service>(getServiceById(), { id, search: search ?? '' });
 
       const structure = JSON.parse(serviceResponse.data.structure?.value ?? '{}');
+      const settings = structure?.settings;
       let endpoints = serviceResponse.data.endpoints.map(
         (
           endpoint: Pick<EndpointData, 'endpointId' | 'name' | 'type' | 'fileName'> & {
@@ -491,12 +492,12 @@ const useServiceStore = create<ServiceStoreState>((set, get) => ({
 
       set({
         serviceId: id,
-        name: serviceResponse.data.name,
+        name: settings?.title ?? serviceResponse.data.name,
         isCommon: serviceResponse.data.isCommon,
-        description: serviceResponse.data.description,
+        description: settings?.description ?? serviceResponse.data.description,
         slot: serviceResponse.data.slot,
-        examples: serviceResponse.data.examples,
-        entities: serviceResponse.data.entities,
+        examples: settings?.examples ?? serviceResponse.data.examples,
+        entities: settings?.keywords ?? serviceResponse.data.entities,
         edges,
         nodes,
         endpoints,
diff --git a/GUI/src/types/service-flow.ts b/GUI/src/types/service-flow.ts
index cbca36261..cd8235735 100644
--- a/GUI/src/types/service-flow.ts
+++ b/GUI/src/types/service-flow.ts
@@ -14,9 +14,17 @@ export const EDGE_LENGTH = 5 * GRID_UNIT;
 const startNodeId = generateUniqueId();
 const ghostNodeId = generateUniqueId();
 
+export interface ServiceExportSettings {
+  title?: string;
+  description?: string;
+  examples?: string[];
+  keywords?: string[];
+}
+
 export interface FlowData {
   nodes: Node<NodeDataProps>[];
   edges: Edge[];
+  settings?: ServiceExportSettings;
 }
 
 export type NodeDataProps = {
diff --git a/GUI/src/utils/service-export.ts b/GUI/src/utils/service-export.ts
index 747c2c2cd..a4e0dac5c 100644
--- a/GUI/src/utils/service-export.ts
+++ b/GUI/src/utils/service-export.ts
@@ -3,6 +3,7 @@ import i18n from 'i18n';
 import JSZip from 'jszip';
 import useToastStore from 'store/toasts.store';
 import { Service } from 'types';
+import { buildExportPayloadFromService } from 'utils/service-flow-artifact';
 
 const sanitizeFileName = (name: string): string => name.replaceAll(/[^a-z0-9]/gi, '_');
 const getTimestamp = (): string => format(new Date(), 'yyyy_MM_dd_HH_mm_ss');
@@ -53,7 +54,7 @@ export const exportServices = async (services: Service[]): Promise<boolean> => {
 
     if (services.length === 1) {
       const service = services[0];
-      const dataString = service?.structure?.value ?? '{}';
+      const dataString = buildExportPayloadFromService(service);
       const fileName = `${sanitizeFileName(service.name)}_${timestamp}.json`;
       const blob = new Blob([dataString], { type: 'application/json' });
       const success = await downloadBlob(blob, fileName, 'application/json', 'json');
@@ -61,7 +62,7 @@ export const exportServices = async (services: Service[]): Promise<boolean> => {
     } else {
       const zip = new JSZip();
       services.forEach((service) => {
-        const dataString = service?.structure?.value ?? '{}';
+        const dataString = buildExportPayloadFromService(service);
         const fileName = `${sanitizeFileName(service.name)}_${timestamp}.json`;
         zip.file(fileName, dataString);
       });
diff --git a/GUI/src/utils/service-flow-artifact.ts b/GUI/src/utils/service-flow-artifact.ts
new file mode 100644
index 000000000..bb5810e52
--- /dev/null
+++ b/GUI/src/utils/service-flow-artifact.ts
@@ -0,0 +1,60 @@
+import { Edge, Node } from '@xyflow/react';
+import useServiceStore from 'store/new-services.store';
+import { Service } from 'types';
+import { FlowData, NodeDataProps, ServiceExportSettings } from 'types/service-flow';
+
+export const isValidFlowData = (data: unknown): data is FlowData =>
+  !!data &&
+  typeof data === 'object' &&
+  Array.isArray((data as FlowData).nodes) &&
+  Array.isArray((data as FlowData).edges);
+
+export const buildServiceSettings = (service: {
+  name?: string;
+  description?: string;
+  examples?: string[];
+  entities?: string[];
+}): ServiceExportSettings => ({
+  title: service.name ?? '',
+  description: service.description ?? '',
+  examples: service.examples ?? [],
+  keywords: service.entities ?? [],
+});
+
+export const buildServiceSettingsFromStore = (): ServiceExportSettings =>
+  buildServiceSettings({
+    name: useServiceStore.getState().name,
+    description: useServiceStore.getState().description,
+    examples: useServiceStore.getState().examples,
+    entities: useServiceStore.getState().entities,
+  });
+
+export const applyServiceSettings = (settings?: ServiceExportSettings) => {
+  if (!settings) return;
+
+  const store = useServiceStore.getState();
+  if (settings.title) store.changeServiceName(settings.title);
+  if (settings.description !== undefined) store.setDescription(settings.description);
+  if (settings.examples !== undefined) store.setExamples(settings.examples);
+  if (settings.keywords !== undefined) store.setEntities(settings.keywords);
+};
+
+export const serializeFlowArtifact = (
+  nodes: Node<NodeDataProps>[] | Node[],
+  edges: Edge[],
+  settings?: ServiceExportSettings,
+): string => JSON.stringify({ nodes, edges, ...(settings ? { settings } : {}) });
+
+export const parseFlowArtifact = (
+  content: string,
+): { nodes: FlowData['nodes']; edges: FlowData['edges']; settings?: ServiceExportSettings } => {
+  const parsed = JSON.parse(content) as FlowData;
+  return { nodes: parsed.nodes, edges: parsed.edges, settings: parsed.settings };
+};
+
+export const buildExportPayloadFromService = (service: Service): string => {
+  const parsed = JSON.parse(service.structure?.value ?? '{}') as FlowData;
+  const nodes = parsed.nodes ?? [];
+  const edges = parsed.edges ?? [];
+  return serializeFlowArtifact(nodes, edges, buildServiceSettings(service));
+};
diff --git a/GUI/src/utils/service-import.ts b/GUI/src/utils/service-import.ts
index a485629e2..afeea4328 100644
--- a/GUI/src/utils/service-import.ts
+++ b/GUI/src/utils/service-import.ts
@@ -6,10 +6,11 @@ import api from 'services/api';
 import { buildAllServiceContents } from 'services/service-builder';
 import useServiceListStore from 'store/services.store';
 import useToastStore from 'store/toasts.store';
-import { FlowData } from 'types/service-flow';
-
-const isValidFlowData = (data: any): data is FlowData =>
-  data?.nodes && data?.edges && Array.isArray(data.nodes) && Array.isArray(data.edges);
+import {
+  isValidFlowData,
+  parseFlowArtifact,
+  serializeFlowArtifact,
+} from 'utils/service-flow-artifact';
 
 const handleImportServices = async (
   event: ChangeEvent<HTMLInputElement>,
@@ -38,17 +39,22 @@ const handleImportServices = async (
     const name = rawName.replace(/(_\d{4}_\d{2}_\d{2}_\d{2}_\d{2}_\d{2})+$/, '');
     try {
       const content = await file.text();
-      const flowData = JSON.parse(content) as FlowData;
+      const { nodes, edges, settings } = parseFlowArtifact(content);
 
-      if (!isValidFlowData(flowData)) {
+      if (!isValidFlowData({ nodes, edges })) {
         throw new Error('Invalid flow data structure');
       }
 
-      const result = buildAllServiceContents(flowData.nodes, flowData.edges, name);
+      const result = buildAllServiceContents(
+        nodes as Parameters<typeof buildAllServiceContents>[0],
+        edges,
+        name,
+        settings?.description ?? '',
+      );
 
       validFiles.push({
         fileName: result.name,
-        flowData: result.flowData,
+        flowData: serializeFlowArtifact(nodes, edges, settings),
         content: result.content,
         subServices: result.subServices,
       });

From 3743cde1886584bafd428381cbcd5ad1791a8715 Mon Sep 17 00:00:00 2001
From: 1AhmedYasser <26207361+1AhmedYasser@users.noreply.github.com>
Date: Wed, 20 May 2026 01:17:25 +0300
Subject: [PATCH 06/18] chore(963): Fixed format and lint

---
 GUI/src/components/ExportServicesModal/index.tsx | 4 ++--
 GUI/src/components/ServicesTable/columns.tsx     | 4 ++--
 GUI/src/utils/service-import.ts                  | 6 +-----
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/GUI/src/components/ExportServicesModal/index.tsx b/GUI/src/components/ExportServicesModal/index.tsx
index a601e2820..1fbf231a8 100644
--- a/GUI/src/components/ExportServicesModal/index.tsx
+++ b/GUI/src/components/ExportServicesModal/index.tsx
@@ -98,8 +98,8 @@ const ExportServicesModal: FC<ExportServicesModalProps> = ({ isVisible, onClose
     try {
       const servicesWithStructure = await Promise.all(
         selectedServices.map(async (service) => {
-          const response = await api.post(getServiceById(), { id: service.serviceId, search: '' });
-          return { ...response.data, structure: response.data.structure };
+          const response = await api.post<Service>(getServiceById(), { id: service.serviceId, search: '' });
+          return response.data;
         }),
       );
       const success = await exportServices(servicesWithStructure);
diff --git a/GUI/src/components/ServicesTable/columns.tsx b/GUI/src/components/ServicesTable/columns.tsx
index 5bceb730b..65892d099 100644
--- a/GUI/src/components/ServicesTable/columns.tsx
+++ b/GUI/src/components/ServicesTable/columns.tsx
@@ -185,8 +185,8 @@ export const getColumns = ({ isCommon, navigate, hideDeletePopup, showReadyPopup
           <Button
             appearance="text"
             onClick={async () => {
-              const response = await api.post(getServiceById(), { id: props.row.original.serviceId, search: '' });
-              await exportServices([{ ...response.data, structure: response.data.structure }]);
+              const response = await api.post<Service>(getServiceById(), { id: props.row.original.serviceId, search: '' });
+              await exportServices([response.data]);
             }}
           >
             <Icon icon={<AiOutlineExport />} size="medium" />
diff --git a/GUI/src/utils/service-import.ts b/GUI/src/utils/service-import.ts
index afeea4328..5e98630e2 100644
--- a/GUI/src/utils/service-import.ts
+++ b/GUI/src/utils/service-import.ts
@@ -6,11 +6,7 @@ import api from 'services/api';
 import { buildAllServiceContents } from 'services/service-builder';
 import useServiceListStore from 'store/services.store';
 import useToastStore from 'store/toasts.store';
-import {
-  isValidFlowData,
-  parseFlowArtifact,
-  serializeFlowArtifact,
-} from 'utils/service-flow-artifact';
+import { isValidFlowData, parseFlowArtifact, serializeFlowArtifact } from 'utils/service-flow-artifact';
 
 const handleImportServices = async (
   event: ChangeEvent<HTMLInputElement>,

From 293e115d10b131c9e65ffea0d7177167ca247a81 Mon Sep 17 00:00:00 2001
From: 1AhmedYasser <26207361+1AhmedYasser@users.noreply.github.com>
Date: Wed, 20 May 2026 01:40:14 +0300
Subject: [PATCH 07/18] chore(963): Add import only flow option

---
 .../Flow/Controls/ImportExportControls.tsx    |  51 +++++--
 GUI/src/components/ServicesTable/columns.tsx  |   5 +-
 GUI/src/i18n/en/common.json                   |   3 +-
 GUI/src/i18n/et/common.json                   |   3 +-
 GUI/src/utils/append-flow-nodes.ts            | 128 ++++++++++++++++++
 5 files changed, 177 insertions(+), 13 deletions(-)
 create mode 100644 GUI/src/utils/append-flow-nodes.ts

diff --git a/GUI/src/components/Flow/Controls/ImportExportControls.tsx b/GUI/src/components/Flow/Controls/ImportExportControls.tsx
index ea3816a80..9beaae6d9 100644
--- a/GUI/src/components/Flow/Controls/ImportExportControls.tsx
+++ b/GUI/src/components/Flow/Controls/ImportExportControls.tsx
@@ -8,6 +8,7 @@ import { updateFlowInputRules } from 'services/flow-builder';
 import useServiceStore from 'store/new-services.store';
 import useToastStore from 'store/toasts.store';
 import { FlowData } from 'types/service-flow';
+import { appendFlowNodes } from 'utils/append-flow-nodes';
 import {
   applyServiceSettings,
   buildServiceSettingsFromStore,
@@ -18,7 +19,7 @@ import {
 import { removeTrailingUnderscores } from 'utils/string-util';
 
 const ImportExportControls: FC = () => {
-  const { getNodes, getEdges } = useReactFlow();
+  const { getNodes, getEdges, setNodes, setEdges } = useReactFlow();
   const { t } = useTranslation();
   const { setHasUnsavedChanges, saveToHistory, setNodes: setStoreNodes, setEdges: setStoreEdges } = useServiceStore();
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -124,19 +125,46 @@ const ImportExportControls: FC = () => {
     [getNodes, applyImportedFlow, t],
   );
 
+  const closeImportModal = useCallback(() => {
+    setIsConfirmImportModalVisible(false);
+    setImportedFlowData(null);
+  }, []);
+
   const handleConfirmImport = useCallback(() => {
     if (importedFlowData) {
       const { settings, ...flowData } = importedFlowData;
       applyImportedFlow(flowData, settings);
     }
-    setIsConfirmImportModalVisible(false);
-    setImportedFlowData(null);
-  }, [importedFlowData, applyImportedFlow]);
+    closeImportModal();
+  }, [importedFlowData, applyImportedFlow, closeImportModal]);
 
-  const handleCancelImport = useCallback(() => {
-    setIsConfirmImportModalVisible(false);
-    setImportedFlowData(null);
-  }, []);
+  const handleImportFlowOnly = useCallback(() => {
+    if (!importedFlowData) {
+      closeImportModal();
+      return;
+    }
+
+    const { nodes, edges } = appendFlowNodes(getNodes(), getEdges(), importedFlowData.nodes, importedFlowData.edges);
+    saveToHistory();
+    setStoreNodes(nodes);
+    setStoreEdges(edges);
+    setNodes(nodes);
+    setEdges(edges);
+    saveToHistory({ nodes, edges });
+    setHasUnsavedChanges(true);
+    closeImportModal();
+  }, [
+    importedFlowData,
+    getNodes,
+    getEdges,
+    setNodes,
+    setEdges,
+    setStoreNodes,
+    setStoreEdges,
+    setHasUnsavedChanges,
+    saveToHistory,
+    closeImportModal,
+  ]);
 
   const triggerFileInput = useCallback(() => {
     if (fileInputRef.current) {
@@ -158,12 +186,15 @@ const ImportExportControls: FC = () => {
         </Button>
       </Track>
       {isConfirmImportModalVisible && (
-        <Modal title={t('serviceFlow.popup.confirmImport')} onClose={handleCancelImport}>
+        <Modal title={t('serviceFlow.popup.confirmImport')} onClose={closeImportModal}>
           <Track justify="end" gap={16}>
             <Button appearance="primary" onClick={handleConfirmImport}>
               {t('global.proceed')}
             </Button>
-            <Button appearance="secondary" onClick={handleCancelImport}>
+            <Button onClick={handleImportFlowOnly}>
+              {t('serviceFlow.popup.importFlowOnly')}
+            </Button>
+            <Button appearance="secondary" onClick={closeImportModal}>
               {t('global.cancel')}
             </Button>
           </Track>
diff --git a/GUI/src/components/ServicesTable/columns.tsx b/GUI/src/components/ServicesTable/columns.tsx
index 65892d099..b8adf0b6c 100644
--- a/GUI/src/components/ServicesTable/columns.tsx
+++ b/GUI/src/components/ServicesTable/columns.tsx
@@ -185,7 +185,10 @@ export const getColumns = ({ isCommon, navigate, hideDeletePopup, showReadyPopup
           <Button
             appearance="text"
             onClick={async () => {
-              const response = await api.post<Service>(getServiceById(), { id: props.row.original.serviceId, search: '' });
+              const response = await api.post<Service>(getServiceById(), {
+                id: props.row.original.serviceId,
+                search: '',
+              });
               await exportServices([response.data]);
             }}
           >
diff --git a/GUI/src/i18n/en/common.json b/GUI/src/i18n/en/common.json
index 406b9d6cd..ca490c36f 100644
--- a/GUI/src/i18n/en/common.json
+++ b/GUI/src/i18n/en/common.json
@@ -405,7 +405,8 @@
       "removeValueAssignment": "Remove element assigned as value",
       "assignManualEdit": "Manually edit variable assignment",
       "openObjectEditor": "Open object editor",
-      "confirmImport": "The current service will be rewritten!"
+      "confirmImport": "The current service will be rewritten!",
+      "importFlowOnly": "Import Flow Only"
     },
     "previousVariables": {
       "assignElements": "Assign Elements",
diff --git a/GUI/src/i18n/et/common.json b/GUI/src/i18n/et/common.json
index 8f39f1da2..98450995d 100644
--- a/GUI/src/i18n/et/common.json
+++ b/GUI/src/i18n/et/common.json
@@ -405,7 +405,8 @@
       "removeValueAssignment": "Eemalda element, mis on määratud väärtuseks",
       "assignManualEdit": "Muutke muutuja määramist käsitsi",
       "openObjectEditor": "Ava objekti redaktor",
-      "confirmImport": "Teenus kirjutatakse üle!"
+      "confirmImport": "Teenus kirjutatakse üle!",
+      "importFlowOnly": "Ainult voo import"
     },
     "previousVariables": {
       "assignElements": "Määra elemendid",
diff --git a/GUI/src/utils/append-flow-nodes.ts b/GUI/src/utils/append-flow-nodes.ts
new file mode 100644
index 000000000..689b157e3
--- /dev/null
+++ b/GUI/src/utils/append-flow-nodes.ts
@@ -0,0 +1,128 @@
+import { Edge, Node } from '@xyflow/react';
+import { updateFlowInputRules } from 'services/flow-builder';
+import useServiceStore from 'store/new-services.store';
+import { StepType } from 'types';
+import { generateUniqueId, generateUniqueLabel } from 'utils/flow-utils';
+
+export const appendFlowNodes = (
+  currentNodes: Node[],
+  currentEdges: Edge[],
+  importedNodes: Node[],
+  importedEdges: Edge[],
+): { nodes: Node[]; edges: Edge[] } => {
+  const nodesToAdd = importedNodes.filter((node) => node.type !== 'start' && node.type !== 'ghost');
+  const importedIds = new Set(nodesToAdd.map((node) => node.id));
+  const edgesToAdd = importedEdges.filter((edge) => importedIds.has(edge.source) && importedIds.has(edge.target));
+
+  if (nodesToAdd.length === 0) {
+    return { nodes: currentNodes, edges: currentEdges };
+  }
+
+  const store = useServiceStore.getState();
+  const idMap = new Map<string, string>();
+  const processedLabels = new Set<string>();
+
+  const newNodes = nodesToAdd.map((node) => {
+    const newId = generateUniqueId();
+    idMap.set(node.id, newId);
+
+    const labelContext = [...currentNodes];
+    processedLabels.forEach((label) => {
+      labelContext.push({ id: 'virtual', data: { label }, position: { x: 0, y: 0 } });
+    });
+    const uniqueLabel = generateUniqueLabel(node.data?.label as string, labelContext);
+    processedLabels.add(uniqueLabel);
+
+    return {
+      ...node,
+      id: newId,
+      selected: false,
+      data: {
+        ...node.data,
+        label: uniqueLabel,
+        onDelete: store.onDelete,
+        setClickedNode: store.setClickedNode,
+        onEdit: store.handleNodeEdit,
+        update: updateFlowInputRules,
+      },
+    };
+  });
+
+  const newEdges = edgesToAdd.map((edge) => ({
+    ...edge,
+    id: generateUniqueId(),
+    source: idMap.get(edge.source) ?? edge.source,
+    target: idMap.get(edge.target) ?? edge.target,
+  }));
+
+  const ghostNodes: Node[] = [];
+  const ghostEdges: Edge[] = [];
+
+  const addGhost = (sourceId: string, x: number, y: number, label: string) => {
+    const ghostNode: Node = {
+      id: generateUniqueId(),
+      type: 'ghost',
+      position: { x, y },
+      data: { type: 'ghost' },
+      className: 'ghost',
+      selectable: false,
+      draggable: false,
+    };
+    ghostEdges.push({
+      id: generateUniqueId(),
+      source: sourceId,
+      target: ghostNode.id,
+      type: 'step',
+      animated: true,
+      deletable: false,
+      label,
+    });
+    ghostNodes.push(ghostNode);
+  };
+
+  nodesToAdd.forEach((node) => {
+    const newId = idMap.get(node.id);
+    if (!newId) return;
+
+    const stepType = node.data?.stepType;
+    if (stepType === StepType.Condition || stepType === StepType.Input) {
+      ['Success', 'Failure'].forEach((label, index) => {
+        if (!edgesToAdd.some((edge) => edge.source === node.id && edge.label === label)) {
+          addGhost(newId, node.position.x + 200, node.position.y + index * 100, label);
+        }
+      });
+    } else if (stepType === StepType.MultiChoiceQuestion) {
+      const buttons = (node.data?.multiChoiceQuestion as { buttons?: { title?: unknown }[] })?.buttons ?? [
+        { title: 'Jah' },
+        { title: 'Ei' },
+      ];
+      buttons.forEach((button, index) => {
+        if (!edgesToAdd.some((edge) => edge.source === node.id && edge.label === button.title)) {
+          const title = typeof button.title === 'string' ? button.title : String(button.title ?? '');
+          addGhost(newId, node.position.x + 200, node.position.y + index * 100, title);
+        }
+      });
+    }
+  });
+
+  const endNodes = nodesToAdd.filter((node) => !edgesToAdd.some((edge) => edge.source === node.id));
+  const skipEndGhost = new Set([
+    StepType.FinishingStepEnd,
+    StepType.FinishingStepRedirect,
+    StepType.DynamicChoices,
+    StepType.Condition,
+    StepType.Input,
+    StepType.MultiChoiceQuestion,
+  ]);
+
+  endNodes.forEach((node) => {
+    const newId = idMap.get(node.id);
+    if (!newId || skipEndGhost.has(node.data?.stepType as StepType)) return;
+    addGhost(newId, node.position.x, node.position.y, '+');
+  });
+
+  return {
+    nodes: [...currentNodes, ...newNodes, ...ghostNodes],
+    edges: [...currentEdges, ...newEdges, ...ghostEdges],
+  };
+};

From 6b267907d4c8aafabe7aebd213d262f24b282d4a Mon Sep 17 00:00:00 2001
From: 1AhmedYasser <26207361+1AhmedYasser@users.noreply.github.com>
Date: Wed, 20 May 2026 01:44:40 +0300
Subject: [PATCH 08/18] fix(963): fix format

---
 GUI/src/components/Flow/Controls/ImportExportControls.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/GUI/src/components/Flow/Controls/ImportExportControls.tsx b/GUI/src/components/Flow/Controls/ImportExportControls.tsx
index 9beaae6d9..fe64d248d 100644
--- a/GUI/src/components/Flow/Controls/ImportExportControls.tsx
+++ b/GUI/src/components/Flow/Controls/ImportExportControls.tsx
@@ -191,9 +191,7 @@ const ImportExportControls: FC = () => {
             <Button appearance="primary" onClick={handleConfirmImport}>
               {t('global.proceed')}
             </Button>
-            <Button onClick={handleImportFlowOnly}>
-              {t('serviceFlow.popup.importFlowOnly')}
-            </Button>
+            <Button onClick={handleImportFlowOnly}>{t('serviceFlow.popup.importFlowOnly')}</Button>
             <Button appearance="secondary" onClick={closeImportModal}>
               {t('global.cancel')}
             </Button>

From b4ab0759f46225a634328ee93e81755397b69dc8 Mon Sep 17 00:00:00 2001
From: 1AhmedYasser <26207361+1AhmedYasser@users.noreply.github.com>
Date: Wed, 20 May 2026 10:17:16 +0300
Subject: [PATCH 09/18] fix(963): Addressed comments

---
 GUI/src/types/service-flow.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/GUI/src/types/service-flow.ts b/GUI/src/types/service-flow.ts
index cd8235735..2ac709238 100644
--- a/GUI/src/types/service-flow.ts
+++ b/GUI/src/types/service-flow.ts
@@ -15,16 +15,16 @@ const startNodeId = generateUniqueId();
 const ghostNodeId = generateUniqueId();
 
 export interface ServiceExportSettings {
-  title?: string;
-  description?: string;
-  examples?: string[];
-  keywords?: string[];
+  readonly title?: string;
+  readonly description?: string;
+  readonly examples?: string[];
+  readonly keywords?: string[];
 }
 
 export interface FlowData {
   nodes: Node<NodeDataProps>[];
   edges: Edge[];
-  settings?: ServiceExportSettings;
+  readonly settings?: ServiceExportSettings;
 }
 
 export type NodeDataProps = {

From 8feccfed28259ae2fe22e18b07609ced73fa34e1 Mon Sep 17 00:00:00 2001
From: 1AhmedYasser <26207361+1AhmedYasser@users.noreply.github.com>
Date: Wed, 20 May 2026 13:22:19 +0300
Subject: [PATCH 10/18] chore(987): Modified translations and dark mode node
 selections

---
 .../components/FlowElementsPopup/index.tsx    |  2 +-
 GUI/src/components/Toast/Toast.scss           |  2 +-
 GUI/src/i18n/en/common.json                   | 12 ++---
 GUI/src/i18n/et/common.json                   | 12 ++---
 GUI/src/pages/ServiceFlowPage.scss            | 48 ++++++++++++++-----
 5 files changed, 49 insertions(+), 27 deletions(-)

diff --git a/GUI/src/components/FlowElementsPopup/index.tsx b/GUI/src/components/FlowElementsPopup/index.tsx
index 2c98dbcbe..6ccfba1d5 100644
--- a/GUI/src/components/FlowElementsPopup/index.tsx
+++ b/GUI/src/components/FlowElementsPopup/index.tsx
@@ -450,7 +450,7 @@ const FlowElementsPopup: React.FC = () => {
             <Tabs.Trigger className="vertical-tabs__trigger" value={t('serviceFlow.tabs.setup')}>
               {t('serviceFlow.tabs.setup')}
             </Tabs.Trigger>
-            {!isReadonly && (
+            {!isReadonly && (stepType === StepType.Textfield || stepType === StepType.OpenWebpage) && (
               <Tabs.Trigger className="vertical-tabs__trigger" value={t('serviceFlow.tabs.test')}>
                 {t('serviceFlow.tabs.test')}
               </Tabs.Trigger>
diff --git a/GUI/src/components/Toast/Toast.scss b/GUI/src/components/Toast/Toast.scss
index f39d9ac75..c168a7b1d 100644
--- a/GUI/src/components/Toast/Toast.scss
+++ b/GUI/src/components/Toast/Toast.scss
@@ -80,7 +80,7 @@
     color: var(--dark-text-secondary);
   }
 
-  &__list {
+  &__list:not(:empty) {
     background-color: var(--dark-bg-extra-light);
   }
 
diff --git a/GUI/src/i18n/en/common.json b/GUI/src/i18n/en/common.json
index 406b9d6cd..a176f74a6 100644
--- a/GUI/src/i18n/en/common.json
+++ b/GUI/src/i18n/en/common.json
@@ -151,13 +151,13 @@
     "edit": "Edit",
     "delete": "Delete",
     "cancel": "Cancel",
-    "importMany": "Import many",
+    "importMany": "Import",
     "import": {
       "importSuccess": "{{count}} service{{lengthCheck}} imported successfully",
       "importFailure": "Could not import the following files (Wrong format or corrupted): {{files}}",
       "failedToImport": "Failed to import services"
     },
-    "exportMany": "Export many",
+    "exportMany": "Export",
     "exportAll": "Export All",
     "export": "Export",
     "exportAllConfirmation": "Are you sure you want to export all services?",
@@ -247,7 +247,7 @@
     "examples": {
       "title": "Examples",
       "placeholder": "Add examples of what the user could ask to start the service",
-      "tooltip": "Enter sample user questions that trigger this service (e.g., ‘When is Midsummer festival?’)"
+      "tooltip": "Enter sample user questions that trigger this service (e.g., ‘When is Midsummer festival?’), It is recommended to include at least 5 examples."
     },
     "keywords": {
       "title": "Keywords",
@@ -336,7 +336,7 @@
     "chooseMemorySlots": "Choose memory slots"
   },
   "serviceFlow": {
-    "serviceConfiguration": "Service Configuration",
+    "serviceConfiguration": "Settings",
     "element": {
       "taraAuthentication": "Tara authorization",
       "textfield": "Send message to client",
@@ -394,7 +394,7 @@
       "or": "OR",
       "not": "NOT",
       "addRule": "+ Rule",
-      "addElement": "+ Element",
+      "addElement": "+ New variable",
       "addGroup": "+ Group",
       "remove": "Remove",
       "signType": "Sign Type",
@@ -408,7 +408,7 @@
       "confirmImport": "The current service will be rewritten!"
     },
     "previousVariables": {
-      "assignElements": "Assign Elements",
+      "assignElements": "Assigned Variables",
       "dateAndTime": {
         "title": "Date and time",
         "base": "Base",
diff --git a/GUI/src/i18n/et/common.json b/GUI/src/i18n/et/common.json
index 8f39f1da2..d030a230f 100644
--- a/GUI/src/i18n/et/common.json
+++ b/GUI/src/i18n/et/common.json
@@ -151,13 +151,13 @@
     "edit": "Muuda",
     "delete": "Kustuta",
     "cancel": "Tühista",
-    "importMany": "Impordi mitu",
+    "importMany": "Impordi",
     "import": {
       "importSuccess": "{{count}} teenus{{lengthCheck}} edukalt imporditud",
       "importFailure": "Järgmisi faile ei õnnestunud importida (vale vorming või rikutud): {{files}}",
       "failedToImport": "Teenuste importimine ebaõnnestus"
     },
-    "exportMany": "Ekspordi mitu",
+    "exportMany": "Ekspordi",
     "exportAll": "Ekspordi kõik",
     "export": "Ekspordi",
     "exportAllConfirmation": "Kas olete kindel, et soovite eksportida kõik teenused?",
@@ -244,7 +244,7 @@
     "examples": {
       "title": "Näidisküsimused",
       "placeholder": "Lisa näiteid, mida kasutaja võiks küsida, et teenus käivituks",
-      "tooltip": "Sisesta näidisküsimused, mille kaudu teenus käivitub (nt. ‘Millal on Jaanipäev?’)"
+      "tooltip": "Sisesta näidisküsimused, mille kaudu teenus käivitub (nt. ‘Millal on Jaanipäev?’), Soovituslik on lisada vähemalt 5 näidet."
     },
     "keywords": {
       "title": "Märksõnad",
@@ -336,7 +336,7 @@
     "chooseMemorySlots": "Vali mälukohad"
   },
   "serviceFlow": {
-    "serviceConfiguration": "Teenuse seaded",
+    "serviceConfiguration": "Seaded",
     "element": {
       "taraAuthentication": "TARA autentimine",
       "textfield": "Sõnum kliendile",
@@ -394,7 +394,7 @@
       "or": "VÕI",
       "not": "MITTE",
       "addRule": "+ Reegel",
-      "addElement": "+ Element",
+      "addElement": "+ Uus väärtus",
       "addGroup": "+ Grupp",
       "remove": "Eemalda",
       "signType": "Märgi tüüp",
@@ -408,7 +408,7 @@
       "confirmImport": "Teenus kirjutatakse üle!"
     },
     "previousVariables": {
-      "assignElements": "Määra elemendid",
+      "assignElements": "Määratud Väärtused",
       "noName": "<Nimeta>",
       "environmentVariables": {
         "title": "Keskkonnamuutujad"
diff --git a/GUI/src/pages/ServiceFlowPage.scss b/GUI/src/pages/ServiceFlowPage.scss
index cdf1d9c1c..8ba0e8b25 100644
--- a/GUI/src/pages/ServiceFlowPage.scss
+++ b/GUI/src/pages/ServiceFlowPage.scss
@@ -77,22 +77,28 @@
     }
 
     &.selected {
-      border: dashed 1px get-color(black-coral-1);
+      border: dashed 2px get-color(black-coral-5);
+      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
 
       &.end {
-        border: 1px solid get-color(jasper-15);
+        border: 2px solid get-color(jasper-15);
+        box-shadow: 0 0 0 3px rgba(get-color(jasper-10), 0.25);
       }
       &.step {
-        border: 1px solid get-color(sapphire-blue-7);
+        border: 2px solid get-color(sapphire-blue-7);
+        box-shadow: 0 0 0 3px rgba(get-color(sapphire-blue-7), 0.2);
       }
       &.rule {
-        border: 1px solid get-color(black-coral-8);
+        border: 2px solid get-color(black-coral-8);
+        box-shadow: 0 0 0 3px rgba(get-color(black-coral-8), 0.2);
       }
       &.finishing-step {
-        border: 1px solid get-color(jasper-8);
+        border: 2px solid get-color(jasper-8);
+        box-shadow: 0 0 0 3px rgba(get-color(jasper-8), 0.2);
       }
       &.dynamic-choices {
-        border: 1px solid get-color(purple-8);
+        border: 2px solid get-color(purple-8);
+        box-shadow: 0 0 0 3px rgba(get-color(purple-8), 0.2);
       }
     }
 
@@ -213,12 +219,6 @@
   &__node {
     color: var(--dark-text-secondary);
 
-    &.selected {
-      &.step {
-        border: 1px solid get-color(sapphire-blue-2);
-      }
-    }
-
     &.start,
     &.end {
       color: get-color(white);
@@ -262,7 +262,29 @@
     }
 
     &.selected {
-      border: dashed 1px get-color(black-coral-10);
+      border: dashed 2px get-color(black-coral-8);
+      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
+
+      &.end {
+        border: 2px solid get-color(jasper-11);
+        box-shadow: 0 0 0 3px rgba(200, 60, 60, 0.25);
+      }
+      &.step {
+        border: 2px solid get-color(sapphire-blue-2);
+        box-shadow: 0 0 0 3px rgba(80, 140, 220, 0.25);
+      }
+      &.rule {
+        border: 2px solid get-color(black-coral-8);
+        box-shadow: 0 0 0 3px rgba(150, 150, 160, 0.25);
+      }
+      &.finishing-step {
+        border: 2px solid get-color(jasper-11);
+        box-shadow: 0 0 0 3px rgba(200, 60, 60, 0.25);
+      }
+      &.dynamic-choices {
+        border: 2px solid get-color(purple-11);
+        box-shadow: 0 0 0 3px rgba(140, 80, 200, 0.25);
+      }
     }
   }
 

From cd1ff0f37180875a0e4c080515645dae142bfbf1 Mon Sep 17 00:00:00 2001
From: 1AhmedYasser <26207361+1AhmedYasser@users.noreply.github.com>
Date: Wed, 20 May 2026 13:37:15 +0300
Subject: [PATCH 11/18] fix(987): Fixed Date & time / Separator dropdown going
 out of bounds

---
 GUI/src/components/Collapsible/Collapsible.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/GUI/src/components/Collapsible/Collapsible.scss b/GUI/src/components/Collapsible/Collapsible.scss
index cbff36533..2e47cec93 100644
--- a/GUI/src/components/Collapsible/Collapsible.scss
+++ b/GUI/src/components/Collapsible/Collapsible.scss
@@ -39,6 +39,10 @@
     background-color: get-color(white);
     border-radius: 0 0 4px 4px;
     overflow: hidden;
+
+    &[data-state='open'] {
+      overflow: visible;
+    }
   }
 }
 

From a84d34a8deb993a0cc654505659b0d44dc88fdad Mon Sep 17 00:00:00 2001
From: 1AhmedYasser <26207361+1AhmedYasser@users.noreply.github.com>
Date: Wed, 20 May 2026 13:47:49 +0300
Subject: [PATCH 12/18] fix(987): Chat widget dark mode text color

---
 GUI/src/components/chat/chat.module.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/GUI/src/components/chat/chat.module.scss b/GUI/src/components/chat/chat.module.scss
index b7fc359ce..bfe842a8a 100644
--- a/GUI/src/components/chat/chat.module.scss
+++ b/GUI/src/components/chat/chat.module.scss
@@ -381,6 +381,7 @@
   &.client {
     .content {
       background-color: #764ca0;
+      color: white;
     }
   }
 
@@ -388,7 +389,7 @@
     .main {
       .content {
         background-color: get-color(sapphire-blue-12);
-        color: var(--dark-bg-extra-light);
+        color: white;
 
         a {
           color: #a8d4ff;
@@ -404,18 +405,17 @@
 }
 
 [data-theme='dark'] .system {
+  color: white;
+
   &.success {
-    color: get-color(sea-green-11);
     background: get-color(sea-green-6);
   }
 
-  &.error {
-    color: get-color(jasper-11);
+  &.error { 
     background: get-color(jasper-6);
   }
 
   &.info {
-    color: get-color(sapphire-blue-11);
     background: get-color(sapphire-blue-6);
   }
 

From 697cf07349abd853b3e15094bbb63207e740a150 Mon Sep 17 00:00:00 2001
From: 1AhmedYasser <26207361+1AhmedYasser@users.noreply.github.com>
Date: Wed, 20 May 2026 13:53:29 +0300
Subject: [PATCH 13/18] fix(987): Remove test tab from nodes

---
 GUI/src/components/FlowElementsPopup/index.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/GUI/src/components/FlowElementsPopup/index.tsx b/GUI/src/components/FlowElementsPopup/index.tsx
index 6ccfba1d5..7b64f69e4 100644
--- a/GUI/src/components/FlowElementsPopup/index.tsx
+++ b/GUI/src/components/FlowElementsPopup/index.tsx
@@ -450,11 +450,6 @@ const FlowElementsPopup: React.FC = () => {
             <Tabs.Trigger className="vertical-tabs__trigger" value={t('serviceFlow.tabs.setup')}>
               {t('serviceFlow.tabs.setup')}
             </Tabs.Trigger>
-            {!isReadonly && (stepType === StepType.Textfield || stepType === StepType.OpenWebpage) && (
-              <Tabs.Trigger className="vertical-tabs__trigger" value={t('serviceFlow.tabs.test')}>
-                {t('serviceFlow.tabs.test')}
-              </Tabs.Trigger>
-            )}
           </Tabs.List>
           <Tabs.Content value={t('serviceFlow.tabs.setup')} className="vertical-tabs__body">
             {stepType === StepType.Textfield && (

From 0a92a89291f989c5d2ca60e8129abef92c975014 Mon Sep 17 00:00:00 2001
From: 1AhmedYasser <26207361+1AhmedYasser@users.noreply.github.com>
Date: Wed, 20 May 2026 14:04:21 +0300
Subject: [PATCH 14/18] chore(987): Modified translations

---
 GUI/src/i18n/en/common.json | 2 +-
 GUI/src/i18n/et/common.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/GUI/src/i18n/en/common.json b/GUI/src/i18n/en/common.json
index a176f74a6..5f29867e7 100644
--- a/GUI/src/i18n/en/common.json
+++ b/GUI/src/i18n/en/common.json
@@ -247,7 +247,7 @@
     "examples": {
       "title": "Examples",
       "placeholder": "Add examples of what the user could ask to start the service",
-      "tooltip": "Enter sample user questions that trigger this service (e.g., ‘When is Midsummer festival?’), It is recommended to include at least 5 examples."
+      "tooltip": "Enter sample user questions that trigger this service (e.g. ‘When is Midsummer festival?’). It is recommended to include at least 5 examples"
     },
     "keywords": {
       "title": "Keywords",
diff --git a/GUI/src/i18n/et/common.json b/GUI/src/i18n/et/common.json
index d030a230f..240270766 100644
--- a/GUI/src/i18n/et/common.json
+++ b/GUI/src/i18n/et/common.json
@@ -244,7 +244,7 @@
     "examples": {
       "title": "Näidisküsimused",
       "placeholder": "Lisa näiteid, mida kasutaja võiks küsida, et teenus käivituks",
-      "tooltip": "Sisesta näidisküsimused, mille kaudu teenus käivitub (nt. ‘Millal on Jaanipäev?’), Soovituslik on lisada vähemalt 5 näidet."
+      "tooltip": "Sisesta näidisküsimused, mille kaudu teenus käivitub (nt. ‘Millal on Jaanipäev?’). Soovituslik on lisada vähemalt 5 näidet."
     },
     "keywords": {
       "title": "Märksõnad",

From 6c5fefffb29179a169c3872732035c922fe14ad5 Mon Sep 17 00:00:00 2001
From: 1AhmedYasser <26207361+1AhmedYasser@users.noreply.github.com>
Date: Wed, 20 May 2026 14:09:35 +0300
Subject: [PATCH 15/18] chore(987): make edge selection more visible

---
 GUI/src/pages/ServiceFlowPage.scss | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/GUI/src/pages/ServiceFlowPage.scss b/GUI/src/pages/ServiceFlowPage.scss
index 8ba0e8b25..8b85694fd 100644
--- a/GUI/src/pages/ServiceFlowPage.scss
+++ b/GUI/src/pages/ServiceFlowPage.scss
@@ -190,6 +190,19 @@
     stroke: get-color(black-coral-10);
     stroke-width: 1.5px;
   }
+
+}
+
+[data-theme='light'] .react-flow {
+  &__edge {
+    &.selected {
+      .react-flow__edge-path {
+        stroke: get-color(sapphire-blue-9);
+        stroke-width: 2.5px;
+        filter: drop-shadow(0 0 4px rgba(23, 105, 171, 0.2));
+      }
+    }
+  }
 }
 
 .edge-button {
@@ -289,9 +302,19 @@
   }
 
   &__edge-path {
-    stroke: get-color(black-coral-10);
+    stroke: get-color(black-coral-6);
     stroke-width: 1.5px;
   }
+
+  &__edge {
+    &.selected {
+      .react-flow__edge-path {
+        stroke: get-color(sapphire-blue-4);
+        stroke-width: 2.5px;
+        filter: drop-shadow(0 0 5px rgba(139, 180, 213, 0.2));
+      }
+    }
+  }
 }
 
 [data-theme='dark'] .edge-button {

From df7e1838999aa7db926f8f8ed08e49bb0b400430 Mon Sep 17 00:00:00 2001
From: 1AhmedYasser <26207361+1AhmedYasser@users.noreply.github.com>
Date: Wed, 20 May 2026 14:13:13 +0300
Subject: [PATCH 16/18] chore(987): Removed chat content height

---
 GUI/src/components/chat/chat.module.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/GUI/src/components/chat/chat.module.scss b/GUI/src/components/chat/chat.module.scss
index bfe842a8a..8321933aa 100644
--- a/GUI/src/components/chat/chat.module.scss
+++ b/GUI/src/components/chat/chat.module.scss
@@ -79,7 +79,6 @@
   overflow-y: auto;
   overflow-x: hidden;
   margin-bottom: auto;
-  height: 20em;
 }
 
 .message {

From 7732a9eef4b9ffddfb355c74774c47f1f0a28b95 Mon Sep 17 00:00:00 2001
From: 1AhmedYasser <26207361+1AhmedYasser@users.noreply.github.com>
Date: Wed, 20 May 2026 14:16:49 +0300
Subject: [PATCH 17/18] chore(987): Aligned examples and keywords value fields
 spacing

---
 GUI/src/components/DynamicList/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/GUI/src/components/DynamicList/index.tsx b/GUI/src/components/DynamicList/index.tsx
index 1813ef57e..f10a16150 100644
--- a/GUI/src/components/DynamicList/index.tsx
+++ b/GUI/src/components/DynamicList/index.tsx
@@ -15,7 +15,7 @@ type DynamicListProps = {
   tooltipText?: string;
 };
 
-const DynamicList: FC<DynamicListProps> = ({ label, labelWidth = 120, value, onChange, placeholder, tooltipText }) => {
+const DynamicList: FC<DynamicListProps> = ({ label, labelWidth = 170, value, onChange, placeholder, tooltipText }) => {
   const { t } = useTranslation();
   const items = value?.length > 0 ? value : [''];
 

From 99c214001407fe545391247d4d7e0333030c4168 Mon Sep 17 00:00:00 2001
From: 1AhmedYasser <26207361+1AhmedYasser@users.noreply.github.com>
Date: Wed, 20 May 2026 14:17:45 +0300
Subject: [PATCH 18/18] chore(987): Fixed format

---
 GUI/src/components/chat/chat.module.scss | 2 +-
 GUI/src/pages/ServiceFlowPage.scss       | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/GUI/src/components/chat/chat.module.scss b/GUI/src/components/chat/chat.module.scss
index 8321933aa..fb0c137e7 100644
--- a/GUI/src/components/chat/chat.module.scss
+++ b/GUI/src/components/chat/chat.module.scss
@@ -410,7 +410,7 @@
     background: get-color(sea-green-6);
   }
 
-  &.error { 
+  &.error {
     background: get-color(jasper-6);
   }
 
diff --git a/GUI/src/pages/ServiceFlowPage.scss b/GUI/src/pages/ServiceFlowPage.scss
index 8b85694fd..5a7821063 100644
--- a/GUI/src/pages/ServiceFlowPage.scss
+++ b/GUI/src/pages/ServiceFlowPage.scss
@@ -190,7 +190,6 @@
     stroke: get-color(black-coral-10);
     stroke-width: 1.5px;
   }
-
 }
 
 [data-theme='light'] .react-flow {