{code});
}
}
return out;
}
const ProductPreview = () => {
const [activeModel, setActiveModel] = useState('deepseek-v4-pro');
const initialDeepseek = useMemo(
() => window.MODELS.find(m => m.id === 'deepseek-v4-pro'),
[]
);
const [messages, setMessages] = useState(() => [
{
role: 'user',
text: 'Напиши функцию на Python, которая считает количество гласных в строке.',
},
{
role: 'bot',
model: 'deepseek-v4-pro',
text: pickResponse(initialDeepseek, 'код'),
},
]);
const [draft, setDraft] = useState('');
const [thinking, setThinking] = useState(false);
const scrollRef = useRef(null);
const textareaRef = useRef(null);
const model = useMemo(() => window.MODELS.find(m => m.id === activeModel), [activeModel]);
useEffect(() => {
if (scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}
}, [messages, thinking]);
// Auto-resize textarea
useEffect(() => {
const el = textareaRef.current;
if (el) {
el.style.height = 'auto';
el.style.height = Math.min(el.scrollHeight, 120) + 'px';
}
}, [draft]);
const send = (text) => {
const value = (text ?? draft).trim();
if (!value || thinking) return;
const userMsg = { role: 'user', text: value };
setMessages(prev => [...prev, userMsg]);
setDraft('');
setThinking(true);
const delay = 900 + Math.random() * 700;
setTimeout(() => {
setMessages(prev => [...prev, {
role: 'bot',
model: activeModel,
text: pickResponse(model, value),
}]);
setThinking(false);
}, delay);
};
const onKey = (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
send();
}
};
const onPickModel = (id) => {
setActiveModel(id);
};
const onNewChat = () => {
setMessages([
{ role: 'bot', model: activeModel, text: 'Новый чат. О чём поговорим?' },
]);
};
return (
Попробуй прямо здесь — переключи модель, выбери пример запроса или напиши свой. Интерфейс точно такой же, как в продукте.