"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ChatPromptEditor = ChatPromptEditor;
var _react = _interopRequireWildcard(require("react"));
var _eui = require("@elastic/eui");
var _i18n = require("@kbn/i18n");
var _public = require("@kbn/kibana-react-plugin/public");
var _common = require("../../../common");
var _use_json_editor_model = require("../../hooks/use_json_editor_model");
var _function_list_popover = require("./function_list_popover");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/*
 * 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.
 */

function ChatPromptEditor({
  disabled,
  loading,
  initialPrompt,
  initialSelectedFunctionName,
  initialFunctionPayload,
  onSubmit
}) {
  const isFocusTrapEnabled = Boolean(initialPrompt);
  const [prompt, setPrompt] = (0, _react.useState)(initialPrompt);
  const [selectedFunctionName, setSelectedFunctionName] = (0, _react.useState)(initialSelectedFunctionName);
  const [functionPayload, setFunctionPayload] = (0, _react.useState)(initialFunctionPayload);
  const [functionEditorLineCount, setFunctionEditorLineCount] = (0, _react.useState)(0);
  const {
    model,
    initialJsonString
  } = (0, _use_json_editor_model.useJsonEditorModel)({
    functionName: selectedFunctionName,
    initialJson: functionPayload
  });
  const textAreaRef = (0, _react.useRef)(null);
  const recalculateFunctionEditorLineCount = (0, _react.useCallback)(() => {
    const newLineCount = (model === null || model === void 0 ? void 0 : model.getLineCount()) || 0;
    if (newLineCount !== functionEditorLineCount) {
      setFunctionEditorLineCount(newLineCount);
    }
  }, [functionEditorLineCount, model]);
  const handleChange = event => {
    setPrompt(event.currentTarget.value);
  };
  const handleChangeFunctionPayload = params => {
    setFunctionPayload(params);
    recalculateFunctionEditorLineCount();
  };
  const handleClearSelection = () => {
    setSelectedFunctionName(undefined);
    setFunctionPayload('');
    setPrompt('');
  };
  const handleSelectFunction = functionName => {
    setPrompt('');
    setFunctionPayload('');
    setSelectedFunctionName(functionName);
  };
  const handleResizeTextArea = () => {
    if (textAreaRef.current) {
      var _textAreaRef$current;
      textAreaRef.current.style.height = 'auto';
      textAreaRef.current.style.height = ((_textAreaRef$current = textAreaRef.current) === null || _textAreaRef$current === void 0 ? void 0 : _textAreaRef$current.scrollHeight) + 'px';
    }
  };
  const handleSubmit = (0, _react.useCallback)(async () => {
    if (loading || !(prompt !== null && prompt !== void 0 && prompt.trim())) {
      return;
    }
    const currentPrompt = prompt;
    const currentPayload = functionPayload;
    setPrompt('');
    setFunctionPayload(undefined);
    handleResizeTextArea();
    try {
      if (selectedFunctionName) {
        await onSubmit({
          '@timestamp': new Date().toISOString(),
          message: {
            role: _common.MessageRole.Assistant,
            content: '',
            function_call: {
              name: selectedFunctionName,
              trigger: _common.MessageRole.User,
              arguments: currentPayload
            }
          }
        });
        setFunctionPayload(undefined);
        setSelectedFunctionName(undefined);
      } else {
        await onSubmit({
          '@timestamp': new Date().toISOString(),
          message: {
            role: _common.MessageRole.User,
            content: currentPrompt
          }
        });
      }
    } catch (_) {
      setPrompt(currentPrompt);
    }
  }, [functionPayload, loading, onSubmit, prompt, selectedFunctionName]);
  (0, _react.useEffect)(() => {
    setFunctionPayload(initialJsonString);
  }, [initialJsonString, selectedFunctionName]);
  (0, _react.useEffect)(() => {
    recalculateFunctionEditorLineCount();
  }, [model, recalculateFunctionEditorLineCount]);
  (0, _react.useEffect)(() => {
    const keyboardListener = event => {
      if (!event.shiftKey && event.key === _eui.keys.ENTER && (prompt || selectedFunctionName)) {
        event.preventDefault();
        handleSubmit();
      }
    };
    window.addEventListener('keypress', keyboardListener);
    return () => {
      window.removeEventListener('keypress', keyboardListener);
    };
  }, [handleSubmit, prompt, selectedFunctionName]);
  (0, _react.useEffect)(() => {
    const textarea = textAreaRef.current;
    if (textarea) {
      textarea.focus();
      textarea.addEventListener('input', handleResizeTextArea, false);
    }
    return () => {
      textarea === null || textarea === void 0 ? void 0 : textarea.removeEventListener('input', handleResizeTextArea, false);
    };
  });
  return /*#__PURE__*/_react.default.createElement(_eui.EuiFocusTrap, {
    disabled: !isFocusTrapEnabled
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
    gutterSize: "s",
    responsive: false
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: true
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
    direction: "column",
    gutterSize: "s"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
    responsive: false
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: true
  }, /*#__PURE__*/_react.default.createElement(_function_list_popover.FunctionListPopover, {
    selectedFunctionName: selectedFunctionName,
    onSelectFunction: handleSelectFunction,
    disabled: loading || disabled
  })), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: false
  }, selectedFunctionName ? /*#__PURE__*/_react.default.createElement(_eui.EuiButtonEmpty, {
    "data-test-subj": "observabilityAiAssistantChatPromptEditorEmptySelectionButton",
    iconType: "cross",
    iconSide: "right",
    size: "xs",
    disabled: loading || disabled,
    onClick: handleClearSelection
  }, _i18n.i18n.translate('xpack.observabilityAiAssistant.prompt.emptySelection', {
    defaultMessage: 'Empty selection'
  })) : null))), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, selectedFunctionName ? /*#__PURE__*/_react.default.createElement(_eui.EuiPanel, {
    borderRadius: "none",
    color: "subdued",
    hasShadow: false,
    paddingSize: "xs"
  }, /*#__PURE__*/_react.default.createElement(_public.CodeEditor, {
    "aria-label": "payloadEditor",
    "data-test-subj": "observabilityAiAssistantChatPromptEditorCodeEditor",
    fullWidth: true,
    height: functionEditorLineCount > 8 ? '200px' : '120px',
    languageId: "json",
    isCopyable: true,
    languageConfiguration: {
      autoClosingPairs: [{
        open: '{',
        close: '}'
      }]
    },
    editorDidMount: editor => {
      editor.focus();
    },
    options: {
      accessibilitySupport: 'off',
      acceptSuggestionOnEnter: 'on',
      automaticLayout: true,
      autoClosingQuotes: 'always',
      autoIndent: 'full',
      contextmenu: true,
      fontSize: 12,
      formatOnPaste: true,
      formatOnType: true,
      inlineHints: {
        enabled: true
      },
      lineNumbers: 'on',
      minimap: {
        enabled: false
      },
      model,
      overviewRulerBorder: false,
      quickSuggestions: true,
      scrollbar: {
        alwaysConsumeMouseWheel: false
      },
      scrollBeyondLastLine: false,
      suggestOnTriggerCharacters: true,
      tabSize: 2,
      wordWrap: 'on',
      wrappingIndent: 'indent'
    },
    transparentBackground: true,
    value: functionPayload || '',
    onChange: handleChangeFunctionPayload
  })) : /*#__PURE__*/_react.default.createElement(_eui.EuiTextArea, {
    "data-test-subj": "observabilityAiAssistantChatPromptEditorTextArea",
    css: {
      maxHeight: 200
    },
    disabled: disabled,
    fullWidth: true,
    inputRef: textAreaRef,
    placeholder: _i18n.i18n.translate('xpack.observabilityAiAssistant.prompt.placeholder', {
      defaultMessage: 'Send a message to the Assistant'
    }),
    resize: "vertical",
    rows: 1,
    value: prompt,
    onChange: handleChange
  })))), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: false
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiSpacer, {
    size: "xl"
  }), /*#__PURE__*/_react.default.createElement(_eui.EuiButtonIcon, {
    "data-test-subj": "observabilityAiAssistantChatPromptEditorButtonIcon",
    "aria-label": "Submit",
    disabled: selectedFunctionName ? false : !(prompt !== null && prompt !== void 0 && prompt.trim()) || loading || disabled,
    display: selectedFunctionName ? functionPayload ? 'fill' : 'base' : prompt ? 'fill' : 'base',
    iconType: "kqlFunction",
    isLoading: loading,
    size: "m",
    onClick: handleSubmit
  }))));
}