Spaces:
Configuration error
Configuration error
File size: 2,008 Bytes
447ebeb |
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 |
import React, { useEffect, useState } from 'react';
import { Select, Typography, Tooltip } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import { Guardrail } from './types';
import { getGuardrailsList } from '../networking';
interface GuardrailSelectorProps {
onChange: (selectedGuardrails: string[]) => void;
value?: string[];
className?: string;
accessToken: string;
}
const GuardrailSelector: React.FC<GuardrailSelectorProps> = ({
onChange,
value,
className,
accessToken
}) => {
const [guardrails, setGuardrails] = useState<Guardrail[]>([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
const fetchGuardrails = async () => {
if (!accessToken) return;
setLoading(true);
try {
const response = await getGuardrailsList(accessToken);
console.log("Guardrails response:", response);
if (response.guardrails) {
console.log("Guardrails data:", response.guardrails);
setGuardrails(response.guardrails);
}
} catch (error) {
console.error("Error fetching guardrails:", error);
} finally {
setLoading(false);
}
};
fetchGuardrails();
}, [accessToken]);
const handleGuardrailChange = (selectedValues: string[]) => {
console.log("Selected guardrails:", selectedValues);
onChange(selectedValues);
};
return (
<div>
<Select
mode="multiple"
placeholder="Select guardrails"
onChange={handleGuardrailChange}
value={value}
loading={loading}
className={className}
options={guardrails.map(guardrail => {
console.log("Mapping guardrail:", guardrail);
return {
label: `${guardrail.guardrail_name}`,
value: guardrail.guardrail_name,
}
})}
optionFilterProp="label"
showSearch
style={{ width: '100%' }}
/>
</div>
);
};
export default GuardrailSelector; |