@autobe/ui 0.30.4-dev.20260324 → 0.30.5
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.
- package/LICENSE +661 -661
- package/lib/components/AutoBeChatMain.js +5 -5
- package/lib/components/AutoBeConfigModal.js +9 -9
- package/package.json +2 -2
- package/src/components/AutoBeAssistantMessageMovie.tsx +22 -22
- package/src/components/AutoBeChatMain.tsx +394 -394
- package/src/components/AutoBeChatSidebar.tsx +414 -414
- package/src/components/AutoBeConfigButton.tsx +83 -83
- package/src/components/AutoBeConfigModal.tsx +443 -443
- package/src/components/AutoBeStatusButton.tsx +75 -75
- package/src/components/AutoBeStatusModal.tsx +486 -486
- package/src/components/AutoBeUserMessageMovie.tsx +27 -27
- package/src/components/common/ActionButton.tsx +205 -205
- package/src/components/common/ActionButtonGroup.tsx +80 -80
- package/src/components/common/AutoBeConfigInput.tsx +185 -185
- package/src/components/common/ChatBubble.tsx +119 -119
- package/src/components/common/Collapsible.tsx +95 -95
- package/src/components/common/CompactSessionIndicator.tsx +73 -73
- package/src/components/common/CompactSessionList.tsx +82 -82
- package/src/components/common/openai/OpenAIContent.tsx +53 -53
- package/src/components/common/openai/OpenAIUserAudioContent.tsx +70 -70
- package/src/components/common/openai/OpenAIUserFileContent.tsx +76 -76
- package/src/components/common/openai/OpenAIUserImageContent.tsx +34 -34
- package/src/components/common/openai/OpenAIUserTextContent.tsx +15 -15
- package/src/components/events/AutoBeCompleteEventMovie.tsx +402 -402
- package/src/components/events/AutoBeCorrectEventMovie.tsx +354 -354
- package/src/components/events/AutoBeEventGroupMovie.tsx +18 -18
- package/src/components/events/AutoBeEventMovie.tsx +154 -154
- package/src/components/events/AutoBeProgressEventMovie.tsx +207 -207
- package/src/components/events/AutoBeScenarioEventMovie.tsx +135 -135
- package/src/components/events/AutoBeStartEventMovie.tsx +82 -82
- package/src/components/events/AutoBeValidateEventMovie.tsx +249 -249
- package/src/components/events/README.md +300 -300
- package/src/components/events/common/CollapsibleEventGroup.tsx +211 -211
- package/src/components/events/common/EventCard.tsx +61 -61
- package/src/components/events/common/EventContent.tsx +31 -31
- package/src/components/events/common/EventHeader.tsx +85 -85
- package/src/components/events/common/EventIcon.tsx +82 -82
- package/src/components/events/common/ProgressBar.tsx +64 -64
- package/src/components/events/groups/CorrectEventGroup.tsx +183 -183
- package/src/components/events/groups/ValidateEventGroup.tsx +143 -143
- package/src/components/events/utils/eventGrouper.tsx +116 -116
- package/src/components/upload/AutoBeChatUploadBox.tsx +433 -433
- package/src/components/upload/AutoBeChatUploadSendButton.tsx +66 -66
- package/src/components/upload/AutoBeFileUploadBox.tsx +123 -123
- package/src/components/upload/AutoBeVoiceRecoderButton.tsx +100 -100
- package/src/context/AutoBeAgentContext.tsx +301 -301
- package/src/context/AutoBeAgentSessionList.tsx +58 -58
- package/src/context/SearchParamsContext.tsx +49 -49
- package/src/icons/Receipt.tsx +74 -74
- package/src/structure/AutoBeListener.ts +368 -368
- package/tsconfig.json +9 -9
- package/README.md +0 -261
|
@@ -1,58 +1,58 @@
|
|
|
1
|
-
import {
|
|
2
|
-
ReactNode,
|
|
3
|
-
createContext,
|
|
4
|
-
useCallback,
|
|
5
|
-
useContext,
|
|
6
|
-
useEffect,
|
|
7
|
-
useState,
|
|
8
|
-
} from "react";
|
|
9
|
-
|
|
10
|
-
import {
|
|
11
|
-
IAutoBeAgentSession,
|
|
12
|
-
IAutoBeAgentSessionStorageStrategy,
|
|
13
|
-
} from "../structure";
|
|
14
|
-
|
|
15
|
-
interface AutoBeAgentSessionListContextType {
|
|
16
|
-
sessionList: IAutoBeAgentSession[];
|
|
17
|
-
refreshSessionList: () => Promise<void>;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
const AutoBeAgentSessionListContext =
|
|
21
|
-
createContext<AutoBeAgentSessionListContextType | null>(null);
|
|
22
|
-
|
|
23
|
-
export function AutoBeAgentSessionListProvider({
|
|
24
|
-
children,
|
|
25
|
-
storageStrategy,
|
|
26
|
-
}: {
|
|
27
|
-
storageStrategy: IAutoBeAgentSessionStorageStrategy;
|
|
28
|
-
children: ReactNode;
|
|
29
|
-
}) {
|
|
30
|
-
const [sessionList, setSessionList] = useState<IAutoBeAgentSession[]>([]);
|
|
31
|
-
|
|
32
|
-
const refreshSessionList = useCallback(async () => {
|
|
33
|
-
await storageStrategy.getSessionList().then(setSessionList);
|
|
34
|
-
}, [storageStrategy]);
|
|
35
|
-
|
|
36
|
-
useEffect(() => {
|
|
37
|
-
refreshSessionList();
|
|
38
|
-
}, [storageStrategy]);
|
|
39
|
-
|
|
40
|
-
return (
|
|
41
|
-
<AutoBeAgentSessionListContext.Provider
|
|
42
|
-
value={{
|
|
43
|
-
sessionList,
|
|
44
|
-
refreshSessionList,
|
|
45
|
-
}}
|
|
46
|
-
>
|
|
47
|
-
{children}
|
|
48
|
-
</AutoBeAgentSessionListContext.Provider>
|
|
49
|
-
);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
export function useAutoBeAgentSessionList() {
|
|
53
|
-
const context = useContext(AutoBeAgentSessionListContext);
|
|
54
|
-
if (!context) {
|
|
55
|
-
throw new Error("useAutoBeAgent must be used within a AutoBeAgentProvider");
|
|
56
|
-
}
|
|
57
|
-
return context;
|
|
58
|
-
}
|
|
1
|
+
import {
|
|
2
|
+
ReactNode,
|
|
3
|
+
createContext,
|
|
4
|
+
useCallback,
|
|
5
|
+
useContext,
|
|
6
|
+
useEffect,
|
|
7
|
+
useState,
|
|
8
|
+
} from "react";
|
|
9
|
+
|
|
10
|
+
import {
|
|
11
|
+
IAutoBeAgentSession,
|
|
12
|
+
IAutoBeAgentSessionStorageStrategy,
|
|
13
|
+
} from "../structure";
|
|
14
|
+
|
|
15
|
+
interface AutoBeAgentSessionListContextType {
|
|
16
|
+
sessionList: IAutoBeAgentSession[];
|
|
17
|
+
refreshSessionList: () => Promise<void>;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
const AutoBeAgentSessionListContext =
|
|
21
|
+
createContext<AutoBeAgentSessionListContextType | null>(null);
|
|
22
|
+
|
|
23
|
+
export function AutoBeAgentSessionListProvider({
|
|
24
|
+
children,
|
|
25
|
+
storageStrategy,
|
|
26
|
+
}: {
|
|
27
|
+
storageStrategy: IAutoBeAgentSessionStorageStrategy;
|
|
28
|
+
children: ReactNode;
|
|
29
|
+
}) {
|
|
30
|
+
const [sessionList, setSessionList] = useState<IAutoBeAgentSession[]>([]);
|
|
31
|
+
|
|
32
|
+
const refreshSessionList = useCallback(async () => {
|
|
33
|
+
await storageStrategy.getSessionList().then(setSessionList);
|
|
34
|
+
}, [storageStrategy]);
|
|
35
|
+
|
|
36
|
+
useEffect(() => {
|
|
37
|
+
refreshSessionList();
|
|
38
|
+
}, [storageStrategy]);
|
|
39
|
+
|
|
40
|
+
return (
|
|
41
|
+
<AutoBeAgentSessionListContext.Provider
|
|
42
|
+
value={{
|
|
43
|
+
sessionList,
|
|
44
|
+
refreshSessionList,
|
|
45
|
+
}}
|
|
46
|
+
>
|
|
47
|
+
{children}
|
|
48
|
+
</AutoBeAgentSessionListContext.Provider>
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
export function useAutoBeAgentSessionList() {
|
|
53
|
+
const context = useContext(AutoBeAgentSessionListContext);
|
|
54
|
+
if (!context) {
|
|
55
|
+
throw new Error("useAutoBeAgent must be used within a AutoBeAgentProvider");
|
|
56
|
+
}
|
|
57
|
+
return context;
|
|
58
|
+
}
|
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
import {
|
|
2
|
-
ReactNode,
|
|
3
|
-
createContext,
|
|
4
|
-
useContext,
|
|
5
|
-
useEffect,
|
|
6
|
-
useState,
|
|
7
|
-
} from "react";
|
|
8
|
-
|
|
9
|
-
interface SearchParamsContextType {
|
|
10
|
-
searchParams: URLSearchParams;
|
|
11
|
-
setSearchParams: React.Dispatch<React.SetStateAction<URLSearchParams>>;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
const SearchParamsContext = createContext<SearchParamsContextType | null>(null);
|
|
15
|
-
|
|
16
|
-
export function SearchParamsProvider({ children }: { children: ReactNode }) {
|
|
17
|
-
const [searchParams, setSearchParams] = useState<URLSearchParams>(
|
|
18
|
-
new URLSearchParams(window.location.search),
|
|
19
|
-
);
|
|
20
|
-
|
|
21
|
-
useEffect(() => {
|
|
22
|
-
const url = new URL(`${window.location.origin}${window.location.pathname}${window.location.hash}`);
|
|
23
|
-
searchParams.forEach((value, key) => {
|
|
24
|
-
url.searchParams.set(key, value);
|
|
25
|
-
});
|
|
26
|
-
window.history.pushState({}, "", url);
|
|
27
|
-
}, [searchParams]);
|
|
28
|
-
|
|
29
|
-
return (
|
|
30
|
-
<SearchParamsContext
|
|
31
|
-
value={{
|
|
32
|
-
searchParams,
|
|
33
|
-
setSearchParams,
|
|
34
|
-
}}
|
|
35
|
-
>
|
|
36
|
-
{children}
|
|
37
|
-
</SearchParamsContext>
|
|
38
|
-
);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
export function useSearchParams() {
|
|
42
|
-
const context = useContext(SearchParamsContext);
|
|
43
|
-
if (!context) {
|
|
44
|
-
throw new Error(
|
|
45
|
-
"useSearchParams must be used within a SearchParamsProvider",
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
return context;
|
|
49
|
-
}
|
|
1
|
+
import {
|
|
2
|
+
ReactNode,
|
|
3
|
+
createContext,
|
|
4
|
+
useContext,
|
|
5
|
+
useEffect,
|
|
6
|
+
useState,
|
|
7
|
+
} from "react";
|
|
8
|
+
|
|
9
|
+
interface SearchParamsContextType {
|
|
10
|
+
searchParams: URLSearchParams;
|
|
11
|
+
setSearchParams: React.Dispatch<React.SetStateAction<URLSearchParams>>;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
const SearchParamsContext = createContext<SearchParamsContextType | null>(null);
|
|
15
|
+
|
|
16
|
+
export function SearchParamsProvider({ children }: { children: ReactNode }) {
|
|
17
|
+
const [searchParams, setSearchParams] = useState<URLSearchParams>(
|
|
18
|
+
new URLSearchParams(window.location.search),
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
useEffect(() => {
|
|
22
|
+
const url = new URL(`${window.location.origin}${window.location.pathname}${window.location.hash}`);
|
|
23
|
+
searchParams.forEach((value, key) => {
|
|
24
|
+
url.searchParams.set(key, value);
|
|
25
|
+
});
|
|
26
|
+
window.history.pushState({}, "", url);
|
|
27
|
+
}, [searchParams]);
|
|
28
|
+
|
|
29
|
+
return (
|
|
30
|
+
<SearchParamsContext
|
|
31
|
+
value={{
|
|
32
|
+
searchParams,
|
|
33
|
+
setSearchParams,
|
|
34
|
+
}}
|
|
35
|
+
>
|
|
36
|
+
{children}
|
|
37
|
+
</SearchParamsContext>
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export function useSearchParams() {
|
|
42
|
+
const context = useContext(SearchParamsContext);
|
|
43
|
+
if (!context) {
|
|
44
|
+
throw new Error(
|
|
45
|
+
"useSearchParams must be used within a SearchParamsProvider",
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
return context;
|
|
49
|
+
}
|
package/src/icons/Receipt.tsx
CHANGED
|
@@ -1,74 +1,74 @@
|
|
|
1
|
-
import { COLORS } from "../constant/color";
|
|
2
|
-
|
|
3
|
-
/** Props interface for ReceiptIcon component */
|
|
4
|
-
interface IReceiptIconProps {
|
|
5
|
-
/** Width of the icon */
|
|
6
|
-
width?: number;
|
|
7
|
-
/** Height of the icon */
|
|
8
|
-
height?: number;
|
|
9
|
-
/** Color of the icon */
|
|
10
|
-
color?: string;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
/** Receipt SVG icon component */
|
|
14
|
-
export const ReceiptIcon = ({
|
|
15
|
-
width = 24,
|
|
16
|
-
height = 30,
|
|
17
|
-
color = COLORS.GRAY_TEXT_DARK,
|
|
18
|
-
}: IReceiptIconProps) => (
|
|
19
|
-
<svg
|
|
20
|
-
width={width}
|
|
21
|
-
height={height}
|
|
22
|
-
viewBox="0 0 24 30"
|
|
23
|
-
fill="none"
|
|
24
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
25
|
-
>
|
|
26
|
-
{/* Receipt Body */}
|
|
27
|
-
<path
|
|
28
|
-
d="M2 2H22V24L20 22L18 24L16 22L14 24L12 22L10 24L8 22L6 24L4 22L2 24V2Z"
|
|
29
|
-
fill={color}
|
|
30
|
-
fillOpacity="0.1"
|
|
31
|
-
stroke={color}
|
|
32
|
-
strokeWidth="1.5"
|
|
33
|
-
strokeLinecap="round"
|
|
34
|
-
strokeLinejoin="round"
|
|
35
|
-
/>
|
|
36
|
-
{/* Receipt Lines */}
|
|
37
|
-
<line
|
|
38
|
-
x1="6"
|
|
39
|
-
y1="7"
|
|
40
|
-
x2="18"
|
|
41
|
-
y2="7"
|
|
42
|
-
stroke={color}
|
|
43
|
-
strokeWidth="1"
|
|
44
|
-
strokeLinecap="round"
|
|
45
|
-
/>
|
|
46
|
-
<line
|
|
47
|
-
x1="6"
|
|
48
|
-
y1="11"
|
|
49
|
-
x2="18"
|
|
50
|
-
y2="11"
|
|
51
|
-
stroke={color}
|
|
52
|
-
strokeWidth="1"
|
|
53
|
-
strokeLinecap="round"
|
|
54
|
-
/>
|
|
55
|
-
<line
|
|
56
|
-
x1="6"
|
|
57
|
-
y1="15"
|
|
58
|
-
x2="14"
|
|
59
|
-
y2="15"
|
|
60
|
-
stroke={color}
|
|
61
|
-
strokeWidth="1"
|
|
62
|
-
strokeLinecap="round"
|
|
63
|
-
/>
|
|
64
|
-
<line
|
|
65
|
-
x1="6"
|
|
66
|
-
y1="19"
|
|
67
|
-
x2="16"
|
|
68
|
-
y2="19"
|
|
69
|
-
stroke={color}
|
|
70
|
-
strokeWidth="1"
|
|
71
|
-
strokeLinecap="round"
|
|
72
|
-
/>
|
|
73
|
-
</svg>
|
|
74
|
-
);
|
|
1
|
+
import { COLORS } from "../constant/color";
|
|
2
|
+
|
|
3
|
+
/** Props interface for ReceiptIcon component */
|
|
4
|
+
interface IReceiptIconProps {
|
|
5
|
+
/** Width of the icon */
|
|
6
|
+
width?: number;
|
|
7
|
+
/** Height of the icon */
|
|
8
|
+
height?: number;
|
|
9
|
+
/** Color of the icon */
|
|
10
|
+
color?: string;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/** Receipt SVG icon component */
|
|
14
|
+
export const ReceiptIcon = ({
|
|
15
|
+
width = 24,
|
|
16
|
+
height = 30,
|
|
17
|
+
color = COLORS.GRAY_TEXT_DARK,
|
|
18
|
+
}: IReceiptIconProps) => (
|
|
19
|
+
<svg
|
|
20
|
+
width={width}
|
|
21
|
+
height={height}
|
|
22
|
+
viewBox="0 0 24 30"
|
|
23
|
+
fill="none"
|
|
24
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
25
|
+
>
|
|
26
|
+
{/* Receipt Body */}
|
|
27
|
+
<path
|
|
28
|
+
d="M2 2H22V24L20 22L18 24L16 22L14 24L12 22L10 24L8 22L6 24L4 22L2 24V2Z"
|
|
29
|
+
fill={color}
|
|
30
|
+
fillOpacity="0.1"
|
|
31
|
+
stroke={color}
|
|
32
|
+
strokeWidth="1.5"
|
|
33
|
+
strokeLinecap="round"
|
|
34
|
+
strokeLinejoin="round"
|
|
35
|
+
/>
|
|
36
|
+
{/* Receipt Lines */}
|
|
37
|
+
<line
|
|
38
|
+
x1="6"
|
|
39
|
+
y1="7"
|
|
40
|
+
x2="18"
|
|
41
|
+
y2="7"
|
|
42
|
+
stroke={color}
|
|
43
|
+
strokeWidth="1"
|
|
44
|
+
strokeLinecap="round"
|
|
45
|
+
/>
|
|
46
|
+
<line
|
|
47
|
+
x1="6"
|
|
48
|
+
y1="11"
|
|
49
|
+
x2="18"
|
|
50
|
+
y2="11"
|
|
51
|
+
stroke={color}
|
|
52
|
+
strokeWidth="1"
|
|
53
|
+
strokeLinecap="round"
|
|
54
|
+
/>
|
|
55
|
+
<line
|
|
56
|
+
x1="6"
|
|
57
|
+
y1="15"
|
|
58
|
+
x2="14"
|
|
59
|
+
y2="15"
|
|
60
|
+
stroke={color}
|
|
61
|
+
strokeWidth="1"
|
|
62
|
+
strokeLinecap="round"
|
|
63
|
+
/>
|
|
64
|
+
<line
|
|
65
|
+
x1="6"
|
|
66
|
+
y1="19"
|
|
67
|
+
x2="16"
|
|
68
|
+
y2="19"
|
|
69
|
+
stroke={color}
|
|
70
|
+
strokeWidth="1"
|
|
71
|
+
strokeLinecap="round"
|
|
72
|
+
/>
|
|
73
|
+
</svg>
|
|
74
|
+
);
|