[Incontext insights] clean up components and usability

common/constants/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const INCONTEXT_INSIGHT_INITIAL_ONLOAD_TIME_SETTING = 'incontextInsight:initialOnloadTime';

public/components/__tests__/incontext_insight.test.tsx

@@ -6,7 +6,12 @@
 import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import { IncontextInsight } from '../incontext_insight';
-import { getChrome, getNotifications, getIncontextInsightRegistry } from '../../services';
+import {
+  getChrome,
+  getNotifications,
+  getIncontextInsightRegistry,
+  getUISettings,
+} from '../../services';
 
 jest.mock('../../services');
 
@@ -21,6 +26,9 @@ beforeEach(() => {
     },
   }));
   (getIncontextInsightRegistry as jest.Mock).mockImplementation(() => {});
+  (getUISettings as jest.Mock).mockImplementation(() => ({
+    get: jest.fn(),
+  }));
 });
 
 describe('IncontextInsight', () => {

public/components/incontext_insight/components/chat_popover_body.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiButton, EuiFieldText, EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
+import React from 'react';
+import { IToasts } from '../../../../../../src/core/public';
+
+export interface ChatPopoverBodyProps {
+  toasts: IToasts;
+}
+
+export const ChatPopoverBody: React.FC<ChatPopoverBodyProps> = ({ toasts }) => (
+  <EuiFlexGroup>
+    <EuiFlexItem grow={6}>
+      <EuiFormRow>
+        <EuiFieldText placeholder="Ask a question" />
+      </EuiFormRow>
+    </EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      <EuiButton
+        fill
+        iconType="returnKey"
+        iconSide="right"
+        onClick={() => toasts.addDanger('To be implemented...')}
+      >
+        Go
+      </EuiButton>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);

public/components/incontext_insight/components/chat_with_suggestions_popover.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { IncontextInsight as IncontextInsightInput } from '../../../types';
+import { SuggestionsPopoverFooter } from './suggestions_popover_footer';
+import { ChatPopoverBody } from './chat_popover_body';
+import { IToasts } from '../../../../../../src/core/public';
+
+export interface ChatWithSuggestionsProps {
+  toasts: IToasts;
+  incontextInsight: IncontextInsightInput;
+  suggestions: string[];
+  onSubmitClick: (incontextInsight: IncontextInsightInput, suggestion: string) => void;
+}
+
+export const ChatWithSuggestionsPopover: React.FC<ChatWithSuggestionsProps> = ({
+  toasts,
+  incontextInsight,
+  suggestions,
+  onSubmitClick,
+}) => (
+  <>
+    {<ChatPopoverBody toasts={toasts} />}
+    {
+      <SuggestionsPopoverFooter
+        incontextInsight={incontextInsight}
+        suggestions={suggestions}
+        onSubmitClick={onSubmitClick}
+      />
+    }
+  </>
+);

public/components/incontext_insight/components/generate_summary_popover_body.tsx

@@ -0,0 +1,18 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiButton } from '@elastic/eui';
+import React from 'react';
+import { IToasts } from '../../../../../../src/core/public';
+
+export interface GenerateSummaryPopoverBodyProps {
+  toasts: IToasts;
+}
+
+export const GenerateSummaryPopoverBody: React.FC<GenerateSummaryPopoverBodyProps> = ({
+  toasts,
+}) => (
+  <EuiButton onClick={() => toasts.addDanger('To be implemented...')}>Generate summary</EuiButton>
+);

public/components/incontext_insight/components/index.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { ChatPopoverBody } from './chat_popover_body';
+export { ChatWithSuggestionsPopover } from './chat_with_suggestions_popover';
+export { GenerateSummaryPopoverBody } from './generate_summary_popover_body';
+export { SuggestionsPopoverFooter } from './suggestions_popover_footer';
+export { SummaryPopoverBody } from './summary_popover_body';
+export { SummaryWithSuggestionsPopover } from './summary_with_suggestions_popover';

public/components/incontext_insight/components/suggestions_popover_footer.tsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { i18n } from '@osd/i18n';
+import { EuiText, EuiPopoverFooter, EuiSpacer, EuiListGroup, EuiListGroupItem } from '@elastic/eui';
+import React from 'react';
+import { IncontextInsight as IncontextInsightInput } from '../../../types';
+
+export interface SuggestionsPopoverFooterProps {
+  incontextInsight: IncontextInsightInput;
+  suggestions: string[];
+  onSubmitClick: (incontextInsight: IncontextInsightInput, suggestion: string) => void;
+}
+
+export const SuggestionsPopoverFooter: React.FC<SuggestionsPopoverFooterProps> = ({
+  incontextInsight,
+  suggestions,
+  onSubmitClick,
+}) => (
+  <EuiPopoverFooter className="incontextInsightPopoverFooter" paddingSize="none">
+    <EuiText size="xs" color="subdued">
+      {i18n.translate('assistantDashboards.incontextInsight.availableSuggestions', {
+        defaultMessage: 'Available suggestions',
+      })}
+    </EuiText>
+    <EuiListGroup flush>
+      {suggestions.map((suggestion, index) => (
+        <div key={`${incontextInsight.key}-${index}-${incontextInsight.interactionId}`}>
+          <EuiSpacer size="xs" />
+          <EuiListGroupItem
+            label={suggestion}
+            className="incontextInsightSuggestionListItem"
+            color="subdued"
+            iconType="chatRight"
+            iconProps={{ size: 's' }}
+            onClick={() => onSubmitClick(incontextInsight, suggestion)}
+            aria-label={suggestion}
+            wrapText
+            size="xs"
+            extraAction={{
+              onClick: () => onSubmitClick(incontextInsight, suggestion),
+              iconType: 'sortRight',
+              iconSize: 's',
+              alwaysShow: true,
+              color: 'subdued',
+            }}
+          />
+        </div>
+      ))}
+    </EuiListGroup>
+  </EuiPopoverFooter>
+);

public/components/incontext_insight/components/summary_popover_body.tsx

@@ -0,0 +1,18 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiText, EuiPanel } from '@elastic/eui';
+import React from 'react';
+import { IncontextInsight as IncontextInsightInput } from '../../../types';
+
+export interface SummaryPopoverBodyProps {
+  incontextInsight: IncontextInsightInput;
+}
+
+export const SummaryPopoverBody: React.FC<SummaryPopoverBodyProps> = ({ incontextInsight }) => (
+  <EuiPanel paddingSize="s" hasBorder hasShadow={false} color="subdued">
+    <EuiText size="s">{incontextInsight.summary}</EuiText>
+  </EuiPanel>
+);

public/components/incontext_insight/components/summary_with_suggestions_popover.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { IncontextInsight as IncontextInsightInput } from '../../../types';
+import { SummaryPopoverBody } from './summary_popover_body';
+import { SuggestionsPopoverFooter } from './suggestions_popover_footer';
+
+export interface SummaryWithSuggestionsProps {
+  incontextInsight: IncontextInsightInput;
+  suggestions: string[];
+  onSubmitClick: (incontextInsight: IncontextInsightInput, suggestion: string) => void;
+}
+
+export const SummaryWithSuggestionsPopover: React.FC<SummaryWithSuggestionsProps> = ({
+  incontextInsight,
+  suggestions,
+  onSubmitClick,
+}) => (
+  <>
+    {<SummaryPopoverBody incontextInsight={incontextInsight} />}
+    {
+      <SuggestionsPopoverFooter
+        incontextInsight={incontextInsight}
+        suggestions={suggestions}
+        onSubmitClick={onSubmitClick}
+      />
+    }
+  </>
+);

public/components/incontext_insight/index.scss

@@ -110,15 +110,8 @@
   width: 300px;
 }
 
-.incontextInsightSummary {
-  border: $euiBorderThin;
-  border-radius: 4px;
-}
-
 .incontextInsightSuggestionListItem {
   margin-top: 0;
-  border: $euiBorderThin;
-  border-radius: 4px;
 
   .euiListGroupItem__button {
     padding: 0;