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

import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useState, useCallback } from 'react';
import { makeStyles, DialogTitle, Typography, IconButton, DialogContent, Box, Grid } from '@material-ui/core';
import { useHotkeys } from 'react-hotkeys-hook';
import CloseIcon from '@material-ui/icons/Close';
import { QuestionBox } from './QuestionBox.esm.js';
import { ResultRenderer } from './ResultRenderer.esm.js';
import { EmbeddingsView } from './EmbeddingsView.esm.js';
import Dialog from '@material-ui/core/Dialog';
import { ragAiApiRef } from '../../api/ragApi.esm.js';
import 'eventsource-parser/stream';
import { useApi } from '@backstage/core-plugin-api';
import { Thinking } from './Thinking.esm.js';
import { WarningPanel } from '@backstage/core-components';

const useStyles = makeStyles((theme) => ({
  dialogTitle: {
    gap: theme.spacing(1),
    display: "grid",
    alignItems: "center",
    gridTemplateColumns: "1fr auto",
    "&> button": {
      marginTop: theme.spacing(1)
    }
  },
  filter: {
    "& + &": {
      marginTop: theme.spacing(2.5)
    }
  },
  filters: {
    padding: theme.spacing(2),
    marginTop: theme.spacing(2)
  },
  input: {
    flex: 1
  },
  closeButton: {
    position: "absolute",
    right: theme.spacing(1),
    top: theme.spacing(1),
    color: theme.palette.grey[500]
  },
  dialogActionsContainer: { padding: theme.spacing(1, 3) },
  viewResultsLink: { verticalAlign: "0.5em" }
}));
const ControlledRagModal = ({
  title = "AI Assistant",
  hotkey = "ctrl+comma",
  open,
  setOpen
}) => {
  const classes = useStyles();
  const [thinking, setThinking] = useState(false);
  const [questionResult, setQuestionResult] = useState("");
  const [embeddings, setEmbeddings] = useState([]);
  const [warning, setWarning] = useState();
  const ragApi = useApi(ragAiApiRef);
  const askLlm = useCallback(
    async (question, source) => {
      setThinking(true);
      setQuestionResult("");
      setWarning(void 0);
      setEmbeddings([]);
      for await (const chunk of ragApi.ask(question, source)) {
        switch (chunk.event) {
          case "response": {
            setQuestionResult((value) => value + chunk.data);
            break;
          }
          case "embeddings": {
            setEmbeddings(JSON.parse(chunk.data));
            break;
          }
          case "error": {
            setWarning(chunk.data);
            break;
          }
          case "usage": {
            break;
          }
          default:
            throw new Error(`Unknown event type: ${chunk.event}`);
        }
      }
      setThinking(false);
    },
    [ragApi]
  );
  useHotkeys(hotkey, () => setOpen(true), []);
  return /* @__PURE__ */ jsxs(
    Dialog,
    {
      open,
      onClose: () => {
        setOpen(false);
        setThinking(false);
        setQuestionResult("");
        setEmbeddings([]);
      },
      fullWidth: true,
      maxWidth: "lg",
      children: [
        /* @__PURE__ */ jsxs(DialogTitle, { children: [
          /* @__PURE__ */ jsx(Typography, { variant: "h6", children: title }),
          /* @__PURE__ */ jsx(
            IconButton,
            {
              "aria-label": "close",
              className: classes.closeButton,
              onClick: () => setOpen(false),
              children: /* @__PURE__ */ jsx(CloseIcon, {})
            }
          )
        ] }),
        /* @__PURE__ */ jsxs(DialogContent, { children: [
          /* @__PURE__ */ jsx(Box, { className: classes.dialogTitle, children: /* @__PURE__ */ jsx(
            QuestionBox,
            {
              onSubmit: askLlm,
              fullWidth: true,
              onClear: () => {
                setQuestionResult("");
                setEmbeddings([]);
              }
            }
          ) }),
          warning && /* @__PURE__ */ jsx(WarningPanel, { severity: "warning", message: warning }),
          thinking && !questionResult && !warning ? /* @__PURE__ */ jsx(Box, { p: 6, display: "flex", justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ jsx(Thinking, {}) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ jsx(Box, { py: 3, children: /* @__PURE__ */ jsxs(Grid, { container: true, children: [
              questionResult && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Response" }) }),
              /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(ResultRenderer, { result: questionResult }) })
            ] }) }),
            /* @__PURE__ */ jsx(Box, { py: 3, children: /* @__PURE__ */ jsxs(Grid, { container: true, children: [
              embeddings && embeddings.length > 0 && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Additional Information" }) }),
              /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(EmbeddingsView, { embeddings }) })
            ] }) })
          ] })
        ] })
      ]
    }
  );
};
const UncontrolledRagModal = (props) => {
  const [open, setOpen] = useState(false);
  return /* @__PURE__ */ jsx(ControlledRagModal, { open, setOpen, ...props });
};

export { ControlledRagModal, UncontrolledRagModal };
//# sourceMappingURL=RagModal.esm.js.map