@autobe/ui 0.30.0-dev.20260315 → 0.30.1

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 (86) 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 +376 -376
  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/index.ts +8 -8
  21. package/src/components/common/openai/OpenAIContent.tsx +53 -53
  22. package/src/components/common/openai/OpenAIUserAudioContent.tsx +70 -70
  23. package/src/components/common/openai/OpenAIUserFileContent.tsx +76 -76
  24. package/src/components/common/openai/OpenAIUserImageContent.tsx +34 -34
  25. package/src/components/common/openai/OpenAIUserTextContent.tsx +15 -15
  26. package/src/components/common/openai/index.ts +5 -5
  27. package/src/components/events/AutoBeCompleteEventMovie.tsx +402 -402
  28. package/src/components/events/AutoBeCorrectEventMovie.tsx +354 -354
  29. package/src/components/events/AutoBeEventGroupMovie.tsx +18 -18
  30. package/src/components/events/AutoBeEventMovie.tsx +158 -158
  31. package/src/components/events/AutoBeProgressEventMovie.tsx +217 -217
  32. package/src/components/events/AutoBeScenarioEventMovie.tsx +135 -135
  33. package/src/components/events/AutoBeStartEventMovie.tsx +82 -82
  34. package/src/components/events/AutoBeValidateEventMovie.tsx +249 -249
  35. package/src/components/events/README.md +300 -300
  36. package/src/components/events/common/CollapsibleEventGroup.tsx +211 -211
  37. package/src/components/events/common/EventCard.tsx +61 -61
  38. package/src/components/events/common/EventContent.tsx +31 -31
  39. package/src/components/events/common/EventHeader.tsx +85 -85
  40. package/src/components/events/common/EventIcon.tsx +82 -82
  41. package/src/components/events/common/ProgressBar.tsx +64 -64
  42. package/src/components/events/common/index.ts +13 -13
  43. package/src/components/events/groups/CorrectEventGroup.tsx +183 -183
  44. package/src/components/events/groups/ValidateEventGroup.tsx +143 -143
  45. package/src/components/events/groups/index.ts +8 -8
  46. package/src/components/events/index.ts +16 -16
  47. package/src/components/events/utils/eventGrouper.tsx +116 -116
  48. package/src/components/events/utils/index.ts +1 -1
  49. package/src/components/index.ts +13 -13
  50. package/src/components/upload/AutoBeChatUploadBox.tsx +425 -425
  51. package/src/components/upload/AutoBeChatUploadSendButton.tsx +66 -66
  52. package/src/components/upload/AutoBeFileUploadBox.tsx +123 -123
  53. package/src/components/upload/AutoBeUploadConfig.ts +5 -5
  54. package/src/components/upload/AutoBeVoiceRecoderButton.tsx +100 -100
  55. package/src/components/upload/index.ts +5 -5
  56. package/src/constant/color.ts +28 -28
  57. package/src/context/AutoBeAgentContext.tsx +245 -245
  58. package/src/context/AutoBeAgentSessionList.tsx +58 -58
  59. package/src/context/SearchParamsContext.tsx +49 -49
  60. package/src/hooks/index.ts +3 -3
  61. package/src/hooks/useEscapeKey.ts +24 -24
  62. package/src/hooks/useIsomorphicLayoutEffect.ts +8 -8
  63. package/src/hooks/useMediaQuery.ts +73 -73
  64. package/src/hooks/useSessionStorage.ts +10 -10
  65. package/src/icons/Receipt.tsx +74 -74
  66. package/src/index.ts +9 -9
  67. package/src/strategy/AutoBeAgentSessionStorageStrategy.ts +127 -127
  68. package/src/structure/AutoBeListener.ts +373 -373
  69. package/src/structure/AutoBeListenerState.ts +53 -53
  70. package/src/structure/IAutoBeAgentSessionStorageStrategy.ts +87 -87
  71. package/src/structure/IAutoBeEventGroup.ts +6 -6
  72. package/src/structure/index.ts +4 -4
  73. package/src/types/config.ts +44 -44
  74. package/src/types/index.ts +1 -1
  75. package/src/utils/AutoBeFileUploader.ts +279 -279
  76. package/src/utils/AutoBeVoiceRecorder.ts +95 -95
  77. package/src/utils/__tests__/crypto.test.ts +286 -286
  78. package/src/utils/__tests__/storage.test.ts +229 -229
  79. package/src/utils/crypto.ts +95 -95
  80. package/src/utils/index.ts +6 -6
  81. package/src/utils/number.ts +17 -17
  82. package/src/utils/storage.ts +96 -96
  83. package/src/utils/time.ts +14 -14
  84. package/tsconfig.json +9 -9
  85. package/vitest.config.ts +15 -15
  86. 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
+ }