import { useEffect, useState } from 'react'; import TextareaAutosize from 'react-textarea-autosize'; import { useUpdateTokenCountMutation, TUpdateTokenCountResponse } from 'librechat-data-provider'; import type { TSettingsProps } from '~/common'; import { Label, Checkbox, SelectDropDown } from '~/components/ui'; import { cn, defaultTextProps, removeFocusOutlines } from '~/utils/'; import { useLocalize, useDebounce } from '~/hooks'; export default function Settings({ conversation, setOption, readonly }: TSettingsProps) { const localize = useLocalize(); const [tokenCount, setTokenCount] = useState(0); const debouncedContext = useDebounce(conversation?.context?.trim() ?? '', 250); const updateTokenCountMutation = useUpdateTokenCountMutation(); useEffect(() => { if (!debouncedContext || debouncedContext === '') { setTokenCount(0); return; } const handleTextChange = (context: string) => { updateTokenCountMutation.mutate( { text: context }, { onSuccess: (data: TUpdateTokenCountResponse) => { setTokenCount(data.count); }, }, ); }; handleTextChange(debouncedContext); // eslint-disable-next-line react-hooks/exhaustive-deps }, [debouncedContext]); if (!conversation) { return null; } const { context, systemMessage, jailbreak, toneStyle } = conversation; const showSystemMessage = jailbreak; const setContext = setOption('context'); const setSystemMessage = setOption('systemMessage'); const setJailbreak = setOption('jailbreak'); const setToneStyle = (value: string) => setOption('toneStyle')(value.toLowerCase()); return (