mirror of
https://github.com/WenPai-org/wpmind.git
synced 2025-08-06 21:53:53 +08:00
added a lot of enhancements to popup, dropdown in toolbar and in API requests
This commit is contained in:
Nikita
parent
1cac92d58f
commit
ce3c6c3184
53 changed files with 1784 additions and 297 deletions
|
|
@ -7,107 +7,197 @@ import './style.scss';
|
|||
* WordPress dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { createRoot } from '@wordpress/element';
|
||||
import { Modal } from '@wordpress/components';
|
||||
import { createRoot, useRef, useEffect, RawHTML } from '@wordpress/element';
|
||||
import { Modal, Button, TextControl } from '@wordpress/components';
|
||||
import { useSelect, useDispatch } from '@wordpress/data';
|
||||
import { rawHandler } from '@wordpress/blocks';
|
||||
import domReady from '@wordpress/dom-ready';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import TOOLBAR_ICON from '../utils/icon';
|
||||
import LoadingLine from './components/loading-line';
|
||||
import LoadingText from './components/loading-text';
|
||||
import Notice from './components/notice';
|
||||
|
||||
import { ReactComponent as PopupPostTitleAboutIcon } from '../icons/popup-post-title-about.svg';
|
||||
import { ReactComponent as PopupPostAboutIcon } from '../icons/popup-post-about.svg';
|
||||
import { ReactComponent as PopupOutlineAboutIcon } from '../icons/popup-outline-about.svg';
|
||||
import { ReactComponent as PopupParagraphAboutIcon } from '../icons/popup-paragraph-about.svg';
|
||||
import { ReactComponent as PopupListAboutIcon } from '../icons/popup-list-about.svg';
|
||||
import { ReactComponent as PopupTableAboutIcon } from '../icons/popup-table-about.svg';
|
||||
|
||||
const POPUP_CONTAINER_CLASS = 'mind-popup-container';
|
||||
|
||||
const prompts = [
|
||||
// Base.
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Improve', 'mind'),
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Paraphrase', 'mind'),
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Simplify', 'mind'),
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Expand', 'mind'),
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Shorten', 'mind'),
|
||||
},
|
||||
|
||||
// Formality.
|
||||
const commands = [
|
||||
{
|
||||
type: 'category',
|
||||
label: __('Formality', 'mind'),
|
||||
label: __('Post Presets', 'mind'),
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Casual', 'mind'),
|
||||
type: 'request',
|
||||
label: __('Post title about…', 'mind'),
|
||||
request: __('Write a post title about ', 'mind'),
|
||||
icon: <PopupPostTitleAboutIcon />,
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Neutral', 'mind'),
|
||||
type: 'request',
|
||||
label: __('Post about…', 'mind'),
|
||||
request: __('Write a blog post about ', 'mind'),
|
||||
icon: <PopupPostAboutIcon />,
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Formal', 'mind'),
|
||||
type: 'request',
|
||||
label: __('Outline about…', 'mind'),
|
||||
request: __('Write a blog post outline about ', 'mind'),
|
||||
icon: <PopupOutlineAboutIcon />,
|
||||
},
|
||||
|
||||
// Tone.
|
||||
{
|
||||
type: 'category',
|
||||
label: __('Tone', 'mind'),
|
||||
label: __('Content Presets', 'mind'),
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Friendly', 'mind'),
|
||||
type: 'request',
|
||||
label: __('Paragraph about…', 'mind'),
|
||||
request: __('Create a paragraph about ', 'mind'),
|
||||
icon: <PopupParagraphAboutIcon />,
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Professional', 'mind'),
|
||||
type: 'request',
|
||||
label: __('List about…', 'mind'),
|
||||
request: __('Create a list about ', 'mind'),
|
||||
icon: <PopupListAboutIcon />,
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Witty', 'mind'),
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Heartfelt', 'mind'),
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Educational', 'mind'),
|
||||
type: 'request',
|
||||
label: __('Table about…', 'mind'),
|
||||
request: __('Create a table about ', 'mind'),
|
||||
icon: <PopupTableAboutIcon />,
|
||||
},
|
||||
];
|
||||
|
||||
export default function Popup(props) {
|
||||
const { onClose } = props;
|
||||
|
||||
const { close } = useDispatch('mind/popup');
|
||||
const ref = useRef();
|
||||
|
||||
const { isOpen } = useSelect((select) => {
|
||||
const { isOpen: checkIsOpen } = select('mind/popup');
|
||||
const { setHighlightBlocks } = useDispatch('mind/blocks');
|
||||
|
||||
return { isOpen: checkIsOpen() };
|
||||
const { close, reset, setInput, setScreen, setError, requestAI } =
|
||||
useDispatch('mind/popup');
|
||||
|
||||
const {
|
||||
isOpen,
|
||||
input,
|
||||
context,
|
||||
replaceBlocks,
|
||||
screen,
|
||||
loading,
|
||||
response,
|
||||
error,
|
||||
} = useSelect((select) => {
|
||||
const {
|
||||
isOpen: checkIsOpen,
|
||||
getInput,
|
||||
getContext,
|
||||
getReplaceBlocks,
|
||||
getScreen,
|
||||
getLoading,
|
||||
getResponse,
|
||||
getError,
|
||||
} = select('mind/popup');
|
||||
|
||||
return {
|
||||
isOpen: checkIsOpen(),
|
||||
input: getInput(),
|
||||
context: getContext(),
|
||||
replaceBlocks: getReplaceBlocks(),
|
||||
screen: getScreen(),
|
||||
loading: getLoading(),
|
||||
response: getResponse(),
|
||||
error: getError(),
|
||||
};
|
||||
});
|
||||
|
||||
let contextLabel = context;
|
||||
|
||||
switch (context) {
|
||||
case 'selected-blocks':
|
||||
contextLabel = __('Selected Blocks');
|
||||
break;
|
||||
case 'post-title':
|
||||
contextLabel = __('Post Title');
|
||||
break;
|
||||
// no default
|
||||
}
|
||||
|
||||
const { insertBlocks: wpInsertBlocks, replaceBlocks: wpReplaceBlocks } =
|
||||
useDispatch('core/block-editor');
|
||||
|
||||
function focusInput() {
|
||||
if (ref?.current) {
|
||||
const inputEl = ref.current.querySelector(
|
||||
'.mind-popup-input input'
|
||||
);
|
||||
|
||||
if (inputEl) {
|
||||
inputEl.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function copyToClipboard() {
|
||||
window.navigator.clipboard.writeText(response);
|
||||
}
|
||||
|
||||
function insertResponse() {
|
||||
const parsedBlocks = rawHandler({ HTML: response });
|
||||
|
||||
if (parsedBlocks.length) {
|
||||
if (replaceBlocks && replaceBlocks.length) {
|
||||
wpReplaceBlocks(replaceBlocks, parsedBlocks);
|
||||
} else {
|
||||
wpInsertBlocks(parsedBlocks);
|
||||
}
|
||||
|
||||
setHighlightBlocks(
|
||||
parsedBlocks.map((data) => {
|
||||
return data.clientId;
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Set focus on Input.
|
||||
useEffect(() => {
|
||||
if (isOpen && ref?.current) {
|
||||
focusInput();
|
||||
}
|
||||
}, [isOpen, ref]);
|
||||
|
||||
// Open request page if something is in input.
|
||||
useEffect(() => {
|
||||
if (screen === '' && input) {
|
||||
setScreen('request');
|
||||
}
|
||||
}, [screen, input, setScreen]);
|
||||
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const showFooter = response || (input && !loading && !response);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
ref={ref}
|
||||
title={false}
|
||||
className="mind-popup"
|
||||
overlayClassName="mind-popup-overlay"
|
||||
onRequestClose={() => {
|
||||
reset();
|
||||
close();
|
||||
|
||||
if (onClose) {
|
||||
|
|
@ -116,37 +206,143 @@ export default function Popup(props) {
|
|||
}}
|
||||
__experimentalHideHeader
|
||||
>
|
||||
<div className="mind-popup-content">
|
||||
<div className="mind-popup-prompts">
|
||||
{prompts.map((data) => {
|
||||
if (data.type === 'category') {
|
||||
return (
|
||||
<span
|
||||
key={data.type + data.label}
|
||||
className="mind-popup-prompts-category"
|
||||
>
|
||||
{data.label}
|
||||
</span>
|
||||
);
|
||||
<div className="mind-popup-input">
|
||||
{TOOLBAR_ICON}
|
||||
<TextControl
|
||||
placeholder={__('Ask AI to write anything…', 'mind')}
|
||||
value={input}
|
||||
onChange={(val) => {
|
||||
setInput(val);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
// Go back to starter screen.
|
||||
if (
|
||||
screen !== '' &&
|
||||
e.key === 'Backspace' &&
|
||||
!e.target.value
|
||||
) {
|
||||
reset();
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
key={data.type + data.label}
|
||||
className="mind-popup-prompts-button"
|
||||
// Send request to AI.
|
||||
if (screen === 'request' && e.key === 'Enter') {
|
||||
requestAI();
|
||||
}
|
||||
}}
|
||||
disabled={loading}
|
||||
/>
|
||||
{contextLabel ? (
|
||||
<span className="mind-popup-input-context">
|
||||
{contextLabel}
|
||||
</span>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</div>
|
||||
{loading && <LoadingLine />}
|
||||
<div className="mind-popup-content">
|
||||
{screen === '' ? (
|
||||
<div className="mind-popup-commands">
|
||||
{commands.map((data) => {
|
||||
if (data.type === 'category') {
|
||||
return (
|
||||
<span
|
||||
key={data.type + data.label}
|
||||
className="mind-popup-commands-category"
|
||||
>
|
||||
{data.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={data.type + data.label}
|
||||
className="mind-popup-commands-button"
|
||||
onClick={() => {
|
||||
setInput(data.request);
|
||||
setScreen('request');
|
||||
focusInput();
|
||||
}}
|
||||
>
|
||||
{data.icon || ''}
|
||||
{data.label}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{screen === 'request' && (
|
||||
<div className="mind-popup-request">
|
||||
{loading && (
|
||||
<LoadingText>
|
||||
{__('Waiting for AI response', 'mind')}
|
||||
</LoadingText>
|
||||
)}
|
||||
{!loading && response && <RawHTML>{response}</RawHTML>}
|
||||
{!loading && error && (
|
||||
<Notice type="error">{error}</Notice>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{showFooter && (
|
||||
<div className="mind-popup-footer">
|
||||
<div className="mind-popup-footer-actions">
|
||||
{input && !loading && !response && (
|
||||
<Button
|
||||
onClick={() => {
|
||||
requestAI();
|
||||
}}
|
||||
>
|
||||
{data.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{__('Get Answer', 'mind')} <kbd>⏎</kbd>
|
||||
</Button>
|
||||
)}
|
||||
{response && (
|
||||
<>
|
||||
<Button
|
||||
onClick={() => {
|
||||
insertResponse();
|
||||
|
||||
reset();
|
||||
close();
|
||||
|
||||
if (onClose) {
|
||||
onClose();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{__('Insert', 'mind')} <kbd>⏎</kbd>
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
copyToClipboard();
|
||||
|
||||
reset();
|
||||
close();
|
||||
|
||||
if (onClose) {
|
||||
onClose();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{__('Copy', 'mind')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setError('');
|
||||
requestAI();
|
||||
}}
|
||||
>
|
||||
{__('Regenerate', 'mind')} <kbd>↻</kbd>
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mind-popup-footer">
|
||||
<div className="mind-popup-footer-logo">
|
||||
{TOOLBAR_ICON}
|
||||
{__('Mind', '@@text_domain')}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
