Поправлен интерфейс

2026-07-27 19:33:02 +03:00
parent 958fba5f3e
commit 3ed7239efa
95 changed files with 299 additions and 104 deletions
@@ -0,0 +1,143 @@
+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>
+    </>
+  );
+}