Summarize parts

README.md

@@ -44,6 +44,15 @@ Built with:
 
 All commands are run from the root of the project, from a terminal:
 
+Before running `npm install`, there're some environment preparations needed. 
+
+| Command               | Action                                          |
+| :-------------------- | :-----------------------------------------------|
+| `nvm use 18`          | Use node version >= 18                           |
+| `brew install pkg-config cairo pango libpng jpeg giflib librsvg`| To install compatible node-canvas versions for Apple Silicon Chip laptop|
+
+After these 2 steps are done, you can start with:
+
 | Command               | Action                                          |
 | :-------------------- | :-----------------------------------------------|
 | `npm install`         | Installs dependencies                           |

next.config.js

@@ -2,8 +2,10 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
+  transpilePackages: ['@douyinfe/semi-ui', '@douyinfe/semi-icons', '@douyinfe/semi-illustrations'],
   webpack(config) {
-    config.experiments = { ...config.experiments, topLevelAwait: true };
+    // config.experiments = { ...config.experiments, topLevelAwait: true };
+    config.externals.push({ sharp: 'commonjs sharp', canvas: 'commonjs canvas' });
     return config;
   },
 };

package.json

@@ -11,6 +11,8 @@
     "prepare:data": "tsx -r dotenv/config ./src/scripts/pinecone-prepare-docs.ts"
   },
   "dependencies": {
+    "@douyinfe/semi-icons": "^2.47.1",
+    "@douyinfe/semi-ui": "^2.47.1",
     "@pinecone-database/pinecone": "^0.1.6",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
@@ -20,12 +22,14 @@
     "@types/node": "20.4.9",
     "@types/react": "18.2.19",
     "@types/react-dom": "18.2.7",
+    "ahooks": "^3.7.8",
     "autoprefixer": "10.4.14",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "dotenv": "^16.3.1",
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.13",
+    "jsdom": "^23.0.0",
     "langchain": "^0.0.126",
     "lucide-react": "^0.265.0",
     "next": "13.4.12",
@@ -35,6 +39,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-markdown": "^8.0.7",
+    "react-pdf-highlighter": "^6.1.0",
     "react-wrap-balancer": "^1.0.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "3.3.3",
@@ -43,6 +48,7 @@
     "zod": "^3.21.4"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.202",
     "@types/pdf-parse": "^1.1.1",
     "tsx": "^3.12.7"
   }

src/app/PdfDisplayer.tsx

@@ -0,0 +1,267 @@
+"use client";
+
+import React, { Component } from "react";
+
+import {
+  PdfLoader,
+  AreaHighlight,
+  Popup
+} from "react-pdf-highlighter";
+import { Highlight } from "./components/Highlight";
+import Tip from "./components/Tip";
+
+// import type { IHighlight, NewHighlight } from "react-pdf-highlighter";
+
+import { Sidebar } from "./Sidebar";
+import { Spinner } from "./Spinner";
+import { testHighlights as _testHighlights } from "./test-highlights";
+
+import "./style/App.css";
+import { PdfHighlighter } from "./components/PdfHighlighter";
+import { PdfContext } from "./page";
+import { IHighlight, NewHighlight } from "./types/types";
+
+const testHighlights: Record<string, Array<IHighlight>> = _testHighlights;
+
+interface State {
+  url: string;
+}
+
+const getNextId = () => String(Math.random()).slice(2);
+
+const parseIdFromHash = () =>
+  document.location.hash.slice("#highlight-".length);
+
+export const resetHash = () => {
+  document.location.hash = "";
+};
+
+const HighlightPopup = ({
+  comment,
+}: {
+  comment: { text: string; emoji: string };
+}) =>
+  comment.text ? (
+    <div className="Highlight__popup">
+      {comment.emoji} {comment.text}
+    </div>
+  ) : null;
+
+// https://arxiv.org/pdf/1708.08021.pdf
+const PRIMARY_PDF_URL = "https://arxiv.org/pdf/1708.08021.pdf";
+// const PRIMARY_PDF_URL = "file:///Users/bytedance/pdf.js/web/compressed.tracemonkey-pldi-09.pdf";
+const SECONDARY_PDF_URL = "https://arxiv.org/pdf/1604.02480.pdf";
+
+const searchParams = new URLSearchParams(document.location.search);
+
+const initialUrl = searchParams.get("url") || PRIMARY_PDF_URL;
+
+class PdfDisplayer extends Component<{
+  highlights: IHighlight[],
+  setHighlights: React.Dispatch<React.SetStateAction<IHighlight[]>>,
+  setSelectedHighlight: React.Dispatch<React.SetStateAction<IHighlight | undefined>>,
+  addHighlight?: ((highlight: NewHighlight) => void) | undefined,
+  setSummary?: React.Dispatch<React.SetStateAction<string>>;
+  isAIBusy: boolean,
+  setIsAIBusy?: React.Dispatch<React.SetStateAction<boolean>>;
+}, State> {
+  state = {
+    url: initialUrl,
+  };
+
+  deleteHighlight = (id: string) => {
+    const highlightsCopy = [...this.props.highlights];
+    this.props.setHighlights(highlightsCopy.filter(i => i.id !== id));
+  }
+
+  handleOpenFile = async (file: File) => {
+    const url = URL.createObjectURL(file);
+    this.setState({
+      url: url,
+    });
+    const key = file.name.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('key', key);
+    try {
+      this.props.setIsAIBusy?.(true);
+      const response = await fetch("/api/upload", {
+        method: "POST",
+        body: formData,
+      });
+      const reader = response?.body?.getReader();
+      let streamingSummary = "";
+      let tokensEnded = false;
+      while (true) {
+        const { done, value } = (await reader?.read()) || {};
+        if (done) {
+          break;
+        }
+        const text = new TextDecoder().decode(value);
+        if (text.includes("tokens-ended") && !tokensEnded) {
+          tokensEnded = true;
+          let texts = text.split("tokens-ended");
+          if (texts.length > 1) {
+            streamingSummary = streamingSummary + texts[0];
+          }
+        } else {
+          streamingSummary = streamingSummary + text;
+        }
+      }
+      console.log("streaming summary", streamingSummary);
+      this.props.setSummary?.(streamingSummary);
+    } catch (err) {
+      console.log(err);
+    } finally {
+      this.props.setIsAIBusy?.(false);
+    }
+  };
+
+  scrollViewerTo = (highlight: any) => {};
+
+  scrollToHighlightFromHash = () => {
+    const highlight = this.getHighlightById(parseIdFromHash());
+
+    if (highlight) {
+      this.scrollViewerTo(highlight);
+    }
+  };
+
+  componentDidMount() {
+    window.addEventListener(
+      "hashchange",
+      this.scrollToHighlightFromHash,
+      false
+    );
+  }
+
+  getHighlightById(id: string) {
+    const { highlights } = this.props;
+
+    return highlights.find((highlight) => highlight.id === id);
+  }
+
+  updateHighlight(highlightId: string, position: Object, content: Object) {
+    console.log("Updating highlight", highlightId, position, content);
+
+    this.props.setHighlights(this.props.highlights.map((h) => {
+      const {
+        id,
+        position: originalPosition,
+        content: originalContent,
+        ...rest
+      } = h;
+      return id === highlightId
+        ? {
+            id,
+            position: { ...originalPosition, ...position },
+            content: { ...originalContent, ...content },
+            ...rest,
+          }
+        : h;
+    }));
+  }
+
+  render() {
+    const { url } = this.state;
+    const { highlights, setHighlights, setSelectedHighlight, setSummary } = this.props;
+
+    return (
+      <div className="App" style={{ display: "flex", height: "100%" }}>
+        <Sidebar
+          highlights={highlights.filter(h => h.isSaved) || []}
+          deleteHighlight={this.deleteHighlight}
+          onFileOpen={this.handleOpenFile}
+        />
+        <div
+          style={{
+            height: "100%",
+            width: '60vw',
+            position: "relative",
+          }}
+        >
+          <PdfLoader url={url} beforeLoad={<Spinner />}>
+            {(pdfDocument) => (
+              <PdfHighlighter
+                pdfDocument={pdfDocument}
+                enableAreaSelection={(event) => event.altKey}
+                onScrollChange={resetHash}
+                pdfScaleValue="auto"
+                scrollRef={(scrollTo) => {
+                  this.scrollViewerTo = scrollTo;
+
+                  this.scrollToHighlightFromHash();
+                }}
+                onSelectionFinished={(
+                  position,
+                  content,
+                  hideTipAndSelection,
+                  transformSelection
+                ) => (
+                  <Tip
+                    onOpen={transformSelection}
+                    onConfirm={(comment) => {
+                      const tempHighlight = { content, position, comment };
+                      this.props.addHighlight?.(tempHighlight);
+                      hideTipAndSelection();
+                    }}
+                  />
+                )}
+                highlightTransform={(
+                  highlight,
+                  index,
+                  setTip,
+                  hideTip,
+                  viewportToScaled,
+                  screenshot,
+                  isScrolledTo
+                ) => {
+                  const isTextHighlight = !Boolean(
+                    highlight.content && highlight.content.image
+                  );
+
+                  const component = isTextHighlight ? (
+                    <Highlight
+                      highlight={highlight}
+                      isScrolledTo={isScrolledTo}
+                      position={highlight.position}
+                      comment={highlight.comment}
+                    />
+                  ) : (
+                    <AreaHighlight
+                      isScrolledTo={isScrolledTo}
+                      highlight={highlight}
+                      onChange={(boundingRect) => {
+                        this.updateHighlight(
+                          highlight.id,
+                          { boundingRect: viewportToScaled(boundingRect) },
+                          { image: screenshot(boundingRect) }
+                        );
+                      }}
+                    />
+                  );
+
+                  return (
+                    <Popup
+                      popupContent={<HighlightPopup {...highlight} />}
+                      onMouseOver={(popupContent) =>
+                        setTip(highlight, (highlight) => popupContent)
+                      }
+                      onMouseOut={hideTip}
+                      key={index}
+                    >
+                      {component}
+                    </Popup>
+                  );
+                }}
+                highlights={highlights}
+              />
+            )}
+          </PdfLoader>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default PdfDisplayer;