Spaces:
Build error
Build error
File size: 4,689 Bytes
dfeda2e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
/**
* @license
* SPDX-License-Identifier: Apache-2.0
*/
/* tslint:disable */
import React, {useEffect, useState} from 'react';
interface ParametersPanelProps {
currentLength: number;
onUpdateHistoryLength: (newLength: number) => void; // Renamed for clarity
onClosePanel: () => void;
isStatefulnessEnabled: boolean;
onSetStatefulness: (enabled: boolean) => void; // Changed to accept a boolean
}
export const ParametersPanel: React.FC<ParametersPanelProps> = ({
currentLength,
onUpdateHistoryLength,
onClosePanel,
isStatefulnessEnabled,
onSetStatefulness,
}) => {
// Local state for pending changes
const [localHistoryLengthInput, setLocalHistoryLengthInput] =
useState<string>(currentLength.toString());
const [localStatefulnessChecked, setLocalStatefulnessChecked] =
useState<boolean>(isStatefulnessEnabled);
// Update local state if props change (e.g., panel re-opened)
useEffect(() => {
setLocalHistoryLengthInput(currentLength.toString());
}, [currentLength]);
useEffect(() => {
setLocalStatefulnessChecked(isStatefulnessEnabled);
}, [isStatefulnessEnabled]);
const handleHistoryLengthInputChange = (
event: React.ChangeEvent<HTMLInputElement>,
) => {
setLocalHistoryLengthInput(event.target.value);
};
const handleStatefulnessCheckboxChange = (
event: React.ChangeEvent<HTMLInputElement>,
) => {
setLocalStatefulnessChecked(event.target.checked);
};
const handleApplyParameters = () => {
// Apply history length
const newLength = parseInt(localHistoryLengthInput, 10);
if (!isNaN(newLength) && newLength >= 0 && newLength <= 10) {
onUpdateHistoryLength(newLength);
} else {
alert('Please enter a number between 0 and 10 for history length.');
setLocalHistoryLengthInput(currentLength.toString()); // Revert local input to original prop on error
return; // Do not proceed to close if there's an error
}
// Apply statefulness if it has changed
if (localStatefulnessChecked !== isStatefulnessEnabled) {
onSetStatefulness(localStatefulnessChecked);
}
onClosePanel(); // Close the panel after applying settings
};
const handleClose = () => {
// Reset local state to reflect original props before closing, ensuring no pending changes carry over visually if panel is quickly reopened
setLocalHistoryLengthInput(currentLength.toString());
setLocalStatefulnessChecked(isStatefulnessEnabled);
onClosePanel();
};
return (
<div className="p-6 bg-gray-50 h-full flex flex-col items-start pt-8">
{/* Interaction History Row */}
<div className="w-full max-w-md mb-6">
<div className="llm-row items-center">
<label
htmlFor="maxHistoryLengthInput"
className="llm-label whitespace-nowrap mr-3 flex-shrink-0"
style={{minWidth: '150px'}}>
Max History Length:
</label>
<input
type="number"
id="maxHistoryLengthInput"
value={localHistoryLengthInput}
onChange={handleHistoryLengthInputChange}
min="0"
max="10"
className="llm-input flex-grow"
aria-describedby="historyLengthHelpText"
/>
</div>
</div>
{/* Statefulness Row */}
<div className="w-full max-w-md mb-4">
<div className="llm-row items-center">
<label
htmlFor="statefulnessCheckbox"
className="llm-label whitespace-nowrap mr-3 flex-shrink-0"
style={{minWidth: '150px'}}>
Enable Statefulness:
</label>
<input
type="checkbox"
id="statefulnessCheckbox"
checked={localStatefulnessChecked}
onChange={handleStatefulnessCheckboxChange}
className="h-5 w-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500 cursor-pointer"
aria-describedby="statefulnessHelpText"
/>
</div>
</div>
{/* Action Buttons */}
<div className="mt-6 w-full max-w-md flex justify-start gap-3">
{' '}
{/* Changed pt-2 to mt-6, justify-end to justify-start */}
<button
onClick={handleApplyParameters}
className="llm-button"
aria-label="Apply all parameter settings and close">
Apply Parameters
</button>
<button
onClick={handleClose}
className="llm-button bg-gray-500 hover:bg-gray-600 active:bg-gray-700"
aria-label="Close parameters panel without applying current changes">
Close Parameters
</button>
</div>
</div>
);
};
|