{isOpen && (
)}
);
}
```
## ステータス表示パターン
### 重複防止（ツール使用イベント）
```typescript
onToolUse: (toolName) => {
if (toolName === 'output_slide') {
setMessages(prev => {
const hasExisting = prev.some(
msg => msg.isStatus && msg.statusText === 'スライドを生成中...'
);
if (hasExisting) return prev;
return [
...prev,
{ role: 'assistant', content: '', isStatus: true, statusText: 'スライドを生成中...' }
];
});
}
},
```
### ステータス遷移の連動
前のステータスを完了に更新しつつ、新しいステータスを追加する：
```typescript
if (toolName === 'output_slide') {
setMessages(prev => {
const updated = prev.map(msg =>
msg.isStatus && msg.statusText === 'Web検索中...'
? { ...msg, statusText: 'Web検索完了' }
: msg
);
return [
...updated,
{ role: 'assistant', content: '', isStatus: true, statusText: 'スライドを生成中...' }
];
});
}
```
### SSEストリーミング時の複数ツール発火対応
```typescript
onText: (text) => {
stopTipRotation();
setMessages(prev => {
// テキスト受信時に全ての進行中ステータスを自動完了
let msgs = prev.map(msg => {
if (msg.isStatus && msg.statusText?.startsWith('Web検索中'))
return { ...msg, statusText: 'Web検索完了' };
if (msg.isStatus && msg.statusText?.startsWith('スライドを生成中'))
return { ...msg, statusText: 'スライドを生成しました', tipIndex: undefined };
return msg;
});
return [...msgs, { role: 'assistant', content: text }];
});
}
```
**重要**: テキスト受信（`onText`）はツール完了のシグナルとして機能する。`prev`をmapした結果は新しい配列。後続処理ではmap結果の変数（`msgs`）を使うこと。
## 疑似ストリーミング表示（1文字ずつ表示）
```typescript
const streamMessage = async (message: string) => {
setMessages(prev => [...prev, { role: 'assistant', content: '', isStreaming: true }]);
for (const char of message) {
await new Promise(resolve => setTimeout(resolve, 30));
setMessages(prev =>
prev.map((msg, idx) =>
idx === prev.length - 1 && msg.isStreaming
? { ...msg, content: msg.content + char }
: msg
)
);
}
setMessages(prev =>
prev.map((msg, idx) =>
idx === prev.length - 1 && msg.isStreaming
? { ...msg, isStreaming: false }
: msg
)
);
};
```
### finallyブロックとの競合に注意
コールバック内で疑似ストリーミングを呼ぶ場合、毎回 `isStreaming: true` を設定してカーソル表示を維持する：
```typescript
// ✅ 毎回 isStreaming: true を設定
for (const char of message) {
await new Promise(resolve => setTimeout(resolve, 30));
setMessages(prev =>
prev.map((msg, idx) =>
idx === prev.length - 1 && msg.role === 'assistant'
? { ...msg, content: msg.content + char, isStreaming: true }
: msg
)
);
}
```
## 非同期コールバック内でのエラーハンドリング
`onError`コールバック内で`throw error`しても外側の`try-catch`には伝播しない。コールバック内で直接状態を更新する：
```typescript
// ❌ NG: throw しても外側の catch に届かない
onError: (error) => { throw error; },
// ✅ OK: コールバック内で直接状態を更新
onError: (error) => {
const errorMessage = error instanceof Error ? error.message : String(error);
const isModelNotAvailable = errorMessage.includes('model identifier is invalid');
const displayMessage = isModelNotAvailable
? 'モデルがまだ利用できません。リリースをお待ちください！'
: 'エラーが発生しました。もう一度お試しください。';
streamErrorMessage(displayMessage);
setIsLoading(false);
},
```
## 環境変数の読み込み（.env vs .env.local）
| フレームワーク/ツール | .env | .env.local | 備考 |
|-----------|------|-----------|------|
| Vite | ○ | ○ | 両方読む（優先度: .env.local > .env） |
| Next.js | ○ | ○ | 両方読む |
| **Node.js dotenv** | ○ | × | `.env` のみ |
Amplify CDK（`import 'dotenv/config'`）とViteの両方で使う場合は **`.env`** に統一する。
## OGP/Twitterカード設定
### 推奨設定（summaryカード）
```html