Merge pull request elastic#7 from Samiul-TheSoccerFan/open-ai-flyout

Open ai flyout

packages/kbn-ai-playground/components/chat.tsx

@@ -24,6 +24,7 @@ import { ChatForm, ChatFormFields, MessageRole } from '../types';
 
 import { MessageList } from './message_list/message_list';
 import { QuestionInput } from './question_input';
+import { OpenAIKey } from './open_ai_key';
 
 import { TelegramIcon } from './telegram_icon';
 import { InstructionsField } from '@kbn/ai-playground/components/instructions_field';
@@ -122,6 +123,15 @@ export const Chat = () => {
             padding: euiTheme.size.l,
           }}
         >
+          <Controller
+            name={ChatFormFields.openAIKey}
+            control={control}
+            defaultValue=""
+            render={({ field }) => (
+              <OpenAIKey apiKey={field.value} onSave={field.onChange} />
+            )}
+          />
+
           <Controller
             name={ChatFormFields.prompt}
             control={control}

packages/kbn-ai-playground/components/open_ai_key.tsx

@@ -0,0 +1,31 @@
+/*
+ * 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, { useState } from "react";
+import { OpenAIKeyCallout } from "./open_ai_key_callout";
+
+import { OpenAIKeyFlyOut } from "./open_ai_key_flyout";
+
+interface OpenAIKeyProps {
+  apiKey: string;
+  onSave: () => void;
+}
+
+export const OpenAIKey: React.FC<OpenAIKeyProps> = ({ apiKey, onSave }) => {
+  const [isOpenAIFlyOutOpen, setIsOpenAIFlyOutOpen] = useState<boolean>(false);
+
+  const onCloseOpenAIFlyOut = () => {
+    setIsOpenAIFlyOutOpen(!isOpenAIFlyOutOpen);
+  };
+
+  return (
+    <>
+      {isOpenAIFlyOutOpen && <OpenAIKeyFlyOut openAPIKey={apiKey} onSave={onSave} onClose={onCloseOpenAIFlyOut} />}
+      <OpenAIKeyCallout setIsOpenAIFlyOutOpen={setIsOpenAIFlyOutOpen} />
+    </>
+  );
+}

packages/kbn-ai-playground/components/open_ai_key_callout.tsx

@@ -0,0 +1,53 @@
+/*
+ * 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 { EuiButton, EuiCallOut } from "@elastic/eui";
+
+import { i18n } from "@kbn/i18n";
+
+interface OpenAIKeyCalloutProps {
+  setIsOpenAIFlyOutOpen: (flyOut: boolean) => void;
+}
+
+export const OpenAIKeyCallout: React.FC<OpenAIKeyCalloutProps> = ({ setIsOpenAIFlyOutOpen }) => {
+  return (
+    <EuiCallOut
+      title={i18n.translate(
+        'aiPlayground.sidebar.openAICallout.headerText',
+        {
+          defaultMessage: 'Add OpenAI API Key',
+        }
+      )}
+      color="warning" 
+      iconType="warning"
+    >
+      <p>
+        {i18n.translate(
+          'aiPlayground.sidebar.openAICallout.description',
+          {
+            defaultMessage: 'The AI Playground uses OpenAl models for summarization. Add your OpenAI API key to continue.',
+          }
+        )}
+      </p>
+      <EuiButton
+        onClick={() => setIsOpenAIFlyOutOpen(true)} 
+        color="warning"
+        fill
+        data-test-subj="openaiflyout-open"
+      >
+        {i18n.translate(
+          'aiPlayground.sidebar.openAICallout.buttonLabelText',
+          {
+            defaultMessage: 'Add OpenAI API Key',
+          }
+        )}
+      </EuiButton>
+    </EuiCallOut>
+  );
+};

packages/kbn-ai-playground/components/open_ai_key_flyout.tsx

@@ -0,0 +1,102 @@
+/*
+ * 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 { EuiButton, EuiButtonEmpty, EuiFieldText, EuiFlexGroup, EuiFlexItem, EuiFlyout, EuiFlyoutBody, EuiFlyoutFooter, EuiFlyoutHeader, EuiFormRow, EuiLink, EuiSpacer, EuiText, EuiTitle } from "@elastic/eui";
+import { i18n } from "@kbn/i18n";
+import React, { useState } from "react";
+
+export interface OpenAIKeyFlyOutProps {
+  openAPIKey: string;
+  onClose: () => void;
+  onSave: (key: string) => void;
+}
+
+export const OpenAIKeyFlyOut: React.FC<OpenAIKeyFlyOutProps> = ({ openAPIKey, onClose, onSave }) => {
+  const [apiKey, setApiKey] = useState<string>(openAPIKey);
+
+  const handleSave = () => {
+    onSave(apiKey);
+    onClose();
+  }
+
+  return (
+    <EuiFlyout onClose={onClose} size="m">
+      <EuiFlyoutHeader>
+        <EuiTitle size="m">
+          <h3>
+            {i18n.translate(
+              'aiPlayground.sidebar.openAIFlyOut.headerTitle',
+              {
+                defaultMessage: 'OpenAI API Key',
+              }
+            )}
+          </h3>
+        </EuiTitle>
+        <EuiSpacer size="s" />
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <EuiFlexGroup direction="column" gutterSize="l">
+          <EuiFormRow
+            fullWidth
+            label={i18n.translate(
+              'aiPlayground.sidebar.openAIFlyOut.labelTitle',
+              { defaultMessage: 'OpenAI API Key' }
+            )}
+            labelAppend={
+              <EuiText size="xs">
+                <EuiLink target="_blank" href="https://platform.openai.com/api-keys">OpenAI API Keys</EuiLink>
+              </EuiText>
+            }>
+            <EuiFlexItem grow>
+              <EuiFieldText
+                fullWidth
+                placeholder={i18n.translate(
+                  'aiPlayground.sidebar.openAIFlyOut.placeholder',
+                  { defaultMessage: 'Enter API Key here' }
+                )}
+                value={apiKey}
+                onChange={(e) => setApiKey(e.target.value)}
+              />
+            </EuiFlexItem>
+          </EuiFormRow>  
+        </EuiFlexGroup>
+      </EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiFlexGroup>
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              data-telemetry-id="entSearchAIPlayground-addingOpenAIKey-cancel"
+              onClick={onClose}
+            >
+              {i18n.translate('aiPlayground.sidebar.openAIFlyOut.cancelButtonLabel', 
+                {
+                  defaultMessage: 'Cancel',
+                })
+              }
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem />
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              isDisabled={!apiKey.trim()}
+              data-telemetry-id="entSearchAIPlayground-addingOpenAIKey-save"
+              fill
+              onClick={handleSave}
+            >
+              {i18n.translate(
+                'aiPlayground.sidebar.openAIFlyOut.saveButtonLabel',
+                {
+                  defaultMessage: 'Save',
+                }
+              )}
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutFooter>
+    </EuiFlyout>
+  );
+};

packages/kbn-ai-playground/types.ts

@@ -26,12 +26,14 @@ export enum ChatFormFields {
   question = 'question',
   citations = 'citations',
   prompt = 'prompt',
+  openAIKey = 'openAIKey',
 }
 
 export interface ChatForm {
   [ChatFormFields.question]: string;
   [ChatFormFields.prompt]: string;
   [ChatFormFields.citations]: boolean;
+  [ChatFormFields.openAIKey]: string;
 }
 
 export interface AIPlaygroundPluginStartDeps {