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

import { jsxs, jsx } from 'react/jsx-runtime';
import { 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__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(IconButton, { "aria-label": "Query", size: "small", disabled: true, children: /* @__PURE__ */ jsx(LooksIcon, {}) }) });
  const clearButtonEndAdornment = /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
    Button,
    {
      "aria-label": "Clear",
      size: "small",
      onClick: handleClear,
      onKeyDown: (event) => {
        if (event.key === "Enter") {
          event.stopPropagation();
        }
      },
      children: "Clear"
    }
  ) });
  return /* @__PURE__ */ jsxs(Grid, { container: true, justifyContent: "center", alignItems: "center", children: [
    /* @__PURE__ */ jsx(Grid, { item: true, xs: 11, children: /* @__PURE__ */ jsx(
      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__ */ jsx(Grid, { item: true, xs: 1, children: /* @__PURE__ */ jsx(
      Button,
      {
        variant: "outlined",
        size: "large",
        fullWidth: true,
        onClick: () => onSubmit(value, source),
        children: "Ask"
      }
    ) }),
    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(FormControl, { variant: "outlined", fullWidth: true, margin: "dense", children: [
      /* @__PURE__ */ jsx(InputLabel, { id: "question-box-source", children: "Source" }),
      /* @__PURE__ */ jsxs(
        Select,
        {
          labelId: "question-box-source",
          value: source,
          label: "Source",
          onChange: (e) => setSource(e.target.value),
          children: [
            /* @__PURE__ */ jsx(MenuItem, { value: "all", children: "All" }),
            /* @__PURE__ */ jsx(MenuItem, { value: "catalog", children: "Catalog" }),
            /* @__PURE__ */ jsx(MenuItem, { value: "tech-docs", children: "TechDocs" })
          ]
        }
      )
    ] }) })
  ] });
};

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