diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.html b/src/app/components/workflow-diagram/workflow-diagram.component.html
index 307119e..4375602 100644
--- a/src/app/components/workflow-diagram/workflow-diagram.component.html
+++ b/src/app/components/workflow-diagram/workflow-diagram.component.html
@@ -1,460 +1,527 @@
 <div class="main-content-wrapper">
   <!-- <button (click)="exportDiagram()">Export</button> -->
-   <!-- <div style="padding-top: 90px;"><button type="button" ejs-button style="width: 15%;height: 15%;" (click)="exportDiagram()" class="e-btn e-success">EXPORT</button></div> -->
-   <div style="padding-top: 90px;">
+  <!-- <div style="padding-top: 90px;"><button type="button" ejs-button style="width: 15%;height: 15%;" (click)="exportDiagram()" class="e-btn e-success">EXPORT</button></div> -->
+  <div style="padding-top: 90px;">
     <div class="diagram-serialization" style="width: 100%;height: 10%">
       <ejs-toolbar width="100%" (clicked)="onClicked($event)">
-          <e-items>
-              <e-item text='Save' tooltipText='Save' prefixIcon='e-ddb-icons e-save'></e-item>
-              <e-item type='Separator'></e-item>
-               <!-- <e-item text='Load' tooltipText='Load' prefixIcon='e-ddb-icons e-open'>
+        <e-items>
+          <e-item text='Save' tooltipText='Save' prefixIcon='e-ddb-icons e-save'></e-item>
+          <e-item type='Separator'></e-item>
+          <e-item text='Load' tooltipText='Load' prefixIcon='e-ddb-icons e-open'>
                 <div> <input id="fileupload" type="file" /></div>
-              </e-item> -->
-          </e-items>
+              </e-item>
+        </e-items>
       </ejs-toolbar>
       <div> <input id="fileupload" type="file" /></div>
     </div>
-   </div>
-   
-  
-  <ejs-diagram class="diagram-container" #diagram  id="diagram"
-  [width]="'100%'"
-  [height]="649"
-  [nodes]="nodes"
-  [connectors]="connectors"
-  [layout]="layout"
-  [getNodeDefaults]="getNodeDefaults"
-  [getConnectorDefaults]="getConnectorDefaults"
-  (created)="onDiagramCreated()"
-  [selectedItems]="selectedItems" (onUserHandleMouseDown)="onUserHandleMouseDown($event)" (click)="onNodeClick($event)"
-  [snapSettings]="snapSettings"
-  >
-    <ng-template #userHandleTemplate >
+  </div>
+
+
+  <ejs-diagram class="diagram-container" #diagram 
+    id="diagram" [width]="'100%'" [height]="649" [nodes]="nodes"
+    [connectors]="connectors" [layout]="layout" [getNodeDefaults]="getNodeDefaults"
+    [getConnectorDefaults]="getConnectorDefaults" (created)="onDiagramCreated()" [selectedItems]="selectedItems"
+    (onUserHandleMouseDown)="onUserHandleMouseDown($event)" (click)="onNodeClick($event)" [snapSettings]="snapSettings">
+
+    <ng-template #userHandleTemplate>
       <div class="dropDown-container">
-        <button #dropdownbutton id="dropdownbutton" ejs-dropdownbutton  target="#listview" (open)="onOpenDropDownButton($event)" iconCss='e-icons e-plus' cssClass='e-caret-hide' (beforeClose)="onBeforeCloseDropDownButton($event)" (beforeOpen)="onBeforeOpenDropDownButton()"></button>
+        <button #dropdownbutton id="dropdownbutton" ejs-dropdownbutton target="#listview"
+          (open)="onOpenDropDownButton($event)" iconCss='e-icons e-plus' cssClass='e-caret-hide'
+          (beforeClose)="onBeforeCloseDropDownButton($event)" (beforeOpen)="onBeforeOpenDropDownButton()"></button>
       </div>
     </ng-template>
-    <ng-template #nodeTemplate let-data >
-      <ng-container *ngIf="data.addInfo.chatWorkflowEditorTypeId == 1">
-        <div>
-          <label style="padding: 5px;">{{ data.addInfo.fieldDetails.label }}</label>
-        </div>
-        <div>
-          <button type="button" ejs-button style="width: 85%;" class="e-btn e-success">Yes</button>
-        </div>
-        <div>
-          <button type="button" ejs-button style="width: 85%;" class="e-btn e-danger">No</button>
-        </div>
-      </ng-container>
-      <ng-container *ngIf="data.addInfo.chatWorkflowEditorTypeId == 2">
-        <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
-        <div *ngFor="let option of data.addInfo.fieldOptionDetails; let i = index" class="button-item">
-          <button ejs-button cssClass="e-primary" style="width: 85%;">{{option.label}}</button>
-        </div>
-      </ng-container>
-      <ng-container *ngIf="data.addInfo.chatWorkflowEditorTypeId == 3">
-        <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
-        <ejs-dropdownlist [dataSource]="data.addInfo.fieldOptionDetails" [fields]="ddlFields" [placeholder]="data.addInfo.fieldDetails.placeholder" cssClass="e-primary" width="85%">
-        </ejs-dropdownlist>
-      </ng-container>
-      <ng-container *ngIf="data.addInfo.chatWorkflowEditorTypeId == 4">
-        <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
-        <ejs-multiselect [dataSource]="data.addInfo.fieldOptionDetails" [fields]="ddlFields" [placeholder]="data.addInfo.fieldDetails.placeholder" [maximumSelectionLength]="data.addInfo.fieldDetails.fieldValidation.max" cssClass="e-primary" width="85%">
-        </ejs-multiselect>
-      </ng-container>
-      <ng-container *ngIf="data.addInfo.chatWorkflowEditorTypeId == 5">
-        <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
-        <ejs-listview id='sample-list' [dataSource]='data.addInfo.fieldOptionDetails' [fields]='ddlFields'></ejs-listview>
-      </ng-container>
-      <ng-container *ngIf="data.addInfo.chatWorkflowEditorTypeId == 9">
-        <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
-        <ejs-datepicker [placeholder]="data.addInfo.fieldDetails.placeholder" [readonly]="true"></ejs-datepicker>
-      </ng-container>
-      <ng-container *ngIf="data.addInfo.chatWorkflowEditorTypeId == 10">
-        <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
-        <ejs-datetimepicker [placeholder]="data.addInfo.fieldDetails.placeholder" [readonly]="true" ></ejs-datetimepicker>
-      </ng-container>
-      <ng-container *ngIf="data.addInfo.chatWorkflowEditorTypeId == 11">
-        <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
-        <ejs-numerictextbox format='n0' [min]="'data.addInfo.fieldDetails.fieldValidation.min'" [max]="'data.addInfo.fieldDetails.fieldValidation.max'" [placeholder]="data.addInfo.fieldDetails.placeholder" readonly="true" floatLabelType= 'Auto'></ejs-numerictextbox>
-      </ng-container>
-      <ng-container *ngIf="data.addInfo.chatWorkflowEditorTypeId == 12">
-        <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
-        <ejs-numerictextbox [min]="'data.addInfo.fieldDetails.fieldValidation.min'" [max]="'data.addInfo.fieldDetails.fieldValidation.max'" [placeholder]="data.addInfo.fieldDetails.placeholder" readonly="true" floatLabelType= 'Auto'></ejs-numerictextbox>
-      </ng-container>
-      <ng-container *ngIf="data.addInfo.chatWorkflowEditorTypeId == 7">
-        <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
-        <ejs-textbox [placeholder]="data.addInfo.fieldDetails.placeholder" readonly="true"></ejs-textbox>
-      </ng-container>
-      <ng-container *ngIf="data.addInfo.chatWorkflowEditorTypeId == 8">
-        <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
-        <ejs-textarea [placeholder]="data.addInfo.fieldDetails.placeholder" readonly="true" [maxLength]="data.addInfo.fieldDetails.fieldValidation.max"></ejs-textarea>
-      </ng-container>
-      <ng-container *ngIf="data.addInfo.chatWorkflowEditorTypeId == 13">
-        <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
-        <ejs-textbox [placeholder]="data.addInfo.fieldDetails.placeholder" readonly="true" ></ejs-textbox>
-      </ng-container>
-      <ng-container *ngIf="data.addInfo.chatWorkflowBlockId == 6">
-        <div><label style="padding: 5px;">{{data.addInfo.messageDetails.text}}</label></div>
-      </ng-container>
+
+    <ng-template #nodeTemplate let-data>
+      @switch (data.addInfo.chatWorkflowBlockId){
+        @case(chatWorkflowBlockTypeEnum.GetPickerInput){
+          @switch (data.addInfo.chatWorkflowEditorTypeId){
+            @case (chatWorkflowEditorTypeEnum.Boolean){
+              <ng-container>
+                <div><label style="padding: 5px;">{{ data.addInfo.fieldDetails.label }}</label></div>
+                <div><button type="button" ejs-button style="width: 85%;" class="e-btn e-success">Yes</button></div>
+                <div><button type="button" ejs-button style="width: 85%;" class="e-btn e-danger">No</button></div>
+              </ng-container>
+            }
+            @case (chatWorkflowEditorTypeEnum.Buttons){
+              <ng-container>
+                <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
+                <div *ngFor="let option of data.addInfo.fieldOptionDetails; let i = index" class="button-item">
+                  <button ejs-button cssClass="e-primary" style="width: 85%;">{{option.label}}</button>
+                </div>
+              </ng-container>
+            }
+            @case (chatWorkflowEditorTypeEnum.DropDown){
+              <ng-container>
+                <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
+                <ejs-dropdownlist [dataSource]="data.addInfo.fieldOptionDetails" [fields]="ddlFields"
+                  [placeholder]="data.addInfo.fieldDetails.placeholder" cssClass="e-primary" width="85%">
+                </ejs-dropdownlist>
+              </ng-container>
+            }
+            @case(chatWorkflowEditorTypeEnum.MultiSelect){
+              <ng-container >
+                <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
+                <ejs-multiselect [dataSource]="data.addInfo.fieldOptionDetails" [fields]="ddlFields"
+                  [placeholder]="data.addInfo.fieldDetails.placeholder"
+                  [maximumSelectionLength]="data.addInfo.fieldDetails.fieldValidation.max" cssClass="e-primary" width="85%">
+                </ejs-multiselect>
+              </ng-container>
+            }
+            @case(chatWorkflowEditorTypeEnum.List){
+              <ng-container>
+                <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
+                <ejs-listview id='sample-list' [dataSource]='data.addInfo.fieldOptionDetails'
+                  [fields]='ddlFields'></ejs-listview>
+              </ng-container>
+            }
+          }
+        }
+        @case(chatWorkflowBlockTypeEnum.GetTextInput){
+          @switch (data.addInfo.chatWorkflowEditorTypeId){
+            @case(chatWorkflowEditorTypeEnum.Text){
+              <ng-container>
+                <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
+                <ejs-textbox [placeholder]="data.addInfo.fieldDetails.placeholder" readonly="true"></ejs-textbox>
+              </ng-container>
+            }
+            @case(chatWorkflowEditorTypeEnum.TextArea){
+              <ng-container>
+                <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
+                <ejs-textarea [placeholder]="data.addInfo.fieldDetails.placeholder" readonly="true"
+                  [maxLength]="data.addInfo.fieldDetails.fieldValidation.max"></ejs-textarea>
+              </ng-container>
+            }
+            @case(chatWorkflowEditorTypeEnum.Date){
+              <ng-container>
+                <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
+                <ejs-datepicker [placeholder]="data.addInfo.fieldDetails.placeholder" [readonly]="true"></ejs-datepicker>
+              </ng-container>
+            }
+            @case(chatWorkflowEditorTypeEnum.DateTime){
+              <ng-container>
+                <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
+                <ejs-datetimepicker [placeholder]="data.addInfo.fieldDetails.placeholder"
+                  [readonly]="true"></ejs-datetimepicker>
+              </ng-container>
+            }
+            @case(chatWorkflowEditorTypeEnum.Number){
+              <ng-container>
+                <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
+                <ejs-numerictextbox format='n0' [min]="'data.addInfo.fieldDetails.fieldValidation.min'"
+                  [max]="'data.addInfo.fieldDetails.fieldValidation.max'" [placeholder]="data.addInfo.fieldDetails.placeholder"
+                  readonly="true" floatLabelType='Auto'></ejs-numerictextbox>
+              </ng-container>
+            }
+            @case(chatWorkflowEditorTypeEnum.Decimal){
+              <ng-container>
+                <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
+                <ejs-numerictextbox [min]="'data.addInfo.fieldDetails.fieldValidation.min'"
+                  [max]="'data.addInfo.fieldDetails.fieldValidation.max'" [placeholder]="data.addInfo.fieldDetails.placeholder"
+                  readonly="true" floatLabelType='Auto'></ejs-numerictextbox>
+              </ng-container>
+            }
+            @case(chatWorkflowEditorTypeEnum.Regex){
+              <ng-container>
+                <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
+                <ejs-textbox [placeholder]="data.addInfo.fieldDetails.placeholder" readonly="true"></ejs-textbox>
+              </ng-container>
+            }
+          }
+        }
+      }
     </ng-template>
   </ejs-diagram>
 
-  <ejs-listview #listview id='listview' [dataSource]='listdata' [fields]='fields' [showHeader]='true' [headerTitle]='headertitle' [animation]='animation' (select)="onSelectListView($event)"></ejs-listview>
+  <ejs-listview #listview id='listview' [dataSource]='listdata' cssClass='bc-block-option' [fields]='fields' [showHeader]='true'
+    [headerTitle]='headertitle' [animation]='animation' (select)="onSelectListView($event)"></ejs-listview>
 </div>
 
-<ejs-sidebar id="default-sidebar" #sidebar [type]='type' (created)="onSideBarCreated($event)" style="visibility: hidden" [width]="width" [showBackdrop]="true" target=".main-content-wrapper">
+<ejs-sidebar id="default-sidebar" #sidebar [type]='type' (created)="onSideBarCreated($event)"
+  [width]="width" [showBackdrop]="true" target=".main-content-wrapper">
   <div class="title sidebar-header">{{sidebarHeader}}</div>
   <div class="content">
-      <!-- Place sidebar content here -->
-       <form (ngSubmit)="onFormSubmit()"  class="full-size-form">
-        <div class="form-header">
-          {{sidebarHeader}}
+    <!-- Place sidebar content here -->
+    <form (ngSubmit)="onFormSubmit()" class="full-size-form">
+      <div class="form-header">
+        {{sidebarHeader}}
+      </div>
+      <!-- @switch (data.addInfo.chatWorkflowEditorTypeId){
+        @case (chatWorkflowEditorTypeEnum.Boolean){
+        }
+      } -->
+      <!-- Boolean NodeType -->
+      <div *ngIf="nodeType === 'Boolean'">
+        <input type="text" [(ngModel)]="sideBarLabel" name="question" placeholder="Enter question..."
+          class="description-box" required />
+        <div>
+          <div><button type="button" ejs-button class="e-btn e-success">Yes</button></div>
+          <div><button type="button" ejs-button class="e-btn e-danger">No</button></div>
         </div>
-          <!-- Boolean NodeType -->
-          <div class="content boolean-controls" *ngIf="nodeType === 'Boolean'">
-            <input type="text" [(ngModel)]="sideBarLabel" name="question" placeholder="Enter question..." class="description-box" required/>
-            <div>
-              <div><button type="button"  ejs-button class="e-btn e-success">Yes</button></div>
-              <div><button type="button" ejs-button class="e-btn e-danger">No</button></div>
-            </div>
-          </div>
+      </div>
 
-          <!-- Buttons NodeType -->
-          <div *ngIf="nodeType === 'Buttons'">
-            <input type="text" [(ngModel)]="sideBarLabel" name="question" placeholder="Enter your question..." class="description-box" required/>
-
-            <div class="button-list">
-              <div *ngFor="let button of buttons; let i = index" class="button-item">
-                <button ejs-button cssClass="e-primary" style="width: 75%;">{{button.label}}</button>
-                <button ejs-button type="button" cssClass="e-danger remove-icon" (click)="removeButton(i)">✖</button>
-              </div>
-            </div>
-
-            <div class="add-button-form">
-              <div>
-                <input #buttonLabel type="text" placeholder="Button Label" class="button-input" />
-              </div>
-              <div>
-                <input #buttonValue type="text" placeholder="Button Value" class="button-input" />
-              </div>
-              <div>
-                <button type="button" style="width: 100%;" (click)="addButton(buttonLabel.value, buttonValue.value, null, buttonLabel, buttonValue, null)" class="e-btn">Add Option</button>
-              </div>
-            </div>
-          </div>
+      <!-- Buttons NodeType -->
+      <div *ngIf="nodeType === 'Buttons'">
+        <input type="text" [(ngModel)]="sideBarLabel" name="question" placeholder="Enter your question..."
+          class="description-box" required />
 
-          <!-- Single DropDown NodeType -->
-          <div *ngIf="nodeType === 'Single'">
-            <label>
-              Label:
-              <input type="text" [(ngModel)]="sideBarLabel" name="singleLabel" placeholder="Enter label..." class="description-box" required/>
-            </label>
-            <label>
-              Description:
-              <input type="text" [(ngModel)]="sideBarDescription" name="singleDescription" placeholder="Enter description..." class="description-box"/>
-            </label>
-          
-            <label>
-              Placeholder:
-              <input type="text" [(ngModel)]="sideBarPlaceholder" name="singlePlaceholder" placeholder="Enter placeholder..." class="description-box"/>
-            </label>
-          
-            <div class="button-list">
-              <div *ngFor="let button of buttons; let i = index" class="button-item">
-                <button ejs-button cssClass="e-primary" style="width: 75%;">{{button.label}}</button>
-                <button ejs-button type="button" cssClass="e-danger remove-icon" (click)="removeButton(i)">✖</button>
-              </div>
-            </div>
-            <div class="add-button-form">
-              <div>
-                <input #optionLabel type="text" placeholder="Option Label" class="button-input" />
-              </div>
-              <div>
-                <input #optionValue type="text" placeholder="Option Value" class="button-input" />
-              </div>
-              <div>
-                <button type="button" style="width: 100%;" (click)="addButton(optionLabel.value, optionValue.value, null, optionLabel, optionValue, null)" class="e-btn">Add Option</button>
-              </div>
-            </div>
+        <div class="button-list">
+          <div *ngFor="let button of buttons; let i = index" class="button-item">
+            <button ejs-button cssClass="e-primary" style="width: 75%;">{{button.label}}</button>
+            <button ejs-button type="button" cssClass="e-danger remove-icon" (click)="removeButton(i)">✖</button>
           </div>
+        </div>
 
-          <!-- MultiSelect DropDown NodeType -->
-          <div *ngIf="nodeType === 'Multi'">
-            <label>
-              Label:
-              <input type="text" [(ngModel)]="sideBarLabel" name="multiLabel" placeholder="Enter label..." class="description-box" required/>
-            </label>
-            <label>
-              Description:
-              <input type="text" [(ngModel)]="sideBarDescription" name="multiDescription" placeholder="Enter description..." class="description-box"/>
-            </label>
-          
-            <label>
-              Placeholder:
-              <input type="text" [(ngModel)]="sideBarPlaceholder" name="multiPlaceholder" placeholder="Enter placeholder..." class="description-box"/>
-            </label>
-          
-            <div class="button-list">
-              <div *ngFor="let button of buttons; let i = index" class="button-item">
-                <button ejs-button cssClass="e-primary" style="width: 75%;">{{button.label}}</button>
-                <button ejs-button type="button" cssClass="e-danger remove-icon" (click)="removeButton(i)">✖</button>
-              </div>
-            </div>
-            <div class="add-button-form">
-              <div>
-                <input #optionLabel type="text" placeholder="Option Label" class="button-input" />
-              </div>
-              <div>
-                <input #optionValue type="text" placeholder="Option Value" class="button-input" />
-              </div>
-              <div>
-                <button type="button" style="width: 100%;" (click)="addButton(optionLabel.value, optionValue.value, null, optionLabel, optionValue, null)" class="e-btn">Add Option</button>
-              </div>
-            </div>
-            <label>
-              Minimum Value:
-              <input type="number" [(ngModel)]="fieldOptionMinValue" name="fieldOptionMinValue" placeholder="Enter Minimum value here" class="description-box"/>
-            </label>
-            <label>
-              Maximum Value:
-              <input type="number" [(ngModel)]="fieldOptionMaxValue" name="fieldOptionMaxValue" placeholder="Enter Maximum value here" class="description-box"/>
-            </label>
+        <div class="add-button-form">
+          <div>
+            <input #buttonLabel type="text" placeholder="Button Label" class="button-input" />
           </div>
-
-          <!-- List -->
-          <div *ngIf="nodeType === 'List'">
-            <label>
-              Label:
-              <input type="text" [(ngModel)]="sideBarLabel" name="listLabel" placeholder="Enter label..." class="description-box" required/>
-            </label>
-            <label>
-              Description:
-              <input type="text" [(ngModel)]="sideBarDescription" name="listDescription" placeholder="Enter description..." class="description-box"/>
-            </label>
-          
-            <label>
-              Placeholder:
-              <input type="text" [(ngModel)]="sideBarPlaceholder" name="listPlaceholder" placeholder="Enter placeholder..." class="description-box"/>
-            </label>
-          
-            <div class="button-list">
-              <div *ngFor="let button of buttons; let i = index" class="button-item">
-                <button ejs-button cssClass="e-primary" style="width: 75%;">{{button.label}}</button>
-                <button ejs-button type="button" cssClass="e-danger remove-icon" (click)="removeButton(i)">✖</button>
-              </div>
-            </div>
-            <div class="add-button-form">
-              <div>
-                <input #optionLabel type="text" placeholder="Option Label" class="button-input" />
-              </div>
-              <div>
-                <input #optionValue type="text" placeholder="Option Value" class="button-input" />
-              </div>
-              <div>
-                <input #optionDescription type="text" placeholder="Option Description" class="button-input" />
-              </div>
-              <div>
-                <button type="button" style="width: 100%;" (click)="addButton(optionLabel.value, optionValue.value, optionDescription.value, optionLabel, optionValue, optionDescription)" class="e-btn">Add Option</button>
-              </div>
-            </div>
+          <div>
+            <input #buttonValue type="text" placeholder="Button Value" class="button-input" />
           </div>
-
-          <!-- Date -->
-          <div *ngIf="nodeType === 'Date'">
-            <label>
-              Label:
-              <input type="text" [(ngModel)]="sideBarLabel" name="inputDateLabel" placeholder="Enter label..." class="description-box" required/>
-            </label>
-            <label>
-              Description:
-              <input type="text" [(ngModel)]="sideBarDescription" name="inputDateDescription" placeholder="Enter description..." class="description-box"/>
-            </label>
-          
-            <label>
-              Placeholder:
-              <input type="text" [(ngModel)]="sideBarPlaceholder" name="inputDatePlaceholder" placeholder="Enter placeholder..." class="description-box"/>
-            </label>
-                      
-            <label>
-              From:
-              <ejs-datepicker [(ngModel)]="fromDate"></ejs-datepicker>
-            </label>
-            <label>
-              To:
-              <ejs-datepicker [(ngModel)]="toDate"></ejs-datepicker>
-            </label>
+          <div>
+            <button type="button" style="width: 100%;"
+              (click)="addButton(buttonLabel.value, buttonValue.value, null, buttonLabel, buttonValue, null)"
+              class="e-btn">Add Option</button>
           </div>
+        </div>
+      </div>
 
-          <!-- DateTime -->
-          <div *ngIf="nodeType === 'DateTime'">
-            <label>
-              Label:
-              <input type="text" [(ngModel)]="sideBarLabel" name="inputDateLabel" placeholder="Enter label..." class="description-box" required/>
-            </label>
-            <label>
-              Description:
-              <input type="text" [(ngModel)]="sideBarDescription" name="inputDateDescription" placeholder="Enter description..." class="description-box"/>
-            </label>
-          
-            <label>
-              Placeholder:
-              <input type="text" [(ngModel)]="sideBarPlaceholder" name="inputDatePlaceholder" placeholder="Enter placeholder..." class="description-box"/>
-            </label>
-                      
-            <label>
-              From:
-              <ejs-datetimepicker [(ngModel)]="fromDate"></ejs-datetimepicker>
-            </label>
-            <label>
-              To:
-              <ejs-datetimepicker [(ngModel)]="toDate"></ejs-datetimepicker>
-            </label>
-          </div>
+      <!-- Single DropDown NodeType -->
+      <div *ngIf="nodeType === 'Single'">
+        <label>
+          Label:
+          <input type="text" [(ngModel)]="sideBarLabel" name="singleLabel" placeholder="Enter label..."
+            class="description-box" required />
+        </label>
+        <label>
+          Description:
+          <input type="text" [(ngModel)]="sideBarDescription" name="singleDescription"
+            placeholder="Enter description..." class="description-box" />
+        </label>
 
-          <!-- Number -->
-          <div *ngIf="nodeType === 'Number'">
-            <label>
-              Label:
-              <input type="text" [(ngModel)]="sideBarLabel" name="inputNumberLabel" placeholder="Enter label..." class="description-box" required/>
-            </label>
-            <label>
-              Description:
-              <input type="text" [(ngModel)]="sideBarDescription" name="inputNumberDescription" placeholder="Enter description..." class="description-box"/>
-            </label>
-          
-            <label>
-              Placeholder:
-              <input type="text" [(ngModel)]="sideBarPlaceholder" name="inputNumberPlaceholder" placeholder="Enter placeholder..." class="description-box"/>
-            </label>
-                      
-            <label>
-              Minimum Value:
-              <input type="number" [(ngModel)]="fieldOptionMinValue" name="fieldOptionMinValue" placeholder="Enter Minimum value here" class="description-box"/>
-            </label>
-            <label>
-              Maximum Value:
-              <input type="number" [(ngModel)]="fieldOptionMaxValue" name="fieldOptionMaxValue" placeholder="Enter Maximum value here" class="description-box"/>
-            </label>
-          </div>
+        <label>
+          Placeholder:
+          <input type="text" [(ngModel)]="sideBarPlaceholder" name="singlePlaceholder"
+            placeholder="Enter placeholder..." class="description-box" />
+        </label>
 
-          <!-- Decimal -->
-          <div *ngIf="nodeType === 'Decimal'">
-            <label>
-              Label:
-              <input type="text" [(ngModel)]="sideBarLabel" name="inputDecimalLabel" placeholder="Enter label..." class="description-box" required/>
-            </label>
-            <label>
-              Description:
-              <input type="text" [(ngModel)]="sideBarDescription" name="inputDecimalDescription" placeholder="Enter description..." class="description-box"/>
-            </label>
-          
-            <label>
-              Placeholder:
-              <input type="text" [(ngModel)]="sideBarPlaceholder" name="inputDecimalPlaceholder" placeholder="Enter placeholder..." class="description-box"/>
-            </label>
-                      
-            <label>
-              Minimum Value:
-              <input type="number" [(ngModel)]="fieldOptionMinValue" name="fieldOptionMinValue" placeholder="Enter Minimum value here" class="description-box" step="0.01"/>
-            </label>
-            <label>
-              Maximum Value:
-              <input type="number" [(ngModel)]="fieldOptionMaxValue" name="fieldOptionMaxValue" placeholder="Enter Maximum value here" class="description-box" step="0.01"/>
-            </label>
+        <div class="button-list">
+          <div *ngFor="let button of buttons; let i = index" class="button-item">
+            <button ejs-button cssClass="e-primary" style="width: 75%;">{{button.label}}</button>
+            <button ejs-button type="button" cssClass="e-danger remove-icon" (click)="removeButton(i)">✖</button>
           </div>
-
-          <!-- Text -->
-          <div *ngIf="nodeType === 'Text'">
-            <label>
-              Label:
-              <input type="text" [(ngModel)]="sideBarLabel" name="inputTextLabel" placeholder="Enter label..." class="description-box" required/>
-            </label>
-            <label>
-              Description:
-              <input type="text" [(ngModel)]="sideBarDescription" name="inputTextDescription" placeholder="Enter description..." class="description-box"/>
-            </label>
-          
-            <label>
-              Placeholder:
-              <input type="text" [(ngModel)]="sideBarPlaceholder" name="inputTextPlaceholder" placeholder="Enter placeholder..." class="description-box"/>
-            </label>
-                      
-            <label>
-              Maximum Characters:
-              <input type="number" [(ngModel)]="fieldOptionMaxValue" name="fieldOptionMaxValue" placeholder="Enter Maximum value here" class="description-box" />
-            </label>
+        </div>
+        <div class="add-button-form">
+          <div>
+            <input #optionLabel type="text" placeholder="Option Label" class="button-input" />
+          </div>
+          <div>
+            <input #optionValue type="text" placeholder="Option Value" class="button-input" />
           </div>
+          <div>
+            <button type="button" style="width: 100%;"
+              (click)="addButton(optionLabel.value, optionValue.value, null, optionLabel, optionValue, null)"
+              class="e-btn">Add Option</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- MultiSelect DropDown NodeType -->
+      <div *ngIf="nodeType === 'Multi'">
+        <label>
+          Label:
+          <input type="text" [(ngModel)]="sideBarLabel" name="multiLabel" placeholder="Enter label..."
+            class="description-box" required />
+        </label>
+        <label>
+          Description:
+          <input type="text" [(ngModel)]="sideBarDescription" name="multiDescription" placeholder="Enter description..."
+            class="description-box" />
+        </label>
+
+        <label>
+          Placeholder:
+          <input type="text" [(ngModel)]="sideBarPlaceholder" name="multiPlaceholder" placeholder="Enter placeholder..."
+            class="description-box" />
+        </label>
 
-          <!-- TextArea -->
-          <div *ngIf="nodeType === 'Text Area'">
-            <label>
-              Label:
-              <input type="text" [(ngModel)]="sideBarLabel" name="inputTextAreaLabel" placeholder="Enter label..." class="description-box" required/>
-            </label>
-            <label>
-              Description:
-              <input type="text" [(ngModel)]="sideBarDescription" name="inputTextAreaDescription" placeholder="Enter description..." class="description-box"/>
-            </label>
-          
-            <label>
-              Placeholder:
-              <input type="text" [(ngModel)]="sideBarPlaceholder" name="inputTextAreaPlaceholder" placeholder="Enter placeholder..." class="description-box"/>
-            </label>
-                      
-            <label>
-              Maximum Characters:
-              <input type="number" [(ngModel)]="fieldOptionMaxValue" name="fieldOptionMaxValue" placeholder="Enter Maximum value here" class="description-box" />
-            </label>
+        <div class="button-list">
+          <div *ngFor="let button of buttons; let i = index" class="button-item">
+            <button ejs-button cssClass="e-primary" style="width: 75%;">{{button.label}}</button>
+            <button ejs-button type="button" cssClass="e-danger remove-icon" (click)="removeButton(i)">✖</button>
           </div>
-          <!-- Regex -->
-          <div *ngIf="nodeType === 'Regex'">
-            <label>
-              Label:
-              <input type="text" [(ngModel)]="sideBarLabel" name="inputRegexLabel" placeholder="Enter label..." class="description-box" required/>
-            </label>
-            <label>
-              Description:
-              <input type="text" [(ngModel)]="sideBarDescription" name="inputRegexDescription" placeholder="Enter description..." class="description-box"/>
-            </label>
-          
-            <label>
-              Placeholder:
-              <input type="text" [(ngModel)]="sideBarPlaceholder" name="inputRegexPlaceholder" placeholder="Enter placeholder..." class="description-box"/>
-            </label>
-                      
-            <label>
-              Regex:
-              <input type="text" [(ngModel)]="fieldOptionRegexValue" name="fieldOptionRegexValue" placeholder="Enter regex here" class="description-box" />
-            </label>
+        </div>
+        <div class="add-button-form">
+          <div>
+            <input #optionLabel type="text" placeholder="Option Label" class="button-input" />
+          </div>
+          <div>
+            <input #optionValue type="text" placeholder="Option Value" class="button-input" />
           </div>
+          <div>
+            <button type="button" style="width: 100%;"
+              (click)="addButton(optionLabel.value, optionValue.value, null, optionLabel, optionValue, null)"
+              class="e-btn">Add Option</button>
+          </div>
+        </div>
+        <label>
+          Minimum Value:
+          <input type="number" [(ngModel)]="fieldOptionMinValue" name="fieldOptionMinValue"
+            placeholder="Enter Minimum value here" class="description-box" />
+        </label>
+        <label>
+          Maximum Value:
+          <input type="number" [(ngModel)]="fieldOptionMaxValue" name="fieldOptionMaxValue"
+            placeholder="Enter Maximum value here" class="description-box" />
+        </label>
+      </div>
+
+      <!-- List -->
+      <div *ngIf="nodeType === 'List'">
+        <label>
+          Label:
+          <input type="text" [(ngModel)]="sideBarLabel" name="listLabel" placeholder="Enter label..."
+            class="description-box" required />
+        </label>
+        <label>
+          Description:
+          <input type="text" [(ngModel)]="sideBarDescription" name="listDescription" placeholder="Enter description..."
+            class="description-box" />
+        </label>
+
+        <label>
+          Placeholder:
+          <input type="text" [(ngModel)]="sideBarPlaceholder" name="listPlaceholder" placeholder="Enter placeholder..."
+            class="description-box" />
+        </label>
 
-          <!-- Custom Message -->
-          <div *ngIf="nodeType === 'Custom Message'">
-            <label>
-              Message:
-              <input type="text" [(ngModel)]="customMessage" name="customMessageText" placeholder="Enter Message..." class="description-box" required/>
-            </label>
-          
-            <label>
-              Text Format:
-            </label>
-            <ejs-dropdownlist #ddlTextFormat style="padding-bottom: 20px;" [dataSource]="textFormatDDLOptions" [fields]="ddlTextFormatFields" placeholder="Select" cssClass="e-primary" width="85%">
-            </ejs-dropdownlist>
-
-            <div>
-              <label style="text-align: center;"> Is Private: </label>
-              <ejs-switch [(ngModel)]="checkedIsPrivate" name="customMessageIsPrivate" id="isPrivateCustomMessage" cssClass="custom-iOS" [checked]="false" ></ejs-switch>
-            </div>
+        <div class="button-list">
+          <div *ngFor="let button of buttons; let i = index" class="button-item">
+            <button ejs-button cssClass="e-primary" style="width: 75%;">{{button.label}}</button>
+            <button ejs-button type="button" cssClass="e-danger remove-icon" (click)="removeButton(i)">✖</button>
+          </div>
+        </div>
+        <div class="add-button-form">
+          <div>
+            <input #optionLabel type="text" placeholder="Option Label" class="button-input" />
           </div>
+          <div>
+            <input #optionValue type="text" placeholder="Option Value" class="button-input" />
+          </div>
+          <div>
+            <input #optionDescription type="text" placeholder="Option Description" class="button-input" />
+          </div>
+          <div>
+            <button type="button" style="width: 100%;"
+              (click)="addButton(optionLabel.value, optionValue.value, optionDescription.value, optionLabel, optionValue, optionDescription)"
+              class="e-btn">Add Option</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Date -->
+      <div *ngIf="nodeType === 'Date'">
+        <label>
+          Label:
+          <input type="text" [(ngModel)]="sideBarLabel" name="inputDateLabel" placeholder="Enter label..."
+            class="description-box" required />
+        </label>
+        <label>
+          Description:
+          <input type="text" [(ngModel)]="sideBarDescription" name="inputDateDescription"
+            placeholder="Enter description..." class="description-box" />
+        </label>
+
+        <label>
+          Placeholder:
+          <input type="text" [(ngModel)]="sideBarPlaceholder" name="inputDatePlaceholder"
+            placeholder="Enter placeholder..." class="description-box" />
+        </label>
+
+        <label>
+          From:
+          <ejs-datepicker [(ngModel)]="fromDate"></ejs-datepicker>
+        </label>
+        <label>
+          To:
+          <ejs-datepicker [(ngModel)]="toDate"></ejs-datepicker>
+        </label>
+      </div>
+
+      <!-- DateTime -->
+      <div *ngIf="nodeType === 'DateTime'">
+        <label>
+          Label:
+          <input type="text" [(ngModel)]="sideBarLabel" name="inputDateLabel" placeholder="Enter label..."
+            class="description-box" required />
+        </label>
+        <label>
+          Description:
+          <input type="text" [(ngModel)]="sideBarDescription" name="inputDateDescription"
+            placeholder="Enter description..." class="description-box" />
+        </label>
+
+        <label>
+          Placeholder:
+          <input type="text" [(ngModel)]="sideBarPlaceholder" name="inputDatePlaceholder"
+            placeholder="Enter placeholder..." class="description-box" />
+        </label>
+
+        <label>
+          From:
+          <ejs-datetimepicker [(ngModel)]="fromDate"></ejs-datetimepicker>
+        </label>
+        <label>
+          To:
+          <ejs-datetimepicker [(ngModel)]="toDate"></ejs-datetimepicker>
+        </label>
+      </div>
 
-        </form>      
+      <!-- Number -->
+      <div *ngIf="nodeType === 'Number'">
+        <label>
+          Label:
+          <input type="text" [(ngModel)]="sideBarLabel" name="inputNumberLabel" placeholder="Enter label..."
+            class="description-box" required />
+        </label>
+        <label>
+          Description:
+          <input type="text" [(ngModel)]="sideBarDescription" name="inputNumberDescription"
+            placeholder="Enter description..." class="description-box" />
+        </label>
+
+        <label>
+          Placeholder:
+          <input type="text" [(ngModel)]="sideBarPlaceholder" name="inputNumberPlaceholder"
+            placeholder="Enter placeholder..." class="description-box" />
+        </label>
+
+        <label>
+          Minimum Value:
+          <input type="number" [(ngModel)]="fieldOptionMinValue" name="fieldOptionMinValue"
+            placeholder="Enter Minimum value here" class="description-box" />
+        </label>
+        <label>
+          Maximum Value:
+          <input type="number" [(ngModel)]="fieldOptionMaxValue" name="fieldOptionMaxValue"
+            placeholder="Enter Maximum value here" class="description-box" />
+        </label>
+      </div>
+
+      <!-- Decimal -->
+      <div *ngIf="nodeType === 'Decimal'">
+        <label>
+          Label:
+          <input type="text" [(ngModel)]="sideBarLabel" name="inputDecimalLabel" placeholder="Enter label..."
+            class="description-box" required />
+        </label>
+        <label>
+          Description:
+          <input type="text" [(ngModel)]="sideBarDescription" name="inputDecimalDescription"
+            placeholder="Enter description..." class="description-box" />
+        </label>
+
+        <label>
+          Placeholder:
+          <input type="text" [(ngModel)]="sideBarPlaceholder" name="inputDecimalPlaceholder"
+            placeholder="Enter placeholder..." class="description-box" />
+        </label>
+
+        <label>
+          Minimum Value:
+          <input type="number" [(ngModel)]="fieldOptionMinValue" name="fieldOptionMinValue"
+            placeholder="Enter Minimum value here" class="description-box" step="0.01" />
+        </label>
+        <label>
+          Maximum Value:
+          <input type="number" [(ngModel)]="fieldOptionMaxValue" name="fieldOptionMaxValue"
+            placeholder="Enter Maximum value here" class="description-box" step="0.01" />
+        </label>
+      </div>
+
+      <!-- Text -->
+      <div *ngIf="nodeType === 'Text'">
+        <label>
+          Label:
+          <input type="text" [(ngModel)]="sideBarLabel" name="inputTextLabel" placeholder="Enter label..."
+            class="description-box" required />
+        </label>
+        <label>
+          Description:
+          <input type="text" [(ngModel)]="sideBarDescription" name="inputTextDescription"
+            placeholder="Enter description..." class="description-box" />
+        </label>
+
+        <label>
+          Placeholder:
+          <input type="text" [(ngModel)]="sideBarPlaceholder" name="inputTextPlaceholder"
+            placeholder="Enter placeholder..." class="description-box" />
+        </label>
+
+        <label>
+          Maximum Characters:
+          <input type="number" [(ngModel)]="fieldOptionMaxValue" name="fieldOptionMaxValue"
+            placeholder="Enter Maximum value here" class="description-box" />
+        </label>
+      </div>
+
+      <!-- TextArea -->
+      <div *ngIf="nodeType === 'Text Area'">
+        <label>
+          Label:
+          <input type="text" [(ngModel)]="sideBarLabel" name="inputTextAreaLabel" placeholder="Enter label..."
+            class="description-box" required />
+        </label>
+        <label>
+          Description:
+          <input type="text" [(ngModel)]="sideBarDescription" name="inputTextAreaDescription"
+            placeholder="Enter description..." class="description-box" />
+        </label>
+
+        <label>
+          Placeholder:
+          <input type="text" [(ngModel)]="sideBarPlaceholder" name="inputTextAreaPlaceholder"
+            placeholder="Enter placeholder..." class="description-box" />
+        </label>
+
+        <label>
+          Maximum Characters:
+          <input type="number" [(ngModel)]="fieldOptionMaxValue" name="fieldOptionMaxValue"
+            placeholder="Enter Maximum value here" class="description-box" />
+        </label>
+      </div>
+      <!-- Regex -->
+      <div *ngIf="nodeType === 'Regex'">
+        <label>
+          Label:
+          <input type="text" [(ngModel)]="sideBarLabel" name="inputRegexLabel" placeholder="Enter label..."
+            class="description-box" required />
+        </label>
+        <label>
+          Description:
+          <input type="text" [(ngModel)]="sideBarDescription" name="inputRegexDescription"
+            placeholder="Enter description..." class="description-box" />
+        </label>
+
+        <label>
+          Placeholder:
+          <input type="text" [(ngModel)]="sideBarPlaceholder" name="inputRegexPlaceholder"
+            placeholder="Enter placeholder..." class="description-box" />
+        </label>
+
+        <label>
+          Regex:
+          <input type="text" [(ngModel)]="fieldOptionRegexValue" name="fieldOptionRegexValue"
+            placeholder="Enter regex here" class="description-box" />
+        </label>
+      </div>
+    </form>
   </div>
   <div class="center-align">
-      <button ejs-button id="close" (click)="onCloseSideBarClick()" class="e-btn close-btn">Save & Close</button>
+    <button ejs-button id="close" (click)="onCloseSideBarClick()" class="e-btn close-btn">Save & Close</button>
   </div>
 </ejs-sidebar>
 
 <!-- <div style="display: none;">
   <ejs-uploader #defaultupload id='fileupload' (success)='onUploadSuccess($event)' [asyncSettings]='asyncSettings'></ejs-uploader>
-</div> -->
+</div> -->
\ No newline at end of file
diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.ts b/src/app/components/workflow-diagram/workflow-diagram.component.ts
index 9e7093d..fe1efec 100644
--- a/src/app/components/workflow-diagram/workflow-diagram.component.ts
+++ b/src/app/components/workflow-diagram/workflow-diagram.component.ts
@@ -13,7 +13,7 @@ import workflowData from '../../data/workflow-data.json'; // Adjust the path as
 import { DropDownList, DropDownListComponent, DropDownListModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
 import { NumericTextBoxModule, TextAreaModule, TextBoxModule, UploaderModule } from '@syncfusion/ej2-angular-inputs';
 import { DatePickerModule, DateTimePickerModule } from '@syncfusion/ej2-angular-calendars';
-import { TextFormatEnum } from '../../models/enum';
+import { TextFormatEnum, ChatWorkflowEditorTypeEnum, ChatWorkflowBlockTypeEnum } from '../../models/enum';
 import { SwitchModule } from '@syncfusion/ej2-angular-buttons';
 import sampleWorkflowData from '../../data/sample-workflow-data.json'; // Adjust the path as needed
 import { AsyncSettingsModel, FileInfo, Uploader } from '@syncfusion/ej2-inputs';
@@ -66,7 +66,10 @@ export class WorkflowDiagramComponent implements AfterViewInit{
   public type: string = 'Push';
   public width: string ='280px';
   public sidebarHeader: string = '';
+  public nodeBlockType: number = 0;
+  public nodeEditType: number = 0;
   public nodeType: string = '';
+
   private nodeIdCounter: number = 0;
   private connectorIdCounter: number = 0;
   public buttons: Array<{ label: string, value: string, description:string|null }> = [];
@@ -80,6 +83,8 @@ export class WorkflowDiagramComponent implements AfterViewInit{
   public fieldOptionRegexValue: string = '';
   public fromDate: Date = new Date();
   public toDate: Date = new Date();
+  public chatWorkflowEditorTypeEnum = ChatWorkflowEditorTypeEnum; 
+  public chatWorkflowBlockTypeEnum = ChatWorkflowBlockTypeEnum;
   textFormatDDLOptions: Array<{ text: string, value: number }>;
   ddlTextFormatFields: Object = { text: 'text', value: 'value' };
   public checkedIsPrivate: boolean = false;
@@ -210,9 +215,14 @@ export class WorkflowDiagramComponent implements AfterViewInit{
 
   public onNodeClick(args: IClickEventArgs): void {
     if (args.actualObject instanceof Node) {
-      if(this.diagram.selectedItems.userHandles) {
+      const clickedNode = args.actualObject as Node;
+      let isLastNode = clickedNode.outEdges.length == 0;
+      if(isLastNode && this.diagram.selectedItems.userHandles) {
         this.diagram.selectedItems.userHandles[0].visible = true;
       }
+      else if(this.diagram.selectedItems.userHandles){
+        this.diagram.selectedItems.userHandles[0].visible = false;
+      }
       // const clickedNodeId = args.actualObject.id;
       // this.addNodeAndConnect(clickedNodeId); // Add and connect a new node
     }
@@ -682,7 +692,7 @@ export class WorkflowDiagramComponent implements AfterViewInit{
 
   onBeforeCloseDropDownButton(args: BeforeOpenCloseMenuEventArgs) {
     args.cancel = this.isParentListItem;
-    if (!this.isParentListItem) {
+    if (!(this.isParentListItem || ((args.event.target as HTMLElement).closest(".bc-block-option.e-listview")==null))) {
       this.sidebar?.show();
     }
   }
@@ -703,6 +713,7 @@ export class WorkflowDiagramComponent implements AfterViewInit{
   }
 
   onBeforeOpenDropDownButton() {
+    this.isParentListItem = false; // The value is reset here, to handle document click case of dropdown
     // Reset ListView to its initial state before opening
     if (this.listView) {
       this.listView.dataSource = this.listdata; // Reset data
diff --git a/src/app/data/sample-workflow-data.json b/src/app/data/sample-workflow-data.json
index 56d8ccb..ff47579 100644
--- a/src/app/data/sample-workflow-data.json
+++ b/src/app/data/sample-workflow-data.json
@@ -234,7 +234,7 @@
     "id": 10,
     "chatWorkflowId": 1,
     "successWorkflowId": 1,
-    "successRuleId": null,
+    "successRuleId": 11,
     "isActive": true,
     "chatWorkflowBlockId": 5,
     "chatWorkflowEditorTypeId": 8,
diff --git a/src/app/models/enum.ts b/src/app/models/enum.ts
index 9200bb3..04ebc59 100644
--- a/src/app/models/enum.ts
+++ b/src/app/models/enum.ts
@@ -22,7 +22,7 @@ export enum ChatWorkflowEditorTypeEnum
     None = 0,
     Boolean = 1,
     Buttons = 2,
-    Dropdown = 3,
+    DropDown = 3,
     MultiSelect = 4,
     List = 5,
     Card = 6,