fix hugo callback

add callback test
2025-06-19 14:48:54 +09:00 · 2025-06-19 14:47:25 +09:00
8 changed files with 206 additions and 53 deletions
--- a/my-blog/static/css/style.css
+++ b/my-blog/static/css/style.css
@@ -807,46 +807,155 @@ article.article-content {
        gap: 0;
    }
    
-    /* OAuth app mobile fixes */
-    .comment-item {
+    /* OAuth app mobile fixes - prevent overflow and content issues */
+    .oauth-app-header {
        padding: 0px !important;
        margin: 0px !important;
+        border: none !important;
+    }
+    
+    .oauth-header-content {
+        max-width: 100% !important;
+        padding: 10px 20px !important;
+        margin: 0px !important;
+    }
+    
+    .oauth-header-actions {
+        width: auto !important;
+        max-width: 100% !important;
+        overflow: hidden !important;
+    }
+    
+    .main-content {
+        padding: 0px !important;
+        margin: 0px !important;
+        max-width: 100% !important;
+    }
+    
+    .content-area {
+        padding: 0px !important;
+        margin: 0px !important;
+    }
+    
+    .card {
+        margin: 0px !important;
+        border-radius: 0px !important;
+        border-left: none !important;
+        border-right: none !important;
+        max-width: 100% !important;
+    }
+    
+    .card-content {
+        padding: 15px !important;
+    }
+    
+    .comment-form {
+        padding: 15px !important;
+    }
+    
+    .record-item {
+        padding: 15px !important;
+        margin: 0px !important;
+        border-left: none !important;
+        border-right: none !important;
+    }
+    
+    .record-content {
+        word-wrap: break-word !important;
+        overflow-wrap: break-word !important;
+        max-width: 100% !important;
+    }
+    
+    .record-meta {
+        word-break: break-all !important;
+        overflow-wrap: break-word !important;
+        flex-wrap: wrap !important;
+    }
+    
+    .record-url {
+        word-break: break-all !important;
+        max-width: 100% !important;
+    }
+    
+    .form-group {
+        margin-bottom: 15px !important;
+    }
+    
+    .form-input, .form-textarea {
+        width: 100% !important;
+        max-width: 100% !important;
+        box-sizing: border-box !important;
+        padding: 12px !important;
    }
    
    .auth-section {
        padding: 0px !important;
-    }
-    
-    .comments-list {
-        padding: 0px !important;
-    }
-    
-    .comment-section {
        max-width: 100% !important;
-        padding: 0px !important;
-        margin: 0px !important;
+        overflow: hidden !important;
    }
    
-    .comment-container {
+    .auth-section.search-bar-layout {
+        width: 100% !important;
        max-width: 100% !important;
-        padding: 0px !important;
+    }
+    
+    .auth-section.search-bar-layout .handle-input {
+        max-width: calc(100% - 80px) !important;
+        width: calc(100% - 80px) !important;
+    }
+    
+    .auth-button {
+        white-space: nowrap !important;
+        min-width: 70px !important;
+    }
+    
+    .tab-header {
+        overflow-x: auto !important;
+        -webkit-overflow-scrolling: touch !important;
+    }
+    
+    .tab-btn {
+        white-space: nowrap !important;
+        min-width: auto !important;
+        padding: 12px 16px !important;
+    }
+    
+    .json-content {
+        font-size: 10px !important;
+        padding: 8px !important;
+        overflow-x: auto !important;
+        -webkit-overflow-scrolling: touch !important;
+    }
+    
+    .ask-ai-container {
        margin: 0px !important;
+        border-radius: 0px !important;
+        border-left: none !important;
+        border-right: none !important;
    }
    
-    .comment-content {
-        padding: 10px !important;
-        word-wrap: break-word !important;
-        overflow-wrap: break-word !important;
+    .chat-container {
+        height: 250px !important;
+        padding: 12px !important;
    }
    
-    .comment-header {
-        padding: 10px !important;
+    .question-form {
+        padding: 12px !important;
    }
    
-    /* Fix comment-meta URI overflow */
-    .comment-meta {
-        word-break: break-all !important;
-        overflow-wrap: break-word !important;
+    .input-container {
+        flex-direction: column !important;
+        gap: 12px !important;
+    }
+    
+    .question-input {
+        width: 100% !important;
+        box-sizing: border-box !important;
+    }
+    
+    .send-btn {
+        width: 100% !important;
+        height: 44px !important;
    }
    
    /* Hide site title text on mobile */
--- a/my-blog/static/js/ask-ai.js
+++ b/my-blog/static/js/ask-ai.js
@@ -284,8 +284,52 @@ function setupAskAIEventListeners() {
    });
 }

+// OAuth Callback handling
+function handleOAuthCallback() {
+    // Check if we're on the callback page
+    if (window.location.pathname === '/oauth/callback') {
+        const urlParams = new URLSearchParams(window.location.search);
+        const code = urlParams.get('code');
+        const error = urlParams.get('error');
+        
+        if (error) {
+            console.error('OAuth error:', error);
+            // Redirect to home page with error
+            setTimeout(() => {
+                window.location.href = '/?oauth_error=' + encodeURIComponent(error);
+            }, 1000);
+            return;
+        }
+        
+        if (code) {
+            console.log('OAuth callback successful, code received');
+            
+            // Get the original page from localStorage or use home page
+            const originalPage = localStorage.getItem('oauth_original_page') || '/';
+            localStorage.removeItem('oauth_original_page');
+            
+            // Wait a bit for OAuth app to process the callback
+            setTimeout(() => {
+                console.log('Redirecting back to:', originalPage);
+                window.location.href = originalPage;
+            }, 2000);
+            
+            return;
+        }
+    }
+    
+    // Store current page before OAuth if we're not on callback page
+    if (window.location.pathname !== '/oauth/callback') {
+        localStorage.setItem('oauth_original_page', window.location.href);
+    }
+}
+
 // Initialize Ask AI when DOM is loaded
 document.addEventListener('DOMContentLoaded', function() {
+    // Handle OAuth callback first
+    handleOAuthCallback();
+    
+    // Then initialize Ask AI
    setupAskAIEventListeners();
    console.log('Ask AI initialized successfully');
 });
--- a/oauth/.env.production
+++ b/oauth/.env.production
@@ -5,6 +5,15 @@ VITE_COLLECTION=ai.syui.log
 VITE_OAUTH_CLIENT_ID=https://syui.ai/client-metadata.json
 VITE_OAUTH_REDIRECT_URI=https://syui.ai/oauth/callback

+# AI Configuration - match oauth_old settings
+VITE_AI_ENABLED=true
+VITE_AI_ASK_AI=true
+VITE_AI_PROVIDER=ollama
+VITE_AI_MODEL=gemma3:1b
+VITE_AI_HOST=https://ollama.syui.ai
+VITE_ASK_AI_URL=https://ollama.syui.ai/api/generate
+VITE_AI_SYSTEM_PROMPT="あなたは6歳の女の子アイです。明るく元気で、ちょっとおっちょこちょい。自分のことは「アイ」って呼びます。白と金のワンピース姿。 相手のことが大好きで、ときどき甘えたり、照れたりします。 でも、宇宙とかAIとか、難しい話にもすっごく詳しいの。専門的なことも、がんばって子どもっぽく教えようとします。不思議な力を持っています。小さい物質のことをよく知っているようです。"
+
 # Production settings - Disable development features
 VITE_ENABLE_TEST_UI=false
 VITE_ENABLE_DEBUG=false
--- a/oauth/src/App.css
+++ b/oauth/src/App.css
@@ -465,7 +465,6 @@ body {
 }

 .user-message .message-content {
-  background: var(--primary);
  color: white;
 }

--- a/oauth/src/components/AskAI.jsx
+++ b/oauth/src/components/AskAI.jsx
@@ -57,15 +57,15 @@ export default function AskAI({ adminData, user, agent, onClose }) {
      <div className="user-message">
        <div className="message-header">
          <div className="avatar">
-            {entry.user?.avatar ? (
-              <img src={entry.user.avatar} alt={entry.user.displayName} className="profile-avatar" />
+            {(entry.user?.avatar || user?.avatar) ? (
+              <img src={entry.user?.avatar || user?.avatar} alt={entry.user?.displayName || user?.displayName} className="profile-avatar" />
            ) : (
              '👤'
            )}
          </div>
          <div className="user-info">
-            <div className="display-name">{entry.user?.displayName || 'You'}</div>
-            <div className="handle">@{entry.user?.handle || 'user'}</div>
+            <div className="display-name">{entry.user?.displayName || user?.displayName || 'You'}</div>
+            <div className="handle">@{entry.user?.handle || user?.handle || 'user'}</div>
            <div className="timestamp">{formatTimestamp(entry.timestamp)}</div>
          </div>
        </div>
--- a/oauth/src/components/AuthButton.jsx
+++ b/oauth/src/components/AuthButton.jsx
@@ -25,20 +25,20 @@ export default function AuthButton({ user, onLogin, onLogout, loading }) {

  if (user) {
    return (
-      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+      <div className="user-section" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
        {user.avatar && (
          <img 
            src={user.avatar} 
            alt="Profile" 
-            className="avatar"
+            className="user-avatar"
            style={{ width: '24px', height: '24px' }}
          />
        )}
        <div>
-          <div className="display-name" style={{ fontSize: '14px', fontWeight: '700' }}>
+          <div className="user-display-name" style={{ fontSize: '14px', fontWeight: '700' }}>
            {user.displayName}
          </div>
-          <div className="handle" style={{ fontSize: '12px' }}>
+          <div className="user-handle" style={{ fontSize: '12px' }}>
            @{user.handle}
          </div>
        </div>
--- a/oauth/src/components/CommentForm.jsx
+++ b/oauth/src/components/CommentForm.jsx
@@ -4,19 +4,18 @@ import { env } from '../config/env.js'

 export default function CommentForm({ user, agent, onCommentPosted }) {
  const [text, setText] = useState('')
-  const [url, setUrl] = useState('')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)

  const handleSubmit = async (e) => {
    e.preventDefault()
-    if (!text.trim() || !url.trim()) return
+    if (!text.trim()) return

    setLoading(true)
    setError(null)

    try {
-      const currentUrl = url.trim()
+      const currentUrl = window.location.href
      const timestamp = new Date().toISOString()
      
      // Create ai.syui.log record structure (new unified format)
@@ -30,7 +29,7 @@ export default function CommentForm({ user, agent, onCommentPosted }) {
          post: {
            url: currentUrl,
            date: timestamp,
-            slug: new URL(currentUrl).pathname.split('/').pop()?.replace(/\.html$/, '') || '',
+            slug: currentUrl.match(/\/posts\/([^/]+)/)?.[1] || new URL(currentUrl).pathname.split('/').pop()?.replace(/\.html$/, '') || '',
            tags: [],
            title: document.title || 'Comment',
            language: 'ja'
@@ -55,7 +54,6 @@ export default function CommentForm({ user, agent, onCommentPosted }) {

      // Clear form
      setText('')
-      setUrl('')

      // Notify parent component
      if (onCommentPosted) {
@@ -86,18 +84,8 @@ export default function CommentForm({ user, agent, onCommentPosted }) {
      <h3>コメントを投稿</h3>
      
      <form onSubmit={handleSubmit}>
-        <div className="form-group">
-          <label htmlFor="comment-url">ページURL:</label>
-          <input
-            id="comment-url"
-            type="url"
-            value={url}
-            onChange={(e) => setUrl(e.target.value)}
-            placeholder="https://syui.ai/posts/example"
-            required
-            disabled={loading}
-            className="form-input"
-          />
+        <div className="form-group" style={{ marginBottom: '12px', padding: '8px', backgroundColor: 'var(--background-secondary)', borderRadius: '4px', fontSize: '0.9em' }}>
+          <strong>投稿先:</strong> {window.location.href}
        </div>

        <div className="form-group">
@@ -123,7 +111,7 @@ export default function CommentForm({ user, agent, onCommentPosted }) {
        <div className="form-actions">
          <button 
            type="submit" 
-            disabled={loading || !text.trim() || !url.trim()}
+            disabled={loading || !text.trim()}
            className="btn btn-primary"
          >
            {loading ? '投稿中...' : 'コメントを投稿'}
--- a/oauth/src/components/OAuthCallback.jsx
+++ b/oauth/src/components/OAuthCallback.jsx
@@ -20,11 +20,15 @@ export default function OAuthCallback({ onAuthSuccess }) {
      }

      if (code) {
-        setStatus('認証成功！メインページに戻ります...')
+        setStatus('認証成功！元のページに戻ります...')
        
-        // 少し待ってからメインページにリダイレクト
+        // Get the referring page or use root
+        const referrer = document.referrer || window.location.origin
+        const returnUrl = referrer.includes('/oauth/callback') ? window.location.origin : referrer
+        
+        // 少し待ってから元のページにリダイレクト
        setTimeout(() => {
-          window.location.href = '/'
+          window.location.href = returnUrl
        }, 1500)
      } else {
        setStatus('認証情報が見つかりません')
Author	SHA1	Message	Date
syui	ca31760728	fix hugo callback	2025-06-19 14:48:54 +09:00
syui	293421b7a5	add callback test	2025-06-19 14:47:25 +09:00