Animate Agent graph based on ikp-data-operation event types
#602
Conversation
🦋 Changeset detectedLatest commit: c451310 The changes in this PR will be included in the next version bump. This PR includes changesets to release 7 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
💡 Enable Vercel Agent with $100 free credit for automated AI reviews |
|
Claude encountered an error —— View job PR Review in Progress
|
dimaMachina
changed the title
ikp-data-operation event types
There was a problem hiding this comment.
This looks great, a few notes:
- Could we actually remove the checkmark on the tool, now that I see it in action I think it might be a little confusing (sorry for suggesting we add it)
- For the ball on the edges could we make it so it only travels down the edge once instead of recurring?
- After the tool completes can we show the ball moving back up the edge (in the other direction) to illustrate the data going back to the agent
- There is an
agent_initializingdata-operation, could we add the glow to that agent when that operation happens? - Could we also add the ball for
transferoperations? - Could we make whichever agent or tool is active have the glow effect and then have it stop glowing when it is complete:
for delegation: if agent a delegates to agent b they can both be glowing
but for transfer: if agent a transfers to agent b then only agent b would be glowing
Basically I think we want the ball to reflect directionality of the data and the glow to reflect the active agent or tool if that make sense. Happy to talk through this on a call as well.
| const onDataOperation: EventListenerOrEventListenerObject = (event) => { | ||
| // @ts-expect-error -- improve types | ||
| const { conversationId, timestamp, ...data } = event.detail; | ||
| console.log('Data operation:', data); |
There was a problem hiding this comment.
can we remove this console log? also I think conversationId and timestamp are unused so maybe we could remove those as well
There was a problem hiding this comment.
- Could we actually remove the checkmark on the tool, now that I see it in action I think it might be a little confusing (sorry for suggesting we add it)
yep, I think without is better! removed
There was a problem hiding this comment.
- For the ball on the edges could we make it so it only travels down the edge once instead of recurring?
yep, I think you are right too.
It was tricky to fix it. I need to add effect:
const ref = useRef<SVGAnimateElement>(null);
// Without this useEffect, the animation won't start when this component is rendered dynamically.
useEffect(() => {
ref.current?.beginElement();
}, []);to run it once
There was a problem hiding this comment.
There is an agent_initializing data-operation, could we add the glow to that agent when that operation happens?
hmm, agent_initializing sends only global agent id, it doesn't sends weather-assistant agentId
There was a problem hiding this comment.
Could we also add the ball for transfer operations?
Which agent do you use? How can I reproduce this event type? for now I was able to receive only following event types
agent_initializing
delegation_sent
tool_call
tool_result
agent_generate
delegation_returned
completion
There was a problem hiding this comment.
If you click on the edge between the agents and change the relationship to "transfer" instead of delegate, then you should see it.
There was a problem hiding this comment.
hmm,
agent_initializingsends only global agent id, it doesn't sendsweather-assistantagentId
ah got it, maybe we can highlight the default agent then, I believe the default agent is the entry point for each graph.
2 participants
Screen.Recording.2025-10-16.at.20.20.07.mov