skills.rest
UnicomAI
UnicomAICOMMUNITY
Explore all skills by this author →
GitHub

agent-stream-nesting-logic

Implements recursive SSE sub-conversation nesting and sandwich-sequence rendering for Vue 2 frontends.

2.5k|134|Updated Jun 6, 2025
Search Tags:#reactivity#Streaming#chat UI#SSE#vue 2#typewriter#nested rendering
One-click install
npx skills add https://github.com/UnicomAI/wanwu --skill agent-stream-nesting-logic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agent-stream-nesting-logic
Source: https://github.com/UnicomAI/wanwu/tree/main/.agents/skills/agent-stream-nesting-logic
Command: npx skills add https://github.com/UnicomAI/wanwu --skill agent-stream-nesting-logic

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streaming agent responses that interleave main text with nested sub-conversations (skills, tools, knowledge bases) are hard to render correctly: ordering breaks, typewriter animations flicker, and nested cards lose reactivity. This Skill defines the architectural protocol for recursively nesting and rendering these SSE streams in the Wanwu platform frontend.

Core Features & Use Cases

  • Sandwich Sequence Model: Interleaves main text chunks and sub-conversation cards in a single messageSequence array ordered by an absolute order field.
  • Parent-Child Adoption: Routes packets with parentId into the correct parent component's sequence, supporting arbitrary nesting depth.
  • Vue 2 Reactivity Rules: Enforces passing original reactive object references (never shallow copies) so typewriter updates propagate through nested components.
  • Use Case: When an agent answer streams text, then a tool call card, then more text, then a nested knowledge-base card inside the tool card, this protocol ensures each piece renders in the right position with continuous typing animation and stable citation anchors (data-sub-id, data-parent-id).

Quick Start

Apply the agent-stream-nesting-logic skill to implement recursive sub-conversation rendering for SSE messages in the Wanwu Vue 2 frontend.

Frequently Asked Questions about agent-stream-nesting-logic

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render nested tool calls inside a streaming chat message?▼

Use a sandwich sequence: store text chunks and sub-conversation cards in one messageSequence array sorted by the order field. Packets with a parentId are adopted into the parent component's own sequence, enabling recursive nesting.

How to keep Vue 2 typewriter animation working in nested components?▼

Pass the original reactive object reference when registering a sub-conversation into the parent sequence, never a shallow copy like {...obj}. Only shared references let the StreamProcessor's activeResponse updates propagate through nested child components.

Why does my streaming UI flicker during typewriter rendering?▼

Flicker happens when completed and in-progress text are not separated. Split rendering into stableChunks (fully parsed Markdown HTML blocks) and activeResponse (the buffer still being typed), so finished content is not re-rendered.

What happens when two SSE packets share the same order value?▼

Packets with the same id and identical order are treated as physical content appends, not new components. The frontend merges their content rather than creating duplicate cards in the sequence.

How do I handle a packet whose id equals its parentId?▼

A self-referencing packet (id === parentId) creates an infinite nesting loop. Intercept it in the sseMethod.js layer and reassign its id with a content_ prefix so it becomes a plain fragment packet.

Related Skills

Explore More Software Engineering Skills→
quanngynxquanngynx

copilotkit-agui

Emit ordered AG-UI RUN, TEXT, TOOL, and STATE events over SSE.

Community
Advanced
AbrahamX3AbrahamX3
1

Convex Agents Messages

Save, retrieve, and display agent conversation messages with typed schemas.

Community
Intermediate
nguyenquy0710nguyenquy0710

Lib/Markdown Folder - Markdown Processing

Convert Markdown content to HTML with syntax highlighting for code blocks.

Community
Basic
GarethManningGarethManning
583

interleaving-unit-planner

Restructure blocked topic sequences into interleaved unit plans with prerequisites.

Community
Intermediate