Merge pull request #20 from taterboom/feat/enabled-websites

Feat/enabled websites
taterboom · Nov 8, 2023 · 68251c9 · 68251c9
2 parents 80356da + afa7ced
commit 68251c9
Show file tree

Hide file tree

Showing 22 changed files with 270 additions and 102 deletions.
diff --git a/.changeset/late-oranges-flow.md b/.changeset/late-oranges-flow.md
@@ -0,0 +1,5 @@
+---
+"promptsnippets": minor
+---
+
+support configure enabled websites
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "fuse.js": "^6.6.2",
     "lodash": "^4.17.21",
     "papaparse": "^5.4.1",
+    "path-to-regexp": "^6.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "uuid": "^9.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/background.ts b/src/background.ts
@@ -1,12 +1,10 @@
-import { debounce } from "lodash"
 import {
   COMMON_SETTINGS,
-  DEFAULT_DISABLED_URLS,
+  DEFAULT_ENABLED_WEBSITES,
   DEFAULT_IDS,
   DEFAULT_SNIPPET_GUIDE,
 } from "./constants"
 import { ServerStore, Snippet } from "./types"
-import { getUriKey } from "./utils/uri"
 
 let store: ServerStore
 
@@ -16,10 +14,10 @@ async function init() {
     const {
       isUsed = false,
       ids = DEFAULT_IDS,
-      disabledUrls = DEFAULT_DISABLED_URLS,
+      enabledWebsites = DEFAULT_ENABLED_WEBSITES,
       ...commonSettings
     } = await chrome.storage.sync
-      .get(["isUsed", "ids", "disabledUrls", ...Object.keys(COMMON_SETTINGS)])
+      .get(["isUsed", "ids", "enabledWebsites", ...Object.keys(COMMON_SETTINGS)])
       .catch(() => ({} as any))
     let snippetsStore: Record<string, Snippet> = {}
     if (ids?.length > 0) {
@@ -36,7 +34,7 @@ async function init() {
     store = {
       ids,
       snippetsStore,
-      disabledUrls,
+      enabledWebsites,
       ...COMMON_SETTINGS,
       ...commonSettings,
     }
@@ -75,8 +73,8 @@ async function init() {
           return
         }
       }
-      if (key === "disabledUrls") {
-        store.disabledUrls = changeObj.newValue ?? DEFAULT_DISABLED_URLS
+      if (key === "enabledWebsites") {
+        store.enabledWebsites = changeObj.newValue ?? DEFAULT_ENABLED_WEBSITES
       } else if (key === "ids") {
         store.ids = changeObj.newValue ?? DEFAULT_IDS
       } else {
@@ -90,24 +88,13 @@ async function init() {
     })
   })
 
-  const syncDisabledUrls = debounce(() => {
-    chrome.storage.sync.set({ disabledUrls: store.disabledUrls })
-  }, 1000)
   chrome.commands.onCommand.addListener((command, tab) => {
-    console.log("command", command, tab)
+    console.log("command", command, tab.url)
     if (command === "toggle-prompt-snippets") {
-      if (tab.id && tab.url) {
-        const uriKey = getUriKey(tab.url)
-        if (store.disabledUrls.includes(uriKey)) {
-          store.disabledUrls = store.disabledUrls.filter((url) => url !== uriKey)
-        } else {
-          store.disabledUrls = [...store.disabledUrls, uriKey]
-        }
+      if (tab.id) {
         chrome.tabs.sendMessage(tab.id, {
-          type: "prompt-snippets/update-store",
-          payload: store,
+          type: "prompt-snippets/toggle-prompt-snippets",
         })
-        syncDisabledUrls()
       }
     }
   })
@@ -147,21 +134,6 @@ async function init() {
         return true
       }
     }
-    if (message?.type === "prompt-snippets/toggle") {
-      if (!sender.tab?.id || !sender.tab?.url) return
-      const uriKey = getUriKey(sender.tab.url)
-      const { disabled } = message.payload
-      if (store.disabledUrls.includes(uriKey) && !disabled) {
-        store.disabledUrls = store.disabledUrls.filter((url) => url !== uriKey)
-      } else if (!store.disabledUrls.includes(uriKey) && disabled) {
-        store.disabledUrls = [...store.disabledUrls, uriKey]
-      }
-      chrome.tabs.sendMessage(sender.tab.id, {
-        type: "prompt-snippets/update-store",
-        payload: store,
-      })
-      syncDisabledUrls()
-    }
     if (message.type === "prompt-snippets/get-show-new") {
       if (!sender.tab?.id) return
       chrome.action.getBadgeText({ tabId: sender.tab.id }).then((badgeText) => {

diff --git a/src/base.css b/src/base.css
@@ -29,6 +29,11 @@
     --color-danger-200: 255 118 124;
     --color-danger-content-100: 255 255 255;
     --color-danger-content-200: 255 255 255;
+
+    --color-success-100: 76 183 130;
+    --color-success-200: 96 230 158;
+    --color-success-content-100: 255 255 255;
+    --color-success-content-200: 255 255 255;
 }
 
 .dark {
@@ -56,6 +61,11 @@
     --color-danger-200: 255 118 124;
     --color-danger-content-100: 255 255 255;
     --color-danger-content-200: 255 255 255;
+
+    --color-success-100: 76 183 130;
+    --color-success-200: 96 230 158;
+    --color-success-content-100: 255 255 255;
+    --color-success-content-200: 255 255 255;
 }
 
 .light, .dark {
@@ -66,11 +76,11 @@
 /* shadow */
 
 .light .menu-popup-shadow {
-    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 56px;
+    box-shadow: rgba(0, 0, 0, 0.3) 0px 12px 56px;
 }
 
 .dark .menu-popup-shadow {
-    box-shadow: rgba(0, 0, 0, 0.5) 0px 12px 56px;
+    box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 56px;
 }
 
 .light .popup-shadow {

diff --git a/src/components/EnhanceInput.ts b/src/components/EnhanceInput.ts
@@ -1,11 +1,11 @@
 import { useEffect } from "react"
 import { ROOT_ID } from "../constants"
-import { usePageState } from "../store/pageState"
+import { pageStateSelectors, usePageState } from "../store/pageState"
 import { isInputElement, selectNextRange } from "../utils/dom"
 import { processVariableSelection } from "../utils/snippet"
 
 export default function () {
-  const disabled = usePageState((state) => state.disabled)
+  const disabled = usePageState(pageStateSelectors.disabled)
   useEffect(() => {
     if (disabled) return
     const root = document.getElementById(ROOT_ID)

diff --git a/src/components/SettingsPanel.tsx b/src/components/SettingsPanel.tsx
@@ -1,33 +1,49 @@
+import clsx from "classnames"
 import { AnimatePresence } from "framer-motion"
-import { usePageState } from "../store/pageState"
-import { getUriKey } from "../utils/uri"
-import { PopupContainer } from "./UI/Popup"
-import { MiClose, MiDelete, MiRemove } from "./UI/icons"
-import { PropsWithChildren, useState } from "react"
+import { useState } from "react"
+import { pageStateSelectors, usePageState } from "../store/pageState"
 import { InputMode } from "../types"
+import { PopupContainer } from "./UI/Popup"
+import { Tooltip, TooltipContent, TooltipTrigger } from "./UI/Tooltip"
+import { MiCircleHelp, MiClose, MiRemove } from "./UI/icons"
 
 function EnableSection() {
-  const disabled = usePageState((state) => state.disabled)
-  const updateDisabled = usePageState((state) => state.updateDisabled)
+  const disabled = usePageState(pageStateSelectors.disabled)
+  const enabledWebsites = usePageState((state) => state.enabledWebsites)
+  const updateEnabledWebsites = usePageState((state) => state.updateEnabledWebsites)
 
   return (
     <div className="p-2 hover:bg-base-200">
-      <div className="flex gap-2">
-        <div className="flex-1 overflow-hidden">
-          <div className="text-sm text-content-100 break-words">Enable the extension</div>
-          <div className="text-xs text-content-400 break-words">
-            on the current page {getUriKey(window.location.href)}
+      <div className="">
+        <div className="flex justify-between items-center">
+          <div className="flex items-center gap-1 flex-1 text-sm text-content-100 break-words">
+            <span>Enabled websites</span>
+            <Tooltip placement="top-start">
+              <TooltipTrigger className="p-0.5">
+                <MiCircleHelp className="text-xs text-content-400" />
+              </TooltipTrigger>
+              <TooltipContent className="text-xs text-content-200 w-52 z-[1000000] bg-base-100/10 backdrop-blur border border-neutral-200 p-2 rounded menu-popup-shadow">
+                One link per line. <br />
+                Use wildcards to match multiple or all locations.
+                <br />
+                Such as *.openai.com, or just * for all websites.
+                <br />
+              </TooltipContent>
+            </Tooltip>
           </div>
+          <div
+            className={clsx("w-2 h-2 rounded-full", disabled ? "bg-danger-100" : "bg-success-100")}
+          ></div>
         </div>
-        <div className="flex-shrink-0 pt-0.5">
-          <input
-            type="checkbox"
-            className="checkbox"
-            checked={!disabled}
+        <div className="mt-1">
+          <textarea
+            className="text-sm !mt-1.5 block bg-base-200 text-content-200 border border-neutral-200 rounded w-full py-1.5 px-2 focus:border-primary-100 focus-visible:outline-none"
+            rows={3}
+            value={enabledWebsites.join("\n")}
             onChange={(e) => {
-              updateDisabled(!e.target.checked)
+              updateEnabledWebsites(e.target.value.split("\n"))
             }}
-          ></input>
+          ></textarea>
         </div>
       </div>
     </div>

diff --git a/src/components/SnippetsPopup.tsx b/src/components/SnippetsPopup.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from "react"
 import clsx from "classnames"
 import { motion, AnimatePresence } from "framer-motion"
-import { usePageState } from "../store/pageState"
+import { pageStateSelectors, usePageState } from "../store/pageState"
 import { snippetsSelectors, useSnippets } from "../store/snippets"
 import {
   awesomeSetSelectionRange,
@@ -388,7 +388,6 @@ function SnippetsPicker(props: { onClose: () => void }) {
 }
 
 function ControlBar(props: { onClose: () => void }) {
-  const updateDisabled = usePageState((state) => state.updateDisabled)
   return (
     <div className="flex items-center gap-2 h-full">
       <button
@@ -399,20 +398,6 @@ function ControlBar(props: { onClose: () => void }) {
       >
         <MiClose />
       </button>
-      <Tooltip>
-        <TooltipTrigger
-          className="btn btn-icon btn-sm"
-          onClick={() => {
-            updateDisabled(true)
-            props.onClose()
-          }}
-        >
-          <TablerPower />
-        </TooltipTrigger>
-        <TooltipContent className="w-40 text-xs text-content-200 z-[1000000] bg-base-100/70 backdrop-blur border border-neutral-200 p-2 rounded menu-popup-shadow">
-          Disable the popup in this page. You can enable it later in the settings panel.
-        </TooltipContent>
-      </Tooltip>
     </div>
   )
 }
@@ -512,7 +497,7 @@ function SnippetsPopupInner() {
 }
 
 export default function SnippetsPopup() {
-  const disabled = usePageState((state) => state.disabled)
+  const disabled = usePageState(pageStateSelectors.disabled)
   const target = usePageState((state) => state.currentInput)
   const triggerSymbol = usePageState((state) => state.triggerSymbol)
   const [visible, setVisible] = useState(false)

diff --git a/src/components/UI/Expandable.tsx b/src/components/UI/Expandable.tsx
@@ -27,7 +27,7 @@ export default function Expandable(
       ref={elRef}
       className={clsx(
         props.className,
-        !expanded && "truncate",
+        !expanded && "!truncate",
         expandable ? (expanded ? "cursor-zoom-out" : "cursor-zoom-in") : "cursor-default"
       )}
       style={{

diff --git a/src/constants.ts b/src/constants.ts
@@ -3,7 +3,7 @@ import { InputMode, Snippet } from "./types"
 export const ROOT_ID = "__prompt-snippets-root"
 export const DEFAULT_IDS = []
 export const DEFAULT_SNIPPETS_STORE = {}
-export const DEFAULT_DISABLED_URLS = []
+export const DEFAULT_ENABLED_WEBSITES = ["*.openai.com", "poe.com", "bard.google.com"]
 export const DEFAULT_TRIGGER_SYMBOL = ["/", "、"]
 export const DEFAULT_WRAPPER_SYMBOL = ["{{ }}"]
 export const DEFAULT_INPUT_MODE: InputMode = "Tab"

diff --git a/src/hooks/useInit.tsx b/src/hooks/useInit.tsx
@@ -19,7 +19,7 @@ export function useInit() {
         return acc
       }, {} as typeof COMMON_SETTINGS)
       usePageState.setState({
-        disabled: serverStore.disabledUrls?.includes?.(getUriKey(window.location.href)) ?? true,
+        enabledWebsites: serverStore.enabledWebsites,
         ...commonSettings,
       })
     }
@@ -38,6 +38,17 @@ export function useInit() {
           return { menuPanelVisible: !state.menuPanelVisible }
         })
       }
+      if (message?.type === "prompt-snippets/toggle-prompt-snippets") {
+        const { enabledWebsites, updateEnabledWebsites } = usePageState.getState()
+        const uriKey = getUriKey(window.location.href)
+        let newEnabledWebsites
+        if (enabledWebsites.includes(uriKey)) {
+          newEnabledWebsites = enabledWebsites.filter((url) => url !== uriKey)
+        } else {
+          newEnabledWebsites = [...enabledWebsites, uriKey]
+        }
+        updateEnabledWebsites(newEnabledWebsites)
+      }
     })
     const fetchStore = () => {
       chrome.runtime

diff --git a/src/playground.tsx b/src/playground.tsx
@@ -28,7 +28,7 @@ useSnippets.setState({
     [DEFAULT_SNIPPET_DEMO_3.id]: DEFAULT_SNIPPET_DEMO_3,
   },
 })
-usePageState.setState({ disabled: false })
+usePageState.setState({ enabledWebsites: ["*"] })
 
 window.chrome = {
   ...window?.chrome,