@langgraph-js/ui 1.5.0 → 1.6.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.
Files changed (47) hide show
  1. package/.env +2 -0
  2. package/.env.example +2 -0
  3. package/dist/assets/index-7vem5Peg.css +1 -0
  4. package/dist/assets/index-CZ6k2dGe.js +235 -0
  5. package/dist/index.html +3 -5
  6. package/index.html +1 -3
  7. package/package.json +10 -2
  8. package/src/artifacts/ArtifactViewer.tsx +158 -0
  9. package/src/artifacts/ArtifactsContext.tsx +99 -0
  10. package/src/artifacts/SourceCodeViewer.tsx +15 -0
  11. package/src/chat/Chat.tsx +98 -31
  12. package/src/chat/FileUpload/index.ts +3 -7
  13. package/src/chat/components/FileList.tsx +16 -12
  14. package/src/chat/components/HistoryList.tsx +39 -137
  15. package/src/chat/components/JsonEditorPopup.tsx +57 -45
  16. package/src/chat/components/JsonToMessage/JsonToMessage.tsx +20 -14
  17. package/src/chat/components/JsonToMessage/JsonToMessageButton.tsx +9 -16
  18. package/src/chat/components/JsonToMessage/index.tsx +1 -1
  19. package/src/chat/components/MessageAI.tsx +5 -4
  20. package/src/chat/components/MessageBox.tsx +21 -19
  21. package/src/chat/components/MessageHuman.tsx +13 -10
  22. package/src/chat/components/MessageTool.tsx +55 -8
  23. package/src/chat/components/UsageMetadata.tsx +41 -22
  24. package/src/chat/context/ChatContext.tsx +14 -5
  25. package/src/chat/store/index.ts +25 -2
  26. package/src/chat/tools/ask_user_for_approve.tsx +25 -13
  27. package/src/chat/tools/create_artifacts.tsx +50 -0
  28. package/src/chat/tools/index.ts +3 -2
  29. package/src/chat/tools/update_plan.tsx +75 -0
  30. package/src/chat/tools/web_search_tool.tsx +89 -0
  31. package/src/graph/index.tsx +9 -6
  32. package/src/index.ts +1 -0
  33. package/src/login/Login.tsx +155 -47
  34. package/src/memory/BaseDB.ts +92 -0
  35. package/src/memory/db.ts +232 -0
  36. package/src/memory/fulltext-search.ts +191 -0
  37. package/src/memory/index.ts +4 -0
  38. package/src/memory/tools.ts +170 -0
  39. package/test/main.tsx +2 -2
  40. package/vite.config.ts +7 -1
  41. package/dist/assets/index-CLyKQAUN.js +0 -214
  42. package/dist/assets/index-D80TEgwy.css +0 -1
  43. package/src/chat/chat.css +0 -552
  44. package/src/chat/components/FileList.css +0 -129
  45. package/src/chat/components/JsonEditorPopup.css +0 -81
  46. package/src/chat/components/JsonToMessage/JsonToMessage.css +0 -104
  47. package/src/login/Login.css +0 -93
@@ -1,129 +0,0 @@
1
- .file-list {
2
- display: flex;
3
- gap: 0.5rem;
4
- border-radius: 8px;
5
- flex:1;
6
- }
7
-
8
- .file-list-header {
9
- margin-bottom: 1rem;
10
- }
11
-
12
- .file-upload-button {
13
- display: inline-flex;
14
- align-items: center;
15
- justify-content: center;
16
- width: 80px;
17
- height: 80px;
18
- color: #929292;
19
- background-color: #ebebeb;
20
- border-radius: 6px;
21
- cursor: pointer;
22
- transition: all 0.2s;
23
- }
24
-
25
- .file-upload-button svg {
26
- width: 32px;
27
- height: 32px;
28
- }
29
-
30
- .file-upload-button.empty {
31
- width: 32px;
32
- height: 32px;
33
- }
34
-
35
- .file-upload-button.empty svg {
36
- width: 20px;
37
- height: 20px;
38
- }
39
-
40
- .file-list-content {
41
- display: flex;
42
- flex-wrap: wrap;
43
- gap: 0.5rem;
44
- }
45
-
46
- .file-item {
47
- position: relative;
48
- width: 80px;
49
- height: 80px;
50
- border-radius: 6px;
51
- overflow: hidden;
52
- }
53
- .file-item img{
54
- border: 1px solid #e5e7eb;
55
- overflow: hidden;
56
- }
57
-
58
- .file-preview {
59
- width: 100%;
60
- height: 100%;
61
- object-fit: cover;
62
- }
63
-
64
- .file-info {
65
- padding: 0.75rem;
66
- }
67
-
68
- .file-name {
69
- display: block;
70
- font-size: 0.875rem;
71
- color: #374151;
72
- margin-bottom: 0.5rem;
73
- white-space: nowrap;
74
- overflow: hidden;
75
- text-overflow: ellipsis;
76
- }
77
-
78
- .file-actions {
79
- display: flex;
80
- gap: 0.5rem;
81
- }
82
-
83
- .upload-button,
84
- .remove-button {
85
- flex: 1;
86
- padding: 0.375rem 0.75rem;
87
- border: none;
88
- border-radius: 4px;
89
- font-size: 0.75rem;
90
- cursor: pointer;
91
- transition: all 0.2s;
92
- }
93
-
94
- .upload-button {
95
- color: black;
96
- }
97
-
98
- .upload-button:hover {
99
- background-color: #2563eb;
100
- }
101
-
102
- .remove-button {
103
- position: absolute;
104
- top: 2px;
105
- right: 2px;
106
- width: 20px;
107
- height: 20px;
108
- background-color: rgba(0, 0, 0, 0.5);
109
- color: white;
110
- border: none;
111
- border-radius: 50%;
112
- cursor: pointer;
113
- font-size: 16px;
114
- line-height: 1;
115
- display: flex;
116
- align-items: center;
117
- justify-content: center;
118
- transition: background-color 0.2s;
119
- }
120
-
121
- .remove-button:hover {
122
- background-color: rgba(0, 0, 0, 0.7);
123
- }
124
-
125
- .upload-button:disabled,
126
- .remove-button:disabled {
127
- opacity: 0.5;
128
- cursor: not-allowed;
129
- }
@@ -1,81 +0,0 @@
1
- .json-editor-popup-overlay {
2
- position: fixed;
3
- top: 0;
4
- left: 0;
5
- right: 0;
6
- bottom: 0;
7
- background-color: rgba(0, 0, 0, 0.5);
8
- display: flex;
9
- align-items: center;
10
- justify-content: center;
11
- z-index: 1000;
12
- }
13
-
14
- .json-editor-popup-content {
15
- background-color: white;
16
- padding: 20px;
17
- border-radius: 8px;
18
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
19
- width: 80%;
20
- max-width: 600px;
21
- display: flex;
22
- flex-direction: column;
23
- }
24
-
25
- .json-editor-popup-content h2 {
26
- margin-top: 0;
27
- margin-bottom: 15px;
28
- font-size: 1.5rem;
29
- color: #333;
30
- }
31
-
32
- .json-editor-popup-content textarea {
33
- width: 100%;
34
- padding: 10px;
35
- border: 1px solid #ccc;
36
- border-radius: 4px;
37
- font-family: monospace;
38
- font-size: 0.9rem;
39
- resize: vertical;
40
- box-sizing: border-box;
41
- }
42
-
43
- .json-editor-popup-content .error-message {
44
- color: red;
45
- font-size: 0.8rem;
46
- margin-top: 5px;
47
- margin-bottom: 10px;
48
- }
49
-
50
- .popup-actions {
51
- display: flex;
52
- justify-content: flex-end;
53
- margin-top: 15px;
54
- gap: 10px;
55
- }
56
-
57
- .popup-actions button {
58
- padding: 8px 16px;
59
- border: none;
60
- border-radius: 4px;
61
- cursor: pointer;
62
- font-size: 0.9rem;
63
- }
64
-
65
- .popup-actions .save-button {
66
- background-color: #3b82f6;
67
- color: white;
68
- }
69
-
70
- .popup-actions .save-button:hover {
71
- background-color: #2563eb;
72
- }
73
-
74
- .popup-actions .cancel-button {
75
- background-color: #e5e7eb;
76
- color: #374151;
77
- }
78
-
79
- .popup-actions .cancel-button:hover {
80
- background-color: #d1d5db;
81
- }
@@ -1,104 +0,0 @@
1
- .json-to-message-overlay {
2
- position: fixed;
3
- top: 0;
4
- left: 0;
5
- right: 0;
6
- bottom: 0;
7
- background-color: rgba(0, 0, 0, 0.5);
8
- display: flex;
9
- align-items: center;
10
- justify-content: center;
11
- z-index: 1000;
12
- }
13
-
14
- .json-to-message-content {
15
- background-color: white;
16
- border-radius: 8px;
17
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
18
- width: 90%;
19
- max-width: 1200px;
20
- height: 80vh;
21
- max-height: 800px;
22
- display: flex;
23
- flex-direction: column;
24
- overflow: hidden;
25
- }
26
-
27
- .json-to-message-header {
28
- display: flex;
29
- justify-content: space-between;
30
- align-items: center;
31
- padding: 15px 20px;
32
- border-bottom: 1px solid #eaeaea;
33
- }
34
-
35
- .json-to-message-header h2 {
36
- margin: 0;
37
- font-size: 1.5rem;
38
- color: #333;
39
- }
40
-
41
- .close-button {
42
- background: none;
43
- border: none;
44
- font-size: 1.5rem;
45
- cursor: pointer;
46
- color: #666;
47
- }
48
-
49
- .close-button:hover {
50
- color: #000;
51
- }
52
-
53
- .json-to-message-body {
54
- display: flex;
55
- flex: 1;
56
- overflow: hidden;
57
- }
58
-
59
- .json-editor-pane {
60
- flex: 1;
61
- padding: 15px;
62
- display: flex;
63
- flex-direction: column;
64
- border-right: 1px solid #eaeaea;
65
- }
66
-
67
- .json-editor-pane textarea {
68
- flex: 1;
69
- font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", monospace;
70
- font-size: 0.9rem;
71
- padding: 10px;
72
- border: 1px solid #ddd;
73
- border-radius: 4px;
74
- resize: none;
75
- }
76
-
77
- .error-message {
78
- color: #e53e3e;
79
- margin-top: 10px;
80
- font-size: 0.9rem;
81
- }
82
-
83
- .message-preview-pane {
84
- flex: 1;
85
- padding: 15px;
86
- overflow-y: auto;
87
- background-color: #f9f9f9;
88
- }
89
-
90
- .preview-container {
91
- padding: 10px;
92
- background-color: white;
93
- border-radius: 4px;
94
- min-height: 100%;
95
- }
96
-
97
- .no-preview {
98
- display: flex;
99
- align-items: center;
100
- justify-content: center;
101
- height: 100%;
102
- color: #666;
103
- font-style: italic;
104
- }
@@ -1,93 +0,0 @@
1
- .login-container {
2
- max-width: 600px;
3
- margin: 2rem auto;
4
- padding: 2rem;
5
- background: #fff;
6
- border-radius: 8px;
7
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
8
- }
9
-
10
- .header-group {
11
- display: flex;
12
- gap: 1rem;
13
- align-items: flex-start;
14
- padding: 1rem;
15
- background: #f8f9fa;
16
- border-radius: 4px;
17
- position: relative;
18
- }
19
-
20
- .form-group {
21
- flex: 1;
22
- }
23
-
24
- .form-group label {
25
- display: block;
26
- margin-bottom: 0.5rem;
27
- color: #333;
28
- font-weight: 500;
29
- }
30
-
31
- .form-group input {
32
- width: 100%;
33
- padding: 0.5rem;
34
- border: 1px solid #ddd;
35
- border-radius: 4px;
36
- font-size: 1rem;
37
- }
38
-
39
- .form-group input:focus {
40
- outline: none;
41
- border-color: #007bff;
42
- box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
43
- }
44
-
45
- .button-group {
46
- display: flex;
47
- gap: 1rem;
48
- margin-top: 1rem;
49
- }
50
-
51
- button {
52
- padding: 0.5rem 1rem;
53
- border: none;
54
- border-radius: 4px;
55
- font-size: 1rem;
56
- cursor: pointer;
57
- transition: background-color 0.2s;
58
- }
59
-
60
- button[type="submit"] {
61
- background-color: #007bff;
62
- color: white;
63
- }
64
-
65
- button[type="submit"]:hover {
66
- background-color: #0056b3;
67
- }
68
-
69
- button[type="button"] {
70
- background-color: #6c757d;
71
- color: white;
72
- }
73
-
74
- button[type="button"]:hover {
75
- background-color: #5a6268;
76
- }
77
-
78
- .remove-header {
79
- background-color: #dc3545;
80
- color: white;
81
- padding: 0.25rem 0.5rem;
82
- font-size: 0.875rem;
83
- }
84
-
85
- .remove-header:hover {
86
- background-color: #c82333;
87
- }
88
-
89
- p {
90
- margin-bottom: 1.5rem;
91
- color: #666;
92
- text-align: center;
93
- }