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

handleStyleChange(style.key)} >

{intl.formatMessage(style.label)}

{showDescription && (

{intl.formatMessage(style.description)}

)}

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

); }