@autobe/ui 0.30.2 → 0.30.4-dev.20260324

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 (69) hide show
  1. package/LICENSE +661 -661
  2. package/README.md +261 -0
  3. package/lib/components/AutoBeChatMain.d.ts +6 -0
  4. package/lib/components/AutoBeChatMain.js +46 -37
  5. package/lib/components/AutoBeChatMain.js.map +1 -1
  6. package/lib/components/AutoBeConfigModal.js +9 -9
  7. package/lib/components/events/AutoBeEventMovie.js +0 -4
  8. package/lib/components/events/AutoBeEventMovie.js.map +1 -1
  9. package/lib/components/events/AutoBeProgressEventMovie.js +0 -10
  10. package/lib/components/events/AutoBeProgressEventMovie.js.map +1 -1
  11. package/lib/components/upload/AutoBeChatUploadBox.d.ts +1 -0
  12. package/lib/components/upload/AutoBeChatUploadBox.js +11 -16
  13. package/lib/components/upload/AutoBeChatUploadBox.js.map +1 -1
  14. package/lib/context/AutoBeAgentContext.js +78 -30
  15. package/lib/context/AutoBeAgentContext.js.map +1 -1
  16. package/lib/context/SearchParamsContext.js +1 -1
  17. package/lib/context/SearchParamsContext.js.map +1 -1
  18. package/lib/structure/AutoBeListener.d.ts +1 -0
  19. package/lib/structure/AutoBeListener.js +9 -11
  20. package/lib/structure/AutoBeListener.js.map +1 -1
  21. package/package.json +2 -2
  22. package/src/components/AutoBeAssistantMessageMovie.tsx +22 -22
  23. package/src/components/AutoBeChatMain.tsx +394 -376
  24. package/src/components/AutoBeChatSidebar.tsx +414 -414
  25. package/src/components/AutoBeConfigButton.tsx +83 -83
  26. package/src/components/AutoBeConfigModal.tsx +443 -443
  27. package/src/components/AutoBeStatusButton.tsx +75 -75
  28. package/src/components/AutoBeStatusModal.tsx +486 -486
  29. package/src/components/AutoBeUserMessageMovie.tsx +27 -27
  30. package/src/components/common/ActionButton.tsx +205 -205
  31. package/src/components/common/ActionButtonGroup.tsx +80 -80
  32. package/src/components/common/AutoBeConfigInput.tsx +185 -185
  33. package/src/components/common/ChatBubble.tsx +119 -119
  34. package/src/components/common/Collapsible.tsx +95 -95
  35. package/src/components/common/CompactSessionIndicator.tsx +73 -73
  36. package/src/components/common/CompactSessionList.tsx +82 -82
  37. package/src/components/common/openai/OpenAIContent.tsx +53 -53
  38. package/src/components/common/openai/OpenAIUserAudioContent.tsx +70 -70
  39. package/src/components/common/openai/OpenAIUserFileContent.tsx +76 -76
  40. package/src/components/common/openai/OpenAIUserImageContent.tsx +34 -34
  41. package/src/components/common/openai/OpenAIUserTextContent.tsx +15 -15
  42. package/src/components/events/AutoBeCompleteEventMovie.tsx +402 -402
  43. package/src/components/events/AutoBeCorrectEventMovie.tsx +354 -354
  44. package/src/components/events/AutoBeEventGroupMovie.tsx +18 -18
  45. package/src/components/events/AutoBeEventMovie.tsx +154 -158
  46. package/src/components/events/AutoBeProgressEventMovie.tsx +207 -217
  47. package/src/components/events/AutoBeScenarioEventMovie.tsx +135 -135
  48. package/src/components/events/AutoBeStartEventMovie.tsx +82 -82
  49. package/src/components/events/AutoBeValidateEventMovie.tsx +249 -249
  50. package/src/components/events/README.md +300 -300
  51. package/src/components/events/common/CollapsibleEventGroup.tsx +211 -211
  52. package/src/components/events/common/EventCard.tsx +61 -61
  53. package/src/components/events/common/EventContent.tsx +31 -31
  54. package/src/components/events/common/EventHeader.tsx +85 -85
  55. package/src/components/events/common/EventIcon.tsx +82 -82
  56. package/src/components/events/common/ProgressBar.tsx +64 -64
  57. package/src/components/events/groups/CorrectEventGroup.tsx +183 -183
  58. package/src/components/events/groups/ValidateEventGroup.tsx +143 -143
  59. package/src/components/events/utils/eventGrouper.tsx +116 -116
  60. package/src/components/upload/AutoBeChatUploadBox.tsx +433 -425
  61. package/src/components/upload/AutoBeChatUploadSendButton.tsx +66 -66
  62. package/src/components/upload/AutoBeFileUploadBox.tsx +123 -123
  63. package/src/components/upload/AutoBeVoiceRecoderButton.tsx +100 -100
  64. package/src/context/AutoBeAgentContext.tsx +301 -245
  65. package/src/context/AutoBeAgentSessionList.tsx +58 -58
  66. package/src/context/SearchParamsContext.tsx +49 -49
  67. package/src/icons/Receipt.tsx +74 -74
  68. package/src/structure/AutoBeListener.ts +368 -373
  69. package/tsconfig.json +9 -9
@@ -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
+ }