yt-embeddings-strapi-plugin 0.0.1

package/dist/_chunks/App-Cv1cdLAr.js

@@ -0,0 +1,587 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const admin = require("@strapi/strapi/admin");
+const reactRouterDom = require("react-router-dom");
+const react = require("react");
+const styled = require("styled-components");
+const designSystem = require("@strapi/design-system");
+const icons = require("@strapi/icons");
+const index = require("./index-BAfBs5PQ.js");
+const qs = require("qs");
+const ReactMarkdown = require("react-markdown");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const qs__default = /* @__PURE__ */ _interopDefault(qs);
+const ReactMarkdown__default = /* @__PURE__ */ _interopDefault(ReactMarkdown);
+const MarkdownWrapper = styled__default.default.div`
+  /* Headers */
+  h1 {
+    font-size: 2.25rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: #272728;
+  }
+
+  h2 {
+    font-size: 1.75rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: #272728;
+  }
+
+  h3 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: #272728;
+  }
+
+  h4 {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: #272728;
+  }
+
+  h5 {
+    font-size: 1.125rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: #272728;
+  }
+
+  h6 {
+    font-size: 1rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: #9d4edd;
+  }
+
+  /* Horizontal rules */
+  hr {
+    border-color: #d1d5db;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  a {
+    color: #4945ff;
+    text-decoration: underline;
+  }
+
+  /* Paragraphs */
+  p {
+    margin-bottom: 1rem;
+    line-height: 1.5rem;
+    color: #39393a;
+  }
+
+  /* Emphasis */
+  strong {
+    font-weight: 700;
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  del {
+    text-decoration: line-through;
+  }
+
+  /* Blockquotes */
+  blockquote {
+    border-left-width: 1px;
+    border-color: #9ca3af;
+    padding-left: 1rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    margin-bottom: 1rem;
+  }
+
+  /* Lists */
+  ul {
+    list-style-type: disc;
+    padding-left: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  ol {
+    list-style-type: decimal;
+    padding-left: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  li {
+    margin-bottom: 0.5rem;
+  }
+
+  li > ul {
+    list-style-type: disc;
+    padding-left: 1rem;
+    margin-bottom: 0.5rem;
+  }
+
+  li > ol {
+    list-style-type: decimal;
+    padding-left: 1rem;
+    margin-bottom: 0.5rem;
+  }
+
+  /* Code blocks */
+  pre {
+    font-family: monospace;
+    background-color: #1f2937;
+    color: #f9fafb;
+    border-radius: 0.375rem;
+    padding: 1rem;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    line-height: 1.5rem;
+    overflow: auto;
+  }
+
+  code {
+    font-family: monospace;
+    background-color: #1f2937;
+    color: #f9fafb;
+    border-radius: 0.375rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
+
+  /* Tables */
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border-color: #d1d5db;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  th {
+    background-color: #1f2937;
+    text-align: left;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    font-weight: 600;
+    border-bottom-width: 1px;
+    border-color: #d1d5db;
+  }
+
+  td {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    border-bottom-width: 1px;
+    border-color: #d1d5db;
+  }
+
+  /* Images */
+  img {
+    width: 100%;
+    object-fit: cover;
+    border-radius: 0.75rem;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+`;
+function Markdown({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(MarkdownWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    ReactMarkdown__default.default,
+    {
+      components: {
+        a: ({ href, children: linkChildren }) => /* @__PURE__ */ jsxRuntime.jsx("a", { href, target: "_blank", rel: "noopener noreferrer", children: linkChildren })
+      },
+      children
+    }
+  ) });
+}
+const StyledButton = styled__default.default(designSystem.Button)`
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  height: 3.5rem;
+  width: 3.5rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  z-index: 100;
+
+  svg {
+    height: 1.75rem;
+    width: 1.75rem;
+  }
+`;
+const ResponseContainer = styled__default.default.div`
+  border: solid 1px #e3e9f3;
+  border-radius: 4px;
+  padding: 1rem;
+  color: #32324d;
+  font-weight: 400;
+  font-size: 0.875rem;
+  display: block;
+  width: 100%;
+  max-height: 400px;
+  background: inherit;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+`;
+function AccordionDetails({ title, content, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 1, background: "primary100", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { size: "S", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: "acc-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: title }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 3, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: content }),
+      children && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 1, children })
+    ] }) })
+  ] }) }) });
+}
+function ShowResponse({ data, onNavigate }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: data.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { marginBottom: 4, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Markdown, { children: item.text }) }),
+    item.sourceDocuments?.length > 0 && item.sourceDocuments.map((doc, docIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+      AccordionDetails,
+      {
+        title: `Source: ${doc.metadata.title}`,
+        content: /* @__PURE__ */ jsxRuntime.jsx(Markdown, { children: doc.pageContent }),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { display: "flex", gap: 3, children: [
+          doc.metadata.deepLink && /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: doc.metadata.deepLink,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              style: { color: "#4945ff", textDecoration: "none", fontSize: "0.875rem" },
+              children: "Watch on YouTube ↗"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Link,
+            {
+              onClick: () => onNavigate(doc.metadata.id),
+              style: { cursor: "pointer" },
+              children: "View in Dashboard"
+            }
+          )
+        ] })
+      },
+      docIndex
+    ))
+  ] }, index2)) });
+}
+function ChatModal() {
+  const { get } = admin.useFetchClient();
+  const containerRef = react.useRef(null);
+  const navigate = reactRouterDom.useNavigate();
+  const [isVisible, setIsVisible] = react.useState(false);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [inputValue, setInputValue] = react.useState("");
+  const [data, setData] = react.useState([]);
+  react.useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, [data]);
+  function handleNavigate(id) {
+    setIsVisible(false);
+    navigate(`/plugins/${index.PLUGIN_ID}/video/${id}`);
+  }
+  async function handleQueryEmbeddings(e) {
+    e.preventDefault();
+    if (!inputValue.trim() || isLoading) return;
+    setIsLoading(true);
+    try {
+      const response = await get(
+        `/${index.PLUGIN_ID}/embeddings/embeddings-query?${qs__default.default.stringify({
+          query: inputValue
+        })}`
+      );
+      if (response.data && !response.data.error) {
+        setData((prev) => [...prev, response.data]);
+      }
+      setInputValue("");
+    } catch (error) {
+      console.error("Query failed:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(StyledButton, { onClick: () => setIsVisible(true), "aria-label": "Open chat", children: /* @__PURE__ */ jsxRuntime.jsx(index.RobotIcon, { height: 28, width: 28 }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open: isVisible, onOpenChange: setIsVisible, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: "Chat With Your Data" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Body, { children: [
+        data.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 1, marginBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsx(ResponseContainer, { ref: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(ShowResponse, { data, onNavigate: handleNavigate }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 1, children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleQueryEmbeddings, children: /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.TextInput,
+          {
+            placeholder: "Enter your question",
+            type: "text",
+            "aria-label": "Question",
+            name: "question",
+            onChange: (e) => setInputValue(e.target.value),
+            value: inputValue
+          }
+        ) }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Close, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", children: "Cancel" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Button,
+          {
+            onClick: handleQueryEmbeddings,
+            disabled: !inputValue.trim() || isLoading,
+            loading: isLoading,
+            children: isLoading ? "Sending..." : "Send"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+const ClickableTr = styled__default.default(designSystem.Tr)`
+  cursor: pointer;
+  &:hover { background-color: #f0f0ff; }
+`;
+function formatDuration(seconds) {
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+function formatDate(iso) {
+  if (!iso) return "-";
+  return new Date(iso).toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function HomePage() {
+  const navigate = reactRouterDom.useNavigate();
+  const { get, post } = admin.useFetchClient();
+  const [videos, setVideos] = react.useState([]);
+  const [total, setTotal] = react.useState(0);
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [isRecomputing, setIsRecomputing] = react.useState(false);
+  const fetchVideos = react.useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const response = await get(`/${index.PLUGIN_ID}/yt/videos?pageSize=100`);
+      const data = response?.data || response;
+      setVideos(data?.data || []);
+      setTotal(data?.total || 0);
+    } catch (error) {
+      console.error("Failed to fetch videos:", error);
+      setVideos([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [get]);
+  react.useEffect(() => {
+    fetchVideos();
+  }, [fetchVideos]);
+  const handleRecompute = async () => {
+    if (!confirm("This will delete ALL embeddings and re-embed every transcript. Continue?")) return;
+    setIsRecomputing(true);
+    try {
+      await post(`/${index.PLUGIN_ID}/yt/recompute`);
+      await fetchVideos();
+    } catch (error) {
+      console.error("Recompute failed:", error);
+    } finally {
+      setIsRecomputing(false);
+    }
+  };
+  const headerActions = /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Button,
+    {
+      variant: "secondary",
+      startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowClockwise, {}),
+      onClick: handleRecompute,
+      loading: isRecomputing,
+      disabled: isRecomputing,
+      children: isRecomputing ? "Re-embedding..." : "Re-embed All"
+    }
+  ) });
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Main, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        admin.Layouts.Header,
+        {
+          title: "YouTube Embeddings",
+          subtitle: "Embedded transcripts in vector store",
+          primaryAction: headerActions
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(admin.Layouts.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: "Loading..." }) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Main, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      admin.Layouts.Header,
+      {
+        title: "YouTube Embeddings",
+        subtitle: `${total} video${total !== 1 ? "s" : ""} embedded`,
+        primaryAction: headerActions
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(admin.Layouts.Content, { children: videos.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 8, background: "neutral100", hasRadius: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", textColor: "neutral600", children: "No embedded videos yet" }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: 'Open a Transcript entry and click "Create Embedding" to get started.' })
+    ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { colCount: 5, rowCount: videos.length + 1, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Title" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Topics" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Chunks" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Duration" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Embedded" }) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: videos.map((video) => /* @__PURE__ */ jsxRuntime.jsxs(ClickableTr, { onClick: () => navigate(`/plugins/${index.PLUGIN_ID}/video/${video.video_id}`), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Td, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", fontWeight: "semiBold", children: video.title }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: video.video_id })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, wrap: "wrap", children: [
+          (video.topics || []).slice(0, 3).map((topic, i) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { children: topic }, i)),
+          (video.topics || []).length > 3 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: [
+            "+",
+            video.topics.length - 3
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", children: video.chunk_count }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", children: video.duration_seconds ? formatDuration(video.duration_seconds) : "-" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: formatDate(video.embedded_at || video.created_at) }) })
+      ] }, video.video_id)) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ChatModal, {})
+  ] });
+}
+function BackLink({ to }) {
+  if (to) {
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Link, { tag: reactRouterDom.NavLink, to, startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowLeft, {}), children: "Go back" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Link, { tag: reactRouterDom.NavLink, to: "..", relative: "path", startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowLeft, {}), children: "Go back" });
+}
+function formatTime(seconds) {
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+function VideoDetails() {
+  const { videoId } = reactRouterDom.useParams();
+  const { get } = admin.useFetchClient();
+  const [video, setVideo] = react.useState(null);
+  const [chunks, setChunks] = react.useState([]);
+  const [isLoading, setIsLoading] = react.useState(true);
+  react.useEffect(() => {
+    if (!videoId) return;
+    Promise.all([
+      get(`/${index.PLUGIN_ID}/yt/videos/${videoId}`),
+      get(`/${index.PLUGIN_ID}/yt/videos/${videoId}/chunks`)
+    ]).then(([videoRes, chunksRes]) => {
+      setVideo(videoRes?.data?.data || videoRes?.data || null);
+      setChunks(chunksRes?.data?.data || chunksRes?.data || []);
+    }).catch((err) => console.error("Failed to load video:", err)).finally(() => setIsLoading(false));
+  }, [videoId, get]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Main, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        admin.Layouts.Header,
+        {
+          title: "Loading...",
+          navigationAction: /* @__PURE__ */ jsxRuntime.jsx(BackLink, { to: `/plugins/${index.PLUGIN_ID}` })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(admin.Layouts.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: "Loading video details..." }) }) })
+    ] });
+  }
+  if (!video) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Main, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        admin.Layouts.Header,
+        {
+          title: "Video Not Found",
+          navigationAction: /* @__PURE__ */ jsxRuntime.jsx(BackLink, { to: `/plugins/${index.PLUGIN_ID}` })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(admin.Layouts.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 8, textAlign: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: "Video not found in the vector store." }) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Main, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      admin.Layouts.Header,
+      {
+        title: video.title,
+        subtitle: `${video.chunk_count} chunks | ${formatTime(video.duration_seconds || 0)} duration`,
+        navigationAction: /* @__PURE__ */ jsxRuntime.jsx(BackLink, { to: `/plugins/${index.PLUGIN_ID}` })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(admin.Layouts.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { background: "neutral0", padding: 4, hasRadius: true, marginBottom: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", style: { display: "block", marginBottom: "0.5rem" }, children: "Summary" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral700", style: { display: "block", marginBottom: "1rem" }, children: video.summary }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 1, wrap: "wrap", children: (video.topics || []).map((topic, i) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { children: topic }, i)) })
+      ] }),
+      video.key_moments?.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { background: "neutral0", padding: 4, hasRadius: true, marginBottom: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", style: { display: "block", marginBottom: "0.5rem" }, children: "Key Moments" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { colCount: 3, rowCount: video.key_moments.length + 1, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Time" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Label" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Summary" }) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: video.key_moments.map((moment, i) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { children: formatTime(moment.startSeconds) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", children: moment.label }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: moment.summary }) })
+          ] }, i)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { background: "neutral0", padding: 4, hasRadius: true, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "delta", style: { display: "block", marginBottom: "0.75rem" }, children: [
+          "Chunks (",
+          chunks.length,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { colCount: 4, rowCount: chunks.length + 1, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "#" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Time Range" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Text" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Tokens" }) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: chunks.map((chunk) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: chunk.chunk_index }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Badge, { children: [
+              formatTime(chunk.start_seconds),
+              " - ",
+              formatTime(chunk.end_seconds)
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral700", style: { fontSize: "0.8125rem", lineHeight: 1.4 }, children: chunk.text.length > 200 ? chunk.text.slice(0, 200) + "..." : chunk.text }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: [
+              "~",
+              chunk.tokens
+            ] }) })
+          ] }, chunk.id)) })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+const App = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { index: true, element: /* @__PURE__ */ jsxRuntime.jsx(HomePage, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/video/:videoId", element: /* @__PURE__ */ jsxRuntime.jsx(VideoDetails, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "*", element: /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Error, {}) })
+  ] });
+};
+exports.App = App;