[OneChat] Simple Chat UI

x-pack/platform/packages/shared/onechat/onechat-common/chat/conversation.ts

@@ -6,7 +6,12 @@
  */
 
 import type { StructuredToolIdentifier } from '../tools/tools';
-import type { SerializedAgentIdentifier } from '../agents';
+import {
+  OneChatDefaultAgentId,
+  toSerializedAgentIdentifier,
+  type SerializedAgentIdentifier,
+  OneChatDefaultAgentProviderId,
+} from '../agents';
 import type { UserIdAndName } from '../base/users';
 
 /**
@@ -64,6 +69,13 @@ export type ToolCallStep = ConversationRoundStepMixin<
   ToolCallWithResult
 >;
 
+export const createToolCallStep = (toolCallWithResult: ToolCallWithResult): ToolCallStep => {
+  return {
+    type: ConversationRoundStepType.toolCall,
+    ...toolCallWithResult,
+  };
+};
+
 export const isToolCallStep = (step: ConversationRoundStep): step is ToolCallStep => {
   return step.type === ConversationRoundStepType.toolCall;
 };
@@ -93,3 +105,19 @@ export interface Conversation {
   updatedAt: string;
   rounds: ConversationRound[];
 }
+
+export const createEmptyConversation = (): Conversation => {
+  const now = new Date().toISOString();
+  return {
+    id: 'new',
+    agentId: toSerializedAgentIdentifier({
+      agentId: OneChatDefaultAgentId,
+      providerId: OneChatDefaultAgentProviderId,
+    }),
+    user: { id: '', username: '' },
+    title: '',
+    createdAt: now,
+    updatedAt: now,
+    rounds: [],
+  };
+};

x-pack/platform/plugins/shared/onechat/README.md

@@ -256,3 +256,11 @@ Configure Claude Desktop by adding this to its configuration:
   }
 }
 ```
+
+## Chat UI
+To enable the Chat UI located at `/app/chat/`, add the following to your Kibana config:
+
+```yaml
+uiSettings.overrides:
+  onechat:ui:enabled: true
+```

x-pack/platform/plugins/shared/onechat/common/conversations.ts

@@ -20,3 +20,7 @@ export type ConversationUpdateRequest = Pick<Conversation, 'id'> &
 export interface ConversationListOptions {
   agentId?: AgentIdentifier;
 }
+
+export interface ConversationGetOptions {
+  conversationId: string;
+}

x-pack/platform/plugins/shared/onechat/public/application/components/conversations/conversation.tsx

@@ -0,0 +1,86 @@
+/*
+ * 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, { useCallback, useRef, useEffect } from 'react';
+import { css } from '@emotion/css';
+import { EuiFlexItem, EuiPanel, useEuiTheme, euiScrollBarStyles } from '@elastic/eui';
+import { useChat } from '../../hooks/use_chat';
+import { useConversation } from '../../hooks/use_conversation';
+import { useStickToBottom } from '../../hooks/use_stick_to_bottom';
+import { ConversationInputForm } from './conversation_input_form';
+import { ConversationRounds } from './conversation_rounds/conversation_rounds';
+import { NewConversationPrompt } from './new_conversation_prompt';
+
+const fullHeightClassName = css`
+  height: 100%;
+`;
+
+const conversationPanelClass = css`
+  min-height: 100%;
+  max-width: 850px;
+  margin-left: auto;
+  margin-right: auto;
+`;
+
+const scrollContainerClassName = (scrollBarStyles: string) => css`
+  overflow-y: auto;
+  ${scrollBarStyles}
+`;
+
+interface ConversationProps {
+  agentId: string;
+  conversationId: string | undefined;
+}
+
+export const Conversation: React.FC<ConversationProps> = ({ agentId, conversationId }) => {
+  const { conversation } = useConversation({ conversationId });
+  const { sendMessage } = useChat({
+    conversationId,
+    agentId,
+  });
+
+  const theme = useEuiTheme();
+  const scrollBarStyles = euiScrollBarStyles(theme);
+
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
+
+  const { setStickToBottom } = useStickToBottom({
+    defaultState: true,
+    scrollContainer: scrollContainerRef.current,
+  });
+
+  useEffect(() => {
+    setStickToBottom(true);
+  }, [conversationId, setStickToBottom]);
+
+  const onSubmit = useCallback(
+    (message: string) => {
+      setStickToBottom(true);
+      sendMessage(message);
+    },
+    [sendMessage, setStickToBottom]
+  );
+
+  if (!conversationId && (!conversation || conversation.rounds.length === 0)) {
+    return <NewConversationPrompt onSubmit={onSubmit} />;
+  }
+
+  return (
+    <>
+      <EuiFlexItem grow className={scrollContainerClassName(scrollBarStyles)}>
+        <div ref={scrollContainerRef} className={fullHeightClassName}>
+          <EuiPanel hasBorder={false} hasShadow={false} className={conversationPanelClass}>
+            <ConversationRounds conversationRounds={conversation?.rounds ?? []} />
+          </EuiPanel>
+        </div>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <ConversationInputForm disabled={!agentId} loading={false} onSubmit={onSubmit} />
+      </EuiFlexItem>
+    </>
+  );
+};

x-pack/platform/plugins/shared/onechat/public/application/components/conversations/conversation_header.tsx

@@ -0,0 +1,64 @@
+/*
+ * 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 { css } from '@emotion/css';
+import {
+  EuiTitle,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiSkeletonTitle,
+  useEuiTheme,
+  useEuiFontSize,
+} from '@elastic/eui';
+import { useConversation } from '../../hooks/use_conversation';
+import { chatCommonLabels } from './i18n';
+
+interface ConversationHeaderProps {
+  conversationId: string | undefined;
+}
+
+export const ConversationHeader: React.FC<ConversationHeaderProps> = ({ conversationId }) => {
+  const { conversation, isLoading: isConvLoading } = useConversation({ conversationId });
+
+  const { euiTheme } = useEuiTheme();
+
+  const containerClass = css`
+    padding: ${euiTheme.size.s} ${euiTheme.size.m};
+    border-bottom: solid ${euiTheme.border.width.thin} ${euiTheme.border.color};
+  `;
+
+  const conversationTitleClass = css`
+    font-weight: ${euiTheme.font.weight.semiBold};
+    font-size: ${useEuiFontSize('m').fontSize};
+  `;
+
+  return (
+    <EuiFlexItem grow={false}>
+      <EuiPanel
+        hasBorder={false}
+        hasShadow={false}
+        borderRadius="none"
+        color="subdued"
+        className={containerClass}
+      >
+        <EuiFlexGroup alignItems="center">
+          <EuiFlexItem grow>
+            <EuiTitle>
+              <EuiSkeletonTitle size="m" isLoading={conversationId !== undefined && isConvLoading}>
+                <h3 className={conversationTitleClass}>
+                  {conversation?.title || chatCommonLabels.chat.conversations.newConversationLabel}
+                </h3>
+              </EuiSkeletonTitle>
+            </EuiTitle>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
+    </EuiFlexItem>
+  );
+};

x-pack/platform/plugins/shared/onechat/public/application/components/conversations/conversation_input_form.tsx

@@ -0,0 +1,98 @@
+/*
+ * 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, { useCallback, useState, KeyboardEvent } from 'react';
+import { css } from '@emotion/css';
+import {
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTextArea,
+  keys,
+  useEuiTheme,
+} from '@elastic/eui';
+import { chatCommonLabels } from './i18n';
+
+interface ConversationInputFormProps {
+  disabled: boolean;
+  loading: boolean;
+  onSubmit: (message: string) => void;
+}
+
+export const ConversationInputForm: React.FC<ConversationInputFormProps> = ({
+  disabled,
+  loading,
+  onSubmit,
+}) => {
+  const [message, setMessage] = useState<string>('');
+  const { euiTheme } = useEuiTheme();
+
+  const handleSubmit = useCallback(() => {
+    if (loading || !message.trim()) {
+      return;
+    }
+
+    onSubmit(message);
+    setMessage('');
+  }, [message, loading, onSubmit]);
+
+  const handleChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setMessage(event.currentTarget.value);
+  }, []);
+
+  const handleTextAreaKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (!event.shiftKey && event.key === keys.ENTER) {
+        event.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+
+  const topContainerClass = css`
+    padding-bottom: ${euiTheme.size.m};
+  `;
+
+  const inputFlexItemClass = css`
+    max-width: 900px;
+  `;
+
+  return (
+    <EuiFlexGroup
+      gutterSize="s"
+      responsive={false}
+      alignItems="center"
+      justifyContent="center"
+      className={topContainerClass}
+    >
+      <EuiFlexItem className={inputFlexItemClass}>
+        <EuiTextArea
+          data-test-subj="onechatAppConversationInputFormTextArea"
+          fullWidth
+          rows={1}
+          value={message}
+          onChange={handleChange}
+          onKeyDown={handleTextAreaKeyDown}
+          placeholder={chatCommonLabels.userInputBox.placeholder}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          aria-label="Submit"
+          data-test-subj="onechatAppConversationInputFormSubmitButton"
+          iconType="kqlFunction"
+          display="fill"
+          size="m"
+          onClick={handleSubmit}
+          disabled={loading || disabled}
+          isLoading={loading}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};