@@ -14,82 +14,82 @@ 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-user-message ,
56- shiny-chat-message {
57- & [content_type = " text" ] {
58- white-space : pre ;
59- overflow-x : auto ;
60- }
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-user-message ,
57+ shiny-chat-message {
58+ & [content_type = " text" ] {
59+ white-space : pre ;
60+ overflow-x : auto ;
6161 }
62+ }
6263
63- shiny-chat-input {
64- margin-top : auto ;
65- position : sticky ;
66- background-color : var (--bs-body-bg , white );
67- bottom : 0 ;
68- textarea {
69- --bs-border-radius : 26px ;
70- resize : none ;
71- padding-right : 36px !important ;
72- max-height : 175px ;
73- & ::placeholder {
74- color : var (--bs-gray-600 , #707782 ) !important ;
75- }
64+ shiny-chat-input {
65+ margin-top : auto ;
66+ position : sticky ;
67+ background-color : var (--bs-body-bg , white );
68+ bottom : 0 ;
69+ textarea {
70+ --bs-border-radius : 26px ;
71+ resize : none ;
72+ padding-right : 36px !important ;
73+ max-height : 175px ;
74+ & ::placeholder {
75+ color : var (--bs-gray-600 , #707782 ) !important ;
7676 }
77- button {
78- position : absolute ;
79- bottom : 7 px ;
80- right : 8 px ;
81- background-color : transparent ;
82- color : var ( --bs-primary , #007bc2 ) ;
83- transition : color 0.25 s ease-in-out ;
84- border : none ;
85- padding : 0 ;
86- cursor : pointer ;
87- line-height : 16 px ;
88- border-radius : 50 % ;
89- & :disabled {
90- cursor : not-allowed ;
91- color : var ( --bs-gray-500 , #8d959e ) ;
92- }
77+ }
78+ button {
79+ position : absolute ;
80+ bottom : 7 px ;
81+ right : 8 px ;
82+ background- color : transparent ;
83+ color : var ( --bs-primary , #007bc2 ) ;
84+ transition : color 0.25 s ease-in-out ;
85+ border : none ;
86+ padding : 0 ;
87+ cursor : pointer ;
88+ line-height : 16 px ;
89+ border-radius : 50 % ;
90+ & :disabled {
91+ cursor : not-allowed ;
92+ color : var ( --bs-gray-500 , #8d959e );
9393 }
9494 }
9595}
0 commit comments