[Angular] Make a chatbot with DialogFlow
Register a account on https://console.dialogflow.com/api-client/
"Creat a intent" -- you can custom your message here.
"Small Talks" -- the default message from the DialogFlow.
Install:
yarn add api-ai-javascript
Put your API token to the app.
Create a servie:
import {Injectable} from '@angular/core'; import {environment} from '../../../environments/environment'; import {ApiAiClient} from 'api-ai-javascript'; import {Message} from '../models/bot-message'; import {BehaviorSubject} from 'rxjs/BehaviorSubject'; @Injectable() export class ChatbotService { readonly token = environment.dialogFlow.bot; readonly client = new ApiAiClient({accessToken: this.token}); conversation = new BehaviorSubject<Message[]>([]); constructor() { } // Adds message to the source update(msg: Message) { this.conversation.next([msg]); } // Send and receives message via DialogFlow converse(msg: string) { const userMessage = new Message(msg, 'user'); this.update(userMessage); this.client.textRequest(msg) .then((res) => { const speech = res.result.fulfillment.speech; const botMessage = new Message(speech, 'bot'); this.update(botMessage); }).catch((err) => { console.error(err); }); } }
Component:
import {Component, OnInit} from '@angular/core'; import {ChatbotService} from '../../services/chatbot.service'; import {Observable} from 'rxjs/Observable'; import {Message} from '../../models/bot-message'; import 'rxjs/add/operator/scan'; @Component({ selector: 'chat-dialog', templateUrl: './chat-dialog.component.html', styleUrls: ['./chat-dialog.component.scss'] }) export class ChatDialogComponent implements OnInit { messages$: Observable<Message[]>; formValue: string; constructor(private chatService: ChatbotService) { } ngOnInit() { this.messages$ = this.chatService.conversation .asObservable() .scan((acc, curr) => acc.concat(curr)); } sendMessage() { if (!this.formValue) { return; } this.chatService.converse(this.formValue); this.formValue = ''; } }
Template:
<mat-card> <mat-card-title class="title"> Umi </mat-card-title> <hr /> <mat-card-content class="content"> <div fxLayout="column"> <ng-container *ngFor="let message of messages$ | async"> <div class="message" [ngClass]="{'from': message.sentBy === 'bot', 'to': message.sentBy === 'user'}"> {{message.content}} </div> </ng-container> </div> </mat-card-content> <mat-card-actions> <div fxLayout="row" fxLayoutAlign="space-between"> <mat-form-field fxFlex="auto"> <textarea matInput type="textarea" placeholder="What you want to say?..." [(ngModel)]="formValue" (keyup.enter)="sendMessage()"></textarea> </mat-form-field> <div fxLayout="column" fxLayoutAlign="center center"> <button color="primary" class="send-btn" mat-mini-fab [disabled]="!formValue" (click)="sendMessage()"> <mat-icon> send </mat-icon> </button> </div> </div> </mat-card-actions> </mat-card>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析