@roadiehq/rag-ai/dist/components/RagModal/QuestionBox.esm.js

import React, { useState, useCallback } from 'react';
import { Grid, TextField, Button, FormControl, InputLabel, Select, MenuItem, InputAdornment, IconButton } from '@material-ui/core';
import LooksIcon from '@material-ui/icons/Looks';

const QuestionBox = (props) => {
  const { onSubmit = () => {
  }, fullWidth = true, onClear } = props;
  const [label, setLabel] = useState("Ask the LLM");
  const [value, setValue] = useState("");
  const [source, setSource] = useState("all");
  const handleChange = useCallback(
    (e) => {
      if (label === "Ask the LLM") {
        setLabel("ctrl+enter to ask");
      }
      setValue(e.target.value);
    },
    [setValue, label]
  );
  const handleKeyDown = useCallback(
    (e) => {
      if (e.ctrlKey && e.key === "Enter") {
        onSubmit(value, source);
      }
    },
    [onSubmit, value, source]
  );
  const handleClear = useCallback(() => {
    setValue("");
    setLabel("Ask the LLM");
    onClear();
  }, [onClear]);
  const ariaLabel = "Ask the LLM";
  const startAdornment = /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(IconButton, { "aria-label": "Query", size: "small", disabled: true }, /* @__PURE__ */ React.createElement(LooksIcon, null)));
  const clearButtonEndAdornment = /* @__PURE__ */ React.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React.createElement(
    Button,
    {
      "aria-label": "Clear",
      size: "small",
      onClick: handleClear,
      onKeyDown: (event) => {
        if (event.key === "Enter") {
          event.stopPropagation();
        }
      }
    },
    "Clear"
  ));
  return /* @__PURE__ */ React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 11 }, /* @__PURE__ */ React.createElement(
    TextField,
    {
      autoFocus: true,
      multiline: true,
      minRows: 1,
      id: "llm-bar-text-field",
      "data-testid": "llm-bar-next",
      variant: "outlined",
      margin: "normal",
      value,
      label,
      placeholder: "What would you like to know?",
      InputProps: {
        startAdornment,
        endAdornment: clearButtonEndAdornment
      },
      inputProps: {
        "aria-label": ariaLabel
      },
      fullWidth,
      onChange: handleChange,
      onKeyDown: handleKeyDown
    }
  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 1 }, /* @__PURE__ */ React.createElement(
    Button,
    {
      variant: "outlined",
      size: "large",
      fullWidth: true,
      onClick: () => onSubmit(value, source)
    },
    "Ask"
  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(FormControl, { variant: "outlined", fullWidth: true, margin: "dense" }, /* @__PURE__ */ React.createElement(InputLabel, { id: "question-box-source" }, "Source"), /* @__PURE__ */ React.createElement(
    Select,
    {
      labelId: "question-box-source",
      value: source,
      label: "Source",
      onChange: (e) => setSource(e.target.value)
    },
    /* @__PURE__ */ React.createElement(MenuItem, { value: "all" }, "All"),
    /* @__PURE__ */ React.createElement(MenuItem, { value: "catalog" }, "Catalog"),
    /* @__PURE__ */ React.createElement(MenuItem, { value: "tech-docs" }, "TechDocs")
  ))));
};

export { QuestionBox };
//# sourceMappingURL=QuestionBox.esm.js.map