microsoft / microsoft/BotFramework-WebChat

LiveStreaming not working as expected in WebChat using DirectLine — message appears all at once instead of streaming

Open
#5,487 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Bot Services bug customer-reported
Dominant language
HTML
Stars
1.8k
Forks
1.6k
Avg merge
22h 58m
Merged PRs (30d)
2

Description

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?
  1. Navigate to https://tspjrlbot-h4d3edasd4htaqc2.westus-01.azurewebsites.net/
  2. Type text
  3. Type text
  4. See the typing message
  5. 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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with docs/LIVESTREAMING.md and the related issue #4876, then reproduce the behavior using the supplied webchat.js and C# DirectLine activities. Check whether the streaming activities arrive progressively or only the final activity is rendered. Done means either the documented streaming UX works with the example or the documentation clearly identifies the required DirectLine configuration and limitations.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp, javascript
Domain
api, frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.