chatbot

src/Explorer/Controls/SupportPaneComponent/SupportPaneComponent.tsx

@@ -4,13 +4,19 @@ import ReactWebChat, { createDirectLine } from "botframework-webchat";
 
 export interface SupportPaneComponentProps {
   directLineToken: string;
+  userToken: string;
+  subId: string;
+  rg:string;
+  accName:string;
 }
 
 export class SupportPaneComponent extends React.Component<SupportPaneComponentProps> {
   private readonly userId: string = _.uniqueId();
 
+
   constructor(props: SupportPaneComponentProps) {
     super(props);
+  
   }
 
   public render(): JSX.Element {
@@ -18,7 +24,24 @@ export class SupportPaneComponent extends React.Component<SupportPaneComponentPr
       bubbleBackground: "rgba(0, 0, 255, .1)",
       bubbleFromUserBackground: "rgba(0, 255, 0, .1)"
     };
-    const directLine = createDirectLine({ token: this.props.directLineToken });
-    return <ReactWebChat directLine={directLine} userID={this.userId} styleOptions={styleOptions} />;
+    
+    const directLine = createDirectLine({ token: this.props.directLineToken  });
+       const dl =
+  {
+    ...directLine,
+    postActivity: (activity: any) => {
+      // Add whatever needs to be added.                  
+       activity.channelData.token = this.props.userToken;
+       activity.channelData.subId = this.props.subId;
+       activity.channelData.rg = this.props.rg;
+       activity.channelData.accName = this.props.accName;
+       
+      //activity.channelData.MyKey = "hello";
+      return directLine.postActivity(activity)
+    }
+  }
+
+    return <ReactWebChat directLine={dl} userid={this.userId} styleOptions={styleOptions}/>;
+    
   }
 }

src/Explorer/Controls/SupportPaneComponent/SupportPaneComponentAdapter.tsx

@@ -3,26 +3,59 @@ import * as React from "react";
 import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
 import Explorer from "../../Explorer";
 import { SupportPaneComponent } from "./SupportPaneComponent";
+import { userContext } from "../../../UserContext";
 
 export interface SupportPaneComponentParams {
   directLineAccessToken: string;
+  userToken: string;
+  subId: string;
+  rg: string;
+  accName: string;
 }
 
 export class SupportPaneComponentAdapter implements ReactAdapter {
   public parameters: ko.Observable<SupportPaneComponentParams>;
 
   constructor(private container: Explorer) {
+    
     this.parameters = ko.observable<SupportPaneComponentParams>({
-      directLineAccessToken: this.container.conversationToken()
+      directLineAccessToken: this.container.conversationToken(),
+      userToken: this.container.userToken(),
+      subId: this.container.subId(),
+      rg: this.container.rg(),
+      accName: this.container.accName()
     });
     this.container.conversationToken.subscribe(accessToken => {
       this.parameters().directLineAccessToken = accessToken;
       this.forceRender();
     });
+    this.container.userToken.subscribe(userToken => {
+      this.parameters().userToken = userToken;
+      this.forceRender();
+    });
+    this.container.subId.subscribe(subId => {
+      this.parameters().subId = subId;
+      this.forceRender();
+    });
+    this.container.rg.subscribe(rg => {
+      this.parameters().rg = rg;
+      this.forceRender();
+    });
+    this.container.accName.subscribe(accName => {
+      this.parameters().accName = accName;
+      this.forceRender();
+    });
+    
   }
 
   public renderComponent(): JSX.Element {
-    return <SupportPaneComponent directLineToken={this.parameters().directLineAccessToken} />;
+    return <SupportPaneComponent 
+    directLineToken={this.parameters().directLineAccessToken} 
+    userToken={this.parameters().userToken}
+    subId={this.parameters().subId}
+    rg={this.parameters().rg}
+    accName={this.parameters().accName}
+    />;
   }
 
   public forceRender(): void {

src/Explorer/Explorer.ts

@@ -177,6 +177,10 @@ export default class Explorer {
   public isResourceTokenCollectionNodeSelected: ko.Computed<boolean>;
   private resourceTreeForResourceToken: ResourceTreeAdapterForResourceToken;
   public conversationToken: ko.Observable<string>;
+  public userToken: ko.Observable<string>;
+  public subId: ko.Observable<string>;
+  public rg: ko.Observable<string>;
+  public accName: ko.Observable<string>;
 
   // Tabs
   public isTabsContentExpanded: ko.Observable<boolean>;
@@ -329,6 +333,10 @@ export default class Explorer {
     this.hasStorageAnalyticsAfecFeature.subscribe((enabled: boolean) => this.refreshCommandBarButtons());
     this.isSynapseLinkUpdating = ko.observable<boolean>(false);
     this.conversationToken = ko.observable<string>();
+    this.userToken = ko.observable<string>();
+    this.subId = ko.observable<string>();
+    this.rg = ko.observable<string>();
+    this.accName = ko.observable<string>();
     this.isAccountReady.subscribe(async (isAccountReady: boolean) => {
       if (isAccountReady) {
         this.isAuthWithResourceToken() ? this.refreshDatabaseForResourceToken() : this.refreshAllDatabases(true);
@@ -1625,7 +1633,6 @@ export default class Explorer {
 
     const tokenResponse: { conversationId: string; token: string; expires_in: number } = await response.json();
     this.conversationToken(tokenResponse?.token);
-
     if (tokenResponse?.expires_in) {
       setTimeout(() => this.generateConversationToken(), (tokenResponse?.expires_in - 1000) * 1000);
     }
@@ -1998,6 +2005,11 @@ export default class Explorer {
         resourceGroup: inputs.resourceGroup,
         subscriptionId: inputs.subscriptionId
       });
+      
+      this.userToken(userContext.authorizationToken);
+      this.subId(userContext.subscriptionId);
+      this.rg(userContext.resourceGroup);
+      this.accName(userContext.databaseAccount.name);
       TelemetryProcessor.traceSuccess(
         Action.LoadDatabaseAccount,
         {

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.ts

@@ -180,7 +180,7 @@ export class CommandBarComponentButtonFactory {
     }
 
     if (window.authType === AuthType.AAD) {
-      const label = "Support";
+      const label = "Chat Assistant";
       const supportPaneButton: CommandButtonComponentProps = {
         iconSrc: FeedbackIcon,
         iconAlt: label,

src/Explorer/Panes/SupportPane.ts

@@ -7,7 +7,7 @@ export class SupportPane extends ContextualPaneBase {
 
   constructor(options: ViewModels.PaneOptions) {
     super(options);
-    this.title("Cosmos DB Support");
+    this.title("Cosmos DB Chat Assistant");
     this.resetData();
     this.supportPaneComponentAdapter = new SupportPaneComponentAdapter(this.container);
   }

src/explorer.html

@@ -7,8 +7,10 @@
     <title>Azure Cosmos DB</title>
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
   </head>
+  
 
   <body>
+    
     <div class="flexContainer">
       <div id="divExplorer" class="flexContainer hideOverflows" style="display: none">
         <!-- Main Command Bar - Start -->