Added copy button for copy/pasting markdown, html and JSON exactly as is. Can copy text from within chunks now as well.

apps/web/src/components/PDF/PDF.tsx

@@ -2,7 +2,7 @@ import { useRef, useState } from "react";
 import { pdfjs, Document, Page } from "react-pdf";
 import "react-pdf/dist/esm/Page/AnnotationLayer.css";
 import "react-pdf/dist/esm/Page/TextLayer.css";
-import { ScrollArea } from "@radix-ui/themes";
+import { ScrollArea, Box, Text } from "@radix-ui/themes";
 import {
   Chunk,
   Segment,
@@ -67,8 +67,6 @@ const segmentLightColors: Record<SegmentType, string> = {
   "Section header": "--cyan-2",
 };
 
-import { Box, Text } from "@radix-ui/themes";
-
 export function PDF({
   content,
   inputFileUrl,
@@ -78,7 +76,6 @@ export function PDF({
   inputFileUrl: string;
   onSegmentClick: (chunkIndex: number, segmentIndex: number) => void;
 }) {
-  console.log(content);
   const [numPages, setNumPages] = useState<number>();
 
   function onDocumentLoadSuccess(document: pdfjs.PDFDocumentProxy): void {

apps/web/src/components/SegmentChunk/SegmentChunk.tsx

@@ -11,6 +11,7 @@ import DOMPurify from "dompurify";
 
 import ReactMarkdown from "react-markdown";
 import ReactJson from "react-json-view";
+import BetterButton from "../BetterButton/BetterButton";
 
 export const SegmentChunk = forwardRef<
   HTMLDivElement,
@@ -64,6 +65,25 @@ export const SegmentChunk = forwardRef<
       .join("");
   }, [chunk.segments]);
 
+  const handleCopy = () => {
+    let textToCopy = "";
+    if (selectedView === "html") {
+      textToCopy = combinedHtml;
+    } else if (selectedView === "markdown") {
+      textToCopy = combinedMarkdown;
+    } else if (selectedView === "json") {
+      textToCopy = JSON.stringify(chunk.segments, null, 2);
+    }
+    navigator.clipboard
+      .writeText(textToCopy)
+      .then(() => {
+        console.log("Copied to clipboard");
+      })
+      .catch((err) => {
+        console.error("Failed to copy: ", err);
+      });
+  };
+
   return (
     <div ref={ref}>
       <Accordion.Root
@@ -108,26 +128,43 @@ export const SegmentChunk = forwardRef<
                   </Flex>
                 </Flex>
 
-                <Flex gap="4">
+                <Flex gap="4" align="center">
                   {["html", "markdown", "json"].map((view) => (
-                    <Text
-                      key={view}
-                      size="3"
-                      weight="medium"
-                      style={{
-                        color:
-                          selectedView === view
-                            ? "hsla(0, 0%, 100%, 0.9)"
-                            : "#8A9BA8",
-                        cursor: "pointer",
-                      }}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setSelectedView(view as "html" | "markdown" | "json");
-                      }}
-                    >
-                      {view === "markdown" ? "Markdown" : view.toUpperCase()}
-                    </Text>
+                    <Flex key={view} align="center" gap="2">
+                      <Text
+                        size="2"
+                        weight="medium"
+                        style={{
+                          color:
+                            selectedView === view
+                              ? "hsla(0, 0%, 100%, 0.9)"
+                              : "#8A9BA8",
+                          cursor: "pointer",
+                        }}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setSelectedView(view as "html" | "markdown" | "json");
+                        }}
+                      >
+                        {view === "markdown" ? "Markdown" : view.toUpperCase()}
+                      </Text>
+                      {selectedView === view && (
+                        <BetterButton
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleCopy();
+                          }}
+                        >
+                          <Text
+                            weight="medium"
+                            className="white"
+                            style={{ fontSize: "10px" }}
+                          >
+                            Copy
+                          </Text>
+                        </BetterButton>
+                      )}
+                    </Flex>
                   ))}
                 </Flex>
               </Flex>

apps/web/src/index.css

@@ -26,6 +26,11 @@ a:hover {
   color: hsl(0, 0%, 100%);
 }
 
+::selection {
+  background: #fff !important;
+  color: #000 !important;
+}
+
 body {
   margin: 0;
   display: flex;

apps/web/src/pages/Home/Home.tsx

@@ -17,7 +17,6 @@ const Home = () => {
     if (auth.isAuthenticated) {
       navigate("/dashboard");
     } else {
-      console.log(auth);
       auth.signinRedirect();
     }
   };