@autobe/ui 0.30.0-dev.20260315 → 0.30.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 (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,70 +1,70 @@
1
- import { AutoBeUserMessageAudioContent } from "@autobe/interface";
2
-
3
- /** Audio content renderer component for OpenAI messages */
4
- export const OpenAIUserAudioContent = ({
5
- content,
6
- }: {
7
- content: AutoBeUserMessageAudioContent;
8
- }) => {
9
- const isRight = true;
10
-
11
- return (
12
- <div
13
- style={{
14
- display: "flex",
15
- flexDirection: "column",
16
- alignItems: "center",
17
- justifyContent: "center",
18
- padding: "1rem",
19
- minWidth: "6rem",
20
- minHeight: "6rem",
21
- }}
22
- >
23
- {/* Audio Icon */}
24
- <div
25
- style={{
26
- width: "2.5rem",
27
- height: "2.5rem",
28
- borderRadius: "50%",
29
- backgroundColor: isRight ? "rgba(255,255,255,0.2)" : "#3b82f6",
30
- display: "flex",
31
- alignItems: "center",
32
- justifyContent: "center",
33
- marginBottom: "0.5rem",
34
- }}
35
- >
36
- <svg
37
- width="20"
38
- height="20"
39
- viewBox="0 0 24 24"
40
- fill="currentColor"
41
- style={{ color: isRight ? "#ffffff" : "#ffffff" }}
42
- >
43
- <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" />
44
- </svg>
45
- </div>
46
- <div
47
- style={{
48
- fontSize: "0.7rem",
49
- fontWeight: "bold",
50
- color: isRight ? "rgba(255,255,255,0.9)" : "#6b7280",
51
- textAlign: "center",
52
- }}
53
- >
54
- AUDIO
55
- </div>
56
- <div
57
- style={{
58
- fontSize: "0.65rem",
59
- color: isRight ? "rgba(255,255,255,0.7)" : "#9ca3af",
60
- textAlign: "center",
61
- marginTop: "0.25rem",
62
- }}
63
- >
64
- {content.format.toUpperCase()}
65
- </div>
66
- </div>
67
- );
68
- };
69
-
70
- export default OpenAIUserAudioContent;
1
+ import { AutoBeUserMessageAudioContent } from "@autobe/interface";
2
+
3
+ /** Audio content renderer component for OpenAI messages */
4
+ export const OpenAIUserAudioContent = ({
5
+ content,
6
+ }: {
7
+ content: AutoBeUserMessageAudioContent;
8
+ }) => {
9
+ const isRight = true;
10
+
11
+ return (
12
+ <div
13
+ style={{
14
+ display: "flex",
15
+ flexDirection: "column",
16
+ alignItems: "center",
17
+ justifyContent: "center",
18
+ padding: "1rem",
19
+ minWidth: "6rem",
20
+ minHeight: "6rem",
21
+ }}
22
+ >
23
+ {/* Audio Icon */}
24
+ <div
25
+ style={{
26
+ width: "2.5rem",
27
+ height: "2.5rem",
28
+ borderRadius: "50%",
29
+ backgroundColor: isRight ? "rgba(255,255,255,0.2)" : "#3b82f6",
30
+ display: "flex",
31
+ alignItems: "center",
32
+ justifyContent: "center",
33
+ marginBottom: "0.5rem",
34
+ }}
35
+ >
36
+ <svg
37
+ width="20"
38
+ height="20"
39
+ viewBox="0 0 24 24"
40
+ fill="currentColor"
41
+ style={{ color: isRight ? "#ffffff" : "#ffffff" }}
42
+ >
43
+ <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" />
44
+ </svg>
45
+ </div>
46
+ <div
47
+ style={{
48
+ fontSize: "0.7rem",
49
+ fontWeight: "bold",
50
+ color: isRight ? "rgba(255,255,255,0.9)" : "#6b7280",
51
+ textAlign: "center",
52
+ }}
53
+ >
54
+ AUDIO
55
+ </div>
56
+ <div
57
+ style={{
58
+ fontSize: "0.65rem",
59
+ color: isRight ? "rgba(255,255,255,0.7)" : "#9ca3af",
60
+ textAlign: "center",
61
+ marginTop: "0.25rem",
62
+ }}
63
+ >
64
+ {content.format.toUpperCase()}
65
+ </div>
66
+ </div>
67
+ );
68
+ };
69
+
70
+ export default OpenAIUserAudioContent;
@@ -1,76 +1,76 @@
1
- import { AutoBeUserMessageFileContent } from "@autobe/interface";
2
-
3
- /** File content renderer component for OpenAI messages */
4
- export const OpenAIUserFileContent = ({
5
- content,
6
- }: {
7
- content: AutoBeUserMessageFileContent;
8
- }) => {
9
- const isRight = true;
10
- const fileName =
11
- content.file.type === "base64"
12
- ? content.file.name
13
- : `File ID: ${content.file.id}`;
14
-
15
- return (
16
- <div
17
- style={{
18
- display: "flex",
19
- flexDirection: "column",
20
- alignItems: "center",
21
- justifyContent: "center",
22
- padding: "1rem",
23
- minWidth: "8rem",
24
- minHeight: "6rem",
25
- }}
26
- >
27
- {/* File Icon */}
28
- <div
29
- style={{
30
- width: "2.5rem",
31
- height: "2.5rem",
32
- borderRadius: "0.5rem",
33
- backgroundColor: isRight ? "rgba(255,255,255,0.2)" : "#10b981",
34
- display: "flex",
35
- alignItems: "center",
36
- justifyContent: "center",
37
- marginBottom: "0.5rem",
38
- }}
39
- >
40
- <svg
41
- width="20"
42
- height="20"
43
- viewBox="0 0 24 24"
44
- fill="currentColor"
45
- style={{ color: "#ffffff" }}
46
- >
47
- <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
48
- </svg>
49
- </div>
50
- <div
51
- style={{
52
- fontSize: "0.7rem",
53
- fontWeight: "bold",
54
- color: isRight ? "rgba(255,255,255,0.9)" : "#6b7280",
55
- textAlign: "center",
56
- marginBottom: "0.25rem",
57
- }}
58
- >
59
- {fileName.split(".").at(-1)?.toUpperCase()} FILE
60
- </div>
61
- <div
62
- style={{
63
- fontSize: "0.65rem",
64
- color: isRight ? "rgba(255,255,255,0.7)" : "#9ca3af",
65
- textAlign: "center",
66
- wordBreak: "break-all",
67
- maxWidth: "8rem",
68
- }}
69
- >
70
- {fileName}
71
- </div>
72
- </div>
73
- );
74
- };
75
-
76
- export default OpenAIUserFileContent;
1
+ import { AutoBeUserMessageFileContent } from "@autobe/interface";
2
+
3
+ /** File content renderer component for OpenAI messages */
4
+ export const OpenAIUserFileContent = ({
5
+ content,
6
+ }: {
7
+ content: AutoBeUserMessageFileContent;
8
+ }) => {
9
+ const isRight = true;
10
+ const fileName =
11
+ content.file.type === "base64"
12
+ ? content.file.name
13
+ : `File ID: ${content.file.id}`;
14
+
15
+ return (
16
+ <div
17
+ style={{
18
+ display: "flex",
19
+ flexDirection: "column",
20
+ alignItems: "center",
21
+ justifyContent: "center",
22
+ padding: "1rem",
23
+ minWidth: "8rem",
24
+ minHeight: "6rem",
25
+ }}
26
+ >
27
+ {/* File Icon */}
28
+ <div
29
+ style={{
30
+ width: "2.5rem",
31
+ height: "2.5rem",
32
+ borderRadius: "0.5rem",
33
+ backgroundColor: isRight ? "rgba(255,255,255,0.2)" : "#10b981",
34
+ display: "flex",
35
+ alignItems: "center",
36
+ justifyContent: "center",
37
+ marginBottom: "0.5rem",
38
+ }}
39
+ >
40
+ <svg
41
+ width="20"
42
+ height="20"
43
+ viewBox="0 0 24 24"
44
+ fill="currentColor"
45
+ style={{ color: "#ffffff" }}
46
+ >
47
+ <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
48
+ </svg>
49
+ </div>
50
+ <div
51
+ style={{
52
+ fontSize: "0.7rem",
53
+ fontWeight: "bold",
54
+ color: isRight ? "rgba(255,255,255,0.9)" : "#6b7280",
55
+ textAlign: "center",
56
+ marginBottom: "0.25rem",
57
+ }}
58
+ >
59
+ {fileName.split(".").at(-1)?.toUpperCase()} FILE
60
+ </div>
61
+ <div
62
+ style={{
63
+ fontSize: "0.65rem",
64
+ color: isRight ? "rgba(255,255,255,0.7)" : "#9ca3af",
65
+ textAlign: "center",
66
+ wordBreak: "break-all",
67
+ maxWidth: "8rem",
68
+ }}
69
+ >
70
+ {fileName}
71
+ </div>
72
+ </div>
73
+ );
74
+ };
75
+
76
+ export default OpenAIUserFileContent;
@@ -1,34 +1,34 @@
1
- import { AutoBeUserImageConversateContent } from "@autobe/interface";
2
-
3
- /** Image content renderer component for OpenAI messages */
4
- export const OpenAIUserImageContent = ({
5
- content,
6
- }: {
7
- content: AutoBeUserImageConversateContent;
8
- }) => {
9
- const imgSrc =
10
- content.image.type === "url" ? content.image.url : content.image.data;
11
-
12
- return (
13
- <div
14
- style={{
15
- position: "relative",
16
- maxWidth: "16rem",
17
- borderRadius: "0.5rem",
18
- overflow: "hidden",
19
- }}
20
- >
21
- <img
22
- src={imgSrc}
23
- alt="User uploaded image"
24
- style={{
25
- width: "100%",
26
- height: "auto",
27
- display: "block",
28
- }}
29
- />
30
- </div>
31
- );
32
- };
33
-
34
- export default OpenAIUserImageContent;
1
+ import { AutoBeUserImageConversateContent } from "@autobe/interface";
2
+
3
+ /** Image content renderer component for OpenAI messages */
4
+ export const OpenAIUserImageContent = ({
5
+ content,
6
+ }: {
7
+ content: AutoBeUserImageConversateContent;
8
+ }) => {
9
+ const imgSrc =
10
+ content.image.type === "url" ? content.image.url : content.image.data;
11
+
12
+ return (
13
+ <div
14
+ style={{
15
+ position: "relative",
16
+ maxWidth: "16rem",
17
+ borderRadius: "0.5rem",
18
+ overflow: "hidden",
19
+ }}
20
+ >
21
+ <img
22
+ src={imgSrc}
23
+ alt="User uploaded image"
24
+ style={{
25
+ width: "100%",
26
+ height: "auto",
27
+ display: "block",
28
+ }}
29
+ />
30
+ </div>
31
+ );
32
+ };
33
+
34
+ export default OpenAIUserImageContent;
@@ -1,15 +1,15 @@
1
- /** Text content renderer component for OpenAI messages */
2
- export const OpenAIUserTextContent = ({ text }: { text: string }) => (
3
- <div
4
- style={{
5
- position: "relative",
6
- fontSize: "0.875rem",
7
- lineHeight: "1.625",
8
- whiteSpace: "pre-wrap",
9
- }}
10
- >
11
- {text}
12
- </div>
13
- );
14
-
15
- export default OpenAIUserTextContent;
1
+ /** Text content renderer component for OpenAI messages */
2
+ export const OpenAIUserTextContent = ({ text }: { text: string }) => (
3
+ <div
4
+ style={{
5
+ position: "relative",
6
+ fontSize: "0.875rem",
7
+ lineHeight: "1.625",
8
+ whiteSpace: "pre-wrap",
9
+ }}
10
+ >
11
+ {text}
12
+ </div>
13
+ );
14
+
15
+ export default OpenAIUserTextContent;
@@ -1,5 +1,5 @@
1
- export { OpenAIUserTextContent } from "./OpenAIUserTextContent";
2
- export { OpenAIUserAudioContent } from "./OpenAIUserAudioContent";
3
- export { OpenAIUserFileContent } from "./OpenAIUserFileContent";
4
- export { OpenAIUserImageContent } from "./OpenAIUserImageContent";
5
- export { OpenAIContent } from "./OpenAIContent";
1
+ export { OpenAIUserTextContent } from "./OpenAIUserTextContent";
2
+ export { OpenAIUserAudioContent } from "./OpenAIUserAudioContent";
3
+ export { OpenAIUserFileContent } from "./OpenAIUserFileContent";
4
+ export { OpenAIUserImageContent } from "./OpenAIUserImageContent";
5
+ export { OpenAIContent } from "./OpenAIContent";