Bump msgpackr from 1.8.1 to 1.10.1

components/PromptModal.tsx

@@ -5,7 +5,7 @@ import reactToolCssText from 'data-text:rc-tooltip/assets/bootstrap_white.css'
 import cssText from 'data-text:~style.css'
 import kebabCase from 'lodash/kebabCase'
 import Tooltip from 'rc-tooltip'
-import React, { Fragment, useMemo, useState } from 'react'
+import React, { Fragment, useEffect, useMemo, useState } from 'react'
 
 import { useStorage } from '@plasmohq/storage/hook'
 
@@ -15,7 +15,8 @@ import {
   DisplayRow,
   DisplayRowType,
   PROMOT_KEY,
-  Row
+  Row,
+  fetchPromotWithRetry
 } from '../request'
 import { CopyIcon } from './CopyIcon'
 import { PromptEditor } from './PromptEditor'
@@ -54,20 +55,17 @@ export const PromptModal: React.FC<{
     []
   )
 
-  const [
-    remotePrompts,
-    _un,
-    {
-      setStoreValue: setRemotePromptsStoreValue,
-      setRenderValue: setRemotePromptsRenderValue
+  const [remotePrompts, setRemotePrompts] = useState<Row[]>([])
+
+  useEffect(() => {
+    const initData = async () => {
+      const value = await fetchPromotWithRetry()
+      if (value) {
+        setRemotePrompts(value)
+      }
     }
-  ] = useStorage<Row[]>(
-    {
-      key: PROMOT_KEY,
-      area: 'local'
-    },
-    []
-  )
+    initData()
+  }, [])
 
   const prompts = useMemo(() => {
     return [

contents/AutoComplete.css

@@ -13,14 +13,13 @@
 
 #chatgpt-prompt-helper-panel {
   position: absolute;
-  bottom: 0;
+  bottom: 2px;
   background: #ffffff;
   border-radius: 8px;
   border: solid 1px #dddddd;
   box-shadow: 1px 1px #ddd;
   max-height: 300px;
   width: 600px;
-  bottom: 51px;
   left: 2px;
 }
 

contents/AutoComplete.tsx

@@ -1,12 +1,13 @@
 import reactToolCssText from 'data-text:rc-tooltip/assets/bootstrap_white.css'
 import cssText from 'data-text:~/contents/AutoComplete.css'
+import debounce from 'lodash/debounce'
 import partition from 'lodash/partition'
 import snakeCase from 'lodash/snakeCase'
 import type { PlasmoContentScript, PlasmoGetInlineAnchor } from 'plasmo'
 import Tooltip from 'rc-tooltip'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
 import { useLatest } from 'react-use'
-import debounce from 'lodash/debounce'
 
 import { useStorage } from '@plasmohq/storage/hook'
 
@@ -25,25 +26,27 @@ export const config: PlasmoContentScript = {
   matches: ['https://chat.openai.com/*']
 }
 
-export const getStyle = () => {
+const getStyle = () => {
   const style = document.createElement('style')
   style.textContent = cssText + '\n' + reactToolCssText
   return style
 }
 
+document.head.appendChild(getStyle())
+
 const getTextArea = async () => {
   try {
     const textArea = document.querySelector('textarea')
     if (textArea) {
       if (textArea.parentElement.nodeName !== 'DIV') {
         throw Error('')
       }
-      if (!textArea.placeholder.trim()) {
+      if (!textArea.placeholder?.trim()) {
         textArea.placeholder = `${
           process.env.NODE_ENV === 'development' ? '' : ''
         }Try type / and see some helpful prompts. Powered by ChatGPT prompt helper`
       }
-      return textArea
+      return textArea.parentElement
     }
   } catch (error) {
     // console.error(error)
@@ -84,16 +87,42 @@ const safeMath = (act: string, inputText: string) => {
   }
 }
 
+const getContainerPosition = async () => {
+  const targetElement = await getTextArea()
+  const rect = targetElement.getBoundingClientRect()
+
+  // Calculate positions relative to the document
+  // Calculate positions
+  const left = rect.left + window.scrollX
+  const top = rect.top + +window.scrollY
+
+  return { left, top }
+}
+
 const AutoComplete = () => {
   const containerRef = useRef<HTMLDivElement>()
   const [inputText, setInputText] = useState<string>()
   const [activeIndex, setActiveIndex] = useState(-1)
   const [hoverIndex, setHoverIndex] = useState(-1)
   const [panelVisible, setPanelVisible] = useState(false)
+  const [position, setPosition] = useState<{ top: number; left: number }>()
 
-  const [autoPromots, _un, { setStoreValue, setRenderValue }] = useStorage<
-    Row[]
-  >(
+  useEffect(() => {
+    const run = async () => {
+      console.log(await getContainerPosition())
+      setPosition(await getContainerPosition())
+    }
+    run()
+    window.addEventListener('resize', run)
+
+    return () => {
+      window.removeEventListener('resize', run)
+    }
+  }, [])
+
+  const [autoPromots, setAutoPromots] = useState<Row[]>([])
+
+  const [, _un, { setStoreValue, setRenderValue }] = useStorage<Row[]>(
     {
       key: PROMOT_KEY,
       area: 'local'
@@ -185,8 +214,9 @@ const AutoComplete = () => {
     const initData = async () => {
       const value = await fetchPromotWithRetry()
       if (value) {
-        setRenderValue(value)
-        await setStoreValue(value)
+        setAutoPromots(value)
+        // setRenderValue(value)
+        await setStoreValue([])
       }
     }
     initData()
@@ -197,19 +227,23 @@ const AutoComplete = () => {
       'textarea'
     ) as unknown as HTMLInputElement
 
-
-    textarea?.addEventListener('input', debounce((e) => {
-      // @ts-ignore
-      const value = e.target.value
-      if (value?.startsWith('/')) {
-        setInputText(value)
-        setActiveIndex(0)
-        containerRef.current?.querySelector(`#${TOP_ANCHOR}`)?.scrollIntoView()
-        setPanelVisible(true)
-      } else {
-        setPanelVisible(false)
-      }
-    }, 200))
+    textarea?.addEventListener(
+      'input',
+      debounce((e) => {
+        // @ts-ignore
+        const value = e.target.value
+        if (value?.startsWith('/')) {
+          setInputText(value)
+          setActiveIndex(0)
+          containerRef.current
+            ?.querySelector(`#${TOP_ANCHOR}`)
+            ?.scrollIntoView()
+          setPanelVisible(true)
+        } else {
+          setPanelVisible(false)
+        }
+      }, 200)
+    )
 
     const preventKeyboardEvent = (e: KeyboardEvent) => {
       e.cancelBubble = true
@@ -325,9 +359,21 @@ const AutoComplete = () => {
   )
 
   return (
-    <div ref={containerRef} id="chatgpt-prompt-helper-container">
-      {childrenEl}
-    </div>
+    <>
+      {createPortal(
+        <div
+          ref={containerRef}
+          id="chatgpt-prompt-helper-container"
+          style={{
+            position: 'fixed',
+            top: `${position?.top}px`,
+            left: `${position?.left}px`
+          }}>
+          {childrenEl}
+        </div>,
+        document.body
+      )}
+    </>
   )
 }
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "chatgpt-prompt-helper",
   "displayName": "Chatgpt Prompt Helper",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Chatgpt prompt, help you ask more efficiently",
   "author": "cottome",
   "scripts": {