Add extension mechanism for query chat mode (#2424)

* feat: Add new button to status bar for query chat mode and extension

* feat: New file for query chat.

* changeset

* split changeset

* rename variables and functions

* fix import statement

.changeset/cuddly-donuts-joke.md

@@ -0,0 +1,3 @@
+---
+'@finos/legend-art': patch
+---

.changeset/three-dancers-share.md

@@ -0,0 +1,5 @@
+---
+'@finos/legend-query-builder': patch
+---
+
+Add extension mechanism for query chat mode

packages/legend-art/src/icon/Icon.ts

@@ -53,6 +53,7 @@ export const CheckSquareIcon = FA.FaCheckSquare;
 export const MinusSquareIcon = FA.FaMinusSquare;
 export const HashtagIcon = FA.FaHashtag;
 export const HammerIcon = FA.FaHammer;
+export const ChatIcon = FA.FaCommentDots;
 export const ClockIcon = FA.FaClock;
 export const EmptyClockIcon = FA.FaRegClock;
 export const ToggleIcon = FA.FaToggleOn;

packages/legend-query-builder/src/components/QueryBuilder.tsx

@@ -41,6 +41,7 @@ import {
   BlankPanelContent,
   ModalFooterButton,
   CalendarClockIcon,
+  ChatIcon,
 } from '@finos/legend-art';
 import { QueryBuilderFilterPanel } from './filter/QueryBuilderFilterPanel.js';
 import { QueryBuilderExplorerPanel } from './explorer/QueryBuilderExplorerPanel.js';
@@ -72,6 +73,7 @@ import { QueryBuilderConstantExpressionPanel } from './QueryBuilderConstantExpre
 import { QUERY_BUILDER_SETTING_KEY } from '../__lib__/QueryBuilderSetting.js';
 import { QUERY_BUILDER_COMPONENT_ELEMENT_ID } from './QueryBuilderComponentElement.js';
 import { DataAccessOverview } from './data-access/DataAccessOverview.js';
+import { QueryChat } from './QueryChat.js';
 
 const QueryBuilderStatusBar = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
@@ -86,6 +88,8 @@ const QueryBuilderStatusBar = observer(
     );
     const toggleAssistant = (): void =>
       applicationStore.assistantService.toggleAssistant();
+    const openQueryChat = (): void =>
+      queryBuilderState.setIsQueryChatOpened(true);
 
     return (
       <div className="query-builder__status-bar">
@@ -117,6 +121,19 @@ const QueryBuilderStatusBar = observer(
               )}
             </>
           )}
+          {queryBuilderState.isQueryChatOpened && (
+            <QueryChat queryBuilderState={queryBuilderState} />
+          )}
+          <button
+            className={clsx(
+              'query-builder__status-bar__action query-builder__status-bar__action__toggler',
+            )}
+            onClick={openQueryChat}
+            tabIndex={-1}
+            title="Open query chat"
+          >
+            <ChatIcon />
+          </button>
           <button
             className={clsx(
               'query-builder__status-bar__action query-builder__status-bar__compile-btn',

packages/legend-query-builder/src/components/QueryChat.tsx

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import {
+  Dialog,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  ModalFooterButton,
+  BlankPanelContent,
+} from '@finos/legend-art';
+import { useApplicationStore } from '@finos/legend-application';
+import type { QueryBuilder_LegendApplicationPlugin_Extension } from '../stores/QueryBuilder_LegendApplicationPlugin_Extension.js';
+import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
+
+export const QueryChat = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const applicationStore = useApplicationStore();
+
+    const extraQueryChatConfigurations = applicationStore.pluginManager
+      .getApplicationPlugins()
+      .flatMap(
+        (plugin) =>
+          (
+            plugin as QueryBuilder_LegendApplicationPlugin_Extension
+          ).getExtraQueryChatRenderers?.() ?? [],
+      );
+
+    return (
+      <Dialog
+        open={queryBuilderState.isQueryChatOpened}
+        onClose={() => queryBuilderState.setIsQueryChatOpened(false)}
+      >
+        <Modal className="query-builder__chat-mode__modal" darkMode={true}>
+          <ModalHeader title="Chat Mode" />
+          <ModalBody className="query-builder__chat-mode__body">
+            <>
+              {extraQueryChatConfigurations.length === 0 ? (
+                <BlankPanelContent>
+                  Chat Mode is not available
+                </BlankPanelContent>
+              ) : (
+                <></>
+              )}
+            </>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              onClick={() => queryBuilderState.setIsQueryChatOpened(false)}
+              text="Close"
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);

packages/legend-query-builder/src/stores/QueryBuilderState.ts

@@ -122,6 +122,7 @@ export abstract class QueryBuilderState implements CommandRegistrar {
   isEditingWatermark = false;
   isCheckingEntitlments = false;
   isCalendarEnabled = false;
+  isQueryChatOpened = false;
 
   class?: Class | undefined;
   mapping?: Mapping | undefined;
@@ -156,6 +157,7 @@ export abstract class QueryBuilderState implements CommandRegistrar {
       class: observable,
       mapping: observable,
       runtimeValue: observable,
+      isQueryChatOpened: observable,
 
       sideBarClassName: computed,
       isQuerySupported: computed,
@@ -169,6 +171,7 @@ export abstract class QueryBuilderState implements CommandRegistrar {
       setClass: action,
       setMapping: action,
       setRuntimeValue: action,
+      setIsQueryChatOpened: action,
 
       resetQueryResult: action,
       resetQueryContent: action,
@@ -243,6 +246,10 @@ export abstract class QueryBuilderState implements CommandRegistrar {
     return this.allVariables.map((e) => e.name);
   }
 
+  setIsQueryChatOpened(val: boolean): void {
+    this.isQueryChatOpened = val;
+  }
+
   setShowFunctionsExplorerPanel(val: boolean): void {
     this.showFunctionsExplorerPanel = val;
   }

packages/legend-query-builder/src/stores/QueryBuilder_LegendApplicationPlugin_Extension.ts

@@ -45,6 +45,10 @@ export type QueryExportUsageConfiguration = {
   renderer(): React.ReactNode;
 };
 
+export type QueryChatRenderer = (
+  queryBuilderState: QueryBuilderState,
+) => React.ReactNode;
+
 export interface QueryBuilder_LegendApplicationPlugin_Extension
   extends LegendApplicationPlugin {
   /**
@@ -61,4 +65,9 @@ export interface QueryBuilder_LegendApplicationPlugin_Extension
    * Get the list of query usage configurations
    */
   getExtraQueryUsageConfigurations?(): QueryExportUsageConfiguration[];
+
+  /**
+   * Get the list of query chat configurations
+   */
+  getExtraQueryChatRenderers?(): QueryChatRenderer[];
 }

packages/legend-query-builder/style/_query-builder.scss

@@ -1591,3 +1591,16 @@
     position: relative;
   }
 }
+
+.query-builder__chat-mode {
+  &__modal {
+    padding: 0;
+    height: 50vh;
+    width: 50vw;
+    overflow: hidden;
+  }
+
+  &__body {
+    height: calc(100% - 8.5rem);
+  }
+}