ikoncomponents 1.6.3 → 1.6.5

package/README.md

@@ -1,36 +1,36 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

package/dist/ikoncomponents/assistant-ui/Assistant.d.ts

@@ -0,0 +1,28 @@
+interface UserData {
+    userId: string;
+    userName: string;
+    userLogin: string;
+    password: string;
+    userPhone?: string;
+    userEmail: string;
+    userThumbnail?: string | null;
+    userType?: string;
+    active?: boolean;
+    accountId?: string;
+    userDeleted?: boolean;
+}
+interface AssistantComponentProps {
+    provider?: string;
+    model?: string;
+    agentId?: string;
+    agentName?: string;
+    temperature?: number;
+    maxTokens?: number;
+    className?: string;
+    baseUrl?: string;
+    additionalReferenceInfo?: object;
+    appId: string;
+    currentUserDetails: UserData;
+}
+export declare const AssistantComponent: ({ provider, model, agentId, agentName, temperature, maxTokens, className, baseUrl, additionalReferenceInfo, appId, currentUserDetails, }: AssistantComponentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ikoncomponents/assistant-ui/Assistant.js

@@ -0,0 +1,306 @@
+// "use client";
+// import { Thread } from "./thread";
+// import { AssistantRuntimeProvider } from "@assistant-ui/react";
+// import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+// import { AgentTextChatTransport } from "./agentTextChatTransport";
+// import { useEffect, useState } from "react";
+// import { getValidAccessToken } from "@/utils/token-management";
+// import { Agent } from "./agent-dropdown";
+// interface UserData {
+//   userId: string;
+//   userName: string;
+//   userLogin: string;
+//   password: string;
+//   userPhone?: string;
+//   userEmail: string;
+//   userThumbnail?: string | null;
+//   userType?: string;
+//   active?: boolean;
+//   accountId?: string;
+//   userDeleted?: boolean;
+// }
+// interface AssistantComponentProps {
+//   provider?: string;
+//   model?: string;
+//   agentId?: string;
+//   agentName?: string;
+//   temperature?: number;
+//   maxTokens?: number;
+//   className?: string;
+//   baseUrl?: string;
+//   additionalReferenceInfo?: object;
+//   appId: string;
+//   currentUserDetails: UserData;
+// }
+// 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,
+// }: AssistantComponentProps) => {
+//   const runtime = useChatRuntime({
+//     transport: new AgentTextChatTransport({
+//       provider,
+//       model,
+//       agentId,
+//       agentName,
+//       temperature,
+//       maxTokens,
+//       baseUrl,
+//       additionalReferenceInfo,
+//     }),
+//   });
+//   const [agentList, setAgentList] = useState([]);
+//   const [selectedAgent, setSelectedAgent] = useState<Agent>();
+//   const getAgentsByAppId = async () => {
+//     try {
+//       const accessToken = await getValidAccessToken(
+//         "https://ikoncloud-dev.keross.com/ikon-api",
+//       );
+//       const response = await fetch(`${baseUrl}/api/agent/${appId}`, {
+//         method: "GET",
+//         headers: {
+//           "Content-Type": "application/json",
+//           Authorization: `Bearer ${accessToken}`,
+//         },
+//       });
+//       // 1. Check if the response is actually okay
+//       if (!response.ok) {
+//         throw new Error(`HTTP error! status: ${response.status}`);
+//       }
+//       // 2. Parse the body as JSON
+//       const data = await response.json();
+//       // 3. Now you can use it!
+//       console.log("Agent Data:", data);
+//       setAgentList(data);
+//       // setAgentList(response)
+//     } catch (error) {
+//       console.error(
+//         "Error while fetching agents with the specific appId",
+//         error,
+//       );
+//     }
+//   };
+//   useEffect(() => {
+//     getAgentsByAppId();
+//   }, [appId, baseUrl]);
+//   useEffect(() => {
+//   },[selectedAgent])
+//   return (
+//     <AssistantRuntimeProvider runtime={runtime}>
+//       <div className={className}>
+//         <div
+//           className={`flex flex-col h-full border rounded-lg overflow-hidden ${className}`}
+//         >
+//           <Thread
+//             currentUserDetails={currentUserDetails}
+//             agents={agentList}
+//             initialAgentId={agentId}
+//             initialAgentName={agentName}
+//             onAgentChange={(agent) => {
+//               // Handle agent change here
+//               console.log("Agent changed:", agent);
+//               setSelectedAgent(agent);
+//             }}
+//           />
+//         </div>
+//       </div>
+//     </AssistantRuntimeProvider>
+//   );
+// };
+//2nd imperfect change
+// "use client";
+// import { Thread } from "./thread";
+// import { AssistantRuntimeProvider } from "@assistant-ui/react";
+// import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+// import { AgentTextChatTransport } from "./agentTextChatTransport";
+// import { useEffect, useRef, useState } from "react";
+// import { getValidAccessToken } from "@/utils/token-management";
+// import { Agent } from "./agent-dropdown";
+// interface UserData {
+//   userId: string;
+//   userName: string;
+//   userLogin: string;
+//   password: string;
+//   userPhone?: string;
+//   userEmail: string;
+//   userThumbnail?: string | null;
+//   userType?: string;
+//   active?: boolean;
+//   accountId?: string;
+//   userDeleted?: boolean;
+// }
+// interface AssistantComponentProps {
+//   provider?: string;
+//   model?: string;
+//   agentId?: string;
+//   agentName?: string;
+//   temperature?: number;
+//   maxTokens?: number;
+//   className?: string;
+//   baseUrl?: string;
+//   additionalReferenceInfo?: object;
+//   appId: string;
+//   currentUserDetails: UserData;
+// }
+// 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,
+// }: AssistantComponentProps) => {
+//   const transportRef = useRef<AgentTextChatTransport | null>(null);
+//   const transport = new AgentTextChatTransport({
+//     provider,
+//     model,
+//     agentId,
+//     agentName,
+//     temperature,
+//     maxTokens,
+//     baseUrl,
+//     additionalReferenceInfo,
+//   });
+//   transportRef.current = transport;
+//   const runtime = useChatRuntime({
+//     transport,
+//   });
+//   const [agentList, setAgentList] = useState<Agent[]>([]);
+//   const [selectedAgent, setSelectedAgent] = useState<Agent>();
+//   const getAgentsByAppId = async () => {
+//     try {
+//       const accessToken = await getValidAccessToken(
+//         "https://ikoncloud-dev.keross.com/ikon-api",
+//       );
+//       const response = await fetch(`${baseUrl}/api/agent/${appId}`, {
+//         method: "GET",
+//         headers: {
+//           "Content-Type": "application/json",
+//           Authorization: `Bearer ${accessToken}`,
+//         },
+//       });
+//       if (!response.ok) {
+//         throw new Error(`HTTP error! status: ${response.status}`);
+//       }
+//       const data = await response.json();
+//       console.log("Agent Data:", data);
+//       setAgentList(data);
+//     } catch (error) {
+//       console.error(
+//         "Error while fetching agents with the specific appId",
+//         error,
+//       );
+//     }
+//   };
+//   useEffect(() => {
+//     getAgentsByAppId();
+//   }, [appId, baseUrl]);
+//   const handleAgentChange = (agent: Agent) => {
+//     setSelectedAgent(agent);
+//     // Update the transport with the new agent configuration
+//     if (transportRef.current) {
+//       transportRef.current.updateAgentConfig({
+//         agentId: agent.agentID,
+//         agentName: agent.agentName,
+//       });
+//     }
+//     console.log("Agent changed to:", agent.agentName);
+//   };
+//   return (
+//     <AssistantRuntimeProvider runtime={runtime}>
+//       <div className={className}>
+//         <div
+//           className={`flex flex-col h-full border rounded-lg overflow-hidden ${className}`}
+//         >
+//           <Thread
+//             currentUserDetails={currentUserDetails}
+//             agents={agentList}
+//             initialAgentId={agentId}
+//             initialAgentName={agentName}
+//             onAgentChange={handleAgentChange}
+//           />
+//         </div>
+//       </div>
+//     </AssistantRuntimeProvider>
+//   );
+// };
+//3rd change
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Thread } from "./thread";
+import { AssistantRuntimeProvider } from "@assistant-ui/react";
+import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+import { AgentTextChatTransport } from "./agentTextChatTransport";
+import { useEffect, useMemo, useState } from "react";
+import { getValidAccessToken } from "@/utils/token-management";
+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, }) => {
+    const [agentList, setAgentList] = useState([]);
+    const [selectedAgent, setSelectedAgent] = useState();
+    // Create transport with current agent config - memoized to avoid recreating on every render
+    const transport = useMemo(() => new AgentTextChatTransport({
+        provider,
+        model,
+        agentId: selectedAgent ? selectedAgent.agentID : agentId,
+        agentName: selectedAgent ? selectedAgent.agentName : agentName,
+        temperature,
+        maxTokens,
+        baseUrl,
+        additionalReferenceInfo,
+    }), [
+        provider,
+        model,
+        selectedAgent,
+        agentId,
+        agentName,
+        temperature,
+        maxTokens,
+        baseUrl,
+        additionalReferenceInfo,
+    ]);
+    // Create runtime with the transport - will recreate when transport changes
+    const runtime = useChatRuntime({
+        transport,
+    });
+    const getAgentsByAppId = async () => {
+        try {
+            const accessToken = await getValidAccessToken("https://ikoncloud-dev.keross.com/ikon-api");
+            const response = await fetch(`${baseUrl}/api/agent/${appId}`, {
+                method: "GET",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${accessToken}`,
+                },
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            console.log("Agent Data:", data);
+            setAgentList(data);
+        }
+        catch (error) {
+            console.error("Error while fetching agents with the specific appId", error);
+        }
+    };
+    useEffect(() => {
+        getAgentsByAppId();
+    }, [appId, baseUrl]);
+    const handleAgentChange = (agent) => {
+        setSelectedAgent(agent);
+        console.log("Agent changed to:", agent.agentName);
+    };
+    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 }) }) }) }));
+};

package/dist/ikoncomponents/assistant-ui/agent-dropdown.d.ts

@@ -0,0 +1,24 @@
+export interface Agent {
+    agentDescription?: string;
+    agentID: string;
+    agentName: string;
+    agentRoles?: string[];
+    agentTasks?: object[];
+    appId: string;
+    createdAt: string;
+    createdBy: string;
+    mcpServerIds?: string[];
+    systemPrompt: string;
+    updatedAt: string;
+    updatedBy: string;
+    userName?: null | string;
+    [key: string]: any;
+}
+export interface AgentDropdownProps {
+    agents: Agent[];
+    selectedAgent?: Agent;
+    onSelectAgent: (agent: Agent) => void;
+    className?: string;
+    triggerClassName?: string;
+}
+export declare const AgentDropdown: ({ agents, selectedAgent, onSelectAgent, className, triggerClassName, }: AgentDropdownProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/assistant-ui/agent-dropdown.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChevronDownIcon } from "lucide-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "../../shadcn/dropdown-menu";
+import { Button } from "../../shadcn/button";
+import { cn } from "../../utils/cn";
+export const AgentDropdown = ({ agents, selectedAgent, onSelectAgent, className, triggerClassName, }) => {
+    const [open, setOpen] = useState(false);
+    // const displayAgent = selectedAgent || (agents.length > 0 ? agents[0] : null);
+    const displayAgent = selectedAgent || null;
+    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: () => {
+                                    onSelectAgent(agent);
+                                    setOpen(false);
+                                }, 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" })) })] }));
+};

package/dist/ikoncomponents/assistant-ui/agentTextChatTransport.d.ts

@@ -0,0 +1,30 @@
+import { ChatTransport, UIMessage, UIMessageChunk, ChatRequestOptions } from "ai";
+export interface AgentTextChatTransportOptions {
+    provider: string;
+    model: string;
+    agentId: string;
+    agentName?: string;
+    temperature?: number;
+    maxTokens?: number;
+    baseUrl?: string;
+    additionalReferenceInfo?: object;
+}
+export declare class AgentTextChatTransport<UI_MESSAGE extends UIMessage = UIMessage> implements ChatTransport<UI_MESSAGE> {
+    private agentConfig;
+    private baseUrl;
+    private chatIdMap;
+    constructor(options: AgentTextChatTransportOptions);
+    updateAgentConfig(options: Partial<AgentTextChatTransportOptions>): void;
+    private getChatId;
+    sendMessages(options: {
+        trigger: "submit-message" | "regenerate-message";
+        chatId: string;
+        messageId: string | undefined;
+        messages: UI_MESSAGE[];
+        abortSignal: AbortSignal | undefined;
+    } & ChatRequestOptions): Promise<ReadableStream<UIMessageChunk>>;
+    reconnectToStream(options: {
+        chatId: string;
+    } & ChatRequestOptions): Promise<ReadableStream<UIMessageChunk> | null>;
+    private processResponseStream;
+}