Gen AI: format markdown, bot icon to top of message #58449
Conversation
| @@ -43,6 +44,7 @@ | |||
| .assistantMessage { | |||
| background-color: $light_gray_50; | |||
| border-radius: 0 16px 16px 16px; | |||
| margin-top: 14px; // a quarter of height of bot icon | |||
There was a problem hiding this comment.
Nit: icon seems a bit high when bot responses are single line.
There was a problem hiding this comment.
Still a nit but here are screenshots.
14px:
4px:
There was a problem hiding this comment.
Thanks, I'll play with it a bit! FWIW here's what the design mocks look like, need to figure out how to push down the bot message without adding extra space between the user and bot messages
There was a problem hiding this comment.
@fisher-alice want to give this another spin and see what you think? i think the main culprit of things being spaced out is a wide margin-bottom we had on bot and user messages, which I tightened up.
I also noticed that long single lines of code in an ordered list were overflowing the container (and were unscrollable), so I allowed scroll in the x direction for assistant messages. I cannot for the life of me get the bot to return it any more, but can simulate by modifying the dom directly:
Something like this in a response should repro the issue -- I don't see any other issues with content scrolling rather than just flowing onto the next line as I introduced overflow-x: scroll, but not totally sure):
<ol><li><code class="language-python">def add_numbers(num1, num2):
sum = num1 + num2
return sum
</code></li></ol>
There was a problem hiding this comment.
Nice work finding the edge case and fixing! I was able to repro by making window narrower and saw your fix resolved it. 🎉
There was a problem hiding this comment.
i think the main culprit of things being spaced out is a wide margin-bottom we had on bot and user messages, which I tightened up.
LGTM!
Two unrelated changes to the chat experience in gen AI:
Links
Testing story
Tested manually in responses containing markdown, responses containing normal text, and errored responses.