microsoft
LiveStreaming not working as expected in WebChat using DirectLine — message appears all at once instead of streaming
Is it an issue related to Adaptive Cards?
No
Is this an accessibility issue?
No
What version of Web Chat are you using?
Latest production
Which distribution are you using Web Chat from?
Bundle (webchat.js)
Which hosting environment does this issue primarily affect?
Web apps
Which browsers and platforms do the issue happened?
Browser: Chrome (latest)
Which area does this issue affect?
Others or unrelated
Which theme pack does this issue affect?
I did not test it on other theme packs
Please describe the bug
Hi team,
I’m implementing the LiveStreaming functionality as documented in livestreaming.md, but I'm experiencing issues when testing it with WebChat using DirectLine.
Here’s the C# code I’m using based on the documentation:
var activityInicial = new Activity
{
Type = ActivityTypes.Typing,
ChannelData = JObject.FromObject(new
{
streamSequence = 1,
streamType = "streaming"
})
};
var response = await dc.Context.SendActivityAsync(activityInicial, cancellationToken);
await Task.Delay(500, cancellationToken); // Simulate generation delay
var activity2 = new Activity
{
Text = "A quick brown fox",
ChannelData = JObject.FromObject(new
{
streamId = response.Id,
streamSequence = 2,
streamType = "streaming"
}),
Type = ActivityTypes.Typing,
};
await dc.Context.SendActivityAsync(activity2, cancellationToken);
await Task.Delay(500, cancellationToken);
var activity3 = new Activity
{
Type = ActivityTypes.Typing,
Text = "A quick brown fox jumped over the",
ChannelData = JObject.FromObject(new
{
streamId = response.Id,
streamSequence = 3,
streamType = "streaming"
})
};
await dc.Context.SendActivityAsync(activity3, cancellationToken);
await Task.Delay(500, cancellationToken);
var activity4 = new Activity
{
Type = ActivityTypes.Typing,
Text = "A quick brown fox jumped over the streaming text",
ChannelData = JObject.FromObject(new
{
streamId = response.Id,
streamSequence = 4,
streamType = "streaming"
})
};
await dc.Context.SendActivityAsync(activity4, cancellationToken);
await Task.Delay(500, cancellationToken);
var finalActivity = new Activity
{
Type = ActivityTypes.Message,
Text = "A quick brown fox jumped over the streaming text",
ChannelData = JObject.FromObject(new
{
streamId = response.Id,
streamSequence = 5,
streamType = "final",
})
};
await dc.Context.SendActivityAsync(finalActivity, cancellationToken);
This is the code code of my bot:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Web Chat</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script crossorigin="anonymous"
src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<style>
html,
body {
background-color: #f7f7f7;
height: 100%;
}
body {
margin: 0;
}
#webchat {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
height: 100%;
margin: auto;
max-width: 480px;
min-width: 360px;
}
</style>
</head>
<body>
<div id="webchat" role="main"></div>
<script>
(async function () {
const res = await fetch('https://MYBOTURL.azurewebsites.net/.bot/v3/directline/tokens/generate',
{
"method": "POST",
"headers": {
"Authorization": "Bearer " + "MYTOKEN"
},
"body": "{'user': {'id': 'my_test_id', 'name': 'my_test_name'}}"
}
);
const { token } = await res.json();
window.WebChat.renderWebChat(
{
directLine: await window.WebChat.createDirectLineAppServiceExtension({
domain: 'https://MYBOTURL.azurewebsites.net/.bot/v3/directline',
token
})
},
document.getElementById('webchat')
);
document.querySelector('#webchat > *').focus();
})().catch(err => console.error(err));
</script>
</body>
</html>
Issue Despite following the instructions in the documentation, all the content appears at once at the end, instead of progressively rendering as expected (similar to the Teams streaming example: https://learn.microsoft.com/es-es/microsoftteams/platform/bots/streaming-ux?tabs=csharp).
This seems to contradict the intended UX described in the doc. I’ve also reviewed this related issue (#4876), which shows the same behavior — streaming messages appear all at once.
My assumptions so far: Implementation is correct and follows the documented guidance.
The problem may be related to how DirectLine handles streaming activities.
Either the functionality is not working as documented, or the documentation is missing important configuration requirements.
Do you see any errors in console log?
No, is working good but the porblem is that all the time show the dots of typing, and not show the information as striming like a teams channel
How to reproduce the issue?
- Navigate to https://tspjrlbot-h4d3edasd4htaqc2.westus-01.azurewebsites.net/
- Type text
- Type text
- See the typing message
- Show the text (but never show as striming text, like teams channel)
What do you expect?
When using the Live Streaming API with Direct Line and WebChat, following the documented pattern:
The bot should begin by sending a typing activity with streamType: "streaming".
Subsequent typing activities (with Text and incremented streamSequence) should update the displayed message in real time, simulating a "typing-as-you-go" experience.
The final message activity (with streamType: "final") should complete the message and mark the end of the stream.
The user should see a progressively updating message, just like in Microsoft Teams (see Teams streaming UX).
What actually happened?
the full message is displayed all at once when the final message is sent, and no progressive updates are shown — defeating the purpose of streaming UX.
Do you have any screenshots or recordings to repro the issue?
No response
Adaptive Card JSON
Additional context
No response
After extensive debugging, the root cause was identified for me: The official CDN link https://cdn.botframework.com/botframework-webchat/latest/webchat.js does not point to the latest stable version of the library.
It currently serves an older version (likely 4.16.0 or similar) which does not have the complete, documented support for interpreting the streamType and streamId properties in channelData for rendering the streaming effect. This causes the library to ignore the streaming chunks arriving on the WebSocket and rely on HTTP Polling as a fallback.
The fix is to stop using the /latest/ tag and explicitly reference a recent, specific version that supports livestreaming (v4.17.0 and newer).
Point your script tag to a specific stable version, for example, 4.18.0. This immediately solved the issue.
In my case https://unpkg.com/[email protected]/dist/webchat.js