markstream-vue2-vite

Markstream Vue 2 Vite

ホストアプリが Vue 2 で、バンドラーに Vite を使用している場合に、このスキルを使用します。

ワークフロー

1. リポジトリが Vue 2 で、Vite ベースのツールを使用していることを確認します。
2. markstream-vue2 と、要求されたオプションのピア依存関係のみをインストールします。
3. リセット CSS の後に markstream-vue2/index.css をインポートします。
4. リポジトリでバンドルされたワーカーが必要な場合は、Vite のワーカーインポートを使用します。
   • ここでは markstream-vue2/workers/... ?worker または ?worker&inline パターンを使用できます。
5. Vue 2.6 のリポジトリでは、Composition API の使用方針を明確にします。
   • AI チャットやストリーミング UI では、content を保持し、まず組み込みのスムーズストリーミングを使用します。
     • smooth-streaming="auto" がデフォルトで、typewriter=true または max-live-nodes <= 0 の場合に有効になります。
     • typewriter は点滅カーソルのみを制御し、デフォルトは false です。
     • fade はノードの表示時とストリーミングテキストのフェードアニメーションを制御し、デフォルトは true です。
   • ストリーミングと履歴の復元：チャット UI では、同じ MarkdownRender でストリーミングを開始し、その後 final=true になると履歴表示に切り替えます。
     • ストリーミング：smooth-streaming="auto"、:fade="false"、typewriter=true を指定します。これは保守的な見た目とパフォーマンスの選択であり、API の非互換性によるものではありません。このアダプターでは Vue 3 の上限付き追加フェードは採用されていないため、両方を有効にする前にアニメーションの動作を確認してください。
     • 履歴の復元：:smooth-streaming="false"、:fade="true"、typewriter=false を指定します。コンテンツはすでに完成しているため、表示を遅らせるペーシングは不要ですが、フェードによって洗練された表示アニメーションになります。
     • 動的な切り替え：:smooth-streaming="isStreaming ? 'auto' : false"、:fade="!isStreaming" を指定します。
   • ワーカーで事前解析したコンテンツ、共有 AST ストア、またはカスタム AST の制御が必要な場合に限り、nodes + final に切り替えます。
   • html-policy のデフォルトが safe になり、Mermaid の厳格モードが mermaid-props によってデフォルトで有効になっていることに注意してください。
6. 必要最小限の Vite 開発またはビルドコマンドで検証します。

デフォルトの方針

• Vite ベースの Vue 2 リポジトリでは、CDN ワーカーよりバンドルされたワーカーを優先します。
• UnoCSS または Tailwind のリセット CSS は、Markstream の CSS より前に適用します。
• バンドラー固有の選択が関係しない場合に限り、汎用の markstream-vue2 スキルを使用します。
• 信頼できる従来のレンダリングを維持する場合を除き、html-policy="safe" と Mermaid の厳格モードを使用します。
• 信頼できる領域で以前の動作が必要な場合は、その領域でのみ html-policy="trusted" と :mermaid-props="{ isStrict: false }" を使用し、その理由を説明します。

参考ドキュメント

• docs/guide/vue2-quick-start.md
• docs/guide/vue2-installation.md
• docs/guide/tailwind.md
• docs/guide/troubleshooting.md