chatbot sticky button

less/chat.less

@@ -0,0 +1,28 @@
+@import "./Common/Constants";
+
+.chat {
+    display: grid;
+    justify-content: right;
+    padding: 10px;
+
+    .hover {
+        .hover();
+    }
+
+    .chatButton {
+        justify-content: right;
+        margin: 0 9px;
+        border: 10px;
+        min-height: 44px;
+
+
+
+
+        >span {
+            padding-right: 12px;
+            font-size: 20px;
+            font-family: @DataExplorerFont;
+            color: @DefaultFontColor;
+        }
+    }
+}

src/ConfigContext.ts

@@ -9,7 +9,7 @@ import {
   allowedJunoOrigins,
   allowedMongoBackendEndpoints,
   allowedMsalRedirectEndpoints,
-  validateEndpoint,
+  validateEndpoint
 } from "Utils/EndpointValidation";
 
 export enum Platform {
@@ -69,7 +69,7 @@ let configContext: Readonly<ConfigContext> = {
   ARCADIA_LIVY_ENDPOINT_DNS_ZONE: "dev.azuresynapse.net",
   GITHUB_CLIENT_ID: "6cb2f63cf6f7b5cbdeca", // Registered OAuth app: https://github.com/organizations/AzureCosmosDBNotebooks/settings/applications/1189306
   GITHUB_TEST_ENV_CLIENT_ID: "b63fc8cbf87fd3c6e2eb", // Registered OAuth app: https://github.com/organizations/AzureCosmosDBNotebooks/settings/applications/1777772
-  JUNO_ENDPOINT: "https://tools.cosmos.azure.com",
+  JUNO_ENDPOINT: "http://localhost:30003",
   BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
   isTerminalEnabled: false,
   isPhoenixEnabled: false,
@@ -190,3 +190,4 @@ export async function initializeConfiguration(): Promise<ConfigContext> {
 }
 
 export { configContext };
+

src/Explorer/Controls/ChatButton/ChatButtonComponent.tsx

@@ -0,0 +1,41 @@
+import { IIconProps } from '@fluentui/react';
+import { ActionButton } from '@fluentui/react/lib/Button';
+import { AuthType } from 'AuthType';
+import { SupportPaneComponent } from 'Explorer/Controls/SupportPaneComponent/SupportPaneComponent';
+import Explorer from 'Explorer/Explorer';
+import { useSidePanel } from 'hooks/useSidePanel';
+import * as React from 'react';
+import { userContext } from 'UserContext';
+
+export interface ChatButtonProps {
+    container: Explorer;
+}
+
+const chatIcon: IIconProps = { iconName: 'ChatSolid' };
+
+
+
+
+export const ChatButtonAction: React.FunctionComponent<ChatButtonProps> = props => {
+    const { container } = props;
+    if (userContext.authType === AuthType.AAD && userContext.features.enableChatbot) {
+        return (
+            <ActionButton className={"chatButton"} primary={true} iconProps={chatIcon} onClick={() => {
+                useSidePanel
+                    .getState()
+                    .openSidePanel(
+                        "Chat Assistant (Beta)",
+                        <SupportPaneComponent
+                            directLineToken={container.conversationToken()}
+                            userToken={userContext.authorizationToken}
+                            subId={userContext.subscriptionId}
+                            rg={userContext.resourceGroup}
+                            accName={userContext.databaseAccount.name}
+                        />
+                    );
+            }}>
+                <span> Help </span>
+            </ActionButton>
+        );
+    }
+};

src/Explorer/Controls/SupportPaneComponent/SupportPaneComponent.tsx

@@ -24,6 +24,7 @@ export class SupportPaneComponent extends React.Component<SupportPaneComponentPr
     const styleOptions = {
       bubbleBackground: "rgba(0, 0, 255, .1)",
       bubbleFromUserBackground: "rgba(0, 255, 0, .1)",
+      suggestedActionLayout: 'flow',
     };
 
     const directLine = BotFramework.createDirectLine({ token: this.props.directLineToken });
@@ -32,7 +33,7 @@ export class SupportPaneComponent extends React.Component<SupportPaneComponentPr
       postActivity: (activity: Activity) => {
         activity.channelData.token = this.props.userToken;
         activity.channelData.subId = this.props.subId;
-        activity.channelData.rg = this.props.rg;
+        activity.channelData.rg = this.props.rg; // resource group
         activity.channelData.accName = this.props.accName;
 
         return directLine.postActivity(activity);

src/Explorer/Menus/CommandBar/MemoryTrackerComponent.less

@@ -6,17 +6,18 @@
     margin: 0 9px;
     border: 1px;
 
-    > span {
+    >span {
         padding-right: 12px;
         font-size: 13px;
         font-family: @DataExplorerFont;
         color: @DefaultFontColor;
     }
 
-    > .lowMemory {
+    >.lowMemory {
         .ms-ProgressIndicator-progressBar {
             background-color: @SelectionHigh;
         }
+
         .ms-ProgressIndicator-itemDescription {
             color: @SelectionHigh;
         }

src/Main.tsx

@@ -1,6 +1,7 @@
 // CSS Dependencies
 import { initializeIcons } from "@fluentui/react";
 import "bootstrap/dist/css/bootstrap.css";
+import { ChatButtonAction } from "Explorer/Controls/ChatButton/ChatButtonComponent";
 import React, { useState } from "react";
 import ReactDOM from "react-dom";
 import "../externals/jquery-ui.min.css";
@@ -14,6 +15,7 @@ import "../externals/jquery.typeahead.min.js";
 import "../images/CosmosDB_rgb_ui_lighttheme.ico";
 import "../images/favicon.ico";
 import hdeConnectImage from "../images/HdeConnectCosmosDB.svg";
+import "../less/chat.less";
 import "../less/documentDB.less";
 import "../less/forms.less";
 import "../less/infobox.less";
@@ -104,6 +106,9 @@ const App: React.FunctionComponent = () => {
           <Tabs />
         </div>
         {/* Collections Tree and Tabs - End */}
+        <div className="chat">
+          <ChatButtonAction container={explorer} />
+        </div>
         <div
           className="dataExplorerErrorConsoleContainer"
           role="contentinfo"
@@ -112,6 +117,7 @@ const App: React.FunctionComponent = () => {
         >
           <NotificationConsole />
         </div>
+
       </div>
       <SidePanel />
       <Dialog />