ikoncomponents 1.6.3 → 1.6.5

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

@@ -0,0 +1,208 @@
+import { getValidAccessToken } from "@/utils/token-management";
+import { v4 as uuidv4 } from "uuid";
+export class AgentTextChatTransport {
+    constructor(options) {
+        this.chatIdMap = new Map();
+        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);
+        }
+        return uuidv4();
+    }
+    async sendMessages(options) {
+        var _a, _b;
+        const { messages, chatId, abortSignal, headers, body } = options;
+        console.log("sendMessages called with chatId:", chatId, "trigger:", options.trigger);
+        const serverChatId = this.getChatId(chatId);
+        console.log("Using server chatId:", serverChatId);
+        // Convert UIMessage[] to LangChain AIMessage format
+        const convertedMessages = messages.map((msg) => {
+            const content = msg.parts
+                .filter((part) => part.type === "text")
+                .map((part) => part.text)
+                .join("");
+            return {
+                role: msg.role,
+                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);
+        //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 {
+            const response = await fetch(`${this.baseUrl}/api/chat/completions/${serverChatId}`, {
+                method: "POST",
+                headers: mergedHeaders,
+                body: JSON.stringify(requestBody),
+                signal: abortSignal,
+                cache: "no-store",
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            if (!response.body) {
+                throw new Error("Response body is null");
+            }
+            return this.processResponseStream(response.body);
+        }
+        catch (error) {
+            console.error("Error in sendMessages:", error);
+            throw error;
+        }
+    }
+    async reconnectToStream(options) {
+        return null;
+    }
+    processResponseStream(stream) {
+        const decoder = new TextDecoder();
+        let buffer = "";
+        let reader = null;
+        let isClosed = false;
+        let pendingChunks = [];
+        let hasStarted = false;
+        let messageId = "";
+        let textStarted = false;
+        let textPartId = "";
+        return new ReadableStream({
+            async start(controller) {
+                reader = stream.getReader();
+            },
+            async pull(controller) {
+                var _a;
+                if (!reader || isClosed) {
+                    return;
+                }
+                // First, deliver any pending chunks one at a time
+                if (pendingChunks.length > 0) {
+                    controller.enqueue(pendingChunks.shift());
+                    return;
+                }
+                try {
+                    const { done, value } = await reader.read();
+                    if (done) {
+                        // Send text-end and finish chunks before closing
+                        if (hasStarted && messageId) {
+                            if (textStarted && textPartId) {
+                                pendingChunks.push({
+                                    type: "text-end",
+                                    id: textPartId,
+                                });
+                            }
+                            pendingChunks.push({
+                                type: "finish",
+                                finishReason: "stop",
+                            });
+                            // Enqueue pending chunks before closing
+                            while (pendingChunks.length > 0) {
+                                controller.enqueue(pendingChunks.shift());
+                            }
+                        }
+                        if (!isClosed) {
+                            isClosed = true;
+                            controller.close();
+                        }
+                        return;
+                    }
+                    buffer += decoder.decode(value, { stream: true });
+                    const lines = buffer.split("\n");
+                    buffer = lines.pop() || "";
+                    for (const line of lines) {
+                        const trimmedLine = line.trim();
+                        if (!trimmedLine)
+                            continue;
+                        if (trimmedLine.startsWith("data:")) {
+                            const data = trimmedLine.slice(5).trim();
+                            if (!data)
+                                continue;
+                            try {
+                                const parsed = JSON.parse(data);
+                                if (isClosed) {
+                                    return;
+                                }
+                                // Track message ID and send start chunk once
+                                if (parsed.id && !messageId) {
+                                    messageId = parsed.id;
+                                    hasStarted = true;
+                                    pendingChunks.push({
+                                        type: "start",
+                                    });
+                                }
+                                let chunk = null;
+                                if (parsed.type === "ai") {
+                                    const message = (_a = parsed.messages) === null || _a === void 0 ? void 0 : _a[0];
+                                    if (message === null || message === void 0 ? void 0 : message.content) {
+                                        // Generate text part ID once
+                                        if (!textPartId) {
+                                            textPartId = uuidv4();
+                                        }
+                                        // Send text-start before first delta
+                                        if (!textStarted) {
+                                            textStarted = true;
+                                            pendingChunks.push({
+                                                type: "text-start",
+                                                id: textPartId,
+                                            });
+                                        }
+                                        chunk = {
+                                            type: "text-delta",
+                                            delta: message.content,
+                                            id: textPartId,
+                                        };
+                                    }
+                                }
+                                else if (parsed.type === "tool") {
+                                    const toolCall = parsed.toolCall;
+                                    if (toolCall) {
+                                        chunk = {
+                                            type: "tool-input-available",
+                                            toolCallId: toolCall.callId,
+                                            toolName: toolCall.name,
+                                            input: toolCall.result,
+                                        };
+                                    }
+                                }
+                                if (chunk) {
+                                    pendingChunks.push(chunk);
+                                }
+                            }
+                            catch (e) {
+                                // Ignore parse errors
+                            }
+                        }
+                    }
+                    // Enqueue the first chunk if we have any
+                    if (pendingChunks.length > 0) {
+                        controller.enqueue(pendingChunks.shift());
+                    }
+                }
+                catch (error) {
+                    if (!isClosed) {
+                        isClosed = true;
+                        controller.error(error);
+                    }
+                }
+            },
+            cancel() {
+                isClosed = true;
+                pendingChunks = [];
+                if (reader) {
+                    reader.releaseLock();
+                    reader = null;
+                }
+            },
+        });
+    }
+}

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

@@ -0,0 +1,4 @@
+import { type FC } from "react";
+export declare const UserMessageAttachments: FC;
+export declare const ComposerAttachments: FC;
+export declare const ComposerAddAttachment: FC;

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";