@@ -14,74 +14,74 @@ shiny-chat-container {
14
14
p :last-child {
15
15
margin-bottom : 0 ;
16
16
}
17
+ }
17
18
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
+ }
44
24
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 ;
52
39
}
53
40
}
41
+ /* Vertically center the 2nd column (message content) */
42
+ .message-content {
43
+ align-self : center ;
44
+ }
45
+ }
54
46
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 ;
68
68
}
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 );
85
85
}
86
86
}
87
87
}
0 commit comments