chatbox | front end chatbox format | Style Language library

I have a div tab on the right side of the screen in the middle and when I try to resize the window it moves the the bottom right of the screen. I would like to to stay in the middle regardless of screen size. How could I accomplish this with my current code? I've tried margin-left:auto and margin-right:auto but that didn't seem to work. I also can't necessarily change the position: because they need to those to make everything else work.

Any suggestions?

I have a div tab that contains some text and an svg icon like so

Once I click that tab then it expands like so

Once expanded I want the svg icon to change to something else. So far my code isn't throwing me any errors but also isn't working as expected either. I currently have a function that should change the icon to icon-cancel.svg after the element is clicked nothing changes. Here is what I have.

I am making a sort of chatbot in HTML, CSS, and javascript with the website here > https://chatroombot.n8thedev.repl.co/

If you click the menu button you will find a page to change the background, so far hovering over the 27 different buttons creates a border inside the button that is somewhat transparent. I attempted to make a click effect where it makes the clicked button border darker (higher alpha value). The issue I ran into was when I cleared the other borders when you click on the button. EX: if (Click button 1) { border: none for button 1,2,3... }

But when I tried to do that the hover effect didn't work anymore because it cleared the button's border permanently.

I am here for suggestions on a solution.

Also here is the existing code:

index.html:

I am trying to put a TextField and a FAB inside a bottomBar using Jetpack Compose. I wrapped the two with a box, which has the modifier "fillMaxWidth".

But the two controls dont use the full width.

Does anyone know, how to fix this issue?

Here is my Code:

Basically, I have this one block that I want to center in the middle of the page. This block should technically have both an image, and text. When the block isn't hovered over, I want only the image to appear centered on the page. When the block is hovered over, I want the image to move to the left a bit, and have the text appear to the right of it. So far, I've managed to make the image centered, to make it move to the left on hover, and to get the hover to display the text. The problem is, the text is under the image. I understand this is because the image and the text are in different div's, and so it would make sense that it would appear after. However, I'm not sure how to both make them in the same div, and ensure that the image is dead-center on the page when the block isn't hovered over. Is this possible?

Specifically, here's the HTML code for that section so far:

I'm new to ajax and I'm trying to build a live search box for users list in a chatbox, in order for the design to fit my chatbox I had to make the HTML the same as my template, the results are getting back fine it's just the link href isn't working also the users profile picture isn't found, I tried the traditional URL syntax but it seems not write with ajax , here is my controller search function :

I want to give a more realistic experience to user by showing the text "Bot is typing" under chatbox, before viber bot sends the message (even simulated with a delay).

It is already implemented by viber but i could'n find any callback for that. Also known as Typing Receipts or Typing Indicator

Your help will be appreciated! thanks!

I am developing a chat service using channel messaging of Agora RTM WebSDK. I would like to call the sendMessage method and to send the input message (input element with id is "message") when the send button is pushed. However, RTM ERROR has occurred and the sendMessage method did not work when the sendMessage method is called. I confirmed the token was generated and the login was succeeded. The script and the error are as follows.

What I'm Trying to do: I have the following react component, which is chat box, which toggles to view on clicking a button. The chatBox will be opened or closed according the value in the state 'open'. When the user clicks on the chat button, the function 'toggleChat' is run, which just toggles the value of 'open' state between true and false.

Problem: Now the problem is, when a new message is received, I am trying to keep the count of unread messages, if the chatBox isn't 'opened'. But it fails. In my opinion it should work, but the 'open' state is not what I expect it to be sometimes. Sometimes, even though the chatBox is opened, the open state inside is 'false'.

Minified Code