From 7e2525d31756ab1505cfee77a98e9bcfdc459f2d Mon Sep 17 00:00:00 2001
From: Coen Warmer <coen.warmer@gmail.com>
Date: Wed, 19 Jul 2023 15:29:14 +0200
Subject: [PATCH 1/3] Update AskAssistantButton to include Sparkles from Eui

---
 .../ask_assistant_button.stories.tsx          |  1 -
 .../components/ask_assistant_button.tsx       | 66 +++++++------------
 2 files changed, 22 insertions(+), 45 deletions(-)

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/ask_assistant_button.stories.tsx b/x-pack/plugins/observability_ai_assistant/public/components/ask_assistant_button.stories.tsx
index d7bbf498f0eec..9c0d19e3c4b75 100644
--- a/x-pack/plugins/observability_ai_assistant/public/components/ask_assistant_button.stories.tsx
+++ b/x-pack/plugins/observability_ai_assistant/public/components/ask_assistant_button.stories.tsx
@@ -43,7 +43,6 @@ const Template: ComponentStory<typeof Component> = (props: AskAssistantButtonPro
 
 const defaultProps = {
   fill: true,
-  iconOnly: false,
   size: 'm' as EuiButtonSize,
   variant: 'basic' as const,
 };
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/ask_assistant_button.tsx b/x-pack/plugins/observability_ai_assistant/public/components/ask_assistant_button.tsx
index 04e3e21b10d03..f14b046b3caba 100644
--- a/x-pack/plugins/observability_ai_assistant/public/components/ask_assistant_button.tsx
+++ b/x-pack/plugins/observability_ai_assistant/public/components/ask_assistant_button.tsx
@@ -11,14 +11,14 @@ import {
   EuiButtonEmpty,
   EuiButtonSize,
   EuiButtonEmptySizes,
-  useEuiTheme,
   EuiToolTip,
+  EuiButtonIcon,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 export type AskAssistantButtonProps = (
   | {
-      variant: 'basic' | 'iconOnly';
+      variant: 'basic';
       size: EuiButtonSize;
       fill?: boolean;
       flush?: false;
@@ -29,14 +29,16 @@ export type AskAssistantButtonProps = (
       fill?: false;
       flush?: 'both';
     }
+  | {
+      variant: 'iconOnly';
+      size: EuiButtonSize;
+      fill?: boolean;
+      flush?: false;
+    }
 ) & {
   onClick: () => void;
 };
 
-// In order to leverage all the styling / display code that Eui buttons provide,
-// we need to have the Sparkle icon part of EuiIcons. While we wait for that to land
-// we have to redo some of that logic below. Todo: cleanup once Sparkle icon lands.
-
 export function AskAssistantButton({
   fill,
   flush,
@@ -44,31 +46,22 @@ export function AskAssistantButton({
   variant,
   onClick,
 }: AskAssistantButtonProps) {
-  const contents = (
-    <>
-      <SparkleIcon color={variant !== 'empty' && fill ? 'white' : 'blue'} size={size} />
-      {variant === 'empty' ? ' ' : null}
-
-      {variant === 'iconOnly'
-        ? null
-        : i18n.translate('xpack.obsAiAssistant.askAssistantButton.buttonLabel', {
-            defaultMessage: 'Ask Assistant',
-          })}
-    </>
-  );
+  const buttonLabel = i18n.translate('xpack.obsAiAssistant.askAssistantButton.buttonLabel', {
+    defaultMessage: 'Ask Assistant',
+  });
 
   switch (variant) {
     case 'basic':
       return (
-        <EuiButton fill={fill} size={size} onClick={onClick}>
-          {contents}
+        <EuiButton fill={fill} size={size} iconType="sparkles" onClick={onClick}>
+          {buttonLabel}
         </EuiButton>
       );
 
     case 'empty':
       return (
-        <EuiButtonEmpty size={size} flush={flush} onClick={onClick}>
-          {contents}
+        <EuiButtonEmpty size={size} flush={flush} iconType="sparkles" onClick={onClick}>
+          {buttonLabel}
         </EuiButtonEmpty>
       );
 
@@ -83,29 +76,14 @@ export function AskAssistantButton({
             defaultMessage: 'Get insights into your data with the Elastic Assistant',
           })}
         >
-          <EuiButton fill={fill} size={size} style={{ minWidth: 'auto' }} onClick={onClick}>
-            {contents}
-          </EuiButton>
+          <EuiButtonIcon
+            iconType="sparkles"
+            display={fill ? 'fill' : 'base'}
+            size={size}
+            style={{ minWidth: 'auto' }}
+            onClick={onClick}
+          />
         </EuiToolTip>
       );
   }
 }
-
-// This icon is temporary and should be removed once it lands in Eui.
-function SparkleIcon({ size, color }: { size: 'xs' | 's' | 'm'; color: 'white' | 'blue' }) {
-  const { euiTheme } = useEuiTheme();
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size === 'xs' ? 9.75 : 13}
-      height={size === 'xs' ? 9.75 : 13}
-      fill="none"
-    >
-      <path
-        fill={color === 'white' ? '#fff' : euiTheme.colors.primaryText}
-        d="m4.016 2.382.035-.092a.492.492 0 0 1 .898 0l.035.092a5.9 5.9 0 0 0 3.38 3.536c.061.025.125.05.253.097l.093.036a.492.492 0 0 1 0 .897l-.093.036a5.9 5.9 0 0 0-3.633 3.633l-.035.092a.492.492 0 0 1-.898 0l-.035-.092A5.9 5.9 0 0 0 .636 7.08c-.06-.025-.125-.05-.253-.097a2.17 2.17 0 0 1-.093-.036.492.492 0 0 1 0-.897l.093-.036.253-.096a5.9 5.9 0 0 0 3.38-3.537ZM10.785.17A.973.973 0 0 1 10.8.129a.219.219 0 0 1 .398 0 2.622 2.622 0 0 0 1.518 1.613l.113.042.04.016a.219.219 0 0 1 0 .399l-.04.016-.113.043a2.622 2.622 0 0 0-1.502 1.571.972.972 0 0 1-.016.041.219.219 0 0 1-.398 0 2.622 2.622 0 0 0-1.63-1.656.94.94 0 0 1-.042-.015.219.219 0 0 1 0-.399.968.968 0 0 1 .041-.016l.113-.043A2.622 2.622 0 0 0 10.785.17ZM10.23 8.212l.02-.051a.273.273 0 0 1 .5 0l.02.051.053.14c.333.833.992 1.492 1.824 1.825l.14.053.052.02a.273.273 0 0 1 0 .499l-.052.02-.14.053a3.278 3.278 0 0 0-1.824 1.824l-.054.14c-.01.03-.016.044-.02.052a.273.273 0 0 1-.498 0 1.282 1.282 0 0 1-.02-.051c-.027-.071-.04-.107-.054-.14a3.278 3.278 0 0 0-1.824-1.825l-.14-.053-.052-.02a.273.273 0 0 1 0-.499 1.24 1.24 0 0 1 .052-.02l.14-.053a3.278 3.278 0 0 0 1.824-1.824l.054-.14Z"
-      />
-    </svg>
-  );
-}

From a9c59b6b6c20b5adacecfbd7672605ca7e99001a Mon Sep 17 00:00:00 2001
From: Coen Warmer <coen.warmer@gmail.com>
Date: Wed, 19 Jul 2023 22:38:01 +0200
Subject: [PATCH 2/3] Added Insight component

---
 .../public/components/feedback_buttons.tsx    |  62 +++++++
 .../components/insight/insight.stories.tsx    |  42 +++++
 .../public/components/insight/insight.tsx     | 171 ++++++++++++++++++
 .../components/insight/insight_error.tsx      |  34 ++++
 .../insight/insight_generated_response.tsx    |  79 ++++++++
 .../insight/insight_missing_credentials.tsx   |  35 ++++
 .../components/insight/use_streaming_words.ts |  28 +++
 .../components/insight_panel.stories.tsx      |  28 ---
 .../public/components/insight_panel.tsx       |  50 -----
 .../public/utils/storybook_decorator.tsx      |  27 +++
 10 files changed, 478 insertions(+), 78 deletions(-)
 create mode 100644 x-pack/plugins/observability_ai_assistant/public/components/feedback_buttons.tsx
 create mode 100644 x-pack/plugins/observability_ai_assistant/public/components/insight/insight.stories.tsx
 create mode 100644 x-pack/plugins/observability_ai_assistant/public/components/insight/insight.tsx
 create mode 100644 x-pack/plugins/observability_ai_assistant/public/components/insight/insight_error.tsx
 create mode 100644 x-pack/plugins/observability_ai_assistant/public/components/insight/insight_generated_response.tsx
 create mode 100644 x-pack/plugins/observability_ai_assistant/public/components/insight/insight_missing_credentials.tsx
 create mode 100644 x-pack/plugins/observability_ai_assistant/public/components/insight/use_streaming_words.ts
 delete mode 100644 x-pack/plugins/observability_ai_assistant/public/components/insight_panel.stories.tsx
 delete mode 100644 x-pack/plugins/observability_ai_assistant/public/components/insight_panel.tsx
 create mode 100644 x-pack/plugins/observability_ai_assistant/public/utils/storybook_decorator.tsx

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/feedback_buttons.tsx b/x-pack/plugins/observability_ai_assistant/public/components/feedback_buttons.tsx
new file mode 100644
index 0000000000000..2e960e5d771e6
--- /dev/null
+++ b/x-pack/plugins/observability_ai_assistant/public/components/feedback_buttons.tsx
@@ -0,0 +1,62 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+
+export type Feedback = 'positive' | 'negative';
+
+interface FeedbackButtonsProps {
+  onClickFeedback: (feedback: Feedback) => void;
+}
+
+export function FeedbackButtons({ onClickFeedback }: FeedbackButtonsProps) {
+  return (
+    <EuiFlexGroup responsive={false} direction="row" alignItems="center" gutterSize="s">
+      <EuiFlexItem grow={false}>
+        <EuiText color="subdued" size="s">
+          <em>
+            {i18n.translate('xpack.obsAiAssistant.insight.feedbackButtons.title', {
+              defaultMessage: 'Was this helpful?',
+            })}
+          </em>
+        </EuiText>
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup responsive={false} direction="row" alignItems="center" gutterSize="xs">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              color="success"
+              iconType="faceHappy"
+              size="s"
+              onClick={() => onClickFeedback('positive')}
+            >
+              {i18n.translate('xpack.obsAiAssistant.insight.feedbackButtons.positive', {
+                defaultMessage: 'Yes',
+              })}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              color="danger"
+              iconType="faceSad"
+              size="s"
+              onClick={() => onClickFeedback('negative')}
+            >
+              {i18n.translate('xpack.obsAiAssistant.insight.feedbackButtons.negative', {
+                defaultMessage: 'No',
+              })}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/insight/insight.stories.tsx b/x-pack/plugins/observability_ai_assistant/public/components/insight/insight.stories.tsx
new file mode 100644
index 0000000000000..8ca01d2f2588c
--- /dev/null
+++ b/x-pack/plugins/observability_ai_assistant/public/components/insight/insight.stories.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { ComponentStory } from '@storybook/react';
+
+import { Insight as Component, InsightProps } from './insight';
+import { KibanaReactStorybookDecorator } from '../../utils/storybook_decorator';
+
+export default {
+  component: Component,
+  title: 'app/Molecules/Insight',
+  argTypes: {
+    debug: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  decorators: [KibanaReactStorybookDecorator],
+};
+
+const Template: ComponentStory<typeof Component> = (props: InsightProps) => (
+  <Component {...props} />
+);
+
+const defaultProps = {
+  title: 'Elastic Assistant',
+  actions: [
+    { id: 'foo', label: 'Put hands in pockets', handler: () => {} },
+    { id: 'bar', label: 'Drop kick', handler: () => {} },
+  ],
+  description: 'What is the root cause of performance degradation in my service?',
+  debug: true,
+};
+
+export const Insight = Template.bind({});
+Insight.args = defaultProps;
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/insight/insight.tsx b/x-pack/plugins/observability_ai_assistant/public/components/insight/insight.tsx
new file mode 100644
index 0000000000000..cc16f02be5f36
--- /dev/null
+++ b/x-pack/plugins/observability_ai_assistant/public/components/insight/insight.tsx
@@ -0,0 +1,171 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useState } from 'react';
+import { i18n } from '@kbn/i18n';
+import {
+  EuiAccordion,
+  EuiButtonIcon,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiFilterButton,
+  EuiFilterGroup,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiPopover,
+  EuiSpacer,
+  EuiText,
+  useEuiTheme,
+} from '@elastic/eui';
+import moment from 'moment';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { AssistantAvatar } from '../assistant_avatar';
+import { InsightMissingCredentials } from './insight_missing_credentials';
+import { InsightError } from './insight_error';
+import { InsightGeneratedResponse } from './insight_generated_response';
+import { Feedback } from '../feedback_buttons';
+
+export interface InsightProps {
+  title: string;
+  description?: string;
+  date?: Date;
+  debug?: boolean;
+  actions: Array<{ id: string; label: string; icon?: string; handler: () => void }>;
+}
+
+export function Insight({
+  title,
+  description,
+  date = new Date(),
+  debug,
+  actions = [],
+}: InsightProps) {
+  const { euiTheme } = useEuiTheme();
+  const { uiSettings } = useKibana().services;
+
+  const dateFormat = uiSettings?.get('dateFormat');
+
+  const [isActionsPopoverOpen, setIsActionsPopover] = useState(false);
+
+  const [state, setState] = useState<'missing' | 'error' | 'insightGenerated'>('insightGenerated');
+
+  const handleClickActions = () => {
+    setIsActionsPopover(!isActionsPopoverOpen);
+  };
+
+  const handleFeedback = (feedback: Feedback) => {};
+
+  const handleRegenerate = () => {};
+
+  const handleStartChat = () => {};
+
+  return (
+    <EuiPanel hasBorder hasShadow={false}>
+      <EuiAccordion
+        id="obsAiAssistantInsight"
+        arrowProps={{ css: { alignSelf: 'flex-start' } }}
+        buttonContent={
+          <EuiFlexGroup wrap responsive={false} gutterSize="m">
+            <EuiFlexItem grow={false}>
+              <EuiSpacer size="xs" />
+              <AssistantAvatar size="xs" />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiText css={{ marginTop: 2, marginBottom: 1 }}>
+                <h5>{title}</h5>
+              </EuiText>
+
+              <EuiText size="s" css={{ color: euiTheme.colors.subduedText }}>
+                <span>{description}</span>
+              </EuiText>
+
+              <EuiSpacer size="xs" />
+
+              <EuiText size="xs" css={{ color: euiTheme.colors.subduedText }}>
+                <strong>
+                  {i18n.translate('xpack.obsAiAssistant.insight.generatedAt', {
+                    defaultMessage: 'Generated at',
+                  })}{' '}
+                  {moment(date).format(dateFormat)}
+                </strong>
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        }
+        extraAction={
+          <EuiPopover
+            anchorPosition="downLeft"
+            button={
+              <EuiButtonIcon
+                aria-label={i18n.translate('xpack.obsAiAssistant.insight.actions', {
+                  defaultMessage: 'Actions',
+                })}
+                color="text"
+                css={{ alignSelf: 'flex-start' }}
+                disabled={actions.length === 0}
+                display="empty"
+                iconType="boxesHorizontal"
+                size="s"
+                onClick={handleClickActions}
+              />
+            }
+            panelPaddingSize="s"
+            closePopover={handleClickActions}
+            isOpen={isActionsPopoverOpen}
+          >
+            <EuiContextMenuPanel
+              size="s"
+              items={actions.map(({ id, icon, label, handler }) => (
+                <EuiContextMenuItem key={id} icon={icon} onClick={handler}>
+                  {label}
+                </EuiContextMenuItem>
+              ))}
+            />
+          </EuiPopover>
+        }
+      >
+        <EuiSpacer size="m" />
+
+        {/* Debug controls. */}
+        {debug ? (
+          <EuiFilterGroup style={{ position: 'absolute', bottom: 20, left: 20 }}>
+            <EuiFilterButton
+              hasActiveFilters={state === 'insightGenerated'}
+              onClick={() => setState('insightGenerated')}
+            >
+              Normal
+            </EuiFilterButton>
+            <EuiFilterButton
+              withNext
+              hasActiveFilters={state === 'missing'}
+              onClick={() => setState('missing')}
+            >
+              Missing credentials
+            </EuiFilterButton>
+            <EuiFilterButton hasActiveFilters={state === 'error'} onClick={() => setState('error')}>
+              Error
+            </EuiFilterButton>
+          </EuiFilterGroup>
+        ) : null}
+
+        {state === 'insightGenerated' ? (
+          <InsightGeneratedResponse
+            answer={''}
+            onClickFeedback={handleFeedback}
+            onClickRegenerate={handleRegenerate}
+            onClickStartChat={handleStartChat}
+          />
+        ) : null}
+
+        {state === 'error' ? <InsightError /> : null}
+
+        {state === 'missing' ? <InsightMissingCredentials /> : null}
+      </EuiAccordion>
+    </EuiPanel>
+  );
+}
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/insight/insight_error.tsx b/x-pack/plugins/observability_ai_assistant/public/components/insight/insight_error.tsx
new file mode 100644
index 0000000000000..475d0df97eaa9
--- /dev/null
+++ b/x-pack/plugins/observability_ai_assistant/public/components/insight/insight_error.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiButton, EuiCallOut, EuiSpacer } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export function InsightError() {
+  return (
+    <EuiCallOut
+      title={i18n.translate('xpack.obsAiAssistant.insight.error.title', {
+        defaultMessage: 'Error',
+      })}
+      color="danger"
+      iconType="error"
+    >
+      {i18n.translate('xpack.obsAiAssistant.insight.error.description', {
+        defaultMessage: 'An error occured.',
+      })}
+
+      <EuiSpacer size="m" />
+
+      <EuiButton fill color="danger">
+        {i18n.translate('xpack.obsAiAssistant.insight.error.buttonLabel', {
+          defaultMessage: 'Regenerate',
+        })}
+      </EuiButton>
+    </EuiCallOut>
+  );
+}
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/insight/insight_generated_response.tsx b/x-pack/plugins/observability_ai_assistant/public/components/insight/insight_generated_response.tsx
new file mode 100644
index 0000000000000..214ded3875706
--- /dev/null
+++ b/x-pack/plugins/observability_ai_assistant/public/components/insight/insight_generated_response.tsx
@@ -0,0 +1,79 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiPanel,
+  EuiText,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { Feedback, FeedbackButtons } from '../feedback_buttons';
+import { useStreamingText } from './use_streaming_words';
+interface InsightGeneratedResponseProps {
+  answer: string;
+  onClickFeedback: (feedback: Feedback) => void;
+  onClickRegenerate: () => void;
+  onClickStartChat: () => void;
+}
+
+export function InsightGeneratedResponse({
+  onClickFeedback,
+  onClickRegenerate,
+  onClickStartChat,
+}: InsightGeneratedResponseProps) {
+  const answer = useStreamingText({
+    message: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+
+Aliquam commodo sollicitudin erat in ultrices. Vestibulum euismod ex ac lectus semper hendrerit. 
+
+Morbi mattis odio justo, in ullamcorper metus aliquet eu. Praesent risus velit, rutrum ac magna non, vehicula vestibulum sapien. Quisque pulvinar eros eu finibus iaculis. 
+
+Morbi dapibus sapien lacus, vitae suscipit ex egestas pharetra. In velit eros, fermentum sit amet augue ut, aliquam sodales nulla. Nunc mattis lobortis eros sit amet dapibus. 
+
+      Morbi non faucibus massa. Aliquam sed augue in eros ornare luctus sit amet cursus dolor. Pellentesque pellentesque lorem eu odio auctor convallis. Sed sodales felis at velit tempus tincidunt. Nulla sed ante cursus nibh mollis blandit. In mattis imperdiet tellus. Vestibulum nisl turpis, efficitur quis sollicitudin id, mollis in arcu. Vestibulum pulvinar tincidunt magna, vitae facilisis massa congue quis. Cras commodo efficitur tellus, et commodo risus rutrum at.`,
+  });
+  return (
+    <EuiPanel color="subdued" hasShadow={false}>
+      <EuiText size="s">
+        <p style={{ whiteSpace: 'pre-line' }}>{answer}</p>
+      </EuiText>
+
+      <EuiHorizontalRule margin="s" />
+
+      <EuiFlexGroup responsive={false}>
+        <EuiFlexItem grow={false}>
+          <FeedbackButtons onClickFeedback={onClickFeedback} />
+        </EuiFlexItem>
+
+        <EuiFlexItem>
+          <EuiFlexGroup responsive={false} gutterSize="s" justifyContent="flexEnd">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty iconType="sparkles" size="s" onClick={onClickRegenerate}>
+                {i18n.translate('xpack.obsAiAssistant.insight.response.regenerate', {
+                  defaultMessage: 'Regenerate',
+                })}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+
+            <EuiFlexItem grow={false}>
+              <EuiButton fill iconType="discuss" size="s" onClick={onClickStartChat}>
+                {i18n.translate('xpack.obsAiAssistant.insight.response.startChat', {
+                  defaultMessage: 'Start chat',
+                })}
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
+  );
+}
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/insight/insight_missing_credentials.tsx b/x-pack/plugins/observability_ai_assistant/public/components/insight/insight_missing_credentials.tsx
new file mode 100644
index 0000000000000..c2c7305c2e303
--- /dev/null
+++ b/x-pack/plugins/observability_ai_assistant/public/components/insight/insight_missing_credentials.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiButton, EuiCallOut, EuiSpacer } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export function InsightMissingCredentials() {
+  return (
+    <EuiCallOut
+      title={i18n.translate('xpack.obsAiAssistant.insight.missing.title', {
+        defaultMessage: 'Missing credentials',
+      })}
+      color="primary"
+      iconType="iInCircle"
+    >
+      {i18n.translate('xpack.obsAiAssistant.insight.missing.description', {
+        defaultMessage:
+          'You haven’t authorised OpenAI in order to generate responses from the Elastic Assistant. Authorise the model in order to proceed.',
+      })}
+
+      <EuiSpacer size="m" />
+
+      <EuiButton fill color="primary">
+        {i18n.translate('xpack.obsAiAssistant.insight.missing.buttonLabel', {
+          defaultMessage: 'Connect Assistant',
+        })}
+      </EuiButton>
+    </EuiCallOut>
+  );
+}
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/insight/use_streaming_words.ts b/x-pack/plugins/observability_ai_assistant/public/components/insight/use_streaming_words.ts
new file mode 100644
index 0000000000000..4bd4cedd1bff0
--- /dev/null
+++ b/x-pack/plugins/observability_ai_assistant/public/components/insight/use_streaming_words.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useEffect, useState } from 'react';
+
+interface UseStreamingTextProps {
+  message: string;
+}
+
+export function useStreamingText({ message }: UseStreamingTextProps) {
+  const [chatMessages, setChatMessages] = useState('');
+
+  useEffect(() => {
+    const words = message.split(' ');
+
+    for (let i = 0; i < words.length; i++) {
+      setTimeout(() => {
+        setChatMessages((prevState) => `${prevState} ${words[i]}`);
+      }, i * 50); // Adjust typing speed here (milliseconds per word)
+    }
+  }, [message]);
+
+  return chatMessages;
+}
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/insight_panel.stories.tsx b/x-pack/plugins/observability_ai_assistant/public/components/insight_panel.stories.tsx
deleted file mode 100644
index a90ca3b2019b0..0000000000000
--- a/x-pack/plugins/observability_ai_assistant/public/components/insight_panel.stories.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { ComponentStory } from '@storybook/react';
-
-import { InsightPanel as Component, InsightPanelProps } from './insight_panel';
-
-export default {
-  component: Component,
-  title: 'app/Molecules/InsightPanel',
-  argTypes: {},
-};
-
-const Template: ComponentStory<typeof Component> = (props: InsightPanelProps) => (
-  <Component {...props} />
-);
-
-const defaultProps = {
-  title: 'Elastic Assistant',
-};
-
-export const InsightPanel = Template.bind({});
-InsightPanel.args = defaultProps;
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/insight_panel.tsx b/x-pack/plugins/observability_ai_assistant/public/components/insight_panel.tsx
deleted file mode 100644
index 8d500ca19858f..0000000000000
--- a/x-pack/plugins/observability_ai_assistant/public/components/insight_panel.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
-import { AssistantAvatar } from './assistant_avatar';
-
-export interface InsightPanelProps {
-  title: string;
-}
-
-export function InsightPanel({ title }: InsightPanelProps) {
-  return (
-    <EuiPanel hasBorder hasShadow={false}>
-      <EuiFlexGroup wrap responsive={false}>
-        {/* expand / contract */}
-        <EuiFlexItem grow={false}>
-          <EuiButtonIcon iconType="arrowRight" />
-        </EuiFlexItem>
-
-        {/* content */}
-        <EuiFlexItem>
-          <EuiFlexGroup wrap responsive={false}>
-            <EuiFlexItem grow={false}>
-              <AssistantAvatar size="xs" />
-            </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiText>
-                <h5>{title}</h5>
-              </EuiText>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlexItem>
-
-        {/* actions */}
-        <EuiFlexItem grow={false}>
-          <EuiFlexGroup>
-            <EuiFlexItem grow={false}>
-              <EuiButtonIcon iconType="boxesHorizontal" />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiPanel>
-  );
-}
diff --git a/x-pack/plugins/observability_ai_assistant/public/utils/storybook_decorator.tsx b/x-pack/plugins/observability_ai_assistant/public/utils/storybook_decorator.tsx
new file mode 100644
index 0000000000000..0ef1cfa5ce358
--- /dev/null
+++ b/x-pack/plugins/observability_ai_assistant/public/utils/storybook_decorator.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React, { ComponentType } from 'react';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+
+export function KibanaReactStorybookDecorator(Story: ComponentType) {
+  return (
+    <KibanaContextProvider
+      services={{
+        triggersActionsUi: { getAddRuleFlyout: {} },
+        uiSettings: {
+          get: (setting: string) => {
+            if (setting === 'dateFormat') {
+              return 'MMM D, YYYY HH:mm';
+            }
+          },
+        },
+      }}
+    >
+      <Story />
+    </KibanaContextProvider>
+  );
+}

From d391008667c8d26fc0fc47d146c7523769b0c17f Mon Sep 17 00:00:00 2001
From: Coen Warmer <coen.warmer@gmail.com>
Date: Thu, 20 Jul 2023 10:26:34 +0200
Subject: [PATCH 3/3] Update i18n translation base key

---
 .../components/ask_assistant_button.tsx       | 20 ++++++++++++-------
 .../public/components/feedback_buttons.tsx    |  6 +++---
 .../public/components/insight/insight.tsx     |  4 ++--
 .../components/insight/insight_error.tsx      |  6 +++---
 .../insight/insight_generated_response.tsx    |  4 ++--
 .../insight/insight_missing_credentials.tsx   |  6 +++---
 6 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/ask_assistant_button.tsx b/x-pack/plugins/observability_ai_assistant/public/components/ask_assistant_button.tsx
index f14b046b3caba..cbd95b9b80fe5 100644
--- a/x-pack/plugins/observability_ai_assistant/public/components/ask_assistant_button.tsx
+++ b/x-pack/plugins/observability_ai_assistant/public/components/ask_assistant_button.tsx
@@ -46,9 +46,12 @@ export function AskAssistantButton({
   variant,
   onClick,
 }: AskAssistantButtonProps) {
-  const buttonLabel = i18n.translate('xpack.obsAiAssistant.askAssistantButton.buttonLabel', {
-    defaultMessage: 'Ask Assistant',
-  });
+  const buttonLabel = i18n.translate(
+    'xpack.observabilityAiAssistant.askAssistantButton.buttonLabel',
+    {
+      defaultMessage: 'Ask Assistant',
+    }
+  );
 
   switch (variant) {
     case 'basic':
@@ -69,12 +72,15 @@ export function AskAssistantButton({
       return (
         <EuiToolTip
           position="top"
-          title={i18n.translate('xpack.obsAiAssistant.askAssistantButton.popoverTitle', {
+          title={i18n.translate('xpack.observabilityAiAssistant.askAssistantButton.popoverTitle', {
             defaultMessage: 'Elastic Assistant',
           })}
-          content={i18n.translate('xpack.obsAiAssistant.askAssistantButton.popoverContent', {
-            defaultMessage: 'Get insights into your data with the Elastic Assistant',
-          })}
+          content={i18n.translate(
+            'xpack.observabilityAiAssistant.askAssistantButton.popoverContent',
+            {
+              defaultMessage: 'Get insights into your data with the Elastic Assistant',
+            }
+          )}
         >
           <EuiButtonIcon
             iconType="sparkles"
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/feedback_buttons.tsx b/x-pack/plugins/observability_ai_assistant/public/components/feedback_buttons.tsx
index 2e960e5d771e6..08b58a85bfadf 100644
--- a/x-pack/plugins/observability_ai_assistant/public/components/feedback_buttons.tsx
+++ b/x-pack/plugins/observability_ai_assistant/public/components/feedback_buttons.tsx
@@ -21,7 +21,7 @@ export function FeedbackButtons({ onClickFeedback }: FeedbackButtonsProps) {
       <EuiFlexItem grow={false}>
         <EuiText color="subdued" size="s">
           <em>
-            {i18n.translate('xpack.obsAiAssistant.insight.feedbackButtons.title', {
+            {i18n.translate('xpack.observabilityAiAssistant.insight.feedbackButtons.title', {
               defaultMessage: 'Was this helpful?',
             })}
           </em>
@@ -37,7 +37,7 @@ export function FeedbackButtons({ onClickFeedback }: FeedbackButtonsProps) {
               size="s"
               onClick={() => onClickFeedback('positive')}
             >
-              {i18n.translate('xpack.obsAiAssistant.insight.feedbackButtons.positive', {
+              {i18n.translate('xpack.observabilityAiAssistant.insight.feedbackButtons.positive', {
                 defaultMessage: 'Yes',
               })}
             </EuiButtonEmpty>
@@ -50,7 +50,7 @@ export function FeedbackButtons({ onClickFeedback }: FeedbackButtonsProps) {
               size="s"
               onClick={() => onClickFeedback('negative')}
             >
-              {i18n.translate('xpack.obsAiAssistant.insight.feedbackButtons.negative', {
+              {i18n.translate('xpack.observabilityAiAssistant.insight.feedbackButtons.negative', {
                 defaultMessage: 'No',
               })}
             </EuiButtonEmpty>
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/insight/insight.tsx b/x-pack/plugins/observability_ai_assistant/public/components/insight/insight.tsx
index cc16f02be5f36..56c0126907f68 100644
--- a/x-pack/plugins/observability_ai_assistant/public/components/insight/insight.tsx
+++ b/x-pack/plugins/observability_ai_assistant/public/components/insight/insight.tsx
@@ -88,7 +88,7 @@ export function Insight({
 
               <EuiText size="xs" css={{ color: euiTheme.colors.subduedText }}>
                 <strong>
-                  {i18n.translate('xpack.obsAiAssistant.insight.generatedAt', {
+                  {i18n.translate('xpack.observabilityAiAssistant.insight.generatedAt', {
                     defaultMessage: 'Generated at',
                   })}{' '}
                   {moment(date).format(dateFormat)}
@@ -102,7 +102,7 @@ export function Insight({
             anchorPosition="downLeft"
             button={
               <EuiButtonIcon
-                aria-label={i18n.translate('xpack.obsAiAssistant.insight.actions', {
+                aria-label={i18n.translate('xpack.observabilityAiAssistant.insight.actions', {
                   defaultMessage: 'Actions',
                 })}
                 color="text"
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/insight/insight_error.tsx b/x-pack/plugins/observability_ai_assistant/public/components/insight/insight_error.tsx
index 475d0df97eaa9..c743185a5eb33 100644
--- a/x-pack/plugins/observability_ai_assistant/public/components/insight/insight_error.tsx
+++ b/x-pack/plugins/observability_ai_assistant/public/components/insight/insight_error.tsx
@@ -12,20 +12,20 @@ import { i18n } from '@kbn/i18n';
 export function InsightError() {
   return (
     <EuiCallOut
-      title={i18n.translate('xpack.obsAiAssistant.insight.error.title', {
+      title={i18n.translate('xpack.observabilityAiAssistant.insight.error.title', {
         defaultMessage: 'Error',
       })}
       color="danger"
       iconType="error"
     >
-      {i18n.translate('xpack.obsAiAssistant.insight.error.description', {
+      {i18n.translate('xpack.observabilityAiAssistant.insight.error.description', {
         defaultMessage: 'An error occured.',
       })}
 
       <EuiSpacer size="m" />
 
       <EuiButton fill color="danger">
-        {i18n.translate('xpack.obsAiAssistant.insight.error.buttonLabel', {
+        {i18n.translate('xpack.observabilityAiAssistant.insight.error.buttonLabel', {
           defaultMessage: 'Regenerate',
         })}
       </EuiButton>
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/insight/insight_generated_response.tsx b/x-pack/plugins/observability_ai_assistant/public/components/insight/insight_generated_response.tsx
index 214ded3875706..b396899849240 100644
--- a/x-pack/plugins/observability_ai_assistant/public/components/insight/insight_generated_response.tsx
+++ b/x-pack/plugins/observability_ai_assistant/public/components/insight/insight_generated_response.tsx
@@ -58,7 +58,7 @@ Morbi dapibus sapien lacus, vitae suscipit ex egestas pharetra. In velit eros, f
           <EuiFlexGroup responsive={false} gutterSize="s" justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
               <EuiButtonEmpty iconType="sparkles" size="s" onClick={onClickRegenerate}>
-                {i18n.translate('xpack.obsAiAssistant.insight.response.regenerate', {
+                {i18n.translate('xpack.observabilityAiAssistant.insight.response.regenerate', {
                   defaultMessage: 'Regenerate',
                 })}
               </EuiButtonEmpty>
@@ -66,7 +66,7 @@ Morbi dapibus sapien lacus, vitae suscipit ex egestas pharetra. In velit eros, f
 
             <EuiFlexItem grow={false}>
               <EuiButton fill iconType="discuss" size="s" onClick={onClickStartChat}>
-                {i18n.translate('xpack.obsAiAssistant.insight.response.startChat', {
+                {i18n.translate('xpack.observabilityAiAssistant.insight.response.startChat', {
                   defaultMessage: 'Start chat',
                 })}
               </EuiButton>
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/insight/insight_missing_credentials.tsx b/x-pack/plugins/observability_ai_assistant/public/components/insight/insight_missing_credentials.tsx
index c2c7305c2e303..e074abe7830c5 100644
--- a/x-pack/plugins/observability_ai_assistant/public/components/insight/insight_missing_credentials.tsx
+++ b/x-pack/plugins/observability_ai_assistant/public/components/insight/insight_missing_credentials.tsx
@@ -12,13 +12,13 @@ import { i18n } from '@kbn/i18n';
 export function InsightMissingCredentials() {
   return (
     <EuiCallOut
-      title={i18n.translate('xpack.obsAiAssistant.insight.missing.title', {
+      title={i18n.translate('xpack.observabilityAiAssistant.insight.missing.title', {
         defaultMessage: 'Missing credentials',
       })}
       color="primary"
       iconType="iInCircle"
     >
-      {i18n.translate('xpack.obsAiAssistant.insight.missing.description', {
+      {i18n.translate('xpack.observabilityAiAssistant.insight.missing.description', {
         defaultMessage:
           'You haven’t authorised OpenAI in order to generate responses from the Elastic Assistant. Authorise the model in order to proceed.',
       })}
@@ -26,7 +26,7 @@ export function InsightMissingCredentials() {
       <EuiSpacer size="m" />
 
       <EuiButton fill color="primary">
-        {i18n.translate('xpack.obsAiAssistant.insight.missing.buttonLabel', {
+        {i18n.translate('xpack.observabilityAiAssistant.insight.missing.buttonLabel', {
           defaultMessage: 'Connect Assistant',
         })}
       </EuiButton>