fix contact layout and chat ui

2026-04-15 23:12:23 -06:00
parent 8a9e4e75b5
commit e193e29499
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,34 +501,31 @@ function AiChatPage() {
                  </div>
                </button>
              ))}
-              {conversations.some(c => c.status === "CLOSED") && (
-                <>
-                  <button
-                    style={s.closedSectionToggle}
-                    onClick={() => setClosedExpanded(p => !p)}
-                  >
-                    <span>Closed ({conversations.filter(c => c.status === "CLOSED").length})</span>
-                    <span>{closedExpanded ? "▲" : "▼"}</span>
-                  </button>
-                  {closedExpanded && conversations.filter(c => c.status === "CLOSED").map((conv) => (
-                    <button
-                      key={conv.id}
-                      style={{ ...s.convItem, ...s.convItemClosed, ...(conv.id === conversation?.id ? s.convItemActive : {}) }}
-                      onClick={() => switchConversation(conv.id)}
-                    >
-                      <div style={s.convItemTop}>
-                        <span style={s.convItemSubject}>{conv.subject || `Conversation #${conv.id}`}</span>
-                        <span style={{ ...s.convStatusBadge, ...s.convStatusClosed }}>CLOSED</span>
-                      </div>
-                      <div style={s.convItemBottom}>
-                        <span style={s.convItemMode}>{conv.mode === "HUMAN" ? "👤 Live" : "🤖 AI"}</span>
-                        <span style={s.convItemDate}>{conv.createdAt ? new Date(conv.createdAt).toLocaleDateString() : ""}</span>
-                      </div>
-                    </button>
-                  ))}
-                </>
-              )}
            </div>
+            {conversations.some(c => c.status === "CLOSED") && (
+              <>
+                <button style={s.closedSectionToggle} onClick={() => setClosedExpanded(p => !p)}>
+                  <span>Closed ({conversations.filter(c => c.status === "CLOSED").length})</span>
+                  <span>{closedExpanded ? "▲" : "▼"}</span>
+                </button>
+                {closedExpanded && conversations.filter(c => c.status === "CLOSED").map((conv) => (
+                  <button
+                    key={conv.id}
+                    style={{ ...s.convItem, ...s.convItemClosed, ...(conv.id === conversation?.id ? s.convItemActive : {}) }}
+                    onClick={() => switchConversation(conv.id)}
+                  >
+                    <div style={s.convItemTop}>
+                      <span style={s.convItemSubject}>{conv.subject || `Conversation #${conv.id}`}</span>
+                      <span style={{ ...s.convStatusBadge, ...s.convStatusClosed }}>CLOSED</span>
+                    </div>
+                    <div style={s.convItemBottom}>
+                      <span style={s.convItemMode}>{conv.mode === "HUMAN" ? "👤 Live" : "🤖 AI"}</span>
+                      <span style={s.convItemDate}>{conv.createdAt ? new Date(conv.createdAt).toLocaleDateString() : ""}</span>
+                    </div>
+                  </button>
+                ))}
+              </>
+            )}
            <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,10 +131,16 @@ 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);
      }
-    } 
-    
+    }
+
    catch {
      setError("Failed to load messages.");
    }
@@ -495,34 +504,31 @@ function ChatPage() {
                  </div>
                </button>
              ))}
-              {conversations.some(c => c.status === "CLOSED") && (
-                <>
-                  <button
-                    style={s.closedSectionToggle}
-                    onClick={() => setClosedExpanded(p => !p)}
-                  >
-                    <span>Closed ({conversations.filter(c => c.status === "CLOSED").length})</span>
-                    <span>{closedExpanded ? "▲" : "▼"}</span>
-                  </button>
-                  {closedExpanded && conversations.filter(c => c.status === "CLOSED").map((conv) => (
-                    <button
-                      key={conv.id}
-                      style={{ ...s.convItem, ...s.convItemClosed, ...(conv.id === conversation?.id ? s.convItemActive : {}) }}
-                      onClick={() => switchConversation(conv.id)}
-                    >
-                      <div style={s.convItemTop}>
-                        <span style={s.convItemSubject}>{conv.subject || `Conversation #${conv.id}`}</span>
-                        <span style={{ ...s.convStatusBadge, ...s.convStatusClosed }}>CLOSED</span>
-                      </div>
-                      <div style={s.convItemBottom}>
-                        <span style={s.convItemMode}>{conv.mode === "HUMAN" ? "👤 Live" : "🤖 AI"}</span>
-                        <span style={s.convItemDate}>{conv.createdAt ? new Date(conv.createdAt).toLocaleDateString() : ""}</span>
-                      </div>
-                    </button>
-                  ))}
-                </>
-              )}
            </div>
+            {conversations.some(c => c.status === "CLOSED") && (
+              <>
+                <button style={s.closedSectionToggle} onClick={() => setClosedExpanded(p => !p)}>
+                  <span>Closed ({conversations.filter(c => c.status === "CLOSED").length})</span>
+                  <span>{closedExpanded ? "▲" : "▼"}</span>
+                </button>
+                {closedExpanded && conversations.filter(c => c.status === "CLOSED").map((conv) => (
+                  <button
+                    key={conv.id}
+                    style={{ ...s.convItem, ...s.convItemClosed, ...(conv.id === conversation?.id ? s.convItemActive : {}) }}
+                    onClick={() => switchConversation(conv.id)}
+                  >
+                    <div style={s.convItemTop}>
+                      <span style={s.convItemSubject}>{conv.subject || `Conversation #${conv.id}`}</span>
+                      <span style={{ ...s.convStatusBadge, ...s.convStatusClosed }}>CLOSED</span>
+                    </div>
+                    <div style={s.convItemBottom}>
+                      <span style={s.convItemMode}>{conv.mode === "HUMAN" ? "👤 Live" : "🤖 AI"}</span>
+                      <span style={s.convItemDate}>{conv.createdAt ? new Date(conv.createdAt).toLocaleDateString() : ""}</span>
+                    </div>
+                  </button>
+                ))}
+              </>
+            )}
            <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,67 +61,63 @@ 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>
-            {sendSuccess ? (
-              <p className="contact-success">Your message has been sent. We&apos;ll be in touch soon.</p>
-            ) : (
-              <form className="auth-form" onSubmit={handleSend}>
-                <label className="auth-label">
-                  Subject
-                  <input
-                    className="auth-input"
-                    type="text"
-                    value={subject}
-                    onChange={(e) => setSubject(e.target.value)}
-                    required
-                    maxLength={150}
-                  />
-                </label>
-                <label className="auth-label">
-                  Message
-                  <textarea
-                    className="auth-input"
-                    style={{ resize: "vertical" }}
-                    value={body}
-                    onChange={(e) => setBody(e.target.value)}
-                    required
-                    maxLength={2000}
-                    rows={6}
-                  />
-                </label>
-                {sendError && <p className="contact-error">{sendError}</p>}
-                <button className="auth-submit-btn" type="submit" disabled={sending}>
-                  {sending ? "Sending…" : "Send Message"}
-                </button>
-              </form>
-            )}
-          </div>
-        )}
+          {token && (
+            <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>
+              ) : (
+                <form className="auth-form" onSubmit={handleSend}>
+                  <label className="auth-label">
+                    Subject
+                    <input
+                      className="auth-input"
+                      type="text"
+                      value={subject}
+                      onChange={(e) => setSubject(e.target.value)}
+                      required
+                      maxLength={150}
+                    />
+                  </label>
+                  <label className="auth-label">
+                    Message
+                    <textarea
+                      className="auth-input"
+                      style={{ resize: "vertical" }}
+                      value={body}
+                      onChange={(e) => setBody(e.target.value)}
+                      required
+                      maxLength={2000}
+                      rows={5}
+                    />
+                  </label>
+                  {sendError && <p className="contact-error">{sendError}</p>}
+                  <button className="auth-submit-btn" type="submit" disabled={sending}>
+                    {sending ? "Sending…" : "Send Message"}
+                  </button>
+                </form>
+              )}
+            </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; }