search

chrisglein / artificial-chat

2 stars 1 forks source link

Improve visuals for chat bubbles #84

Closed chrisglein closed 5 months ago

chrisglein commented 1 year ago

Summary

Easiest fix would be to not round the bottom-right / bottom-left corners to give the appearance of a speech balloon with a tail pointing to the speaker. However it's possible RNW doesn't support changing a single corner radius.

As in this doesn't work:

    humanSection: {
      backgroundColor: isDarkMode ? '#333355' : 'lightblue',
      marginRight: 64,
      borderRadiusBottomLeft: 0,
    },
    AiSection: {
      backgroundColor: isDarkMode ? '#444444' : 'lightgray',
      marginLeft: 64,
      borderRadiusBottomRight: 0,
    },
chrisglein commented 1 year ago

This is an example of how just un-rounding the corners looks effective but is low-effort: image (from https://github.com/microsoft/visual-chatgpt)