ikoncomponents 1.6.3 → 1.6.4

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

@@ -0,0 +1,109 @@
+"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 { 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";
+export const Thread = ({ currentUserDetails, }) => {
+    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, {})] })] }) }) }) }));
+};
+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 = () => {
+    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 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 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/main-layout/RefreshContext.js

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

package/dist/index.d.ts

@@ -136,3 +136,5 @@ export { getValidAccessToken, refreshAccessToken, decodeAccessToken, logOut } fr
 export type { TokenResponse } from "./utils/token-management/types";
 export { useIsMobile } from "./hooks/use-mobile";
 export { useRefresh } from "./ikoncomponents/main-layout/RefreshContext";
+export { AssistantComponent } from "./ikoncomponents/assistant-ui/Assistant";
+export type { UserData } from "./utils/userType";

package/dist/index.js

@@ -114,3 +114,4 @@ export { setCookieSession, getCookieSession, clearCookieSession, clearAllCookieS
 export { getValidAccessToken, refreshAccessToken, decodeAccessToken, logOut } from "./utils/token-management";
 export { useIsMobile } from "./hooks/use-mobile";
 export { useRefresh } from "./ikoncomponents/main-layout/RefreshContext";
+export { AssistantComponent } from "./ikoncomponents/assistant-ui/Assistant";