Merge pull request #15 from CoenWarmer/storybook

x-pack/plugins/observability_ai_assistant/public/components/chat/chat_flyout.stories.tsx

@@ -8,18 +8,38 @@
 import React from 'react';
 import { ComponentStory } from '@storybook/react';
 import { ChatFlyout as Component, ChatFlyoutProps } from './chat_flyout';
+import { buildConversation } from '../../utils/builders';
 
 export default {
   component: Component,
-  title: 'app/Molecules/ChatFlyout',
+  title: 'app/Organisms/ChatFlyout',
   argTypes: {},
 };
 
 const Template: ComponentStory<typeof Component> = (props: ChatFlyoutProps) => {
   return <Component {...props} />;
 };
 
-const defaultProps = {};
+const defaultProps = {
+  conversation: buildConversation(),
+  connectors: {
+    connectors: [
+      {
+        id: 'foo',
+        referencedByCount: 1,
+        actionTypeId: 'foo',
+        name: 'GPT-v8-ultra',
+        isPreconfigured: true,
+        isDeprecated: false,
+        isSystemAction: false,
+      },
+    ],
+    loading: false,
+    error: undefined,
+    selectedConnector: 'foo',
+    selectConnector: () => {},
+  },
+};
 
 export const ChatFlyout = Template.bind({});
 ChatFlyout.args = defaultProps;

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

@@ -20,7 +20,7 @@ import {
 
 export default {
   component: Component,
-  title: 'app/Molecules/ChatTimeline',
+  title: 'app/Organisms/ChatTimeline',
   parameters: {
     backgrounds: {
       default: 'white',
@@ -62,10 +62,7 @@ const defaultProps = {
     }),
     buildMessage({
       '@timestamp': String(new Date(currentDate.getTime() + 2000)),
-      message: buildAssistantInnerMessage({
-        content: `In computer programming and mathematics, a function is a fundamental concept that represents a relationship between input values and output values. It takes one or more input values (also known as arguments or parameters) and processes them to produce a result, which is the output of the function. The input values are passed to the function, and the function performs a specific set of operations or calculations on those inputs to produce the desired output.
-      A function is often defined with a name, which serves as an identifier to call and use the function in the code. It can be thought of as a reusable block of code that can be executed whenever needed, and it helps in organizing code and making it more modular and maintainable.`,
-      }),
+      message: buildAssistantInnerMessage(),
     }),
     buildMessage({
       '@timestamp': String(new Date(currentDate.getTime() + 3000)),

x-pack/plugins/observability_ai_assistant/public/hooks/__storybook_mocks__/use_genai_connectors.ts

@@ -0,0 +1,18 @@
+/*
+ * 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 { UseGenAIConnectorsResult } from '../use_genai_connectors';
+
+export function useGenAIConnectors(): UseGenAIConnectorsResult {
+  return {
+    connectors: [],
+    loading: false,
+    error: undefined,
+    selectedConnector: 'foo',
+    selectConnector: (id: string) => {},
+  };
+}

x-pack/plugins/observability_ai_assistant/public/utils/builders.ts

@@ -6,10 +6,12 @@
  */
 
 import { cloneDeep } from 'lodash';
-import { Message, MessageRole } from '../../common/types';
+import { Conversation, Message, MessageRole } from '../../common/types';
+
+const currentDate = new Date();
 
 const baseMessage: Message = {
-  '@timestamp': String(Date.now()),
+  '@timestamp': String(new Date(currentDate.getTime())),
   message: {
     content: 'foo',
     name: 'bar',
@@ -42,7 +44,8 @@ export function buildAssistantInnerMessage(
 ): Message['message'] {
   return cloneDeep({
     ...{
-      content: 'This is "leftpad":',
+      content: `In computer programming and mathematics, a function is a fundamental concept that represents a relationship between input values and output values. It takes one or more input values (also known as arguments or parameters) and processes them to produce a result, which is the output of the function. The input values are passed to the function, and the function performs a specific set of operations or calculations on those inputs to produce the desired output.
+      A function is often defined with a name, which serves as an identifier to call and use the function in the code. It can be thought of as a reusable block of code that can be executed whenever needed, and it helps in organizing code and making it more modular and maintainable.`,
       role: MessageRole.Assistant,
       data: { key: 'value', nestedData: { foo: 'bar' } },
       ...params,
@@ -73,3 +76,28 @@ export function buildFunctionInnerMessage(
     ...params,
   });
 }
+
+const baseConversation: Conversation = {
+  '@timestamp': String(Date.now()),
+  user: {
+    id: 'foo',
+    name: 'bar',
+  },
+  conversation: {
+    id: 'conversation-foo',
+    title: 'Conversation title',
+    last_updated: String(Date.now()),
+  },
+  messages: [
+    buildMessage({ message: buildSystemInnerMessage() }),
+    buildMessage({ message: buildUserInnerMessage() }),
+    buildMessage({ message: buildAssistantInnerMessage() }),
+  ],
+  labels: { foo: 'bar' },
+  numeric_labels: { foo: 1 },
+  namespace: 'baz',
+};
+
+export function buildConversation(params: Partial<Conversation> = {}): Conversation {
+  return cloneDeep({ ...baseConversation, ...params });
+}