Merge pull request elastic#11 from CoenWarmer/storybook

x-pack/plugins/observability_ai_assistant/public/components/chat/chat_item.tsx

@@ -16,13 +16,14 @@ import {
   EuiPopover,
 } from '@elastic/eui';
 import type { AuthenticatedUser } from '@kbn/security-plugin/common';
+import { useKibana } from '../../hooks/use_kibana';
 import { MessageRole, Message } from '../../../common/types';
 import { ChatItemAvatar } from './chat_item_avatar';
 import { ChatItemTitle } from './chat_item_title';
+import { ChatItemControls } from './chat_item_controls';
 import { MessagePanel } from '../message_panel/message_panel';
-import { FeedbackButtons, Feedback } from '../feedback_buttons';
 import { MessageText } from '../message_panel/message_text';
-import { useKibana } from '../../hooks/use_kibana';
+import { Feedback } from '../feedback_buttons';
 
 export interface ChatItemAction {
   id: string;
@@ -184,9 +185,11 @@ export function ChatItem({
         <MessagePanel
           body={<MessageText content={message.message.content} loading={isLoading} />}
           controls={
-            message.message.role !== MessageRole.User ? (
-              <FeedbackButtons onClickFeedback={onFeedbackClick} />
-            ) : null
+            <ChatItemControls
+              role={message.message.role}
+              onFeedbackClick={onFeedbackClick}
+              onRegenerateClick={() => onRegenerateMessage?.(message['@timestamp'])}
+            />
           }
         />
       ) : null}

x-pack/plugins/observability_ai_assistant/public/components/chat/chat_item_controls.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
+import { Feedback, FeedbackButtons } from '../feedback_buttons';
+import { MessageRole } from '../../../common';
+import { RegenerateResponseButton } from '../regenerate_response_button';
+
+interface ChatItemControls {
+  role: MessageRole;
+  onFeedbackClick: (feedback: Feedback) => void;
+  onRegenerateClick: () => void;
+}
+
+export function ChatItemControls({ role, onFeedbackClick, onRegenerateClick }: ChatItemControls) {
+  const canReceiveFeedback =
+    role === MessageRole.Assistant || role === MessageRole.Elastic || role === MessageRole.Function;
+
+  const canRegenerateResponse = role === MessageRole.Assistant;
+
+  return canReceiveFeedback || canRegenerateResponse ? (
+    <>
+      <EuiSpacer size="m" />
+      <EuiHorizontalRule margin="none" />
+      <EuiSpacer size="s" />
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          {canReceiveFeedback ? <FeedbackButtons onClickFeedback={onFeedbackClick} /> : null}
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          {canRegenerateResponse ? <RegenerateResponseButton onClick={onRegenerateClick} /> : null}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
+  ) : null;
+}

x-pack/plugins/observability_ai_assistant/public/components/message_panel/message_panel.tsx

@@ -4,14 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiHorizontalRule,
-  EuiIcon,
-  EuiSpacer,
-  EuiText,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer, EuiText } from '@elastic/eui';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 
@@ -42,14 +35,7 @@ export function MessagePanel(props: Props) {
           </EuiFlexGroup>
         </>
       ) : null}
-      {props.controls ? (
-        <>
-          <EuiSpacer size="m" />
-          <EuiHorizontalRule margin="none" />
-          <EuiSpacer size="s" />
-          {props.controls}
-        </>
-      ) : null}
+      {props.controls ? props.controls : null}
     </>
   );
 }