Merge pull request elastic#32 from CoenWarmer/storybook

CoenWarmer · Aug 9, 2023 · a5348a4 · a5348a4
2 parents 6ed3c93 + 3afd233
commit a5348a4
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 22 deletions.
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_body.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_body.tsx
@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+import React from 'react';
+import { css } from '@emotion/css';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -13,9 +15,7 @@ import {
   EuiPanel,
   EuiSpacer,
 } from '@elastic/eui';
-import { css } from '@emotion/css';
 import type { AuthenticatedUser } from '@kbn/security-plugin/common';
-import React from 'react';
 import type { Message } from '../../../common/types';
 import type { UseGenAIConnectorsResult } from '../../hooks/use_genai_connectors';
 import { UseKnowledgeBaseResult } from '../../hooks/use_knowledge_base';

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_item.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_item.tsx
@@ -74,30 +74,30 @@ export function ChatItem({
   error,
   function_call: functionCall,
   loading,
+  role,
+  title,
   onEditSubmit,
   onFeedbackClick,
   onRegenerateClick,
   onStopGeneratingClick,
-  role,
-  title,
 }: ChatItemProps) {
   const accordionId = useGeneratedHtmlId({ prefix: 'chat' });
 
   const [editing, setEditing] = useState<boolean>(false);
-  const [isExpanded, setIsExpanded] = useState<boolean>(Boolean(element));
+  const [expanded, setExpanded] = useState<boolean>(Boolean(element));
 
   const actions = [canCopy, collapsed, canCopy].filter(Boolean);
 
   const noBodyMessageClassName = css`
     .euiCommentEvent__body {
       padding: 0;
-      height: ${isExpanded ? 'fit-content' : '0px'};
+      height: ${expanded ? 'fit-content' : '0px'};
       overflow: hidden;
     }
   `;
 
-  const handleAccordionToggle = () => {
-    setIsExpanded(!isExpanded);
+  const handleToggleExpand = () => {
+    setExpanded(!expanded);
 
     if (editing) {
       setEditing(false);
@@ -106,7 +106,7 @@ export function ChatItem({
 
   const handleToggleEdit = () => {
     if (collapsed) {
-      setIsExpanded(false);
+      setExpanded(false);
     }
     setEditing(!editing);
   };
@@ -124,9 +124,9 @@ export function ChatItem({
     content || error ? (
       <ChatItemContentInlinePromptEditor
         content={content}
+        editing={editing}
         functionCall={functionCall}
         loading={loading}
-        editing={editing}
         onSubmit={handleInlineEditSubmit}
       />
     ) : null;
@@ -136,8 +136,8 @@ export function ChatItem({
       <EuiAccordion
         id={accordionId}
         className={accordionButtonClassName}
-        forceState={isExpanded ? 'open' : 'closed'}
-        onToggle={handleAccordionToggle}
+        forceState={expanded ? 'open' : 'closed'}
+        onToggle={handleToggleExpand}
       >
         <EuiSpacer size="s" />
         {contentElement}
@@ -157,10 +157,10 @@ export function ChatItem({
           canCopy={canCopy}
           collapsed={collapsed}
           canEdit={canEdit}
-          isCollapsed={isExpanded}
-          onAccordionToggle={handleAccordionToggle}
+          isCollapsed={expanded}
           onCopyToClipboard={handleCopyToClipboard}
           onToggleEdit={handleToggleEdit}
+          onToggleExpand={handleToggleExpand}
         />
       }
       className={

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_item_actions.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_item_actions.tsx
@@ -22,15 +22,15 @@ export function ChatItemActions({
   canCopy,
   isCollapsed,
   onToggleEdit,
-  onAccordionToggle,
+  onToggleExpand,
   onCopyToClipboard,
 }: {
   canEdit: boolean;
   collapsed: boolean;
   canCopy: boolean;
   isCollapsed: boolean;
   onToggleEdit: () => void;
-  onAccordionToggle: () => void;
+  onToggleExpand: () => void;
   onCopyToClipboard: () => void;
 }) {
   const [isPopoverOpen, setIsPopoverOpen] = useState<string | undefined>();
@@ -67,7 +67,7 @@ export function ChatItemActions({
             icon: isCollapsed ? 'eyeClosed' : 'eye',
             label: '',
             handler: () => {
-              onAccordionToggle();
+              onToggleExpand();
             },
           },
         ]

diff --git a/...ervability_ai_assistant/public/components/chat/chat_item_content_inline_prompt_editor.tsx b/...ervability_ai_assistant/public/components/chat/chat_item_content_inline_prompt_editor.tsx
@@ -8,7 +8,7 @@
 import React from 'react';
 import { MessageText } from '../message_panel/message_text';
 import { ChatPromptEditor } from './chat_prompt_editor';
-import { Message, MessageRole } from '../../../common';
+import { MessageRole, type Message } from '../../../common';
 
 interface Props {
   content: string | undefined;
@@ -34,12 +34,12 @@ export function ChatItemContentInlinePromptEditor({
     <MessageText content={content || ''} loading={loading} />
   ) : (
     <ChatPromptEditor
+      disabled={false}
+      loading={false}
       initialPrompt={content}
       initialFunctionPayload={functionCall?.arguments}
       initialSelectedFunctionName={functionCall?.name}
       onSubmit={onSubmit}
-      disabled={false}
-      loading={loading}
     />
   );
 }
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_timeline.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_timeline.tsx
@@ -13,7 +13,8 @@ import type { Feedback } from '../feedback_buttons';
 import { ChatItem } from './chat_item';
 
 export interface ChatTimelineItem
-  extends Pick<Message['message'], 'role' | 'content' | 'function_call'> {
+  extends Pick<Message, '@timestamp'>,
+    Pick<Message['message'], 'role' | 'content' | 'function_call'> {
   id: string;
   title: string;
   loading: boolean;

diff --git a/x-pack/plugins/observability_ai_assistant/public/hooks/use_timeline.ts b/x-pack/plugins/observability_ai_assistant/public/hooks/use_timeline.ts
@@ -173,6 +173,7 @@ export function useTimeline({
     if (pendingMessage) {
       return conversationItems.concat({
         id: '',
+        '@timestamp': new Date().toISOString(),
         canCopy: true,
         canEdit: false,
         canGiveFeedback: false,
@@ -200,7 +201,12 @@ export function useTimeline({
 
   return {
     items,
-    onEdit: async (item, content) => {},
+    onEdit: async (item, newMessage) => {
+      const index = messages.findIndex((message) => message['@timestamp'] === item['@timestamp']);
+      const sliced = messages.slice(0, index);
+      const nextMessages = await chat(sliced.concat(newMessage));
+      onChatComplete(nextMessages);
+    },
     onFeedback: (item, feedback) => {},
     onRegenerate: (item) => {
       const indexOf = items.indexOf(item);

diff --git a/.../plugins/observability_ai_assistant/public/utils/get_timeline_items_from_conversation.tsx b/.../plugins/observability_ai_assistant/public/utils/get_timeline_items_from_conversation.tsx
@@ -30,6 +30,7 @@ export function getTimelineItemsfromConversation({
   return [
     {
       id: v4(),
+      '@timestamp': '',
       canCopy: false,
       canEdit: false,
       canGiveFeedback: false,
@@ -105,6 +106,7 @@ export function getTimelineItemsfromConversation({
 
       const props = {
         id: v4(),
+        '@timestamp': message['@timestamp'],
         canCopy: true,
         canEdit: hasConnector && (message.message.role === MessageRole.User || hasFunction),
         canGiveFeedback: