@makemore/agent-frontend 2.8.3 → 2.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chat-widget.cjs.js +348 -239
- package/dist/chat-widget.css +340 -16
- package/dist/chat-widget.esm.js +359 -250
- package/dist/chat-widget.js +306 -197
- package/dist/react.cjs.js +353 -244
- package/dist/react.esm.js +364 -255
- package/package.json +2 -2
- package/src/components/ChatWidget.js +38 -6
- package/src/components/DevToolbar.js +135 -0
- package/src/hooks/useSystems.js +163 -0
- package/src/index.js +17 -0
- package/src/utils/config.js +6 -0
package/dist/chat-widget.css
CHANGED
|
@@ -788,30 +788,219 @@
|
|
|
788
788
|
}
|
|
789
789
|
}
|
|
790
790
|
|
|
791
|
-
/*
|
|
791
|
+
/* ============================================================================
|
|
792
|
+
Dark Mode Support
|
|
793
|
+
.cw-dark = forced dark, .cw-auto = follows OS prefers-color-scheme
|
|
794
|
+
============================================================================ */
|
|
795
|
+
|
|
796
|
+
/* Dark mode variable overrides */
|
|
797
|
+
.cw-container.cw-dark {
|
|
798
|
+
--cw-bg: #1e1e1e;
|
|
799
|
+
--cw-bg-muted: #2a2a2a;
|
|
800
|
+
--cw-text: #e0e0e0;
|
|
801
|
+
--cw-text-muted: #999999;
|
|
802
|
+
--cw-border: #3a3a3a;
|
|
803
|
+
--cw-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
|
|
804
|
+
}
|
|
805
|
+
|
|
792
806
|
@media (prefers-color-scheme: dark) {
|
|
793
|
-
|
|
794
|
-
--cw-bg: #
|
|
807
|
+
.cw-container.cw-auto {
|
|
808
|
+
--cw-bg: #1e1e1e;
|
|
795
809
|
--cw-bg-muted: #2a2a2a;
|
|
796
|
-
--cw-text: #
|
|
810
|
+
--cw-text: #e0e0e0;
|
|
797
811
|
--cw-text-muted: #999999;
|
|
798
812
|
--cw-border: #3a3a3a;
|
|
813
|
+
--cw-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
|
|
799
814
|
}
|
|
815
|
+
}
|
|
816
|
+
|
|
817
|
+
/* Dark mode color overrides for hardcoded elements */
|
|
818
|
+
.cw-dark .cw-message-tool-call,
|
|
819
|
+
.cw-dark .cw-tool-message.cw-tool-call {
|
|
820
|
+
background: rgba(59, 130, 246, 0.15);
|
|
821
|
+
color: #93c5fd;
|
|
822
|
+
border-color: rgba(59, 130, 246, 0.3);
|
|
823
|
+
}
|
|
824
|
+
|
|
825
|
+
.cw-dark .cw-message-tool-result,
|
|
826
|
+
.cw-dark .cw-tool-message.cw-tool-result {
|
|
827
|
+
background: rgba(34, 197, 94, 0.15);
|
|
828
|
+
color: #86efac;
|
|
829
|
+
border-color: rgba(34, 197, 94, 0.3);
|
|
830
|
+
}
|
|
831
|
+
|
|
832
|
+
.cw-dark .cw-tool-message.cw-tool-call {
|
|
833
|
+
border-left-color: #60a5fa;
|
|
834
|
+
}
|
|
835
|
+
|
|
836
|
+
.cw-dark .cw-tool-message.cw-tool-result {
|
|
837
|
+
border-left-color: #4ade80;
|
|
838
|
+
}
|
|
839
|
+
|
|
840
|
+
.cw-dark .cw-message-error,
|
|
841
|
+
.cw-dark .cw-error-bar {
|
|
842
|
+
background: rgba(239, 68, 68, 0.15);
|
|
843
|
+
color: #fca5a5;
|
|
844
|
+
border-color: rgba(239, 68, 68, 0.3);
|
|
845
|
+
}
|
|
846
|
+
|
|
847
|
+
.cw-dark .cw-tool-args,
|
|
848
|
+
.cw-dark .cw-tool-details {
|
|
849
|
+
background: rgba(255, 255, 255, 0.05);
|
|
850
|
+
}
|
|
851
|
+
|
|
852
|
+
.cw-dark .cw-message code {
|
|
853
|
+
background: rgba(255, 255, 255, 0.1);
|
|
854
|
+
}
|
|
855
|
+
|
|
856
|
+
.cw-dark .cw-dropdown-item-danger {
|
|
857
|
+
color: #fca5a5;
|
|
858
|
+
}
|
|
859
|
+
|
|
860
|
+
.cw-dark .cw-dropdown-item-danger:hover {
|
|
861
|
+
background: rgba(239, 68, 68, 0.15);
|
|
862
|
+
}
|
|
800
863
|
|
|
801
|
-
|
|
864
|
+
.cw-dark .cw-model-option-selected {
|
|
865
|
+
background: rgba(0, 102, 204, 0.2);
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
.cw-dark .cw-model-option-selected:hover {
|
|
869
|
+
background: rgba(0, 102, 204, 0.25);
|
|
870
|
+
}
|
|
871
|
+
|
|
872
|
+
.cw-dark .cw-thinking-toggle.cw-thinking-enabled {
|
|
873
|
+
background: rgba(0, 102, 204, 0.25);
|
|
874
|
+
}
|
|
875
|
+
|
|
876
|
+
.cw-dark .cw-spinner-small {
|
|
877
|
+
border-color: #3a3a3a;
|
|
878
|
+
}
|
|
879
|
+
|
|
880
|
+
.cw-dark .cw-debug-payload-btn {
|
|
881
|
+
background: rgba(255, 255, 255, 0.1);
|
|
882
|
+
color: #999;
|
|
883
|
+
}
|
|
884
|
+
|
|
885
|
+
.cw-dark .cw-debug-payload-btn:hover {
|
|
886
|
+
background: rgba(255, 255, 255, 0.2);
|
|
887
|
+
}
|
|
888
|
+
|
|
889
|
+
.cw-dark .cw-attach-btn {
|
|
890
|
+
color: #999;
|
|
891
|
+
}
|
|
892
|
+
|
|
893
|
+
.cw-dark .cw-attach-btn:hover {
|
|
894
|
+
background: rgba(255, 255, 255, 0.05);
|
|
895
|
+
color: #ccc;
|
|
896
|
+
}
|
|
897
|
+
|
|
898
|
+
.cw-dark .cw-voice-select:focus,
|
|
899
|
+
.cw-dark .cw-dev-select:focus {
|
|
900
|
+
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25);
|
|
901
|
+
}
|
|
902
|
+
|
|
903
|
+
.cw-dark .cw-sidebar {
|
|
904
|
+
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
|
|
905
|
+
}
|
|
906
|
+
|
|
907
|
+
.cw-dark .cw-message table tr:nth-child(even) {
|
|
908
|
+
background: rgba(255, 255, 255, 0.02);
|
|
909
|
+
}
|
|
910
|
+
|
|
911
|
+
/* Auto dark mode - same overrides via media query */
|
|
912
|
+
@media (prefers-color-scheme: dark) {
|
|
913
|
+
.cw-auto .cw-message-tool-call,
|
|
914
|
+
.cw-auto .cw-tool-message.cw-tool-call {
|
|
915
|
+
background: rgba(59, 130, 246, 0.15);
|
|
802
916
|
color: #93c5fd;
|
|
917
|
+
border-color: rgba(59, 130, 246, 0.3);
|
|
803
918
|
}
|
|
804
919
|
|
|
805
|
-
.cw-message-tool-result
|
|
920
|
+
.cw-auto .cw-message-tool-result,
|
|
921
|
+
.cw-auto .cw-tool-message.cw-tool-result {
|
|
922
|
+
background: rgba(34, 197, 94, 0.15);
|
|
806
923
|
color: #86efac;
|
|
924
|
+
border-color: rgba(34, 197, 94, 0.3);
|
|
925
|
+
}
|
|
926
|
+
|
|
927
|
+
.cw-auto .cw-tool-message.cw-tool-call {
|
|
928
|
+
border-left-color: #60a5fa;
|
|
929
|
+
}
|
|
930
|
+
|
|
931
|
+
.cw-auto .cw-tool-message.cw-tool-result {
|
|
932
|
+
border-left-color: #4ade80;
|
|
933
|
+
}
|
|
934
|
+
|
|
935
|
+
.cw-auto .cw-message-error,
|
|
936
|
+
.cw-auto .cw-error-bar {
|
|
937
|
+
background: rgba(239, 68, 68, 0.15);
|
|
938
|
+
color: #fca5a5;
|
|
939
|
+
border-color: rgba(239, 68, 68, 0.3);
|
|
940
|
+
}
|
|
941
|
+
|
|
942
|
+
.cw-auto .cw-tool-args,
|
|
943
|
+
.cw-auto .cw-tool-details {
|
|
944
|
+
background: rgba(255, 255, 255, 0.05);
|
|
945
|
+
}
|
|
946
|
+
|
|
947
|
+
.cw-auto .cw-message code {
|
|
948
|
+
background: rgba(255, 255, 255, 0.1);
|
|
949
|
+
}
|
|
950
|
+
|
|
951
|
+
.cw-auto .cw-dropdown-item-danger {
|
|
952
|
+
color: #fca5a5;
|
|
953
|
+
}
|
|
954
|
+
|
|
955
|
+
.cw-auto .cw-dropdown-item-danger:hover {
|
|
956
|
+
background: rgba(239, 68, 68, 0.15);
|
|
957
|
+
}
|
|
958
|
+
|
|
959
|
+
.cw-auto .cw-model-option-selected {
|
|
960
|
+
background: rgba(0, 102, 204, 0.2);
|
|
961
|
+
}
|
|
962
|
+
|
|
963
|
+
.cw-auto .cw-model-option-selected:hover {
|
|
964
|
+
background: rgba(0, 102, 204, 0.25);
|
|
965
|
+
}
|
|
966
|
+
|
|
967
|
+
.cw-auto .cw-thinking-toggle.cw-thinking-enabled {
|
|
968
|
+
background: rgba(0, 102, 204, 0.25);
|
|
969
|
+
}
|
|
970
|
+
|
|
971
|
+
.cw-auto .cw-spinner-small {
|
|
972
|
+
border-color: #3a3a3a;
|
|
807
973
|
}
|
|
808
974
|
|
|
809
|
-
.cw-
|
|
975
|
+
.cw-auto .cw-debug-payload-btn {
|
|
810
976
|
background: rgba(255, 255, 255, 0.1);
|
|
977
|
+
color: #999;
|
|
978
|
+
}
|
|
979
|
+
|
|
980
|
+
.cw-auto .cw-debug-payload-btn:hover {
|
|
981
|
+
background: rgba(255, 255, 255, 0.2);
|
|
811
982
|
}
|
|
812
983
|
|
|
813
|
-
.cw-
|
|
984
|
+
.cw-auto .cw-attach-btn {
|
|
985
|
+
color: #999;
|
|
986
|
+
}
|
|
987
|
+
|
|
988
|
+
.cw-auto .cw-attach-btn:hover {
|
|
814
989
|
background: rgba(255, 255, 255, 0.05);
|
|
990
|
+
color: #ccc;
|
|
991
|
+
}
|
|
992
|
+
|
|
993
|
+
.cw-auto .cw-voice-select:focus,
|
|
994
|
+
.cw-auto .cw-dev-select:focus {
|
|
995
|
+
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25);
|
|
996
|
+
}
|
|
997
|
+
|
|
998
|
+
.cw-auto .cw-sidebar {
|
|
999
|
+
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
|
|
1000
|
+
}
|
|
1001
|
+
|
|
1002
|
+
.cw-auto .cw-message table tr:nth-child(even) {
|
|
1003
|
+
background: rgba(255, 255, 255, 0.02);
|
|
815
1004
|
}
|
|
816
1005
|
}
|
|
817
1006
|
|
|
@@ -910,22 +1099,32 @@
|
|
|
910
1099
|
}
|
|
911
1100
|
|
|
912
1101
|
/* Dark mode adjustments for enhanced markdown */
|
|
1102
|
+
.cw-dark .cw-message pre {
|
|
1103
|
+
background: rgba(255, 255, 255, 0.05);
|
|
1104
|
+
border-color: rgba(255, 255, 255, 0.1);
|
|
1105
|
+
}
|
|
1106
|
+
|
|
1107
|
+
.cw-dark .cw-message table th {
|
|
1108
|
+
background: rgba(255, 255, 255, 0.05);
|
|
1109
|
+
}
|
|
1110
|
+
|
|
1111
|
+
.cw-dark .cw-message table th,
|
|
1112
|
+
.cw-dark .cw-message table td {
|
|
1113
|
+
border-color: rgba(255, 255, 255, 0.1);
|
|
1114
|
+
}
|
|
1115
|
+
|
|
913
1116
|
@media (prefers-color-scheme: dark) {
|
|
914
|
-
.cw-message pre {
|
|
1117
|
+
.cw-auto .cw-message pre {
|
|
915
1118
|
background: rgba(255, 255, 255, 0.05);
|
|
916
1119
|
border-color: rgba(255, 255, 255, 0.1);
|
|
917
1120
|
}
|
|
918
1121
|
|
|
919
|
-
.cw-message table th {
|
|
1122
|
+
.cw-auto .cw-message table th {
|
|
920
1123
|
background: rgba(255, 255, 255, 0.05);
|
|
921
1124
|
}
|
|
922
1125
|
|
|
923
|
-
.cw-message table
|
|
924
|
-
|
|
925
|
-
}
|
|
926
|
-
|
|
927
|
-
.cw-message table th,
|
|
928
|
-
.cw-message table td {
|
|
1126
|
+
.cw-auto .cw-message table th,
|
|
1127
|
+
.cw-auto .cw-message table td {
|
|
929
1128
|
border-color: rgba(255, 255, 255, 0.1);
|
|
930
1129
|
}
|
|
931
1130
|
}
|
|
@@ -960,6 +1159,27 @@
|
|
|
960
1159
|
--cw-radius-sm: 8px;
|
|
961
1160
|
}
|
|
962
1161
|
|
|
1162
|
+
/* Dark mode for embedded containers */
|
|
1163
|
+
.cw-container-embedded.cw-dark {
|
|
1164
|
+
--cw-bg: #1e1e1e;
|
|
1165
|
+
--cw-bg-muted: #2a2a2a;
|
|
1166
|
+
--cw-text: #e0e0e0;
|
|
1167
|
+
--cw-text-muted: #999999;
|
|
1168
|
+
--cw-border: #3a3a3a;
|
|
1169
|
+
--cw-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
|
|
1170
|
+
}
|
|
1171
|
+
|
|
1172
|
+
@media (prefers-color-scheme: dark) {
|
|
1173
|
+
.cw-container-embedded.cw-auto {
|
|
1174
|
+
--cw-bg: #1e1e1e;
|
|
1175
|
+
--cw-bg-muted: #2a2a2a;
|
|
1176
|
+
--cw-text: #e0e0e0;
|
|
1177
|
+
--cw-text-muted: #999999;
|
|
1178
|
+
--cw-border: #3a3a3a;
|
|
1179
|
+
--cw-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
|
|
1180
|
+
}
|
|
1181
|
+
}
|
|
1182
|
+
|
|
963
1183
|
.cw-container-embedded *,
|
|
964
1184
|
.cw-container-embedded *::before,
|
|
965
1185
|
.cw-container-embedded *::after {
|
|
@@ -2163,3 +2383,107 @@
|
|
|
2163
2383
|
.cw-task-remove-btn:hover {
|
|
2164
2384
|
color: #ef4444;
|
|
2165
2385
|
}
|
|
2386
|
+
|
|
2387
|
+
|
|
2388
|
+
/* =============================================================================
|
|
2389
|
+
Dev Toolbar - System/Agent/Version Picker
|
|
2390
|
+
============================================================================= */
|
|
2391
|
+
|
|
2392
|
+
.cw-dev-toolbar {
|
|
2393
|
+
display: flex;
|
|
2394
|
+
align-items: center;
|
|
2395
|
+
gap: 8px;
|
|
2396
|
+
padding: 6px 12px;
|
|
2397
|
+
background: var(--cw-bg-muted);
|
|
2398
|
+
border-bottom: 1px solid var(--cw-border);
|
|
2399
|
+
font-size: 12px;
|
|
2400
|
+
flex-shrink: 0;
|
|
2401
|
+
}
|
|
2402
|
+
|
|
2403
|
+
.cw-dev-toolbar-label {
|
|
2404
|
+
display: flex;
|
|
2405
|
+
align-items: center;
|
|
2406
|
+
gap: 4px;
|
|
2407
|
+
color: var(--cw-text-muted);
|
|
2408
|
+
font-weight: 600;
|
|
2409
|
+
font-size: 11px;
|
|
2410
|
+
text-transform: uppercase;
|
|
2411
|
+
letter-spacing: 0.5px;
|
|
2412
|
+
white-space: nowrap;
|
|
2413
|
+
flex-shrink: 0;
|
|
2414
|
+
}
|
|
2415
|
+
|
|
2416
|
+
.cw-dev-toolbar-icon {
|
|
2417
|
+
font-size: 14px;
|
|
2418
|
+
}
|
|
2419
|
+
|
|
2420
|
+
.cw-dev-toolbar-selectors {
|
|
2421
|
+
display: flex;
|
|
2422
|
+
align-items: center;
|
|
2423
|
+
gap: 8px;
|
|
2424
|
+
flex: 1;
|
|
2425
|
+
overflow-x: auto;
|
|
2426
|
+
}
|
|
2427
|
+
|
|
2428
|
+
.cw-dev-select-group {
|
|
2429
|
+
display: flex;
|
|
2430
|
+
align-items: center;
|
|
2431
|
+
gap: 4px;
|
|
2432
|
+
flex-shrink: 0;
|
|
2433
|
+
}
|
|
2434
|
+
|
|
2435
|
+
.cw-dev-label {
|
|
2436
|
+
color: var(--cw-text-muted);
|
|
2437
|
+
font-size: 11px;
|
|
2438
|
+
font-weight: 500;
|
|
2439
|
+
white-space: nowrap;
|
|
2440
|
+
}
|
|
2441
|
+
|
|
2442
|
+
.cw-dev-select {
|
|
2443
|
+
appearance: none;
|
|
2444
|
+
-webkit-appearance: none;
|
|
2445
|
+
background: var(--cw-bg);
|
|
2446
|
+
border: 1px solid var(--cw-border);
|
|
2447
|
+
border-radius: 4px;
|
|
2448
|
+
padding: 3px 22px 3px 8px;
|
|
2449
|
+
font-size: 12px;
|
|
2450
|
+
color: var(--cw-text);
|
|
2451
|
+
cursor: pointer;
|
|
2452
|
+
max-width: 140px;
|
|
2453
|
+
overflow: hidden;
|
|
2454
|
+
text-overflow: ellipsis;
|
|
2455
|
+
white-space: nowrap;
|
|
2456
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
|
|
2457
|
+
background-repeat: no-repeat;
|
|
2458
|
+
background-position: right 6px center;
|
|
2459
|
+
}
|
|
2460
|
+
|
|
2461
|
+
.cw-dev-select:hover {
|
|
2462
|
+
border-color: var(--cw-primary);
|
|
2463
|
+
}
|
|
2464
|
+
|
|
2465
|
+
.cw-dev-select:focus {
|
|
2466
|
+
outline: none;
|
|
2467
|
+
border-color: var(--cw-primary);
|
|
2468
|
+
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
|
|
2469
|
+
}
|
|
2470
|
+
|
|
2471
|
+
.cw-dev-select:disabled {
|
|
2472
|
+
opacity: 0.5;
|
|
2473
|
+
cursor: not-allowed;
|
|
2474
|
+
}
|
|
2475
|
+
|
|
2476
|
+
.cw-dev-badge {
|
|
2477
|
+
display: inline-block;
|
|
2478
|
+
background: var(--cw-bg);
|
|
2479
|
+
border: 1px solid var(--cw-border);
|
|
2480
|
+
border-radius: 4px;
|
|
2481
|
+
padding: 3px 8px;
|
|
2482
|
+
font-size: 12px;
|
|
2483
|
+
color: var(--cw-text);
|
|
2484
|
+
white-space: nowrap;
|
|
2485
|
+
max-width: 140px;
|
|
2486
|
+
overflow: hidden;
|
|
2487
|
+
text-overflow: ellipsis;
|
|
2488
|
+
opacity: 0.8;
|
|
2489
|
+
}
|