code refractoring in settings page

Author: alfredfrancis

frontend/src/app/agent/settings/settings.component.html

@@ -1,25 +1,11 @@
 <mat-card fxLayout="column">
 
     <form [formGroup]="config_form" (submit)="save_config()">
+        <h3>Tune ML</h3>
         <mat-slider min="0.1" max="1.0" step="0.05" formControlName="confidence_threshold" (change)="threshold_value_changed()"></mat-slider>
         Intent Detection threshold = <b>{{config_form.value.confidence_threshold | percent}}</b>
         <br>
-      </form>
-
-    <br>
-    <div fxLayout="row" fxLayoutAlign="space-between center" >
-        <div class="import-group" fxLayout="row" fxLayoutAlign=" center">
-            <div fxFlex>
-                <input type="file"
-                      id="file"
-                      (change)="handleFileInput($event.target.files)">
-            </div>
-            <div fxLayoutAlign="end" >  <button mat-raised-button (click)="uploadFileToActivity()" [disabled]="!fileToUpload">Import stories</button></div>  
-          </div>
-          <button mat-raised-button (click)="export()" color="primary">Export stories</button>
-    </div>
-
-  
+      </form>  
     <div class="code-snippet">
             <h3>Chat Widget</h3>
             <p>Copy and paste the below snippet into your HTML code.</p>
@@ -32,4 +18,18 @@ <h3>Chat Widget</h3>
             </p>
 
     </div>
+
+    <h3>Import/Export Intents</h3>
+    <div fxLayout="row" fxLayoutAlign="space-between center" >
+
+        <div class="import-group" fxLayout="row" fxLayoutAlign=" center">
+            <div fxFlex>
+                <input type="file"
+                      id="file"
+                      (change)="handleFileInput($event.target.files)">
+            </div>
+            <div fxLayoutAlign="end" >  <button mat-raised-button (click)="uploadFileToActivity()" [disabled]="!fileToUpload">Import Intents</button></div>  
+          </div>
+          <button mat-raised-button (click)="export()" color="primary">Export Intents</button>
+    </div>
 </mat-card>