@@ -14,74 +14,74 @@ shiny-chat-container {
1414 p :last-child {
1515 margin-bottom : 0 ;
1616 }
17+ }
1718
18- shiny-chat-messages {
19- display : flex ;
20- flex-direction : column ;
21- gap : 2rem ;
22-
23- shiny-chat-message {
24- display : grid ;
25- grid-template-columns : auto minmax (0 , 1fr );
26- gap : 1rem ;
27- > * {
28- height : fit-content ;
29- }
30- .message-icon {
31- border-radius : 50% ;
32- border : var (--shiny-chat-border );
33- > * {
34- margin : 0.5rem ;
35- height : 20px ;
36- width : 20px ;
37- }
38- }
39- /* Vertically center the 2nd column (message content) */
40- .message-content {
41- align-self : center ;
42- }
43- }
19+ shiny-chat-messages {
20+ display : flex ;
21+ flex-direction : column ;
22+ gap : 2rem ;
23+ }
4424
45- /* Align the user message to the right */
46- shiny-user-message {
47- align-self : flex-end ;
48- padding : 0.75rem 1rem ;
49- border-radius : 10px ;
50- background-color : var (--shiny-chat-user-message-bg );
51- max-width : 100% ;
25+ shiny-chat-message {
26+ display : grid ;
27+ grid-template-columns : auto minmax (0 , 1fr );
28+ gap : 1rem ;
29+ > * {
30+ height : fit-content ;
31+ }
32+ .message-icon {
33+ border-radius : 50% ;
34+ border : var (--shiny-chat-border );
35+ > * {
36+ margin : 0.5rem ;
37+ height : 20px ;
38+ width : 20px ;
5239 }
5340 }
41+ /* Vertically center the 2nd column (message content) */
42+ .message-content {
43+ align-self : center ;
44+ }
45+ }
5446
55- shiny-chat-input {
56- margin-top : auto ;
57- position : sticky ;
58- background-color : var (--bs-body-bg , white );
59- bottom : 0 ;
60- textarea {
61- --bs-border-radius : 26px ;
62- resize : none ;
63- padding-right : 36px !important ;
64- max-height : 175px ;
65- & ::placeholder {
66- color : var (--bs-gray-600 , #707782 ) !important ;
67- }
47+ /* Align the user message to the right */
48+ shiny-user-message {
49+ align-self : flex-end ;
50+ padding : 0.75rem 1rem ;
51+ border-radius : 10px ;
52+ background-color : var (--shiny-chat-user-message-bg );
53+ max-width : 100% ;
54+ }
55+
56+ shiny-chat-input {
57+ margin-top : auto ;
58+ position : sticky ;
59+ background-color : var (--bs-body-bg , white );
60+ bottom : 0 ;
61+ textarea {
62+ --bs-border-radius : 26px ;
63+ resize : none ;
64+ padding-right : 36px !important ;
65+ max-height : 175px ;
66+ & ::placeholder {
67+ color : var (--bs-gray-600 , #707782 ) !important ;
6868 }
69- button {
70- position : absolute ;
71- bottom : 7 px ;
72- right : 8 px ;
73- background-color : transparent ;
74- color : var ( --bs-primary , #007bc2 ) ;
75- transition : color 0.25 s ease-in-out ;
76- border : none ;
77- padding : 0 ;
78- cursor : pointer ;
79- line-height : 16 px ;
80- border-radius : 50 % ;
81- & :disabled {
82- cursor : not-allowed ;
83- color : var ( --bs-gray-500 , #8d959e ) ;
84- }
69+ }
70+ button {
71+ position : absolute ;
72+ bottom : 7 px ;
73+ right : 8 px ;
74+ background- color : transparent ;
75+ color : var ( --bs-primary , #007bc2 ) ;
76+ transition : color 0.25 s ease-in-out ;
77+ border : none ;
78+ padding : 0 ;
79+ cursor : pointer ;
80+ line-height : 16 px ;
81+ border-radius : 50 % ;
82+ & :disabled {
83+ cursor : not-allowed ;
84+ color : var ( --bs-gray-500 , #8d959e );
8585 }
8686 }
8787}
0 commit comments