ikoncomponents 1.6.4 → 1.6.6

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

@@ -1,4 +1,16 @@
-import { UserData } from "../../utils/userType";
+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;
@@ -8,7 +20,9 @@ interface AssistantComponentProps {
     maxTokens?: number;
     className?: string;
     baseUrl?: string;
+    additionalReferenceInfo?: object;
+    appId: string;
     currentUserDetails: UserData;
 }
-export declare const AssistantComponent: ({ provider, model, agentId, agentName, temperature, maxTokens, className, baseUrl, currentUserDetails }: AssistantComponentProps) => import("react/jsx-runtime").JSX.Element;
+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

@@ -1,20 +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";
-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", currentUserDetails }) => {
+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: new AgentTextChatTransport({
-            provider,
-            model,
-            agentId,
-            agentName,
-            temperature,
-            maxTokens,
-            baseUrl
-        }),
+        transport,
     });
-    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 }) }) }) });
+    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

@@ -7,12 +7,14 @@ export interface AgentTextChatTransportOptions {
     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";

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

@@ -1,3 +1,4 @@
+import { getValidAccessToken } from "../../utils/token-management";
 import { v4 as uuidv4 } from "uuid";
 export class AgentTextChatTransport {
     constructor(options) {
@@ -5,6 +6,9 @@ export class AgentTextChatTransport {
         this.agentConfig = options;
         this.baseUrl = options.baseUrl || "";
     }
+    updateAgentConfig(options) {
+        this.agentConfig = Object.assign(Object.assign({}, this.agentConfig), options);
+    }
     getChatId(chatId) {
         if (this.chatIdMap.has(chatId)) {
             return this.chatIdMap.get(chatId);
@@ -25,11 +29,17 @@ export class AgentTextChatTransport {
                 .join("");
             return {
                 role: msg.role,
-                content: content,
+                content: msg.role === "user" &&
+                    this.agentConfig.additionalReferenceInfo &&
+                    Object.keys(this.agentConfig.additionalReferenceInfo).length > 0
+                    ? content + JSON.stringify(this.agentConfig.additionalReferenceInfo)
+                    : content,
             };
         });
         const requestBody = Object.assign({ messages: convertedMessages, provider: this.agentConfig.provider, model: this.agentConfig.model, agentId: this.agentConfig.agentId, agentName: this.agentConfig.agentName, temperature: (_a = this.agentConfig.temperature) !== null && _a !== void 0 ? _a : 0.7, maxTokens: (_b = this.agentConfig.maxTokens) !== null && _b !== void 0 ? _b : 2048, stream: true, useVoice: false }, body);
-        const mergedHeaders = Object.assign({ "Content-Type": "application/json" }, (headers instanceof Headers
+        //adding code to fetch the token and pass it
+        const accessToken = await getValidAccessToken(this.baseUrl);
+        const mergedHeaders = Object.assign({ "Content-Type": "application/json", "Authorization": `Bearer ${accessToken}` }, (headers instanceof Headers
             ? Object.fromEntries(headers.entries())
             : headers || {}));
         try {

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

@@ -1,5 +1,10 @@
 import { type FC } from "react";
 import { UserData } from "../../utils/userType";
+import { Agent } from "./agent-dropdown";
 export declare const Thread: FC<{
     currentUserDetails: UserData;
+    agents?: Agent[];
+    initialAgentId?: string;
+    initialAgentName?: string;
+    onAgentChange?: (agent: Agent) => void;
 }>;

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

@@ -13,6 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, PencilIcon, RefreshCwIcon, Square, } from "lucide-react";
 import { ActionBarPrimitive, BranchPickerPrimitive, ComposerPrimitive, ErrorPrimitive, MessagePrimitive, ThreadPrimitive, } from "@assistant-ui/react";
+import { useState } from "react";
 import { LazyMotion, MotionConfig, domAnimation } from "motion/react";
 import * as m from "motion/react-m";
 import { Button } from "../../shadcn/button";
@@ -21,14 +22,19 @@ import { ToolFallback } from "../assistant-ui/tool-fallback";
 import { TooltipIconButton } from "../assistant-ui/tooltip-icon-button";
 import { ComposerAddAttachment, ComposerAttachments, UserMessageAttachments, } from "../assistant-ui/attachment";
 import { cn } from "../../utils/cn";
-export const Thread = ({ currentUserDetails, }) => {
+import { AgentDropdown } from "./agent-dropdown";
+export const Thread = ({ currentUserDetails, agents = [], initialAgentId = "default-agent", initialAgentName = "Default Agent", onAgentChange, }) => {
+    const [selectedAgent, setSelectedAgent] = useState(agents.find((a) => a.agentID === initialAgentId));
     return (_jsx(LazyMotion, { features: domAnimation, children: _jsx(MotionConfig, { reducedMotion: "user", children: _jsx(ThreadPrimitive.Root, { className: "aui-root aui-thread-root @container flex h-full flex-col bg-background", style: {
                     ["--thread-max-width"]: "44rem",
                 }, children: _jsxs(ThreadPrimitive.Viewport, { turnAnchor: "top", className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth px-4 pt-4", children: [_jsx(ThreadPrimitive.If, { empty: true, children: _jsx(ThreadWelcome, { currentUserDetails: currentUserDetails }) }), _jsx(ThreadPrimitive.Messages, { components: {
                                 UserMessage,
                                 EditComposer,
                                 AssistantMessage,
-                            } }), _jsxs(ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 mx-auto mt-4 flex w-full max-w-[var(--thread-max-width)] flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6", children: [_jsx(ThreadScrollToBottom, {}), _jsx(Composer, {})] })] }) }) }) }));
+                            } }), _jsxs(ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 mx-auto mt-4 flex w-full max-w-[var(--thread-max-width)] flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6", children: [_jsx(ThreadScrollToBottom, {}), _jsx(Composer, { agents: agents, selectedAgent: selectedAgent, onSelectAgent: (agent) => {
+                                        setSelectedAgent(agent);
+                                        onAgentChange === null || onAgentChange === void 0 ? void 0 : onAgentChange(agent);
+                                    } })] })] }) }) }) }));
 };
 const ThreadScrollToBottom = () => {
     return (_jsx(ThreadPrimitive.ScrollToBottom, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Scroll to bottom", variant: "outline", className: "aui-thread-scroll-to-bottom absolute -top-12 z-10 self-center rounded-full p-4 disabled:invisible dark:bg-background dark:hover:bg-accent", children: _jsx(ArrowDownIcon, {}) }) }));
@@ -76,11 +82,11 @@ const ThreadSuggestions = () => {
             },
         ].map((suggestedAction, index) => (_jsx(m.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 20 }, transition: { delay: 0.05 * index }, className: "aui-thread-welcome-suggestion-display [&:nth-child(n+3)]:hidden @md:[&:nth-child(n+3)]:block", children: _jsx(ThreadPrimitive.Suggestion, { prompt: suggestedAction.action, send: true, asChild: true, children: _jsxs(Button, { variant: "ghost", className: "aui-thread-welcome-suggestion h-auto w-full flex-1 flex-wrap items-start justify-start gap-1 rounded-3xl border px-5 py-4 text-left text-sm @md:flex-col dark:hover:bg-accent/60", "aria-label": suggestedAction.action, children: [_jsx("span", { className: "aui-thread-welcome-suggestion-text-1 font-medium", children: suggestedAction.title }), _jsx("span", { className: "aui-thread-welcome-suggestion-text-2 text-muted-foreground", children: suggestedAction.label })] }) }) }, `suggested-action-${suggestedAction.title}-${index}`))) }));
 };
-const Composer = () => {
-    return (_jsx(ComposerPrimitive.Root, { className: "aui-composer-root relative flex w-full flex-col", children: _jsxs(ComposerPrimitive.AttachmentDropzone, { className: "aui-composer-attachment-dropzone group/input-group flex w-full flex-col rounded-3xl border border-input bg-background px-1 pt-2 shadow-xs transition-[color,box-shadow] outline-none has-[textarea:focus-visible]:border-ring has-[textarea:focus-visible]:ring-[3px] has-[textarea:focus-visible]:ring-ring/50 data-[dragging=true]:border-dashed data-[dragging=true]:border-ring data-[dragging=true]:bg-accent/50 dark:bg-background", children: [_jsx(ComposerAttachments, {}), _jsx(ComposerPrimitive.Input, { placeholder: "Send a message...", className: "aui-composer-input mb-1 max-h-32 min-h-16 w-full resize-none bg-transparent px-3.5 pt-1.5 pb-3 text-base outline-none placeholder:text-muted-foreground focus-visible:ring-0", rows: 1, autoFocus: true, "aria-label": "Message input" }), _jsx(ComposerAction, {})] }) }));
+const Composer = ({ agents = [], selectedAgent, onSelectAgent }) => {
+    return (_jsx(ComposerPrimitive.Root, { className: "aui-composer-root relative flex w-full flex-col", children: _jsxs(ComposerPrimitive.AttachmentDropzone, { className: "aui-composer-attachment-dropzone group/input-group flex w-full flex-col rounded-3xl border border-input bg-background px-1 pt-2 shadow-xs transition-[color,box-shadow] outline-none has-[textarea:focus-visible]:border-ring has-[textarea:focus-visible]:ring-[3px] has-[textarea:focus-visible]:ring-ring/50 data-[dragging=true]:border-dashed data-[dragging=true]:border-ring data-[dragging=true]:bg-accent/50 dark:bg-background", children: [_jsx(ComposerAttachments, {}), _jsx(ComposerPrimitive.Input, { placeholder: "Send a message...", className: "aui-composer-input mb-1 max-h-32 min-h-16 w-full resize-none bg-transparent px-3.5 pt-1.5 pb-3 text-base outline-none placeholder:text-muted-foreground focus-visible:ring-0", rows: 1, autoFocus: true, "aria-label": "Message input" }), _jsx(ComposerAction, { agents: agents, selectedAgent: selectedAgent, onSelectAgent: onSelectAgent })] }) }));
 };
-const ComposerAction = () => {
-    return (_jsxs("div", { className: "aui-composer-action-wrapper relative mx-1 mt-2 mb-2 flex items-center justify-between", children: [_jsx(ComposerAddAttachment, {}), _jsx(ThreadPrimitive.If, { running: false, children: _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Send message", side: "bottom", type: "submit", variant: "default", size: "icon", className: "aui-composer-send size-[34px] rounded-full p-1", "aria-label": "Send message", children: _jsx(ArrowUpIcon, { className: "aui-composer-send-icon size-5" }) }) }) }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { type: "button", variant: "default", size: "icon", className: "aui-composer-cancel size-[34px] rounded-full border border-muted-foreground/60 hover:bg-primary/75 dark:border-muted-foreground/90", "aria-label": "Stop generating", children: _jsx(Square, { className: "aui-composer-cancel-icon size-3.5 fill-white dark:fill-black" }) }) }) })] }));
+const ComposerAction = ({ agents = [], selectedAgent, onSelectAgent }) => {
+    return (_jsxs("div", { className: "aui-composer-action-wrapper relative mx-1 mt-2 mb-2 flex items-center justify-between", children: [_jsx(ComposerAddAttachment, {}), _jsxs("div", { className: "flex gap-3", children: [agents.length > 0 && (_jsx(AgentDropdown, { agents: agents, selectedAgent: selectedAgent, onSelectAgent: onSelectAgent !== null && onSelectAgent !== void 0 ? onSelectAgent : (() => { }), triggerClassName: "h-9 text-xs" })), _jsx(ThreadPrimitive.If, { running: false, children: _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Send message", side: "bottom", type: "submit", variant: "default", size: "icon", className: "aui-composer-send size-[34px] rounded-full p-1", "aria-label": "Send message", children: _jsx(ArrowUpIcon, { className: "aui-composer-send-icon size-5" }) }) }) }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { type: "button", variant: "default", size: "icon", className: "aui-composer-cancel size-[34px] rounded-full border border-muted-foreground/60 hover:bg-primary/75 dark:border-muted-foreground/90", "aria-label": "Stop generating", children: _jsx(Square, { className: "aui-composer-cancel-icon size-3.5 fill-white dark:fill-black" }) }) }) })] })] }));
 };
 const MessageError = () => {
     return (_jsx(MessagePrimitive.Error, { children: _jsx(ErrorPrimitive.Root, { className: "aui-message-error-root mt-2 rounded-md border border-destructive bg-destructive/10 p-3 text-sm text-destructive dark:bg-destructive/5 dark:text-red-200", children: _jsx(ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) }));

package/dist/ikoncomponents/main-layout/RefreshContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useState, useCallback } from 'react';
 const RefreshContext = createContext(undefined);

package/dist/ikoncomponents/main-layout/footer.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Copyright } from "lucide-react";
 export function Footer() {

package/dist/ikoncomponents/main-layout/header.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AppBreadcrumb } from "../app-breadcrumb";
 import { ThemeToggleBtn } from "../theme-toggle-btn";

package/dist/ikoncomponents/main-layout/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { MainSidebar } from './main-sidebar';
 import { SidebarInset, SidebarProvider } from '../../shadcn/sidebar';

package/dist/ikoncomponents/reload-component/index.d.ts

@@ -0,0 +1,6 @@
+export interface ReloadProps {
+    isLoading: boolean;
+    onReload?: () => void;
+    errorMessage?: string;
+}
+export declare function Reload({ isLoading, onReload, errorMessage, }: ReloadProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ikoncomponents/reload-component/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Loader2, RotateCcw } from "lucide-react";
+export function Reload({ isLoading, onReload, errorMessage, }) {
+    if (!isLoading && !errorMessage)
+        return null;
+    return (_jsx("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-background/60 backdrop-blur-md rounded-lg transition-all duration-300", children: _jsx("div", { className: "flex flex-col items-center gap-4", children: isLoading ? (_jsx("div", { className: "bg-background/80 p-6 rounded-2xl shadow-xl border border-border/50 backdrop-blur-xl animate-in fade-in zoom-in duration-300", children: _jsx(Loader2, { size: 48, className: "text-primary animate-spin" }) })) : (_jsx("div", { className: "bg-background/80 p-4 rounded-full shadow-lg border border-border/50 backdrop-blur-xl animate-in fade-in zoom-in duration-300", children: _jsx("button", { onClick: onReload, className: "p-3 rounded-full bg-primary/10 hover:bg-primary/20 transition-all text-primary hover:scale-110 active:scale-95", title: errorMessage || "Reload Data", children: _jsx(RotateCcw, { className: "w-6 h-6" }) }) })) }) }));
+}
+;

package/dist/ikoncomponents/table/DataTable/index.d.ts

@@ -0,0 +1,2 @@
+import { DataTableProps } from "../type";
+export declare function DataTable<T>({ data, columns, keyExtractor, onRowClick }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/table/DataTable/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "../../../shadcn/table";
+export function DataTable({ data, columns, keyExtractor, onRowClick }) {
+    return (_jsx("div", { className: "rounded-md border bg-background shadow-sm overflow-hidden", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { className: "bg-muted border-b border-border", children: columns.map((col, index) => (_jsx(TableHead, { className: "font-semibold text-muted-foreground", children: typeof col.header === "function" ? col.header() : col.header }, index))) }) }), _jsx(TableBody, { children: data && data.length > 0 ? (data.map((row) => (_jsx(TableRow, { onClick: () => onRowClick && onRowClick(row), className: `hover:bg-muted/50 transition-colors border-b border-border ${onRowClick ? "cursor-pointer" : ""}`, children: columns.map((col, colIndex) => (_jsx(TableCell, { className: colIndex === 0 ? "font-medium" : "", children: col.cell
+                                ? col.cell(row)
+                                : col.accessorKey
+                                    ? String(row[col.accessorKey] || "N/A")
+                                    : null }, colIndex))) }, keyExtractor(onRowClick ? row : row))))) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center text-muted-foreground", children: "No records found." }) })) })] }) }));
+}

package/dist/ikoncomponents/table/DataTablePageSize/index.d.ts

@@ -0,0 +1 @@
+export declare function DataTablePageSize(): import("react/jsx-runtime").JSX.Element;