update: added markdown support, upgraded to v5

codediodeio · codediodeio · commit 84a58b491b84 · 2017-11-17T16:40:27.000-07:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,28 +12,31 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.4.6",
+    "@angular/animations": "^5.0.2",
     "@angular/cdk": "^2.0.0-beta.12",
-    "@angular/common": "^4.4.6",
-    "@angular/compiler": "^4.4.6",
-    "@angular/core": "^4.4.6",
-    "@angular/forms": "^4.4.6",
-    "@angular/http": "^4.4.6",
+    "@angular/common": "^5.0.2",
+    "@angular/compiler": "^5.0.2",
+    "@angular/core": "^5.0.2",
+    "@angular/forms": "^5.0.2",
+    "@angular/http": "^5.0.2",
     "@angular/material": "^2.0.0-beta.12",
-    "@angular/platform-browser": "^4.4.6",
-    "@angular/platform-browser-dynamic": "^4.4.6",
-    "@angular/router": "^4.4.6",
+    "@angular/platform-browser": "^5.0.2",
+    "@angular/platform-browser-dynamic": "^5.0.2",
+    "@angular/platform-server": "^5.0.2",
+    "@angular/router": "^5.0.2",
     "core-js": "^2.4.1",
-    "rxjs": "^5.4.2",
+    "marked": "^0.3.6",
+    "rxjs": "^5.5.2",
     "zone.js": "^0.8.14"
   },
   "devDependencies": {
     "@angular/cli": "1.4.9",
-    "@angular/compiler-cli": "^4.4.6",
+    "@angular/compiler-cli": "^5.0.2",
     "@angular/language-service": "^4.4.6",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
+    "angular-cli": "^1.0.0-beta.28.3",
     "api-ai-javascript": "^2.0.0-beta.21",
     "codelyzer": "~3.2.0",
     "jasmine-core": "~2.6.2",
@@ -47,6 +50,6 @@
     "protractor": "~5.1.2",
     "ts-node": "~3.2.0",
     "tslint": "~5.7.0",
-    "typescript": "~2.3.3"
+    "typescript": "^2.6.1"
   }
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,7 +1 @@
-<div class="row">
-    <div class="column"></div>
-        <div class="column column-50">
-            <chat-dialog></chat-dialog>
-        </div>
-    <div class="column"></div>
-</div>
+<chat-dialog></chat-dialog>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -6,6 +6,7 @@ import { AppComponent } from './app.component';
 
 import { MaterialModule } from './core/material.module';
 import { ChatModule } from './chat/chat.module';
+import { SharedModule } from './shared/shared.module';
 
 @NgModule({
   declarations: [
@@ -15,7 +16,8 @@ import { ChatModule } from './chat/chat.module';
     BrowserModule,
     BrowserAnimationsModule,
     MaterialModule,
-    ChatModule
+    ChatModule,
+    SharedModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/chat.service.spec.ts b/src/app/chat.service.spec.ts
diff --git a/src/app/chat/chat-dialog/chat-dialog.component.html b/src/app/chat/chat-dialog/chat-dialog.component.html
@@ -1,25 +1,31 @@
-<mat-toolbar color="primary" class="toolbar mat-elevation-z3">
-  <mat-icon>chat</mat-icon> &nbsp; Angular Chatbot
-</mat-toolbar>
+<div class="wrapper">
+  <div class="dialog">
 
-<div class="messages">
+    <mat-toolbar color="primary" class="toolbar mat-elevation-z3">
+      <img src="assets/logo.png" width="50px"> Angular Chatbot
+    </mat-toolbar>
 
-  <ng-container *ngFor="let message of messages | async">
+    <div class="messages">
 
-    <div class="message-row" [ngClass]="{ 'from': message.sentBy === 'bot',
-                                          'to':   message.sentBy === 'user' }">
-      <div class="message">
-        {{ message.content }}
-      </div>
-    </div>
+      <ng-container *ngFor="let message of messages | async">
+
+        <div class="message-row" [ngClass]="{ 'from': message.sentBy === 'bot',
+                                              'to':   message.sentBy === 'user' }">
+          <div class="message">
+            <span [innerHtml]="message.content | mdToHtml"></span>
+          </div>
+        </div>
 
-  </ng-container>
+      </ng-container>
 
-</div>
+    </div>
+
+    <div class="send-message" (click)="messageInput.click()">
+      <mat-form-field floatPlaceholder="never">
+        <input matInput #messageInput [(ngModel)]="formValue" (keyup.enter)="sendMessage()" 
+          placeholder="Ask me about Angular..." autofocus autocomplete="off">
+      </mat-form-field>
+    </div>
 
-<div class="send-message" (click)="messageInput.click()">
-  <mat-form-field floatPlaceholder="never">
-    <input matInput #messageInput [(ngModel)]="formValue" (keyup.enter)="sendMessage()" 
-      placeholder="Type a message..." autofocus autocomplete="off">
-  </mat-form-field>
+  </div>
 </div>
diff --git a/src/app/chat/chat-dialog/chat-dialog.component.scss b/src/app/chat/chat-dialog/chat-dialog.component.scss
@@ -1,13 +1,24 @@
+.wrapper {
+    margin: 2vh 15vw;
+    border: 1px solid #ccc;
+    box-shadow: 10px 10px 40px -10px rgba(0, 0, 0, 0.50);
+}
+
+
+
 .toolbar {
-    position: fixed;
+    position: relative;
     top: 0;
     z-index: 10;
     font-weight: 300;
+    background: #2b303e;
 }
 
 .messages {
     overflow: auto;
-    margin: 64px 0;
+    padding: 64px 0;
+    height: 60vh;
+    overflow-y: scroll;
 }
 
 .message-row {
@@ -18,7 +29,7 @@
     display: inline-block;
     border-radius: 6px;
     padding: 16px;
-    font-weight: 500;
+    font-weight: 300;
 }
 .message-row.to {
     text-align: right;
@@ -41,14 +52,29 @@
 
 .send-message {
     height: 64px;
-    width: 100%;
     border-top: 1px solid #ccc;
-    position: fixed;
+    position: relative;
     bottom: 0;
     padding: 0 16px;
     background-color: #fafafa;
 }
 
 ::ng-deep .send-message .mat-input-underline {
     display: none!important;
+}
+
+::-webkit-scrollbar-track
+{
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	background-color: #F5F5F5;
+}
+::-webkit-scrollbar
+{
+	width: 6px;
+	background-color: #F5F5F5;
+}
+
+::-webkit-scrollbar-thumb
+{
+	background-color: #000000;
 }
diff --git a/src/app/chat/chat.module.ts b/src/app/chat/chat.module.ts
@@ -5,19 +5,21 @@ import { ChatDialogComponent } from './chat-dialog/chat-dialog.component';
 import { ChatService } from './chat.service';
 
 import { FormsModule } from '@angular/forms';
-
 import { MaterialModule } from '../core/material.module';
+import { SharedModule } from '../shared/shared.module';
+import { MarkdownService } from './markdown.service';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     MaterialModule,
+    SharedModule
   ],
   declarations: [
     ChatDialogComponent
   ],
   exports: [ ChatDialogComponent ],
-  providers: [ChatService]
+  providers: [ChatService, MarkdownService]
 })
 export class ChatModule { }
diff --git a/src/app/chat/chat.service.ts b/src/app/chat/chat.service.ts
@@ -6,7 +6,10 @@ import { ApiAiClient } from 'api-ai-javascript';
 import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
+
 export class Message {
+  myRenderer;
+
   constructor(public content: string, public sentBy: string) {}
 }
 
@@ -40,5 +43,4 @@ export class ChatService {
     this.conversation.next([msg]);
   }
 
-
 }
diff --git a/src/app/chat/markdown.service.spec.ts b/src/app/chat/markdown.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { MarkdownService } from './markdown.service';
+
+describe('MarkdownService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [MarkdownService]
+    });
+  });
+
+  it('should be created', inject([MarkdownService], (service: MarkdownService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/app/chat/markdown.service.ts b/src/app/chat/markdown.service.ts
@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import * as marked from 'marked';
+
+@Injectable()
+export class MarkdownService {
+
+  renderer: any;
+
+  constructor() {
+
+    this.renderer = new marked.Renderer();
+    this.renderer.link = function(href, title, text) {
+      var external, newWindow, out;
+      external = /^https?:\/\/.+$/.test(href);
+      newWindow = external || title === 'newWindow';
+      out = "<a href=\"" + href + "\"";
+      if (newWindow) {
+        out += ' target="_blank"';
+      }
+      if (title && title !== 'newWindow') {
+        out += " title=\"" + title + "\"";
+      }
+      return out += ">" + text + "</a>";
+    };
+
+    marked.setOptions({
+      renderer: this.renderer,
+      gfm: true
+    });
+  }
+
+
+  // convert markdown string to html
+  markdownToHtml(md: string) {
+    console.log(md);
+    return marked(md);
+  }
+
+}
diff --git a/src/app/shared/md-to-html.pipe.spec.ts b/src/app/shared/md-to-html.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { MdToHtmlPipe } from './md-to-html.pipe';
+
+describe('MdToHtmlPipe', () => {
+  it('create an instance', () => {
+    const pipe = new MdToHtmlPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/md-to-html.pipe.ts b/src/app/shared/md-to-html.pipe.ts
@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { MarkdownService } from '../chat/markdown.service';
+
+@Pipe({
+  name: 'mdToHtml'
+})
+export class MdToHtmlPipe implements PipeTransform {
+
+  constructor(private markdown:  MarkdownService) {}
+  transform(value: string): any {
+    return this.markdown.markdownToHtml(value);
+  }
+
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MdToHtmlPipe } from './md-to-html.pipe';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [MdToHtmlPipe],
+  exports: [MdToHtmlPipe]
+})
+export class SharedModule { }
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/styles.scss b/src/styles.scss
@@ -3,4 +3,20 @@
 
 body {
     font-family: 'Roboto', sans-serif;
-}
+}
+
+code {
+    color: white;
+    background: slateblue;
+    padding: 3px;
+    border-radius: 5px;
+    font-size: 0.8em;
+}
+
+code {
+    padding: 2px 4px;
+    font-size: 90%;
+    color: #c7254e;
+    background-color: #f9f2f4;
+    border-radius: 4px;
+  }

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,10 @@ import { ApiAiClient } from 'api-ai-javascript';`
`6`	`6`	`import { Observable } from 'rxjs/Observable';`
`7`	`7`	`import { BehaviorSubject } from 'rxjs/BehaviorSubject';`
`8`	`8`
	`9`	`+`
`9`	`10`	`export class Message {`
	`11`	`+ myRenderer;`
	`12`	`+`
`10`	`13`	`constructor(public content: string, public sentBy: string) {}`
`11`	`14`	`}`
`12`	`15`
`@@ -40,5 +43,4 @@ export class ChatService {`
`40`	`43`	`this.conversation.next([msg]);`
`41`	`44`	`}`
`42`	`45`
`43`		`-`
`44`	`46`	`}`