@autobe/ui 0.30.4-dev.20260324 → 0.30.4

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 (53) hide show
  1. package/LICENSE +661 -661
  2. package/lib/components/AutoBeChatMain.js +5 -5
  3. package/lib/components/AutoBeConfigModal.js +9 -9
  4. package/package.json +2 -2
  5. package/src/components/AutoBeAssistantMessageMovie.tsx +22 -22
  6. package/src/components/AutoBeChatMain.tsx +394 -394
  7. package/src/components/AutoBeChatSidebar.tsx +414 -414
  8. package/src/components/AutoBeConfigButton.tsx +83 -83
  9. package/src/components/AutoBeConfigModal.tsx +443 -443
  10. package/src/components/AutoBeStatusButton.tsx +75 -75
  11. package/src/components/AutoBeStatusModal.tsx +486 -486
  12. package/src/components/AutoBeUserMessageMovie.tsx +27 -27
  13. package/src/components/common/ActionButton.tsx +205 -205
  14. package/src/components/common/ActionButtonGroup.tsx +80 -80
  15. package/src/components/common/AutoBeConfigInput.tsx +185 -185
  16. package/src/components/common/ChatBubble.tsx +119 -119
  17. package/src/components/common/Collapsible.tsx +95 -95
  18. package/src/components/common/CompactSessionIndicator.tsx +73 -73
  19. package/src/components/common/CompactSessionList.tsx +82 -82
  20. package/src/components/common/openai/OpenAIContent.tsx +53 -53
  21. package/src/components/common/openai/OpenAIUserAudioContent.tsx +70 -70
  22. package/src/components/common/openai/OpenAIUserFileContent.tsx +76 -76
  23. package/src/components/common/openai/OpenAIUserImageContent.tsx +34 -34
  24. package/src/components/common/openai/OpenAIUserTextContent.tsx +15 -15
  25. package/src/components/events/AutoBeCompleteEventMovie.tsx +402 -402
  26. package/src/components/events/AutoBeCorrectEventMovie.tsx +354 -354
  27. package/src/components/events/AutoBeEventGroupMovie.tsx +18 -18
  28. package/src/components/events/AutoBeEventMovie.tsx +154 -154
  29. package/src/components/events/AutoBeProgressEventMovie.tsx +207 -207
  30. package/src/components/events/AutoBeScenarioEventMovie.tsx +135 -135
  31. package/src/components/events/AutoBeStartEventMovie.tsx +82 -82
  32. package/src/components/events/AutoBeValidateEventMovie.tsx +249 -249
  33. package/src/components/events/README.md +300 -300
  34. package/src/components/events/common/CollapsibleEventGroup.tsx +211 -211
  35. package/src/components/events/common/EventCard.tsx +61 -61
  36. package/src/components/events/common/EventContent.tsx +31 -31
  37. package/src/components/events/common/EventHeader.tsx +85 -85
  38. package/src/components/events/common/EventIcon.tsx +82 -82
  39. package/src/components/events/common/ProgressBar.tsx +64 -64
  40. package/src/components/events/groups/CorrectEventGroup.tsx +183 -183
  41. package/src/components/events/groups/ValidateEventGroup.tsx +143 -143
  42. package/src/components/events/utils/eventGrouper.tsx +116 -116
  43. package/src/components/upload/AutoBeChatUploadBox.tsx +433 -433
  44. package/src/components/upload/AutoBeChatUploadSendButton.tsx +66 -66
  45. package/src/components/upload/AutoBeFileUploadBox.tsx +123 -123
  46. package/src/components/upload/AutoBeVoiceRecoderButton.tsx +100 -100
  47. package/src/context/AutoBeAgentContext.tsx +301 -301
  48. package/src/context/AutoBeAgentSessionList.tsx +58 -58
  49. package/src/context/SearchParamsContext.tsx +49 -49
  50. package/src/icons/Receipt.tsx +74 -74
  51. package/src/structure/AutoBeListener.ts +368 -368
  52. package/tsconfig.json +9 -9
  53. package/README.md +0 -261
@@ -1,249 +1,249 @@
1
- import {
2
- AutoBeDatabaseValidateEvent,
3
- AutoBeInterfaceOperationReviewEvent,
4
- AutoBeRealizeAuthorizationValidateEvent,
5
- AutoBeRealizeValidateEvent,
6
- AutoBeTestValidateEvent,
7
- } from "@autobe/interface";
8
- import { JSX } from "react";
9
-
10
- import { EventCard, EventContent, EventHeader } from "./common";
11
-
12
- export interface IAutoBeValidateEventMovieProps {
13
- event:
14
- | AutoBeDatabaseValidateEvent
15
- | AutoBeInterfaceOperationReviewEvent
16
- | AutoBeTestValidateEvent
17
- | AutoBeRealizeValidateEvent
18
- | AutoBeRealizeAuthorizationValidateEvent;
19
- }
20
-
21
- export const AutoBeValidateEventMovie = (
22
- props: IAutoBeValidateEventMovieProps,
23
- ) => {
24
- const { event } = props;
25
- const { title, description, isError, step, isSuccess } = getState(event);
26
-
27
- const getCardVariant = () => {
28
- if (isSuccess) return "success";
29
- if (isError) return "warning";
30
- return "warning";
31
- };
32
-
33
- const getIconType = () => {
34
- if (isSuccess) return "success";
35
- if (isError) return "warning";
36
- return "warning";
37
- };
38
-
39
- return (
40
- <EventCard variant={getCardVariant()}>
41
- <EventHeader
42
- title={title}
43
- timestamp={event.created_at}
44
- iconType={getIconType()}
45
- step={step}
46
- />
47
- <EventContent>{description}</EventContent>
48
- </EventCard>
49
- );
50
- };
51
-
52
- export default AutoBeValidateEventMovie;
53
-
54
- interface IState {
55
- title: string;
56
- description: string | JSX.Element;
57
- isError: boolean;
58
- isSuccess: boolean;
59
- step?: number;
60
- }
61
-
62
- function getState(event: IAutoBeValidateEventMovieProps["event"]): IState {
63
- switch (event.type) {
64
- case "databaseValidate":
65
- return {
66
- title: "Prisma Validation Failed",
67
- description: (
68
- <>
69
- Database schema validation encountered errors that require
70
- correction.
71
- <br />
72
- <br />
73
- <strong>Error Details:</strong>
74
- <br />
75
- {event.result.errors.length > 0 && (
76
- <>
77
- {event.result.errors.slice(0, 3).map((error, idx) => (
78
- <div key={idx} style={{ marginTop: "0.25rem" }}>
79
- • {error.message}
80
- </div>
81
- ))}
82
- </>
83
- )}
84
- <br />
85
- <strong>Failed Schemas:</strong> {Object.keys(event.schemas).length}{" "}
86
- file(s)
87
- </>
88
- ),
89
- isError: true,
90
- isSuccess: false,
91
- step: event.step,
92
- };
93
- case "testValidate":
94
- const isTestSuccess = event.result.type === "success";
95
- return {
96
- title: isTestSuccess
97
- ? "Test Validation Successful"
98
- : "Test Validation Failed",
99
- description: (
100
- <>
101
- Test file validation completed.
102
- <br />
103
- <br />
104
- <strong>Function:</strong> {event.function.location}
105
- <br />
106
- <strong>Status:</strong> {isTestSuccess ? "Success" : "Failed"}
107
- {!isTestSuccess && (
108
- <>
109
- <br />
110
- <br />
111
- <strong>Compilation Issues:</strong>
112
- <br />
113
- {event.result.type === "failure" &&
114
- event.result.diagnostics
115
- .slice(0, 3)
116
- .map((diagnostic, idx) => (
117
- <div key={idx} style={{ marginTop: "0.25rem" }}>
118
- • {diagnostic.messageText}
119
- </div>
120
- ))}
121
- {event.result.type === "exception" && (
122
- <div style={{ marginTop: "0.25rem" }}>
123
- • Exception occurred during compilation
124
- </div>
125
- )}
126
- </>
127
- )}
128
- </>
129
- ),
130
- isError: !isTestSuccess,
131
- isSuccess: isTestSuccess,
132
- step: event.step,
133
- };
134
- case "realizeValidate":
135
- return {
136
- title: "Implementation Validation Failed",
137
- description: (
138
- <>
139
- Implementation code compilation encountered errors that need
140
- correction.
141
- <br />
142
- <br />
143
- <strong>Failed Files:</strong> {Object.keys(event.files).length}{" "}
144
- file(s)
145
- <br />
146
- <br />
147
- <strong>Error Type:</strong>{" "}
148
- {event.result.type === "failure"
149
- ? "Compilation Error"
150
- : "Runtime Exception"}
151
- <br />
152
- {event.result.type === "failure" &&
153
- event.result.diagnostics.length > 0 && (
154
- <>
155
- <br />
156
- <strong>First Error:</strong>
157
- <br />
158
- {event.result.diagnostics[0].messageText}
159
- </>
160
- )}
161
- </>
162
- ),
163
- isError: true,
164
- isSuccess: false,
165
- step: event.step,
166
- };
167
- case "realizeAuthorizationValidate":
168
- const isAuthSuccess = event.result.type === "success";
169
- return {
170
- title: isAuthSuccess
171
- ? "Authorization Validation Successful"
172
- : "Authorization Validation Failed",
173
- description: (
174
- <>
175
- Authorization implementation validation completed.
176
- <br />
177
- <br />
178
- <strong>Actor:</strong> {event.authorization.actor.name}(
179
- {event.authorization.actor.description})
180
- <br />
181
- <strong>Status:</strong> {isAuthSuccess ? "Success" : "Failed"}
182
- {!isAuthSuccess && (
183
- <>
184
- <br />
185
- <br />
186
- <strong>Validation Issues:</strong>
187
- <br />
188
- {event.result.type === "failure" &&
189
- event.result.diagnostics
190
- .slice(0, 2)
191
- .map((diagnostic, idx) => (
192
- <div key={idx} style={{ marginTop: "0.25rem" }}>
193
- • {diagnostic.messageText}
194
- </div>
195
- ))}
196
- {event.result.type === "exception" && (
197
- <div style={{ marginTop: "0.25rem" }}>
198
- • Exception occurred during validation
199
- </div>
200
- )}
201
- </>
202
- )}
203
- </>
204
- ),
205
- isError: !isAuthSuccess,
206
- isSuccess: isAuthSuccess,
207
- step: event.step,
208
- };
209
- case "interfaceOperationReview":
210
- return {
211
- title: "Interface Operations Review",
212
- description: (
213
- <>
214
- API operations are being reviewed for quality and consistency.
215
- <br />
216
- <br />
217
- <strong>Method:</strong> {event.operation.method.toUpperCase()}
218
- <br />
219
- <strong>Path:</strong> {event.operation.path}
220
- <br />
221
- <strong>Status:</strong> Review in progress
222
- <br />
223
- <br />
224
- <strong>Review Summary:</strong>
225
- <br />
226
- <div
227
- style={{
228
- maxHeight: "100px",
229
- overflow: "hidden",
230
- fontSize: "0.75rem",
231
- color: "#64748b",
232
- marginTop: "0.5rem",
233
- }}
234
- >
235
- {event.review.length > 200
236
- ? `${event.review.substring(0, 200)}...`
237
- : event.review}
238
- </div>
239
- </>
240
- ),
241
- isError: false,
242
- isSuccess: true,
243
- step: event.step,
244
- };
245
- default:
246
- event satisfies never;
247
- throw new Error("Unknown validation event type");
248
- }
249
- }
1
+ import {
2
+ AutoBeDatabaseValidateEvent,
3
+ AutoBeInterfaceOperationReviewEvent,
4
+ AutoBeRealizeAuthorizationValidateEvent,
5
+ AutoBeRealizeValidateEvent,
6
+ AutoBeTestValidateEvent,
7
+ } from "@autobe/interface";
8
+ import { JSX } from "react";
9
+
10
+ import { EventCard, EventContent, EventHeader } from "./common";
11
+
12
+ export interface IAutoBeValidateEventMovieProps {
13
+ event:
14
+ | AutoBeDatabaseValidateEvent
15
+ | AutoBeInterfaceOperationReviewEvent
16
+ | AutoBeTestValidateEvent
17
+ | AutoBeRealizeValidateEvent
18
+ | AutoBeRealizeAuthorizationValidateEvent;
19
+ }
20
+
21
+ export const AutoBeValidateEventMovie = (
22
+ props: IAutoBeValidateEventMovieProps,
23
+ ) => {
24
+ const { event } = props;
25
+ const { title, description, isError, step, isSuccess } = getState(event);
26
+
27
+ const getCardVariant = () => {
28
+ if (isSuccess) return "success";
29
+ if (isError) return "warning";
30
+ return "warning";
31
+ };
32
+
33
+ const getIconType = () => {
34
+ if (isSuccess) return "success";
35
+ if (isError) return "warning";
36
+ return "warning";
37
+ };
38
+
39
+ return (
40
+ <EventCard variant={getCardVariant()}>
41
+ <EventHeader
42
+ title={title}
43
+ timestamp={event.created_at}
44
+ iconType={getIconType()}
45
+ step={step}
46
+ />
47
+ <EventContent>{description}</EventContent>
48
+ </EventCard>
49
+ );
50
+ };
51
+
52
+ export default AutoBeValidateEventMovie;
53
+
54
+ interface IState {
55
+ title: string;
56
+ description: string | JSX.Element;
57
+ isError: boolean;
58
+ isSuccess: boolean;
59
+ step?: number;
60
+ }
61
+
62
+ function getState(event: IAutoBeValidateEventMovieProps["event"]): IState {
63
+ switch (event.type) {
64
+ case "databaseValidate":
65
+ return {
66
+ title: "Prisma Validation Failed",
67
+ description: (
68
+ <>
69
+ Database schema validation encountered errors that require
70
+ correction.
71
+ <br />
72
+ <br />
73
+ <strong>Error Details:</strong>
74
+ <br />
75
+ {event.result.errors.length > 0 && (
76
+ <>
77
+ {event.result.errors.slice(0, 3).map((error, idx) => (
78
+ <div key={idx} style={{ marginTop: "0.25rem" }}>
79
+ • {error.message}
80
+ </div>
81
+ ))}
82
+ </>
83
+ )}
84
+ <br />
85
+ <strong>Failed Schemas:</strong> {Object.keys(event.schemas).length}{" "}
86
+ file(s)
87
+ </>
88
+ ),
89
+ isError: true,
90
+ isSuccess: false,
91
+ step: event.step,
92
+ };
93
+ case "testValidate":
94
+ const isTestSuccess = event.result.type === "success";
95
+ return {
96
+ title: isTestSuccess
97
+ ? "Test Validation Successful"
98
+ : "Test Validation Failed",
99
+ description: (
100
+ <>
101
+ Test file validation completed.
102
+ <br />
103
+ <br />
104
+ <strong>Function:</strong> {event.function.location}
105
+ <br />
106
+ <strong>Status:</strong> {isTestSuccess ? "Success" : "Failed"}
107
+ {!isTestSuccess && (
108
+ <>
109
+ <br />
110
+ <br />
111
+ <strong>Compilation Issues:</strong>
112
+ <br />
113
+ {event.result.type === "failure" &&
114
+ event.result.diagnostics
115
+ .slice(0, 3)
116
+ .map((diagnostic, idx) => (
117
+ <div key={idx} style={{ marginTop: "0.25rem" }}>
118
+ • {diagnostic.messageText}
119
+ </div>
120
+ ))}
121
+ {event.result.type === "exception" && (
122
+ <div style={{ marginTop: "0.25rem" }}>
123
+ • Exception occurred during compilation
124
+ </div>
125
+ )}
126
+ </>
127
+ )}
128
+ </>
129
+ ),
130
+ isError: !isTestSuccess,
131
+ isSuccess: isTestSuccess,
132
+ step: event.step,
133
+ };
134
+ case "realizeValidate":
135
+ return {
136
+ title: "Implementation Validation Failed",
137
+ description: (
138
+ <>
139
+ Implementation code compilation encountered errors that need
140
+ correction.
141
+ <br />
142
+ <br />
143
+ <strong>Failed Files:</strong> {Object.keys(event.files).length}{" "}
144
+ file(s)
145
+ <br />
146
+ <br />
147
+ <strong>Error Type:</strong>{" "}
148
+ {event.result.type === "failure"
149
+ ? "Compilation Error"
150
+ : "Runtime Exception"}
151
+ <br />
152
+ {event.result.type === "failure" &&
153
+ event.result.diagnostics.length > 0 && (
154
+ <>
155
+ <br />
156
+ <strong>First Error:</strong>
157
+ <br />
158
+ {event.result.diagnostics[0].messageText}
159
+ </>
160
+ )}
161
+ </>
162
+ ),
163
+ isError: true,
164
+ isSuccess: false,
165
+ step: event.step,
166
+ };
167
+ case "realizeAuthorizationValidate":
168
+ const isAuthSuccess = event.result.type === "success";
169
+ return {
170
+ title: isAuthSuccess
171
+ ? "Authorization Validation Successful"
172
+ : "Authorization Validation Failed",
173
+ description: (
174
+ <>
175
+ Authorization implementation validation completed.
176
+ <br />
177
+ <br />
178
+ <strong>Actor:</strong> {event.authorization.actor.name}(
179
+ {event.authorization.actor.description})
180
+ <br />
181
+ <strong>Status:</strong> {isAuthSuccess ? "Success" : "Failed"}
182
+ {!isAuthSuccess && (
183
+ <>
184
+ <br />
185
+ <br />
186
+ <strong>Validation Issues:</strong>
187
+ <br />
188
+ {event.result.type === "failure" &&
189
+ event.result.diagnostics
190
+ .slice(0, 2)
191
+ .map((diagnostic, idx) => (
192
+ <div key={idx} style={{ marginTop: "0.25rem" }}>
193
+ • {diagnostic.messageText}
194
+ </div>
195
+ ))}
196
+ {event.result.type === "exception" && (
197
+ <div style={{ marginTop: "0.25rem" }}>
198
+ • Exception occurred during validation
199
+ </div>
200
+ )}
201
+ </>
202
+ )}
203
+ </>
204
+ ),
205
+ isError: !isAuthSuccess,
206
+ isSuccess: isAuthSuccess,
207
+ step: event.step,
208
+ };
209
+ case "interfaceOperationReview":
210
+ return {
211
+ title: "Interface Operations Review",
212
+ description: (
213
+ <>
214
+ API operations are being reviewed for quality and consistency.
215
+ <br />
216
+ <br />
217
+ <strong>Method:</strong> {event.operation.method.toUpperCase()}
218
+ <br />
219
+ <strong>Path:</strong> {event.operation.path}
220
+ <br />
221
+ <strong>Status:</strong> Review in progress
222
+ <br />
223
+ <br />
224
+ <strong>Review Summary:</strong>
225
+ <br />
226
+ <div
227
+ style={{
228
+ maxHeight: "100px",
229
+ overflow: "hidden",
230
+ fontSize: "0.75rem",
231
+ color: "#64748b",
232
+ marginTop: "0.5rem",
233
+ }}
234
+ >
235
+ {event.review.length > 200
236
+ ? `${event.review.substring(0, 200)}...`
237
+ : event.review}
238
+ </div>
239
+ </>
240
+ ),
241
+ isError: false,
242
+ isSuccess: true,
243
+ step: event.step,
244
+ };
245
+ default:
246
+ event satisfies never;
247
+ throw new Error("Unknown validation event type");
248
+ }
249
+ }