Can you provide guidance on how to showcase the chat date and time for each message in a webchat created with the bot framework SDKV4 using C#

I've successfully created a chatBot using bot framework SDKV4 in C# with the WebChannel as the channel. Everything is functioning properly, but I have a specific goal in mind:

For each message that the user types or the Bot replies to, I want a time stamp to be included. For instance, if we consider a simple echo bot where it echoes back what the user typed, the conversation might look like this:

User: Hi

a minute ago

Bot: You Typed Hi

2 minutes ago

In its current state, the Bot would display the time stamp as something generic like "JustNow" under each message in the WebChannel.

What I desire is to show the precise time:

User: Hi

10:00 AM

Bot: You typed: Hi

10:01 AM

If displaying only the time is not feasible, then showing the full date or both date and time is acceptable too. However, I am unsure how to accomplish this.

I did some research but couldn't find a definitive solution. Although I came across the following GitHub link, it led me to a 404 error page:

https://github.com/Microsoft/BotFramework-WebChat/blob/preview/samples/timestamp-grouping/index.html

This was brought up in a Github issue post:

https://github.com/microsoft/BotFramework-WebChat/issues/985

Since my bot uses a Web channel, I attempted to include the following style option in my index.html page: groupTimestamp: true

However, this didn't provide much assistance.

To clarify my concern further: When inspecting the Bot's page, I observed the following:

https://i.stack.imgur.com/UuwwM.png

Currently, it shows "25 mins ago," whereas I aim to exhibit the exact time stamp directly above the one highlighted in the inspect image provided above.

Could someone please advise me on how to achieve my aforementioned request?

Thank you in advance,

Best regards,

ChaitanyaNG

c#htmlcssbotframework

Answer №1

If you're looking for a sample, check out this custom component demonstration. This showcases how you can customize the activity status and time stamp. Setting it up is quite straightforward, but depending on what changes you want to make, you may have to tweak some CSS styles.

I hope this helps!

Answer №2

To customize the Webchat StyleOptions, include the following attribute.

timestampFormat: 'absolute',

Explanation

Using 'absolute' will display the exact time like "August 3, 10:30 AM"

While 'relative' will show as "1 minute ago"

===========================================================

var styleOptions = {
        bubbleBackground: 'rgba(196, 196, 205, .3)',
        bubbleFromUserBackground: 'rgba(255, 230, 0, .3)',
        botAvatarImage: ChatImagePath + 'icon_round.png',
        botAvatarInitials: 'CB',
        userAvatarImage: ChatImagePath + 'user_icon.png',
        userAvatarInitials: 'YOU',
        hideUploadButton: true,
        timestampFormat: 'absolute', // 'relative'
        sendBoxButtonColorOnFocus: '#999999',
        sendBoxButtonColorOnHover: '#004E9A',
        sendBoxButtonColor: '#999999'
    };
   window.WebChat.renderWebChat(
    {
        directLine: directLine,
        locale: 'en-US',
        // Include 'styleOptions' when rendering Web Chat
        styleOptions
    },
    document.getElementById('chatbotdiv')
   );

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Usage of Wildcard in CSS Selectors for customizable path selection

When it comes to identifying elements using CSS selectors, I rely on a combination of path and attribute-based selectors for accurate results. For instance: div[attribute='test'] > div > div > div > span[attribute='test'] ...

htmlcssselenium-webdrivercss-selectors

Tips for Changing Background Color Beyond Body Tag

When using my demo below on Safari for iOS and scrolling up and down, you'll notice that you can scroll outside of the body until removing your finger from the touchscreen. The background color outside of the body is white. Is there a way to change th ...

ioscssmobilebackground

Exploring for worth using BeautifulSoup

Can anyone help me extract the name of a person (Alex Key) from the following HTML markup: <div class="link_container"> <a class="follow_card" data-uuid="e47443373cfa93d5341ab809f0700b82" data-type="person" data-name="Alex Key" data-permalink="/ ...

pythonhtmlbeautifulsoup

Placing the date of each blog post at the end of the excerpt

Currently, there is a grid section on the homepage of our site showcasing the two most recent blog posts. I am looking for a Javascript solution to relocate the date to the bottom of each block, outside of the border. For reference, you can visit the follo ...

javascriptjqueryhtmlcsswordpress

Tips for looping through an HTML document using Python to extract information from Wikipedia

I am working on developing a tool to extract data from the Wikipedia API. Within an XML file named wikiepedia.html, I have several links that I want to parse through line by line in order to retrieve information which can then be formatted into JSON. The ...

pythonhtmljsonweb

I am attempting to design a working Hamburger icon using HTML and CSS, but it is not collapsing as intended

I am new to Bootstrap and experimenting with it. The responsive navbar in Bootstrap is not functioning as expected on my screen. Can someone help me identify the issue and fix it? <!DOCTYPE html> <html> <head> <link rel=&q ...

htmlcssbootstrap-5hamburger-menu

Establishing limits for a division using keyboard commands

Alright, I've decided to remove my code from this post and instead provide a link for you to view it all here: (please disregard any SQL errors) If you click on a Grid-Node, the character will move to that position with boundaries enabled. Draggi ...

jqueryhtmlcss

Failure to include jQuery and CSS in the AJAX response

Having trouble with my slider. The script that is added at runtime is not showing up in the ajax response. Does anyone know why this might be happening? $.ajax({ url:"ajax_get_response_eng_to_change.php", type:"POST", async:true, data:{c ...

jquerycssajax

Organize your blog content by utilizing post IDs as the designated id attribute

What is the best way to format blog posts and comments in HTML so that I can easily manipulate them later using jQuery/Javascript for tasks like updating, deleting, or making Ajax calls? I am considering using the IDs (primary keys in the database) of the ...

javascriptjqueryhtmlajax

.Net Alarm Clock App

Although I'm not developing an alarm clock app, using one will help clarify my question. Imagine if I have a function in my program that needs to be executed every hour on the dot (for example, at 7:00 AM, 8:00 AM, 9:00 AM, and so forth). One solutio ...

c#.netdatetimetime

What are the steps to implementing PNG masking using PixiJS?

I am currently working on incorporating a png sprite as a mask for another layer. I found a demo on the pixi.js official website and created this fiddle: https://jsfiddle.net/raphadko/ukc1rwrc/ The code snippet below is what I am using for the masking fu ...

javascriptcsspixi.js

What is the best way to retrieve the _id of a newly inserted document in MongoDB

Imagine having a product listing. Upon adding a new product, it is saved using the following code snippet: var doc=products.Insert<ProductPDO>(p); One issue arises after this step as the aim is to redirect the user to the product page once the savi ...

c#mongodbmongodb-.net-driver

Limiting the displayed portion of a table and implementing scrolling instead

I am currently working with a static HTML template that contains the following code: <table> <thead></thead> <tbody></tbody> </table> Using jQuery and AJAX, I am dynamically adding and removing rows and columns ...

javascriptajaxhtml

What could be the reason for lxml not being able to locate this class?

Trying to extract text from a webpage using Python has always been tricky, especially with the surprises lxml tends to throw. Here's what I attempted: >>> import lxml.html >>> import urllib >>> response = urllib.urlopen(&a ...

pythoncssweb-scrapinglxml

The sticky positioning in <table> element fails to function properly in Firefox as well as Chrome version 58

Visit the website Scroll down until you see the "The First 40 Elements" table. Continue scrolling to reach the end of the page. In Chrome version 57, the table header stays sticky, but in Chrome 58 it does not. Interestingly, the table header also does n ...

htmlcssgoogle-chromefirefox

Web Scraping - Is there anyone who can help tidy this up?

I've been grappling with this web scraping project for days now, and as a newbie in this field, I find myself stuck on a crucial issue that I can't seem to resolve. My Challenges The problem lies in the span loop location - currently it prints ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Unable to navigate through images on Bootstrap Carousel using previous and next buttons

Despite following tutorials and examining the HTML code on bootstrap, I'm facing issues while trying to create a carousel. I believed that everything was done correctly, but when I click on the next button, nothing happens. <!DOCTYPE html> < ...

javascripthtmlcssbootstrap-4carousel

What is the process to showcase a database value in a particular index of an HTML table?

I am looking for assistance with displaying selected data values from a database into specific positions in an HTML table. I have managed to write the code that displays the data, but it only shows up at index 0 on the table. Does anyone know how to make ...

phphtmlajaxselecthtml-table

JQuery will only run after the Alert has been triggered in Firefox

I am currently facing an issue with updating the 'like' count in my database using the 'changeRating()' method when a user interacts with local like, Facebook like, or Twitter buttons. Oddly enough, the 'likes' are not being ...

javascriptjqueryhtmlajaxfirefox

Tips for turning off the "Are you certain you wish to exit this page" notification?

I am currently working with c# Selenium WebDriver and I am looking to disable Chrome warnings, such as the "are you sure you want to leave this page" alert. Unfortunately, none of the code snippets I have tried so far seem to work. Could someone please p ...

c#selenium