mirror of
https://github.com/ianarawjo/ChainForge.git
synced 2025-03-14 16:26:45 +00:00
Add ai popover
This commit is contained in:
parent
e0e62735e9
commit
624f222b6c
@ -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} </>) : <></>}
|
||||
@ -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}>✕</button>
|
||||
<br/>
|
||||
</div>
|
||||
|
@ -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}>
|
||||
|
Loading…
x
Reference in New Issue
Block a user