Skip to content

Commit 84a58b4

Browse files
committed
update: added markdown support, upgraded to v5
1 parent 435fd80 commit 84a58b4

16 files changed

+2169
-175
lines changed

package-lock.json

Lines changed: 1983 additions & 113 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,28 +12,31 @@
1212
},
1313
"private": true,
1414
"dependencies": {
15-
"@angular/animations": "^4.4.6",
15+
"@angular/animations": "^5.0.2",
1616
"@angular/cdk": "^2.0.0-beta.12",
17-
"@angular/common": "^4.4.6",
18-
"@angular/compiler": "^4.4.6",
19-
"@angular/core": "^4.4.6",
20-
"@angular/forms": "^4.4.6",
21-
"@angular/http": "^4.4.6",
17+
"@angular/common": "^5.0.2",
18+
"@angular/compiler": "^5.0.2",
19+
"@angular/core": "^5.0.2",
20+
"@angular/forms": "^5.0.2",
21+
"@angular/http": "^5.0.2",
2222
"@angular/material": "^2.0.0-beta.12",
23-
"@angular/platform-browser": "^4.4.6",
24-
"@angular/platform-browser-dynamic": "^4.4.6",
25-
"@angular/router": "^4.4.6",
23+
"@angular/platform-browser": "^5.0.2",
24+
"@angular/platform-browser-dynamic": "^5.0.2",
25+
"@angular/platform-server": "^5.0.2",
26+
"@angular/router": "^5.0.2",
2627
"core-js": "^2.4.1",
27-
"rxjs": "^5.4.2",
28+
"marked": "^0.3.6",
29+
"rxjs": "^5.5.2",
2830
"zone.js": "^0.8.14"
2931
},
3032
"devDependencies": {
3133
"@angular/cli": "1.4.9",
32-
"@angular/compiler-cli": "^4.4.6",
34+
"@angular/compiler-cli": "^5.0.2",
3335
"@angular/language-service": "^4.4.6",
3436
"@types/jasmine": "~2.5.53",
3537
"@types/jasminewd2": "~2.0.2",
3638
"@types/node": "~6.0.60",
39+
"angular-cli": "^1.0.0-beta.28.3",
3740
"api-ai-javascript": "^2.0.0-beta.21",
3841
"codelyzer": "~3.2.0",
3942
"jasmine-core": "~2.6.2",
@@ -47,6 +50,6 @@
4750
"protractor": "~5.1.2",
4851
"ts-node": "~3.2.0",
4952
"tslint": "~5.7.0",
50-
"typescript": "~2.3.3"
53+
"typescript": "^2.6.1"
5154
}
5255
}

src/app/app.component.html

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1 @@
1-
<div class="row">
2-
<div class="column"></div>
3-
<div class="column column-50">
4-
<chat-dialog></chat-dialog>
5-
</div>
6-
<div class="column"></div>
7-
</div>
1+
<chat-dialog></chat-dialog>

src/app/app.module.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { AppComponent } from './app.component';
66

77
import { MaterialModule } from './core/material.module';
88
import { ChatModule } from './chat/chat.module';
9+
import { SharedModule } from './shared/shared.module';
910

1011
@NgModule({
1112
declarations: [
@@ -15,7 +16,8 @@ import { ChatModule } from './chat/chat.module';
1516
BrowserModule,
1617
BrowserAnimationsModule,
1718
MaterialModule,
18-
ChatModule
19+
ChatModule,
20+
SharedModule
1921
],
2022
providers: [],
2123
bootstrap: [AppComponent]

src/app/chat.service.spec.ts

Lines changed: 0 additions & 15 deletions
This file was deleted.
Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,31 @@
1-
<mat-toolbar color="primary" class="toolbar mat-elevation-z3">
2-
<mat-icon>chat</mat-icon> &nbsp; Angular Chatbot
3-
</mat-toolbar>
1+
<div class="wrapper">
2+
<div class="dialog">
43

5-
<div class="messages">
4+
<mat-toolbar color="primary" class="toolbar mat-elevation-z3">
5+
<img src="assets/logo.png" width="50px"> Angular Chatbot
6+
</mat-toolbar>
67

7-
<ng-container *ngFor="let message of messages | async">
8+
<div class="messages">
89

9-
<div class="message-row" [ngClass]="{ 'from': message.sentBy === 'bot',
10-
'to': message.sentBy === 'user' }">
11-
<div class="message">
12-
{{ message.content }}
13-
</div>
14-
</div>
10+
<ng-container *ngFor="let message of messages | async">
11+
12+
<div class="message-row" [ngClass]="{ 'from': message.sentBy === 'bot',
13+
'to': message.sentBy === 'user' }">
14+
<div class="message">
15+
<span [innerHtml]="message.content | mdToHtml"></span>
16+
</div>
17+
</div>
1518

16-
</ng-container>
19+
</ng-container>
1720

18-
</div>
21+
</div>
22+
23+
<div class="send-message" (click)="messageInput.click()">
24+
<mat-form-field floatPlaceholder="never">
25+
<input matInput #messageInput [(ngModel)]="formValue" (keyup.enter)="sendMessage()"
26+
placeholder="Ask me about Angular..." autofocus autocomplete="off">
27+
</mat-form-field>
28+
</div>
1929

20-
<div class="send-message" (click)="messageInput.click()">
21-
<mat-form-field floatPlaceholder="never">
22-
<input matInput #messageInput [(ngModel)]="formValue" (keyup.enter)="sendMessage()"
23-
placeholder="Type a message..." autofocus autocomplete="off">
24-
</mat-form-field>
30+
</div>
2531
</div>

src/app/chat/chat-dialog/chat-dialog.component.scss

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,24 @@
1+
.wrapper {
2+
margin: 2vh 15vw;
3+
border: 1px solid #ccc;
4+
box-shadow: 10px 10px 40px -10px rgba(0, 0, 0, 0.50);
5+
}
6+
7+
8+
19
.toolbar {
2-
position: fixed;
10+
position: relative;
311
top: 0;
412
z-index: 10;
513
font-weight: 300;
14+
background: #2b303e;
615
}
716

817
.messages {
918
overflow: auto;
10-
margin: 64px 0;
19+
padding: 64px 0;
20+
height: 60vh;
21+
overflow-y: scroll;
1122
}
1223

1324
.message-row {
@@ -18,7 +29,7 @@
1829
display: inline-block;
1930
border-radius: 6px;
2031
padding: 16px;
21-
font-weight: 500;
32+
font-weight: 300;
2233
}
2334
.message-row.to {
2435
text-align: right;
@@ -41,14 +52,29 @@
4152

4253
.send-message {
4354
height: 64px;
44-
width: 100%;
4555
border-top: 1px solid #ccc;
46-
position: fixed;
56+
position: relative;
4757
bottom: 0;
4858
padding: 0 16px;
4959
background-color: #fafafa;
5060
}
5161

5262
::ng-deep .send-message .mat-input-underline {
5363
display: none!important;
64+
}
65+
66+
::-webkit-scrollbar-track
67+
{
68+
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
69+
background-color: #F5F5F5;
70+
}
71+
::-webkit-scrollbar
72+
{
73+
width: 6px;
74+
background-color: #F5F5F5;
75+
}
76+
77+
::-webkit-scrollbar-thumb
78+
{
79+
background-color: #000000;
5480
}

src/app/chat/chat.module.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,21 @@ import { ChatDialogComponent } from './chat-dialog/chat-dialog.component';
55
import { ChatService } from './chat.service';
66

77
import { FormsModule } from '@angular/forms';
8-
98
import { MaterialModule } from '../core/material.module';
9+
import { SharedModule } from '../shared/shared.module';
10+
import { MarkdownService } from './markdown.service';
1011

1112
@NgModule({
1213
imports: [
1314
CommonModule,
1415
FormsModule,
1516
MaterialModule,
17+
SharedModule
1618
],
1719
declarations: [
1820
ChatDialogComponent
1921
],
2022
exports: [ ChatDialogComponent ],
21-
providers: [ChatService]
23+
providers: [ChatService, MarkdownService]
2224
})
2325
export class ChatModule { }

src/app/chat/chat.service.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ import { ApiAiClient } from 'api-ai-javascript';
66
import { Observable } from 'rxjs/Observable';
77
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
88

9+
910
export class Message {
11+
myRenderer;
12+
1013
constructor(public content: string, public sentBy: string) {}
1114
}
1215

@@ -40,5 +43,4 @@ export class ChatService {
4043
this.conversation.next([msg]);
4144
}
4245

43-
4446
}
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { TestBed, inject } from '@angular/core/testing';
2+
3+
import { MarkdownService } from './markdown.service';
4+
5+
describe('MarkdownService', () => {
6+
beforeEach(() => {
7+
TestBed.configureTestingModule({
8+
providers: [MarkdownService]
9+
});
10+
});
11+
12+
it('should be created', inject([MarkdownService], (service: MarkdownService) => {
13+
expect(service).toBeTruthy();
14+
}));
15+
});

0 commit comments

Comments
 (0)