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 7ec3a30a1ef3e..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
@@ -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,25 @@ 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.observabilityAiAssistant.askAssistantButton.buttonLabel', {
-            defaultMessage: 'Ask Assistant',
-          })}
-    </>
+  const buttonLabel = i18n.translate(
+    'xpack.observabilityAiAssistant.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>
       );
 
@@ -86,29 +82,14 @@ export function AskAssistantButton({
             }
           )}
         >
-          <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>
-  );
-}
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..08b58a85bfadf
--- /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.observabilityAiAssistant.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.observabilityAiAssistant.insight.feedbackButtons.positive', {
+                defaultMessage: 'Yes',
+              })}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              color="danger"
+              iconType="faceSad"
+              size="s"
+              onClick={() => onClickFeedback('negative')}
+            >
+              {i18n.translate('xpack.observabilityAiAssistant.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..56c0126907f68
--- /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.observabilityAiAssistant.insight.generatedAt', {
+                    defaultMessage: 'Generated at',
+                  })}{' '}
+                  {moment(date).format(dateFormat)}
+                </strong>
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        }
+        extraAction={
+          <EuiPopover
+            anchorPosition="downLeft"
+            button={
+              <EuiButtonIcon
+                aria-label={i18n.translate('xpack.observabilityAiAssistant.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..c743185a5eb33
--- /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.observabilityAiAssistant.insight.error.title', {
+        defaultMessage: 'Error',
+      })}
+      color="danger"
+      iconType="error"
+    >
+      {i18n.translate('xpack.observabilityAiAssistant.insight.error.description', {
+        defaultMessage: 'An error occured.',
+      })}
+
+      <EuiSpacer size="m" />
+
+      <EuiButton fill color="danger">
+        {i18n.translate('xpack.observabilityAiAssistant.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..b396899849240
--- /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.observabilityAiAssistant.insight.response.regenerate', {
+                  defaultMessage: 'Regenerate',
+                })}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+
+            <EuiFlexItem grow={false}>
+              <EuiButton fill iconType="discuss" size="s" onClick={onClickStartChat}>
+                {i18n.translate('xpack.observabilityAiAssistant.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..e074abe7830c5
--- /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.observabilityAiAssistant.insight.missing.title', {
+        defaultMessage: 'Missing credentials',
+      })}
+      color="primary"
+      iconType="iInCircle"
+    >
+      {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.',
+      })}
+
+      <EuiSpacer size="m" />
+
+      <EuiButton fill color="primary">
+        {i18n.translate('xpack.observabilityAiAssistant.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>
+  );
+}