Altered the web part to use the currently logged in user's username when sending messages. Also updated the README and cleaned up some unused references in the code.

samples/react-bot-framework/.vscode/settings.json

@@ -18,4 +18,6 @@
     "lib": true,
     "temp": true
   }
+,
+"typescript.check.workspaceVersion": false
 }

samples/react-bot-framework/README.md

@@ -1,9 +1,10 @@
 # Microsoft Bot Framework Web Chat
 
 ## Summary
-Short summary on functionality and used technologies.
+A web part that acts as a web chat component for bot's built on the Microsoft Bot Framework using the Direct Line API. When sending messages
+the web part uses the username of the currently logged in user. The web part has settings for color for branding purposes.
 
-[picture of the web part in action]
+![bot framework client web part](screenshot.png)
 
 ## Applies to
 

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

@@ -21,8 +21,7 @@
       "botMessagesBackgroundColor": "c8c8c8",
       "botMessagesForegroundColor": "000000",
       "userMessagesBackgroundColor": "c7e0f4",
-      "userMessagesForegroundColor": "000000",
-      "directLineClientName": "DirectLineClient"
+      "userMessagesForegroundColor": "000000"
     }
   }]
 }

samples/react-bot-framework/src/webparts/botFrameworkChat/BotFrameworkChatWebPart.ts

@@ -7,7 +7,6 @@ import {
   PropertyPaneTextField
 } from '@microsoft/sp-client-preview';
 
-import * as strings from 'botFrameworkChatStrings';
 import BotFrameworkChat, { IBotFrameworkChatProps } from './components/BotFrameworkChat';
 import { IBotFrameworkChatWebPartProps } from './IBotFrameworkChatWebPartProps';
 
@@ -29,7 +28,7 @@ export default class BotFrameworkChatWebPart extends BaseClientSideWebPart<IBotF
       botMessagesForegroundColor: this.properties.botMessagesForegroundColor,
       userMessagesBackgroundColor: this.properties.userMessagesBackgroundColor,
       userMessagesForegroundColor: this.properties.userMessagesForegroundColor,
-      directLineClientName: this.properties.directLineClientName
+      context: this.context
     });
 
     ReactDom.render(element, this.domElement);
@@ -47,10 +46,7 @@ export default class BotFrameworkChatWebPart extends BaseClientSideWebPart<IBotF
               groupName: 'Bot Connection',
               groupFields: [
                 PropertyPaneTextField('directLineSecret', {
-                  label: 'Direct Line Channel Secret'
-                }),
-                PropertyPaneTextField('directLineClientName', {
-                  label: 'Bot User Name (send messages as...)'
+                  label: 'Direct Line Secret'
                 })
               ]
             },
@@ -99,8 +95,7 @@ export default class BotFrameworkChatWebPart extends BaseClientSideWebPart<IBotF
 
   private _validateColorPropertyAsync(value: string): string {
     var colorRegex = /^([a-zA-Z0-9]){6}$/;
-    if(!value || colorRegex.test(value) == false)
-    {
+    if (!value || colorRegex.test(value) == false) {
       return "Please enter a valid 6 character hex color value";
     }
 

samples/react-bot-framework/src/webparts/botFrameworkChat/IBotFrameworkChatWebPartProps.ts

@@ -1,3 +1,5 @@
+import { IWebPartContext } from '@microsoft/sp-client-preview';
+
 export interface IBotFrameworkChatWebPartProps {
   description: string;
   message: string;
@@ -9,5 +11,5 @@ export interface IBotFrameworkChatWebPartProps {
   botMessagesForegroundColor: string;
   userMessagesBackgroundColor: string;
   userMessagesForegroundColor: string;
-  directLineClientName: string;
+  context: IWebPartContext;
 }

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

@@ -15,6 +15,7 @@ export default class BotFrameworkChat extends React.Component<IBotFrameworkChatP
   private directLineClientSwagger;
   private messagesHtml;
   private currentMessageText;
+  private sendAsUserName;
 
   public render(): JSX.Element {
     return (
@@ -63,6 +64,8 @@ export default class BotFrameworkChat extends React.Component<IBotFrameworkChatP
           });
       });
 
+      this.sendAsUserName = this.props.context.pageContext.user.loginName;
+
       this.printMessage = this.printMessage.bind(this);
     }
   }
@@ -98,7 +101,7 @@ export default class BotFrameworkChat extends React.Component<IBotFrameworkChatP
         {
           conversationId: this.conversationId,
           message: {
-            from: this.props.directLineClientName,
+            from: this.sendAsUserName,
             text: messageToSend
           }
         }).catch((err) => console.error('Error sending message:', err));
@@ -114,17 +117,17 @@ export default class BotFrameworkChat extends React.Component<IBotFrameworkChatP
           watermark = response.obj.watermark;
           return response.obj.messages;
         })
-        .then((messages) => this.printMessages(messages))
+        .then((messages) => this.printMessages(messages));
     }, this.pollInterval);
   }
 
   protected printMessages(messages) {
     if (messages && messages.length) {
-      messages = messages.filter((m) => m.from !== this.props.directLineClientName);
+      messages = messages.filter((m) => m.from !== this.sendAsUserName);
       if (messages.length) {
         messages.forEach(this.printMessage);
       }
-    };
+    }
   }
 
   protected printMessage(message) {