From c82e159970e4b29d153a2689e8da54459e33abee Mon Sep 17 00:00:00 2001
From: syui <syui@syui.ai>
Date: Wed, 25 Jun 2025 21:35:03 +0900
Subject: [PATCH] fix test ask-AI oauth profile

---
 my-blog/static/js/ask-ai.js                | 44 ++++++++++++++++++++--
 oauth/src/components/ChatRecordList.jsx    |  4 --
 oauth/src/components/ProfileRecordList.jsx |  2 -
 oauth/src/components/RecordTabs.jsx        | 12 +++---
 4 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/my-blog/static/js/ask-ai.js b/my-blog/static/js/ask-ai.js
index 22ecefa..f694b51 100644
--- a/my-blog/static/js/ask-ai.js
+++ b/my-blog/static/js/ask-ai.js
@@ -17,9 +17,16 @@ function toggleAskAI() {
 }
 
 function checkAuthenticationStatus() {
-    const userSections = document.querySelectorAll('.user-section');
-    const isAuthenticated = userSections.length > 0;
-    
+    // Wait a bit for OAuth app to load if needed
+    setTimeout(() => {
+        const userSections = document.querySelectorAll('.user-section');
+        const isAuthenticated = userSections.length > 0;
+        
+        handleAuthenticationStatus(isAuthenticated);
+    }, 100);
+}
+
+function handleAuthenticationStatus(isAuthenticated) {
     if (isAuthenticated) {
         // User is authenticated - show Ask AI UI
         document.getElementById('authCheck').style.display = 'none';
@@ -377,6 +384,37 @@ function setupAskAIEventListeners() {
 document.addEventListener('DOMContentLoaded', function() {
     setupAskAIEventListeners();
     console.log('Ask AI initialized successfully');
+    
+    // Also listen for OAuth app load completion
+    const observer = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+            if (mutation.type === 'childList') {
+                // Check if user-section was added/removed
+                const userSectionAdded = Array.from(mutation.addedNodes).some(node => 
+                    node.nodeType === Node.ELEMENT_NODE && 
+                    (node.classList?.contains('user-section') || node.querySelector?.('.user-section'))
+                );
+                const userSectionRemoved = Array.from(mutation.removedNodes).some(node => 
+                    node.nodeType === Node.ELEMENT_NODE && 
+                    (node.classList?.contains('user-section') || node.querySelector?.('.user-section'))
+                );
+                
+                if (userSectionAdded || userSectionRemoved) {
+                    console.log('User section status changed');
+                    // Update Ask AI panel if it's visible
+                    const panel = document.getElementById('askAiPanel');
+                    if (panel && panel.style.display !== 'none') {
+                        checkAuthenticationStatus();
+                    }
+                }
+            }
+        });
+    });
+    
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true
+    });
 });
 
 // Global functions for onclick handlers
diff --git a/oauth/src/components/ChatRecordList.jsx b/oauth/src/components/ChatRecordList.jsx
index c1783c9..72df94f 100644
--- a/oauth/src/components/ChatRecordList.jsx
+++ b/oauth/src/components/ChatRecordList.jsx
@@ -69,8 +69,6 @@ export default function ChatRecordList({ chatPairs, apiConfig, user = null, agen
                 )}
                 <div className="user-info">
                   <div className="display-name">{chatPair.question.value.author?.displayName || chatPair.question.value.author?.handle}</div>
-                  <div className="handle">@{chatPair.question.value.author?.handle}</div>
-                  <div className="timestamp">{new Date(chatPair.question.value.createdAt).toLocaleString()}</div>
                 </div>
                 {canDelete(chatPair) && (
                   <div className="record-actions">
@@ -105,8 +103,6 @@ export default function ChatRecordList({ chatPairs, apiConfig, user = null, agen
                 )}
                 <div className="user-info">
                   <div className="display-name">{chatPair.answer.value.author?.displayName || chatPair.answer.value.author?.handle}</div>
-                  <div className="handle">@{chatPair.answer.value.author?.handle}</div>
-                  <div className="timestamp">{new Date(chatPair.answer.value.createdAt).toLocaleString()}</div>
                 </div>
               </div>
               <div className="message-content">{chatPair.answer.value.text}</div>
diff --git a/oauth/src/components/ProfileRecordList.jsx b/oauth/src/components/ProfileRecordList.jsx
index 4ccfdc4..5a02128 100644
--- a/oauth/src/components/ProfileRecordList.jsx
+++ b/oauth/src/components/ProfileRecordList.jsx
@@ -58,8 +58,6 @@ export default function ProfileRecordList({ profileRecords, apiConfig, user = nu
                   <span className="admin-badge"> Admin</span>
                 )}
               </div>
-              <div className="handle">@{profile.value.author?.handle}</div>
-              <div className="timestamp">{new Date(profile.value.createdAt).toLocaleString()}</div>
             </div>
             {canDelete(profile) && (
               <div className="record-actions">
diff --git a/oauth/src/components/RecordTabs.jsx b/oauth/src/components/RecordTabs.jsx
index 9bf8d4a..e257b84 100644
--- a/oauth/src/components/RecordTabs.jsx
+++ b/oauth/src/components/RecordTabs.jsx
@@ -64,18 +64,18 @@ export default function RecordTabs({ langRecords, commentRecords, userComments,
         >
           chat ({userChatRecords?.length || 0})
         </button>
-        <button 
-          className={`tab-btn ${activeTab === 'users' ? 'active' : ''}`}
-          onClick={() => setActiveTab('users')}
-        >
-          comment ({filteredUserComments.length})
-        </button>
         <button 
           className={`tab-btn ${activeTab === 'comment' ? 'active' : ''}`}
           onClick={() => setActiveTab('comment')}
         >
           feedback ({filteredCommentRecords.length})
         </button>
+        <button 
+          className={`tab-btn ${activeTab === 'users' ? 'active' : ''}`}
+          onClick={() => setActiveTab('users')}
+        >
+          comment ({filteredUserComments.length})
+        </button>
         <button 
           className={`tab-btn ${activeTab === 'lang' ? 'active' : ''}`}
           onClick={() => setActiveTab('lang')}