72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
import React, { useContext, useEffect, useRef } from 'react';
|
|
import { ModalContext } from '../context/ModalContext';
|
|
import { ModalDisplayStyle } from '../common/interfaces';
|
|
|
|
interface LlmModalProps {
|
|
close: () => void;
|
|
children: any;
|
|
displayStyle: ModalDisplayStyle;
|
|
}
|
|
|
|
export const Modal = (props: LlmModalProps) => {
|
|
const context = useContext(ModalContext);
|
|
const modalRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!modalRef.current) {
|
|
return;
|
|
}
|
|
const resizeObserver = new ResizeObserver(() => {
|
|
parent.postMessage({
|
|
event: 'llm-modal-resize',
|
|
payload: { height: modalRef.current?.scrollHeight },
|
|
});
|
|
});
|
|
|
|
resizeObserver.observe(modalRef.current);
|
|
|
|
return () => {
|
|
resizeObserver.disconnect();
|
|
};
|
|
}, []);
|
|
|
|
const header = (
|
|
<>
|
|
<h5>AI prompt {context?.title}</h5>
|
|
<button onClick={props.close} type="button" className="close" data-dismiss="modal">
|
|
<span className="bi bi-x-lg"></span>
|
|
</button>
|
|
</>
|
|
);
|
|
|
|
if (props.displayStyle === 'modal') {
|
|
return (
|
|
<>
|
|
<div
|
|
className="modal modal-llm in"
|
|
role="dialog"
|
|
tabIndex={-1}
|
|
id="admin_dialog_llm"
|
|
style={{ display: 'block' }}>
|
|
<div className="modal-dialog">
|
|
<div className="modal-content">
|
|
<div className="modal-header">{header}</div>
|
|
{props.children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="modal-backdrop in"></div>
|
|
</>
|
|
);
|
|
} else if (props.displayStyle === 'iframe') {
|
|
return (
|
|
<div className={'modal-llm'}>
|
|
<div className="modal-content" ref={modalRef}>
|
|
<div className="modal-header">{header}</div>
|
|
{props.children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
};
|