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

import { jsxs, jsx } from 'react/jsx-runtime';
import { makeStyles, Box, Accordion, AccordionSummary, Typography, AccordionDetails, Grid, List, ListItem } from '@material-ui/core';
import uniq from 'lodash/uniq';
import { useState, useEffect } from 'react';
import { EntityRefLink } from '@backstage/plugin-catalog-react';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import DescriptionIcon from '@material-ui/icons/Description';
import { Link } from '@backstage/core-components';
import { useApi, configApiRef } from '@backstage/core-plugin-api';
import { parseEntityRef } from '@backstage/catalog-model';

const useStyles = makeStyles((theme) => ({
  embeddingsContent: {
    flexGrow: 1,
    overflowX: "auto"
  },
  embeddingsPre: {
    "word-wrap": "anywhere",
    "white-space": "normal"
  },
  listItem: {
    display: "inline-flex",
    alignItems: "center"
  },
  listItemIcon: {
    marginRight: theme.spacing(0.5),
    color: theme.palette.text.secondary,
    lineHeight: 0
  }
}));
const EmbeddingsView = ({
  embeddings
}) => {
  const classes = useStyles();
  const [techDocsBaseUrl, setTechDocsBaseUrl] = useState();
  const config = useApi(configApiRef);
  useEffect(() => {
    async function loadTechDocsBaseUrl() {
      const baseUrl = await config.getString("app.baseUrl");
      const techDocsPath = await config.getOptionalString("ai.techDocsPath") ?? "/docs";
      setTechDocsBaseUrl(baseUrl + techDocsPath);
    }
    loadTechDocsBaseUrl();
  }, [config]);
  if (!embeddings || embeddings.length < 1) {
    return null;
  }
  const entities = uniq(
    embeddings.filter((it) => it.metadata && it.metadata.entityRef).map((embedding) => embedding.metadata.entityRef).filter(Boolean)
  );
  const techDocs = uniq(
    embeddings.filter(
      (it) => it.metadata && it.metadata.title && it.metadata.location && it.metadata.entityRef
    ).map((embedding) => ({
      title: embedding.metadata.title,
      location: embedding.metadata.location,
      entity: parseEntityRef(embedding.metadata.entityRef)
    }))
  );
  return /* @__PURE__ */ jsxs(Box, { children: [
    /* @__PURE__ */ jsxs(Accordion, { children: [
      /* @__PURE__ */ jsx(AccordionSummary, { expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}), children: /* @__PURE__ */ jsx(Typography, { children: "Related Entities" }) }),
      /* @__PURE__ */ jsx(AccordionDetails, { children: /* @__PURE__ */ jsxs(Grid, { container: true, direction: "row", children: [
        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: "We found the following Entities based on your question. The LLM used these entities as an additional context to attempt to answer your question." }) }),
        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(List, { children: entities.map((entityRef) => /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsx(
          EntityRefLink,
          {
            entityRef,
            defaultKind: "Component"
          }
        ) }, entityRef)) }) })
      ] }) })
    ] }),
    /* @__PURE__ */ jsxs(Accordion, { children: [
      /* @__PURE__ */ jsx(AccordionSummary, { expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}), children: /* @__PURE__ */ jsx(Typography, { children: "Related TechDocs" }) }),
      /* @__PURE__ */ jsx(AccordionDetails, { children: /* @__PURE__ */ jsxs(Grid, { container: true, direction: "row", children: [
        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: "We found the following TechDocs based on your question. The LLM used these TechDocs as an additional context to attempt to answer your question." }) }),
        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(List, { children: techDocs.map((doc) => {
          const url = `${techDocsBaseUrl}/${doc.entity.namespace}/${doc.entity.kind}/${doc.entity.name}/${doc.location}`;
          return /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsx(Link, { to: url, children: /* @__PURE__ */ jsxs(Box, { component: "span", className: classes.listItem, children: [
            /* @__PURE__ */ jsx(
              Box,
              {
                component: "span",
                className: classes.listItemIcon,
                children: /* @__PURE__ */ jsx(DescriptionIcon, { fontSize: "inherit" })
              }
            ),
            doc.title
          ] }) }) }, doc.location);
        }) }) })
      ] }) })
    ] }),
    /* @__PURE__ */ jsxs(Accordion, { children: [
      /* @__PURE__ */ jsx(AccordionSummary, { expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}), children: /* @__PURE__ */ jsx(Typography, { children: "Embedded Snippets" }) }),
      /* @__PURE__ */ jsx(AccordionDetails, { children: /* @__PURE__ */ jsxs(Grid, { container: true, direction: "row", children: [
        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: "These are the snippets sent to the LLM." }) }),
        embeddings.map((embedding) => /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
          "div",
          {
            className: classes.embeddingsContent,
            style: { fontSize: "75%" },
            "data-testid": "embedding-snippet",
            children: /* @__PURE__ */ jsx("pre", { className: classes.embeddingsPre, children: embedding.content })
          }
        ) }))
      ] }) })
    ] })
  ] });
};

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