Error:
-
+
content} size={14} />
{!collapsed ? (
- setCollapsed(true)}>
-
-
+ setCollapsed(true)}
+ size={14}
+ />
) : (
- setCollapsed(false)}>
-
-
+ setCollapsed(false)}
+ size={14}
+ />
)}
@@ -97,6 +126,7 @@ ConversationItem.propTypes = {
content: PropTypes.string.isRequired,
session: PropTypes.object.isRequired,
done: PropTypes.bool.isRequired,
+ port: PropTypes.object.isRequired,
}
export default ConversationItem
diff --git a/src/components/DecisionCard/index.jsx b/src/components/DecisionCard/index.jsx
index 8d5f3b4c..cd2dd46e 100644
--- a/src/components/DecisionCard/index.jsx
+++ b/src/components/DecisionCard/index.jsx
@@ -2,7 +2,7 @@ import { LightBulbIcon, SearchIcon } from '@primer/octicons-react'
import { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import ConversationCard from '../ConversationCard'
-import { defaultConfig, getUserConfig } from '../../config'
+import { defaultConfig, getUserConfig } from '../../config/index.mjs'
import Browser from 'webextension-polyfill'
import { getPossibleElementByQuerySelector, endsWithQuestionMark } from '../../utils'
@@ -14,9 +14,10 @@ function DecisionCard(props) {
const question = props.question
useEffect(() => {
- getUserConfig()
- .then(setConfig)
- .then(() => setRender(true))
+ getUserConfig().then((config) => {
+ setConfig(config)
+ setRender(true)
+ })
}, [])
useEffect(() => {
@@ -39,7 +40,7 @@ function DecisionCard(props) {
const container = props.container
const siteConfig = props.siteConfig
- container.classList.remove('sidebar-free')
+ container.classList.remove('chatgptbox-sidebar-free')
if (config.appendQuery) {
const appendContainer = getPossibleElementByQuerySelector([config.appendQuery])
@@ -71,7 +72,7 @@ function DecisionCard(props) {
} else {
const appendContainer = getPossibleElementByQuerySelector(siteConfig.appendContainerQuery)
if (appendContainer) {
- container.classList.add('sidebar-free')
+ container.classList.add('chatgptbox-sidebar-free')
appendContainer.appendChild(container)
} else {
const resultsContainerQuery = getPossibleElementByQuerySelector(
diff --git a/src/components/FloatingToolbar/index.jsx b/src/components/FloatingToolbar/index.jsx
index b1ca2252..bb5ccd81 100644
--- a/src/components/FloatingToolbar/index.jsx
+++ b/src/components/FloatingToolbar/index.jsx
@@ -2,25 +2,32 @@ import Browser from 'webextension-polyfill'
import { cloneElement, useEffect, useState } from 'react'
import ConversationCard from '../ConversationCard'
import PropTypes from 'prop-types'
-import { defaultConfig, getUserConfig } from '../../config.mjs'
+import { defaultConfig, getUserConfig } from '../../config/index.mjs'
import { config as toolsConfig } from '../../content-script/selection-tools'
-import { setElementPositionInViewport } from '../../utils'
+import { getClientPosition, isMobile, setElementPositionInViewport } from '../../utils'
import Draggable from 'react-draggable'
+import { useClampWindowSize } from '../../hooks/use-clamp-window-size'
const logo = Browser.runtime.getURL('logo.png')
function FloatingToolbar(props) {
+ const [selection, setSelection] = useState(props.selection)
const [prompt, setPrompt] = useState(props.prompt)
const [triggered, setTriggered] = useState(props.triggered)
const [config, setConfig] = useState(defaultConfig)
const [render, setRender] = useState(false)
- const [position, setPosition] = useState(props.position)
+ const [closeable, setCloseable] = useState(props.closeable)
+ const [position, setPosition] = useState(getClientPosition(props.container))
const [virtualPosition, setVirtualPosition] = useState({ x: 0, y: 0 })
+ const windowSize = useClampWindowSize([750, 1500], [0, Infinity])
useEffect(() => {
- getUserConfig()
- .then(setConfig)
- .then(() => setRender(true))
+ getUserConfig().then((config) => {
+ setConfig(config)
+ setRender(true)
+
+ if (!triggered) props.container.style.position = 'absolute'
+ })
}, [])
useEffect(() => {
@@ -38,6 +45,19 @@ function FloatingToolbar(props) {
}
}, [config])
+ useEffect(() => {
+ if (isMobile()) {
+ const selectionListener = () => {
+ const currentSelection = window.getSelection()?.toString()
+ if (currentSelection) setSelection(currentSelection)
+ }
+ document.addEventListener('selectionchange', selectionListener)
+ return () => {
+ document.removeEventListener('selectionchange', selectionListener)
+ }
+ }
+ }, [])
+
if (!render) return
if (triggered) {
@@ -68,14 +88,24 @@ function FloatingToolbar(props) {
onStop={dragEvent.onStop}
position={virtualPosition}
>
-
-
+
+
{
+ props.container.remove()
+ }}
+ dockable={props.dockable}
+ onDock={() => {
+ props.container.className = 'chatgptbox-toolbar-container-not-queryable'
+ setCloseable(true)
+ }}
onUpdate={() => {
updatePosition()
}}
@@ -96,10 +126,13 @@ function FloatingToolbar(props) {
tools.push(
cloneElement(toolConfig.icon, {
size: 20,
- className: 'gpt-selection-toolbar-button',
+ className: 'chatgptbox-selection-toolbar-button',
title: toolConfig.label,
onClick: async () => {
- setPrompt(await toolConfig.genPrompt(props.selection))
+ const p = getClientPosition(props.container)
+ props.container.style.position = 'fixed'
+ setPosition(p)
+ setPrompt(await toolConfig.genPrompt(selection))
setTriggered(true)
},
}),
@@ -109,7 +142,7 @@ function FloatingToolbar(props) {
return (
-
+
{tools}
@@ -121,11 +154,10 @@ function FloatingToolbar(props) {
FloatingToolbar.propTypes = {
session: PropTypes.object.isRequired,
selection: PropTypes.string.isRequired,
- position: PropTypes.object.isRequired,
container: PropTypes.object.isRequired,
triggered: PropTypes.bool,
closeable: PropTypes.bool,
- onClose: PropTypes.func,
+ dockable: PropTypes.bool,
prompt: PropTypes.string,
}
diff --git a/src/components/InputBox/index.jsx b/src/components/InputBox/index.jsx
index ff3502c1..12276284 100644
--- a/src/components/InputBox/index.jsx
+++ b/src/components/InputBox/index.jsx
@@ -21,6 +21,7 @@ export function InputBox({ onSubmit, enabled }) {
return (
+