Merge branch 'master' of https://github.com/Azure/cosmos-explorer into user/balalakshmin/chatbot

* Rename properties from notebookService to phoenixService in phoenix client


Co-authored-by: kcheekuri <kcheekuri@microsoft.com>

package.json

@@ -47,6 +47,7 @@
     "@types/node-fetch": "2.5.7",
     "applicationinsights": "1.8.0",
     "bootstrap": "3.4.1",
+    "botframework-webchat": "4.14.1",
     "canvas": "file:./canvas",
     "clean-webpack-plugin": "3.0.0",
     "clipboard-copy": "4.0.1",

src/Common/Constants.ts

@@ -354,6 +354,10 @@ export enum ContainerStatusType {
   Disconnected = "Disconnected",
 }
 
+export enum PoolIdType {
+  DefaultPoolId = "default",
+}
+
 export const EmulatorMasterKey =
   //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")]
   "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";

src/Contracts/DataModels.ts

@@ -438,12 +438,13 @@ export interface NotebookWorkspaceConnectionInfo {
 
 export interface ContainerInfo {
   durationLeftInMinutes: number;
-  notebookServerInfo: NotebookWorkspaceConnectionInfo;
+  phoenixServerInfo: NotebookWorkspaceConnectionInfo;
   status: ContainerStatusType;
 }
 
 export interface IProvisionData {
   cosmosEndpoint: string;
+  poolId: string;
 }
 
 export interface IContainerData {
@@ -480,8 +481,8 @@ export interface IMaxUsersPerDbAccountExceeded extends IPhoenixError {
 }
 
 export interface IPhoenixConnectionInfoResult {
-  readonly notebookAuthToken?: string;
-  readonly notebookServerUrl?: string;
+  readonly authToken?: string;
+  readonly phoenixServiceUrl?: string;
   readonly forwardingId?: string;
 }
 

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

@@ -1,13 +1,13 @@
 /**
  * React component for Command button component.
  */
+import { Icon, IIconStyles } from "@fluentui/react";
 import * as React from "react";
 import CollapseChevronDownIcon from "../../../../images/QueryBuilder/CollapseChevronDown_16x.png";
 import { KeyCodes } from "../../../Common/Constants";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as StringUtils from "../../../Utils/StringUtils";
-
 /**
  * Options for this component
  */
@@ -243,6 +243,7 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
     if (this.props.children && this.props.children.length > 0) {
       contentClassName += " hasHiddenItems";
     }
+    const iconButtonStyles: Partial<IIconStyles> = { root: { marginBottom: -3 } };
 
     return (
       <div className="commandButtonReact">
@@ -259,7 +260,18 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
           onClick={(e: React.MouseEvent<HTMLSpanElement>) => this.commandClickCallback(e)}
         >
           <div className={contentClassName}>
-            <img className="commandIcon" src={this.props.iconSrc} alt={this.props.iconAlt} />
+            if (this.props.iconName){" "}
+            {
+              <div>
+                <Icon
+                  styles={iconButtonStyles}
+                  className="panelInfoIcon"
+                  iconName={this.props.iconName}
+                  ariaLabel="ChatBot"
+                />
+              </div>
+            }{" "}
+            else {<img className="commandIcon" src={this.props.iconSrc} alt={this.props.iconAlt} />}
             {CommandButtonComponent.renderLabel(this.props)}
           </div>
         </span>

src/Explorer/Controls/SupportPaneComponent/SupportPaneComponent.tsx

@@ -0,0 +1,41 @@
+import { Activity } from "botframework-directlinejs";
+import ReactWebChat, { createDirectLine } from "botframework-webchat";
+import React from "react";
+import * as _ from "underscore";
+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 {
+    const styleOptions = {
+      bubbleBackground: "rgba(0, 0, 255, .1)",
+      bubbleFromUserBackground: "rgba(0, 255, 0, .1)",
+    };
+
+    const directLine = createDirectLine({ token: this.props.directLineToken });
+    const dl = {
+      ...directLine,
+      postActivity: (activity: Activity) => {
+        activity.channelData.token = this.props.userToken;
+        activity.channelData.subId = this.props.subId;
+        activity.channelData.rg = this.props.rg;
+        activity.channelData.accName = this.props.accName;
+
+        return directLine.postActivity(activity);
+      },
+    };
+
+    return <ReactWebChat directLine={dl} userID={this.userId} styleOptions={styleOptions} />;
+  }
+}

src/Explorer/Explorer.tsx

@@ -1,5 +1,6 @@
 import { Link } from "@fluentui/react/lib/Link";
 import { isPublicInternetAccessAllowed } from "Common/DatabaseAccountUtility";
+import { configContext } from "ConfigContext";
 import { IGalleryItem } from "Juno/JunoClient";
 import * as ko from "knockout";
 import React from "react";
@@ -9,7 +10,7 @@ import shallow from "zustand/shallow";
 import { AuthType } from "../AuthType";
 import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
 import * as Constants from "../Common/Constants";
-import { Areas, ConnectionStatusType, HttpStatusCodes, Notebook } from "../Common/Constants";
+import { Areas, ConnectionStatusType, HttpStatusCodes, Notebook, PoolIdType } from "../Common/Constants";
 import { readCollection } from "../Common/dataAccess/readCollection";
 import { readDatabases } from "../Common/dataAccess/readDatabases";
 import { getErrorMessage, getErrorStack, handleError } from "../Common/ErrorHandlingUtils";
@@ -34,6 +35,7 @@ import { userContext } from "../UserContext";
 import { getCollectionName, getUploadName } from "../Utils/APITypeUtils";
 import { update } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
 import { listByDatabaseAccount } from "../Utils/arm/generatedClients/cosmosNotebooks/notebookWorkspaces";
+import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
 import { stringToBlob } from "../Utils/BlobUtils";
 import { isCapabilityEnabled } from "../Utils/CapabilityUtils";
 import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
@@ -85,6 +87,12 @@ export default class Explorer {
   // Notebooks
   public notebookManager?: NotebookManager;
 
+  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>;
+
   private _isInitializingNotebooks: boolean;
   private notebookToImport: {
     name: string;
@@ -106,6 +114,10 @@ export default class Explorer {
 
     this.queriesClient = new QueriesClient(this);
 
+    this.conversationToken = ko.observable<string>();
+
+    this.generateConversationToken();
+
     useSelectedNode.subscribe(() => {
       // Make sure switching tabs restores tabs display
       this.isTabsContentExpanded(false);
@@ -357,6 +369,7 @@ export default class Explorer {
     ) {
       const provisionData: IProvisionData = {
         cosmosEndpoint: userContext.databaseAccount.properties.documentEndpoint,
+        poolId: PoolIdType.DefaultPoolId,
       };
       const connectionStatus: ContainerConnectionInfo = {
         status: ConnectionStatusType.Connecting,
@@ -369,8 +382,8 @@ export default class Explorer {
         });
         useNotebook.getState().setIsAllocating(true);
         connectionInfo = await this.phoenixClient.allocateContainer(provisionData);
-        if (!connectionInfo?.data?.notebookServerUrl) {
-          throw new Error(`NotebookServerUrl is invalid!`);
+        if (!connectionInfo?.data?.phoenixServiceUrl) {
+          throw new Error(`PhoenixServiceUrl is invalid!`);
         }
         await this.setNotebookInfo(connectionInfo, connectionStatus);
         TelemetryProcessor.traceSuccess(Action.PhoenixConnection, {
@@ -421,8 +434,8 @@ export default class Explorer {
       notebookServerEndpoint:
         (validateEndpoint(userContext.features.notebookServerUrl, allowedNotebookServerUrls) &&
           userContext.features.notebookServerUrl) ||
-        connectionInfo.data.notebookServerUrl,
-      authToken: userContext.features.notebookServerToken || connectionInfo.data.notebookAuthToken,
+        connectionInfo.data.phoenixServiceUrl,
+      authToken: userContext.features.notebookServerToken || connectionInfo.data.authToken,
       forwardingId: connectionInfo.data.forwardingId,
     });
     this.notebookManager?.notebookClient
@@ -454,6 +467,30 @@ export default class Explorer {
     useDialog.getState().openDialog(resetConfirmationDialogProps);
   }
 
+  private async generateConversationToken() {
+    const url = `${configContext.JUNO_ENDPOINT}/api/chatbot/bot${userContext.databaseAccount.id}/conversationToken`;
+    const authorizationHeader = getAuthorizationHeader();
+
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        [Constants.HttpHeaders.authorization]: authorizationHeader.token,
+        Accept: "application/json",
+        [Constants.HttpHeaders.contentType]: "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(await response.json());
+    }
+
+    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);
+    }
+  }
+
   private async _containsDefaultNotebookWorkspace(databaseAccount: DataModels.DatabaseAccount): Promise<boolean> {
     if (!databaseAccount) {
       return false;
@@ -497,8 +534,8 @@ export default class Explorer {
       if (connectionInfo?.status !== HttpStatusCodes.OK) {
         throw new Error(`Reset Workspace: Received status code- ${connectionInfo?.status}`);
       }
-      if (!connectionInfo?.data?.notebookServerUrl) {
-        throw new Error(`Reset Workspace: NotebookServerUrl is invalid!`);
+      if (!connectionInfo?.data?.phoenixServiceUrl) {
+        throw new Error(`Reset Workspace: PhoenixServiceUrl is invalid!`);
       }
       if (useNotebook.getState().isPhoenixNotebooks) {
         await this.setNotebookInfo(connectionInfo, connectionStatus);

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -26,6 +26,7 @@ import { userContext } from "../../../UserContext";
 import { getCollectionName, getDatabaseName } from "../../../Utils/APITypeUtils";
 import { isRunningOnNationalCloud } from "../../../Utils/CloudUtils";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import { SupportPaneComponent } from "../../Controls/SupportPaneComponent/SupportPaneComponent";
 import Explorer from "../../Explorer";
 import { useNotebook } from "../../Notebook/useNotebook";
 import { OpenFullScreen } from "../../OpenFullScreen";
@@ -195,6 +196,35 @@ export function createControlCommandBarButtons(container: Explorer): CommandButt
   const showOpenFullScreen =
     configContext.platform === Platform.Portal && !isRunningOnNationalCloud() && userContext.apiType !== "Gremlin";
 
+  if (userContext.authType === AuthType.AAD && userContext.features.enableChatbot) {
+    const label = "Chat Assistant";
+    const supportPaneButton: CommandButtonComponentProps = {
+      iconName: "ChatBot",
+      iconAlt: label,
+      onCommandClick: () => {
+        useSidePanel
+          .getState()
+          .openSidePanel(
+            "Chat Assistant (Beta)",
+            <SupportPaneComponent
+              directLineToken={container.conversationToken()}
+              userToken={userContext.authorizationToken}
+              subId={userContext.subscriptionId}
+              rg={userContext.resourceGroup}
+              accName={userContext.databaseAccount.name}
+            />
+          );
+      },
+      commandButtonLabel: null,
+      ariaLabel: label,
+      tooltipText: label,
+      hasPopup: true,
+      disabled: false,
+      className: "fonticoncustom",
+    };
+    buttons.push(supportPaneButton);
+  }
+
   if (showOpenFullScreen) {
     const label = "Open Full Screen";
     const fullScreenButton: CommandButtonComponentProps = {

src/Explorer/Menus/CommandBar/ConnectionStatusComponent.less

@@ -42,6 +42,10 @@
         width: 18px;
         color: rgb(0, 120, 212);
 } 
+.fonticoncustom {
+  padding-top: 12px;
+} 
+
   .status {
     position: relative;
     display: block;

src/Explorer/Notebook/NotebookContainerClient.ts

@@ -5,7 +5,7 @@ import { useDialog } from "Explorer/Controls/Dialog";
 import promiseRetry, { AbortError } from "p-retry";
 import { PhoenixClient } from "Phoenix/PhoenixClient";
 import * as Constants from "../../Common/Constants";
-import { ConnectionStatusType, HttpHeaders, HttpStatusCodes, Notebook } from "../../Common/Constants";
+import { ConnectionStatusType, HttpHeaders, HttpStatusCodes, Notebook, PoolIdType } from "../../Common/Constants";
 import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
 import * as Logger from "../../Common/Logger";
 import * as DataModels from "../../Contracts/DataModels";
@@ -154,6 +154,7 @@ export class NotebookContainerClient {
       if (useNotebook.getState().isPhoenixNotebooks) {
         const provisionData: IProvisionData = {
           cosmosEndpoint: userContext.databaseAccount.properties.documentEndpoint,
+          poolId: PoolIdType.DefaultPoolId,
         };
         return await this.phoenixClient.resetContainer(provisionData);
       }

src/Explorer/Notebook/SchemaAnalyzer/SchemaAnalyzer.tsx

@@ -5,6 +5,7 @@ import Immutable from "immutable";
 import * as React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
+import * as Logger from "../../../Common/Logger";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
 import loadTransform from "../NotebookComponent/loadTransform";
@@ -100,6 +101,7 @@ export class SchemaAnalyzer extends React.Component<SchemaAnalyzerProps, SchemaA
     // Only in cases where CosmosMongoKernel runs into an error we get a single output
     if (outputs.size === 1) {
       traceFailure(Action.SchemaAnalyzerClickAnalyze, data, this.clickAnalyzeTelemetryStartKey);
+      Logger.logError(`Failed to analyze schema: ${JSON.stringify(data)}`, "SchemaAnalyzer/traceClickAnalyzeComplete");
     } else {
       traceSuccess(Action.SchemaAnalyzerClickAnalyze, data, this.clickAnalyzeTelemetryStartKey);
     }

src/Explorer/Notebook/useNotebook.ts

@@ -96,7 +96,7 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
   containerStatus: {
     status: undefined,
     durationLeftInMinutes: undefined,
-    notebookServerInfo: undefined,
+    phoenixServerInfo: undefined,
   },
   isPhoenixNotebooks: undefined,
   isPhoenixFeatures: undefined,
@@ -296,7 +296,7 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
     useNotebook.getState().setContainerStatus({
       status: undefined,
       durationLeftInMinutes: undefined,
-      notebookServerInfo: undefined,
+      phoenixServerInfo: undefined,
     });
   },
   setIsRefreshed: (isRefreshed: boolean) => set({ isRefreshed }),

src/Phoenix/PhoenixClient.ts

@@ -104,7 +104,7 @@ export class PhoenixClient {
           const containerStatus = await response.json();
           return {
             durationLeftInMinutes: containerStatus?.durationLeftInMinutes,
-            notebookServerInfo: containerStatus?.notebookServerInfo,
+            phoenixServerInfo: containerStatus?.phoenixServerInfo,
             status: ContainerStatusType.Active,
           };
         } else if (response.status === HttpStatusCodes.NotFound) {
@@ -148,7 +148,7 @@ export class PhoenixClient {
       useNotebook.getState().setIsRefreshed(!useNotebook.getState().isRefreshed);
       return {
         durationLeftInMinutes: undefined,
-        notebookServerInfo: undefined,
+        phoenixServerInfo: undefined,
         status: ContainerStatusType.Disconnected,
       };
     }

src/Platform/Hosted/extractFeatures.ts

@@ -29,6 +29,7 @@ export type Features = {
   readonly mongoProxyEndpoint?: string;
   readonly mongoProxyAPIs?: string;
   readonly enableThroughputCap: boolean;
+  readonly enableChatbot?: boolean;
 
   // can be set via both flight and feature flag
   autoscaleDefault: boolean;
@@ -90,6 +91,7 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
     partitionKeyDefault2: "true" === get("pkpartitionkeytest"),
     notebooksDownBanner: "true" === get("notebooksDownBanner"),
     enableThroughputCap: "true" === get("enablethroughputcap"),
+    enableChatbot: "true" === get("enablechatbot"),
   };
 }
 

tsconfig.json

@@ -21,7 +21,8 @@
     "resolveJsonModule": true,
     "noEmit": true,
     "types": ["jest"],
-    "baseUrl": "src"
+    "baseUrl": "src",
+    "skipLibCheck": true
   },
   "typedocOptions": {
     "entryPoints": [