import { useEffect, useState } from 'react'; export interface ResponseStyle { key: string; label: string; description: string; } export const all_response_styles: ResponseStyle[] = [ { key: 'detailed', label: 'Detailed', description: 'Tool calls are by default shown open to expose details', }, { key: 'concise', label: 'Concise', description: 'Tool calls are by default closed and only show the tool used', }, ]; interface ResponseStyleSelectionItemProps { currentStyle: string; style: ResponseStyle; showDescription: boolean; handleStyleChange: (newStyle: string) => void; } export function ResponseStyleSelectionItem({ currentStyle, style, showDescription, handleStyleChange, }: ResponseStyleSelectionItemProps) { const [checked, setChecked] = useState(currentStyle === style.key); useEffect(() => { setChecked(currentStyle === style.key); }, [currentStyle, style.key]); return (

handleStyleChange(style.key)} >

{style.label}

{showDescription && (

{style.description}

)}

handleStyleChange(style.key)} className="peer sr-only" />

); }