@langgraph-js/ui 2.1.2 → 2.2.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 (31) hide show
  1. package/dist/assets/index-DTkiHaQ2.js +275 -0
  2. package/dist/assets/index-nM8bt1K3.css +1 -0
  3. package/dist/index.html +2 -2
  4. package/package.json +2 -2
  5. package/src/chat/Chat.tsx +135 -54
  6. package/src/chat/components/ErrorBoundary.tsx +20 -5
  7. package/src/chat/components/FileList.tsx +53 -21
  8. package/src/chat/components/HistoryList.tsx +32 -36
  9. package/src/chat/components/JsonEditorPopup.tsx +19 -22
  10. package/src/chat/components/MessageAI.tsx +5 -7
  11. package/src/chat/components/MessageBox.tsx +24 -4
  12. package/src/chat/components/MessageHuman.tsx +108 -33
  13. package/src/chat/components/MessageTool.tsx +11 -11
  14. package/src/chat/components/UsageMetadata.tsx +53 -22
  15. package/src/chat/context/ChatContext.tsx +18 -4
  16. package/src/chat/index.css +19 -0
  17. package/src/chat/store/index.ts +2 -1
  18. package/src/index.ts +1 -0
  19. package/src/settings/LoginSettings.tsx +234 -0
  20. package/src/settings/SettingFormBase.tsx +42 -0
  21. package/src/settings/SettingPanel.tsx +97 -0
  22. package/src/sonner/Toaster.tsx +117 -0
  23. package/src/sonner/index.ts +3 -0
  24. package/src/sonner/toast.ts +50 -0
  25. package/src/sonner/types.ts +21 -0
  26. package/test/App.tsx +2 -4
  27. package/tsconfig.json +1 -1
  28. package/vite.config.ts +5 -5
  29. package/dist/assets/index-DzEw-fFg.css +0 -1
  30. package/dist/assets/index-g0-NNf-r.js +0 -268
  31. package/src/login/Login.tsx +0 -200
package/src/login/Login.tsx DELETED
@@ -1,200 +0,0 @@
1
- import React, { useState } from "react";
2
-
3
- interface HeaderConfig {
4
- key: string;
5
- value: string;
6
- }
7
-
8
- const Login: React.FC = () => {
9
- const [headers, setHeaders] = useState<HeaderConfig[]>([{ key: "authorization", value: "" }]);
10
- const [withCredentials, setWithCredentials] = useState<boolean>(localStorage.getItem("withCredentials") === "true");
11
- const [apiUrl, setApiUrl] = useState<string>(localStorage.getItem("apiUrl") || "");
12
-
13
- const addHeader = () => {
14
- setHeaders([...headers, { key: "", value: "" }]);
15
- };
16
-
17
- const removeHeader = (index: number) => {
18
- setHeaders(headers.filter((_, i) => i !== index));
19
- };
20
-
21
- const updateHeader = (index: number, field: "key" | "value", value: string) => {
22
- const newHeaders = [...headers];
23
- newHeaders[index][field] = value;
24
- setHeaders(newHeaders);
25
- };
26
-
27
- const handleLogin = () => {
28
- const headerObject = Object.fromEntries(headers.map((k) => [k.key, k.value]));
29
-
30
- localStorage.setItem("code", JSON.stringify(headerObject));
31
- localStorage.setItem("withCredentials", JSON.stringify(withCredentials));
32
- localStorage.setItem("apiUrl", apiUrl);
33
- location.reload();
34
- };
35
-
36
- return (
37
- <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center p-4">
38
- <div className="w-full max-w-4xl bg-white rounded-2xl shadow-xl overflow-hidden">
39
- <div className="grid md:grid-cols-2">
40
- {/* 左侧品牌区域 */}
41
- <div className="hidden md:block bg-gradient-to-br from-blue-600 to-blue-800 p-12 text-white">
42
- <div className="h-full flex flex-col justify-between">
43
- <div>
44
- <h1 className="text-4xl font-bold mb-6">LangGraph UI</h1>
45
- <p className="text-blue-100 text-lg leading-relaxed">专业的 LangGraph 可视化界面，让您的 AI 应用开发更加高效和直观。</p>
46
- </div>
47
- <div className="space-y-4">
48
- <div className="flex items-center space-x-3">
49
- <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
50
- <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
51
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
52
- </svg>
53
- </div>
54
- <span>直观的可视化界面</span>
55
- </div>
56
- <div className="flex items-center space-x-3">
57
- <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
58
- <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
59
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
60
- </svg>
61
- </div>
62
- <span>高效的开发体验</span>
63
- </div>
64
- <div className="flex items-center space-x-3">
65
- <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
66
- <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
67
- <path
68
- strokeLinecap="round"
69
- strokeLinejoin="round"
70
- strokeWidth="2"
71
- d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
72
- />
73
- </svg>
74
- </div>
75
- <span>安全可靠的配置</span>
76
- </div>
77
- </div>
78
- </div>
79
- </div>
80
-
81
- {/* 右侧表单区域 */}
82
- <div className="p-8 md:p-12">
83
- <div className="md:hidden mb-8">
84
- <h1 className="text-3xl font-bold text-gray-900">LangGraph UI</h1>
85
- <p className="text-gray-600 mt-2">专业的 LangGraph 可视化界面</p>
86
- </div>
87
-
88
- <form
89
- onSubmit={(e) => {
90
- e.preventDefault();
91
- handleLogin();
92
- }}
93
- className="space-y-6"
94
- >
95
- <div>
96
- <label htmlFor="api-url" className="block text-sm font-medium text-gray-700 mb-2">
97
- API URL
98
- </label>
99
- <input
100
- type="text"
101
- id="api-url"
102
- value={apiUrl}
103
- onChange={(e) => setApiUrl(e.target.value)}
104
- placeholder="例如: http://localhost:8123"
105
- className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
106
- />
107
- </div>
108
-
109
- <div>
110
- <label className="block text-sm font-medium text-gray-700">请求头配置</label>
111
- {headers.map((header, index) => (
112
- <div key={index} className="bg-gray-50 rounded-lg p-4">
113
- <div className="grid grid-cols-2 gap-4">
114
- <div>
115
- <input
116
- type="text"
117
- id={`header-key-${index}`}
118
- value={header.key}
119
- onChange={(e) => updateHeader(index, "key", e.target.value)}
120
- placeholder="例如: authorization"
121
- required
122
- className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
123
- />
124
- </div>
125
- <div>
126
- <input
127
- type="text"
128
- id={`header-value-${index}`}
129
- value={header.value}
130
- onChange={(e) => updateHeader(index, "value", e.target.value)}
131
- placeholder="例如: Bearer token；无则填 1"
132
- required
133
- className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
134
- />
135
- </div>
136
- </div>
137
- {index > 0 && (
138
- <button
139
- type="button"
140
- onClick={() => removeHeader(index)}
141
- className="text-red-600 hover:text-red-700 text-sm font-medium flex items-center space-x-1 transition-colors"
142
- >
143
- <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
144
- <path
145
- strokeLinecap="round"
146
- strokeLinejoin="round"
147
- strokeWidth="2"
148
- d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
149
- />
150
- </svg>
151
- <span>删除此请求头</span>
152
- </button>
153
- )}
154
- </div>
155
- ))}
156
- </div>
157
-
158
- <div className="flex items-center space-x-3">
159
- <input
160
- type="checkbox"
161
- id="with-credentials"
162
- checked={withCredentials}
163
- onChange={(e) => setWithCredentials(e.target.checked)}
164
- className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
165
- />
166
- <label htmlFor="with-credentials" className="text-sm text-gray-700">
167
- 启用 withCredentials（跨域请求时发送 Cookie）
168
- </label>
169
- </div>
170
-
171
- <div className="flex flex-col sm:flex-row gap-4 pt-4">
172
- <button
173
- type="button"
174
- onClick={addHeader}
175
- className="flex-1 px-6 py-3 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors font-medium flex items-center justify-center space-x-2"
176
- >
177
- <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
178
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
179
- </svg>
180
- <span>添加请求头</span>
181
- </button>
182
- <button
183
- type="submit"
184
- className="flex-1 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium flex items-center justify-center space-x-2"
185
- >
186
- <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
187
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
188
- </svg>
189
- <span>保存配置</span>
190
- </button>
191
- </div>
192
- </form>
193
- </div>
194
- </div>
195
- </div>
196
- </div>
197
- );
198
- };
199
-
200
- export default Login;