diff --git a/src/components/ConversationCard/index.jsx b/src/components/ConversationCard/index.jsx index 577fabd..117b019 100644 --- a/src/components/ConversationCard/index.jsx +++ b/src/components/ConversationCard/index.jsx @@ -5,7 +5,7 @@ import InputBox from '../InputBox' import ConversationItem from '../ConversationItem' import { createElementAtPosition, initSession, isSafari } from '../../utils' import { DownloadIcon } from '@primer/octicons-react' -import { WindowDesktop, XLg } from 'react-bootstrap-icons' +import { WindowDesktop, XLg, Pin } from 'react-bootstrap-icons' import FileSaver from 'file-saver' import { render } from 'preact' import FloatingToolbar from '../FloatingToolbar' @@ -175,9 +175,7 @@ function ConversationCard(props) { return (
- {!props.closeable ? ( - - ) : ( + {props.closeable ? ( + ) : props.dockable ? ( + { + if (props.onDock) props.onDock() + }} + /> + ) : ( + )} {props.draggable ? (
@@ -207,7 +217,6 @@ function ConversationCard(props) { container={toolbarContainer} closeable={true} triggered={true} - onClose={() => toolbarContainer.remove()} />, toolbarContainer, ) @@ -278,6 +287,8 @@ ConversationCard.propTypes = { draggable: PropTypes.bool, closeable: PropTypes.bool, onClose: PropTypes.func, + dockable: PropTypes.bool, + onDock: PropTypes.func, } export default memo(ConversationCard) diff --git a/src/components/FloatingToolbar/index.jsx b/src/components/FloatingToolbar/index.jsx index 897ed2d..bc8625b 100644 --- a/src/components/FloatingToolbar/index.jsx +++ b/src/components/FloatingToolbar/index.jsx @@ -17,6 +17,7 @@ function FloatingToolbar(props) { const [config, setConfig] = useState(defaultConfig) const [render, setRender] = useState(false) const [position, setPosition] = useState(props.position) + const [closeable, setCloseable] = useState(props.closeable) const [virtualPosition, setVirtualPosition] = useState({ x: 0, y: 0 }) const windowSize = useClampWindowSize([750, 1500], [0, Infinity]) @@ -94,8 +95,15 @@ function FloatingToolbar(props) { session={props.session} question={prompt} draggable={true} - closeable={props.closeable} - onClose={props.onClose} + closeable={closeable} + onClose={() => { + props.container.remove() + }} + dockable={props.dockable} + onDock={() => { + props.container.className = 'chatgptbox-toolbar-container-not-queryable' + setCloseable(true) + }} onUpdate={() => { updatePosition() }} @@ -145,7 +153,7 @@ FloatingToolbar.propTypes = { container: PropTypes.object.isRequired, triggered: PropTypes.bool, closeable: PropTypes.bool, - onClose: PropTypes.func, + dockable: PropTypes.bool, prompt: PropTypes.string, } diff --git a/src/content-script/index.jsx b/src/content-script/index.jsx index 6df0695..42612f4 100644 --- a/src/content-script/index.jsx +++ b/src/content-script/index.jsx @@ -102,6 +102,10 @@ async function prepareForSafari() { } let toolbarContainer +const deleteToolbar = () => { + if (toolbarContainer && toolbarContainer.className === 'chatgptbox-toolbar-container') + toolbarContainer.remove() +} async function prepareForSelectionTools() { document.addEventListener('mouseup', (e) => { @@ -113,7 +117,7 @@ async function prepareForSelectionTools() { ) return - if (toolbarContainer) toolbarContainer.remove() + deleteToolbar() setTimeout(() => { const selection = window.getSelection()?.toString() if (selection) { @@ -126,6 +130,7 @@ async function prepareForSelectionTools() { selection={selection} position={position} container={toolbarContainer} + dockable={true} />, toolbarContainer, ) @@ -144,7 +149,7 @@ async function prepareForSelectionTools() { (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA') ) { setTimeout(() => { - if (!window.getSelection()?.toString()) toolbarContainer.remove() + if (!window.getSelection()?.toString()) deleteToolbar() }) } }) @@ -160,7 +165,7 @@ async function prepareForSelectionToolsTouch() { ) return - if (toolbarContainer) toolbarContainer.remove() + deleteToolbar() setTimeout(() => { const selection = window.getSelection()?.toString() if (selection) { @@ -176,6 +181,7 @@ async function prepareForSelectionToolsTouch() { selection={selection} position={position} container={toolbarContainer} + dockable={true} />, toolbarContainer, ) @@ -212,7 +218,6 @@ async function prepareForRightClickMenu() { container={container} triggered={true} closeable={true} - onClose={() => container.remove()} />, container, ) @@ -228,7 +233,6 @@ async function prepareForRightClickMenu() { container={container} triggered={true} closeable={true} - onClose={() => container.remove()} prompt={await toolsConfig[data.itemId].genPrompt(data.selectionText)} />, container,