oauth_new

oauth_new/ASK_AI_INTEGRATION.md

@@ -0,0 +1,116 @@
+# Ask-AI Integration Implementation
+
+## 概要
+
+oauth_new アプリに ask-AI 機能を統合しました。この機能により、ユーザーはAIと対話し、その結果を atproto に記録できます。
+
+## 実装されたファイル
+
+### 1. `/src/hooks/useAskAI.js`
+- ask-AI サーバーとの通信機能
+- atproto への putRecord 機能
+- チャット履歴の管理
+- イベント送信（blog との通信用）
+
+### 2. `/src/components/AskAI.jsx`
+- チャット UI コンポーネント
+- 質問入力・回答表示
+- 認証チェック
+- IME 対応
+
+### 3. `/src/App.jsx` の更新
+- AskAI コンポーネントの統合
+- Ask AI ボタンの追加
+- イベントリスナーの設定
+- blog との通信機能
+
+## JSON 構造の記録
+
+`./json/` ディレクトリに各 collection の構造を記録しました：
+
+- `ai.syui.ai_user.json` - ユーザーリスト
+- `ai.syui.ai_chat.json` - チャット記録（空）
+- `syui.syui.ai_chat.json` - チャット記録（実データ）
+- `ai.syui.ai_chat_lang.json` - 翻訳記録
+- `ai.syui.ai_chat_comment.json` - コメント記録
+
+## 実際の ai.syui.log.chat 構造
+
+確認された実際の構造：
+
+```json
+{
+  "$type": "ai.syui.log.chat",
+  "post": {
+    "url": "https://syui.ai/",
+    "date": "2025-06-18T02:16:04.609Z",
+    "slug": "",
+    "tags": [],
+    "title": "syui.ai",
+    "language": "ja"
+  },
+  "text": "質問またはAI回答テキスト",
+  "type": "question|answer",
+  "author": {
+    "did": "did:plc:...",
+    "handle": "handle名",
+    "displayName": "表示名",
+    "avatar": "アバターURL"
+  },
+  "createdAt": "2025-06-18T02:16:04.609Z"
+}
+```
+
+## イベント通信
+
+blog（ask-ai.js）と OAuth アプリ間の通信：
+
+### 送信イベント
+- `postAIQuestion` - blog から OAuth アプリへ質問送信
+- `aiProfileLoaded` - OAuth アプリから blog へ AI プロフィール送信
+- `aiResponseReceived` - OAuth アプリから blog へ AI 回答送信
+
+### 受信イベント
+- OAuth アプリが `postAIQuestion` を受信して処理
+- blog が `aiResponseReceived` を受信して表示
+
+## 環境変数
+
+```env
+VITE_ASK_AI_URL=http://localhost:3000/ask  # ask-AI サーバーURL（デフォルト）
+VITE_ADMIN_HANDLE=ai.syui.ai
+VITE_ATPROTO_PDS=syu.is
+VITE_OAUTH_COLLECTION=ai.syui.log
+```
+
+## 機能
+
+### 実装済み
+- ✅ ask-AI サーバーとの通信
+- ✅ atproto への question/answer record 保存
+- ✅ チャット履歴の表示・管理
+- ✅ blog との双方向イベント通信
+- ✅ 認証機能（ログイン必須）
+- ✅ エラーハンドリング・ローディング状態
+- ✅ 実際の JSON 構造に合わせた実装
+
+### 今後のテスト項目
+- ask-AI サーバーの準備・起動
+- 実際の質問送信テスト
+- atproto への putRecord 動作確認
+- blog からの連携テスト
+
+## 使用方法
+
+1. 開発サーバー起動: `npm run dev`
+2. OAuth ログイン実行
+3. "Ask AI" ボタンをクリック
+4. チャット画面で質問入力
+5. AI の回答が表示され、atproto に記録される
+
+## 注意事項
+
+- ask-AI サーバー（VITE_ASK_AI_URL）が必要
+- 認証されたユーザーのみ質問可能
+- ai.syui.log.chat への書き込み権限が必要
+- Production 環境では logger が無効化される