Support creating alert in the chat window

CHANGELOG.md

@@ -25,4 +25,5 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Add experimental feature to support text to visualization ([#218](https://github.com/opensearch-project/dashboards-assistant/pull/218))
 - Be compatible with ML configuration index mapping change ([#239](https://github.com/opensearch-project/dashboards-assistant/pull/239))
 - Support context aware alert analysis by reusing incontext insight component([#215](https://github.com/opensearch-project/dashboards-assistant/pull/215))
-Use smaller and compressed variants of buttons and form components ([#250](https://github.com/opensearch-project/dashboards-assistant/pull/250))
+Use smaller and compressed variants of buttons and form components ([#250](https://github.com/opensearch-project/dashboards-assistant/pull/250))
+- Add experimental feature to support create alert by chatbot ([#217](https://github.com/opensearch-project/dashboards-assistant/pull/217))

common/types/chat_saved_object_attributes.ts

@@ -55,19 +55,22 @@ export interface IOutput {
   toolsUsed?: string[];
   contentType: 'error' | 'markdown' | 'visualization' | string;
   content: string;
+  additionalActions?: IAdditionalAction[];
   suggestedActions?: ISuggestedAction[];
   messageId?: string;
   fullWidth?: boolean;
 }
 export type IMessage = IInput | IOutput;
 
-interface ISuggestedActionBase {
+interface IActionBase {
   actionType: string;
   message: string;
 }
-export type ISuggestedAction = ISuggestedActionBase &
+export type ISuggestedAction = IActionBase &
   (
-    | { actionType: 'send_as_input' | 'copy' | 'view_in_dashboards' }
+    | {
+        actionType: 'send_as_input' | 'copy' | 'view_in_dashboards' | 'create_monitor_in_dashboard';
+      }
     | {
         actionType: 'view_ppl_visualization';
         metadata: { query: string; question: string };
@@ -77,6 +80,12 @@ export type ISuggestedAction = ISuggestedActionBase &
         metadata: { interactionId: string };
       }
   );
+
+export type IAdditionalAction = IActionBase & {
+  actionType: 'create_monitor_grid' | 'create_alert_button';
+  content: string;
+};
+
 export interface SendFeedbackBody {
   satisfaction: boolean;
 }

public/chat_flyout.tsx

@@ -12,6 +12,7 @@ import { ChatWindowHeader } from './tabs/chat_window_header';
 import { ChatHistoryPage } from './tabs/history/chat_history_page';
 import { AgentFrameworkTracesFlyoutBody } from './components/agent_framework_traces_flyout_body';
 import { TAB_ID } from './utils/constants';
+import { ChatOverrideHeader } from './tabs/chat_override_header';
 
 interface ChatFlyoutProps {
   flyoutVisible: boolean;
@@ -86,52 +87,55 @@ export const ChatFlyout = (props: ChatFlyoutProps) => {
     >
       <>
         <div className={cs('llm-chat-flyout-header')}>
-          <ChatWindowHeader />
+          {props.overrideComponent ? <ChatOverrideHeader /> : <ChatWindowHeader />}
         </div>
 
-        {props.overrideComponent}
-        <EuiResizableContainer style={{ height: '100%', overflow: 'hidden' }}>
-          {(Panel, Resizer) => (
-            <>
-              <Panel
-                aria-label="chat panel"
-                className={cs('llm-chat-horizontal-resize-panel', {
-                  'llm-chat-hidden': leftPanelSize === 0,
-                })}
-                scrollable={false}
-                size={leftPanelSize}
-                initialSize={resizable ? 70 : undefined}
-                paddingSize="none"
-              >
-                <ChatPage />
-              </Panel>
+        {props.overrideComponent ? (
+          props.overrideComponent
+        ) : (
+          <EuiResizableContainer style={{ height: '100%', overflow: 'hidden' }}>
+            {(Panel, Resizer) => (
               <>
-                {resizable && <Resizer />}
                 <Panel
-                  aria-label="history panel"
+                  aria-label="chat panel"
                   className={cs('llm-chat-horizontal-resize-panel', {
-                    'llm-chat-hidden': leftPanelSize === 100,
+                    'llm-chat-hidden': leftPanelSize === 0,
                   })}
                   scrollable={false}
-                  size={rightPanelSize}
-                  initialSize={resizable ? 30 : undefined}
+                  size={leftPanelSize}
+                  initialSize={resizable ? 70 : undefined}
                   paddingSize="none"
                 >
-                  {chatHistoryPageLoadedRef.current && (
-                    <ChatHistoryPage
-                      // refresh data when user switched to table from another tab
-                      shouldRefresh={chatHistoryPageVisible}
-                      className={cs({ 'llm-chat-hidden': !chatHistoryPageVisible })}
-                    />
-                  )}
-                  {chatTraceVisible && chatContext.interactionId && (
-                    <AgentFrameworkTracesFlyoutBody />
-                  )}
+                  {<ChatPage />}
                 </Panel>
+                <>
+                  {resizable && <Resizer />}
+                  <Panel
+                    aria-label="history panel"
+                    className={cs('llm-chat-horizontal-resize-panel', {
+                      'llm-chat-hidden': leftPanelSize === 100,
+                    })}
+                    scrollable={false}
+                    size={rightPanelSize}
+                    initialSize={resizable ? 30 : undefined}
+                    paddingSize="none"
+                  >
+                    {chatHistoryPageLoadedRef.current && (
+                      <ChatHistoryPage
+                        // refresh data when user switched to table from another tab
+                        shouldRefresh={chatHistoryPageVisible}
+                        className={cs({ 'llm-chat-hidden': !chatHistoryPageVisible })}
+                      />
+                    )}
+                    {chatTraceVisible && chatContext.interactionId && (
+                      <AgentFrameworkTracesFlyoutBody />
+                    )}
+                  </Panel>
+                </>
               </>
-            </>
-          )}
-        </EuiResizableContainer>
+            )}
+          </EuiResizableContainer>
+        )}
       </>
     </div>
   );

public/chat_header_button.tsx

@@ -19,9 +19,10 @@ import { ChatStateProvider } from './hooks';
 import './index.scss';
 import { ActionExecutor, AssistantActions, MessageRenderer, TabId, UserAccount } from './types';
 import {
-  TAB_ID,
   DEFAULT_SIDECAR_DOCKED_MODE,
   DEFAULT_SIDECAR_LEFT_OR_RIGHT_SIZE,
+  OVERRIDE_SIDECAR_LEFT_OR_RIGHT_SIZE,
+  TAB_ID,
 } from './utils/constants';
 import { useCore } from './contexts/core_context';
 import { MountPointPortal } from '../../../src/plugins/opensearch_dashboards_react/public';
@@ -42,6 +43,7 @@ export const HeaderChatButton = (props: HeaderChatButtonProps) => {
   const [conversationId, setConversationId] = useState<string>();
   const [title, setTitle] = useState<string>();
   const [flyoutVisible, setFlyoutVisible] = useState(false);
+  const [overrideName, setOverrideName] = useState<string>();
   const [flyoutComponent, setFlyoutComponent] = useState<React.ReactNode | null>(null);
   const [selectedTabId, setSelectedTabId] = useState<TabId>(TAB_ID.CHAT);
   const [preSelectedTabId, setPreSelectedTabId] = useState<TabId | undefined>(undefined);
@@ -76,6 +78,8 @@ export const HeaderChatButton = (props: HeaderChatButtonProps) => {
       flyoutFullScreen,
       setFlyoutVisible,
       setFlyoutComponent,
+      overrideName,
+      setOverrideName,
       messageRenderers: props.messageRenderers,
       actionExecutors: props.actionExecutors,
       currentAccount: props.currentAccount,
@@ -156,6 +160,17 @@ export const HeaderChatButton = (props: HeaderChatButtonProps) => {
     flyoutMountPoint.current = mountPoint;
   }, []);
 
+  useEffect(() => {
+    if (flyoutLoaded && flyoutVisible) {
+      core.overlays.sidecar().setSidecarConfig({
+        paddingSize:
+          selectedTabId === TAB_ID.OVERRIDE
+            ? OVERRIDE_SIDECAR_LEFT_OR_RIGHT_SIZE
+            : DEFAULT_SIDECAR_LEFT_OR_RIGHT_SIZE,
+      });
+    }
+  }, [selectedTabId === TAB_ID.OVERRIDE]);
+
   useEffect(() => {
     const onGlobalMouseUp = (e: KeyboardEvent) => {
       if (e.ctrlKey && e.key === '/') {

public/contexts/chat_context.tsx

@@ -18,6 +18,8 @@ export interface IChatContext {
   flyoutFullScreen: boolean;
   setFlyoutVisible: React.Dispatch<React.SetStateAction<boolean>>;
   setFlyoutComponent: React.Dispatch<React.SetStateAction<React.ReactNode | null>>;
+  overrideName?: string;
+  setOverrideName: React.Dispatch<React.SetStateAction<string | undefined>>;
   messageRenderers: Record<string, MessageRenderer>;
   actionExecutors: Record<string, ActionExecutor>;
   currentAccount?: UserAccount;

public/index.scss

@@ -68,6 +68,8 @@
 
 .llm-chat-flyout {
   height: 100%;
+  display: flex;
+  flex-direction: column;
   .euiFlyoutFooter {
     background: transparent;
   }
@@ -93,7 +95,6 @@
 }
 
 .llm-chat-flyout-footer {
-  padding-bottom: 24px;
 }
 
 .llm-chat-bubble-wrapper {

public/index.ts

@@ -23,3 +23,4 @@ export function plugin(initializerContext: PluginInitializerContext) {
 
 export { AssistantSetup, RenderProps } from './types';
 export { IMessage } from '../common/types/chat_saved_object_attributes';
+export { TAB_ID } from './utils/constants';

public/tabs/chat/messages/message_content.test.tsx

@@ -77,6 +77,50 @@ describe('<MessageContent />', () => {
     expect(screen.queryAllByText('title')).toHaveLength(1);
   });
 
+  it('should display message(markdown + additionalAction)', () => {
+    render(
+      <MessageContent
+        message={{
+          type: 'output',
+          contentType: 'markdown',
+          additionalActions: [
+            {
+              actionType: 'customized_content_type',
+              message: 'customized title',
+              content: 'mock customized content',
+            },
+          ],
+          content: '# title',
+        }}
+      />
+    );
+    expect(screen.queryAllByText('title')).toHaveLength(1);
+    expect(customizedRenderMock.mock.calls[0][0]).toMatchInlineSnapshot(`
+      Object {
+        "content": "mock customized content",
+        "contentType": "customized_content_type",
+        "type": "output",
+      }
+    `);
+    expect(customizedRenderMock.mock.calls[0][1].props).toMatchInlineSnapshot(`
+      Object {
+        "message": Object {
+          "additionalActions": Array [
+            Object {
+              "actionType": "customized_content_type",
+              "content": "mock customized content",
+              "message": "customized title",
+            },
+          ],
+          "content": "# title",
+          "contentType": "markdown",
+          "type": "output",
+        },
+      }
+    `);
+    expect(customizedRenderMock.mock.calls[0][1].chatContext).not.toBeUndefined();
+  });
+
   it('should render customized render content', () => {
     render(
       <MessageContent

public/tabs/chat/messages/message_content.tsx

@@ -3,11 +3,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiMarkdownFormat, EuiText } from '@elastic/eui';
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiMarkdownFormat, EuiText } from '@elastic/eui';
 import React from 'react';
 import { IMessage } from '../../../../common/types/chat_saved_object_attributes';
 import { CoreVisualization } from '../../../components/core_visualization';
 import { useChatContext } from '../../../contexts/chat_context';
+import { TAB_ID } from '../../../utils/constants';
 
 export interface MessageContentProps {
   message: IMessage;
@@ -28,7 +29,22 @@ export const MessageContent: React.FC<MessageContentProps> = React.memo((props)
       );
 
     case 'markdown':
-      return <EuiMarkdownFormat>{props.message.content}</EuiMarkdownFormat>;
+      return (
+        <>
+          <EuiMarkdownFormat>{props.message.content}</EuiMarkdownFormat>
+          {props.message.additionalActions &&
+            props.message.additionalActions.map((action, index) => (
+              <div key={'action-' + index}>
+                {chatContext.messageRenderers[action.actionType]?.(
+                  {
+                    ...{ type: 'output', contentType: action.actionType, content: action.content },
+                  },
+                  { props, chatContext }
+                ) ?? null}
+              </div>
+            ))}
+        </>
+      );
 
     case 'visualization':
       return (

public/tabs/chat_override_header.tsx

@@ -0,0 +1,53 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiButtonEmpty, EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
+import React, { useCallback } from 'react';
+import { IChatContext, useChatContext } from '../contexts/chat_context';
+import { TAB_ID } from '../utils/constants';
+import { SidecarIconMenu } from '../components/sidecar_icon_menu';
+
+export const ChatOverrideHeader = React.memo(() => {
+  const chatContext = useChatContext() as IChatContext;
+  const { setSelectedTabId, setFlyoutComponent, setOverrideName } = chatContext;
+
+  const handleBack = useCallback(() => {
+    setSelectedTabId(TAB_ID.CHAT);
+    setFlyoutComponent(null);
+    setOverrideName(undefined);
+  }, [setSelectedTabId]);
+
+  return (
+    <>
+      <EuiFlexGroup
+        gutterSize="s"
+        justifyContent="spaceAround"
+        alignItems="center"
+        responsive={false}
+      >
+        <EuiFlexItem>
+          <EuiFlexGroup gutterSize="none" alignItems="center" responsive={false}>
+            <EuiButtonEmpty flush="left" size="xs" onClick={handleBack} iconType="arrowLeft">
+              {chatContext?.overrideName || 'Back'}
+            </EuiButtonEmpty>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        <SidecarIconMenu />
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            aria-label="close"
+            size="xs"
+            color="text"
+            iconType="cross"
+            onClick={() => {
+              chatContext.setFlyoutVisible(false);
+            }}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false} />
+      </EuiFlexGroup>
+    </>
+  );
+});

public/types.ts

@@ -10,6 +10,7 @@ import { IChatContext } from './contexts/chat_context';
 import { MessageContentProps } from './tabs/chat/messages/message_content';
 import { DataSourceServiceContract, IncontextInsightRegistry } from './services';
 import { DataSourceManagementPluginSetup } from '../../../src/plugins/data_source_management/public';
+import { TAB_ID } from './utils/constants';
 import {
   VisualizationsSetup,
   VisualizationsStart,
@@ -103,4 +104,4 @@ export type IncontextInsightType =
   | 'chatWithSuggestions'
   | 'error';
 
-export type TabId = 'chat' | 'compose' | 'insights' | 'history' | 'trace';
+export type TabId = TAB_ID;

public/utils/constants.ts

@@ -10,10 +10,12 @@ export enum TAB_ID {
   INSIGHTS = 'insights',
   HISTORY = 'history',
   TRACE = 'trace',
+  OVERRIDE = 'override',
 }
 
 export const DEFAULT_SIDECAR_DOCKED_MODE = SIDECAR_DOCKED_MODE.RIGHT;
 export const DEFAULT_SIDECAR_LEFT_OR_RIGHT_SIZE = 460;
+export const OVERRIDE_SIDECAR_LEFT_OR_RIGHT_SIZE = 570;
 // this is a default padding top size for sidecar when switching to takeover
 export const DEFAULT_SIDECAR_TAKEOVER_PADDING_TOP_SIZE = 136;