Initial MVP skeleton with auth, chat persistence, UI and text LLM integration

frontend/app/chat/[id]/ChatView.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+
+interface Message {
+  id: string;
+  role: string;
+  content: string;
+  created_at: string;
+}
+
+interface Chat {
+  id: string;
+  title: string;
+  model_alias: string;
+}
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || "http://127.0.0.1:18000";
+
+export default function ChatView({ chat, initialMessages }: { chat: Chat, initialMessages: Message[] }) {
+  const [messages, setMessages] = useState<Message[]>(initialMessages);
+  const [input, setInput] = useState("");
+  const [isSending, setIsSending] = useState(false);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages, isGenerating]); // Also scroll when isGenerating changes
+
+  const handleSend = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!input.trim() || isSending || isGenerating) return;
+
+    setIsSending(true);
+    const content = input;
+    setInput("");
+    
+    // Eagerly show user message map
+    const tempUserMsg: Message = {
+      id: "temp-" + Date.now(),
+      role: "user",
+      content: content,
+      created_at: new Date().toISOString()
+    };
+    setMessages(prev => [...prev, tempUserMsg]);
+    setIsGenerating(true);
+    
+    try {
+      const res = await fetch(`${API_BASE_URL}/api/chats/${chat.id}/messages`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ content, role: "user" }),
+      });
+      
+      if (!res.ok) throw new Error("Failed to send message");
+      
+      const data = await res.json();
+      if (!Array.isArray(data) || data.length < 2) {
+        throw new Error("Invalid response format from server");
+      }
+      const [userMsg, assistantMsg] = data;
+      
+      // Replace the temp user msg and append the actual user and assistant messages from backend
+      setMessages(prev => [...prev.filter(m => m.id !== tempUserMsg.id), userMsg, assistantMsg]);
+      
+    } catch (err) {
+      console.error(err);
+      alert("Failed to send message: " + err);
+      setInput(content); // restore input
+      setMessages(prev => prev.filter(m => m.id !== tempUserMsg.id)); // Remove failed message
+    } finally {
+      setIsSending(false);
+      setIsGenerating(false);
+    }
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', width: '100%' }}>
+      {/* Dynamic Chat Header */}
+      <div style={{
+        height: 64,
+        padding: '0 24px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        borderBottom: '1px solid var(--border-color)',
+        backgroundColor: 'var(--panel-bg)'
+      }}>
+        <h2 style={{ fontSize: 18, fontWeight: 600, margin: 0, color: 'var(--text-main)' }}>{chat.title}</h2>
+        <div style={{
+          display: 'flex', alignItems: 'center', gap: 8,
+          padding: '6px 12px', backgroundColor: 'var(--bg-color)',
+          borderRadius: 20, fontSize: 13, color: 'var(--primary)', fontWeight: 500
+        }}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+             <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+             <path d="M12 16V12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+             <path d="M12 8H12.01" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+          </svg>
+          Модель: {chat.model_alias}
+        </div>
+      </div>
+
+      {/* Messages Scroll Area */}
+      <div 
+        ref={scrollRef}
+        style={{ flex: 1, overflowY: "auto", padding: '24px 10%', backgroundColor: 'var(--bg-color)' }}
+      >
+        {messages.length === 0 ? (
+          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', color: 'var(--text-muted)' }}>
+            Напишите первое сообщение, чтобы начать диалог.
+          </div>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 24, paddingBottom: 24 }}>
+            {messages.map(msg => {
+              const isUser = msg.role === 'user';
+              return (
+                <div key={msg.id} style={{ display: 'flex', flexDirection: 'column', alignItems: isUser ? 'flex-end' : 'flex-start' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
+                    <span style={{ fontSize: 13, fontWeight: 600, color: isUser ? 'var(--primary)' : 'var(--text-main)' }}>
+                      {isUser ? 'Вы' : 'AI Помощник'}
+                    </span>
+                    <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>
+                      {new Date(msg.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                    </span>
+                  </div>
+                  <div style={{
+                    backgroundColor: isUser ? 'var(--primary)' : 'var(--panel-bg)',
+                    color: isUser ? '#fff' : 'var(--text-main)',
+                    padding: '12px 16px',
+                    borderRadius: isUser ? '16px 16px 0 16px' : '16px 16px 16px 0',
+                    maxWidth: '85%',
+                    lineHeight: '1.5',
+                    fontSize: 15,
+                    boxShadow: '0 2px 4px rgba(0,0,0,0.02)',
+                    border: isUser ? 'none' : '1px solid var(--border-color)',
+                    whiteSpace: 'pre-wrap'
+                  }}>
+                    {msg.content}
+                  </div>
+                </div>
+              );
+            })}
+            
+            {/* Loading Indicator for AI Response */}
+            {isGenerating && (
+              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
+                    <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-main)' }}>
+                      AI Помощник
+                    </span>
+                  </div>
+                  <div style={{
+                    backgroundColor: 'var(--panel-bg)',
+                    color: 'var(--text-muted)',
+                    padding: '12px 16px',
+                    borderRadius: '16px 16px 16px 0',
+                    maxWidth: '85%',
+                    lineHeight: '1.5',
+                    fontSize: 15,
+                    boxShadow: '0 2px 4px rgba(0,0,0,0.02)',
+                    border: '1px solid var(--border-color)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '4px'
+                  }}>
+                    <i>Печатает...</i>
+                  </div>
+              </div>
+            )}
+            
+          </div>
+        )}
+      </div>
+      
+      {/* Composer */}
+      <div style={{
+        padding: '16px 10%',
+        backgroundColor: 'var(--panel-bg)',
+        borderTop: '1px solid var(--border-color)'
+      }}>
+        <form onSubmit={handleSend} style={{
+          display: "flex",
+          position: "relative",
+          alignItems: "center"
+        }}>
+          <input 
+            type="text" 
+            value={input} 
+            onChange={e => setInput(e.target.value)} 
+            placeholder="Спросите о чем-нибудь..."
+            style={{ 
+              flex: 1, 
+              padding: '14px 110px 14px 20px', 
+              borderRadius: 24, 
+              border: "1px solid var(--border-color)",
+              backgroundColor: "var(--bg-color)",
+              fontSize: 15,
+              outline: "none",
+              transition: "border-color 0.2s"
+            }}
+            disabled={isSending}
+            onFocus={e => e.target.style.borderColor = 'var(--primary)'}
+            onBlur={e => e.target.style.borderColor = 'var(--border-color)'}
+          />
+          
+          <div style={{ position: 'absolute', right: 8, display: 'flex', gap: 8 }}>
+            <button 
+              type="button"
+              disabled
+              title="Вложения пока не поддерживаются"
+              style={{
+                width: 36, height: 36, borderRadius: '50%', backgroundColor: 'transparent',
+                border: 'none', cursor: 'not-allowed', color: 'var(--text-muted)',
+                display: 'flex', alignItems: 'center', justifyContent: 'center'
+              }}
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M21.4354 2.58198C20.9402 2.06941 20.1492 2.06941 19.654 2.58198L10.3168 12.2359C9.89423 12.6728 9.89423 13.3854 10.3168 13.8224C10.7394 14.2593 11.4284 14.2593 11.851 13.8224L20.5977 4.77443C20.893 4.469 21.3748 4.469 21.6701 4.77443C21.9654 5.07985 21.9654 5.57813 21.6701 5.88355L12.9234 14.9315C11.9079 15.9818 10.2524 15.9818 9.23692 14.9315C8.22144 13.8812 8.22144 12.1697 9.23692 11.1193L18.5741 1.46543C19.6701 0.33202 21.4616 0.33202 22.5576 1.46543C23.6535 2.59884 23.6535 4.45307 22.5576 5.58648L11.5332 17.0267C9.92358 18.6917 7.29124 18.6917 5.68161 17.0267C4.07198 15.3618 4.07198 12.6393 5.68161 10.9743L14.8812 1.45511C15.1765 1.14968 15.6583 1.14968 15.9536 1.45511C16.2489 1.76054 16.2489 2.25881 15.9536 2.56424L6.75399 12.0835C5.74836 13.1237 5.74836 14.823 6.75399 15.8633C7.75962 16.9035 9.40232 16.9035 10.4079 15.8633L21.4324 4.42316C21.944 3.89363 21.944 3.09151 21.4324 2.58198H21.4354Z" fill="currentColor"/>
+              </svg>
+            </button>
+            <button 
+              type="submit" 
+              disabled={isSending || !input.trim()}
+              style={{
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                width: 36, height: 36, borderRadius: '50%',
+                backgroundColor: isSending || !input.trim() ? '#e5e7eb' : 'var(--primary)',
+                color: isSending || !input.trim() ? '#a1a1aa' : '#fff',
+                border: 'none', cursor: (isSending || !input.trim()) ? 'default' : 'pointer',
+                transition: 'background-color 0.2s'
+              }}
+            >
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ marginLeft: 2 }}>
+                <path d="M22 2L11 13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                <path d="M22 2L15 22L11 13L2 9L22 2Z" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+              </svg>
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}