markstream-vue2

Markstream Vue 2

ホストアプリが Vue 2 で、Vue CLI／Webpack 4 固有のケースではない場合に、このスキルを使用します。

ワークフロー

1. リポジトリが Vue 2.6 または 2.7 であることを確認します。
2. markstream-vue2 をインストールします。
   • リポジトリが Vue 2.6 で、Composition API のパターンを使用している場合にのみ、@vue/composition-api を追加します。
3. リセット用のスタイルの後に markstream-vue2/index.css をインポートします。
4. <MarkdownRender :content="markdown" /> から始めます。
   • 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 を通じてデフォルトで有効になっている点に注意してください。
5. オーバーライドや信頼済みタグが必要な場合は、スコープを限定したカスタムコンポーネントマッピングを使用します。
6. 必要最小限の開発コマンドまたはビルドコマンドで検証します。

デフォルトの判断基準

• Vue 2.7 では、組み込みの Composition API サポートを使用できます。
• Vue 2.6 では、コードベースが実際に Composition API に依存している場合にのみ、@vue/composition-api が必要です。
• リポジトリが Vue CLI／Webpack 4 の場合は、markstream-vue2-cli を優先します。
• リポジトリが Vue 2 と Vite のワーカーインポートを使用している場合は、markstream-vue2-vite を優先します。
• 信頼済みの従来のレンダリングを維持するタスクでない限り、html-policy="safe" と Mermaid の厳格モードを維持します。
• 信頼済みの領域で以前の動作が必要な場合は、その理由を説明したうえで、その領域に限って html-policy="trusted" と :mermaid-props="{ isStrict: false }" を使用します。

参考ドキュメント

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