fix contact layout and chat ui

2026-04-15 23:12:23 -06:00
parent 73c4bc6cc7
commit 95b45c2e54
4 changed files with 119 additions and 106 deletions
--- a/web/app/ai-chat/page.js
+++ b/web/app/ai-chat/page.js
@@ -92,6 +92,7 @@ function AiChatPage() {
  const lastMessageIdRef = useRef(null);
  const fileInputRef = useRef(null);
  const lastScrolledIdRef = useRef(null);
+  const initialLoadDoneRef = useRef(false);

  useEffect(() => {
    if (!authLoading && !user) {
@@ -103,6 +104,7 @@ function AiChatPage() {
    if (messages.length === 0) return;
    const lastMsg = messages[messages.length - 1];
    if (lastMsg.id === lastScrolledIdRef.current) return;
+    if (!initialLoadDoneRef.current) return;
    lastScrolledIdRef.current = lastMsg.id;
    const area = messagesAreaRef.current;
    if (!area) return;
@@ -114,6 +116,7 @@ function AiChatPage() {

  const fetchMessages = useCallback(async (convId) => {
    if (!token || !convId) return;
+    initialLoadDoneRef.current = false;
    try {
      const res = await fetch(`${API_BASE}/api/v1/chat/conversations/${convId}/messages`, {
        headers: { Authorization: `Bearer ${token}` },
@@ -122,10 +125,17 @@ function AiChatPage() {
      const data = await res.json();
      if (Array.isArray(data)) {
        setMessages(data);
-        if (data.length > 0) lastMessageIdRef.current = data[data.length - 1].id;
+        if (data.length > 0) {
+          lastMessageIdRef.current = data[data.length - 1].id;
+          lastScrolledIdRef.current = data[data.length - 1].id;
+        }
+        setTimeout(() => {
+          const area = messagesAreaRef.current;
+          if (area) area.scrollTop = area.scrollHeight;
+          initialLoadDoneRef.current = true;
+        }, 50);
      }
    } catch {
-      // silent
    }
  }, [token]);

@@ -491,12 +501,10 @@ function AiChatPage() {
                  </div>
                </button>
              ))}
+            </div>
            {conversations.some(c => c.status === "CLOSED") && (
              <>
-                  <button
-                    style={s.closedSectionToggle}
-                    onClick={() => setClosedExpanded(p => !p)}
-                  >
+                <button style={s.closedSectionToggle} onClick={() => setClosedExpanded(p => !p)}>
                  <span>Closed ({conversations.filter(c => c.status === "CLOSED").length})</span>
                  <span>{closedExpanded ? "▲" : "▼"}</span>
                </button>
@@ -518,7 +526,6 @@ function AiChatPage() {
                ))}
              </>
            )}
-            </div>
            <button style={s.newConvSidebarBtn} onClick={handleNewConversation}>
              + New Conversation
            </button>
--- a/web/app/chat/page.js
+++ b/web/app/chat/page.js
@@ -92,6 +92,7 @@ function ChatPage() {
  const lastMessageIdRef = useRef(null);
  const fileInputRef = useRef(null);
  const lastScrolledIdRef = useRef(null);
+  const initialLoadDoneRef = useRef(false);

  useEffect(() => {
    if (!authLoading && !user) {
@@ -103,6 +104,7 @@ function ChatPage() {
    if (messages.length === 0) return;
    const lastMsg = messages[messages.length - 1];
    if (lastMsg.id === lastScrolledIdRef.current) return;
+    if (!initialLoadDoneRef.current) return;
    lastScrolledIdRef.current = lastMsg.id;
    const area = messagesAreaRef.current;
    if (!area) return;
@@ -114,6 +116,7 @@ function ChatPage() {

  const fetchMessages = useCallback(async (convId) => {
    if (!token || !convId) return;
+    initialLoadDoneRef.current = false;
    try {
      const res = await fetch(`${API_BASE}/api/v1/chat/conversations/${convId}/messages`, {
        headers: { Authorization: `Bearer ${token}` },
@@ -128,7 +131,13 @@ function ChatPage() {

        if (data.length > 0) {
          lastMessageIdRef.current = data[data.length - 1].id;
+          lastScrolledIdRef.current = data[data.length - 1].id;
        }
+        setTimeout(() => {
+          const area = messagesAreaRef.current;
+          if (area) area.scrollTop = area.scrollHeight;
+          initialLoadDoneRef.current = true;
+        }, 50);
      }
    }

@@ -495,12 +504,10 @@ function ChatPage() {
                  </div>
                </button>
              ))}
+            </div>
            {conversations.some(c => c.status === "CLOSED") && (
              <>
-                  <button
-                    style={s.closedSectionToggle}
-                    onClick={() => setClosedExpanded(p => !p)}
-                  >
+                <button style={s.closedSectionToggle} onClick={() => setClosedExpanded(p => !p)}>
                  <span>Closed ({conversations.filter(c => c.status === "CLOSED").length})</span>
                  <span>{closedExpanded ? "▲" : "▼"}</span>
                </button>
@@ -522,7 +529,6 @@ function ChatPage() {
                ))}
              </>
            )}
-            </div>
            <button style={s.newConvSidebarBtn} onClick={() => handleNewConversation()}>
              + New Conversation
            </button>
--- a/web/app/contact/page.js
+++ b/web/app/contact/page.js
@@ -50,7 +50,7 @@ export default function ContactPage() {
      setSendSuccess(true);
      setSubject("");
      setBody("");
-    } catch (err) {
+    } catch {
      setSendError("Failed to send message. Please try again.");
    } finally {
      setSending(false);
@@ -61,21 +61,20 @@ export default function ContactPage() {
    <main className="info-page">
      <section className="info-hero">
        <h1 className="info-title">Contact Us</h1>
-        <p className="info-subtitle">Reach the team, find a location, or connect with store personnel.</p>
+        <p className="info-subtitle">Reach the team, find a location, or send us a message.</p>
        <div className="title-decoration"></div>
      </section>

-      <section className="info-content">
+      <section className="contact-layout">
        <div className="info-card">
-          <h2>General Contact</h2>
+          <h2>Get in Touch</h2>
          <p>Email: hello@leonspetstore.com.au</p>
          <p>Phone: (03) 9000 0000</p>
          <p>Hours: Mon–Sat, 9:00 AM – 6:00 PM</p>
-        </div>

          {token && (
-          <div className="info-card">
-            <h2>Send Us a Message</h2>
+            <div className="contact-form-section">
+              <h3>Send Us a Message</h3>
              {sendSuccess ? (
                <p className="contact-success">Your message has been sent. We&apos;ll be in touch soon.</p>
              ) : (
@@ -100,7 +99,7 @@ export default function ContactPage() {
                      onChange={(e) => setBody(e.target.value)}
                      required
                      maxLength={2000}
-                    rows={6}
+                      rows={5}
                    />
                  </label>
                  {sendError && <p className="contact-error">{sendError}</p>}
@@ -111,17 +110,14 @@ export default function ContactPage() {
              )}
            </div>
          )}
+        </div>

        <div className="info-card">
          <h2>Store Locations</h2>

          {loading && <p>Loading locations...</p>}
-
          {error && <p style={{ color: "red" }}>Failed to load locations: {error}</p>}
-
-          {!loading && !error && locations.length === 0 && (
-            <p>No store locations found.</p>
-          )}
+          {!loading && !error && locations.length === 0 && <p>No store locations found.</p>}

          {!loading && !error && locations.length > 0 && (
            <div className="info-card-grid">
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -3132,6 +3132,10 @@ img, video, iframe {
  max-width: 100%;
 }

+.contact-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem; max-width: 1200px; margin: 0 auto; padding: 0 2rem 3rem; }
+@media (max-width: 768px) { .contact-layout { grid-template-columns: 1fr; } }
+.contact-form-section { margin-top: 1.5rem; border-top: 1px solid #f0f0f0; padding-top: 1.5rem; }
+.contact-form-section h3 { margin: 0 0 1rem; font-size: 1rem; color: #333; }
 .contact-form { display: flex; flex-direction: column; gap: 1rem; }
 .contact-label { display: flex; flex-direction: column; gap: 0.4rem; font-weight: 500; color: #333; font-size: 0.95rem; }
 .contact-input, .contact-textarea { border: 1px solid #ddd; border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.95rem; font-family: inherit; resize: vertical; }