ikoncomponents 1.7.0 → 1.7.2

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

@@ -0,0 +1,93 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import { XIcon, PlusIcon, FileText } from "lucide-react";
+import { AttachmentPrimitive, ComposerPrimitive, MessagePrimitive, useAssistantState, useAssistantApi, } from "@assistant-ui/react";
+import { useShallow } from "zustand/shallow";
+import { Tooltip, TooltipContent, TooltipTrigger, } from "../../shadcn/tooltip";
+import { Dialog, DialogTitle, DialogContent, DialogTrigger, } from "../../shadcn/dialog";
+import { Avatar, AvatarImage, AvatarFallback } from "../../shadcn/avatar";
+import { TooltipIconButton } from "./tooltip-icon-button";
+import { cn } from "../../utils/cn";
+const useFileSrc = (file) => {
+    const [src, setSrc] = useState(undefined);
+    useEffect(() => {
+        if (!file) {
+            setSrc(undefined);
+            return;
+        }
+        const objectUrl = URL.createObjectURL(file);
+        setSrc(objectUrl);
+        return () => {
+            URL.revokeObjectURL(objectUrl);
+        };
+    }, [file]);
+    return src;
+};
+const useAttachmentSrc = () => {
+    var _a;
+    const { file, src } = useAssistantState(useShallow(({ attachment }) => {
+        var _a, _b;
+        if (attachment.type !== "image")
+            return {};
+        if (attachment.file)
+            return { file: attachment.file };
+        const src = (_b = (_a = attachment.content) === null || _a === void 0 ? void 0 : _a.filter((c) => c.type === "image")[0]) === null || _b === void 0 ? void 0 : _b.image;
+        if (!src)
+            return {};
+        return { src };
+    }));
+    return (_a = useFileSrc(file)) !== null && _a !== void 0 ? _a : src;
+};
+const AttachmentPreview = ({ src }) => {
+    const [isLoaded, setIsLoaded] = useState(false);
+    return (_jsx(Image, { src: src, alt: "Image Preview", width: 1, height: 1, className: isLoaded
+            ? "aui-attachment-preview-image-loaded block h-auto max-h-[80vh] w-auto max-w-full object-contain"
+            : "aui-attachment-preview-image-loading hidden", onLoadingComplete: () => setIsLoaded(true), priority: false }));
+};
+const AttachmentPreviewDialog = ({ children }) => {
+    const src = useAttachmentSrc();
+    if (!src)
+        return children;
+    return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { className: "aui-attachment-preview-trigger cursor-pointer transition-colors hover:bg-accent/50", asChild: true, children: children }), _jsxs(DialogContent, { className: "aui-attachment-preview-dialog-content p-2 sm:max-w-3xl [&>button]:rounded-full [&>button]:bg-foreground/60 [&>button]:p-1 [&>button]:opacity-100 [&>button]:ring-0! [&_svg]:text-background [&>button]:hover:[&_svg]:text-destructive", children: [_jsx(DialogTitle, { className: "aui-sr-only sr-only", children: "Image Attachment Preview" }), _jsx("div", { className: "aui-attachment-preview relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden bg-background", children: _jsx(AttachmentPreview, { src: src }) })] })] }));
+};
+const AttachmentThumb = () => {
+    const isImage = useAssistantState(({ attachment }) => attachment.type === "image");
+    const src = useAttachmentSrc();
+    return (_jsxs(Avatar, { className: "aui-attachment-tile-avatar h-full w-full rounded-none", children: [_jsx(AvatarImage, { src: src, alt: "Attachment preview", className: "aui-attachment-tile-image object-cover" }), _jsx(AvatarFallback, { delayMs: isImage ? 200 : 0, children: _jsx(FileText, { className: "aui-attachment-tile-fallback-icon size-8 text-muted-foreground" }) })] }));
+};
+const AttachmentUI = () => {
+    const api = useAssistantApi();
+    const isComposer = api.attachment.source === "composer";
+    const isImage = useAssistantState(({ attachment }) => attachment.type === "image");
+    const typeLabel = useAssistantState(({ attachment }) => {
+        const type = attachment.type;
+        switch (type) {
+            case "image":
+                return "Image";
+            case "document":
+                return "Document";
+            case "file":
+                return "File";
+            default:
+                const _exhaustiveCheck = type;
+                throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`);
+        }
+    });
+    return (_jsxs(Tooltip, { children: [_jsxs(AttachmentPrimitive.Root, { className: cn("aui-attachment-root relative", isImage &&
+                    "aui-attachment-root-composer only:[&>#attachment-tile]:size-24"), children: [_jsx(AttachmentPreviewDialog, { children: _jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: cn("aui-attachment-tile size-14 cursor-pointer overflow-hidden rounded-[14px] border bg-muted transition-opacity hover:opacity-75", isComposer &&
+                                    "aui-attachment-tile-composer border-foreground/20"), role: "button", id: "attachment-tile", "aria-label": `${typeLabel} attachment`, children: _jsx(AttachmentThumb, {}) }) }) }), isComposer && _jsx(AttachmentRemove, {})] }), _jsx(TooltipContent, { side: "top", children: _jsx(AttachmentPrimitive.Name, {}) })] }));
+};
+const AttachmentRemove = () => {
+    return (_jsx(AttachmentPrimitive.Remove, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Remove file", className: "aui-attachment-tile-remove absolute top-1.5 right-1.5 size-3.5 rounded-full bg-white text-muted-foreground opacity-100 shadow-sm hover:bg-white! [&_svg]:text-black hover:[&_svg]:text-destructive", side: "top", children: _jsx(XIcon, { className: "aui-attachment-remove-icon size-3 dark:stroke-[2.5px]" }) }) }));
+};
+export const UserMessageAttachments = () => {
+    return (_jsx("div", { className: "aui-user-message-attachments-end col-span-full col-start-1 row-start-1 flex w-full flex-row justify-end gap-2", children: _jsx(MessagePrimitive.Attachments, { components: { Attachment: AttachmentUI } }) }));
+};
+export const ComposerAttachments = () => {
+    return (_jsx("div", { className: "aui-composer-attachments mb-2 flex w-full flex-row items-center gap-2 overflow-x-auto px-1.5 pt-0.5 pb-1 empty:hidden", children: _jsx(ComposerPrimitive.Attachments, { components: { Attachment: AttachmentUI } }) }));
+};
+export const ComposerAddAttachment = () => {
+    return (_jsx(ComposerPrimitive.AddAttachment, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Add Attachment", side: "bottom", variant: "ghost", size: "icon", className: "aui-composer-add-attachment size-8.5 rounded-full p-1 font-semibold text-xs hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30", "aria-label": "Add Attachment", children: _jsx(PlusIcon, { className: "aui-attachment-add-icon size-5 stroke-[1.5px]" }) }) }));
+};

package/dist/ikoncomponents/assistant-ui/markdown-text.d.ts

@@ -0,0 +1,2 @@
+import "@assistant-ui/react-markdown";
+export declare const MarkdownText: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/ikoncomponents/assistant-ui/markdown-text.js

@@ -0,0 +1,126 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@assistant-ui/react-markdown";
+import { MarkdownTextPrimitive, unstable_memoizeMarkdownComponents as memoizeMarkdownComponents, useIsMarkdownCodeBlock, } from "@assistant-ui/react-markdown";
+import remarkGfm from "remark-gfm";
+import { memo, useState } from "react";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { TooltipIconButton } from "../assistant-ui/tooltip-icon-button";
+import { cn } from "../../utils/cn";
+const MarkdownTextImpl = () => {
+    return (_jsx(MarkdownTextPrimitive, { remarkPlugins: [remarkGfm], className: "aui-md", components: defaultComponents }));
+};
+export const MarkdownText = memo(MarkdownTextImpl);
+const CodeHeader = ({ language, code }) => {
+    const { isCopied, copyToClipboard } = useCopyToClipboard();
+    const onCopy = () => {
+        if (!code || isCopied)
+            return;
+        copyToClipboard(code);
+    };
+    return (_jsxs("div", { className: "aui-code-header-root mt-4 flex items-center justify-between gap-4 rounded-t-lg bg-muted-foreground/15 px-4 py-2 font-semibold text-foreground text-sm dark:bg-muted-foreground/20", children: [_jsx("span", { className: "aui-code-header-language lowercase [&>span]:text-xs", children: language }), _jsxs(TooltipIconButton, { tooltip: "Copy", onClick: onCopy, children: [!isCopied && _jsx(CopyIcon, {}), isCopied && _jsx(CheckIcon, {})] })] }));
+};
+const useCopyToClipboard = ({ copiedDuration = 3000, } = {}) => {
+    const [isCopied, setIsCopied] = useState(false);
+    const copyToClipboard = (value) => {
+        if (!value)
+            return;
+        navigator.clipboard.writeText(value).then(() => {
+            setIsCopied(true);
+            setTimeout(() => setIsCopied(false), copiedDuration);
+        });
+    };
+    return { isCopied, copyToClipboard };
+};
+const defaultComponents = memoizeMarkdownComponents({
+    h1: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("h1", Object.assign({ className: cn("aui-md-h1 mb-8 scroll-m-20 font-extrabold text-4xl tracking-tight last:mb-0", className) }, props)));
+    },
+    h2: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("h2", Object.assign({ className: cn("aui-md-h2 mt-8 mb-4 scroll-m-20 font-semibold text-3xl tracking-tight first:mt-0 last:mb-0", className) }, props)));
+    },
+    h3: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("h3", Object.assign({ className: cn("aui-md-h3 mt-6 mb-4 scroll-m-20 font-semibold text-2xl tracking-tight first:mt-0 last:mb-0", className) }, props)));
+    },
+    h4: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("h4", Object.assign({ className: cn("aui-md-h4 mt-6 mb-4 scroll-m-20 font-semibold text-xl tracking-tight first:mt-0 last:mb-0", className) }, props)));
+    },
+    h5: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("h5", Object.assign({ className: cn("aui-md-h5 my-4 font-semibold text-lg first:mt-0 last:mb-0", className) }, props)));
+    },
+    h6: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("h6", Object.assign({ className: cn("aui-md-h6 my-4 font-semibold first:mt-0 last:mb-0", className) }, props)));
+    },
+    p: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("p", Object.assign({ className: cn("aui-md-p mt-5 mb-5 leading-7 first:mt-0 last:mb-0", className) }, props)));
+    },
+    a: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("a", Object.assign({ className: cn("aui-md-a font-medium text-primary underline underline-offset-4", className) }, props)));
+    },
+    blockquote: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("blockquote", Object.assign({ className: cn("aui-md-blockquote border-l-2 pl-6 italic", className) }, props)));
+    },
+    ul: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("ul", Object.assign({ className: cn("aui-md-ul my-5 ml-6 list-disc [&>li]:mt-2", className) }, props)));
+    },
+    ol: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("ol", Object.assign({ className: cn("aui-md-ol my-5 ml-6 list-decimal [&>li]:mt-2", className) }, props)));
+    },
+    hr: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("hr", Object.assign({ className: cn("aui-md-hr my-5 border-b", className) }, props)));
+    },
+    table: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("table", Object.assign({ className: cn("aui-md-table my-5 w-full border-separate border-spacing-0 overflow-y-auto", className) }, props)));
+    },
+    th: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("th", Object.assign({ className: cn("aui-md-th bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [[align=center]]:text-center [[align=right]]:text-right", className) }, props)));
+    },
+    td: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("td", Object.assign({ className: cn("aui-md-td border-b border-l px-4 py-2 text-left last:border-r [[align=center]]:text-center [[align=right]]:text-right", className) }, props)));
+    },
+    tr: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("tr", Object.assign({ className: cn("aui-md-tr m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg", className) }, props)));
+    },
+    sup: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("sup", Object.assign({ className: cn("aui-md-sup [&>a]:text-xs [&>a]:no-underline", className) }, props)));
+    },
+    pre: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("pre", Object.assign({ className: cn("aui-md-pre overflow-x-auto rounded-t-none!rounded-b-lg bg-black p-4 text-white", className) }, props)));
+    },
+    code: function Code(_a) {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        const isCodeBlock = useIsMarkdownCodeBlock();
+        return (_jsx("code", Object.assign({ className: cn(!isCodeBlock &&
+                "aui-md-inline-code rounded border bg-muted font-semibold", className) }, props)));
+    },
+    CodeHeader,
+});

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

@@ -0,0 +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

@@ -0,0 +1,115 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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";
+import { MarkdownText } from "../assistant-ui/markdown-text";
+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";
+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, { 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, {}) }) }));
+};
+const ThreadWelcome = ({ currentUserDetails, }) => {
+    const now = new Date();
+    const hours = now.getHours();
+    let greeting = "";
+    if (hours >= 5 && hours < 12) {
+        greeting = "Good Morning";
+    }
+    else if (hours >= 12 && hours < 17) {
+        greeting = "Good Afternoon";
+    }
+    else if (hours >= 17 && hours < 21) {
+        greeting = "Good Evening";
+    }
+    else {
+        greeting = "Good Night";
+    }
+    console.log(greeting);
+    return (_jsxs("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-[var(--thread-max-width)] flex-grow flex-col", children: [_jsx("div", { className: "aui-thread-welcome-center flex w-full flex-grow flex-col items-center justify-center", children: _jsxs("div", { className: "aui-thread-welcome-message flex size-full flex-col justify-center px-8", children: [_jsx(m.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 10 }, className: "aui-thread-welcome-message-motion-1 text-2xl font-semibold", children: `${greeting} ${currentUserDetails.userName.split(" ")[0]}` }), _jsx(m.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 10 }, transition: { delay: 0.1 }, className: "aui-thread-welcome-message-motion-2 text-2xl text-muted-foreground/65", children: "How can I help you today?" })] }) }), _jsx(ThreadSuggestions, {})] }));
+};
+const ThreadSuggestions = () => {
+    return (_jsx("div", { className: "aui-thread-welcome-suggestions grid w-full gap-2 pb-4 @md:grid-cols-2", children: [
+            {
+                title: "What's the weather",
+                label: "in San Francisco?",
+                action: "What's the weather in San Francisco?",
+            },
+            {
+                title: "Explain React hooks",
+                label: "like useState and useEffect",
+                action: "Explain React hooks like useState and useEffect",
+            },
+            {
+                title: "Write a SQL query",
+                label: "to find top customers",
+                action: "Write a SQL query to find top customers",
+            },
+            {
+                title: "Create a meal plan",
+                label: "for healthy weight loss",
+                action: "Create a meal plan for healthy weight loss",
+            },
+        ].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 = ({ 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 = ({ 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" }) }) }));
+};
+const AssistantMessage = () => {
+    return (_jsxs(MessagePrimitive.Root, { className: "aui-assistant-message-root relative mx-auto w-full max-w-[var(--thread-max-width)] animate-in py-4 duration-150 ease-out fade-in slide-in-from-bottom-1", "data-role": "assistant", children: [_jsxs("div", { className: "aui-assistant-message-content mx-2 leading-7 break-words text-foreground", children: [_jsx(MessagePrimitive.Parts, { components: {
+                            Text: MarkdownText,
+                            tools: { Fallback: ToolFallback },
+                        } }), _jsx(MessageError, {})] }), _jsxs("div", { className: "aui-assistant-message-footer mt-2 ml-2 flex", children: [_jsx(BranchPicker, {}), _jsx(AssistantActionBar, {})] })] }));
+};
+const AssistantActionBar = () => {
+    return (_jsxs(ActionBarPrimitive.Root, { hideWhenRunning: true, autohide: "not-last", autohideFloat: "single-branch", className: "aui-assistant-action-bar-root col-start-3 row-start-2 -ml-1 flex gap-1 text-muted-foreground data-floating:absolute data-floating:rounded-md data-floating:border data-floating:bg-background data-floating:p-1 data-floating:shadow-sm", children: [_jsx(ActionBarPrimitive.Copy, { asChild: true, children: _jsxs(TooltipIconButton, { tooltip: "Copy", children: [_jsx(MessagePrimitive.If, { copied: true, children: _jsx(CheckIcon, {}) }), _jsx(MessagePrimitive.If, { copied: false, children: _jsx(CopyIcon, {}) })] }) }), _jsx(ActionBarPrimitive.Reload, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Refresh", children: _jsx(RefreshCwIcon, {}) }) })] }));
+};
+const UserMessage = () => {
+    return (_jsxs(MessagePrimitive.Root, { className: "aui-user-message-root mx-auto grid w-full max-w-[var(--thread-max-width)] animate-in auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 py-4 duration-150 ease-out fade-in slide-in-from-bottom-1 [&:where(>*)]:col-start-2", "data-role": "user", children: [_jsx(UserMessageAttachments, {}), _jsxs("div", { className: "aui-user-message-content-wrapper relative col-start-2 min-w-0", children: [_jsx("div", { className: "aui-user-message-content rounded-3xl bg-muted px-5 py-2.5 break-words text-foreground", children: _jsx(MessagePrimitive.Parts, {}) }), _jsx("div", { className: "aui-user-action-bar-wrapper absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 pr-2", children: _jsx(UserActionBar, {}) })] }), _jsx(BranchPicker, { className: "aui-user-branch-picker col-span-full col-start-1 row-start-3 -mr-1 justify-end" })] }));
+};
+const UserActionBar = () => {
+    return (_jsx(ActionBarPrimitive.Root, { hideWhenRunning: true, autohide: "not-last", className: "aui-user-action-bar-root flex flex-col items-end", children: _jsx(ActionBarPrimitive.Edit, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Edit", className: "aui-user-action-edit p-4", children: _jsx(PencilIcon, {}) }) }) }));
+};
+const EditComposer = () => {
+    return (_jsx(MessagePrimitive.Root, { className: "aui-edit-composer-wrapper mx-auto flex w-full max-w-[var(--thread-max-width)] flex-col gap-4 px-2", children: _jsxs(ComposerPrimitive.Root, { className: "aui-edit-composer-root ml-auto flex w-full max-w-7/8 flex-col rounded-xl bg-muted", children: [_jsx(ComposerPrimitive.Input, { className: "aui-edit-composer-input flex min-h-[60px] w-full resize-none bg-transparent p-4 text-foreground outline-none", autoFocus: true }), _jsxs("div", { className: "aui-edit-composer-footer mx-3 mb-3 flex items-center justify-center gap-2 self-end", children: [_jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", "aria-label": "Cancel edit", children: "Cancel" }) }), _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(Button, { size: "sm", "aria-label": "Update message", children: "Update" }) })] })] }) }));
+};
+const BranchPicker = (_a) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (_jsxs(BranchPickerPrimitive.Root, Object.assign({ hideWhenSingleBranch: true, className: cn("aui-branch-picker-root mr-2 -ml-2 inline-flex items-center text-xs text-muted-foreground", className) }, rest, { children: [_jsx(BranchPickerPrimitive.Previous, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Previous", children: _jsx(ChevronLeftIcon, {}) }) }), _jsxs("span", { className: "aui-branch-picker-state font-medium", children: [_jsx(BranchPickerPrimitive.Number, {}), " / ", _jsx(BranchPickerPrimitive.Count, {})] }), _jsx(BranchPickerPrimitive.Next, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Next", children: _jsx(ChevronRightIcon, {}) }) })] })));
+};

package/dist/ikoncomponents/assistant-ui/tool-fallback.d.ts

@@ -0,0 +1,2 @@
+import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
+export declare const ToolFallback: ToolCallMessagePartComponent;

package/dist/ikoncomponents/assistant-ui/tool-fallback.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon, XCircleIcon, } from "lucide-react";
+import { useState } from "react";
+import { Button } from "../../shadcn/button";
+import { cn } from "../../utils/cn";
+export const ToolFallback = ({ toolName, argsText, result, status, }) => {
+    const [isCollapsed, setIsCollapsed] = useState(true);
+    const isCancelled = (status === null || status === void 0 ? void 0 : status.type) === "incomplete" && status.reason === "cancelled";
+    const cancelledReason = isCancelled && status.error
+        ? typeof status.error === "string"
+            ? status.error
+            : JSON.stringify(status.error)
+        : null;
+    return (_jsxs("div", { className: cn("aui-tool-fallback-root mb-4 flex w-full flex-col gap-3 rounded-lg border py-3", isCancelled && "border-muted-foreground/30 bg-muted/30"), children: [_jsxs("div", { className: "aui-tool-fallback-header flex items-center gap-2 px-4", children: [isCancelled ? (_jsx(XCircleIcon, { className: "aui-tool-fallback-icon size-4 text-muted-foreground" })) : (_jsx(CheckIcon, { className: "aui-tool-fallback-icon size-4" })), _jsxs("p", { className: cn("aui-tool-fallback-title grow", isCancelled && "text-muted-foreground line-through"), children: [isCancelled ? "Cancelled tool: " : "Used tool: ", _jsx("b", { children: toolName })] }), _jsx(Button, { onClick: () => setIsCollapsed(!isCollapsed), children: isCollapsed ? _jsx(ChevronUpIcon, {}) : _jsx(ChevronDownIcon, {}) })] }), !isCollapsed && (_jsxs("div", { className: "aui-tool-fallback-content flex flex-col gap-2 border-t pt-2", children: [cancelledReason && (_jsxs("div", { className: "aui-tool-fallback-cancelled-root px-4", children: [_jsx("p", { className: "aui-tool-fallback-cancelled-header font-semibold text-muted-foreground", children: "Cancelled reason:" }), _jsx("p", { className: "aui-tool-fallback-cancelled-reason text-muted-foreground", children: cancelledReason })] })), _jsx("div", { className: cn("aui-tool-fallback-args-root px-4", isCancelled && "opacity-60"), children: _jsx("pre", { className: "aui-tool-fallback-args-value whitespace-pre-wrap", children: argsText }) }), !isCancelled && result !== undefined && (_jsxs("div", { className: "aui-tool-fallback-result-root border-t border-dashed px-4 pt-2", children: [_jsx("p", { className: "aui-tool-fallback-result-header font-semibold", children: "Result:" }), _jsx("pre", { className: "aui-tool-fallback-result-content whitespace-pre-wrap", children: typeof result === "string"
+                                    ? result
+                                    : JSON.stringify(result, null, 2) })] }))] }))] }));
+};

package/dist/ikoncomponents/assistant-ui/tooltip-icon-button.d.ts

@@ -0,0 +1,7 @@
+import { ComponentPropsWithRef } from "react";
+import { Button } from "../../shadcn/button";
+export type TooltipIconButtonProps = ComponentPropsWithRef<typeof Button> & {
+    tooltip: string;
+    side?: "top" | "bottom" | "left" | "right";
+};
+export declare const TooltipIconButton: import("react").ForwardRefExoticComponent<Omit<TooltipIconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/ikoncomponents/assistant-ui/tooltip-icon-button.js

@@ -0,0 +1,23 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Slottable } from "@radix-ui/react-slot";
+import { Tooltip, TooltipContent, TooltipTrigger, } from "../../shadcn/tooltip";
+import { Button } from "../../shadcn/button";
+import { cn } from "../../utils/cn";
+export const TooltipIconButton = forwardRef((_a, ref) => {
+    var { children, tooltip, side = "bottom", className } = _a, rest = __rest(_a, ["children", "tooltip", "side", "className"]);
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Button, Object.assign({ variant: "ghost", size: "icon" }, rest, { className: cn("aui-button-icon size-6 p-1", className), ref: ref, children: [_jsx(Slottable, { children: children }), _jsx("span", { className: "aui-sr-only sr-only", children: tooltip })] })) }), _jsx(TooltipContent, { side: side, children: tooltip })] }));
+});
+TooltipIconButton.displayName = "TooltipIconButton";

package/dist/ikoncomponents/fileUpload/index.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useRef } from "react";
 import { UploadCloud, FileUp, Upload, X } from "lucide-react";
 import { v4 as uuidv4 } from "uuid";
-import { Input } from "@/shadcn/input";
+import { Input } from "../../shadcn/input";
 import { IconButtonWithTooltip } from "../buttons";
 /* ----------------------------------------------------
    SAFE Base64 Converter

package/dist/ikoncomponents/fileUploadApi/index.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useRef, useImperativeHandle, forwardRef } from "react";
 import { UploadCloud, FileUp, Upload } from "lucide-react";
 import { v4 as uuidv4 } from "uuid";
-import { Input } from "@/shadcn/input";
+import { Input } from "../../shadcn/input";
 import { IconButtonWithTooltip } from "../buttons";
 import { uploadFilePublic } from "../../utils/api/file-upload copy";
 /* ----------------------------------------------------

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

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

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

@@ -1,9 +1,68 @@
 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." }) })) })] }) }));
+import React, { useState } from "react";
+import { ChevronRight, ChevronDown, GripVertical } from "lucide-react";
+import { Badge } from "../../../shadcn/badge";
+export function DataTable({ data, columns, keyExtractor, onRowClick, groupedColumns = [], onToggleGroup }) {
+    const [expandedGroups, setExpandedGroups] = useState(new Set());
+    const toggleGroup = (groupId) => {
+        const next = new Set(expandedGroups);
+        if (next.has(groupId)) {
+            next.delete(groupId);
+        }
+        else {
+            next.add(groupId);
+        }
+        setExpandedGroups(next);
+    };
+    // Helper to get accessor key from column header string
+    const getAccessor = (headerStr) => {
+        const col = columns.find(c => (typeof c.header === 'string' ? c.header : '') === headerStr);
+        return col === null || col === void 0 ? void 0 : col.accessorKey;
+    };
+    // Group data recursively
+    const getGroupedData = (items, groupIndices) => {
+        if (groupIndices.length === 0)
+            return items;
+        const [currentGroupHeader, ...remainingGroups] = groupIndices;
+        const accessor = getAccessor(currentGroupHeader);
+        if (!accessor)
+            return items;
+        const groups = new Map();
+        items.forEach(item => {
+            var _a;
+            const val = (_a = item[accessor]) !== null && _a !== void 0 ? _a : "None";
+            if (!groups.has(val))
+                groups.set(val, []);
+            groups.get(val).push(item);
+        });
+        return Array.from(groups.entries()).map(([value, groupItems]) => ({
+            isGroup: true,
+            header: currentGroupHeader,
+            value,
+            id: `${currentGroupHeader}:${value}`,
+            children: getGroupedData(groupItems, remainingGroups),
+            count: groupItems.length
+        }));
+    };
+    const groupedData = getGroupedData(data, groupedColumns);
+    const renderRows = (items, level = 0) => {
+        return items.map((item, index) => {
+            if (item.isGroup) {
+                const isExpanded = expandedGroups.has(item.id);
+                return (_jsxs(React.Fragment, { children: [_jsx(TableRow, { className: "bg-muted/40 hover:bg-muted/60 cursor-pointer border-l-4 border-l-primary/50", onClick: () => toggleGroup(item.id), children: _jsx(TableCell, { colSpan: columns.length, className: "py-2", style: { paddingLeft: `${level * 24 + 12}px` }, children: _jsxs("div", { className: "flex items-center gap-2", children: [isExpanded ? _jsx(ChevronDown, { className: "w-4 h-4" }) : _jsx(ChevronRight, { className: "w-4 h-4" }), _jsxs("span", { className: "text-xs font-bold uppercase tracking-wider text-muted-foreground", children: [item.header, ":"] }), _jsx("span", { className: "font-semibold", children: String(item.value) }), _jsxs(Badge, { variant: "outline", className: "ml-2 text-[10px] py-0 h-4", children: [item.count, " items"] })] }) }) }), isExpanded && renderRows(item.children, level + 1)] }, item.id));
+            }
+            return (_jsx(TableRow, { onClick: () => onRowClick && onRowClick(item), 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" : "", style: { paddingLeft: colIndex === 0 ? `${level * 24 + 16}px` : undefined }, children: col.cell
+                        ? col.cell(item)
+                        : col.accessorKey
+                            ? String(item[col.accessorKey] || "N/A")
+                            : null }, colIndex))) }, keyExtractor(item)));
+        });
+    };
+    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) => {
+                            const headerText = typeof col.header === "string" ? col.header : "";
+                            return (_jsx(TableHead, { className: "font-semibold text-muted-foreground group relative", children: _jsxs("div", { className: "flex items-center gap-2", children: [headerText && (_jsx("div", { className: "cursor-grab active:cursor-grabbing p-1 hover:bg-background/50 rounded transition-colors", draggable: true, onDragStart: (e) => {
+                                                e.dataTransfer.setData("columnHeader", headerText);
+                                            }, children: _jsx(GripVertical, { className: "w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" }) })), typeof col.header === "function" ? col.header() : col.header] }) }, index));
+                        }) }) }), _jsx(TableBody, { children: data && data.length > 0 ? (renderRows(groupedData)) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center text-muted-foreground", children: "No records found." }) })) })] }) }));
 }

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

@@ -1,2 +1,2 @@
 import { DataTableLayoutProps } from "./type";
-export declare function DataTableLayout<T>({ data, columns, keyExtractor, totalPages, currentPage, filterComponent, actionNode, onRowClick, gridComponent, isLoading, onReload, }: DataTableLayoutProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableLayout<T>({ data, columns, extraTools, }: DataTableLayoutProps<T>): import("react/jsx-runtime").JSX.Element;