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"
},
"dependencies": {
"@microsoft/sp-client-base": "~0.3.0",
"@microsoft/sp-client-preview": "~0.4.0",
"@microsoft/sp-client-base": "~0.4.0",
"@microsoft/sp-client-preview": "~0.5.0",
"office-ui-fabric-react": "0.36.0",
"react": "0.14.8",
"react-dom": "0.14.8"
"react-dom": "0.14.8",
"swagger-client": "^2.1.23"
},
"devDependencies": {
"@microsoft/sp-build-web": "~0.6.0",
"@microsoft/sp-module-interfaces": "~0.3.0",
"@microsoft/sp-webpart-workbench": "~0.4.0",
"@microsoft/sp-build-web": "~0.7.0",
"@microsoft/sp-module-interfaces": "~0.4.0",
"@microsoft/sp-webpart-workbench": "~0.5.0",
"gulp": "~3.9.1"
},
"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 {
padding:10px;
background-color: #c7e0f4;
color: #000;
font-weight: bold;
color: #fff;
}
.messagesRow {

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

@ -17,8 +17,8 @@
"placeholderText": "Your message",
"title": "Chat",
"directLineSecret": "",
"titleBarBackgroundColor": "c7e0f4",
"botMessagesBackgroundColor": "c8c8c8",
"titleBarBackgroundColor": "3C3C3C",
"botMessagesBackgroundColor": "f4f4f4",
"botMessagesForegroundColor": "000000",
"userMessagesBackgroundColor": "c7e0f4",
"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 (
<div className={styles.botFrameworkChat}>
<div className={styles.container}>
<div className={css('ms-Grid-row ms-font-xl', styles.chatHeader) } style={{ backgroundColor: '#' + this.props.titleBarBackgroundColor }} >
{ this.props.title }
<div className={css('ms-Grid-row ms-font-xl', styles.chatHeader)} style={{ backgroundColor: '#' + this.props.titleBarBackgroundColor }} >
{this.props.title}
</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>
</div>
<div className={css('ms-Grid-row') }>
<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) } />
<div className={css('ms-Grid-row')}>
<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)} />
</div>
</div>
</div>
);
}
public componentDidMount(): void {
if (this.props.directLineSecret) {
var Swagger = require('swagger-client');
var directLineSpec = require('./directline-swagger.json');
public componentDidUpdate(prevProps: IBotFrameworkChatWebPartProps, prevState: {}, prevContext: any): void {
if (this.props.directLineSecret !== prevProps.directLineSecret) {
if (this.props.directLineSecret) {
var Swagger = require('swagger-client');
var directLineSpec = require('./directline-swagger.json');
this.directLineClientSwagger = new Swagger(
{
spec: directLineSpec,
usePromise: true,
}).then((client) => {
client.clientAuthorizations.add('AuthorizationBotConnector', new Swagger.ApiKeyAuthorization('Authorization', 'BotConnector ' + this.props.directLineSecret, 'header'));
console.log('DirectLine client generated');
return client;
}).catch((err) =>
console.error('Error initializing DirectLine client', err));
this.directLineClientSwagger = new Swagger(
{
spec: directLineSpec,
usePromise: true,
}).then((client) => {
client.clientAuthorizations.add('AuthorizationBotConnector', new Swagger.ApiKeyAuthorization('Authorization', 'BotConnector ' + this.props.directLineSecret, 'header'));
console.log('DirectLine client generated');
return client;
}).catch((err) =>
console.error('Error initializing DirectLine client', err));
this.directLineClientSwagger.then((client) => {
client.Conversations.Conversations_NewConversation()
.then((response) => response.obj.conversationId)
.then((conversationId) => {
this.directLineClientSwagger.then((client) => {
client.Conversations.Conversations_NewConversation()
.then((response) => response.obj.conversationId)
.then((conversationId) => {
this.conversationId = conversationId;
this.pollMessages(client, conversationId);
this.directLineClient = client;
});
});
this.conversationId = conversationId;
this.pollMessages(client, conversationId);
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);
}
}
}