han-app/figma/src/app/pages/Chat.tsx

import { useParams } from 'react-router';
import { ArrowLeft, Mic, Paperclip, Send } from 'lucide-react';
import { useState } from 'react';

interface Message {
  id: string;
  sender: 'user' | 'bot';
  text: string;
  timestamp: string;
}

const sampleMessages: Message[] = [
  {
    id: '1',
    sender: 'bot',
    text: 'Здравствуйте! Я HAN, ваш помощник по вопросам пребывания в России. Чем могу помочь?',
    timestamp: '14:25'
  },
  {
    id: '2',
    sender: 'user',
    text: 'Как продлить патент?',
    timestamp: '14:26'
  },
  {
    id: '3',
    sender: 'bot',
    text: 'Для продления патента вам нужно:\n\n1. За 10 дней до окончания действия патента подать заявление\n2. Оплатить госпошлину и авансовый платеж НДФЛ\n3. Предоставить документы: паспорт, действующий патент, полис ДМС\n\nХотите, я помогу записаться на подачу документов?',
    timestamp: '14:26'
  },
];

export function Chat() {
  const { id } = useParams();
  const [message, setMessage] = useState('');
  const [messages] = useState<Message[]>(sampleMessages);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (message.trim()) {
      console.log('Sending message:', message);
      setMessage('');
    }
  };

  return (
    <>
      {/* Заголовок чата */}
      <div className="px-4 py-3 border-b border-border bg-background flex items-center gap-3">
        <button
          onClick={() => window.history.back()}
          className="flex items-center justify-center w-9 h-9 rounded-full hover:bg-muted transition-colors"
          aria-label="Назад"
        >
          <ArrowLeft className="w-5 h-5" />
        </button>
        <div className="flex-1">
          <h1 className="text-base font-medium">HAN Помощник</h1>
          <p className="text-xs text-muted-foreground">Онлайн</p>
        </div>
      </div>

      {/* Сообщения */}
      <div className="flex-1 overflow-y-auto px-4 py-4">
        <div className="space-y-4">
          {messages.map((msg) => (
            <div
              key={msg.id}
              className={`flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`}
            >
              <div
                className={`max-w-[75%] rounded-2xl px-4 py-2.5 ${
                  msg.sender === 'user'
                    ? 'bg-primary text-primary-foreground'
                    : 'bg-muted text-foreground'
                }`}
              >
                <p className="text-sm whitespace-pre-line">{msg.text}</p>
                <p
                  className={`text-xs mt-1 ${
                    msg.sender === 'user' ? 'text-primary-foreground/70' : 'text-muted-foreground'
                  }`}
                >
                  {msg.timestamp}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Поле ввода */}
      <div className="px-4 pb-4 pt-2 border-t border-border bg-background">
        <form onSubmit={handleSubmit} className="relative">
          <div className="flex items-end gap-2 bg-card border-2 border-primary/20 rounded-2xl p-2.5 shadow-sm">
            <button
              type="button"
              className="flex items-center justify-center w-9 h-9 rounded-full hover:bg-muted transition-colors flex-shrink-0"
              aria-label="Прикрепить файл"
            >
              <Paperclip className="w-5 h-5 text-muted-foreground" />
            </button>

            <textarea
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              placeholder="Напишите сообщение..."
              rows={1}
              className="flex-1 bg-transparent resize-none outline-none py-2 px-2 max-h-32 min-h-[40px] text-base"
              style={{
                scrollbarWidth: 'none',
                msOverflowStyle: 'none'
              }}
              onKeyDown={(e) => {
                if (e.key === 'Enter' && !e.shiftKey) {
                  e.preventDefault();
                  handleSubmit(e);
                }
              }}
            />

            <button
              type="button"
              className="flex items-center justify-center w-9 h-9 rounded-full hover:bg-muted transition-colors flex-shrink-0"
              aria-label="Голосовое сообщение"
            >
              <Mic className="w-5 h-5 text-muted-foreground" />
            </button>

            <button
              type="submit"
              disabled={!message.trim()}
              className="flex items-center justify-center w-9 h-9 rounded-full bg-primary text-primary-foreground hover:opacity-90 transition-opacity flex-shrink-0 disabled:opacity-40"
              aria-label="Отправить"
            >
              <Send className="w-4 h-4" />
            </button>
          </div>
        </form>
      </div>
    </>
  );
}