@manta-eu/react 0.1.0

package/dist/components/chat/chat-input/index.js

@@ -0,0 +1,273 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { fileIdentityKey } from "@manta-eu/lib/file";
+import { humanBytes } from "@manta-eu/lib/humanize";
+import { isPresent } from "@manta-eu/lib/present";
+import { FileText, Paperclip, Pause, Square, X } from "lucide-react";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
+import TextareaAutosize from "react-textarea-autosize";
+import { tv } from "tailwind-variants";
+import { createStore, useStore } from "zustand";
+import { Button } from "#components/button/index";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "#components/tooltip/index";
+import { cn } from "#style";
+const bytesPerMegabyte = 1024 * 1024;
+const maxFileSizeMb = 1_024;
+const maxFileSize = maxFileSizeMb * bytesPerMegabyte;
+const maxFiles = 100;
+const chatInputWrapperVariants = tv({
+    base: ["rounded-[26px] bg-faint border border-muted-border", "flex items-end gap-2.5", "min-h-10 py-2.5 px-2.5"],
+});
+const chatInputTextareaVariants = tv({
+    base: [
+        "bg-transparent text-default-foreground typography-small",
+        "flex-1 min-w-0 w-full",
+        "p-0 resize-none my-auto",
+        "placeholder:text-muted-foreground focus:outline-none",
+        "disabled:text-disabled-foreground disabled:cursor-not-allowed",
+        "max-h-[200px] overflow-y-auto",
+    ],
+});
+function filterValidFiles(files, currentCount) {
+    const slots = maxFiles - currentCount;
+    const valid = [];
+    const rejected = [];
+    for (const f of files) {
+        if (valid.length >= slots) {
+            rejected.push({ file: f, reason: `Maximum of ${maxFiles} files allowed` });
+            continue;
+        }
+        if (f.size === 0) {
+            rejected.push({ file: f, reason: "File is empty" });
+            continue;
+        }
+        if (f.size > maxFileSize) {
+            rejected.push({ file: f, reason: `File exceeds ${humanBytes(maxFileSize)} size limit` });
+            continue;
+        }
+        valid.push(f);
+    }
+    return { valid, rejected };
+}
+// Seeded so a caller can pre-fill the composer; the store is otherwise module-private.
+function createChatInputStore(initialValue) {
+    const textareaRef = { current: null };
+    return createStore()((set, get) => ({
+        value: initialValue ?? "",
+        files: [],
+        textareaRef,
+        onRejected: null,
+        setValue: (v) => set({ value: v }),
+        addFiles: (newFiles) => {
+            const current = get().files;
+            const { valid, rejected } = filterValidFiles(newFiles, current.length);
+            if (valid.length > 0) {
+                set({ files: [...current, ...valid] });
+            }
+            if (rejected.length > 0) {
+                get().onRejected?.(rejected);
+            }
+        },
+        removeFile: (index) => {
+            const current = get().files;
+            set({ files: current.filter((_, i) => i !== index) });
+        },
+        clearFiles: () => set({ files: [] }),
+        setTextareaRef: (el) => {
+            textareaRef.current = el;
+        },
+        setOnRejected: (cb) => set({ onRejected: cb }),
+    }));
+}
+const ChatInputStoreContext = createContext(null);
+function useChatInputStore(selector) {
+    const store = useContext(ChatInputStoreContext);
+    if (!store) {
+        throw new Error("Chat input components must be used within ChatInput");
+    }
+    return useStore(store, selector);
+}
+function hasFiles(dataTransfer) {
+    return dataTransfer?.types.includes("Files") ?? false;
+}
+export function ChatInput(props) {
+    const { children, topContent, onSubmit, onRejected, className, dropTargetRef, initialValue } = props;
+    const [store] = useState(() => createChatInputStore(initialValue));
+    const [isDragging, setIsDragging] = useState(false);
+    const submittingRef = useRef(false);
+    useEffect(() => {
+        store.getState().setOnRejected(onRejected ?? null);
+    }, [store, onRejected]);
+    const handleSubmit = useCallback(async (ev) => {
+        ev.preventDefault();
+        if (submittingRef.current)
+            return;
+        const { value, files } = store.getState();
+        const trimmed = value.trim();
+        if ((!trimmed && !isPresent(files)) || !onSubmit)
+            return;
+        submittingRef.current = true;
+        store.getState().setValue("");
+        try {
+            await onSubmit(trimmed, files);
+        }
+        finally {
+            store.getState().clearFiles();
+            submittingRef.current = false;
+        }
+    }, [store, onSubmit]);
+    const handleDragEnter = useCallback((ev) => {
+        ev.preventDefault();
+        setIsDragging(hasFiles(ev.dataTransfer));
+    }, []);
+    const handleDragLeave = useCallback((ev) => {
+        const movingWithinTarget = ev.relatedTarget instanceof Node &&
+            ev.currentTarget instanceof Node &&
+            ev.currentTarget.contains(ev.relatedTarget);
+        if (movingWithinTarget)
+            return;
+        setIsDragging(false);
+    }, []);
+    const handleDragOver = useCallback((ev) => {
+        ev.preventDefault();
+    }, []);
+    const handleDrop = useCallback((ev) => {
+        ev.preventDefault();
+        setIsDragging(false);
+        if (!hasFiles(ev.dataTransfer))
+            return;
+        const droppedFiles = Array.from(ev.dataTransfer.files);
+        if (isPresent(droppedFiles)) {
+            store.getState().addFiles(droppedFiles);
+        }
+    }, [store]);
+    const [dropTarget, setDropTarget] = useState(null);
+    useEffect(() => {
+        setDropTarget(dropTargetRef?.current ?? null);
+    });
+    useEffect(() => {
+        if (!dropTarget)
+            return;
+        dropTarget.addEventListener("dragenter", handleDragEnter);
+        dropTarget.addEventListener("dragleave", handleDragLeave);
+        dropTarget.addEventListener("dragover", handleDragOver);
+        dropTarget.addEventListener("drop", handleDrop);
+        return () => {
+            dropTarget.removeEventListener("dragenter", handleDragEnter);
+            dropTarget.removeEventListener("dragleave", handleDragLeave);
+            dropTarget.removeEventListener("dragover", handleDragOver);
+            dropTarget.removeEventListener("drop", handleDrop);
+        };
+    }, [dropTarget, handleDragEnter, handleDragLeave, handleDragOver, handleDrop]);
+    return (_jsxs(ChatInputStoreContext.Provider, { value: store, children: [_jsxs("form", { onSubmit: handleSubmit, className: cn("w-full", className), children: [topContent, _jsx("div", { className: chatInputWrapperVariants(), children: children })] }), isDragging &&
+                dropTarget &&
+                createPortal(_jsx("div", { className: "pointer-events-none absolute inset-0 z-40 bg-base-background/75 backdrop-blur-xs animate-in fade-in-0 motion-reduce:animate-none", children: _jsxs("div", { className: "absolute inset-3 flex flex-col items-center justify-center gap-1.5 rounded-3xl border-2 border-dashed border-accent-foreground/60 bg-accent-foreground/[0.03]", children: [_jsx(Paperclip, { className: "size-5 text-accent-foreground" }), _jsx("p", { className: "typography-small-medium text-default-foreground", children: "Drop files to attach" }), _jsxs("p", { className: "typography-caption text-muted-foreground", children: ["Up to ", maxFiles, " files, ", humanBytes(maxFileSize), " each"] })] }) }), dropTarget)] }));
+}
+export function ChatInputActions(props) {
+    const { icon, "aria-label": ariaLabel, className, onClick } = props;
+    return (_jsx(Button, { type: "button", variant: "ghost", size: "sm", icon: icon, iconOnly: true, "aria-label": ariaLabel, className: cn("my-auto", className), onClick: onClick }));
+}
+export const ChatInputTextarea = forwardRef(function ChatInputTextarea(props, ref) {
+    const { className, onKeyDown, onChange, ...rest } = props;
+    const value = useChatInputStore((s) => s.value);
+    const setValue = useChatInputStore((s) => s.setValue);
+    const setTextareaRef = useChatInputStore((s) => s.setTextareaRef);
+    const setRef = useCallback((el) => {
+        setTextareaRef(el);
+        if (typeof ref === "function")
+            ref(el);
+        else if (ref)
+            ref.current = el;
+    }, [ref, setTextareaRef]);
+    const handleChange = useCallback((e) => {
+        setValue(e.target.value);
+        onChange?.(e);
+    }, [setValue, onChange]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+            e.preventDefault();
+            const form = e.currentTarget.form;
+            if (form?.requestSubmit)
+                form.requestSubmit();
+            return;
+        }
+        onKeyDown?.(e);
+    }, [onKeyDown]);
+    return (_jsx(TextareaAutosize, { ref: setRef, value: value, onChange: handleChange, onKeyDown: handleKeyDown, className: cn(chatInputTextareaVariants(), "flex-1 min-w-[2rem]", className), rows: 1, ...rest }));
+});
+export function ChatInputSubmit(props) {
+    const { icon, "aria-label": ariaLabel, disabled, isLoading, isDisabled, className, stopGeneration } = props;
+    const value = useChatInputStore((s) => s.value);
+    const files = useChatInputStore((s) => s.files);
+    const isEmpty = !value.trim() && files.length === 0;
+    const isStopMode = !!stopGeneration;
+    if (isStopMode) {
+        return (_jsx(Button, { type: "button", variant: "tertiary", size: "sm", icon: Pause, iconOnly: true, "aria-label": "Pause generation", className: cn("[&>svg]:size-4", className), disabled: isDisabled, onClick: stopGeneration }));
+    }
+    return (_jsx(Button, { type: "submit", variant: "primary", size: "sm", icon: isDisabled ? Square : icon, iconOnly: true, "aria-label": ariaLabel, className: cn("mt-auto", className), disabled: isEmpty || disabled || isDisabled, isLoading: isLoading }));
+}
+export function ChatInputAttachButton(props) {
+    const { className } = props;
+    const inputRef = useRef(null);
+    const addFiles = useChatInputStore((s) => s.addFiles);
+    const handleClick = useCallback(() => {
+        inputRef.current?.click();
+    }, []);
+    const handleChange = useCallback((ev) => {
+        const selected = Array.from(ev.target.files ?? []);
+        if (isPresent(selected)) {
+            addFiles(selected);
+        }
+        ev.target.value = "";
+    }, [addFiles]);
+    return (_jsxs(_Fragment, { children: [_jsx("input", { ref: inputRef, type: "file", multiple: true, onChange: handleChange, className: "hidden" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", icon: Paperclip, iconOnly: true, "aria-label": "Attach file", className: cn("my-auto", className), onClick: handleClick })] }));
+}
+const filePreviewVariants = tv({
+    base: [
+        "relative group/file flex items-center gap-1.5",
+        "px-2 py-1 rounded-md",
+        "bg-muted border border-muted-border",
+        "typography-tiny text-default-foreground",
+        "max-w-[160px]",
+    ],
+});
+function FilePreviewChip(props) {
+    const { file, index, onRemove, percent } = props;
+    const isImage = file.type.startsWith("image/");
+    const [previewUrl, setPreviewUrl] = useState("");
+    const isUploading = isPresent(percent) && percent < 100;
+    useEffect(() => {
+        if (!isImage)
+            return;
+        const url = URL.createObjectURL(file);
+        setPreviewUrl(url);
+        return () => URL.revokeObjectURL(url);
+    }, [file, isImage]);
+    return (_jsxs("div", { className: filePreviewVariants(), children: [isUploading && (_jsxs("div", { className: "absolute inset-0 z-10 flex items-center justify-center rounded-md bg-base-background/70 typography-tiny text-default-foreground", children: [percent, "%"] })), isImage ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "flex min-w-0 flex-1 cursor-pointer items-center gap-1.5", children: [_jsx("img", { src: previewUrl, alt: file.name, className: "size-6 rounded object-cover shrink-0" }), _jsx("span", { className: "truncate flex-1 min-w-0", children: file.name })] }) }), _jsx(TooltipContent, { showArrow: false, className: "overflow-hidden border border-muted-border bg-base-background p-1.5", children: _jsx("img", { src: previewUrl, alt: file.name, className: "max-w-lg max-h-96 rounded-md object-contain" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(FileText, { className: "size-4 text-muted-foreground shrink-0" }), _jsx("span", { className: "truncate flex-1 min-w-0", children: file.name })] })), _jsx(Button, { type: "button", variant: "ghost", size: "xs", icon: X, iconOnly: true, "aria-label": `Remove ${file.name}`, className: "p-0.5 shrink-0 [&>svg]:size-3", onClick: () => onRemove(index) })] }, `${file.name}-${file.size}-${index}`));
+}
+const maxPreviewChips = 12;
+export function ChatInputFilePreview(props) {
+    const { progress } = props;
+    const files = useChatInputStore((s) => s.files);
+    const removeFile = useChatInputStore((s) => s.removeFile);
+    const [expanded, setExpanded] = useState(false);
+    const scrollRef = useRef(null);
+    const [atBottom, setAtBottom] = useState(true);
+    const isOverflowing = files.length > maxPreviewChips;
+    const isExpanded = expanded && isOverflowing;
+    const updateAtBottom = useCallback(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        setAtBottom(el.scrollHeight - el.scrollTop - el.clientHeight < 1);
+    }, []);
+    useEffect(() => {
+        updateAtBottom();
+    }, [updateAtBottom, isExpanded, files.length]);
+    if (!isPresent(files))
+        return null;
+    const visibleFiles = isExpanded ? files : files.slice(0, maxPreviewChips);
+    const hiddenCount = files.length - visibleFiles.length;
+    return (_jsx(TooltipProvider, { delayDuration: 0, children: _jsxs("div", { className: "relative mb-1.5", children: [_jsxs("div", { ref: scrollRef, onScroll: updateAtBottom, className: cn("flex gap-2 flex-wrap px-2", isExpanded && "max-h-40 overflow-y-auto"), children: [visibleFiles.map((file, index) => (_jsx(FilePreviewChip, { file: file, index: index, onRemove: removeFile, percent: progress?.[fileIdentityKey(file)] }, `${file.name}-${file.size}-${index}`))), hiddenCount > 0 && (_jsx("button", { type: "button", className: filePreviewVariants(), onClick: () => setExpanded(true), children: _jsxs("span", { className: "truncate", children: ["+", hiddenCount, " more"] }) })), isExpanded && (_jsx("button", { type: "button", className: filePreviewVariants(), onClick: () => setExpanded(false), children: _jsx("span", { className: "truncate", children: "Show less" }) }))] }), isExpanded && !atBottom && (_jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t from-base-background to-transparent" }))] }) }));
+}

package/dist/components/chat/chat-input-footer/index.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentType, ReactNode } from "react";
+export type ModeOption = {
+    icon: ComponentType<{
+        className?: string;
+    }>;
+    label: string;
+    description: string;
+    value: string;
+};
+export type ChatInputFooterArgs = {
+    modeIcon?: ComponentType<{
+        className?: string;
+    }>;
+    modeOptions?: ModeOption[];
+    selectedMode?: string;
+    onModeChange?: (_mode: string) => void;
+    onModeReset?: () => void;
+    infoText: string;
+    version: string;
+    circularProgressTooltip: string;
+    min: number;
+    max: number;
+    className?: string;
+    actions?: ReactNode;
+};
+export declare function ChatInputFooter(props: ChatInputFooterArgs): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/chat/chat-input-footer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/chat-input-footer/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAgCtD,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjD,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,uBAAuB,EAAE,MAAM,CAAC;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,mBAAmB,2CAiIzD"}

package/dist/components/chat/chat-input-footer/index.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { X } from "lucide-react";
+import { useState } from "react";
+import { tv } from "tailwind-variants";
+import { Button } from "#components/button/index";
+import { Popover, PopoverContent, PopoverItem, PopoverTrigger } from "#components/popover/index";
+import { CircularProgress } from "#components/progress/index";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "#components/tooltip/index";
+import { cn } from "#style";
+function formatNumber(num) {
+    if (num >= 1000000) {
+        return `${(num / 1000000).toFixed(1)}M`;
+    }
+    if (num >= 1000) {
+        return `${(num / 1000).toFixed(1)}k`;
+    }
+    return num.toString();
+}
+const footerVariants = tv({
+    base: ["relative flex items-center justify-between gap-4 w-full", "py-2 px-0 bg-transparent", "typography-small"],
+});
+const modeButtonVariants = tv({
+    base: ["inline-flex items-center gap-1.5", "text-primary typography-small-medium", "[&>svg]:size-4"],
+    variants: {
+        isActive: {
+            true: ["bg-muted", "hover:bg-muted"],
+        },
+    },
+});
+export function ChatInputFooter(props) {
+    const { modeIcon, modeOptions, selectedMode: controlledMode, onModeChange, onModeReset, infoText, version, circularProgressTooltip, min, max, className, actions, } = props;
+    const [internalMode, setInternalMode] = useState(undefined);
+    const selectedMode = controlledMode ?? internalMode;
+    const handleModeSelect = (value) => {
+        if (controlledMode === undefined) {
+            setInternalMode(value);
+        }
+        onModeChange?.(value);
+    };
+    const handleModeReset = () => {
+        if (controlledMode === undefined) {
+            setInternalMode(undefined);
+        }
+        onModeReset?.();
+    };
+    const selectedOption = modeOptions?.find((option) => option.value === selectedMode);
+    const ModeIcon = modeIcon;
+    const SelectedIcon = selectedOption?.icon;
+    const isActive = selectedOption !== undefined;
+    return (_jsxs("div", { className: cn(footerVariants(), className), children: [isPresent(modeOptions) && isPresent(ModeIcon) ? (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: modeButtonVariants({ isActive }), "aria-label": "Select mode", children: isActive && SelectedIcon ? (_jsxs(_Fragment, { children: [_jsx(SelectedIcon, { className: "text-current size-4" }), _jsx("span", { children: selectedOption.label }), _jsx("span", { role: "button", tabIndex: 0, onClick: (e) => {
+                                            e.stopPropagation();
+                                            handleModeReset();
+                                        }, onKeyDown: (e) => {
+                                            if (e.key === "Enter" || e.key === " ") {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                                handleModeReset();
+                                            }
+                                        }, className: "ml-0.5 -mr-1 p-0.5 hover:bg-default-border/20 rounded transition-colors cursor-pointer", "aria-label": "Clear mode", children: _jsx(X, { className: "size-3.5" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(ModeIcon, { className: "text-current size-5" }), _jsx("span", { children: "Mode" })] })) }) }), _jsx(PopoverContent, { align: "start", side: "top", className: "p-1", children: modeOptions.map((option) => (_jsx(PopoverItem, { icon: option.icon, label: option.label, description: option.description, onClick: () => handleModeSelect(option.value) }, option.value))) })] })) : actions ? (_jsx("div", { className: "flex items-center gap-2 empty:hidden", children: actions })) : (_jsx("div", {})), _jsx("span", { className: "absolute left-1/2 -translate-x-1/2 text-center typography-small text-placeholder-foreground truncate max-w-[40%] pointer-events-none", children: infoText }), _jsx("div", { className: "flex items-center gap-3 typography-caption text-muted-foreground px-3", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { type: "button", className: "inline-flex shrink-0 appearance-none bg-transparent p-0 border-0 cursor-default", children: _jsx(CircularProgress, { trackClassName: "bg-transparent", size: 14, value: (min / max) * 100, className: "shrink-0 text-current" }) }), _jsxs(TooltipContent, { side: "top", children: [circularProgressTooltip, " ", formatNumber(min), " / ", formatNumber(max)] })] }) }), _jsx("span", { children: version })] }) })] }));
+}

package/dist/components/chat/chat-message/index.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+export type ChatMessageArgs = {
+    role: "user" | "assistant";
+    children: ReactNode;
+    className?: string;
+};
+export declare function ChatMessage(props: ChatMessageArgs): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChatMessage {
+    var displayName: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/chat/chat-message/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/chat-message/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAcvC,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,eAAe,2CAgBjD;yBAhBe,WAAW"}

package/dist/components/chat/chat-message/index.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+import { cn } from "#style";
+const messageVariants = tv({
+    base: ["flex gap-2 w-fit", "typography-small text-default-foreground"],
+    variants: {
+        role: {
+            user: ["self-end flex-row-reverse", "bg-muted text-default-foreground rounded-lg-v4 px-4 py-3 max-w-[85%]"],
+            assistant: ["self-start", "text-default-foreground w-full"],
+        },
+    },
+});
+export function ChatMessage(props) {
+    const { role, children, className } = props;
+    if (role === "user") {
+        return (_jsx("div", { className: cn(messageVariants({ role }), className), children: _jsx("div", { className: "min-w-0 break-words", children: children }) }));
+    }
+    return (_jsx("div", { className: cn(messageVariants({ role }), className), children: _jsx("div", { className: "min-w-0 break-words", children: children }) }));
+}
+ChatMessage.displayName = "ChatMessage";

package/dist/components/chat/chat-model-picker/index.d.ts

@@ -0,0 +1,11 @@
+export type ChatModelPickerModel<TId extends string> = {
+    id: TId;
+    label: string;
+};
+export type ChatModelPickerProps<TId extends string> = {
+    models: ReadonlyArray<ChatModelPickerModel<TId>>;
+    selectedId: TId;
+    onChange: (id: TId) => void;
+};
+export declare function ChatModelPicker<TId extends string>(props: ChatModelPickerProps<TId>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/chat/chat-model-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/chat-model-picker/index.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,oBAAoB,CAAC,GAAG,SAAS,MAAM,IAAI;IACrD,EAAE,EAAE,GAAG,CAAC;IACR,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,oBAAoB,CAAC,GAAG,SAAS,MAAM,IAAI;IACrD,MAAM,EAAE,aAAa,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,CAAC;IACjD,UAAU,EAAE,GAAG,CAAC;IAChB,QAAQ,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;CAC7B,CAAC;AAEF,wBAAgB,eAAe,CAAC,GAAG,SAAS,MAAM,EAAE,KAAK,EAAE,oBAAoB,CAAC,GAAG,CAAC,2CA4BnF"}

package/dist/components/chat/chat-model-picker/index.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { Button } from "#components/button/index";
+import { Popover, PopoverClose, PopoverContent, PopoverItem, PopoverTrigger } from "#components/popover/index";
+export function ChatModelPicker(props) {
+    const { models, selectedId, onChange } = props;
+    const selectedLabel = models.find((model) => model.id === selectedId)?.label ?? selectedId;
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "inline-flex items-center gap-1 typography-small-medium", "aria-label": `Model: ${selectedLabel}`, children: [_jsx("span", { children: selectedLabel }), _jsx(ChevronDown, { className: "size-3.5" })] }) }), _jsx(PopoverContent, { align: "end", side: "top", className: "p-1", children: models.map((model) => (_jsx(PopoverClose, { asChild: true, children: _jsx(PopoverItem, { label: model.label, onClick: () => onChange(model.id) }) }, model.id))) })] }));
+}

package/dist/components/chat/chat-reasoning/index.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+export type ChatReasoningItem = {
+    icon: ReactNode;
+    title: ReactNode;
+    children?: ReactNode;
+};
+export type ChatReasoningPhase = "pending" | "streaming" | "done";
+export type ChatReasoningArgs = {
+    text: string;
+    subtitle?: string;
+    seconds?: number;
+    children?: ReactNode;
+    phase?: ChatReasoningPhase;
+    className?: string;
+    items?: ChatReasoningItem[];
+};
+export declare function ChatReasoning(props: ChatReasoningArgs): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChatReasoning {
+    var displayName: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/chat/chat-reasoning/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/chat-reasoning/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQjD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,CAAC;AA2BlE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC7B,CAAC;AA+EF,wBAAgB,aAAa,CAAC,KAAK,EAAE,iBAAiB,2CA+FrD;yBA/Fe,aAAa"}

package/dist/components/chat/chat-reasoning/index.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { useState } from "react";
+import { tv } from "tailwind-variants";
+import { match } from "ts-pattern";
+import { MantaSwim } from "#components/thinking/manta-swim";
+import { easeOutCubic } from "#easing";
+import { useToggleSet } from "#lib/use-toggle-set";
+import { cn } from "#style";
+const reasoningVariants = tv({
+    base: ["flex flex-col gap-0 w-full", "typography-small text-default-foreground"],
+});
+const headerRowVariants = tv({
+    base: ["flex items-center gap-2 w-full min-h-[calc(1.75rem+4px)]"],
+    variants: {
+        clickable: {
+            true: [
+                "cursor-pointer",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-active-border focus-visible:ring-offset-2",
+                "rounded-sm",
+            ],
+            false: "",
+        },
+    },
+});
+const transition = { duration: 0.2, ease: easeOutCubic };
+const expandVariants = {
+    collapsed: { height: 0, opacity: 0, transition: { duration: 0.16, ease: easeOutCubic } },
+    expanded: { height: "auto", opacity: 1, transition: { duration: 0.2, ease: easeOutCubic } },
+};
+function phaseToMantaSwimProps(phase) {
+    return match(phase)
+        .with("pending", () => ({ mode: "swarm", thinking: false }))
+        .with("streaming", () => ({ mode: "finished", thinking: true }))
+        .with("done", () => ({ mode: "finished", thinking: false }))
+        .exhaustive();
+}
+function ReasoningIcon(props) {
+    const { phase } = props;
+    const { mode, thinking } = phaseToMantaSwimProps(phase);
+    return _jsx(MantaSwim, { mode: mode, thinking: thinking, className: "size-[calc(1.75rem+4px)] shrink-0" });
+}
+function ChatReasoningItemRow(props) {
+    const { item, isExpanded, onToggle, shouldReduceMotion } = props;
+    const hasChildren = item.children !== undefined && item.children !== null;
+    const effectiveTransition = shouldReduceMotion ? { duration: 0 } : transition;
+    const iconAndTitle = (_jsxs(_Fragment, { children: [_jsx("div", { className: "shrink-0 inline-flex items-center justify-center size-4 rounded-full", children: item.icon }), _jsx("span", { className: "text-muted-foreground flex-1 min-w-0 break-words typography-small", children: item.title })] }));
+    if (!hasChildren) {
+        return _jsx("div", { className: cn(headerRowVariants({ clickable: false })), children: iconAndTitle });
+    }
+    return (_jsxs("div", { className: "space-y-0", children: [_jsxs("button", { type: "button", className: cn(headerRowVariants({ clickable: true }), "py-1 rounded-sm w-full text-left"), "aria-expanded": isExpanded, onClick: onToggle, children: [iconAndTitle, _jsx(motion.span, { className: "shrink-0 text-muted-foreground", animate: { rotate: isExpanded ? 90 : 0 }, transition: effectiveTransition, "aria-hidden": true, children: _jsx(ChevronRight, { className: "size-4" }) })] }), _jsx(AnimatePresence, { initial: false, children: isExpanded && (_jsx(motion.div, { initial: shouldReduceMotion ? false : "collapsed", animate: "expanded", exit: shouldReduceMotion ? undefined : "collapsed", variants: expandVariants, className: "overflow-hidden", children: _jsx("div", { className: "ml-6 mt-2", children: item.children }) })) })] }));
+}
+export function ChatReasoning(props) {
+    const { text, subtitle, seconds = 0, children, phase = "done", className, items } = props;
+    const shouldReduceMotion = useReducedMotion();
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [expandedItemIndices, toggleExpandedItem] = useToggleSet();
+    const hasItems = items !== undefined && items.length > 0;
+    const hasExpandableContent = hasItems || (children !== undefined && children !== null);
+    const expandableContentFromItems = hasItems;
+    const expandableContentFromChildren = children !== undefined && children !== null;
+    const showSeconds = phase !== "done";
+    const effectiveTransition = shouldReduceMotion ? { duration: 0 } : transition;
+    return (_jsxs("div", { className: cn(reasoningVariants(), className), role: "status", "aria-live": "polite", children: [hasExpandableContent && (_jsxs("button", { type: "button", className: cn(headerRowVariants({ clickable: true })), "aria-expanded": isExpanded, onClick: () => setIsExpanded((prev) => !prev), children: [_jsx(ReasoningIcon, { phase: phase }), _jsxs("span", { className: "text-muted-foreground flex-1 min-w-0 flex items-center self-center gap-1.5", children: [_jsx("span", { className: "min-w-0 truncate", children: text }), !isExpanded && subtitle && (_jsx(AnimatePresence, { mode: "wait", children: _jsxs(motion.span, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, className: "text-muted-foreground/60 min-w-0 flex-1 truncate typography-tiny", children: ["\u00B7 ", subtitle] }, subtitle) }))] }), showSeconds && (_jsxs("span", { className: "shrink-0 self-center typography-small text-muted-foreground tabular-nums", children: [seconds, "s"] })), _jsx(motion.span, { className: "shrink-0 self-center text-muted-foreground", animate: { rotate: isExpanded ? 90 : 0 }, transition: effectiveTransition, "aria-hidden": true, children: _jsx(ChevronRight, { className: "size-4" }) })] })), !hasExpandableContent && (_jsxs("div", { className: cn(headerRowVariants({ clickable: false })), children: [_jsx(ReasoningIcon, { phase: phase }), _jsx("span", { className: "text-muted-foreground self-center min-w-0 truncate", children: text }), showSeconds && (_jsxs("span", { className: "shrink-0 self-center typography-small text-muted-foreground tabular-nums", children: [seconds, "s"] }))] })), _jsx(AnimatePresence, { initial: false, children: hasExpandableContent && isExpanded && (_jsx(motion.div, { initial: shouldReduceMotion ? false : "collapsed", animate: "expanded", exit: shouldReduceMotion ? undefined : "collapsed", variants: expandVariants, className: "overflow-hidden", children: _jsxs("div", { className: "pt-2 space-y-3", children: [expandableContentFromItems && (_jsx("ul", { className: "list-none gap-1 flex flex-col", children: items.map((item, index) => (_jsx("li", { className: "m-0", children: _jsx(ChatReasoningItemRow, { item: item, index: index, isExpanded: expandedItemIndices.has(index), onToggle: () => toggleExpandedItem(index), shouldReduceMotion: !!shouldReduceMotion }) }, index))) })), expandableContentFromChildren && children] }) })) })] }));
+}
+ChatReasoning.displayName = "ChatReasoning";

package/dist/components/chat/chat-welcome/index.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import { type Channel } from "#components/channel-icon/index";
+export type ChatWelcomeArgs = {
+    channel: Channel;
+    title: string;
+    subtitle: string;
+    className?: string;
+    mark?: ReactNode;
+};
+export declare function ChatWelcome(props: ChatWelcomeArgs): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChatWelcome {
+    var displayName: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/chat/chat-welcome/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/chat-welcome/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAe,KAAK,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAO3E,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,eAAe,2CAcjD;yBAde,WAAW"}

package/dist/components/chat/chat-welcome/index.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+import { ChannelIcon } from "#components/channel-icon/index";
+import { cn } from "#style";
+const welcomeVariants = tv({
+    base: ["flex flex-col items-center justify-center gap-4 text-center px-4"],
+});
+export function ChatWelcome(props) {
+    const { channel, title, subtitle, className, mark } = props;
+    return (_jsxs("div", { className: cn(welcomeVariants(), className), children: [mark === undefined ? (_jsx(ChannelIcon, { channel: channel, showName: false, iconClassName: "size-8 text-default-foreground" })) : (mark), _jsx("h2", { className: "typography-display text-default-foreground", children: title }), _jsx("p", { className: "typography-caption text-muted-foreground max-w-md", children: subtitle })] }));
+}
+ChatWelcome.displayName = "ChatWelcome";

package/dist/components/chat/index.d.ts

@@ -0,0 +1,16 @@
+export { ChatInput, ChatInputActions, ChatInputTextarea, ChatInputSubmit, ChatInputAttachButton, ChatInputFilePreview, type RejectedFile, } from "./chat-input/index.js";
+export { ChatInputFooter } from "./chat-input-footer/index.js";
+export { ChatModelPicker } from "./chat-model-picker/index.js";
+export { ChatConversationStarters } from "./chat-conversation-starters/index.js";
+export type { ConversationStarter, ConversationStarterGroup } from "./chat-conversation-starters/index.js";
+export { ChatMessage } from "./chat-message/index.js";
+export { ChatReasoning, type ChatReasoningItem, type ChatReasoningPhase } from "./chat-reasoning/index.js";
+export { ChatWelcome } from "./chat-welcome/index.js";
+export type { ChatConversationStartersArgs } from "./chat-conversation-starters/index.js";
+export type { ChatInputActionsProps, ChatInputAttachButtonProps, ChatInputFilePreviewProps, ChatInputProps, ChatInputSubmitProps, } from "./chat-input/index.js";
+export type { ChatInputFooterArgs, ModeOption } from "./chat-input-footer/index.js";
+export type { ChatMessageArgs } from "./chat-message/index.js";
+export type { ChatModelPickerModel, ChatModelPickerProps } from "./chat-model-picker/index.js";
+export type { ChatReasoningArgs } from "./chat-reasoning/index.js";
+export type { ChatWelcomeArgs } from "./chat-welcome/index.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/chat/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chat/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,oBAAoB,EACpB,KAAK,YAAY,GAClB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxE,YAAY,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAClG,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,KAAK,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAClG,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,YAAY,EAAE,4BAA4B,EAAE,MAAM,8BAA8B,CAAC;AACjF,YAAY,EACV,qBAAqB,EACrB,0BAA0B,EAC1B,yBAAyB,EACzB,cAAc,EACd,oBAAoB,GACrB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC3E,YAAY,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACtD,YAAY,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACtF,YAAY,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,YAAY,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/chat/index.js

@@ -0,0 +1,7 @@
+export { ChatInput, ChatInputActions, ChatInputTextarea, ChatInputSubmit, ChatInputAttachButton, ChatInputFilePreview, } from "./chat-input/index.js";
+export { ChatInputFooter } from "./chat-input-footer/index.js";
+export { ChatModelPicker } from "./chat-model-picker/index.js";
+export { ChatConversationStarters } from "./chat-conversation-starters/index.js";
+export { ChatMessage } from "./chat-message/index.js";
+export { ChatReasoning } from "./chat-reasoning/index.js";
+export { ChatWelcome } from "./chat-welcome/index.js";

package/dist/components/chat-view/ActiveChatConnectionNotice.d.ts

@@ -0,0 +1,8 @@
+import type { ActiveChatConnectionState } from "#providers/chat-connection-lifecycle";
+export type ActiveChatConnectionNoticeProps = {
+    connectionState: ActiveChatConnectionState | undefined;
+    isRecovering: boolean;
+    onRetry: () => void;
+};
+export declare function ActiveChatConnectionNotice(props: ActiveChatConnectionNoticeProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ActiveChatConnectionNotice.d.ts.map

package/dist/components/chat-view/ActiveChatConnectionNotice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveChatConnectionNotice.d.ts","sourceRoot":"","sources":["../../../src/components/chat-view/ActiveChatConnectionNotice.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sCAAsC,CAAC;AAEtF,MAAM,MAAM,+BAA+B,GAAG;IAC5C,eAAe,EAAE,yBAAyB,GAAG,SAAS,CAAC;IACvD,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,+BAA+B,kDA4ChF"}