Copilot chat bot CSS

Share & showcase
1

My first CSS snippet, wooohooo.
I had two kinds of issues with the chat bot output: the text size I found a little too big – for longer responses, I might want to take in the whole of the output…but I’d usually want to copy the response anyway, which, when the response was lengthy, was difficult as the copy button was at the head of the individual output, so I needed to scroll up (which is kind of slow for some reason). Therefore, I put the copy button (which I made a tad bigger) on the bottom.

Someone may find it useful (feel free to change stuff around in it):

div.chat-container {
  /* Styles for the chat container */
}

div.chat-container div.message.bot-message {
  font-size: 13px;
}

div.chat-container button.copy-message-button {
  align-self: flex-end;
  width: 30px;
  height: 30px;
  padding: 6px;
}
1 Like