Merge pull request #180 from open-sauced/beta

v1.6.0-beta.1 -> main

Author: bdougie

CHANGELOG.md

@@ -5,6 +5,13 @@
 
 > All notable changes to this project will be documented in this file
 
+## [1.6.0-beta.1](https://github.com/open-sauced/ai/compare/v1.5.0...v1.6.0-beta.1) (2023-06-13)
+
+
+### 🍕 Features
+
+* carousel design for the highlights feed ([#173](https://github.com/open-sauced/ai/issues/173)) ([0392654](https://github.com/open-sauced/ai/commit/03926540cc0ae2203d00bda69d65a40e147e1d46))
+
 ## [1.5.0](https://github.com/open-sauced/ai/compare/v1.4.0...v1.5.0) (2023-06-06)
 
 

npm-shrinkwrap.json

@@ -1,7 +1,7 @@
 {
   "name": "opensauced-browser-extension",
   "private": true,
-  "version": "1.5.0",
+  "version": "1.6.0-beta.1",
   "files": [
     "dist"
   ],
@@ -22,7 +22,8 @@
     "react-chrome-extension-router": "^1.4.0",
     "react-dom": "^18.0.0",
     "react-hot-toast": "^2.4.1",
-    "react-icons": "^4.8.0"
+    "react-icons": "^4.8.0",
+    "swiper": "^9.4.0"
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "^1.0.14",

package.json

@@ -21,3 +21,16 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+:root {
+  --swiper-theme-color: hsla(19, 100%, 50%, 1);
+  --swiper-pagination-top: 5px;
+  --swiper-pagination-bullet-inactive-color: rgb(255, 159, 115);
+  --swiper-pagination-bullet-size: 6px;
+  --swiper-navigation-size: 18px;
+  --swiper-navigation-sides-offset:5px;
+}
+
+.swiper-pagination{
+  position: relative;
+}

src/popup.css

@@ -0,0 +1,69 @@
+
+interface HighlightSlideProps {
+    highlight: {
+        url: string;
+        title: string;
+        login: string;
+        highlight: string;
+    };
+}
+
+export const HighlightSlide = ({ highlight }: HighlightSlideProps) => {
+    const { url, title, login, highlight: highlightText } = highlight;
+
+    const openGraphSearchParameter = url.split("/").slice(3)
+        .join("/");
+    const openGraphUrl = `https://opengraph.githubassets.com/1/${openGraphSearchParameter}`;
+
+    return (
+        <div className="border border-white/40 rounded-md p-3 mt-2 bg-white">
+            {/* fixed height, content ellipsis */}
+            <h3 className="
+                text-base font-medium
+                overflow-hidden
+                line-clamp-2
+                h-6
+                leading-5
+            "
+            >
+                <a
+                    className="text-slate-800 cursor-pointer"
+                    href={url}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                >
+                    {title}
+                </a>
+            </h3>
+
+            <div className="flex items-center">
+                <span className="mr-2 text-slate-500">Author:</span>
+
+                <a
+                    className="text-orange cursor-pointer"
+                    href={`https://insights.opensauced.pizza/user/${login}`}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                >
+                    {login}
+                </a>
+            </div>
+
+            <p className="
+                py-2 text-sm text-slate-500
+                overflow-hidden
+                line-clamp-3
+                h-16
+                leading-5
+            "
+            >
+                {highlightText}
+            </p>
+
+            <img
+                alt="OpenGraph"
+                src={openGraphUrl}
+            />
+
+        </div>);
+};

src/popup/components/HighlightSlide.tsx

@@ -1,7 +1,6 @@
-import React, { useEffect, useReducer, useState } from "react";
+import React, { useEffect, useReducer } from "react";
 import { FaChevronLeft } from "react-icons/fa";
 import OpenSaucedLogo from "../../assets/opensauced-logo.svg";
-import { ImSwitch } from "react-icons/im";
 import toast, { Toaster } from "react-hot-toast";
 
 import {

src/popup/pages/aiprdescription.tsx

@@ -1,12 +1,13 @@
 import {
-    HiArrowLeft,
-    HiArrowRight,
     HiArrowTopRightOnSquare,
     HiOutlineQuestionMarkCircle,
     HiPencil,
     HiUserCircle,
 } from "react-icons/hi2";
 import { FiSettings } from "react-icons/fi";
+import { Navigation, Pagination, A11y } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/swiper-bundle.min.css";
 import OpenSaucedLogo from "../../assets/opensauced-logo.svg";
 import { useAuth } from "../../hooks/useAuth";
 import { useOpensaucedUserCheck } from "../../hooks/useOpensaucedUserCheck";
@@ -22,13 +23,13 @@ import Settings from "./settings";
 import { OPEN_SAUCED_INSIGHTS_DOMAIN } from "../../constants";
 import type { Highlight } from "../../ts/types";
 import { useIsGithubPRPageCheck } from "../../hooks/useGithubPRPageCheck";
+import { HighlightSlide } from "../components/HighlightSlide";
 
 const Home = () => {
     const { user } = useAuth();
     const { currentTabIsOpensaucedUser, checkedUser } = useOpensaucedUserCheck();
     const { isGithubPRPage, prUrl, prTitle } = useIsGithubPRPageCheck();
     const [highlights, setHighlights] = useState<Highlight[]>([]);
-    const [currentPage, setCurrentPage] = useState(0);
 
     useEffect(() => {
         const fetchHighlights = async () => {
@@ -49,14 +50,6 @@ const Home = () => {
         void fetchHighlights();
     }, []);
 
-    const handlePrevious = () => {
-        setCurrentPage(prevPage => prevPage - 1);
-    };
-
-    const handleNext = () => {
-        setCurrentPage(prevPage => prevPage + 1);
-    };
-
     return (
         <div className="p-4 bg-slate-800">
             <div className="grid grid-cols-1 divide-y divide-white/40 divider-y-center-2 min-w-[320px] text-white">
@@ -87,76 +80,40 @@ const Home = () => {
                 </header>
 
                 <main className="main-content">
-                    <h3 className="text font-medium text-base leading-10">Latest Highlight:</h3>
+                    <a
+                        className="flex items-center text-white hover:text-orange no-underline gap-2 w-full font-medium text-lg leading-10"
+                        href={`https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/feed`}
+                        rel="noreferrer"
+                        target="_blank"
+                    >
+                            Highlights feed
+                        <HiArrowTopRightOnSquare />
+                    </a>
 
                     {highlights.length > 0 && (
+                        <Swiper
+                            navigation
+                            modules={[Navigation, Pagination, A11y]}
+                            pagination={{ clickable: true }}
+                            slidesPerView={1}
+                            spaceBetween={50}
+                        >
+                            {
+                                highlights.map((highlight, index) => (
+                                    <SwiperSlide key={index}>
+                                        <HighlightSlide
+                                            highlight={highlight}
+                                        />
+                                    </SwiperSlide>
+                                ))
+                            }
+                        </Swiper>
+                    )}
 
-                        <div className="border border-white/40 rounded-sm p-3 mt-2">
-                            <h3 className="text-base font-medium">
-                                <a
-                                    className="text-blue-500 hover:text-blue-700 underline cursor-pointer"
-                                    href={highlights[currentPage]?.url}
-                                    rel="noopener noreferrer"
-                                    target="_blank"
-                                >
-                                    {highlights[currentPage]?.title}
-                                </a>
-                            </h3>
-
-
-                            <div className="flex items-center">
-                                <div className="mr-2">Author:</div>
-
-                                <a
-                                    className="text-blue-500 hover:text-blue-700 underline cursor-pointer"
-                                    href={`https://insights.opensauced.pizza/user/${highlights[currentPage]?.login}`}
-                                    rel="noopener noreferrer"
-                                    target="_blank"
-
-
-                                >
-                                    {highlights[currentPage]?.login}
-                                </a>
-                            </div>
-
-                            <p className="py-2">
-                                {highlights[currentPage]?.highlight}
-                            </p>
-
-                            <div className="flex justify-center">
-                                <div className="flex justify-center mt-4">
-                                    <button
-                                        className="px-4 py-2 rounded-md bg-blue-500 text-white disabled:opacity-50"
-                                        disabled={currentPage === 0}
-                                        onClick={handlePrevious}
-                                    >
-                                        <HiArrowLeft />
-                                    </button>
-
-                                    <button
-                                        className="px-4 py-2 rounded-md bg-blue-500 text-white disabled:opacity-50 ml-4"
-                                        disabled={currentPage === highlights.length - 1}
-                                        onClick={handleNext}
-                                    >
-                                        <HiArrowRight />
-                                    </button>
-                                </div>
-                            </div>
-                        </div>)}
 
                     <h3 className="text font-medium text-base leading-10">Tools:</h3>
 
                     <div className="tools flex flex-col gap-2">
-                        <a
-                            className="flex items-center bg-slate-700 hover:bg-slate-700/70 text-white hover:text-orange no-underline gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
-                            href={`https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/feed`}
-                            rel="noreferrer"
-                            target="_blank"
-                        >
-                            <HiArrowTopRightOnSquare />
-                            Highlights feed
-                        </a>
-
                         <a
                             className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
                             href={`https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/feed`}

src/popup/pages/home.tsx

@@ -15,15 +15,23 @@ const PostOnHighlight = ({ prUrl, prTitle }: { prUrl: string, prTitle: string })
     const [highlightContent, setHighlightContent] = useState("");
     const [isSendButtonEnabled, enableSendButton] = useState(true);
 
-    const generateAiDescription = async () => {
-        const toastId = toast.loading("Generating summary...");
-
+    const generateAiDescription = () => {
         enableSendButton(false);
-        const description = await getAiDescription(prUrl);
+        const description = getAiDescription(prUrl);
 
-        toast.dismiss(toastId);
-        setHighlightContent(description);
-        enableSendButton(true);
+        toast.promise(description, {
+            loading: "Generating summary...",
+            success: data => {
+                enableSendButton(true);
+                setHighlightContent(data);
+
+                return "Successfully Generated Summary";
+            },
+            error: e => {
+                enableSendButton(true);
+                return `Uh oh, there was an error! ${e.message}`;
+            },
+        }).catch(console.error);
     };
 
 

src/popup/pages/posthighlight.tsx

@@ -181,7 +181,7 @@ export const updateInsight = async (userToken: string, repoId: string, checked:
 };
 export const getHighlights = async (): Promise<Highlights | undefined> => {
     const response = await cachedFetch(
-        `${OPEN_SAUCED_HIGHLIGHTS_ENDPOINT}`,
+        `${OPEN_SAUCED_HIGHLIGHTS_ENDPOINT}?limit=10`,
         {
             method: "GET",
             expireInSeconds: 300,