| @@ -170,8 +170,33 @@ | ||
| 170 | 170 | gap: 8px !important; |
| 171 | 171 | margin-bottom: 8px !important; |
| 172 | 172 | } |
| 173 | 173 | |
| 174 | +.bot-message .chat-heading { | |
| 175 | +color: inherit; | |
| 176 | +} | |
| 177 | + | |
| 178 | +div.bot-message h1.chat-heading { | |
| 179 | + font-size: 24px; | |
| 180 | +} | |
| 181 | + | |
| 182 | +div.bot-message h2.chat-heading { | |
| 183 | + font-size: 20px; | |
| 184 | +} | |
| 185 | + | |
| 186 | +div.bot-message h3.chat-heading { | |
| 187 | + font-size: 18px; | |
| 188 | +} | |
| 189 | + | |
| 190 | +div.bot-message h4.chat-heading { | |
| 191 | + font-size: 16px; | |
| 192 | +} | |
| 193 | + | |
| 194 | +div.bot-message h5.chat-heading { | |
| 195 | + font-size: 12px; | |
| 196 | +} | |
| 197 | + | |
| 198 | + | |
| 174 | 199 | .mxchat-site-icon { |
| 175 | 200 | width: 16px !important; |
| 176 | 201 | height: 16px !important; |
| 177 | 202 | flex-shrink: 0 !important; |
| @@ -263,15 +288,14 @@ | ||
| 263 | 288 | } |
| 264 | 289 | |
| 265 | 290 | .active-pdf-name { |
| 266 | 291 | font-size: 11px; |
| 267 | - color: #666; | |
| 268 | 292 | white-space: nowrap; |
| 269 | 293 | overflow: hidden; |
| 270 | 294 | text-overflow: ellipsis; |
| 271 | 295 | } |
| 272 | 296 | |
| 273 | -.remove-pdf-btn { | |
| 297 | +.remove-pdf-btn, .toolbar-perplexity { | |
| 274 | 298 | background: 0 0; |
| 275 | 299 | border: none; |
| 276 | 300 | padding: 2px; |
| 277 | 301 | margin-left: 4px; |
| @@ -279,9 +303,9 @@ | ||
| 279 | 303 | transition: opacity .2s; |
| 280 | 304 | line-height: 13px; |
| 281 | 305 | } |
| 282 | 306 | |
| 283 | -.remove-pdf-btn:hover { | |
| 307 | +.remove-pdf-btn:hover, .toolbar-perplexity:hover { | |
| 284 | 308 | opacity: 1; |
| 285 | 309 | background: none; |
| 286 | 310 | } |
| 287 | 311 | |
| @@ -293,8 +317,9 @@ | ||
| 293 | 317 | gap: 10px; |
| 294 | 318 | padding: 8px; |
| 295 | 319 | border-top: 1px solid #e5e5e5; |
| 296 | 320 | background: none; |
| 321 | + align-items: end; | |
| 297 | 322 | } |
| 298 | 323 | |
| 299 | 324 | #mxchat-chatbot .toolbar-btn { |
| 300 | 325 | background: none; |
| @@ -302,9 +327,8 @@ | ||
| 302 | 327 | padding: 0px; |
| 303 | 328 | cursor: pointer; |
| 304 | 329 | width: 16px; |
| 305 | 330 | height: 16px; |
| 306 | - display: flex; | |
| 307 | 331 | align-items: center; |
| 308 | 332 | justify-content: center; |
| 309 | 333 | opacity: 0.6; |
| 310 | 334 | transition: opacity 0.2s; |
| @@ -331,8 +355,26 @@ | ||
| 331 | 355 | background: none; |
| 332 | 356 | border: none; |
| 333 | 357 | } |
| 334 | 358 | |
| 359 | +/* Add this to your plugin's CSS */ | |
| 360 | +.toolbar-btn.active { | |
| 361 | + background-color: rgba(120, 115, 245, 0.2); | |
| 362 | + box-shadow: 0 0 0 2px rgba(120, 115, 245, 0.4); | |
| 363 | +} | |
| 364 | + | |
| 365 | + | |
| 366 | +.system-message { | |
| 367 | + padding: 8px 12px; | |
| 368 | + margin: 8px 0; | |
| 369 | + background-color: rgba(120, 115, 245, 0.1); | |
| 370 | + border-radius: 8px; | |
| 371 | + color: #555; | |
| 372 | + font-style: italic; | |
| 373 | + font-size: 14px; | |
| 374 | + text-align: center; | |
| 375 | +} | |
| 376 | + | |
| 335 | 377 | #mxchat-chatbot .spinner { |
| 336 | 378 | animation: rotate 2s linear infinite; |
| 337 | 379 | width: 20px; |
| 338 | 380 | height: 20px; |
| @@ -628,9 +670,9 @@ | ||
| 628 | 670 | color: #212121; |
| 629 | 671 | font-size: 14px; |
| 630 | 672 | line-height: 24px; |
| 631 | 673 | cursor: pointer; |
| 632 | - text-align: left; | |
| 674 | + text-align: initial; | |
| 633 | 675 | transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; |
| 634 | 676 | margin-bottom: 10px; |
| 635 | 677 | } |
| 636 | 678 | |
| @@ -746,14 +788,13 @@ | ||
| 746 | 788 | text-align: left; |
| 747 | 789 | float: right; |
| 748 | 790 | clear: both; |
| 749 | 791 | border-radius: 18px 0 18px 18px; |
| 750 | - border: solid 1px #212121; | |
| 792 | + border: 1px solid #e2e8ff; | |
| 751 | 793 | word-wrap: break-word; |
| 752 | 794 | } |
| 753 | 795 | |
| 754 | 796 | #mxchat-chatbot #chat-container #chat-box .bot-message { |
| 755 | - text-align: left; | |
| 756 | 797 | float: left; |
| 757 | 798 | clear: both; |
| 758 | 799 | border: 1px solid rgba(226, 232, 255, .2); |
| 759 | 800 | border-radius: 0 18px 18px; |
| @@ -1030,52 +1071,81 @@ | ||
| 1030 | 1071 | #mxchat-chatbot-wrapper .chatbot-footer .powered-by span { |
| 1031 | 1072 | text-decoration: underline; |
| 1032 | 1073 | } |
| 1033 | 1074 | |
| 1034 | -.thinking-dots-container { | |
| 1075 | +#chat-box .bot-message.temporary-message .thinking-dots-container { | |
| 1035 | 1076 | display: flex; |
| 1036 | 1077 | justify-content: center; |
| 1037 | 1078 | align-items: center; |
| 1038 | 1079 | overflow: hidden; |
| 1039 | - height: 20px; /* Adjust as needed */ | |
| 1080 | + height: 20px; | |
| 1081 | + position: relative; | |
| 1082 | + z-index: 1; | |
| 1083 | + flex-shrink: 0; | |
| 1040 | 1084 | } |
| 1041 | 1085 | |
| 1042 | -.thinking-dots { | |
| 1086 | +#chat-box .bot-message.temporary-message .thinking-dots { | |
| 1043 | 1087 | display: flex; |
| 1044 | 1088 | justify-content: center; |
| 1045 | 1089 | align-items: center; |
| 1046 | 1090 | height: 90%; |
| 1091 | + gap: 5px; | |
| 1092 | + flex-shrink: 0; | |
| 1047 | 1093 | } |
| 1048 | 1094 | |
| 1049 | -.dot { | |
| 1050 | - height: 8px; | |
| 1051 | - width: 8px; | |
| 1095 | +#chat-box .bot-message.temporary-message .thinking-dots .dot { | |
| 1096 | + height: 6px; | |
| 1097 | + width: 6px; | |
| 1052 | 1098 | margin: 0 3px; |
| 1053 | 1099 | background-color: #fff; |
| 1054 | 1100 | border-radius: 50%; |
| 1055 | 1101 | display: inline-block; |
| 1102 | + position: static; | |
| 1103 | + right: auto; | |
| 1104 | + top: auto; | |
| 1105 | + text-align: initial; | |
| 1106 | + color: transparent; | |
| 1107 | + font-size: 0; | |
| 1108 | + font-weight: normal; | |
| 1109 | + line-height: normal; | |
| 1110 | + font-style: normal; | |
| 1056 | 1111 | animation: bounce 1.4s ease-in-out infinite both; |
| 1112 | + -webkit-animation: bounce 1.4s ease-in-out infinite both; | |
| 1113 | + -moz-animation: bounce 1.4s ease-in-out infinite both; | |
| 1114 | + -o-animation: bounce 1.4s ease-in-out infinite both; | |
| 1115 | + vertical-align: middle; | |
| 1057 | 1116 | } |
| 1058 | 1117 | |
| 1059 | -.dot:first-child { | |
| 1060 | - animation-delay: -.32s; | |
| 1118 | +#chat-box .bot-message.temporary-message .thinking-dots .dot:first-child { | |
| 1119 | + animation-delay: -0.32s; | |
| 1120 | + -webkit-animation-delay: -0.32s; | |
| 1121 | + -moz-animation-delay: -0.32s; | |
| 1122 | + -o-animation-delay: -0.32s; | |
| 1061 | 1123 | } |
| 1062 | 1124 | |
| 1063 | -.dot:nth-child(2) { | |
| 1064 | - animation-delay: -.16s; | |
| 1125 | +#chat-box .bot-message.temporary-message .thinking-dots .dot:nth-child(2) { | |
| 1126 | + animation-delay: -0.16s; | |
| 1127 | + -webkit-animation-delay: -0.16s; | |
| 1128 | + -moz-animation-delay: -0.16s; | |
| 1129 | + -o-animation-delay: -0.16s; | |
| 1065 | 1130 | } |
| 1066 | 1131 | |
| 1067 | 1132 | @keyframes bounce { |
| 1068 | 1133 | 0%, 100%, 80% { |
| 1069 | 1134 | transform: scale(1); |
| 1135 | + -webkit-transform: scale(1); | |
| 1136 | + -moz-transform: scale(1); | |
| 1137 | + -o-transform: scale(1); | |
| 1070 | 1138 | } |
| 1071 | 1139 | 40% { |
| 1072 | 1140 | transform: scale(1.5); |
| 1141 | + -webkit-transform: scale(1.5); | |
| 1142 | + -moz-transform: scale(1.5); | |
| 1143 | + -o-transform: scale(1.5); | |
| 1073 | 1144 | } |
| 1074 | 1145 | } |
| 1075 | 1146 | |
| 1076 | 1147 | |
| 1077 | - | |
| 1078 | 1148 | #pre-chat-message { |
| 1079 | 1149 | position: fixed; |
| 1080 | 1150 | bottom: 85px; |
| 1081 | 1151 | right: 30px; |
| @@ -1165,6 +1235,21 @@ | ||
| 1165 | 1235 | } |
| 1166 | 1236 | |
| 1167 | 1237 | |
| 1168 | 1238 | |
| 1239 | +/* Simplified styles for Perplexity status indicator */ | |
| 1240 | +#active-perplexity-container { | |
| 1241 | + display: flex; | |
| 1242 | + align-items: center; | |
| 1243 | + margin-left: 8px; | |
| 1244 | + font-size: 12px; | |
| 1245 | +} | |
| 1246 | + | |
| 1247 | +#perplexity-search-btn { | |
| 1248 | + display: none; | |
| 1249 | +} | |
| 1250 | + | |
| 1251 | +#perplexity-search-btn.active { | |
| 1252 | + opacity: 1; | |
| 1253 | +} | |
| 1169 | 1254 | |
| 1170 | 1255 | |
