Integrate changes

package.json

@@ -772,7 +772,6 @@
     "@opentelemetry/sdk-metrics-base": "^0.31.0",
     "@opentelemetry/semantic-conventions": "^1.4.0",
     "@reduxjs/toolkit": "1.7.2",
-    "@sindresorhus/fnv1a": "^3.0.0",
     "@slack/webhook": "^5.0.4",
     "@tanstack/react-query": "^4.29.12",
     "@tanstack/react-query-devtools": "^4.29.12",

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

@@ -4,10 +4,11 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 export interface AssistantAvatarProps {
-  size: keyof typeof sizeMap;
+  size?: keyof typeof sizeMap;
+  children?: ReactNode;
 }
 
 export const sizeMap = {

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

@@ -7,11 +7,14 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/react';
 import { EuiText, EuiComment } from '@elastic/eui';
 import type { AuthenticatedUser } from '@kbn/security-plugin/common';
 import { MessageRole, Message } from '../../../common/types';
 import { ChatItemAvatar } from './chat_item_avatar';
 import { ChatItemTitle } from './chat_item_title';
+import { MessagePanel } from '../message_panel/message_panel';
+import { FeedbackButtons, Feedback } from '../feedback_buttons';
 
 const roleMap = {
   [MessageRole.User]: i18n.translate(
@@ -45,20 +48,45 @@ export interface ChatItemProps {
   dateFormat: string;
   index: number;
   message: Message;
+  onFeedbackClick: (feedback: Feedback) => void;
 }
 
-export function ChatItem({ currentUser, dateFormat, index, message }: ChatItemProps) {
+export function ChatItem({
+  currentUser,
+  dateFormat,
+  index,
+  message,
+  onFeedbackClick,
+}: ChatItemProps) {
   return (
     <EuiComment
       key={message['@timestamp']}
       event={<ChatItemTitle message={message} index={index} dateFormat={dateFormat} />}
       timelineAvatar={<ChatItemAvatar currentUser={currentUser} role={message.message.role} />}
       username={roleMap[message.message.role]}
+      css={
+        message.message.role !== MessageRole.User
+          ? css`
+              .euiCommentEvent__body {
+                padding: 0;
+              }
+            `
+          : ''
+      }
     >
       {message.message.content ? (
-        <EuiText size="s">
-          <p>{message.message.content}</p>
-        </EuiText>
+        <>
+          {message.message.role === MessageRole.User ? (
+            <EuiText size="s">
+              <p>{message.message.content}</p>
+            </EuiText>
+          ) : (
+            <MessagePanel
+              body={message.message.content}
+              controls={<FeedbackButtons onClickFeedback={onFeedbackClick} />}
+            />
+          )}
+        </>
       ) : null}
     </EuiComment>
   );

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

@@ -30,6 +30,7 @@ export function ChatTimeline({ messages = [] }: ChatTimelineProps) {
           dateFormat={dateFormat}
           index={index}
           message={message}
+          onFeedbackClick={() => {}}
         />
       ))}
     </EuiCommentList>

yarn.lock

@@ -6847,11 +6847,6 @@
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e"
   integrity sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==
 
-"@sindresorhus/fnv1a@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@sindresorhus/fnv1a/-/fnv1a-3.0.0.tgz#e8ce2e7c7738ec8c354867d38e3bfcde622b87ca"
-  integrity sha512-M6pmbdZqAryzjZ4ELAzrdCMoMZk5lH/fshKrapfSeXdf2W+GDqZvPmfXaNTZp43//FVbSwkTPwpEMnehSyskkQ==
-
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"