feat: show message to user when history api disabeld

packages/userscript/src/page.ts

@@ -31,6 +31,10 @@ export function getPageAccessToken(): string | null {
     return unsafeWindow?.__NEXT_DATA__?.props?.pageProps?.accessToken ?? null
 }
 
+export function getHistoryDisabled(): boolean {
+    return unsafeWindow?.__NEXT_DATA__?.props?.pageProps?.shouldDisableHistory ?? false
+}
+
 function getUserProfile() {
     const user = unsafeWindow?.__NEXT_DATA__?.props?.pageProps?.user
     if (!user) throw new Error('No user found.')

packages/userscript/src/style.css

@@ -15,6 +15,15 @@ p > img[src*="https://images.unsplash.com/"] {
     user-select: all!important;
 }
 
+.menu-item {
+    height: 46px;
+}
+
+.menu-item[disabled] {
+    pointer-events: none;
+    filter: brightness(0.5);
+}
+
 .inputFieldSet {
     display: block;
     border-width: 2px;
@@ -65,7 +74,11 @@ p > img[src*="https://images.unsplash.com/"] {
     height: 100%;
 }
 
-#exporter-menu:hover::after {
+#exporter-menu[disabled] {
+    cursor: not-allowed;
+}
+
+#exporter-menu:not([disabled]):hover::after {
     content: '';
     position: absolute;
     top: 1.2rem;
@@ -79,13 +92,13 @@ p > img[src*="https://images.unsplash.com/"] {
 }
 
 @supports not selector(:has(.test:hover)) {
-    #exporter-menu:hover .dropdown-menu {
+    #exporter-menu:not([disabled]):hover .dropdown-menu {
         display: flex;
     }
 }
 
 @supports selector(:has(.test:hover)) {
-    #exporter-menu:not(:has(.dropdown-backdrop:hover)):hover .dropdown-menu {
+    #exporter-menu:not([disabled]):not(:has(.dropdown-backdrop:hover)):hover .dropdown-menu {
         display: flex;
     }
 }
@@ -104,11 +117,11 @@ p > img[src*="https://images.unsplash.com/"] {
     }
 
     @supports selector(:has(.test:hover)) {
-        #exporter-menu:not(:has(.dropdown-backdrop:hover)):hover .dropdown-backdrop {
+        #exporter-menu:not([disabled]):not(:has(.dropdown-backdrop:hover)):hover .dropdown-backdrop {
             display: block;
         }
 
-        #exporter-menu:has(.dropdown-backdrop:hover):hover .dropdown-backdrop {
+        #exporter-menu:not([disabled]):has(.dropdown-backdrop:hover):hover .dropdown-backdrop {
             display: block;
             pointer-events: none;
             opacity: 0;

packages/userscript/src/ui/MenuItem.tsx

@@ -8,10 +8,11 @@ export interface MenuItemProps {
     text: string
     icon?: FC
     successText?: string
+    disabled?: boolean
     onClick?: (() => boolean) | (() => Promise<boolean>)
 }
 
-export const MenuItem: FC<MenuItemProps> = ({ text, successText, icon: Icon, onClick }) => {
+export const MenuItem: FC<MenuItemProps> = ({ text, successText, disabled = false, icon: Icon, onClick }) => {
     const [loading, setLoading] = useState(false)
     const [succeed, setSucceed] = useState(false)
 
@@ -36,9 +37,9 @@ export const MenuItem: FC<MenuItemProps> = ({ text, successText, icon: Icon, onC
 
     return (
         <div
-            className="flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm mb-2 flex-shrink-0 border border-white/20"
-            style={{ height: 46 }}
+            className="menu-item flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm mb-2 flex-shrink-0 border border-white/20"
             onClick={handleClick}
+            disabled={disabled}
         >
             {loading
                 ? (

packages/userscript/src/ui/menu.tsx

@@ -11,6 +11,7 @@ import { exportToHtml } from '../exporter/html'
 import { useGMStorage } from '../useGMStorage'
 import { dateStr, timestamp } from '../utils/utils'
 import { getFileNameWithFormat } from '../utils/download'
+import { getHistoryDisabled } from '../page'
 import { MenuItem } from './MenuItem'
 import { Divider } from './Divider'
 import { FileCode, IconArrowRightFromBracket, IconCamera, IconCopy, IconMarkdown, IconSetting } from './icons'
@@ -77,6 +78,10 @@ const SettingDialog: FC<{ format: string; setFormat: (value: string) => void }>
 }
 
 export function Menu() {
+    const disabled = getHistoryDisabled()
+    const menuText = disabled ? 'Exporter unavailable' : 'Export'
+    const menuTitle = disabled ? 'Exporter is relying on the History API.\nBut History feature is disabled by OpenAI temporarily.\nWe all have to wait for them to bring it back.' : ''
+
     const [format, setFormat] = useGMStorage(KEY, defaultFormat)
 
     const onClickText = useCallback(() => exportToText(), [])
@@ -85,10 +90,11 @@ export function Menu() {
     const onClickHtml = useCallback(() => exportToHtml(format), [format])
 
     return (
-        <div id="exporter-menu" className="pt-1 relative">
+        <div id="exporter-menu" className="pt-1 relative" disabled={disabled} title={menuTitle}>
             <MenuItem
-                text="Export"
+                text={menuText}
                 icon={IconArrowRightFromBracket}
+                disabled={disabled}
             />
             <Dropdown>
                 <SettingDialog format={format} setFormat={setFormat}>