ikoncomponents 1.6.9 → 1.7.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.
- package/README.md +36 -36
- package/dist/ikoncomponents/fileUpload/index.d.ts +11 -12
- package/dist/ikoncomponents/fileUpload/index.js +117 -59
- package/dist/ikoncomponents/fileUploadApi/index.d.ts +31 -0
- package/dist/ikoncomponents/fileUploadApi/index.js +159 -0
- package/dist/ikoncomponents/main-layout/nav-main.js +3 -1
- package/dist/index.d.ts +8 -3
- package/dist/index.js +8 -2
- package/dist/styles.css +28 -0
- package/dist/utils/api/file-upload copy/index.d.ts +13 -0
- package/dist/utils/api/file-upload copy/index.js +120 -0
- package/package.json +2 -1
- package/dist/ikoncomponents/assistant-ui/Assistant.d.ts +0 -28
- package/dist/ikoncomponents/assistant-ui/Assistant.js +0 -306
- package/dist/ikoncomponents/assistant-ui/agent-dropdown.d.ts +0 -24
- package/dist/ikoncomponents/assistant-ui/agent-dropdown.js +0 -16
- package/dist/ikoncomponents/assistant-ui/agentTextChatTransport.d.ts +0 -30
- package/dist/ikoncomponents/assistant-ui/agentTextChatTransport.js +0 -208
- package/dist/ikoncomponents/assistant-ui/attachment.d.ts +0 -4
- package/dist/ikoncomponents/assistant-ui/attachment.js +0 -93
- package/dist/ikoncomponents/assistant-ui/markdown-text.d.ts +0 -2
- package/dist/ikoncomponents/assistant-ui/markdown-text.js +0 -126
- package/dist/ikoncomponents/assistant-ui/thread.d.ts +0 -10
- package/dist/ikoncomponents/assistant-ui/thread.js +0 -115
- package/dist/ikoncomponents/assistant-ui/tool-fallback.d.ts +0 -2
- package/dist/ikoncomponents/assistant-ui/tool-fallback.js +0 -18
- package/dist/ikoncomponents/assistant-ui/tooltip-icon-button.d.ts +0 -7
- package/dist/ikoncomponents/assistant-ui/tooltip-icon-button.js +0 -23
- package/dist/ikoncomponents/table/component/DataTable.d.ts +0 -14
- package/dist/ikoncomponents/table/component/DataTable.js +0 -10
- package/dist/ikoncomponents/table/component/DataTablePageSize.d.ts +0 -1
- package/dist/ikoncomponents/table/component/DataTablePageSize.js +0 -16
- package/dist/ikoncomponents/table/component/DataTablePagination.d.ts +0 -6
- package/dist/ikoncomponents/table/component/DataTablePagination.js +0 -14
- package/dist/ikoncomponents/table/component/DataTableSearch.d.ts +0 -1
- package/dist/ikoncomponents/table/component/DataTableSearch.js +0 -27
- package/dist/utils/userType.d.ts +0 -13
- package/dist/utils/userType.js +0 -1
package/dist/styles.css
CHANGED
|
@@ -273,6 +273,9 @@
|
|
|
273
273
|
.inset-y-0 {
|
|
274
274
|
inset-block: calc(var(--spacing) * 0);
|
|
275
275
|
}
|
|
276
|
+
.-top-1\.5 {
|
|
277
|
+
top: calc(var(--spacing) * -1.5);
|
|
278
|
+
}
|
|
276
279
|
.-top-12 {
|
|
277
280
|
top: calc(var(--spacing) * -12);
|
|
278
281
|
}
|
|
@@ -303,6 +306,9 @@
|
|
|
303
306
|
.top-full {
|
|
304
307
|
top: 100%;
|
|
305
308
|
}
|
|
309
|
+
.-right-1\.5 {
|
|
310
|
+
right: calc(var(--spacing) * -1.5);
|
|
311
|
+
}
|
|
306
312
|
.right-0 {
|
|
307
313
|
right: calc(var(--spacing) * 0);
|
|
308
314
|
}
|
|
@@ -444,6 +450,9 @@
|
|
|
444
450
|
.my-auto {
|
|
445
451
|
margin-block: auto;
|
|
446
452
|
}
|
|
453
|
+
.mt-0\.5 {
|
|
454
|
+
margin-top: calc(var(--spacing) * 0.5);
|
|
455
|
+
}
|
|
447
456
|
.mt-1 {
|
|
448
457
|
margin-top: calc(var(--spacing) * 1);
|
|
449
458
|
}
|
|
@@ -686,6 +695,9 @@
|
|
|
686
695
|
.h-12 {
|
|
687
696
|
height: calc(var(--spacing) * 12);
|
|
688
697
|
}
|
|
698
|
+
.h-16 {
|
|
699
|
+
height: calc(var(--spacing) * 16);
|
|
700
|
+
}
|
|
689
701
|
.h-20 {
|
|
690
702
|
height: calc(var(--spacing) * 20);
|
|
691
703
|
}
|
|
@@ -845,6 +857,9 @@
|
|
|
845
857
|
.w-12 {
|
|
846
858
|
width: calc(var(--spacing) * 12);
|
|
847
859
|
}
|
|
860
|
+
.w-16 {
|
|
861
|
+
width: calc(var(--spacing) * 16);
|
|
862
|
+
}
|
|
848
863
|
.w-32 {
|
|
849
864
|
width: calc(var(--spacing) * 32);
|
|
850
865
|
}
|
|
@@ -908,6 +923,9 @@
|
|
|
908
923
|
.max-w-20 {
|
|
909
924
|
max-width: calc(var(--spacing) * 20);
|
|
910
925
|
}
|
|
926
|
+
.max-w-\[64px\] {
|
|
927
|
+
max-width: 64px;
|
|
928
|
+
}
|
|
911
929
|
.max-w-\[120px\] {
|
|
912
930
|
max-width: 120px;
|
|
913
931
|
}
|
|
@@ -1661,6 +1679,9 @@
|
|
|
1661
1679
|
background-color: color-mix(in oklab, var(--primary) 10%, transparent);
|
|
1662
1680
|
}
|
|
1663
1681
|
}
|
|
1682
|
+
.bg-red-500 {
|
|
1683
|
+
background-color: var(--color-red-500);
|
|
1684
|
+
}
|
|
1664
1685
|
.bg-secondary {
|
|
1665
1686
|
background-color: var(--secondary);
|
|
1666
1687
|
}
|
|
@@ -2363,6 +2384,13 @@
|
|
|
2363
2384
|
opacity: 100%;
|
|
2364
2385
|
}
|
|
2365
2386
|
}
|
|
2387
|
+
.group-hover\:opacity-100 {
|
|
2388
|
+
&:is(:where(.group):hover *) {
|
|
2389
|
+
@media (hover: hover) {
|
|
2390
|
+
opacity: 100%;
|
|
2391
|
+
}
|
|
2392
|
+
}
|
|
2393
|
+
}
|
|
2366
2394
|
.group-hover\/menu-item\:opacity-100 {
|
|
2367
2395
|
&:is(:where(.group\/menu-item):hover *) {
|
|
2368
2396
|
@media (hover: hover) {
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export declare const uploadFilePublic: (file: File) => Promise<any>;
|
|
2
|
+
export declare const fetchImagePreview: (resourceId: string) => Promise<string>;
|
|
3
|
+
export declare const fileUpload: (fileObjArray: Array<{
|
|
4
|
+
fileName: string;
|
|
5
|
+
type: string;
|
|
6
|
+
base64: string;
|
|
7
|
+
}>) => Promise<any>;
|
|
8
|
+
export declare const downloadFileByResourceId: (resourceId: string) => Promise<void>;
|
|
9
|
+
export declare const fetchFileAsBase64: (resourceId: string) => Promise<{
|
|
10
|
+
base64: string;
|
|
11
|
+
fileSize: number;
|
|
12
|
+
fileType: string;
|
|
13
|
+
}>;
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import { getValidAccessToken } from "@/utils/token-management";
|
|
2
|
+
const IKON_BASE_API_URL = "https://ikoncloud-dev.keross.com/ikon-api";
|
|
3
|
+
export const uploadFilePublic = async (file) => {
|
|
4
|
+
const accessToken = await getValidAccessToken(IKON_BASE_API_URL || "");
|
|
5
|
+
const formData = new FormData();
|
|
6
|
+
formData.append("file", file);
|
|
7
|
+
const response = await fetch(`${IKON_BASE_API_URL}/platform/file-resource/upload/public`, {
|
|
8
|
+
method: "POST",
|
|
9
|
+
headers: Object.assign({}, (accessToken ? { Authorization: `Bearer ${accessToken}` } : {})),
|
|
10
|
+
body: formData,
|
|
11
|
+
});
|
|
12
|
+
if (!response.ok) {
|
|
13
|
+
const errorText = await response.text();
|
|
14
|
+
throw new Error(`Upload failed: ${errorText}`);
|
|
15
|
+
}
|
|
16
|
+
const data = await response.json();
|
|
17
|
+
if (data.files && data.files.length > 0) {
|
|
18
|
+
//just return the 1st resourceId
|
|
19
|
+
return data;
|
|
20
|
+
}
|
|
21
|
+
throw new Error("No files returned from upload");
|
|
22
|
+
};
|
|
23
|
+
export const fetchImagePreview = async (resourceId) => {
|
|
24
|
+
const accessToken = await getValidAccessToken(IKON_BASE_API_URL || "");
|
|
25
|
+
const response = await fetch(`${IKON_BASE_API_URL}/platform/file-resource/download/public/${resourceId}`, {
|
|
26
|
+
method: "GET",
|
|
27
|
+
headers: {
|
|
28
|
+
"Authorization": `Bearer ${accessToken}`
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
if (!response.ok)
|
|
32
|
+
throw new Error("Failed to load image");
|
|
33
|
+
// Convert binary response to a temporary URL
|
|
34
|
+
const imageBlob = await response.blob();
|
|
35
|
+
return URL.createObjectURL(imageBlob);
|
|
36
|
+
};
|
|
37
|
+
export const fileUpload = async (fileObjArray) => {
|
|
38
|
+
try {
|
|
39
|
+
const accessToken = await getValidAccessToken(process.env.IKON_API_URL || "");
|
|
40
|
+
console.log("Uploading files:", fileObjArray);
|
|
41
|
+
const response = await fetch(`${process.env.SALES_CRM_API_URL}/api/upload-base64`, {
|
|
42
|
+
method: "POST",
|
|
43
|
+
headers: Object.assign({ "Content-Type": "application/json" }, (accessToken ? { Authorization: `Bearer ${accessToken}` } : {})),
|
|
44
|
+
body: JSON.stringify({ files: fileObjArray }), // send array
|
|
45
|
+
});
|
|
46
|
+
if (!response.ok) {
|
|
47
|
+
const errorText = await response.text();
|
|
48
|
+
throw new Error(`Upload failed: ${errorText}`);
|
|
49
|
+
}
|
|
50
|
+
const data = await response.json();
|
|
51
|
+
console.log("Server response:", data);
|
|
52
|
+
return data;
|
|
53
|
+
}
|
|
54
|
+
catch (err) {
|
|
55
|
+
console.error("File upload error:", err);
|
|
56
|
+
throw err;
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
export const downloadFileByResourceId = async (resourceId) => {
|
|
60
|
+
const accessToken = await getValidAccessToken(IKON_BASE_API_URL || "");
|
|
61
|
+
const response = await fetch(`${IKON_BASE_API_URL}/platform/file-resource/download/public/${resourceId}`, {
|
|
62
|
+
method: "GET",
|
|
63
|
+
headers: Object.assign({}, (accessToken ? { Authorization: `Bearer ${accessToken}` } : {})),
|
|
64
|
+
});
|
|
65
|
+
if (!response.ok) {
|
|
66
|
+
throw new Error("Failed to download file");
|
|
67
|
+
}
|
|
68
|
+
const blob = await response.blob();
|
|
69
|
+
const contentDisposition = response.headers.get("Content-Disposition");
|
|
70
|
+
let fileName = "downloaded-file";
|
|
71
|
+
if (contentDisposition) {
|
|
72
|
+
const match = contentDisposition.match(/filename="(.+)"/);
|
|
73
|
+
if (match)
|
|
74
|
+
fileName = match[1];
|
|
75
|
+
}
|
|
76
|
+
const url = window.URL.createObjectURL(blob);
|
|
77
|
+
const a = document.createElement("a");
|
|
78
|
+
a.href = url;
|
|
79
|
+
a.download = fileName;
|
|
80
|
+
document.body.appendChild(a);
|
|
81
|
+
a.click();
|
|
82
|
+
// cleanup
|
|
83
|
+
a.remove();
|
|
84
|
+
window.URL.revokeObjectURL(url);
|
|
85
|
+
};
|
|
86
|
+
export const fetchFileAsBase64 = async (resourceId) => {
|
|
87
|
+
const accessToken = await getValidAccessToken(IKON_BASE_API_URL || "");
|
|
88
|
+
const response = await fetch(`${IKON_BASE_API_URL}/platform/file-resource/download/public/${resourceId}`, {
|
|
89
|
+
method: "GET",
|
|
90
|
+
headers: Object.assign({}, (accessToken ? { Authorization: `Bearer ${accessToken}` } : {})),
|
|
91
|
+
});
|
|
92
|
+
if (!response.ok) {
|
|
93
|
+
throw new Error("Failed to fetch file");
|
|
94
|
+
}
|
|
95
|
+
const blob = await response.blob();
|
|
96
|
+
// ✅ Convert blob → base64
|
|
97
|
+
const base64 = await new Promise((resolve, reject) => {
|
|
98
|
+
const reader = new FileReader();
|
|
99
|
+
reader.onloadend = () => {
|
|
100
|
+
const result = reader.result;
|
|
101
|
+
const base64String = result.split(",")[1]; // remove data:*/*;base64,
|
|
102
|
+
resolve(base64String);
|
|
103
|
+
};
|
|
104
|
+
reader.onerror = reject;
|
|
105
|
+
reader.readAsDataURL(blob);
|
|
106
|
+
});
|
|
107
|
+
// ✅ Extract filename (if available)
|
|
108
|
+
const contentDisposition = response.headers.get("Content-Disposition");
|
|
109
|
+
let fileName = "unknown";
|
|
110
|
+
if (contentDisposition) {
|
|
111
|
+
const match = contentDisposition.match(/filename="(.+)"/);
|
|
112
|
+
if (match)
|
|
113
|
+
fileName = match[1];
|
|
114
|
+
}
|
|
115
|
+
return {
|
|
116
|
+
base64,
|
|
117
|
+
fileSize: blob.size,
|
|
118
|
+
fileType: blob.type,
|
|
119
|
+
};
|
|
120
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ikoncomponents",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.7.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"css": "dist/styles.css",
|
|
@@ -74,6 +74,7 @@
|
|
|
74
74
|
"tailwind-merge": "^3.3.1",
|
|
75
75
|
"tailwindcss-animate": "^1.0.7",
|
|
76
76
|
"tap": "^21.5.0",
|
|
77
|
+
"use-debounce": "^10.1.1",
|
|
77
78
|
"uuid": "^13.0.0",
|
|
78
79
|
"vaul": "^1.1.2",
|
|
79
80
|
"zod": "^4.3.6",
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
interface UserData {
|
|
2
|
-
userId: string;
|
|
3
|
-
userName: string;
|
|
4
|
-
userLogin: string;
|
|
5
|
-
password: string;
|
|
6
|
-
userPhone?: string;
|
|
7
|
-
userEmail: string;
|
|
8
|
-
userThumbnail?: string | null;
|
|
9
|
-
userType?: string;
|
|
10
|
-
active?: boolean;
|
|
11
|
-
accountId?: string;
|
|
12
|
-
userDeleted?: boolean;
|
|
13
|
-
}
|
|
14
|
-
interface AssistantComponentProps {
|
|
15
|
-
provider?: string;
|
|
16
|
-
model?: string;
|
|
17
|
-
agentId?: string;
|
|
18
|
-
agentName?: string;
|
|
19
|
-
temperature?: number;
|
|
20
|
-
maxTokens?: number;
|
|
21
|
-
className?: string;
|
|
22
|
-
baseUrl?: string;
|
|
23
|
-
additionalReferenceInfo?: object;
|
|
24
|
-
appId: string;
|
|
25
|
-
currentUserDetails: UserData;
|
|
26
|
-
}
|
|
27
|
-
export declare const AssistantComponent: ({ provider, model, agentId, agentName, temperature, maxTokens, className, baseUrl, additionalReferenceInfo, appId, currentUserDetails, }: AssistantComponentProps) => import("react/jsx-runtime").JSX.Element;
|
|
28
|
-
export {};
|
|
@@ -1,306 +0,0 @@
|
|
|
1
|
-
// "use client";
|
|
2
|
-
// import { Thread } from "./thread";
|
|
3
|
-
// import { AssistantRuntimeProvider } from "@assistant-ui/react";
|
|
4
|
-
// import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
|
|
5
|
-
// import { AgentTextChatTransport } from "./agentTextChatTransport";
|
|
6
|
-
// import { useEffect, useState } from "react";
|
|
7
|
-
// import { getValidAccessToken } from "@/utils/token-management";
|
|
8
|
-
// import { Agent } from "./agent-dropdown";
|
|
9
|
-
// interface UserData {
|
|
10
|
-
// userId: string;
|
|
11
|
-
// userName: string;
|
|
12
|
-
// userLogin: string;
|
|
13
|
-
// password: string;
|
|
14
|
-
// userPhone?: string;
|
|
15
|
-
// userEmail: string;
|
|
16
|
-
// userThumbnail?: string | null;
|
|
17
|
-
// userType?: string;
|
|
18
|
-
// active?: boolean;
|
|
19
|
-
// accountId?: string;
|
|
20
|
-
// userDeleted?: boolean;
|
|
21
|
-
// }
|
|
22
|
-
// interface AssistantComponentProps {
|
|
23
|
-
// provider?: string;
|
|
24
|
-
// model?: string;
|
|
25
|
-
// agentId?: string;
|
|
26
|
-
// agentName?: string;
|
|
27
|
-
// temperature?: number;
|
|
28
|
-
// maxTokens?: number;
|
|
29
|
-
// className?: string;
|
|
30
|
-
// baseUrl?: string;
|
|
31
|
-
// additionalReferenceInfo?: object;
|
|
32
|
-
// appId: string;
|
|
33
|
-
// currentUserDetails: UserData;
|
|
34
|
-
// }
|
|
35
|
-
// export const AssistantComponent = ({
|
|
36
|
-
// provider = "openai",
|
|
37
|
-
// model = "gpt-4o-mini",
|
|
38
|
-
// agentId = "default-agent",
|
|
39
|
-
// agentName = "Default Agent",
|
|
40
|
-
// temperature = 0.7,
|
|
41
|
-
// maxTokens = 2048,
|
|
42
|
-
// className,
|
|
43
|
-
// baseUrl = "http://localhost:3000",
|
|
44
|
-
// additionalReferenceInfo = {},
|
|
45
|
-
// appId = "",
|
|
46
|
-
// currentUserDetails,
|
|
47
|
-
// }: AssistantComponentProps) => {
|
|
48
|
-
// const runtime = useChatRuntime({
|
|
49
|
-
// transport: new AgentTextChatTransport({
|
|
50
|
-
// provider,
|
|
51
|
-
// model,
|
|
52
|
-
// agentId,
|
|
53
|
-
// agentName,
|
|
54
|
-
// temperature,
|
|
55
|
-
// maxTokens,
|
|
56
|
-
// baseUrl,
|
|
57
|
-
// additionalReferenceInfo,
|
|
58
|
-
// }),
|
|
59
|
-
// });
|
|
60
|
-
// const [agentList, setAgentList] = useState([]);
|
|
61
|
-
// const [selectedAgent, setSelectedAgent] = useState<Agent>();
|
|
62
|
-
// const getAgentsByAppId = async () => {
|
|
63
|
-
// try {
|
|
64
|
-
// const accessToken = await getValidAccessToken(
|
|
65
|
-
// "https://ikoncloud-dev.keross.com/ikon-api",
|
|
66
|
-
// );
|
|
67
|
-
// const response = await fetch(`${baseUrl}/api/agent/${appId}`, {
|
|
68
|
-
// method: "GET",
|
|
69
|
-
// headers: {
|
|
70
|
-
// "Content-Type": "application/json",
|
|
71
|
-
// Authorization: `Bearer ${accessToken}`,
|
|
72
|
-
// },
|
|
73
|
-
// });
|
|
74
|
-
// // 1. Check if the response is actually okay
|
|
75
|
-
// if (!response.ok) {
|
|
76
|
-
// throw new Error(`HTTP error! status: ${response.status}`);
|
|
77
|
-
// }
|
|
78
|
-
// // 2. Parse the body as JSON
|
|
79
|
-
// const data = await response.json();
|
|
80
|
-
// // 3. Now you can use it!
|
|
81
|
-
// console.log("Agent Data:", data);
|
|
82
|
-
// setAgentList(data);
|
|
83
|
-
// // setAgentList(response)
|
|
84
|
-
// } catch (error) {
|
|
85
|
-
// console.error(
|
|
86
|
-
// "Error while fetching agents with the specific appId",
|
|
87
|
-
// error,
|
|
88
|
-
// );
|
|
89
|
-
// }
|
|
90
|
-
// };
|
|
91
|
-
// useEffect(() => {
|
|
92
|
-
// getAgentsByAppId();
|
|
93
|
-
// }, [appId, baseUrl]);
|
|
94
|
-
// useEffect(() => {
|
|
95
|
-
// },[selectedAgent])
|
|
96
|
-
// return (
|
|
97
|
-
// <AssistantRuntimeProvider runtime={runtime}>
|
|
98
|
-
// <div className={className}>
|
|
99
|
-
// <div
|
|
100
|
-
// className={`flex flex-col h-full border rounded-lg overflow-hidden ${className}`}
|
|
101
|
-
// >
|
|
102
|
-
// <Thread
|
|
103
|
-
// currentUserDetails={currentUserDetails}
|
|
104
|
-
// agents={agentList}
|
|
105
|
-
// initialAgentId={agentId}
|
|
106
|
-
// initialAgentName={agentName}
|
|
107
|
-
// onAgentChange={(agent) => {
|
|
108
|
-
// // Handle agent change here
|
|
109
|
-
// console.log("Agent changed:", agent);
|
|
110
|
-
// setSelectedAgent(agent);
|
|
111
|
-
// }}
|
|
112
|
-
// />
|
|
113
|
-
// </div>
|
|
114
|
-
// </div>
|
|
115
|
-
// </AssistantRuntimeProvider>
|
|
116
|
-
// );
|
|
117
|
-
// };
|
|
118
|
-
//2nd imperfect change
|
|
119
|
-
// "use client";
|
|
120
|
-
// import { Thread } from "./thread";
|
|
121
|
-
// import { AssistantRuntimeProvider } from "@assistant-ui/react";
|
|
122
|
-
// import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
|
|
123
|
-
// import { AgentTextChatTransport } from "./agentTextChatTransport";
|
|
124
|
-
// import { useEffect, useRef, useState } from "react";
|
|
125
|
-
// import { getValidAccessToken } from "@/utils/token-management";
|
|
126
|
-
// import { Agent } from "./agent-dropdown";
|
|
127
|
-
// interface UserData {
|
|
128
|
-
// userId: string;
|
|
129
|
-
// userName: string;
|
|
130
|
-
// userLogin: string;
|
|
131
|
-
// password: string;
|
|
132
|
-
// userPhone?: string;
|
|
133
|
-
// userEmail: string;
|
|
134
|
-
// userThumbnail?: string | null;
|
|
135
|
-
// userType?: string;
|
|
136
|
-
// active?: boolean;
|
|
137
|
-
// accountId?: string;
|
|
138
|
-
// userDeleted?: boolean;
|
|
139
|
-
// }
|
|
140
|
-
// interface AssistantComponentProps {
|
|
141
|
-
// provider?: string;
|
|
142
|
-
// model?: string;
|
|
143
|
-
// agentId?: string;
|
|
144
|
-
// agentName?: string;
|
|
145
|
-
// temperature?: number;
|
|
146
|
-
// maxTokens?: number;
|
|
147
|
-
// className?: string;
|
|
148
|
-
// baseUrl?: string;
|
|
149
|
-
// additionalReferenceInfo?: object;
|
|
150
|
-
// appId: string;
|
|
151
|
-
// currentUserDetails: UserData;
|
|
152
|
-
// }
|
|
153
|
-
// export const AssistantComponent = ({
|
|
154
|
-
// provider = "openai",
|
|
155
|
-
// model = "gpt-4o-mini",
|
|
156
|
-
// agentId = "default-agent",
|
|
157
|
-
// agentName = "Default Agent",
|
|
158
|
-
// temperature = 0.7,
|
|
159
|
-
// maxTokens = 2048,
|
|
160
|
-
// className,
|
|
161
|
-
// baseUrl = "http://localhost:3000",
|
|
162
|
-
// additionalReferenceInfo = {},
|
|
163
|
-
// appId = "",
|
|
164
|
-
// currentUserDetails,
|
|
165
|
-
// }: AssistantComponentProps) => {
|
|
166
|
-
// const transportRef = useRef<AgentTextChatTransport | null>(null);
|
|
167
|
-
// const transport = new AgentTextChatTransport({
|
|
168
|
-
// provider,
|
|
169
|
-
// model,
|
|
170
|
-
// agentId,
|
|
171
|
-
// agentName,
|
|
172
|
-
// temperature,
|
|
173
|
-
// maxTokens,
|
|
174
|
-
// baseUrl,
|
|
175
|
-
// additionalReferenceInfo,
|
|
176
|
-
// });
|
|
177
|
-
// transportRef.current = transport;
|
|
178
|
-
// const runtime = useChatRuntime({
|
|
179
|
-
// transport,
|
|
180
|
-
// });
|
|
181
|
-
// const [agentList, setAgentList] = useState<Agent[]>([]);
|
|
182
|
-
// const [selectedAgent, setSelectedAgent] = useState<Agent>();
|
|
183
|
-
// const getAgentsByAppId = async () => {
|
|
184
|
-
// try {
|
|
185
|
-
// const accessToken = await getValidAccessToken(
|
|
186
|
-
// "https://ikoncloud-dev.keross.com/ikon-api",
|
|
187
|
-
// );
|
|
188
|
-
// const response = await fetch(`${baseUrl}/api/agent/${appId}`, {
|
|
189
|
-
// method: "GET",
|
|
190
|
-
// headers: {
|
|
191
|
-
// "Content-Type": "application/json",
|
|
192
|
-
// Authorization: `Bearer ${accessToken}`,
|
|
193
|
-
// },
|
|
194
|
-
// });
|
|
195
|
-
// if (!response.ok) {
|
|
196
|
-
// throw new Error(`HTTP error! status: ${response.status}`);
|
|
197
|
-
// }
|
|
198
|
-
// const data = await response.json();
|
|
199
|
-
// console.log("Agent Data:", data);
|
|
200
|
-
// setAgentList(data);
|
|
201
|
-
// } catch (error) {
|
|
202
|
-
// console.error(
|
|
203
|
-
// "Error while fetching agents with the specific appId",
|
|
204
|
-
// error,
|
|
205
|
-
// );
|
|
206
|
-
// }
|
|
207
|
-
// };
|
|
208
|
-
// useEffect(() => {
|
|
209
|
-
// getAgentsByAppId();
|
|
210
|
-
// }, [appId, baseUrl]);
|
|
211
|
-
// const handleAgentChange = (agent: Agent) => {
|
|
212
|
-
// setSelectedAgent(agent);
|
|
213
|
-
// // Update the transport with the new agent configuration
|
|
214
|
-
// if (transportRef.current) {
|
|
215
|
-
// transportRef.current.updateAgentConfig({
|
|
216
|
-
// agentId: agent.agentID,
|
|
217
|
-
// agentName: agent.agentName,
|
|
218
|
-
// });
|
|
219
|
-
// }
|
|
220
|
-
// console.log("Agent changed to:", agent.agentName);
|
|
221
|
-
// };
|
|
222
|
-
// return (
|
|
223
|
-
// <AssistantRuntimeProvider runtime={runtime}>
|
|
224
|
-
// <div className={className}>
|
|
225
|
-
// <div
|
|
226
|
-
// className={`flex flex-col h-full border rounded-lg overflow-hidden ${className}`}
|
|
227
|
-
// >
|
|
228
|
-
// <Thread
|
|
229
|
-
// currentUserDetails={currentUserDetails}
|
|
230
|
-
// agents={agentList}
|
|
231
|
-
// initialAgentId={agentId}
|
|
232
|
-
// initialAgentName={agentName}
|
|
233
|
-
// onAgentChange={handleAgentChange}
|
|
234
|
-
// />
|
|
235
|
-
// </div>
|
|
236
|
-
// </div>
|
|
237
|
-
// </AssistantRuntimeProvider>
|
|
238
|
-
// );
|
|
239
|
-
// };
|
|
240
|
-
//3rd change
|
|
241
|
-
"use client";
|
|
242
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
243
|
-
import { Thread } from "./thread";
|
|
244
|
-
import { AssistantRuntimeProvider } from "@assistant-ui/react";
|
|
245
|
-
import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
|
|
246
|
-
import { AgentTextChatTransport } from "./agentTextChatTransport";
|
|
247
|
-
import { useEffect, useMemo, useState } from "react";
|
|
248
|
-
import { getValidAccessToken } from "../../utils/token-management";
|
|
249
|
-
export const AssistantComponent = ({ provider = "openai", model = "gpt-4o-mini", agentId = "default-agent", agentName = "Default Agent", temperature = 0.7, maxTokens = 2048, className, baseUrl = "http://localhost:3000", additionalReferenceInfo = {}, appId = "", currentUserDetails, }) => {
|
|
250
|
-
const [agentList, setAgentList] = useState([]);
|
|
251
|
-
const [selectedAgent, setSelectedAgent] = useState();
|
|
252
|
-
// Create transport with current agent config - memoized to avoid recreating on every render
|
|
253
|
-
const transport = useMemo(() => new AgentTextChatTransport({
|
|
254
|
-
provider,
|
|
255
|
-
model,
|
|
256
|
-
agentId: selectedAgent ? selectedAgent.agentID : agentId,
|
|
257
|
-
agentName: selectedAgent ? selectedAgent.agentName : agentName,
|
|
258
|
-
temperature,
|
|
259
|
-
maxTokens,
|
|
260
|
-
baseUrl,
|
|
261
|
-
additionalReferenceInfo,
|
|
262
|
-
}), [
|
|
263
|
-
provider,
|
|
264
|
-
model,
|
|
265
|
-
selectedAgent,
|
|
266
|
-
agentId,
|
|
267
|
-
agentName,
|
|
268
|
-
temperature,
|
|
269
|
-
maxTokens,
|
|
270
|
-
baseUrl,
|
|
271
|
-
additionalReferenceInfo,
|
|
272
|
-
]);
|
|
273
|
-
// Create runtime with the transport - will recreate when transport changes
|
|
274
|
-
const runtime = useChatRuntime({
|
|
275
|
-
transport,
|
|
276
|
-
});
|
|
277
|
-
const getAgentsByAppId = async () => {
|
|
278
|
-
try {
|
|
279
|
-
const accessToken = await getValidAccessToken("https://ikoncloud-dev.keross.com/ikon-api");
|
|
280
|
-
const response = await fetch(`${baseUrl}/api/agent/${appId}`, {
|
|
281
|
-
method: "GET",
|
|
282
|
-
headers: {
|
|
283
|
-
"Content-Type": "application/json",
|
|
284
|
-
Authorization: `Bearer ${accessToken}`,
|
|
285
|
-
},
|
|
286
|
-
});
|
|
287
|
-
if (!response.ok) {
|
|
288
|
-
throw new Error(`HTTP error! status: ${response.status}`);
|
|
289
|
-
}
|
|
290
|
-
const data = await response.json();
|
|
291
|
-
console.log("Agent Data:", data);
|
|
292
|
-
setAgentList(data);
|
|
293
|
-
}
|
|
294
|
-
catch (error) {
|
|
295
|
-
console.error("Error while fetching agents with the specific appId", error);
|
|
296
|
-
}
|
|
297
|
-
};
|
|
298
|
-
useEffect(() => {
|
|
299
|
-
getAgentsByAppId();
|
|
300
|
-
}, [appId, baseUrl]);
|
|
301
|
-
const handleAgentChange = (agent) => {
|
|
302
|
-
setSelectedAgent(agent);
|
|
303
|
-
console.log("Agent changed to:", agent.agentName);
|
|
304
|
-
};
|
|
305
|
-
return (_jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsx("div", { className: className, children: _jsx("div", { className: `flex flex-col h-full border rounded-lg overflow-hidden ${className}`, children: _jsx(Thread, { currentUserDetails: currentUserDetails, agents: agentList, initialAgentId: agentId, initialAgentName: agentName, onAgentChange: handleAgentChange }) }) }) }));
|
|
306
|
-
};
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
export interface Agent {
|
|
2
|
-
agentDescription?: string;
|
|
3
|
-
agentID: string;
|
|
4
|
-
agentName: string;
|
|
5
|
-
agentRoles?: string[];
|
|
6
|
-
agentTasks?: object[];
|
|
7
|
-
appId: string;
|
|
8
|
-
createdAt: string;
|
|
9
|
-
createdBy: string;
|
|
10
|
-
mcpServerIds?: string[];
|
|
11
|
-
systemPrompt: string;
|
|
12
|
-
updatedAt: string;
|
|
13
|
-
updatedBy: string;
|
|
14
|
-
userName?: null | string;
|
|
15
|
-
[key: string]: any;
|
|
16
|
-
}
|
|
17
|
-
export interface AgentDropdownProps {
|
|
18
|
-
agents: Agent[];
|
|
19
|
-
selectedAgent?: Agent;
|
|
20
|
-
onSelectAgent: (agent: Agent) => void;
|
|
21
|
-
className?: string;
|
|
22
|
-
triggerClassName?: string;
|
|
23
|
-
}
|
|
24
|
-
export declare const AgentDropdown: ({ agents, selectedAgent, onSelectAgent, className, triggerClassName, }: AgentDropdownProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { useState } from "react";
|
|
4
|
-
import { ChevronDownIcon } from "lucide-react";
|
|
5
|
-
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "../../shadcn/dropdown-menu";
|
|
6
|
-
import { Button } from "../../shadcn/button";
|
|
7
|
-
import { cn } from "../../utils/cn";
|
|
8
|
-
export const AgentDropdown = ({ agents, selectedAgent, onSelectAgent, className, triggerClassName, }) => {
|
|
9
|
-
const [open, setOpen] = useState(false);
|
|
10
|
-
// const displayAgent = selectedAgent || (agents.length > 0 ? agents[0] : null);
|
|
11
|
-
const displayAgent = selectedAgent || null;
|
|
12
|
-
return (_jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", className: cn("gap-2 px-3 py-2 text-sm font-medium rounded-2xl", triggerClassName), children: [_jsx("span", { className: "truncate", children: (displayAgent === null || displayAgent === void 0 ? void 0 : displayAgent.agentName) || "Select Agent" }), _jsx(ChevronDownIcon, { className: "size-4 shrink-0 opacity-50" })] }) }), _jsx(DropdownMenuContent, { align: "end", className: cn("min-w-[200px]", className), children: agents.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuLabel, { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground", children: "Agents" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuGroup, { children: agents.map((agent) => (_jsxs(DropdownMenuItem, { onClick: () => {
|
|
13
|
-
onSelectAgent(agent);
|
|
14
|
-
setOpen(false);
|
|
15
|
-
}, className: cn("cursor-pointer flex flex-col gap-1", (displayAgent === null || displayAgent === void 0 ? void 0 : displayAgent.agentID) === agent.agentID && "bg-accent"), children: [_jsx("div", { className: "font-medium text-sm", children: agent.agentName }), agent.agentDescription && (_jsx("div", { className: "text-xs text-muted-foreground truncate", children: agent.agentDescription }))] }, agent.agentID))) })] })) : (_jsx("div", { className: "px-2 py-1.5 text-sm text-muted-foreground text-center", children: "No agents available" })) })] }));
|
|
16
|
-
};
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { ChatTransport, UIMessage, UIMessageChunk, ChatRequestOptions } from "ai";
|
|
2
|
-
export interface AgentTextChatTransportOptions {
|
|
3
|
-
provider: string;
|
|
4
|
-
model: string;
|
|
5
|
-
agentId: string;
|
|
6
|
-
agentName?: string;
|
|
7
|
-
temperature?: number;
|
|
8
|
-
maxTokens?: number;
|
|
9
|
-
baseUrl?: string;
|
|
10
|
-
additionalReferenceInfo?: object;
|
|
11
|
-
}
|
|
12
|
-
export declare class AgentTextChatTransport<UI_MESSAGE extends UIMessage = UIMessage> implements ChatTransport<UI_MESSAGE> {
|
|
13
|
-
private agentConfig;
|
|
14
|
-
private baseUrl;
|
|
15
|
-
private chatIdMap;
|
|
16
|
-
constructor(options: AgentTextChatTransportOptions);
|
|
17
|
-
updateAgentConfig(options: Partial<AgentTextChatTransportOptions>): void;
|
|
18
|
-
private getChatId;
|
|
19
|
-
sendMessages(options: {
|
|
20
|
-
trigger: "submit-message" | "regenerate-message";
|
|
21
|
-
chatId: string;
|
|
22
|
-
messageId: string | undefined;
|
|
23
|
-
messages: UI_MESSAGE[];
|
|
24
|
-
abortSignal: AbortSignal | undefined;
|
|
25
|
-
} & ChatRequestOptions): Promise<ReadableStream<UIMessageChunk>>;
|
|
26
|
-
reconnectToStream(options: {
|
|
27
|
-
chatId: string;
|
|
28
|
-
} & ChatRequestOptions): Promise<ReadableStream<UIMessageChunk> | null>;
|
|
29
|
-
private processResponseStream;
|
|
30
|
-
}
|