69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
import React, { useContext, useEffect, useRef } from 'react';
|
|
import { ModalContext } from '../context/ModalContext';
|
|
import '../styles.scss';
|
|
import { getCurrentResponse } from '../common/textUtil';
|
|
|
|
export const LlmAnswer = () => {
|
|
const context = useContext(ModalContext)!;
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
|
|
const currentResponseAnswer =
|
|
getCurrentResponse(context.responses, context.showResponseIndex)?.answer ?? '';
|
|
|
|
useEffect(() => {
|
|
if (scrollRef.current) {
|
|
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
|
}
|
|
}, [currentResponseAnswer]);
|
|
|
|
const actionUndo = () => {
|
|
context.updateState({
|
|
showResponseIndex: Math.max(context.showResponseIndex - 1, 0),
|
|
});
|
|
};
|
|
const actionRedo = () => {
|
|
context.updateState({
|
|
showResponseIndex: Math.min(context.showResponseIndex + 1, context.responses.length - 1),
|
|
});
|
|
};
|
|
|
|
const renderButtons = () => {
|
|
if (context.responses.length > 1) {
|
|
return (
|
|
<div className="pager">
|
|
<ul className="pagination m-t-0 m-b-0">
|
|
<li>
|
|
<a onClick={actionUndo}>«</a>
|
|
</li>
|
|
<li className="unactive">
|
|
<a>
|
|
{context.showResponseIndex + 1} / {context.responses.length}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a onClick={actionRedo}>»</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return <></>;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="wpj-form-group">
|
|
<label>Odpověď</label>
|
|
<div
|
|
className={'form-control scrollable-div'}
|
|
ref={scrollRef}
|
|
dangerouslySetInnerHTML={{
|
|
__html: currentResponseAnswer,
|
|
}}></div>
|
|
</div>
|
|
{renderButtons()}
|
|
</>
|
|
);
|
|
};
|