@uipath/apollo-wind 2.69.0 → 2.70.0

package/dist/components/ui/chat-composer.d.ts

@@ -0,0 +1,157 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { type AttachmentState } from './attachment';
+import { type ButtonProps } from './button';
+import { type FileRejection, type FileValidationOptions } from './file-validation';
+import { type InputGroupProps, type InputGroupTextareaProps } from './input-group';
+/**
+ * The prompt input of a chat. `ChatComposer` is the form and owns the draft, the status and the
+ * attachments; its parts read them from context:
+ *
+ * ```tsx
+ * <ChatComposer onSubmit={send} status={status} onStop={stop}>
+ *   <ChatComposerError />
+ *   <ChatComposerInputGroup>
+ *     <ChatComposerAttachments />
+ *     <ChatComposerTextarea />
+ *     <ChatComposerToolbar>
+ *       <ChatComposerAttachButton onFiles={add} />
+ *       <ChatComposerSubmit />
+ *     </ChatComposerToolbar>
+ *   </ChatComposerInputGroup>
+ *   <ChatComposerFooter />
+ * </ChatComposer>
+ * ```
+ *
+ * Enter sends and Shift+Enter starts a new line. While `status` is `streaming` the submit button
+ * becomes a stop button and Enter does not send.
+ */
+export interface ChatComposerStrings {
+    /** Accessible name of the textarea. */
+    label: string;
+    placeholder: string;
+    send: string;
+    stop: string;
+    attach: string;
+    removeAttachment: (name: string) => string;
+    dismissError: string;
+}
+export declare const DEFAULT_CHAT_COMPOSER_STRINGS: ChatComposerStrings;
+export type ChatComposerStatus = 'idle' | 'streaming';
+export type ChatComposerDensity = 'comfortable' | 'compact';
+/** One chip in `ChatComposerAttachments`. The consumer owns the list and its upload states. */
+export interface ChatComposerAttachmentItem {
+    id: string;
+    name: string;
+    /** Second line, such as the size, or the reason an upload failed. */
+    description?: React.ReactNode;
+    state?: AttachmentState;
+    /** Replaces the default file icon. */
+    icon?: React.ReactNode;
+    /** An image URL shown as a thumbnail instead of the icon. */
+    previewUrl?: string;
+}
+export interface ChatComposerSubmitDetails {
+    attachments: ChatComposerAttachmentItem[];
+}
+/** What `useChatComposer` gives a custom part. */
+export interface ChatComposerContextValue {
+    value: string;
+    /** Replaces the draft, through `onValueChange` when controlled. */
+    setValue: (value: string) => void;
+    status: ChatComposerStatus;
+    density: ChatComposerDensity;
+    disabled: boolean;
+    strings: ChatComposerStrings;
+    attachments: ChatComposerAttachmentItem[];
+    onRemoveAttachment?: (attachment: ChatComposerAttachmentItem) => void;
+    onStop?: () => void;
+    canSubmit: boolean;
+    /** Sends the draft, if `canSubmit`. */
+    submit: () => void;
+}
+/** The enclosing `ChatComposer`'s state and actions, for custom parts. */
+declare function useChatComposer(): ChatComposerContextValue;
+declare const chatComposerVariants: (props?: ({
+    density?: "compact" | "comfortable" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ChatComposerProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit' | 'defaultValue'>, VariantProps<typeof chatComposerVariants> {
+    /** Controls the draft. Clear it yourself in `onSubmit`. */
+    value?: string;
+    defaultValue?: string;
+    /** Called on every edit, and with `''` when an uncontrolled draft clears after sending. */
+    onValueChange?: (value: string) => void;
+    /** Called with the draft when the user sends. An uncontrolled draft clears itself after. */
+    onSubmit?: (value: string, details: ChatComposerSubmitDetails) => void;
+    /** `streaming` turns the submit button into a stop button and holds back Enter. */
+    status?: ChatComposerStatus;
+    /**
+     * Called by the stop button while `status` is `streaming`. Without it, there is no stop button.
+     */
+    onStop?: () => void;
+    disabled?: boolean;
+    /** Holds back sending, by button and by Enter, while the textarea stays editable. */
+    submitDisabled?: boolean;
+    /**
+     * Files attached to the draft, rendered by `ChatComposerAttachments`. One still uploading or
+     * processing holds back sending.
+     */
+    attachments?: ChatComposerAttachmentItem[];
+    /** Adds a remove action to every attachment chip. */
+    onRemoveAttachment?: (attachment: ChatComposerAttachmentItem) => void;
+    /** Overrides for any subset of the English strings. */
+    strings?: Partial<ChatComposerStrings>;
+}
+declare const ChatComposer: React.ForwardRefExoticComponent<ChatComposerProps & React.RefAttributes<HTMLFormElement>>;
+export interface ChatComposerInputGroupProps extends Omit<InputGroupProps, 'layout'> {
+}
+/** The field box: an `InputGroup` in block layout holding attachments, textarea and toolbar. */
+declare const ChatComposerInputGroup: React.ForwardRefExoticComponent<ChatComposerInputGroupProps & React.RefAttributes<HTMLDivElement>>;
+/** The draft lives on `ChatComposer`, so the textarea takes no `value` of its own. */
+export interface ChatComposerTextareaProps extends Omit<InputGroupTextareaProps, 'value' | 'defaultValue'> {
+}
+declare const ChatComposerTextarea: React.ForwardRefExoticComponent<Omit<ChatComposerTextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export interface ChatComposerToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * The row of actions below the textarea. `ChatComposerSubmit` pushes itself right with `ml-auto`;
+ * to group another action with it, such as a mic button, give that action `ml-auto` and the
+ * submit button `ml-0`.
+ */
+declare const ChatComposerToolbar: React.ForwardRefExoticComponent<ChatComposerToolbarProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatComposerAttachButtonProps extends Omit<ButtonProps, 'onChange'>, FileValidationOptions {
+    /** Allows picking several files at once. Defaults to true. */
+    multiple?: boolean;
+    /**
+     * Called once per pick, with the files that passed the checks and those that did not. `maxFiles`
+     * counts the composer's attachments too, so it caps the draft rather than each pick.
+     */
+    onFiles?: (accepted: File[], rejected: FileRejection[]) => void;
+}
+declare const ChatComposerAttachButton: React.ForwardRefExoticComponent<ChatComposerAttachButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export interface ChatComposerSubmitProps extends ButtonProps {
+}
+/**
+ * Sends while idle and stops while streaming. Idle, it is disabled until there is text or an
+ * attachment to send, and while an attachment is busy or `submitDisabled` is set. Streaming
+ * without an `onStop`, it stays a disabled send button.
+ */
+declare const ChatComposerSubmit: React.ForwardRefExoticComponent<ChatComposerSubmitProps & React.RefAttributes<HTMLButtonElement>>;
+export interface ChatComposerAttachmentsProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/** The draft's attachments as a scrolling row of chips. Renders nothing when there are none. */
+declare const ChatComposerAttachments: React.ForwardRefExoticComponent<ChatComposerAttachmentsProps & React.RefAttributes<HTMLDivElement>>;
+declare const chatComposerErrorVariants: (props?: ({
+    variant?: "error" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ChatComposerErrorProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof chatComposerErrorVariants> {
+    /** Adds a dismiss button. */
+    onDismiss?: () => void;
+}
+/** A message about the last send, such as a failed request or a rate limit. */
+declare const ChatComposerError: React.ForwardRefExoticComponent<ChatComposerErrorProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatComposerFooterProps extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+/** Small muted text below the field, such as an AI disclaimer. */
+declare const ChatComposerFooter: React.ForwardRefExoticComponent<ChatComposerFooterProps & React.RefAttributes<HTMLParagraphElement>>;
+export { ChatComposer, ChatComposerAttachButton, ChatComposerAttachments, ChatComposerError, ChatComposerFooter, ChatComposerInputGroup, ChatComposerSubmit, ChatComposerTextarea, ChatComposerToolbar, chatComposerErrorVariants, chatComposerVariants, useChatComposer, };

package/dist/components/ui/chat-composer.js

@@ -0,0 +1,359 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { ArrowUp, CircleAlert, FileText, Paperclip, Square, TriangleAlert, X } from "lucide-react";
+import { createContext, forwardRef, useCallback, useContext, useMemo, useRef, useState } from "react";
+import { cn } from "../../lib/index.js";
+import { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle } from "./attachment.js";
+import { Button } from "./button.js";
+import { validateFiles } from "./file-validation.js";
+import { InputGroup, InputGroupBody, InputGroupButton, InputGroupRow, InputGroupTextarea } from "./input-group.js";
+const DEFAULT_CHAT_COMPOSER_STRINGS = {
+    label: 'Message',
+    placeholder: 'Ask anything',
+    send: 'Send message',
+    stop: 'Stop generating',
+    attach: 'Attach files',
+    removeAttachment: (name)=>`Remove ${name}`,
+    dismissError: 'Dismiss'
+};
+const ChatComposerContext = /*#__PURE__*/ createContext(null);
+function useChatComposerInternal() {
+    const context = useContext(ChatComposerContext);
+    if (!context) throw new Error('ChatComposer parts must be rendered inside <ChatComposer>.');
+    return context;
+}
+function useChatComposer() {
+    return useChatComposerInternal();
+}
+const chatComposerVariants = cva('flex w-full min-w-0 flex-col', {
+    variants: {
+        density: {
+            comfortable: 'gap-2',
+            compact: 'gap-1.5'
+        }
+    },
+    defaultVariants: {
+        density: 'comfortable'
+    }
+});
+const NO_ATTACHMENTS = [];
+const ChatComposer = /*#__PURE__*/ forwardRef(({ className, children, value: valueProp, defaultValue, onValueChange, onSubmit, status = 'idle', onStop, disabled = false, submitDisabled = false, density, attachments = NO_ATTACHMENTS, onRemoveAttachment, strings, ...props }, ref)=>{
+    const resolvedDensity = density ?? 'comfortable';
+    const controlled = void 0 !== valueProp;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? '');
+    const value = controlled ? valueProp : uncontrolledValue;
+    const fileInputRef = useRef(null);
+    const onFilesRef = useRef(void 0);
+    const attachmentsBusy = attachments.some(({ state })=>'uploading' === state || 'processing' === state);
+    const canSubmit = !disabled && !submitDisabled && !attachmentsBusy && 'idle' === status && ('' !== value.trim() || attachments.length > 0);
+    const setValue = useCallback((next)=>{
+        if (!controlled) setUncontrolledValue(next);
+        onValueChange?.(next);
+    }, [
+        controlled,
+        onValueChange
+    ]);
+    const submit = useCallback(()=>{
+        if (!canSubmit) return;
+        onSubmit?.(value, {
+            attachments
+        });
+        if (!controlled) setValue('');
+    }, [
+        canSubmit,
+        onSubmit,
+        value,
+        attachments,
+        controlled,
+        setValue
+    ]);
+    const openFilePicker = useCallback(({ accept, multiple = true, onFiles })=>{
+        const input = fileInputRef.current;
+        if (!input) return;
+        input.accept = accept ?? '';
+        input.multiple = multiple;
+        onFilesRef.current = onFiles;
+        input.click();
+    }, []);
+    const text = useMemo(()=>({
+            ...DEFAULT_CHAT_COMPOSER_STRINGS,
+            ...strings
+        }), [
+        strings
+    ]);
+    const context = useMemo(()=>({
+            value,
+            setValue,
+            status,
+            density: resolvedDensity,
+            disabled,
+            strings: text,
+            attachments,
+            onRemoveAttachment,
+            onStop,
+            canSubmit,
+            submit,
+            openFilePicker
+        }), [
+        value,
+        setValue,
+        status,
+        resolvedDensity,
+        disabled,
+        text,
+        attachments,
+        onRemoveAttachment,
+        onStop,
+        canSubmit,
+        submit,
+        openFilePicker
+    ]);
+    return /*#__PURE__*/ jsx(ChatComposerContext.Provider, {
+        value: context,
+        children: /*#__PURE__*/ jsxs("form", {
+            ref: ref,
+            "data-slot": "chat-composer",
+            "data-status": status,
+            "data-density": resolvedDensity,
+            "data-disabled": disabled ? '' : void 0,
+            className: cn(chatComposerVariants({
+                density: resolvedDensity
+            }), className),
+            onSubmit: (event)=>{
+                event.preventDefault();
+                submit();
+            },
+            ...props,
+            children: [
+                children,
+                /*#__PURE__*/ jsx("input", {
+                    ref: fileInputRef,
+                    type: "file",
+                    hidden: true,
+                    tabIndex: -1,
+                    "data-slot": "chat-composer-file-input",
+                    disabled: disabled,
+                    onChange: (event)=>{
+                        const files = Array.from(event.target.files ?? []);
+                        event.target.value = '';
+                        if (files.length > 0) onFilesRef.current?.(files);
+                    }
+                })
+            ]
+        })
+    });
+});
+ChatComposer.displayName = 'ChatComposer';
+const FOCUS_RING_CLASS = 'has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:ring-error future:has-[[data-slot=input-group-control]:focus-visible]:ring-offset-2 future:has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background';
+const ChatComposerInputGroup = /*#__PURE__*/ forwardRef(({ className, disabled, invalid, error, ...props }, ref)=>{
+    const composer = useChatComposer();
+    return /*#__PURE__*/ jsx(InputGroup, {
+        ref: ref,
+        layout: "block",
+        disabled: disabled || composer.disabled,
+        invalid: invalid,
+        error: error,
+        className: cn(FOCUS_RING_CLASS, invalid || error ? 'has-[[data-slot=input-group-control]:focus-visible]:ring-error' : 'has-[[data-slot=input-group-control]:focus-visible]:ring-ring future:has-[[data-slot=input-group-control]:focus-visible]:ring-primary', className),
+        ...props
+    });
+});
+ChatComposerInputGroup.displayName = 'ChatComposerInputGroup';
+const ChatComposerTextarea = /*#__PURE__*/ forwardRef(({ className, minRows, maxRows = 6, placeholder, disabled, onChange, onKeyDown, 'aria-label': ariaLabel, ...props }, ref)=>{
+    const composer = useChatComposer();
+    const rows = minRows ?? ('compact' === composer.density ? 1 : 2);
+    return /*#__PURE__*/ jsx(InputGroupRow, {
+        className: cn('has-[[data-slot=input-group-control]:focus-visible]:ring-0 has-[[data-slot=input-group-control]_:focus-visible]:ring-0', 'compact' === composer.density ? 'min-h-0 py-1 future:min-h-0' : 'py-2'),
+        children: /*#__PURE__*/ jsx(InputGroupTextarea, {
+            ref: ref,
+            rows: rows,
+            minRows: rows,
+            maxRows: maxRows,
+            "aria-label": ariaLabel ?? composer.strings.label,
+            placeholder: placeholder ?? composer.strings.placeholder,
+            disabled: disabled || composer.disabled,
+            value: composer.value,
+            onChange: (event)=>{
+                onChange?.(event);
+                composer.setValue(event.target.value);
+            },
+            onKeyDown: (event)=>{
+                onKeyDown?.(event);
+                if (event.defaultPrevented || 'Enter' !== event.key || event.shiftKey) return;
+                if (event.nativeEvent.isComposing || 229 === event.keyCode) return;
+                event.preventDefault();
+                composer.submit();
+            },
+            className: className,
+            ...props
+        })
+    });
+});
+ChatComposerTextarea.displayName = 'ChatComposerTextarea';
+const ChatComposerToolbar = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
+    const { density } = useChatComposer();
+    return /*#__PURE__*/ jsx(InputGroupBody, {
+        ref: ref,
+        "data-slot": "chat-composer-toolbar",
+        className: cn('flex min-w-0 items-center gap-1', 'compact' === density ? 'px-1.5 py-1' : 'px-2 py-1.5', className),
+        ...props
+    });
+});
+ChatComposerToolbar.displayName = 'ChatComposerToolbar';
+const ChatComposerAttachButton = /*#__PURE__*/ forwardRef(({ accept, maxSize, maxFiles, multiple = true, onFiles, onClick, children, disabled, ...props }, ref)=>{
+    const composer = useChatComposerInternal();
+    const openPicker = ()=>{
+        const remaining = void 0 === maxFiles ? void 0 : Math.max(0, maxFiles - composer.attachments.length);
+        composer.openFilePicker({
+            accept: Array.isArray(accept) ? accept.join(',') : accept,
+            multiple,
+            onFiles: (files)=>{
+                const { accepted, rejected } = validateFiles(files, {
+                    accept,
+                    maxSize,
+                    maxFiles: remaining
+                });
+                onFiles?.(accepted, rejected);
+            }
+        });
+    };
+    return /*#__PURE__*/ jsx(InputGroupButton, {
+        ref: ref,
+        "data-slot": "chat-composer-attach",
+        icon: true,
+        size: 'compact' === composer.density ? '3xs' : '2xs',
+        "aria-label": composer.strings.attach,
+        disabled: disabled || composer.disabled,
+        onClick: (event)=>{
+            onClick?.(event);
+            if (!event.defaultPrevented) openPicker();
+        },
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(Paperclip, {})
+    });
+});
+ChatComposerAttachButton.displayName = 'ChatComposerAttachButton';
+const ChatComposerSubmit = /*#__PURE__*/ forwardRef(({ className, onClick, children, disabled, ...props }, ref)=>{
+    const composer = useChatComposer();
+    const stoppable = 'streaming' === composer.status && void 0 !== composer.onStop;
+    return /*#__PURE__*/ jsx(InputGroupButton, {
+        ref: ref,
+        "data-slot": "chat-composer-submit",
+        "data-status": composer.status,
+        type: stoppable ? 'button' : 'submit',
+        variant: stoppable ? 'ghost' : 'default',
+        icon: true,
+        size: 'compact' === composer.density ? '3xs' : '2xs',
+        "aria-label": stoppable ? composer.strings.stop : composer.strings.send,
+        disabled: disabled || composer.disabled || !stoppable && !composer.canSubmit,
+        onClick: (event)=>{
+            onClick?.(event);
+            if (stoppable && !event.defaultPrevented) composer.onStop?.();
+        },
+        className: cn('ml-auto', className),
+        ...props,
+        children: children ?? (stoppable ? /*#__PURE__*/ jsx(Square, {
+            className: "fill-current"
+        }) : /*#__PURE__*/ jsx(ArrowUp, {}))
+    });
+});
+ChatComposerSubmit.displayName = 'ChatComposerSubmit';
+const ChatComposerAttachments = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
+    const { attachments, onRemoveAttachment, strings, disabled, density } = useChatComposer();
+    if (0 === attachments.length) return null;
+    return /*#__PURE__*/ jsx(AttachmentGroup, {
+        ref: ref,
+        "data-slot": "chat-composer-attachments",
+        className: cn('compact' === density ? 'px-2 pt-1.5' : 'px-2.5 pt-2.5', className),
+        ...props,
+        children: attachments.map((attachment)=>{
+            const state = attachment.state ?? 'done';
+            return /*#__PURE__*/ jsxs(Attachment, {
+                size: 'compact' === density ? 'xs' : 'sm',
+                state: state,
+                "aria-busy": 'uploading' === state || 'processing' === state || void 0,
+                children: [
+                    /*#__PURE__*/ jsx(AttachmentMedia, {
+                        variant: attachment.previewUrl ? 'image' : 'icon',
+                        children: attachment.previewUrl ? /*#__PURE__*/ jsx("img", {
+                            src: attachment.previewUrl,
+                            alt: ""
+                        }) : attachment.icon ?? ('error' === state ? /*#__PURE__*/ jsx(CircleAlert, {}) : /*#__PURE__*/ jsx(FileText, {}))
+                    }),
+                    /*#__PURE__*/ jsxs(AttachmentContent, {
+                        children: [
+                            /*#__PURE__*/ jsx(AttachmentTitle, {
+                                children: attachment.name
+                            }),
+                            attachment.description && /*#__PURE__*/ jsx(AttachmentDescription, {
+                                children: attachment.description
+                            })
+                        ]
+                    }),
+                    onRemoveAttachment && /*#__PURE__*/ jsx(AttachmentActions, {
+                        children: /*#__PURE__*/ jsx(AttachmentAction, {
+                            "aria-label": strings.removeAttachment(attachment.name),
+                            disabled: disabled,
+                            onClick: ()=>onRemoveAttachment(attachment),
+                            children: /*#__PURE__*/ jsx(X, {})
+                        })
+                    })
+                ]
+            }, attachment.id);
+        })
+    });
+});
+ChatComposerAttachments.displayName = 'ChatComposerAttachments';
+const chatComposerErrorVariants = cva("flex items-start gap-2 rounded-lg border px-3 py-2 text-xs leading-4 text-foreground [&>svg:not([class*='size-'])]:mt-px [&>svg:not([class*='size-'])]:size-3.5 [&>svg]:shrink-0", {
+    variants: {
+        variant: {
+            error: 'border-error/50 bg-error-background/25 [&>svg]:text-error',
+            warning: 'border-warning/50 bg-warning-background/25 [&>svg]:text-warning'
+        }
+    },
+    defaultVariants: {
+        variant: 'error'
+    }
+});
+const ChatComposerError = /*#__PURE__*/ forwardRef(({ className, variant, onDismiss, children, ...props }, ref)=>{
+    const { strings } = useChatComposer();
+    const resolved = variant ?? 'error';
+    const Icon = 'warning' === resolved ? TriangleAlert : CircleAlert;
+    return /*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        role: "alert",
+        "data-slot": "chat-composer-error",
+        "data-variant": resolved,
+        className: cn(chatComposerErrorVariants({
+            variant: resolved
+        }), className),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(Icon, {
+                "aria-hidden": "true"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "min-w-0 flex-1",
+                children: children
+            }),
+            onDismiss && /*#__PURE__*/ jsx(Button, {
+                variant: "ghost",
+                size: "4xs",
+                icon: true,
+                "aria-label": strings.dismissError,
+                className: "-my-0.5 shrink-0",
+                onClick: onDismiss,
+                children: /*#__PURE__*/ jsx(X, {})
+            })
+        ]
+    });
+});
+ChatComposerError.displayName = 'ChatComposerError';
+const ChatComposerFooter = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("p", {
+        ref: ref,
+        "data-slot": "chat-composer-footer",
+        className: cn('px-1 text-center text-xs text-muted-foreground', className),
+        ...props
+    }));
+ChatComposerFooter.displayName = 'ChatComposerFooter';
+export { ChatComposer, ChatComposerAttachButton, ChatComposerAttachments, ChatComposerError, ChatComposerFooter, ChatComposerInputGroup, ChatComposerSubmit, ChatComposerTextarea, ChatComposerToolbar, DEFAULT_CHAT_COMPOSER_STRINGS, chatComposerErrorVariants, chatComposerVariants, useChatComposer };