"[mport React, { useState, useRef, useEffect } from 'react'; import { Send, Bot, User, Sparkles, MessageSquare, Settings, Trash2, Copy, Check } from 'lucide-react'; const App = () => { const [messages, setMessages] = useState([ { id: 1, type: 'bot', content: 'Привет! Я Qwen AI, ваш искусственный интеллект. Чем могу помочь?', timestamp: new Date() } ]); const [inputValue, setInputValue] = useState(''); const [isTyping, setIsTyping] = useState(false); const [copiedId, setCopiedId] = useState(null); const messagesEndRef = useRef(null); const textareaRef = useRef(null); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }; useEffect(() => { scrollToBottom(); }, [messages]); const simulateQwenResponse = (userMessage) => { // Имитация ответа Qwen AI const responses = [ `Я понимаю ваш вопрос о "${userMessage}". В соответствии с моими знаниями, это довольно интересная тема. Qwen AI может предоставить подробное объяснение, но важно учитывать несколько факторов...`, `Отличный вопрос! Похоже, вы хотите узнать больше о "${userMessage}". Как специалист по искусственному интеллекту, я могу сказать, что современные модели, такие как Qwen, обладают уникальными способностями...`, `Спасибо за ваш вопрос "${userMessage}". Это действительно важная тема. Моя модель Qwen основана на огромном объеме данных и способна анализировать информацию с высокой точностью.`, `Вы спрашиваете о "${userMessage}"? Это отличная тема для обсуждения. Qwen AI способен генерировать качественные ответы, используя свои обученные параметры и алгоритмы обработки естественного языка.`, `Интересный запрос! "${userMessage}" - это то, что я могу эффективно обрабатывать. Моя архитектура позволяет мне понимать контекст и предоставлять релевантные ответы на различные вопросы.` ]; return responses[Math.floor(Math.random() * responses.length)]; }; const handleSendMessage = async () => { if (!inputValue.trim()) return; const userMessage = { id: Date.now(), type: 'user', content: inputValue, timestamp: new Date() }; setMessages(prev => [...prev, userMessage]); setInputValue(''); setIsTyping(true); // Имитация задержки ответа setTimeout(() => { const botResponse = { id: Date.now() + 1, type: 'bot', content: simulateQwenResponse(inputValue), timestamp: new Date() }; setMessages(prev => [...prev, botResponse]); setIsTyping(false); }, 1000 + Math.random() * 2000); }; const handleKeyPress = (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSendMessage(); } }; const copyToClipboard = (text, id) => { navigator.clipboard.writeText(text); setCopiedId(id); setTimeout(() => setCopiedId(null), 2000); }; const clearChat = () => { setMessages([ { id: 1, type: 'bot', content: 'Привет! Я Qwen AI, ваш искусственный интеллект. Чем могу помочь?', timestamp: new Date() } ]); }; const formatTime = (date) => { return date.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' }); }; return (

{/* Header */}

Qwen AI Бот

Искусственный интеллект от Alibaba

{/* Chat Container */}

{/* Messages Area */}

{messages.map((message) => (

{message.type === 'user' ? ( ) : ( )}

{message.content}

{formatTime(message.timestamp)} {message.type === 'bot' && ( )}

))} {/* Typing Indicator */} {isTyping && (

)}

{/* Input Area */}

setInputValue(e.target.value)}
                  onKeyPress={handleKeyPress}
                  placeholder="Введите ваш вопрос для Qwen AI..."
                  className="w-full px-4 py-3 pr-12 border border-gray-200 rounded-xl resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  rows="1"
                  style={{ minHeight: '48px', maxHeight: '120px' }}
                />
                <div className="absolute right-3 bottom-3">
                  <Settings className="w-4 h-4 text-gray-400" />
                </div>
              </div>
              <button
                onClick={handleSendMessage}
                disabled={!inputValue.trim() || isTyping}
                className="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-xl hover:from-blue-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center justify-center"
              >
                <Send className="w-5 h-5" />
              </button>
            </div>
            <div className="mt-2 text-xs text-gray-500 text-center">
              Нажмите Enter для отправки, Shift+Enter для новой строки
            </div>
          </div>
        </div>

{/* Features Section */}
        <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
            <div className="flex items-center space-x-3">
              <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                <MessageSquare className="w-4 h-4 text-blue-600" />
              </div>
              <div>
                <h3 className="font-semibold text-gray-900">Интеллектуальный ответ</h3>
                <p className="text-sm text-gray-500">Ответы на основе анализа контекста</p>
              </div>
            </div>
          </div>
          
          <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
            <div className="flex items-center space-x-3">
              <div className="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center">
                <Sparkles className="w-4 h-4 text-purple-600" />
              </div>
              <div>
                <h3 className="font-semibold text-gray-900">Qwen AI</h3>
                <p className="text-sm text-gray-500">Мощная нейросеть от Alibaba</p>
              </div>
            </div>
          </div>
          
          <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
            <div className="flex items-center space-x-3">
              <div className="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
                <Bot className="w-4 h-4 text-green-600" />
              </div>
              <div>
                <h3 className="font-semibold text-gray-900">Непрерывный чат</h3>
                <p className="text-sm text-gray-500">Поддержка контекста диалога</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;]
Qwen AI | AI's name: Qwen AI | AI.
Qwen AI | AI calls {{user}} by {{user}} or any name introduced by {{user}}.
Qwen AI | AI's personality: .
Qwen AI | AI's background: .

Do not write as {{user}} or assume {{user}}'s reaction or response. Wait for {{user}} response before continuing.</article></body></html>