update layout

2025-06-16 01:43:51 +09:00
parent a76933c23b
commit 3e5d799afb
7 changed files with 175 additions and 88 deletions
--- a/oauth/src/App.tsx
+++ b/oauth/src/App.tsx
@@ -431,17 +431,24 @@ function App() {
              if (user.did && user.did.includes('-placeholder')) {
                // Resolving placeholder DID
                try {
-                  const profileResponse = await fetch(`${appConfig.bskyPublicApi}/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(user.handle)}`);
-                  if (profileResponse.ok) {
-                    const profileData = await profileResponse.json();
-                    if (profileData.did) {
-                      // Resolved DID
-                      return {
-                        ...user,
-                        did: profileData.did
-                      };
+                  let profileData;
+                  if (agent) {
+                    const profileResponse = await agent.getProfile({ actor: user.handle });
+                    profileData = profileResponse.data;
+                  } else {
+                    // フォールバック：public API
+                    const profileResponse = await fetch(`${appConfig.bskyPublicApi}/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(user.handle)}`);
+                    if (profileResponse.ok) {
+                      profileData = await profileResponse.json();
                    }
                  }
+                  if (profileData.did) {
+                    // Resolved DID
+                    return {
+                      ...user,
+                      did: profileData.did
+                    };
+                  }
                } catch (err) {
                  // Failed to resolve DID
                }
@@ -580,23 +587,29 @@ function App() {
        sortedComments.map(async (record) => {
          if (!record.value.author?.avatar && record.value.author?.handle) {
            try {
-              // Public API でプロフィール取得
-              const profileResponse = await fetch(`${appConfig.bskyPublicApi}/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(record.value.author.handle)}`);
-              
-              if (profileResponse.ok) {
-                const profileData = await profileResponse.json();
-                return {
-                  ...record,
-                  value: {
-                    ...record.value,
-                    author: {
-                      ...record.value.author,
-                      avatar: profileData.avatar,
-                      displayName: profileData.displayName || record.value.author.handle,
-                    }
-                  }
-                };
+              let profileData;
+              if (agent) {
+                // 認証されたAPIでプロフィール取得
+                const profileResponse = await agent.getProfile({ actor: record.value.author.handle });
+                profileData = profileResponse.data;
+              } else {
+                // フォールバック：public API
+                const profileResponse = await fetch(`${appConfig.bskyPublicApi}/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(record.value.author.handle)}`);
+                if (profileResponse.ok) {
+                  profileData = await profileResponse.json();
+                }
              }
+              return {
+                ...record,
+                value: {
+                  ...record.value,
+                  author: {
+                    ...record.value.author,
+                    avatar: profileData.avatar,
+                    displayName: profileData.displayName || record.value.author.handle,
+                  }
+                }
+              };
            } catch (err) {
              // Ignore enhancement errors
            }
@@ -796,14 +809,21 @@ function App() {
        let resolvedDid = `did:plc:${handle.replace(/\./g, '-')}-placeholder`; // フォールバック
        
        try {
-          // Public APIでプロフィールを取得してDIDを解決
-          const profileResponse = await fetch(`${appConfig.bskyPublicApi}/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(handle)}`);
-          if (profileResponse.ok) {
-            const profileData = await profileResponse.json();
-            if (profileData.did) {
-              resolvedDid = profileData.did;
+          let profileData;
+          if (agent) {
+            // 認証されたAPIでプロフィールを取得してDIDを解決
+            const profileResponse = await agent.getProfile({ actor: handle });
+            profileData = profileResponse.data;
+          } else {
+            // フォールバック：public API
+            const profileResponse = await fetch(`${appConfig.bskyPublicApi}/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(handle)}`);
+            if (profileResponse.ok) {
+              profileData = await profileResponse.json();
            }
          }
+          if (profileData.did) {
+            resolvedDid = profileData.did;
+          }
        } catch (err) {
        }
        
@@ -1079,7 +1099,38 @@ function App() {
                />
              </div>
            </div>
-          ) : (
+          ) : null}
+
+          {/* Tab Navigation */}
+          <div className="tab-navigation">
+            <button 
+              className={`tab-button ${activeTab === 'comments' ? 'active' : ''}`}
+              onClick={() => setActiveTab('comments')}
+            >
+              comment ({comments.filter(shouldShowComment).length})
+            </button>
+            <button 
+              className={`tab-button ${activeTab === 'ai-chat' ? 'active' : ''}`}
+              onClick={() => setActiveTab('ai-chat')}
+            >
+              chat ({aiChatHistory.length})
+            </button>
+            <button 
+              className={`tab-button ${activeTab === 'lang-en' ? 'active' : ''}`}
+              onClick={() => setActiveTab('lang-en')}
+            >
+              lang:en ({langEnRecords.length})
+            </button>
+            <button 
+              className={`tab-button ${activeTab === 'ai-comment' ? 'active' : ''}`}
+              onClick={() => setActiveTab('ai-comment')}
+            >
+              feedback ({aiCommentRecords.length})
+            </button>
+          </div>
+
+          {/* User Section - moved below tab navigation */}
+          {user && (
            <div className="user-section">
              <div className="user-info">
                <div className="user-profile">
@@ -1187,38 +1238,9 @@ function App() {
                  </div>
                </div>
              )}
-
            </div>
          )}

-          {/* Tab Navigation */}
-          <div className="tab-navigation">
-            <button 
-              className={`tab-button ${activeTab === 'comments' ? 'active' : ''}`}
-              onClick={() => setActiveTab('comments')}
-            >
-              Comments ({comments.filter(shouldShowComment).length})
-            </button>
-            <button 
-              className={`tab-button ${activeTab === 'ai-chat' ? 'active' : ''}`}
-              onClick={() => setActiveTab('ai-chat')}
-            >
-              AI Chat ({aiChatHistory.length})
-            </button>
-            <button 
-              className={`tab-button ${activeTab === 'lang-en' ? 'active' : ''}`}
-              onClick={() => setActiveTab('lang-en')}
-            >
-              AI Lang:en ({langEnRecords.length})
-            </button>
-            <button 
-              className={`tab-button ${activeTab === 'ai-comment' ? 'active' : ''}`}
-              onClick={() => setActiveTab('ai-comment')}
-            >
-              AI Comment ({aiCommentRecords.length})
-            </button>
-          </div>
-
          {/* Comments List */}
          {activeTab === 'comments' && (
            <div className="comments-list">
@@ -1534,13 +1556,91 @@ function App() {
            </div>
          )}

-          {/* Show authentication status on non-post pages */}
-          {user && !appConfig.rkey && (
-            <div className="auth-status">
-              <p>✅ Authenticated as @{user.handle}</p>
-              <p><small>Visit a post page to comment</small></p>
-            </div>
-          )}
+              {/* Admin Section - User Management */}
+              {isAdmin(user) && (
+                <div className="admin-section">
+                  <h3>管理者機能 - ユーザーリスト管理</h3>
+                  
+                  {/* User List Form */}
+                  <div className="user-list-form">
+                    <textarea
+                      id="user-list-input"
+                      name="userList"
+                      value={userListInput}
+                      onChange={(e) => setUserListInput(e.target.value)}
+                      placeholder="ユーザーハンドルをカンマ区切りで入力&#10;例: syui.ai, yui.syui.ai, user.bsky.social"
+                      rows={3}
+                      disabled={isPostingUserList}
+                    />
+                    <div className="form-actions">
+                      <span className="admin-hint">カンマ区切りでハンドルを入力してください</span>
+                      <button 
+                        onClick={handlePostUserList}
+                        disabled={isPostingUserList || !userListInput.trim()}
+                        className="post-button"
+                      >
+                        {isPostingUserList ? 'Posting...' : 'Post User List'}
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* User List Records */}
+                  <div className="user-list-records">
+                    <h4>投稿されたユーザーリスト</h4>
+                    {userListRecords.length === 0 ? (
+                      <p className="no-user-lists">ユーザーリストがまだ投稿されていません</p>
+                    ) : (
+                      userListRecords.map((record, index) => (
+                        <div key={index} className="user-list-item">
+                          <div className="user-list-header">
+                            <span className="user-list-date">
+                              {new Date(record.value.createdAt).toLocaleString()}
+                            </span>
+                            <div className="user-list-actions">
+                              <button 
+                                onClick={() => toggleJsonDisplay(record.uri)}
+                                className="json-button"
+                                title="Show/Hide JSON"
+                              >
+                                {showJsonFor === record.uri ? 'Hide' : 'JSON'}
+                              </button>
+                            </div>
+                          </div>
+                          
+                          <div className="user-list-content">
+                            {record.value.users && record.value.users.length > 0 && (
+                              <div className="user-handles">
+                                {record.value.users.map((user: any, userIndex: number) => (
+                                  <span key={userIndex} className="user-handle-tag">
+                                    @{user.handle}
+                                    {user.pds && <span className="pds-info"> ({user.pds})</span>}
+                                  </span>
+                                ))}
+                              </div>
+                            )}
+                            
+                            <div className="user-list-meta">
+                              <small>URI: {record.uri}</small>
+                              <br />
+                              <small>Updated by: {record.value.updatedBy?.handle || 'unknown'}</small>
+                            </div>
+                            
+                            {/* JSON Display */}
+                            {showJsonFor === record.uri && (
+                              <div className="json-display">
+                                <h5>JSON Record:</h5>
+                                <pre className="json-content">
+                                  {JSON.stringify(record, null, 2)}
+                                </pre>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      ))
+                    )}
+                  </div>
+                </div>
+              )}
        </section>
      </main>

@@ -1550,4 +1650,4 @@ function App() {
  );
 }

-export default App;
+export default App;
--- a/oauth/src/components/AIChat-access.tsx
+++ b/oauth/src/components/AIChat-access.tsx
@@ -14,7 +14,7 @@ const response = await fetch(`${aiConfig.host}/api/generate`, {
    options: {
      temperature: 0.9,
      top_p: 0.9,
-      num_predict: 80,
+      num_predict: 200,
      repeat_penalty: 1.1,
    }
  }),
--- a/oauth/src/components/AIChat.tsx
+++ b/oauth/src/components/AIChat.tsx
@@ -199,7 +199,7 @@ Answer:`;
            options: {
              temperature: 0.9,
              top_p: 0.9,
-              num_predict: 80, // Shorter responses for faster generation
+              num_predict: 200, // Longer responses for better answers
              repeat_penalty: 1.1,
            }
          }),