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

Filter out the selection choice that begins with 'aa' in the drop-down menu

Here is a select field with various options: <select id="sel"> <option value="1">aadkdo</option> <option value="2">sdsdf</option> <option value="3">aasdfsddkdo</option> <option value="4"> ...

javascriptjqueryhtml

Attempting to extract the text within a table row cell by clicking on the cell directly following it

I am trying to extract the data from a table row when I click on a specific div within that row HTML: <td class="ms-cellstyle ms-vb2">10</td> <td class="ms-cellstyle ms-vb2"> <div class="ms-chkmark-container"> <div ...

javascriptjqueryhtmlcsstraversal

Is there a way to successfully submit multiple locations, each separated by commas, through the multipart form?

Here is my HTML form: <form method="POST" enctype="multipart/form-data" v-on:submit.prevent="handelSubmit($event);"> <div class="clear"> <div class="col-md-3"></div> <div class="col-md-6"> <div class="form ...

javascripthtmlvue.jsvue-componentform-data

I need assistance from someone knowledgeable in HTML and CSS. I am trying to create a div that dynamically increases its width until it reaches a specific

Seeking assistance to create a dynamic div that continuously expands its width until it reaches a maximum of 540px. It should start at 75px. Below is the HTML and CSS code I've attempted: .Loading-Screen { background-color: black; color: alicebl ...

javascripthtmlcss

React Material Design Cards for Responsive Layouts

Hi there, I am currently navigating my way through Material Design and attempting to ensure that the cards section is responsive by utilizing media queries and flex. However, I have encountered an issue where only a portion of the image is displayed when t ...

cssreactjsresponsive-designmaterial-design

I am looking to dynamically add and remove an active link on my sidebar using JavaScript

Looking to create a dynamic website with interactive features like adding and removing active links upon clicking, and smooth transitioning between sections using JavaScript. Feel free to skip over the SVG code. HTML source code <div class="s ...

javascripthtmlbootstrap-5sidebar

Tips for properly aligning numbered lists in text documents

My issue involves designing an order list paragraph where I also need a paragraph in the middle of the ordered list numbers. The first paragraph is displaying correctly, but the second and third paragraphs are only appearing as single lines, so I adjuste ...

html

Aligning images in columns

I need help aligning a set of images using CSS. Currently, they are stacked top to bottom and I want them to be placed left to right instead. In simpler terms: 1|2|3|4 5|6|7|8 vs 1|3|5|7 2|4|6|8 #photos { line-height: 0; -webkit-column-count: ...

jqueryhtmlcss

A workaround for background-size in Internet Explorer 7

Currently, I am working on a project at this link: Everything seems to be functioning well in Firefox and Chrome, however, I have encountered an issue with the background-size property not being supported in IE7. I heavily rely on this property throughout ...

cssinternet-explorer-7

Extension for Chrome - Personalized pop-up notification when page loads

I am looking to create a custom alert box that triggers on page load instead of the default one, which I find unattractive and possibly irritating for users. alert('hello'); My current approach involves the following code: manifesto.js "cont ...

javascripthtmlcssgoogle-chrome-extension

Selenium: Locating the element correctly, yet unable to perform interactions with the input field

When trying to interact with an input field using the provided script: from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_ ...

pythonhtmlseleniumdomxpath

What sets npm node-sass apart from npm sass?

Recently, I discovered that the recommended approach is to utilize @use rather than @import in sass. However, it appears that using npm sass instead of npm node-sass is necessary for this. Can you clarify the distinction between these two? Also, why do @ ...

cssnpmsassnode-modulesnode-sass

Attempting to include html5shiv.js in my project to ensure compatibility with Internet Explorer for proper rendering

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="Description" content="C.V"/> The code snippet below was added to try and render in Internet Explorer, unfortunately it did not work as expected. < ...

javascripthtml

When using the HTML code <p></p>, the empty paragraph tag does not create a line break

We have a .NET application that saves messages in axml format. Our task is to convert these messages into html. After some research, I came across a 3rd party library called "HtmlFromXamlConverter" that does this job, but with one issue: when the axml cont ...

htmlcss

Positioning children within a div element

Howdy! I have a neat little setup with two divs stacked on top of each other, each containing child elements. My goal is to hide the first div and have the second div seamlessly take its place while keeping the child elements in their original position. C ...

css

Designing a slider to display a collection of images

I am currently working on a slider project using HTML, javascript, and CSS. I'm facing an issue where only the first two images (li) are being displayed and it's not transitioning to the other (li) elements. Below is the HTML code snippet: <se ...

javascriptcsshtml

Using jQuery to remove the td element from an HTML table

Hello everyone, I have a query. I am trying to remove a specific td from a table using JavaScript, but the remove() function is not working. Here is my code: $('.btnEliminarLicencia').off('click'); $('.btnEliminarLicencia&apo ...

javascriptjqueryhtmlajaxjsp

Is there a way for me to direct to a different HTML page once I click on a certain data point?

At the moment, I have been utilizing this complete set of calendar codes. <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <link href='fullcalendar.css' rel='stylesheet' /> <link href=&a ...

javascriptjqueryhtmlfullcalendar

Is there a way to maintain the values in an ArrayList in C# even when a page is refreshed or reloaded?

Is there a way to retain the values in an array list even after the page has loaded? I need these stored values for verification later on. I attempted using Http Cookie set but couldn't locate it. Can someone please assist? for (int i = 1; i <= ...

c#.netselenium-webdriver

Slanted lines HTML CSS

I am encountering an issue with my HTML and CSS coding. The design requires a zig-zag "border" at the top and bottom of the page, creating a white paper space in between. The paper needs to be positioned underneath the zig-zag borders. Currently, this is ...

htmlcssborderzigzag