markstream-angular

Markstream Angular

ホストアプリが Angular の場合に、このスキルを使用して Angular パッケージを適切に導入します。

ワークフロー

1. リポジトリが Angular 20 以降であり、アルファ版のレンダラー API を使用できることを確認します。
2. markstream-angular と、要求されたオプションのピア依存関係のみをインストールします。
3. アプリのシェルから markstream-angular/index.css をインポートします。
   • 数式を有効にする場合は、katex/dist/katex.min.css を追加します。
4. スタンドアロンの Angular 統合を優先します。
   • imports で MarkstreamAngularComponent を使用し、シグナルに対応した例にします。
5. [content] から始めます。
   • ストリーミング AI チャットでは、まず [content] を使い、組み込みのスムーズストリーミングを使用します。
     • [smoothStreaming]="'auto'" はデフォルト値で、[typewriter]="true" または [maxLiveNodes]="0" の場合に有効になります。
     • [typewriter] は点滅するカーソルのみを制御し、デフォルトは false です。
     • [fade] はノードの表示時とストリーミング中のテキストのフェードアニメーションを制御し、デフォルトは true です。
   • ストリーミングと履歴の復元：チャット UI では、同じコンポーネントでストリーミングを開始し、後から [final]="true" にして履歴に切り替えます。
     • ストリーミング：[smoothStreaming]="'auto'"、[fade]="false"、[typewriter]="true"。これは保守的な表示・パフォーマンス上の選択であり、API の非互換性によるものではありません。このアダプターでは Vue 3 の上限付き追記フェードを採用していないため、両方を有効にする前にアニメーションの動作を確認してください。
     • 履歴の復元：[smoothStreaming]="false"、[fade]="true"、[typewriter]="false"。コンテンツはすでに完成しているため、表示のペース調整は遅延につながりますが、フェードによって洗練された表示アニメーションが得られます。
     • 動的な切り替え：[smoothStreaming]="isStreaming ? 'auto' : false"、[fade]="!isStreaming"。
   • ストリーム終了状態には [final] を使用します。スムーズストリーミングが有効な場合、表示中のコンテンツが追いつくまで最終解析は保留されます。
   • ワーカーで事前解析したコンテンツ、共有 AST ストア、またはカスタム AST 制御の場合にのみ、nodes + final に切り替えます。
   • [htmlPolicy] のデフォルト値が 'safe' になったこと、また [mermaidProps] を通じて Mermaid の厳格モードがデフォルトで有効になっていることに注意してください。
6. 信頼できるタグのワークフローには、[customHtmlTags] と [customComponents] を使用します。
7. 必要最小限の Angular 開発コマンドまたはビルドコマンドで検証します。

デフォルトの選択

• まずスタンドアロン Angular を使用し、リポジトリが引き続き依存している場合にのみ NgModule 時代のパターンを使用します。
• カーソルはオプトインとして扱い（デフォルトは typewriter=false）、フェードアニメーションはデフォルトで有効（fade=true）にします。
• オプションのピア依存関係は最小限にし、明示的に指定します。
• 信頼できる従来のレンダリングを維持するタスクでない限り、[htmlPolicy]="'safe'" と Mermaid の厳格モードを維持します。
• 信頼できる領域で、従来のより広範な動作が必要な場合は、ローカルで [htmlPolicy]="'trusted'" と [mermaidProps]="{ isStrict: false }" を指定して無効にし、その信頼境界を文書化します。

参考ドキュメント

• docs/guide/angular-quick-start.md
• docs/guide/angular-installation.md
• docs/guide/playground.md
• docs/guide/troubleshooting.md