refactored code to use Form hooks

yansavitski · Feb 9, 2024 · a8a187b · a8a187b
1 parent f52cdaf
commit a8a187b
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 16 deletions.
diff --git a/packages/kbn-ai-playground/components/chat.tsx b/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}

diff --git a/packages/kbn-ai-playground/components/open_ai_key.tsx b/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} />
+    </>
+  );
+}
diff --git a/packages/kbn-ai-playground/components/open_ai_key_callout.tsx b/packages/kbn-ai-playground/components/open_ai_key_callout.tsx
@@ -1,19 +1,23 @@
+/*
+ * 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 { css } from "@emotion/react";
-import { i18n } from "@kbn/i18n";
 
-import React, { Dispatch, SetStateAction } from "react";
+import { i18n } from "@kbn/i18n";
 
-interface ListProps {
-  setIsOpenAIFlyOutOpen: Dispatch<SetStateAction<boolean>>;
+interface OpenAIKeyCalloutProps {
+  setIsOpenAIFlyOutOpen: (flyOut: boolean) => void;
 }
 
-export const OpenAIKeyCallout: React.FC<ListProps> = ({ setIsOpenAIFlyOutOpen }: ListProps) => {
+export const OpenAIKeyCallout: React.FC<OpenAIKeyCalloutProps> = ({ setIsOpenAIFlyOutOpen }) => {
   return (
     <EuiCallOut
-      css={css`
-        width: 55%
-      `}
       title={i18n.translate(
         'aiPlayground.sidebar.openAICallout.headerText',
         {

diff --git a/packages/kbn-ai-playground/components/open_ai_key_flyout.tsx b/packages/kbn-ai-playground/components/open_ai_key_flyout.tsx
@@ -1,14 +1,27 @@
+/*
+ * 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;
-  setOpenAIKey: (key: string) => void;
+  onSave: (key: string) => void;
 }
 
-export const OpenAIKeyFlyOut: React.FC<OpenAIKeyFlyOutProps> = ({ onClose, setOpenAIKey }: OpenAIKeyFlyOutProps) => {
-  const [apiKey, setApiKey] = useState<string>('');
+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">
@@ -72,10 +85,7 @@ export const OpenAIKeyFlyOut: React.FC<OpenAIKeyFlyOutProps> = ({ onClose, setOp
               isDisabled={!apiKey.trim()}
               data-telemetry-id="entSearchAIPlayground-addingOpenAIKey-save"
               fill
-              onClick={() => {
-                setOpenAIKey(apiKey.trim());
-                onClose();
-              }}
+              onClick={handleSave}
             >
               {i18n.translate(
                 'aiPlayground.sidebar.openAIFlyOut.saveButtonLabel',

diff --git a/packages/kbn-ai-playground/types.ts b/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 {