modify extension styles

Leizhenpeng · Nov 18, 2023 · 8305f61 · 8305f61
1 parent bb68726
commit 8305f61
Show file tree

Hide file tree

Showing 17 changed files with 154 additions and 75 deletions.
diff --git a/extension/package.json b/extension/package.json
@@ -1,8 +1,8 @@
 {
   "name": "gpts-works",
   "displayName": "GPTs Works",
-  "version": "1.0.2",
-  "description": "This extension is used to show Third-party GPTs in ChatGPT explore page.",
+  "version": "1.0.3",
+  "description": "Third-party GPTs store shows on browser sidebar.",
   "author": "idoubi<[email protected]>",
   "scripts": {
     "dev": "plasmo dev",
@@ -13,7 +13,8 @@
     "@plasmohq/messaging": "^0.6.0",
     "plasmo": "0.84.0",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-lazy-load-image-component": "^1.6.0"
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "4.1.1",

diff --git a/extension/pnpm-lock.yaml b/extension/pnpm-lock.yaml
diff --git a/extension/src/background/index.ts b/extension/src/background/index.ts
@@ -0,0 +1,17 @@
+import { sendToContentScript } from "@plasmohq/messaging"
+
+export {}
+
+console.log(
+  "Live now; make now always the most precious time. Now will never come again."
+)
+
+chrome.action.onClicked.addListener((tab) => {
+  console.log("tab clicked", tab)
+  if (tab.id) {
+    sendToContentScript({
+      name: "showSidebar",
+      body: {}
+    })
+  }
+})
diff --git a/extension/src/background/messages/getGpts.ts b/extension/src/background/messages/getGpts.ts
@@ -3,11 +3,6 @@ import type { PlasmoMessaging } from "@plasmohq/messaging"
 import { getGpts } from "~services/gpts"
 
 const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
-  console.log(
-    "debug",
-    process.env.PLASMO_BROWSER,
-    process.env.PLASMO_INDEX_API_BASE_URI
-  )
   const data = await getGpts()
   console.log("get gpts in back", data)
 

diff --git a/extension/src/components/GptsList/index.tsx b/extension/src/components/GptsList/index.tsx
@@ -1,43 +1,53 @@
+import { LazyLoadImage } from "react-lazy-load-image-component"
+
 import type { Gpts } from "~types/gpts"
 
 interface Props {
   gpts: Gpts[]
+  loading: boolean
 }
 
-export default ({ gpts }: Props) => {
+export default ({ gpts, loading }: Props) => {
   return (
-    <ul className="menu overflow-auto text-base-content">
-      {gpts.length > 0 &&
-        gpts.map((item: Gpts, idx: number) => {
-          return (
-            <>
-              {item.avatar_url && item.author_name && (
-                <li key={idx} className="max-w-[480px] overflow-hidden">
+    <>
+      {loading ? (
+        <div className="text-center mx-auto">loading...</div>
+      ) : (
+        <ul className="menu text-base-content">
+          {gpts.length > 0 &&
+            gpts.map((item: Gpts, idx: number) => {
+              if (!item.name || !item.avatar_url || !item.author_name) {
+                return
+              }
+
+              return (
+                <li key={idx} className="w-[360px] overflow-hidden">
                   <a
                     href={item.visit_url}
-                    className="flex items-center rounded-none  border-t border-gray-100 px-2 py-4 hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-transparent">
-                    <img
-                      src={item.avatar_url}
-                      className="h-10 w-10 rounded-full"
-                      alt="GPT"
-                    />
-                    <div className="max-w-[200px] flex-1 ml-2 mr-24">
-                      <h3 className="text-md font-semibold truncate">
-                        {item.name}
-                      </h3>
-                      <p className="text-sm line-clamp-2 truncate">
-                        {item.description}
-                      </p>
-                    </div>
-                    <div className="text-sm text-token-text-tertiary text-left truncate">
-                      By {item.author_name || "-"}
+                    className="rounded-none border-t border-gray-100 px-4 py-4 hover:bg-gray-100">
+                    <div className="flex items-start">
+                      <LazyLoadImage
+                        src={item.avatar_url}
+                        alt=""
+                        className="mr-2 inline-block h-10 w-10 object-cover rounded-full"
+                      />
+
+                      <div className="flex-1">
+                        <h3 className="text-sm font-semibold max-w-[200px] truncate">
+                          {item.name}
+                        </h3>
+                        <p className="my-1 text-xs truncate">
+                          by {item.author_name || "-"}
+                        </p>
+                        <p className="text-xs">{item.description}</p>
+                      </div>
                     </div>
                   </a>
                 </li>
-              )}
-            </>
-          )
-        })}
-    </ul>
+              )
+            })}
+        </ul>
+      )}
+    </>
   )
 }
diff --git a/extension/src/components/Search/index.tsx b/extension/src/components/Search/index.tsx
@@ -36,13 +36,14 @@ export default ({ setGpts, setLoading }: Props) => {
   }
 
   const searchGpts = async (question: string) => {
+    setLoading(true)
     const resp = await sendToBackground({
       name: "searchGpts",
       body: {
         question: question
       }
     })
-    console.log("searchGpts resp", resp)
+    setLoading(false)
     if (resp && resp.data) {
       setGpts(resp.data)
     } else {
@@ -60,11 +61,11 @@ export default ({ setGpts, setLoading }: Props) => {
 
   return (
     <section className="relatve">
-      <div className="mx-auto w-full max-w-3xl px-5 py-2 md:px-10 pt-2 pb-8 md:pt-4 lg:pt-4 text-center">
+      <div className="mx-auto w-full max-w-3xl px-5 py-2 md:px-4 pt-2 pb-4 md:pt-4 lg:pt-4 text-center">
         <div className="flex items-center">
           <input
             type="text"
-            className="flex-1 px-4 py-3 border-2 border-[#2752f4] bg-white rounded-lg"
+            className="flex-1 px-4 py-2 border-2 border-[#2752f4] bg-white rounded-lg"
             placeholder="chat for searching GPTs"
             ref={inputRef}
             value={content}

diff --git a/extension/src/contents/discovery.tsx → extension/src/contents/sidebar.tsx b/extension/src/contents/discovery.tsx → extension/src/contents/sidebar.tsx
@@ -1,15 +1,17 @@
 import cssText from "data-text:~style.css"
 import type { PlasmoCSConfig, PlasmoGetOverlayAnchor } from "plasmo"
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 
 import { sendToBackground } from "@plasmohq/messaging"
+import { useMessage } from "@plasmohq/messaging/hook"
 
 import GptsList from "~components/GptsList"
 import Search from "~components/Search"
 import type { Gpts } from "~types/gpts"
 
 export const config: PlasmoCSConfig = {
-  matches: ["https://chat.openai.com/*"]
+  // matches: ["https://chat.openai.com/*"]
+  matches: ["<all_urls>"]
 }
 
 export const getStyle = () => {
@@ -24,43 +26,72 @@ export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
 export default () => {
   const [gpts, setGpts] = useState<Gpts[]>([])
   const [loading, setLoading] = useState(false)
+  const [showButton, setShowButton] = useState(true)
+  const toggleRef = useRef(null)
 
   const fetchGpts = async () => {
+    setLoading(true)
     const resp = await sendToBackground({
       name: "getGpts",
       body: {
         category: "all"
       }
     })
+    setLoading(false)
     if (resp && resp.data) {
       setGpts(resp.data)
     }
   }
 
+  useMessage<string, string>(async (req, res) => {
+    if (req.name === "showSidebar") {
+      if (toggleRef && toggleRef.current) {
+        fetchGpts()
+        toggleRef.current.checked = true
+      }
+    }
+  })
+
   useEffect(() => {
-    console.log("init contens")
-    fetchGpts()
-  }, [])
+    if (window.location.href.startsWith("https://chat.openai.com/")) {
+      fetchGpts()
+      setShowButton(true)
+    } else {
+      setShowButton(false)
+    }
+  }, [window.location.href])
 
   return (
     <div className="fixed top-0 right-0">
-      <div className="drawer drawer-end">
-        <input id="gpts-drawer" type="checkbox" className="drawer-toggle" />
+      <div className="drawer open drawer-end">
+        <input
+          ref={toggleRef}
+          id="gpts-drawer"
+          type="checkbox"
+          className="drawer-toggle"
+        />
         <div className="drawer-content">
-          {/* Page content here */}
-          <label htmlFor="gpts-drawer" className="text-sm btn btn-primary m-8">
-            Third-party GPTs
-          </label>
+          {showButton && (
+            <label
+              htmlFor="gpts-drawer"
+              className="text-sm btn btn-primary m-8">
+              Third-party GPTs
+            </label>
+          )}
         </div>
         <div className="drawer-side">
           <label
             htmlFor="gpts-drawer"
             aria-label="close sidebar"
             className="drawer-overlay"></label>
 
-          <div className="bg-slate-50 h-full text-black px-4">
+          <div className="bg-slate-50 fixed top-0 bottom-0 overflow-y-auto text-black px-4">
             <div className="flex items-center px-4 pt-10 pb-4">
-              <h2 className="text-2xl mr-2 font-bold">Third-party GPTs</h2>
+              <h2
+                className="text-2xl mr-2 font-bold cursor-pointer"
+                onClick={() => {}}>
+                Third-party GPTs
+              </h2>
               <div className="flex-1"></div>
               <a
                 className="text-primary"
@@ -70,9 +101,9 @@ export default () => {
               </a>
             </div>
 
-            {/* <Search setGpts={setGpts} setLoading={setLoading} /> */}
+            <Search setGpts={setGpts} setLoading={setLoading} />
 
-            <GptsList gpts={gpts} />
+            <GptsList gpts={gpts} loading={loading} />
           </div>
         </div>
       </div>

diff --git a/extension/src/services/gpts.ts b/extension/src/services/gpts.ts
@@ -2,7 +2,7 @@ import type { Gpts } from "../types/gpts"
 
 export const getGpts = async (): Promise<Gpts[]> => {
   try {
-    const uri = "https://gpts.works/api/gpts?from=extension"
+    const uri = `${process.env.PLASMO_PUBLIC_INDEX_API_BASE_URI}/gpts/random?from=extension`
     const resp = await fetch(uri)
     if (resp.ok) {
       const json = await resp.json()
@@ -16,7 +16,7 @@ export const getGpts = async (): Promise<Gpts[]> => {
 }
 
 export const searchGpts = async (question: string): Promise<Gpts[]> => {
-  const uri = `${process.env.PLASMO_INDEX_API_BASE_URI}/gpts/search`
+  const uri = `${process.env.PLASMO_PUBLIC_INDEX_API_BASE_URI}/gpts/search`
   const data = {
     question: question
   }
@@ -27,7 +27,7 @@ export const searchGpts = async (question: string): Promise<Gpts[]> => {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
-        Authorization: `Bearer ${process.env.PLASMO_INDEX_API_KEY}`
+        Authorization: `Bearer ${process.env.PLASMO_PUBLIC_INDEX_API_KEY}`
       },
       body: JSON.stringify(data)
     })

diff --git a/web/app/api/gptsall/route.ts → web/app/api/gpts/all/route.ts b/web/app/api/gptsall/route.ts → web/app/api/gpts/all/route.ts
diff --git a/web/app/api/gpts/route.ts → web/app/api/gpts/random/route.ts b/web/app/api/gpts/route.ts → web/app/api/gpts/random/route.ts
diff --git a/web/app/api/search/route.ts → web/app/api/gpts/search/route.ts b/web/app/api/search/route.ts → web/app/api/gpts/search/route.ts
diff --git a/web/app/api/update-gpts/route.ts → web/app/api/process/update-gpts/route.ts b/web/app/api/update-gpts/route.ts → web/app/api/process/update-gpts/route.ts
diff --git a/web/app/components/Search/index.tsx b/web/app/components/Search/index.tsx
@@ -40,7 +40,7 @@ export default ({ setGpts, setLoading }: Props) => {
     }
 
     try {
-      const uri = "/api/search";
+      const uri = "/api/gpts/search";
       const params = {
         question: content,
       };