Web and AI chat

2026-04-10 07:34:53 -06:00
parent b9635cae68
commit a50fa82a50
12 changed files with 1691 additions and 7 deletions
--- a/web/app/ai-chat/page.js
+++ b/web/app/ai-chat/page.js
@@ -0,0 +1,562 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/context/AuthContext";
+
+const API_BASE = "";
+
+function AiChatPage() {
+  const { user, token, loading: authLoading } = useAuth();
+  const router = useRouter();
+
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState("");
+  const [sending, setSending] = useState(false);
+  const [error, setError] = useState(null);
+  const [switchingToHuman, setSwitchingToHuman] = useState(false);
+  const [humanRequested, setHumanRequested] = useState(false);
+
+  const messagesEndRef = useRef(null);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (!authLoading && !user) {
+      router.push("/login?next=" + encodeURIComponent("/ai-chat"));
+    }
+  }, [authLoading, user, router]);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  const buildHistory = useCallback(() => {
+
+    return messages.map((m) => ({
+      role: m.role,
+      content: m.content,
+    }));
+  }, [messages]);
+
+  async function handleSend(e) {
+    e?.preventDefault();
+    const text = input.trim();
+    if (!text || sending) return;
+
+    setInput("");
+    setError(null);
+    setSending(true);
+
+    const userMsg = { role: "user", content: text, id: Date.now() };
+    setMessages((prev) => [...prev, userMsg]);
+
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/ai-chat/message`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({
+          message: text,
+          history: buildHistory(),
+        }),
+      });
+
+      if (res.status === 401 || res.status === 403) {
+        router.push("/login?next=" + encodeURIComponent("/ai-chat"));
+        return;
+      }
+
+      const data = await res.json();
+
+      if (!res.ok || !data.success) {
+        setError(data.error || "Failed to get a response. Please try again.");
+        return;
+      }
+
+      const aiMsg = { role: "assistant", content: data.message, id: Date.now() + 1 };
+      setMessages((prev) => [...prev, aiMsg]);
+    } catch {
+      setError("Network error. Please check your connection and try again.");
+    } finally {
+      setSending(false);
+      inputRef.current?.focus();
+    }
+  }
+
+  async function handleHumanChat() {
+    if (switchingToHuman || !token) return;
+    setSwitchingToHuman(true);
+    setError(null);
+
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/chat/conversations`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({
+          message: "Hi, I'd like to speak with a real support agent.",
+        }),
+      });
+
+      if (res.status === 401) {
+        router.push("/login?next=" + encodeURIComponent("/ai-chat"));
+        return;
+      }
+
+      const data = await res.json().catch(() => null);
+
+      if (!res.ok) {
+        setError(data?.message || "Could not connect to live support. Please try again.");
+        return;
+      }
+
+      const conv = data;
+
+      //Flag conversation staff, also should notify them
+      await fetch(`${API_BASE}/api/v1/chat/conversations/${conv.id}/request-human`, {
+        method: "POST",
+        headers: { Authorization: `Bearer ${token}` },
+      });
+
+      setHumanRequested(true);
+      router.push(`/chat?id=${conv.id}`);
+    } catch {
+      setError("Network error. Could not connect to live support.");
+    } finally {
+      setSwitchingToHuman(false);
+    }
+  }
+
+  function handleKeyDown(e) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  }
+
+  if (authLoading) {
+    return (
+      <main style={s.page}>
+        <p style={s.loading}>Loading...</p>
+      </main>
+    );
+  }
+
+  if (!user) return null;
+
+  return (
+    <main style={s.page}>
+      <section style={s.hero}>
+        <h1 style={s.heroTitle}>AI Pet Assistant</h1>
+        <p style={s.heroSubtitle}>
+          Ask me anything about pet care, adoption advice, or your pets!
+        </p>
+        <div style={s.titleDecoration} />
+      </section>
+
+      <section style={s.chatSection}>
+        <div style={s.chatCard}>
+          <div style={s.chatHeader}>
+            <div style={s.chatHeaderLeft}>
+              <div style={s.aiAvatar}>🐾</div>
+              <div>
+                <div style={s.chatHeaderTitle}>Leon's Pet Assistant</div>
+                <div style={s.chatHeaderStatus}>
+                  <span style={s.statusDot} /> Online
+                </div>
+              </div>
+            </div>
+            <button
+              style={{
+                ...s.humanBtn,
+                ...(switchingToHuman ? s.humanBtnDisabled : {}),
+              }}
+              onClick={handleHumanChat}
+              disabled={switchingToHuman}
+              title="Connect with a human support agent"
+            >
+              {switchingToHuman ? "Connecting..." : "Chat with a Real Person"}
+            </button>
+          </div>
+
+          <div style={s.messagesArea}>
+            {messages.length === 0 && (
+              <div style={s.emptyState}>
+                <div style={s.emptyIcon}>🐾</div>
+                <p style={s.emptyText}>
+                  Hello{user.fullName ? `, ${user.fullName.split(" ")[0]}` : ""}! I'm your pet care assistant.
+                  Ask me about pet recommendations, care tips, supplies, or anything pet-related!
+                </p>
+              </div>
+            )}
+
+            {messages.map((msg) => (
+              <div
+                key={msg.id}
+                style={{
+                  ...s.messageRow,
+                  ...(msg.role === "user" ? s.messageRowUser : s.messageRowAi),
+                }}
+              >
+                {msg.role === "assistant" && (
+                  <div style={s.aiAvatarSmall}>🐾</div>
+                )}
+                <div
+                  style={{
+                    ...s.messageBubble,
+                    ...(msg.role === "user" ? s.bubbleUser : s.bubbleAi),
+                  }}
+                >
+                  {msg.content.split("\n").map((line, i) => (
+                    <span key={i}>
+                      {line}
+                      {i < msg.content.split("\n").length - 1 && <br />}
+                    </span>
+                  ))}
+                </div>
+                {msg.role === "user" && (
+                  <div style={s.userAvatarSmall}>
+                    {user.fullName ? user.fullName.charAt(0).toUpperCase() : "U"}
+                  </div>
+                )}
+              </div>
+            ))}
+
+            {sending && (
+              <div style={{ ...s.messageRow, ...s.messageRowAi }}>
+                <div style={s.aiAvatarSmall}>🐾</div>
+                <div style={{ ...s.messageBubble, ...s.bubbleAi, ...s.typingBubble }}>
+                  <span style={s.dot} />
+                  <span style={{ ...s.dot, animationDelay: "0.2s" }} />
+                  <span style={{ ...s.dot, animationDelay: "0.4s" }} />
+                </div>
+              </div>
+            )}
+
+            <div ref={messagesEndRef} />
+          </div>
+
+          {error && (
+            <div style={s.errorBar}>
+              {error}
+              <button style={s.errorClose} onClick={() => setError(null)}>✕</button>
+            </div>
+          )}
+
+          {humanRequested && (
+            <div style={s.successBar}>
+              Connected to live support! Redirecting to chat...
+            </div>
+          )}
+
+          <form style={s.inputArea} onSubmit={handleSend}>
+            <textarea
+              ref={inputRef}
+              style={s.textarea}
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Ask me about pet care, adoption, supplies..."
+              rows={1}
+              disabled={sending}
+              maxLength={2000}
+            />
+            <button
+              type="submit"
+              style={{
+                ...s.sendBtn,
+                ...((!input.trim() || sending) ? s.sendBtnDisabled : {}),
+              }}
+              disabled={!input.trim() || sending}
+              title="Send message"
+            >
+              {sending ? "..." : "Send"}
+            </button>
+          </form>
+        </div>
+      </section>
+    </main>
+  );
+}
+
+const s = {
+  page: {
+    minHeight: "100vh",
+    background: "#fafaf8",
+    fontFamily: "inherit",
+  },
+  loading: {
+    textAlign: "center",
+    padding: "4rem",
+    color: "#888",
+    fontSize: "1rem",
+  },
+  hero: {
+    background: "linear-gradient(135deg, #ff8c00 0%, #ffa500 100%)",
+    padding: "2.5rem 1.5rem 2rem",
+    textAlign: "center",
+    color: "white",
+  },
+  heroTitle: {
+    fontSize: "clamp(1.6rem, 4vw, 2.4rem)",
+    fontWeight: 800,
+    margin: 0,
+    letterSpacing: "-0.5px",
+  },
+  heroSubtitle: {
+    fontSize: "clamp(0.9rem, 2vw, 1.1rem)",
+    marginTop: "0.5rem",
+    opacity: 0.9,
+  },
+  titleDecoration: {
+    width: 60,
+    height: 4,
+    background: "rgba(255,255,255,0.6)",
+    borderRadius: 2,
+    margin: "1rem auto 0",
+  },
+  chatSection: {
+    maxWidth: 800,
+    margin: "0 auto",
+    padding: "1.5rem 1rem 2rem",
+  },
+  chatCard: {
+    background: "white",
+    borderRadius: 16,
+    boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    height: "calc(100vh - 220px)",
+    minHeight: 450,
+  },
+  chatHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "1rem 1.25rem",
+    borderBottom: "1px solid #f0f0f0",
+    background: "#fff",
+    flexShrink: 0,
+  },
+  chatHeaderLeft: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.75rem",
+  },
+  aiAvatar: {
+    width: 44,
+    height: 44,
+    borderRadius: "50%",
+    background: "linear-gradient(135deg, #ff8c00, #ffa500)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "1.3rem",
+    flexShrink: 0,
+  },
+  chatHeaderTitle: {
+    fontWeight: 700,
+    fontSize: "1rem",
+    color: "#1a1a1a",
+  },
+  chatHeaderStatus: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.35rem",
+    fontSize: "0.8rem",
+    color: "#4CAF50",
+    marginTop: 2,
+  },
+  statusDot: {
+    display: "inline-block",
+    width: 8,
+    height: 8,
+    borderRadius: "50%",
+    background: "#4CAF50",
+  },
+  humanBtn: {
+    background: "white",
+    border: "2px solid #ff8c00",
+    color: "#ff8c00",
+    borderRadius: 8,
+    padding: "0.45rem 0.9rem",
+    fontSize: "0.82rem",
+    fontWeight: 600,
+    cursor: "pointer",
+    transition: "all 0.2s",
+    whiteSpace: "nowrap",
+  },
+  humanBtnDisabled: {
+    opacity: 0.6,
+    cursor: "not-allowed",
+  },
+  messagesArea: {
+    flex: 1,
+    overflowY: "auto",
+    padding: "1.25rem",
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.75rem",
+  },
+  emptyState: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlign: "center",
+    padding: "2rem",
+    margin: "auto",
+  },
+  emptyIcon: {
+    fontSize: "3rem",
+    marginBottom: "1rem",
+  },
+  emptyText: {
+    color: "#666",
+    fontSize: "0.95rem",
+    maxWidth: 400,
+    lineHeight: 1.6,
+  },
+  messageRow: {
+    display: "flex",
+    alignItems: "flex-end",
+    gap: "0.5rem",
+  },
+  messageRowUser: {
+    flexDirection: "row-reverse",
+  },
+  messageRowAi: {
+    flexDirection: "row",
+  },
+  aiAvatarSmall: {
+    width: 30,
+    height: 30,
+    borderRadius: "50%",
+    background: "linear-gradient(135deg, #ff8c00, #ffa500)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "0.85rem",
+    flexShrink: 0,
+  },
+  userAvatarSmall: {
+    width: 30,
+    height: 30,
+    borderRadius: "50%",
+    background: "#ff8c00",
+    color: "white",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "0.8rem",
+    fontWeight: 700,
+    flexShrink: 0,
+  },
+  messageBubble: {
+    maxWidth: "72%",
+    padding: "0.65rem 0.9rem",
+    borderRadius: 14,
+    fontSize: "0.92rem",
+    lineHeight: 1.55,
+    wordBreak: "break-word",
+  },
+  bubbleUser: {
+    background: "#ff8c00",
+    color: "white",
+    borderBottomRightRadius: 4,
+  },
+  bubbleAi: {
+    background: "#f4f4f4",
+    color: "#1a1a1a",
+    borderBottomLeftRadius: 4,
+  },
+  typingBubble: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.3rem",
+    padding: "0.75rem 1rem",
+  },
+  dot: {
+    display: "inline-block",
+    width: 7,
+    height: 7,
+    borderRadius: "50%",
+    background: "#aaa",
+    animation: "bounce 1s infinite",
+  },
+  errorBar: {
+    background: "#fff0f0",
+    borderTop: "1px solid #ffd0d0",
+    color: "#c0392b",
+    padding: "0.65rem 1.25rem",
+    fontSize: "0.875rem",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexShrink: 0,
+  },
+  errorClose: {
+    background: "none",
+    border: "none",
+    color: "#c0392b",
+    cursor: "pointer",
+    fontSize: "0.9rem",
+    padding: "0 0.25rem",
+  },
+  successBar: {
+    background: "#f0fff4",
+    borderTop: "1px solid #c3f0c3",
+    color: "#27ae60",
+    padding: "0.65rem 1.25rem",
+    fontSize: "0.875rem",
+    flexShrink: 0,
+  },
+  inputArea: {
+    display: "flex",
+    gap: "0.6rem",
+    padding: "0.85rem 1.25rem",
+    borderTop: "1px solid #f0f0f0",
+    background: "#fff",
+    flexShrink: 0,
+    alignItems: "flex-end",
+  },
+  textarea: {
+    flex: 1,
+    border: "1.5px solid #e0e0e0",
+    borderRadius: 10,
+    padding: "0.6rem 0.85rem",
+    fontSize: "0.92rem",
+    resize: "none",
+    outline: "none",
+    fontFamily: "inherit",
+    lineHeight: 1.5,
+    maxHeight: 120,
+    overflowY: "auto",
+    transition: "border-color 0.2s",
+  },
+  sendBtn: {
+    background: "#ff8c00",
+    color: "white",
+    border: "none",
+    borderRadius: 10,
+    padding: "0.6rem 1.2rem",
+    fontSize: "0.92rem",
+    fontWeight: 600,
+    cursor: "pointer",
+    flexShrink: 0,
+    transition: "background 0.2s",
+  },
+  sendBtnDisabled: {
+    background: "#ffd0a0",
+    cursor: "not-allowed",
+  },
+};
+
+export default dynamic(() => Promise.resolve(AiChatPage), { ssr: false });