added loading to expansion animation for summary box, fixed loader and resolved icon overlapping selected text

components/brave_rewards/resources/page/ping_doc_signer/components/PdfPage/PdfPage.tsx

@@ -25,6 +25,7 @@ const PdfPage: React.FC<PdfPageProps> = ({
                 renderMode="canvas"
                 onLoadSuccess={onLoadSuccess}
                 canvasRef={pdfCanvasRef}
+                loading=""
             />
             <OverlayCanvas
                 ref={overlayCanvasRef}

components/brave_rewards/resources/page/ping_doc_signer/pdf_renderer.tsx

@@ -446,7 +446,7 @@ export const PdfRenderer: React.FC = () => {
             <Document
               file={pdfFile}
               onLoadSuccess={onDocumentLoadSuccess}
-              // loading={<div>Loading PDF...</div>}
+              loading={<S.Loader>Loading PDF...</S.Loader>}
             >
               {numPages &&
                 Array.from({ length: numPages }, (_, index) => (

components/brave_rewards/resources/page/ping_doc_signer/styles.ts

@@ -215,4 +215,10 @@ export const LoadingSpinner = styled.div`
   width: 50px;
   height: 50px;
   animation: ${spin} 1s linear infinite;
-`;
+`;
+
+export const Loader = styled.div`
+  font-size: 20px;
+  color: #FFF;
+  top: 20px;
+`

components/ping_ai_copilot/extension/content/content_scripts/content.js

@@ -68,16 +68,42 @@ const showSummarizeIcon = (selectedText, event) => {
     document.body.appendChild(summarizer);
   }
 
-  // Calculate position relative to the document
+  const selection = window.getSelection();
+  const range = selection.getRangeAt(0);
+  const endRange = document.createRange();
+  endRange.setStart(range.endContainer, range.endOffset);
+  endRange.setEnd(range.endContainer, range.endOffset);
+
+  let rect;
+  if (range.endContainer.nodeType === Node.TEXT_NODE) {
+    const text = range.endContainer.textContent;
+    let wordStart = range.endOffset;
+
+    while (wordStart > 0 && /\S/.test(text[wordStart - 1])) {
+      wordStart--;
+    }
+    endRange.setStart(range.endContainer, wordStart);
+    rect = endRange.getBoundingClientRect();
+  } else {
+    rect = range.getBoundingClientRect();
+  }
+
   const scrollX = window.scrollX || document.documentElement.scrollLeft;
   const scrollY = window.scrollY || document.documentElement.scrollTop;
+
+  let top; let left;
+  if(event.detail === 3){
+    top = rect.bottom + scrollY + 1;
+    left = rect.right + scrollX + 1
+  }
+  top = rect.bottom + scrollY + 5;
+  left = rect.right + scrollX + 5;
 
-  summarizer.style.top = `${event.clientY + scrollY}px`;
-  summarizer.style.left = `${event.clientX + scrollX}px`;
-
+  summarizer.style.top = `${top}px`;
+  summarizer.style.left = `${left}px`;
   summarizer.style.display = 'inline-block';
-  isSummarizerVisible = true;  
-}
+  isSummarizerVisible = true;
+};
 
 const hideSummarizeIcon = () => {
   if (summarizer) {
@@ -131,6 +157,11 @@ const showSummaryBox = (isLoading, summary = '', headerText = '') => {
 
   summaryBox.style.animation = 'slideUp 0.3s ease-out';
   summaryBox.style.display = 'block';
+  setTimeout(() => {
+    const height = summaryBox.scrollHeight;
+    summaryBox.style.maxHeight = `${height}px`;
+    summaryBox.style.opacity = '1';
+  }, 10);
 }
 
 const hideSummaryBox = () => {

components/ping_ai_copilot/extension/content/ui/style.css

@@ -56,6 +56,10 @@
   color: white;
   font-family: Arial, sans-serif;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
 }
 
 .summary-header {