@roadiehq/rag-ai
Version:
88 lines (85 loc) • 5.57 kB
JavaScript
import { makeStyles, Box, Accordion, AccordionSummary, Typography, AccordionDetails, Grid, List, ListItem } from '@material-ui/core';
import uniq from 'lodash/uniq';
import React, { 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__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Accordion, null, /* @__PURE__ */ React.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React.createElement(Typography, null, "Related Entities")), /* @__PURE__ */ React.createElement(AccordionDetails, null, /* @__PURE__ */ React.createElement(Grid, { container: true, direction: "row" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, "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__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(List, null, entities.map((entityRef) => /* @__PURE__ */ React.createElement(ListItem, { key: entityRef }, /* @__PURE__ */ React.createElement(
EntityRefLink,
{
entityRef,
defaultKind: "Component"
}
)))))))), /* @__PURE__ */ React.createElement(Accordion, null, /* @__PURE__ */ React.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React.createElement(Typography, null, "Related TechDocs")), /* @__PURE__ */ React.createElement(AccordionDetails, null, /* @__PURE__ */ React.createElement(Grid, { container: true, direction: "row" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, "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__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(List, null, techDocs.map((doc) => {
const url = `${techDocsBaseUrl}/${doc.entity.namespace}/${doc.entity.kind}/${doc.entity.name}/${doc.location}`;
return /* @__PURE__ */ React.createElement(ListItem, { key: doc.location }, /* @__PURE__ */ React.createElement(Link, { to: url }, /* @__PURE__ */ React.createElement(Box, { component: "span", className: classes.listItem }, /* @__PURE__ */ React.createElement(
Box,
{
component: "span",
className: classes.listItemIcon
},
/* @__PURE__ */ React.createElement(DescriptionIcon, { fontSize: "inherit" })
), doc.title)));
})))))), /* @__PURE__ */ React.createElement(Accordion, null, /* @__PURE__ */ React.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React.createElement(Typography, null, "Embedded Snippets")), /* @__PURE__ */ React.createElement(AccordionDetails, null, /* @__PURE__ */ React.createElement(Grid, { container: true, direction: "row" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, "These are the snippets sent to the LLM.")), embeddings.map((embedding) => /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
"div",
{
className: classes.embeddingsContent,
style: { fontSize: "75%" },
"data-testid": "embedding-snippet"
},
/* @__PURE__ */ React.createElement("pre", { className: classes.embeddingsPre }, embedding.content)
)))))));
};
export { EmbeddingsView };
//# sourceMappingURL=EmbeddingsView.esm.js.map