honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Updated pic and small adjustments on the code.

This commit is contained in:
Vesa Juvonen 2016-10-28 15:46:57 +03:00
parent 354704dca4
commit 590fd08b0c
6 changed files with 43 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
samples/react-bot-framework/assets/bot-framework-webpart-preview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

13
samples/react-bot-framework/package.json
View File

@ -6,16 +6,17 @@
"node": ">=0.10.0" "node": ">=0.10.0"
}, },
"dependencies": { "dependencies": {
"@microsoft/sp-client-base": "~0.3.0", "@microsoft/sp-client-base": "~0.4.0",
"@microsoft/sp-client-preview": "~0.4.0", "@microsoft/sp-client-preview": "~0.5.0",
"office-ui-fabric-react": "0.36.0", "office-ui-fabric-react": "0.36.0",
"react": "0.14.8", "react": "0.14.8",
"react-dom": "0.14.8" "react-dom": "0.14.8",
"swagger-client": "^2.1.23"
}, },
"devDependencies": { "devDependencies": {
"@microsoft/sp-build-web": "~0.6.0", "@microsoft/sp-build-web": "~0.7.0",
"@microsoft/sp-module-interfaces": "~0.3.0", "@microsoft/sp-module-interfaces": "~0.4.0",
"@microsoft/sp-webpart-workbench": "~0.4.0", "@microsoft/sp-webpart-workbench": "~0.5.0",
"gulp": "~3.9.1" "gulp": "~3.9.1"
}, },
"scripts": { "scripts": {

BIN
samples/react-bot-framework/screenshot.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

3
samples/react-bot-framework/src/webparts/botFrameworkChat/BotFrameworkChat.module.scss
View File

@ -7,8 +7,7 @@
.chatHeader { .chatHeader {
padding:10px; padding:10px;
background-color: #c7e0f4; background-color: #c7e0f4;
color: #000; color: #fff;
font-weight: bold;
} }
.messagesRow { .messagesRow {

4
samples/react-bot-framework/src/webparts/botFrameworkChat/BotFrameworkChatWebPart.manifest.json
View File

@ -17,8 +17,8 @@
"placeholderText": "Your message", "placeholderText": "Your message",
"title": "Chat", "title": "Chat",
"directLineSecret": "", "directLineSecret": "",
"titleBarBackgroundColor": "c7e0f4", "titleBarBackgroundColor": "3C3C3C",
"botMessagesBackgroundColor": "c8c8c8", "botMessagesBackgroundColor": "f4f4f4",
"botMessagesForegroundColor": "000000", "botMessagesForegroundColor": "000000",
"userMessagesBackgroundColor": "c7e0f4", "userMessagesBackgroundColor": "c7e0f4",
"userMessagesForegroundColor": "000000" "userMessagesForegroundColor": "000000"

64
samples/react-bot-framework/src/webparts/botFrameworkChat/components/BotFrameworkChat.tsx
View File

@ -21,52 +21,54 @@ export default class BotFrameworkChat extends React.Component<IBotFrameworkChatP
return ( return (
<div className={styles.botFrameworkChat}> <div className={styles.botFrameworkChat}>
<div className={styles.container}> <div className={styles.container}>
<div className={css('ms-Grid-row ms-font-xl', styles.chatHeader) } style={{ backgroundColor: '#' + this.props.titleBarBackgroundColor }} > <div className={css('ms-Grid-row ms-font-xl', styles.chatHeader)} style={{ backgroundColor: '#' + this.props.titleBarBackgroundColor }} >
{ this.props.title } {this.props.title}
</div> </div>
<div className={css('ms-Grid-row', styles.messagesRow) } > <div className={css('ms-Grid-row', styles.messagesRow)} >
<div className='ms-Grid-col ms-u-sm12' ref='messageHistoryDiv' dangerouslySetInnerHTML={{ __html: this.getMessagesHtml() }}> <div className='ms-Grid-col ms-u-sm12' ref='messageHistoryDiv' dangerouslySetInnerHTML={{ __html: this.getMessagesHtml() }}>
</div> </div>
</div> </div>
<div className={css('ms-Grid-row') }> <div className={css('ms-Grid-row')}>
<TextField id='MessageBox' onKeyUp={ (e) => this.tbKeyUp(e) } onKeyDown={ (e) => this.tbKeyDown(e) } <TextField id='MessageBox' onKeyUp={(e) => this.tbKeyUp(e)} onKeyDown={(e) => this.tbKeyDown(e)}
value={this.currentMessageText} placeholder={ this.props.placeholderText } className={ css('ms-fontSize-m', styles.messageBox) } /> value={this.currentMessageText} placeholder={this.props.placeholderText} className={css('ms-fontSize-m', styles.messageBox)} />
</div> </div>
</div> </div>
</div> </div>
); );
} }
public componentDidMount(): void { public componentDidUpdate(prevProps: IBotFrameworkChatWebPartProps, prevState: {}, prevContext: any): void {
if (this.props.directLineSecret) { if (this.props.directLineSecret !== prevProps.directLineSecret) {
var Swagger = require('swagger-client'); if (this.props.directLineSecret) {
var directLineSpec = require('./directline-swagger.json'); var Swagger = require('swagger-client');
var directLineSpec = require('./directline-swagger.json');
this.directLineClientSwagger = new Swagger( this.directLineClientSwagger = new Swagger(
{ {
spec: directLineSpec, spec: directLineSpec,
usePromise: true, usePromise: true,
}).then((client) => { }).then((client) => {
client.clientAuthorizations.add('AuthorizationBotConnector', new Swagger.ApiKeyAuthorization('Authorization', 'BotConnector ' + this.props.directLineSecret, 'header')); client.clientAuthorizations.add('AuthorizationBotConnector', new Swagger.ApiKeyAuthorization('Authorization', 'BotConnector ' + this.props.directLineSecret, 'header'));
console.log('DirectLine client generated'); console.log('DirectLine client generated');
return client; return client;
}).catch((err) => }).catch((err) =>
console.error('Error initializing DirectLine client', err)); console.error('Error initializing DirectLine client', err));
this.directLineClientSwagger.then((client) => { this.directLineClientSwagger.then((client) => {
client.Conversations.Conversations_NewConversation() client.Conversations.Conversations_NewConversation()
.then((response) => response.obj.conversationId) .then((response) => response.obj.conversationId)
.then((conversationId) => { .then((conversationId) => {
this.conversationId = conversationId; this.conversationId = conversationId;
this.pollMessages(client, conversationId); this.pollMessages(client, conversationId);
this.directLineClient = client; this.directLineClient = client;
}); });
}); });
this.sendAsUserName = this.props.context.pageContext.user.loginName; this.sendAsUserName = this.props.context.pageContext.user.loginName;
this.printMessage = this.printMessage.bind(this); this.printMessage = this.printMessage.bind(this);
}
} }
} }