Fess 15.5に向けて、AIモード（チャット画面）のUIをAtlassian Design System（ADS）のパターンに従って全面的に調整しました。
変更の概要
今回のUI改善は、モダンなデザインシステムに沿った統一的な見た目と操作性の向上を目指しています。主な変更点は以下の通りです。
ステータスロゼンジ
ヘッダーのステータス表示を、ADSのLozenge（バッジ）パターンに変更しました。状態に応じて色が変わり、処理中はパルスアニメーションで視覚的にフィードバックします。
- Ready: グレー背景
- Thinking: ブルー背景（パルスアニメーション付き）
- Error: レッド背景
- Success: グリーン背景
ステッパーコンポーネント
検索処理の進行状況を可視化するステッパーを新規追加しました。以下の5つのフェーズをアイコン付きで表示します。
- Analyze – 意図分析
- Search – 検索実行
- Evaluate – 結果評価
- Retrieve – ドキュメント取得
- Answer – 回答生成
各ステップは、待機中・実行中・完了の3状態を持ち、実行中のステップにはパルスアニメーションが付きます。
ウェルカム画面
チャット開始前の空の状態に、ADSのEmpty Stateパターンに従ったウェルカム画面を表示するようにしました。以前のハードコードされたサジェスチョンチップスは削除しています。
メッセージUI
メッセージ表示も改善しています。
- フェードインアニメーションの追加
- タイムスタンプ表示
- ホバー時のコピーボタン表示
- ソースリンクのカード形式での表示
- アバターのグラデーション化
エラーバナー
エラー発生時にリトライ・閉じるボタン付きのバナーを表示するようにしました。
入力エリア
- 文字数カウンター（0 / 4000）の表示
- キーボードショートカットのヒント表示（Enter送信、Shift+Enter改行）
- ARIAラベルによるアクセシビリティ改善
ダークモード対応
全コンポーネントに対してダークモードのスタイルを追加しました。prefers-color-scheme: darkに対応しています。
16言語対応
新しいUI要素のラベルを16言語分追加しています。ステッパーのフェーズ名、ウェルカムメッセージ、入力ヒント、コピー通知など、すべての新規テキストが多言語対応済みです。
カラーパレット
ADSのカラートークンに合わせて、以下のような色使いに統一しています。
| 用途 | カラーコード |
|---|---|
| プライマリ | #0052CC |
| テキスト（メイン） | #172B4D |
| テキスト（サブ） | #6B778C |
| ボーダー | #DFE1E6 |
| 背景（サブ） | #F4F5F7 |
| 成功 | #00875A |
| エラー | #DE350B |
まとめ
15.5ではこのデザインをベースにAIモードのUIを仕上げていく予定です。ADSパターンに従うことで、一貫性のあるモダンなUIを実現しています。