Skip to content

Commit 84a58b4

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

16 files changed

+2169
-175
lines changed

‎package-lock.json

+1,983-113
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+15-12
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

+1-7
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

+3-1
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

-15
This file was deleted.

‎src/app/chat/chat-dialog/chat-dialog.component.html

+24-18
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

+31-5
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

+4-2
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

+3-1
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
}

‎src/app/chat/markdown.service.spec.ts

+15
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+
});

‎src/app/chat/markdown.service.ts

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Injectable } from '@angular/core';
2+
import * as marked from 'marked';
3+
4+
@Injectable()
5+
export class MarkdownService {
6+
7+
renderer: any;
8+
9+
constructor() {
10+
11+
this.renderer = new marked.Renderer();
12+
this.renderer.link = function(href, title, text) {
13+
var external, newWindow, out;
14+
external = /^https?:\/\/.+$/.test(href);
15+
newWindow = external || title === 'newWindow';
16+
out = "<a href=\"" + href + "\"";
17+
if (newWindow) {
18+
out += ' target="_blank"';
19+
}
20+
if (title && title !== 'newWindow') {
21+
out += " title=\"" + title + "\"";
22+
}
23+
return out += ">" + text + "</a>";
24+
};
25+
26+
marked.setOptions({
27+
renderer: this.renderer,
28+
gfm: true
29+
});
30+
}
31+
32+
33+
// convert markdown string to html
34+
markdownToHtml(md: string) {
35+
console.log(md);
36+
return marked(md);
37+
}
38+
39+
}

‎src/app/shared/md-to-html.pipe.spec.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { MdToHtmlPipe } from './md-to-html.pipe';
2+
3+
describe('MdToHtmlPipe', () => {
4+
it('create an instance', () => {
5+
const pipe = new MdToHtmlPipe();
6+
expect(pipe).toBeTruthy();
7+
});
8+
});

‎src/app/shared/md-to-html.pipe.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Pipe, PipeTransform } from '@angular/core';
2+
import { MarkdownService } from '../chat/markdown.service';
3+
4+
@Pipe({
5+
name: 'mdToHtml'
6+
})
7+
export class MdToHtmlPipe implements PipeTransform {
8+
9+
constructor(private markdown: MarkdownService) {}
10+
transform(value: string): any {
11+
return this.markdown.markdownToHtml(value);
12+
}
13+
14+
}

‎src/app/shared/shared.module.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { MdToHtmlPipe } from './md-to-html.pipe';
4+
5+
@NgModule({
6+
imports: [
7+
CommonModule
8+
],
9+
declarations: [MdToHtmlPipe],
10+
exports: [MdToHtmlPipe]
11+
})
12+
export class SharedModule { }

‎src/assets/logo.png

35.2 KB
Loading

‎src/styles.scss

+17-1
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,20 @@
33

44
body {
55
font-family: 'Roboto', sans-serif;
6-
}
6+
}
7+
8+
code {
9+
color: white;
10+
background: slateblue;
11+
padding: 3px;
12+
border-radius: 5px;
13+
font-size: 0.8em;
14+
}
15+
16+
code {
17+
padding: 2px 4px;
18+
font-size: 90%;
19+
color: #c7254e;
20+
background-color: #f9f2f4;
21+
border-radius: 4px;
22+
}

0 commit comments

Comments
 (0)