Botframework-webchat: Icon and name on avatar

[billba]

What would we do with them? Is it important to ape the old control?

[billba]

Based on conversation it seems we do need bot-name, which might also be the name of a participant.

[kevkor]

Yes, we do need bot name and also the bot icon (which is on by default, overrideable, and optional). See mocks in https://github.com/billba/botchat/issues/50

[danmarshall]

Should we split this into 2 new issues? I can implement the icon in the CSS.

[billba]

This is now fully supported in the props and the state, you should be able to style it.

[ubreddy]

bot icon and name still does not come up in the webchannel of botframework.

[billba]

Yup, still not implemented in the styling (that's why this issue is still open).

[rohantare]

Yes, the chat bot icon does not appear in webchat control. Any idea when this would be in?

[billba]

@danmarshall you guys getting ready to add icons back in?

[danmarshall]

I'm guessing about a week or so at least.

[rohantare]

Thank you for the update. It really gives an edge while giving demo's to potential customers. Looking forward for this feature.

[ubreddy]

Any update on this? was expecting this issue to be closed this week based on @danmarshall comment.

[danmarshall]

Hi folks, I'm a little behind on this, but I'm glad to know your interest. This work item has been bumped up on my priority list. Watch the repo for a related pull request. Thanks!

[danmarshall]

Concept art in #410

[ubreddy]

Any update on bot icon and welcome message appearing on web channel by default as it was available in earlier version?

This was the earlier code that was present in the iframe. Can we just get this added back?

<div div="" class="col-xs-12 col-sm-12 col-md-12 col-lg-12    msg-animate-welcome-msg">

                    <div class="welcome-grid">
                        <img id="welcome-bot-icon" ng-src="//bot-framework.azureedge.net/bot-icons-v1/Bot.png" src="//bot-framework.azureedge.net/bot-icons-v1/bot.png" class="two-tone-11">
                    </div>
                    <div class="welcome-msg-bubble welcome-msg-bubble-color">

                    </div>

                    <div class="botBackgroundColor welcome-grid  welcome-message-color" id="welcome-message">Hi! I'm Bot. Say "hi" if you'd like to chat</div>

                    <div class="welcome-grid message-panel-timestamp">
                        <span id="botId">Bot111</span>
                        <span> · </span>
                        <span class="ng-binding">Now</span>
                    </div>
                </div>

And the code for showing image for every bot message.

<div ng-switch="message.showIcon">
   <!-- ngSwitchWhen: true --><img ng-switch-when="true" class="bot-icon botHighlightColor ng-scope" ng-src="//bot-framework.azureedge.net/bot-icons-v1/bot.png" src="//bot-framework.azureedge.net/bot-icons-v1/bot.png"><!-- end ngSwitchWhen: -->
</div>                

[danmarshall]

Hi @ubreddy - let's separate the two issues, for your"welcome message" issue, I believe this is covered in #173 . Here we can discuss the icon feature. As it turns out, this feature is not quite as simple as it appears.
For example, to enable group conversation, we need a strategy for this icon to be distinct for each user. So we are working out the complexities, and can have a release once we have rationalized them. For an early preview you can take a look at this fork.

Remember you can always build your own WebChat with your own customizations :)

[CabuxaMapache]

I'm really interested in showing the bot icon, but It's not present in the activity.from prop. In the fork mentioned by @danmarshall the bot icon url is not part of the user props...why?

[danmarshall]

Hi @CabuxaMapache we've still got some design to work through this in DirectLine. Stay tuned, I'll be getting to this after we finish up AdaptiveCards. Appreciate your patience!

[spoecker]

Hi @danmarshall,
do you have any idea when the bot icon will be probably available in the web chat?

[vinod83k]

Hi @danmarshall , we are also looking to display bot icon in web chat. Please suggest as when this feature will be available..

[assaf-cream]

Hi,
I want to make sure I'm following the correct discussion - is the requirement here addresses adding an icon next to the bot messages in the conversation flow?

I would also like to know if there is an option to add icon next to the user side of the discussion (could be some general icon in case of an unrecognized user)

[spoecker]

@danmarshall is there any information when the bot icon will be available? I have a customer waiting for it?

[narulasrinivas]

Hi...What is the planned to release this ?

[danmarshall]

Hello everyone. We can't give out a date, but you may want to look at this fork and branch to get you started. As I've said above, to do this feature correctly is going to require changes in DirectLine itself.

I will update this thread when we have more news.

[TestUsetGitHubUser]

Do you have any update on this @danmarshall ?

[billba]

@TestUsetGitHubUser it's bad form to keep pinging on an open issue. @danmarshall specifically said he'd update this thread when we have more news. You can take him at his word.

On the other hand, if you want to signal your desire for this feature request, you can upvote a relevant message as others have done for this one.

[filipyoo]

Is this fork and branch a usable fork ? If yes, why is it not merged with master and is in 'stale' state ? :o

[billba]

@filipyoo Last I checked there are 374 forks out there with I don't know how many branches. Why are you asking about this particular one?

[filipyoo]

@billba It was mentioned here by @danmarshall, and it seems to work but not yet implemented officially. So I wanted to know whether it works or not (I had some build issue, so cannot test it out...)
Appreciate your answer !

[DanielTizon]

I can't believe... this issue is open for almost 2 years, and still there isn't bot icon.

It is a so basic feature, that I'm really surprised.

is Microsoft leaving this project or Microsoft haven't enough cash to hire devs?

[TestUsetGitHubUser]

@DanielTizon I added inside botchat script manually it works for me.

[DanielTizon]

@TestUsetGitHubUser what script? It is a long 2-years old conversation with a lot of links.

[TestUsetGitHubUser]

Download this script locally
And find this code below and create this img element.

if (r == "bot")
{ return o.createElement("div", { "data-activity-id": this.props.activity.id, className: i, onClick: this.props.onClickActivity },
o.createElement("img", { className: "botIcon" + r, src: "Images/xx.jpg", width: "28px", height: "32px", float: "left" }),
o.createElement("div", { className: "wc-message wc-message-from-" + r, ref: function (t) { return e.messageDiv = t } },
o.createElement("div", { className: s },
o.createElement("svg", { className: "wc-message-callout" },
o.createElement("path", { className: "point-left", d: "m0,6 l6 6 v-12 z" }),
o.createElement("path", { className: "point-right", d: "m6,6 l-6 6 v-12 z" })), this.props.children)),

 Download ...botchat.cssand  and add .botIcon class and style it as you want like:

.botIcon {
float: left !important;
border-radius: 50%;
height: 39px !important;
width: 39px !important;
}
```

[pavei]

@TestUsetGitHubUser where i put this code? Whatclass?

[michel-weber]

@TestUsetGitHubUser I used your hack to implement it. What a shame that this very basic functionality has not been implemented yet.

[compulim]

The work is done in PR #1486.

[compulim]

The PR is being merged and it will be resolved by @4.2.1-master.d35a7ac and >= @4.2.1.