Add ai popover

This commit is contained in:
Sean Yang 2023-10-16 14:38:45 -04:00
parent e0e62735e9
commit 624f222b6c
2 changed files with 14 additions and 4 deletions

View File

@ -6,9 +6,9 @@ import StatusIndicator from './StatusIndicatorComponent';
import AlertModal from './AlertModal';
import AreYouSureModal from './AreYouSureModal';
import { useState, useEffect, useCallback} from 'react';
import { Tooltip } from '@mantine/core';
import { Tooltip, Popover } from '@mantine/core';
export default function NodeLabel({ title, nodeId, icon, onEdit, onSave, editable, status, alertModal, customButtons, handleRunClick, handleRunHover, runButtonTooltip }) {
export default function NodeLabel({ title, nodeId, icon, onEdit, onSave, editable, status, alertModal, customButtons, handleRunClick, handleRunHover, runButtonTooltip, aiPopoverContent }) {
const setDataPropsForNode = useStore((state) => state.setDataPropsForNode);
const [statusIndicator, setStatusIndicator] = useState('none');
const [runButton, setRunButton] = useState('none');
@ -68,6 +68,16 @@ export default function NodeLabel({ title, nodeId, icon, onEdit, onSave, editabl
deleteConfirmModal.current.trigger();
}, [deleteConfirmModal]);
const aiPopover =
<Popover position="top">
<Popover.Target>
<button className="ai-button nodrag">ai</button>
</Popover.Target>
<Popover.Dropdown>
{aiPopoverContent}
</Popover.Dropdown>
</Popover>;
return (<>
<div className="node-header drag-handle">
{icon ? (<>{icon}&nbsp;</>) : <></>}
@ -85,7 +95,7 @@ export default function NodeLabel({ title, nodeId, icon, onEdit, onSave, editabl
<div className="node-header-btns-container">
{customButtons ? customButtons : <></>}
{runButton}
<button className="ai-button nodrag">ai</button>
{aiPopoverContent ? aiPopover : <></>}
<button className="close-button nodrag" onClick={handleCloseButtonClick}>&#x2715;</button>
<br/>
</div>

View File

@ -275,7 +275,7 @@ const TextFieldsNode = ({ data, id }) => {
return (
<div className="text-fields-node cfnode">
<NodeLabel title={data.title || 'TextFields Node'} nodeId={id} icon={<IconTextPlus size="16px" />} />
<NodeLabel title={data.title || 'TextFields Node'} nodeId={id} icon={<IconTextPlus size="16px" />} aiPopoverContent={<div>hello</div>} />
<div ref={setRef}>
{Object.keys(textfieldsValues).map(i => (
<div className="input-field" key={i}>