Skip to content

Commit f17f8d9

Browse files
alfredfrancisalfredfrancis
committed
added style for training page
1 parent 1971a9a commit f17f8d9

12 files changed

+237
-144
lines changed

‎frontend/src/app/agent/agent.module.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {MatIconModule,MatCardModule,MatInputModule,
1414
MatOptionModule,MatSelectModule,MatCheckboxModule,MatButtonModule} from '@angular/material';
1515
import {MatGridListModule} from '@angular/material/grid-list';
1616
import {MatDividerModule} from '@angular/material/divider';
17+
import {MatExpansionModule} from '@angular/material/expansion';
1718
/* Material UI imports ends here */
1819

1920

@@ -28,6 +29,8 @@ import { ChatComponent } from './chat/chat.component'
2829
import { IntentComponent } from './intent/intent.component';
2930
import { TrainComponent } from './train/train.component';
3031

32+
import { AutofocusDirective } from '../directives/autofocus.directive';
33+
3134
@NgModule({
3235
imports: [
3336
CommonModule,
@@ -46,10 +49,11 @@ import { TrainComponent } from './train/train.component';
4649
MatCheckboxModule,
4750
MatButtonModule,
4851
MatGridListModule,
49-
MatDividerModule
52+
MatDividerModule,
53+
MatExpansionModule
5054

5155
],
52-
declarations: [IntentsComponent, IntentComponent, TrainComponent, SettingsComponent, ChatComponent],
56+
declarations: [IntentsComponent, IntentComponent, TrainComponent, SettingsComponent, ChatComponent,AutofocusDirective],
5357
providers:[IntentService,CoreService,IntentResolverService,TrainingService,ChatService]
5458
})
5559
export class AgentModule { }

‎frontend/src/app/agent/chat/chat.component.html

+11-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!-- https://tburleson-layouts-demos.firebaseapp.com/#/docs -->
22
<div fxLayout="row" fxFill>
3-
<mat-card fxFlex="60" >
3+
<mat-card fxFlex="90" fxLayout="column" >
4+
<div fxFlex="90" class="chat-messages">
45
<div *ngFor="let chat of chats">
56

67
<div fxLayout="row" fxLayoutAlign="end center" *ngIf="chat.owner=='user'">
@@ -24,17 +25,22 @@ <h4 class="textleft fullwidth" [innerHTML]="chat.speechResponse"></h4>
2425

2526
<!-- <mat-divider></mat-divider> -->
2627
</div>
28+
</div>
2729

28-
<form [formGroup]="chatForm" *ngIf="chatForm" (submit)="send()" fxLayout="row">
29-
<mat-input-container fxFlex="80" >
30+
<form [formGroup]="chatForm" *ngIf="chatForm" (submit)="send()" fxLayout="row" fxFlex="10" >
31+
<mat-input-container fxFlex="90" >
3032
<input type="text" matInput formControlName="input" placeholder="Type your message here" autocomplete=off>
3133
</mat-input-container>
32-
<button mat-button fxFlex="20" >send</button>
34+
35+
<button mat-icon-button fxFlex="10" >
36+
<mat-icon aria-label="Send">send</mat-icon>
37+
</button>
38+
3339
</form>
3440

3541
</mat-card>
3642

37-
<mat-card fxFlex="40">
43+
<mat-card fxFlex="40" class="json-response">
3844
<h3>POST /api/v1</h3>
3945
<br>
4046
<pre>

‎frontend/src/app/agent/chat/chat.component.scss

+6
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,10 @@
1616
mat-card{
1717
margin: 10px;
1818
}
19+
.chat-messages{
20+
overflow-y: scroll;
21+
}
1922

23+
.json-response{
24+
background-color:#efefef;
25+
}

‎frontend/src/app/agent/intent/intent.component.html

+75-74
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,98 @@
11
<mat-card>
2-
<h2>{{message}}</h2>
3-
4-
<form [formGroup]="storyForm" *ngIf="storyForm" (submit)="save()" class="row" style=" width: 100%;">
5-
<mat-form-field class="full-width">
6-
<textarea matInput formControlName="storyName" placeholder="Story name"></textarea>
7-
</mat-form-field>
8-
<br>
9-
<mat-form-field class="full-width">
10-
<textarea matInput formControlName="intentName" placeholder="Intent key" ></textarea>
11-
</mat-form-field>
12-
13-
<h2 >Parameters
14-
<button mat-mini-fab (click)="addParameter()" color="primary">
15-
<mat-icon aria-label="New Parameter" >add</mat-icon>
16-
</button>
17-
</h2>
18-
<section class="parameters" formArrayName="parameters">
19-
<div *ngFor="let paremeter of storyForm.controls.parameters.controls; let i=index;" class="parameter">
20-
21-
<div [formGroup]="paremeter" fxLayout="row" fxLayoutGap="10px" >
22-
<mat-form-field fxFlex="30">
23-
<input matInput formControlName="name" placeholder="Parameter name">
24-
</mat-form-field>
2+
<h2>{{message}}</h2>
253

26-
<mat-form-field class="col-md-4" fxFlex="10">
27-
<mat-select formControlName="type" placeholder="Parameter type">
28-
<mat-option *ngFor="let story of storyTypesArray" [value]="story">
29-
{{ storyTypes[story] }}
30-
</mat-option>
31-
</mat-select>
32-
</mat-form-field>
33-
<mat-checkbox formControlName="required" fxFlex="10">Required</mat-checkbox>
34-
<mat-form-field *ngIf="paremeter.controls.required.value" fxFlex="45">
35-
<textarea matInput formControlName="prompt" placeholder="Message to prompt when require"></textarea>
36-
</mat-form-field>
4+
<form [formGroup]="storyForm" *ngIf="storyForm" (submit)="save()" class="row" style=" width: 100%;">
5+
<mat-form-field class="full-width">
6+
<textarea matInput formControlName="storyName" placeholder="Story name"></textarea>
7+
</mat-form-field>
8+
<br>
9+
<mat-form-field class="full-width">
10+
<textarea matInput formControlName="intentName" placeholder="Intent key"></textarea>
11+
</mat-form-field>
3712

38-
<button mat-icon-button (click)="deleteParameter(i)" >
13+
<h2>Parameters
14+
<button mat-mini-fab (click)="addParameter()" color="primary">
15+
<mat-icon aria-label="New Parameter">add</mat-icon>
16+
</button>
17+
</h2>
18+
<section class="parameters" formArrayName="parameters">
19+
<div *ngFor="let paremeter of storyForm.controls.parameters.controls; let i=index;" class="parameter">
20+
21+
<div [formGroup]="paremeter" fxLayout="row" fxLayoutGap="10px">
22+
<mat-form-field fxFlex="30">
23+
<input matInput formControlName="name" placeholder="Parameter name">
24+
</mat-form-field>
25+
26+
<mat-form-field class="col-md-4" fxFlex="10">
27+
<mat-select formControlName="type" placeholder="Parameter type">
28+
<mat-option *ngFor="let story of storyTypesArray" [value]="story">
29+
{{ storyTypes[story] }}
30+
</mat-option>
31+
</mat-select>
32+
</mat-form-field>
33+
<mat-checkbox formControlName="required" fxFlex="10">Required</mat-checkbox>
34+
<mat-form-field *ngIf="paremeter.controls.required.value" fxFlex="45">
35+
<textarea matInput formControlName="prompt" placeholder="Message to prompt when require"></textarea>
36+
</mat-form-field>
37+
38+
<button mat-icon-button (click)="deleteParameter(i)">
3939
<mat-icon aria-label="Delete this intent">delete</mat-icon>
4040
</button>
41+
</div>
4142
</div>
42-
</div>
4343

4444

45-
</section>
45+
</section>
4646

4747

48-
<h3 >
49-
<mat-checkbox formControlName="apiTrigger">API trigger</mat-checkbox>
50-
</h3>
51-
<section [formGroup]="storyForm.controls.apiDetails" *ngIf="apiTrigger()" fxLayout="column" fxLayoutGap="10px" >
48+
<h3>
49+
<mat-checkbox formControlName="apiTrigger">API trigger</mat-checkbox>
50+
</h3>
51+
<section [formGroup]="storyForm.controls.apiDetails" *ngIf="apiTrigger()" fxLayout="column" fxLayoutGap="10px">
5252

5353

5454

55-
<div fxLayout="row" fxLayoutGap="20px" >
56-
<mat-form-field fxFlex="90">
57-
<input matInput formControlName="url" placeholder="API url">
58-
</mat-form-field>
59-
60-
<mat-form-field fxFlex="10">
61-
<mat-select formControlName="requestType" placeholder="API method">
62-
<mat-option value="GET">GET</mat-option>
63-
<mat-option value="POST">POST</mat-option>
64-
<mat-option value="PUT">PUT</mat-option>
65-
<mat-option value="DELETE">DELETE</mat-option>
66-
</mat-select>
67-
</mat-form-field>
68-
</div>
55+
<div fxLayout="row" fxLayoutGap="20px">
56+
<mat-form-field fxFlex="90">
57+
<input matInput formControlName="url" placeholder="API url">
58+
</mat-form-field>
6959

70-
<mat-checkbox formControlName="isJson">JSON payload</mat-checkbox>
71-
<div *ngIf="storyForm.value.apiDetails.isJson">
72-
Extracted parameters can be used to build your json. Example, <pre> {{ '\{
60+
<mat-form-field fxFlex="10">
61+
<mat-select formControlName="requestType" placeholder="API method">
62+
<mat-option value="GET">GET</mat-option>
63+
<mat-option value="POST">POST</mat-option>
64+
<mat-option value="PUT">PUT</mat-option>
65+
<mat-option value="DELETE">DELETE</mat-option>
66+
</mat-select>
67+
</mat-form-field>
68+
</div>
69+
70+
<mat-checkbox formControlName="isJson">JSON payload</mat-checkbox>
71+
<div *ngIf="storyForm.value.apiDetails.isJson">
72+
Extracted parameters can be used to build your json. Example,
73+
<pre> {{ '\{
7374
"name": \{\{ parameters\[\"name\"\] \}\}
7475
\}' }}</pre>
7576
</div>
76-
<mat-form-field class="full-width" *ngIf="storyForm.value.apiDetails.isJson">
77-
<textarea matInput formControlName="jsonData" placeholder="JsonData" rows="8" placeholder="JSON payload"></textarea>
77+
<mat-form-field class="full-width" *ngIf="storyForm.value.apiDetails.isJson">
78+
<textarea matInput formControlName="jsonData" placeholder="JsonData" rows="8" placeholder="JSON payload"></textarea>
79+
</mat-form-field>
80+
81+
</section>
82+
<br>
83+
<mat-form-field class="full-width">
84+
<textarea matInput formControlName="speechResponse" placeholder="Speech Response" rows="5"></textarea>
7885
</mat-form-field>
7986

80-
</section>
81-
<br>
82-
<mat-form-field class="full-width">
83-
<textarea matInput formControlName="speechResponse" placeholder="Speech Response" rows="5" ></textarea>
84-
</mat-form-field>
87+
<p>
88+
Extracted parameters and api call response can be accessed from speech respone using "parameters" and "result" objects respectively.
89+
<a href="http://jinja.pocoo.org/docs/2.10/templates/" target="_blank">Jinja</a> Templating enabled.
90+
</p>
8591

86-
<p>
87-
Extracted parameters and api call response can be accessed from speech respone using "parameters" and "result" objects respectively.
88-
<a href="http://jinja.pocoo.org/docs/2.10/templates/" target="_blank">Jinja</a> Templating enabled.
89-
</p>
9092

91-
9293

93-
<mat-card-actions>
94-
<button mat-raised-button color="primary">Save</button>
95-
</mat-card-actions>
96-
</form>
94+
<mat-card-actions>
95+
<button mat-raised-button color="primary">Save</button>
96+
</mat-card-actions>
97+
</form>
9798
</mat-card>

‎frontend/src/app/agent/intent/intent.component.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ mat-card{
88
margin-bottom: 10px;
99
}
1010
pre{
11-
background-color:lightgray;
11+
background-color:#efefef;
1212
padding: 5px;
1313
}
1414
}

‎frontend/src/app/agent/intents/intents.component.html

+22-23
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,30 @@
11
<div class="header" fxLayout="row" fxLayoutAlign=" center">
2-
<h1 fxFlex>List of Intents </h1>
3-
<button mat-raised-button color="primary" (click)="trainModels()">Build Agent</button>
2+
<h1 fxFlex>List of Intents
3+
<button mat-mini-fab (click)="add()">
4+
<mat-icon aria-label="Example icon-button with a heart icon">add</mat-icon>
5+
</button>
6+
</h1>
7+
8+
<button mat-raised-button color="primary" (click)="trainModels()">Build Agent</button>
49
</div>
510

611

712

8-
<mat-card >
9-
<div *ngFor="let story of stories" fxLayout="row" fxLayoutAlign=" center" class="intent-container">
10-
<div fxFlex="60" >
11-
{{story.storyName}}
12-
</div>
13-
<div fxFlex="40" >
14-
<button mat-button (click)="train(story)" color="primary" >Train</button>
15-
<button mat-icon-button (click)="edit(story)" color="accent" >
16-
<mat-icon aria-label="Delete this intent">edit</mat-icon>
17-
</button>
18-
<button mat-icon-button (click)="delete(story)" color="warn" >
19-
<mat-icon aria-label="Delete this intent">delete</mat-icon>
20-
</button>
21-
</div>
13+
<mat-card>
14+
<div *ngFor="let story of stories" fxLayout="row" fxLayoutAlign=" center" class="intent-container">
15+
<div fxFlex="60">
16+
{{story.storyName}}
2217
</div>
23-
<br>
24-
<div fxLayoutAlign="end" >
25-
<button mat-mini-fab (click)="add()">
26-
<mat-icon aria-label="Example icon-button with a heart icon">add</mat-icon>
27-
</button>
18+
<div fxFlex="40">
19+
<button mat-button (click)="train(story)" color="primary">Train</button>
20+
<button mat-icon-button (click)="edit(story)" color="accent">
21+
<mat-icon aria-label="Delete this intent">edit</mat-icon>
22+
</button>
23+
<button mat-icon-button (click)="delete(story)" color="warn">
24+
<mat-icon aria-label="Delete this intent">delete</mat-icon>
25+
</button>
2826
</div>
27+
</div>
28+
<br>
2929

30-
31-
</mat-card>
30+
</mat-card>

0 commit comments

Comments
 (0)