adjust styles

extension/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["tauri-apps.tauri-vscode", "rust-lang.rust-analyzer"]
+}

extension/.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

extension/src/background/messages/getGpts.ts

@@ -3,6 +3,11 @@ 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)
 

extension/src/background/messages/searchGpts.ts

@@ -0,0 +1,15 @@
+import type { PlasmoMessaging } from "@plasmohq/messaging"
+
+import { searchGpts } from "~services/gpts"
+
+const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
+  const { question } = req.body
+  const data = await searchGpts(question)
+  console.log("search gpts in back", data)
+
+  res.send({
+    data
+  })
+}
+
+export default handler

extension/src/components/GptsList/index.tsx

@@ -0,0 +1,43 @@
+import type { Gpts } from "~types/gpts"
+
+interface Props {
+  gpts: Gpts[]
+}
+
+export default ({ gpts }: 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">
+                  <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 || "-"}
+                    </div>
+                  </a>
+                </li>
+              )}
+            </>
+          )
+        })}
+    </ul>
+  )
+}

extension/src/components/Search/index.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import type {
+  ChangeEvent,
+  Dispatch,
+  KeyboardEvent,
+  SetStateAction
+} from "react"
+import { useRef, useState } from "react"
+
+import { sendToBackground } from "@plasmohq/messaging"
+
+import type { Gpts } from "~/types/gpts"
+
+interface Props {
+  setGpts: Dispatch<SetStateAction<Gpts[]>>
+  setLoading: Dispatch<SetStateAction<boolean>>
+}
+
+export default ({ setGpts, setLoading }: Props) => {
+  const [inputDisabled, setInputDisabled] = useState(false)
+  const inputRef = useRef<HTMLInputElement | null>(null)
+  const [content, setContent] = useState("")
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setContent(e.target.value)
+  }
+
+  const handleInputKeydown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.code === "Enter" && !e.shiftKey) {
+      if (e.keyCode !== 229) {
+        e.preventDefault()
+        handleSubmit()
+      }
+    }
+  }
+
+  const searchGpts = async (question: string) => {
+    const resp = await sendToBackground({
+      name: "searchGpts",
+      body: {
+        question: question
+      }
+    })
+    console.log("searchGpts resp", resp)
+    if (resp && resp.data) {
+      setGpts(resp.data)
+    } else {
+      setGpts([])
+    }
+  }
+
+  const handleSubmit = async () => {
+    if (!content) {
+      return
+    }
+
+    searchGpts(content)
+  }
+
+  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="flex items-center">
+          <input
+            type="text"
+            className="flex-1 px-4 py-3 border-2 border-[#2752f4] bg-white rounded-lg"
+            placeholder="chat for searching GPTs"
+            ref={inputRef}
+            value={content}
+            disabled={inputDisabled}
+            onChange={handleInputChange}
+            onKeyDown={handleInputKeydown}
+          />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="-ml-8 cursor-pointer"
+            onClick={handleSubmit}>
+            <polyline points="9 10 4 15 9 20"></polyline>
+            <path d="M20 4v7a4 4 0 0 1-4 4H4"></path>
+          </svg>
+        </div>
+      </div>
+    </section>
+  )
+}

extension/src/contents/discovery.tsx

@@ -4,10 +4,12 @@ import { useEffect, useState } from "react"
 
 import { sendToBackground } from "@plasmohq/messaging"
 
+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/gpts/discovery"]
+  matches: ["https://chat.openai.com/*"]
 }
 
 export const getStyle = () => {
@@ -21,6 +23,7 @@ export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
 
 export default () => {
   const [gpts, setGpts] = useState<Gpts[]>([])
+  const [loading, setLoading] = useState(false)
 
   const fetchGpts = async () => {
     const resp = await sendToBackground({
@@ -55,52 +58,21 @@ export default () => {
             aria-label="close sidebar"
             className="drawer-overlay"></label>
 
-          <div className="bg-white px-4">
+          <div className="bg-slate-50 h-full text-black px-4">
             <div className="flex items-center px-4 pt-10 pb-4">
-              <h2 className="text-2xl font-bold">Third-party GPTs</h2>
+              <h2 className="text-2xl mr-2 font-bold">Third-party GPTs</h2>
               <div className="flex-1"></div>
               <a
-                className="text-[#324ffe]"
+                className="text-primary"
                 href="https://gpts.works"
                 target="_blank">
                 View more 👉
               </a>
             </div>
 
-            <ul className="menu overflow-auto text-base-content">
-              {/* Sidebar content here */}
-              {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">
-                          <a
-                            href={item.visit_url}
-                            className="flex items-center rounded-none  border-t border-gray-100 px-2 py-4 hover:bg-gray-50 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 || "-"}
-                            </div>
-                          </a>
-                        </li>
-                      )}
-                    </>
-                  )
-                })}
-            </ul>
+            {/* <Search setGpts={setGpts} setLoading={setLoading} /> */}
+
+            <GptsList gpts={gpts} />
           </div>
         </div>
       </div>

extension/src/services/gpts.ts

@@ -14,3 +14,30 @@ export const getGpts = async (): Promise<Gpts[]> => {
 
   return Promise.resolve([])
 }
+
+export const searchGpts = async (question: string): Promise<Gpts[]> => {
+  const uri = `${process.env.PLASMO_INDEX_API_BASE_URI}/gpts/search`
+  const data = {
+    question: question
+  }
+  console.log("search request with params:", uri, data)
+
+  try {
+    const resp = await fetch(uri, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.PLASMO_INDEX_API_KEY}`
+      },
+      body: JSON.stringify(data)
+    })
+    const res = await resp.json()
+    if (res.data) {
+      return res.data
+    }
+  } catch (e) {
+    console.log("request gpts search failed: ", e)
+  }
+
+  return []
+}

extension/src/style.css

@@ -1,3 +1,19 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.text-primary {
+  color: #2752f4;
+}
+
+.border-primary {
+  border-color: #2752f4;
+}
+
+.bg-panel {
+  background-color: #fff;
+}
+
+.dark .bg-panel {
+  background-color: #000;
+}

extension/tailwind.config.js

@@ -3,5 +3,23 @@ module.exports = {
   mode: "jit",
   darkMode: "class",
   content: ["./**/*.tsx"],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))"
+      },
+      textColor: {
+        primary: "#2752f4"
+      },
+      backgroundColor: {
+        primary: "#2752f4"
+      },
+      borderColor: {
+        primary: "#2752f4"
+      }
+    }
+  },
   plugins: [require("daisyui")]
 }

web/app/components/Brand/index.tsx

@@ -7,33 +7,32 @@ interface Props {
 export default ({ count }: Props) => {
   return (
     <section className="relatve">
-      <div className="mx-auto w-full max-w-7xl px-5 py-2 md:px-10 pt-8 md:pt-24 lg:pt-32">
-        <div className="mx-auto mb-0 w-full max-w-6xl text-center">
-          <h2 className="mb-4 text-3xl font-bold md:text-7xl">
+      <div className="mx-auto w-full max-w-7xl px-4 mt-12 md:mt-24">
+        <div className="mx-auto w-full max-w-6xl text-center">
+          <h2 className="text-3xl font-bold md:text-7xl">
             Third-party GPTs store
-            <p className="my-8 text:md md:text-4xl">
-              <span className="text-[#2752f4]">{count}</span> fantastic GPTs
-              stored
-              <a
-                href="https://github.com/airyland/gptshunter.com/issues/1"
-                target="_blank"
-                className="text-sm text-[#2752f4] mx-2"
-              >
-                Submit yours 👉
-              </a>
-            </p>
           </h2>
+          <p className="mt-4 mb-4 md:mt-12 md:mb-8 text:lg md:text-4xl">
+            <span className="text-primary">{count}</span> fantastic GPTs stored
+            <a
+              href="https://github.com/airyland/gptshunter.com/issues/1"
+              target="_blank"
+              className="text-sm text-primary mx-2"
+            >
+              Submit yours 👉
+            </a>
+          </p>
         </div>
       </div>
       <img
-        src="https://assets.website-files.com/63904f663019b0d8edf8d57c/639174a3de7d11bdf3ccbf01_Frame%20427322885.svg"
+        src="/bgstar.svg"
         alt=""
-        className="absolute bottom-[auto] left-[auto] right-0 top-16 -z-10 inline-block max-[767px]:hidden"
+        className="absolute bottom-[auto] left-[auto] right-0 top-24 -z-10 inline-block max-[767px]:hidden"
       />
       <img
-        src="https://assets.website-files.com/63904f663019b0d8edf8d57c/639174a3de7d11bdf3ccbf01_Frame%20427322885.svg"
+        src="/bgstar.svg"
         alt=""
-        className="absolute bottom-[auto] right-[auto] left-0 top-40 -z-10 inline-block max-[767px]:hidden"
+        className="absolute bottom-[auto] right-[auto] left-0 top-60 -z-10 inline-block max-[767px]:hidden"
       />
     </section>
   );