Merge pull request #6 from marcolivierbouch/v3

send reply button v3

manifest.json

@@ -1,6 +1,6 @@
 {
   "manifest_version": 3,
-  "version": "2.3",
+  "version": "3.0",
   "name": "XReplyGPT",
   "description": "The fastest way to reply to tweets using ChatGPT and the easiest way to boost your tweet impressions.",
   "icons": {

src/changelog.html

@@ -19,6 +19,21 @@
                 <h2 class="text-4xl font-semibold text-black">XReplyGPT</h2>
             </div>
             <ul class="timeline mt-4">
+                <!-- Release 3 -->
+                <li class="mb-6">
+                    <span class="text-black font-semibold text-xl">Version 3.0</span>
+                    <p class="text-gray-600 ml-auto mb-4">August 11, 2023</p>
+                    <!-- Feature Section -->
+                    <div class="ml-12 mb-4">
+                        <div class="bg-green-300 border-2 border-green-600 rounded-lg p-1 inline-block">
+                            <h3 class="text-lg text-gray-800 font-semibold">Features</h3>
+                        </div>
+                        <p class="my-2">🎉 Added send reply button after generated reply to improve UX.</p>
+                        <img src="releases_images/v3features.PNG" alt="V3 Features"
+                            class="mt-2 border-2 rounded-lg">
+                    </div>
+                </li>
+                <hr class="border-gray-400 my-6">
                 <!-- Release 2.3 -->
                 <li class="mb-6">
                     <span class="text-black font-semibold text-xl">Version 2.3</span>

src/content.js

@@ -2,17 +2,47 @@
 window.articles = document.querySelectorAll('[data-testid="tweet"]');
 
 if (window.articles) {
+    const shadowRootStyles = `
+      /* Add your Tailwind styles or regular CSS styles here */
+      /* Example: */
+      .generated-reply-container {
+        border-style: solid;
+        border-radius: 5px;
+        border-width: 2px;
+        padding: 15px;
+      }
+      /* Styles for the button */
+      .button {
+        background-color: #3490dc;
+        color: #ffffff;
+        border-radius: 0.25rem;
+        padding: 0.5rem 1rem;
+        font-weight: bold;
+        cursor: pointer;
+        margin-top: 5px;
+        transition: background-color 0.2s ease;
+      }
+      
+      /* Hover effect */
+      .button:hover {
+        background-color: #2779bd;
+      }
+      
+      /* Active effect */
+      .button:active {
+        background-color: #1c6ca5;
+      }
+    `;
 
     const user = document.querySelector('[data-testid="AppTabBar_Profile_Link"]');
     const userHandle = '@' + user.href.split('/')[3]
 
     window.articles.forEach(async article => {
+
         const content = article.querySelector('[data-testid="tweet"] [data-testid="tweetText"]');
         const user = article.querySelector('[data-testid="tweet"] [data-testid="User-Name"]');
 
-
         const spans = user.querySelectorAll('span');
-
         let username = ""
         for (let i = 0; i < spans.length; i++) {
             if (spans[i].innerText.startsWith("@")) {
@@ -32,19 +62,25 @@ if (window.articles) {
             console.log("already generated");
             return;
         }
+
+        const tweetContainer = document.createElement('div');
+
+        const shadowRoot = tweetContainer.attachShadow({ mode: 'open' });
+        const styleElement = document.createElement('style');
+        styleElement.textContent = shadowRootStyles;
+        shadowRoot.appendChild(styleElement);
+
+        console.log(content.innerText);
+        console.log(content);
 
         const allRefs = user.querySelectorAll('a');
         const ref = allRefs[2].getAttribute('href');
         const tweetId = ref.split('/')[3];
         console.log(tweetId);
 
         // Log the extracted information to the console
-        let div = document.createElement("div");
-        div.style.borderStyle = 'solid';
-        div.style.borderRadius = '5px';
-        div.style.borderWidth = '2px';
-        div.style.padding = '10px';
-        div.style.margin = '10px';
+        const div = document.createElement('div');
+        div.className = 'generated-reply-container'; // Apply Tailwind classes or use custom class names
 
         const apiKey = await chrome.storage.local.get(['open-ai-key']);
         const gptQuery = await chrome.storage.local.get(['gpt-query']);
@@ -74,7 +110,7 @@ if (window.articles) {
 
         let p = document.createElement("p");
         p.innerHTML = "Generated reply: ";
-        p.style.marginBottom = '10px';
+        p.style.marginBottom = '5px';
         p.style.marginTop = '5px';
         div.appendChild(p);
 
@@ -88,11 +124,40 @@ if (window.articles) {
             link.style.color = 'rgb(0, 0, 0)';
             link.style.textDecoration = 'none';
 
-            // add the button and input field to the div
+            let buttonReply = document.createElement("button");
+            buttonReply.classList.add("button");
+            buttonReply.style.display = "flex";
+            buttonReply.style.alignItems = "center";
+            buttonReply.style.marginTop = "10px";
+
+            // Create an SVG element for the icon
+            let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            svg.setAttribute("width", "18");
+            svg.setAttribute("height", "18");
+            svg.setAttribute("viewBox", "0 0 512 512");
+
+            // Create the SVG path for the paper plane icon
+            let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            path.setAttribute("d", "M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z");
+            path.setAttribute("fill", "white"); // Set the icon color to the current text color
+
+            svg.appendChild(path);
+            buttonReply.appendChild(svg);
+
+            // Add text to the button
+            let buttonText = document.createElement("span");
+            buttonText.innerText = "Send reply";
+            buttonText.style.marginLeft = "10px";
+            buttonReply.appendChild(buttonText);
+
+            let br = document.createElement("br");
+            link.appendChild(br);
+            link.appendChild(buttonReply);
+
             div.appendChild(link);
         })
 
-        // add the div to the tweet
-        content.appendChild(div);
+        shadowRoot.appendChild(div);
+        content.appendChild(shadowRoot);
     })
 }