@rolder/kit 3.0.0-alpha.21 → 3.0.0-alpha.24

package/dist/ai/ui/{conversation → chat}/Empty.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Stack, Text } from "@mantine/core";
-import { useConversation } from "./ConversationContext.js";
+import { useIsEmpty } from "./store/index.js";
 const Empty = ()=>{
-    const { empty } = useConversation();
-    return empty ? null : /*#__PURE__*/ jsxs(Stack, {
+    const isEmpty = useIsEmpty();
+    return isEmpty ? null : /*#__PURE__*/ jsxs(Stack, {
         align: "center",
         gap: 0,
         children: [

package/dist/ai/ui/chat/File.d.ts

@@ -0,0 +1,3 @@
+export declare const File: ({ messageId }: {
+    messageId: string;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/ai/ui/{conversation → chat}/File.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { Image, Paper } from "@mantine/core";
 import { FileIcon } from "./FileIcon.js";
-const File = ({ message })=>{
-    const textFileType = message.id.split('-')[1];
-    const fileParts = message.parts?.filter((i)=>'file' === i.type);
-    const lastFilePart = fileParts[fileParts.length - 1];
+import { useChatMessagePart } from "./store/index.js";
+const File = ({ messageId })=>{
+    const part = useChatMessagePart(messageId, 'file');
+    const textFileType = messageId.split('-')[1];
     const FileComponent = ()=>{
         switch(textFileType){
             case 'excel':
@@ -20,17 +20,17 @@ const File = ({ message })=>{
                     mimeType: "powerpoint"
                 });
         }
-        if (lastFilePart.mediaType.includes('image/')) return /*#__PURE__*/ jsx(Image, {
+        if (part.mediaType.includes('image/')) return /*#__PURE__*/ jsx(Image, {
             radius: "md",
             h: 128,
-            src: lastFilePart.url,
+            src: part.url,
             alt: "Image Preview"
         });
         return /*#__PURE__*/ jsx(FileIcon, {
-            mimeType: lastFilePart.mediaType
+            mimeType: part.mediaType
         });
     };
-    return textFileType || lastFilePart ? /*#__PURE__*/ jsx(Paper, {
+    return textFileType || part ? /*#__PURE__*/ jsx(Paper, {
         radius: "md",
         px: "md",
         py: "sm",

package/dist/ai/ui/{conversation → chat}/Loader.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { Loader } from "@mantine/core";
-import { useConversation } from "./ConversationContext.js";
+import { useIsLoading } from "./store/index.js";
 const Loader_Loader = (props)=>{
-    const { loading } = useConversation();
-    return loading ? /*#__PURE__*/ jsx(Loader, {
+    const isLoading = useIsLoading();
+    return isLoading ? /*#__PURE__*/ jsx(Loader, {
         size: 28,
         type: "dots",
         ...props

package/dist/ai/ui/chat/Message.d.ts

@@ -0,0 +1,3 @@
+export declare const Message: ({ messageId }: {
+    messageId: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/ai/ui/chat/Message.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { Paper } from "@mantine/core";
+import { Streamdown } from "streamdown";
+import { useChatMessage, useChatMessagePart, useIsStreaming } from "./store/index.js";
+const Message = ({ messageId })=>{
+    const message = useChatMessage(messageId);
+    const part = useChatMessagePart(messageId, 'text');
+    const isStreaming = useIsStreaming();
+    return /*#__PURE__*/ jsx(Paper, {
+        radius: "md",
+        px: "md",
+        py: "sm",
+        maw: "80%",
+        ml: 'user' === message.role ? 'auto' : void 0,
+        bg: 'user' === message.role ? 'var(--mantine-color-default-hover)' : 'var(--mantine-primary-color-light)',
+        fz: "sm",
+        children: /*#__PURE__*/ jsx(Streamdown, {
+            isAnimating: isStreaming && 'assistant' === message.role,
+            children: part?.text
+        })
+    });
+};
+export { Message };

package/dist/ai/ui/chat/Messages.d.ts

@@ -0,0 +1,2 @@
+import { type StackProps } from '@mantine/core';
+export declare const Messages: ({ children, ...props }: StackProps) => import("react/jsx-runtime").JSX.Element[];

package/dist/ai/ui/chat/Messages.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { Stack } from "@mantine/core";
+import { useChatMessageIds } from "./store/index.js";
+const Messages = ({ children, ...props })=>{
+    const messageIds = useChatMessageIds();
+    return messageIds.map((messageId)=>/*#__PURE__*/ jsx(Stack, {
+            ...props,
+            children: children
+        }, messageId));
+};
+export { Messages };

package/dist/ai/ui/chat/Root.d.ts

@@ -0,0 +1,11 @@
+import { type PaperProps } from '@mantine/core';
+import { type ScrollAreaProps } from '../../../ui';
+export interface ConversationRootProps extends PaperProps {
+    children?: React.ReactNode;
+    scrollAreaProps?: ScrollAreaProps;
+    withScrollButton?: boolean;
+    isLoading: boolean;
+    isStreaming: boolean;
+    isEmpty: boolean;
+}
+export declare const Root: ({ children, scrollAreaProps, withScrollButton, ...props }: ConversationRootProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ai/ui/chat/Root.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Paper } from "@mantine/core";
+import { ScrollArea } from "../../../ui/index.js";
+const Root = ({ children, scrollAreaProps, withScrollButton = true, ...props })=>/*#__PURE__*/ jsx(Paper, {
+        withBorder: true,
+        radius: "md",
+        ...props,
+        children: /*#__PURE__*/ jsxs(ScrollArea, {
+            autoScroll: true,
+            scrollToBottomOnInit: true,
+            p: "md",
+            ...scrollAreaProps,
+            children: [
+                children,
+                withScrollButton && /*#__PURE__*/ jsx(ScrollArea.ScrollButton, {})
+            ]
+        })
+    });
+export { Root };

package/dist/ai/ui/{promptInput → chat/chatInput}/File.js

@@ -3,27 +3,29 @@ import { ActionIcon, FileButton, Tooltip } from "@mantine/core";
 import { IconPaperclip, IconTrash } from "@tabler/icons-react";
 import { useRef } from "react";
 import { FileIcon } from "./FileIcon.js";
-import { usePromptInput } from "./PromptInputContext.js";
+import { getAccept, setFile, useFile, useIsSubmitting, useIsUploading } from "./store.js";
 const File = (props)=>{
     const resetRef = useRef(null);
-    const { file, setFile, accept, submiting, uploading } = usePromptInput();
+    const isSubmiting = useIsSubmitting();
+    const isUploading = useIsUploading();
+    const file = useFile();
     return /*#__PURE__*/ jsx(FileButton, {
         resetRef: resetRef,
         onChange: async (file)=>{
             if (file) setFile(file);
         },
-        accept: accept,
-        disabled: submiting || uploading,
+        accept: getAccept(),
+        disabled: isSubmiting || isUploading,
         ...props,
         children: (props)=>/*#__PURE__*/ jsxs(ActionIcon.Group, {
                 children: [
                     /*#__PURE__*/ jsx(ActionIcon, {
                         size: "lg",
                         variant: "default",
-                        disabled: submiting,
-                        loading: uploading,
+                        disabled: isSubmiting,
+                        loading: isUploading,
                         classNames: {
-                            root: 'rolder-prompt-input-file-action-action'
+                            root: 'rolder-chat-input-file-action-action'
                         },
                         ...props,
                         children: /*#__PURE__*/ jsx(IconPaperclip, {
@@ -48,11 +50,11 @@ const File = (props)=>{
                                 size: "lg",
                                 variant: "default",
                                 classNames: {
-                                    root: 'rolder-prompt-input-file-action-action'
+                                    root: 'rolder-chat-input-file-action-action'
                                 },
                                 onClick: ()=>{
                                     resetRef.current?.();
-                                    setFile(void 0);
+                                    setFile(null);
                                 },
                                 children: /*#__PURE__*/ jsx(IconTrash, {
                                     size: 24,

package/dist/ai/ui/chat/chatInput/Root.d.ts

@@ -0,0 +1,9 @@
+import { type PaperProps } from '@mantine/core';
+import { type Accept } from './store';
+export interface ChatInputRootProps extends PaperProps {
+    onSubmit: () => void;
+    isSubmitting: boolean;
+    isUploading: boolean;
+    accept?: Accept;
+}
+export declare const Root: ({ className, onSubmit, isSubmitting, isUploading, accept, ...props }: ChatInputRootProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ai/ui/chat/chatInput/Root.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { Paper } from "@mantine/core";
+import clsx from "clsx";
+import { useEffect } from "react";
+import { setAccept, setIsSubmitting, setIsUploading, setOnSubmit } from "./store.js";
+const Root = ({ className, onSubmit, isSubmitting, isUploading, accept, ...props })=>{
+    useEffect(()=>{
+        setOnSubmit(onSubmit);
+        setIsSubmitting(isSubmitting);
+        setIsUploading(isUploading);
+        if (accept) setAccept(accept);
+    }, [
+        onSubmit,
+        isSubmitting,
+        isUploading,
+        accept
+    ]);
+    return /*#__PURE__*/ jsx(Paper, {
+        radius: "md",
+        withBorder: true,
+        className: clsx('rolder-chat-input-root', className),
+        ...props
+    });
+};
+export { Root };

package/dist/ai/ui/{promptInput → chat/chatInput}/Submit.js

@@ -1,19 +1,20 @@
 import { jsx } from "react/jsx-runtime";
 import { ActionIcon } from "@mantine/core";
 import { IconArrowBigUp } from "@tabler/icons-react";
-import { usePromptInput } from "./PromptInputContext.js";
+import { getOnSubmit, useIsSubmitting, useIsUploading } from "./store.js";
 const Submit = ({ children, ...props })=>{
     const Icon = /*#__PURE__*/ jsx(IconArrowBigUp, {
         strokeWidth: 1.5
     });
-    const { onSubmit, submiting, uploading } = usePromptInput();
+    const isSubmiting = useIsSubmitting();
+    const isUploading = useIsUploading();
     return /*#__PURE__*/ jsx(ActionIcon, {
         "aria-label": "Submit",
         variant: "light",
         size: "lg",
-        onClick: onSubmit,
-        disabled: uploading,
-        loading: submiting,
+        onClick: getOnSubmit(),
+        disabled: isUploading,
+        loading: isSubmiting,
         ...props,
         children: children ?? Icon
     });

package/dist/ai/ui/{promptInput → chat/chatInput}/Textarea.js

@@ -1,16 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import { Textarea } from "@mantine/core";
-import { useState } from "react";
-import { usePromptInput } from "./PromptInputContext.js";
+import { getIsComposing, getOnSubmit, setIsComposing, setText, useIsSubmitting, useIsUploading, useText } from "./store.js";
 const Textarea_Textarea = (props)=>{
-    const { text, setText, onSubmit, submiting, uploading } = usePromptInput();
-    const [isComposing, setIsComposing] = useState(false);
+    const text = useText();
+    const isSubmiting = useIsSubmitting();
+    const isUploading = useIsUploading();
     const handleKeyDown = (e)=>{
         if ('Enter' === e.key) {
-            if (isComposing || e.nativeEvent.isComposing) return;
+            if (getIsComposing() || e.nativeEvent.isComposing) return;
             if (e.shiftKey) return;
             e.preventDefault();
-            onSubmit();
+            getOnSubmit()();
         }
     };
     return /*#__PURE__*/ jsx(Textarea, {
@@ -18,7 +18,7 @@ const Textarea_Textarea = (props)=>{
         size: "md",
         rows: 3,
         classNames: {
-            input: 'rolder-prompt-input-textarea'
+            input: 'rolder-chat-input-textarea'
         },
         placeholder: "Напишите сообщение",
         onCompositionEnd: ()=>setIsComposing(false),
@@ -26,7 +26,7 @@ const Textarea_Textarea = (props)=>{
         onKeyDown: handleKeyDown,
         value: text,
         onChange: (e)=>setText(e.target.value),
-        disabled: submiting || uploading,
+        disabled: isSubmiting || isUploading,
         ...props
     });
 };

package/dist/ai/ui/{promptInput → chat/chatInput}/index.d.ts

@@ -1,6 +1,5 @@
-export * from './types';
-export declare const PromptInput: {
-    Root: ({ className, onSubmit, submiting, uploading, accept, ...props }: import("@mantine/core").PaperProps & import("./types").PromptInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Input: {
+    Root: ({ className, onSubmit, isSubmitting, isUploading, accept, ...props }: import("./Root").ChatInputRootProps) => import("react/jsx-runtime").JSX.Element;
     Textarea: (props: import("@mantine/core").TextareaProps) => import("react/jsx-runtime").JSX.Element;
     Footer: (props: import("@mantine/core").GroupProps) => import("react/jsx-runtime").JSX.Element;
     Submit: ({ children, ...props }: import("@mantine/core").ActionIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ai/ui/{promptInput → chat/chatInput}/index.js

@@ -3,12 +3,11 @@ import { Footer } from "./Footer.js";
 import { Root } from "./Root.js";
 import { Submit } from "./Submit.js";
 import { Textarea } from "./Textarea.js";
-export * from "./types.js";
-const PromptInput = {
+const Input = {
     Root: Root,
     Textarea: Textarea,
     Footer: Footer,
     Submit: Submit,
     File: File
 };
-export { PromptInput };
+export { Input };

package/dist/ai/ui/chat/chatInput/store.d.ts

@@ -0,0 +1,15 @@
+export declare const setText: (text: string) => void;
+export declare const useText: () => string;
+export declare const getIsComposing: () => boolean;
+export declare const setIsComposing: (isComposing: boolean) => void;
+export declare const useIsSubmitting: () => boolean;
+export declare const setIsSubmitting: (isSubmitting: boolean) => void;
+export declare const useIsUploading: () => boolean;
+export declare const setIsUploading: (isUploading: boolean) => void;
+export declare const useFile: () => File | null;
+export declare const setFile: (file: File | null) => void;
+export declare const getOnSubmit: () => () => void;
+export declare const setOnSubmit: (onSubmit: () => void) => void;
+export type Accept = ('text' | 'image' | 'pdf' | 'word' | 'excel')[];
+export declare const getAccept: () => string;
+export declare const setAccept: (accept: Accept) => void;

package/dist/ai/ui/chat/chatInput/store.js

@@ -0,0 +1,43 @@
+import { useStore } from "@nanostores/react";
+import { atom } from "nanostores";
+const $text = atom('');
+const setText = (text)=>$text.set(text);
+const useText = ()=>useStore($text);
+const $isComposing = atom(false);
+const getIsComposing = ()=>$isComposing.get();
+const setIsComposing = (isComposing)=>$isComposing.set(isComposing);
+const $isSubmitting = atom(false);
+const useIsSubmitting = ()=>useStore($isSubmitting);
+const setIsSubmitting = (isSubmitting)=>$isSubmitting.set(isSubmitting);
+const $isUploading = atom(false);
+const useIsUploading = ()=>useStore($isUploading);
+const setIsUploading = (isUploading)=>$isUploading.set(isUploading);
+const $file = atom(null);
+const useFile = ()=>useStore($file);
+const setFile = (file)=>$file.set(file);
+const $onSubmit = atom(()=>()=>{});
+const getOnSubmit = ()=>$onSubmit.get();
+const setOnSubmit = (onSubmit)=>$onSubmit.set(onSubmit);
+const $accept = atom([
+    'text',
+    'image',
+    'pdf'
+]);
+const getAccept = ()=>$accept.get().map((type)=>{
+        switch(type){
+            case 'text':
+                return 'text/plain';
+            case 'image':
+                return 'image/*';
+            case 'pdf':
+                return 'application/pdf';
+            case 'excel':
+                return 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+            case 'word':
+                return 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+            default:
+                return type;
+        }
+    }).join(',');
+const setAccept = (accept)=>$accept.set(accept);
+export { getAccept, getIsComposing, getOnSubmit, setAccept, setFile, setIsComposing, setIsSubmitting, setIsUploading, setOnSubmit, setText, useFile, useIsSubmitting, useIsUploading, useText };

package/dist/ai/ui/chat/index.d.ts

@@ -0,0 +1,18 @@
+export declare const Chat: {
+    Root: ({ children, scrollAreaProps, withScrollButton, ...props }: import("./Root").ConversationRootProps) => import("react/jsx-runtime").JSX.Element;
+    Message: ({ messageId }: {
+        messageId: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    File: ({ messageId }: {
+        messageId: string;
+    }) => import("react/jsx-runtime").JSX.Element | null;
+    Loader: (props: import("@mantine/core").LoaderProps) => import("react/jsx-runtime").JSX.Element | null;
+    Empty: () => import("react/jsx-runtime").JSX.Element | null;
+    Input: {
+        Root: ({ className, onSubmit, isSubmitting, isUploading, accept, ...props }: import("./chatInput/Root").ChatInputRootProps) => import("react/jsx-runtime").JSX.Element;
+        Textarea: (props: import("@mantine/core").TextareaProps) => import("react/jsx-runtime").JSX.Element;
+        Footer: (props: import("@mantine/core").GroupProps) => import("react/jsx-runtime").JSX.Element;
+        Submit: ({ children, ...props }: import("@mantine/core").ActionIconProps) => import("react/jsx-runtime").JSX.Element;
+        File: (props: Omit<import("@mantine/core").FileButtonProps, "onChange" | "children">) => import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/ai/ui/{conversation → chat}/index.js

@@ -1,15 +1,15 @@
+import { Input } from "./chatInput/index.js";
 import { Empty } from "./Empty.js";
 import { File } from "./File.js";
 import { Loader } from "./Loader.js";
 import { Message } from "./Message.js";
 import { Root } from "./Root.js";
-export * from "./types.js";
-export * from "./useChatMessage.js";
-const Conversation = {
+const Chat = {
     Root: Root,
     Message: Message,
     File: File,
     Loader: Loader,
-    Empty: Empty
+    Empty: Empty,
+    Input: Input
 };
-export { Conversation };
+export { Chat };

package/dist/ai/ui/chat/store/index.d.ts

@@ -0,0 +1,2 @@
+export * from './messages';
+export * from './states';

package/dist/ai/ui/chat/store/index.js

@@ -0,0 +1,2 @@
+export * from "./messages.js";
+export * from "./states.js";

package/dist/ai/ui/chat/store/messages.d.ts

@@ -0,0 +1,15 @@
+import { type UseChatOptions } from '@ai-sdk/react';
+import type { ChatInit, FileUIPart, UIDataTypes, UIMessage, UIMessagePart, UITools } from 'ai';
+export declare const $chatMessageIds: import("nanostores").PreinitializedWritableAtom<string[]> & object;
+export declare const $chatMessages: import("nanostores").PreinitializedMapStore<Record<string, UIMessage<unknown, UIDataTypes, UITools>>> & object;
+export declare const getChatMessage: (messageId: string) => UIMessage<unknown, UIDataTypes, UITools>;
+export declare const getChatMessages: <T extends UIMessage>() => T[];
+export declare const setChatMessages: <T extends UIMessage>(messages: T[]) => void;
+export declare const useChatMessageIds: <T extends UIMessage>(props?: UseChatOptions<T> & ChatInit<T>) => string[];
+export declare const useChatMessage: <T extends UIMessage>(messageId: string) => T;
+export declare const useChatMessagePart: <M extends UIMessage, T extends UIMessagePart<UIDataTypes, UITools>>(messageId: string, type?: T["type"]) => T;
+export type SendMessage = ({ text, file }: {
+    text: string;
+    file?: FileUIPart;
+}, data?: Record<string, unknown>) => Promise<void>;
+export declare const sendMessage: SendMessage;

package/dist/ai/ui/chat/store/messages.js

@@ -0,0 +1,75 @@
+import { useChat } from "@ai-sdk/react";
+import { notifications } from "@mantine/notifications";
+import { useStore } from "@nanostores/react";
+import { atom, map } from "nanostores";
+import { useEffect } from "react";
+import { setChatError, setChatStatus } from "./states.js";
+const $chatMessageIds = atom([]);
+const $chatMessages = map({});
+const getChatMessage = (messageId)=>$chatMessages.get()[messageId];
+const getChatMessages = ()=>$chatMessageIds.get().map((id)=>$chatMessages.get()[id]);
+const setChatMessages = (messages)=>{
+    $chatMessageIds.set(messages.map((msg)=>msg.id));
+    const messagesMap = {};
+    for (const msg of messages)messagesMap[msg.id] = msg;
+    $chatMessages.set(messagesMap);
+};
+const useChatMessageIds = (props)=>{
+    const { messages, status, error, sendMessage } = useChat({
+        onError: (e)=>{
+            notifications.show({
+                title: 'Ошибка сервера ИИ',
+                message: e.message,
+                color: 'red',
+                autoClose: false
+            });
+        },
+        ...props
+    });
+    useEffect(()=>{
+        setChatStatus(status);
+    }, [
+        status
+    ]);
+    useEffect(()=>{
+        setChatError(error?.message);
+    }, [
+        error?.message
+    ]);
+    useEffect(()=>{
+        setChatSendMessage(sendMessage);
+    }, [
+        sendMessage
+    ]);
+    useEffect(()=>{
+        setChatMessages(messages);
+    }, [
+        messages
+    ]);
+    return useStore($chatMessageIds);
+};
+const useChatMessage = (messageId)=>useStore($chatMessages, {
+        keys: [
+            messageId
+        ]
+    })[messageId];
+const useChatMessagePart = (messageId, type)=>{
+    const message = useChatMessage(messageId);
+    const part = message?.parts?.find((i)=>i.type === type);
+    return part;
+};
+const $chatSendMessage = atom();
+const getChatSendMessage = ()=>$chatSendMessage.get();
+const setChatSendMessage = (sendMessage)=>$chatSendMessage.set(sendMessage);
+const messages_sendMessage = async ({ text, file }, data)=>{
+    const files = file ? [
+        file
+    ] : [];
+    await getChatSendMessage()?.({
+        text,
+        files
+    }, {
+        body: data
+    });
+};
+export { $chatMessageIds, $chatMessages, getChatMessage, getChatMessages, messages_sendMessage as sendMessage, setChatMessages, useChatMessage, useChatMessageIds, useChatMessagePart };

package/dist/ai/ui/chat/store/states.d.ts

@@ -0,0 +1,13 @@
+import type { ChatStatus } from 'ai';
+export declare const getChatStatus: () => ChatStatus;
+export declare const setChatStatus: (status: ChatStatus) => void;
+export declare const useChatStatus: () => ChatStatus;
+export declare const getIsLoading: () => boolean;
+export declare const useIsLoading: () => boolean;
+export declare const getIsStreaming: () => boolean;
+export declare const useIsStreaming: () => boolean;
+export declare const getIsEmpty: () => boolean;
+export declare const useIsEmpty: () => boolean;
+export declare const getChatError: () => string | undefined;
+export declare const setChatError: (error: string | undefined) => void;
+export declare const useChatError: () => string | undefined;

package/dist/ai/ui/chat/store/states.js

@@ -0,0 +1,21 @@
+import { useStore } from "@nanostores/react";
+import { atom, computed } from "nanostores";
+import { $chatMessageIds } from "./messages.js";
+const $chatStatus = atom('ready');
+const getChatStatus = ()=>$chatStatus.get();
+const setChatStatus = (status)=>$chatStatus.set(status);
+const useChatStatus = ()=>useStore($chatStatus);
+const $isLoading = computed($chatStatus, (status)=>'ready' !== status);
+const getIsLoading = ()=>$isLoading.get();
+const useIsLoading = ()=>useStore($isLoading);
+const $isStreaming = computed($chatStatus, (status)=>'streaming' === status);
+const getIsStreaming = ()=>$isStreaming.get();
+const useIsStreaming = ()=>useStore($isStreaming);
+const $isEmpty = computed($chatMessageIds, (messages)=>0 === messages.length);
+const getIsEmpty = ()=>$isEmpty.get();
+const useIsEmpty = ()=>useStore($isEmpty);
+const $chatError = atom();
+const getChatError = ()=>$chatError.get();
+const setChatError = (error)=>$chatError.set(error);
+const useChatError = ()=>useStore($chatError);
+export { getChatError, getChatStatus, getIsEmpty, getIsLoading, getIsStreaming, setChatError, setChatStatus, useChatError, useChatStatus, useIsEmpty, useIsLoading, useIsStreaming };

package/dist/ai/ui/index.d.ts

@@ -1,2 +1 @@
-export * from './conversation';
-export * from './promptInput';
+export * from './chat';

package/dist/ai/ui/index.js

@@ -1,2 +1 @@
-export * from "./conversation/index.js";
-export * from "./promptInput/index.js";
+export * from "./chat/index.js";

package/dist/app/defaultTheme.d.ts

@@ -6,20 +6,20 @@ export declare const defaultTheme: {
     black?: string | undefined;
     colors?: {
         [x: string & {}]: import("@mantine/core").MantineColorsTuple | undefined;
-        dark?: import("@mantine/core").MantineColorsTuple | undefined;
-        gray?: import("@mantine/core").MantineColorsTuple | undefined;
-        red?: import("@mantine/core").MantineColorsTuple | undefined;
-        pink?: import("@mantine/core").MantineColorsTuple | undefined;
-        grape?: import("@mantine/core").MantineColorsTuple | undefined;
-        violet?: import("@mantine/core").MantineColorsTuple | undefined;
-        indigo?: import("@mantine/core").MantineColorsTuple | undefined;
         blue?: import("@mantine/core").MantineColorsTuple | undefined;
         cyan?: import("@mantine/core").MantineColorsTuple | undefined;
+        gray?: import("@mantine/core").MantineColorsTuple | undefined;
         green?: import("@mantine/core").MantineColorsTuple | undefined;
+        indigo?: import("@mantine/core").MantineColorsTuple | undefined;
         lime?: import("@mantine/core").MantineColorsTuple | undefined;
-        yellow?: import("@mantine/core").MantineColorsTuple | undefined;
         orange?: import("@mantine/core").MantineColorsTuple | undefined;
+        pink?: import("@mantine/core").MantineColorsTuple | undefined;
+        red?: import("@mantine/core").MantineColorsTuple | undefined;
         teal?: import("@mantine/core").MantineColorsTuple | undefined;
+        violet?: import("@mantine/core").MantineColorsTuple | undefined;
+        yellow?: import("@mantine/core").MantineColorsTuple | undefined;
+        dark?: import("@mantine/core").MantineColorsTuple | undefined;
+        grape?: import("@mantine/core").MantineColorsTuple | undefined;
     } | undefined;
     primaryShade?: import("@mantine/core").MantineColorShade | {
         light?: import("@mantine/core").MantineColorShade | undefined;
@@ -34,7 +34,7 @@ export declare const defaultTheme: {
     headings?: {
         fontFamily?: string | undefined;
         fontWeight?: string | undefined;
-        textWrap?: "balance" | "nowrap" | "wrap" | "stable" | "pretty" | undefined;
+        textWrap?: "nowrap" | "wrap" | "balance" | "stable" | "pretty" | undefined;
         sizes?: {
             h1?: {
                 fontSize?: string | undefined;
@@ -70,52 +70,52 @@ export declare const defaultTheme: {
     } | undefined;
     radius?: {
         [x: string & {}]: string | undefined;
+        lg?: string | undefined;
         xs?: string | undefined;
         sm?: string | undefined;
         md?: string | undefined;
-        lg?: string | undefined;
         xl?: string | undefined;
     } | undefined;
     defaultRadius?: import("@mantine/core").MantineRadius | undefined;
     spacing?: {
         [x: number]: string | undefined;
         [x: string & {}]: string | undefined;
+        lg?: string | undefined;
         xs?: string | undefined;
         sm?: string | undefined;
         md?: string | undefined;
-        lg?: string | undefined;
         xl?: string | undefined;
     } | undefined;
     fontSizes?: {
         [x: string & {}]: string | undefined;
+        lg?: string | undefined;
         xs?: string | undefined;
         sm?: string | undefined;
         md?: string | undefined;
-        lg?: string | undefined;
         xl?: string | undefined;
     } | undefined;
     lineHeights?: {
         [x: string & {}]: string | undefined;
+        lg?: string | undefined;
         xs?: string | undefined;
         sm?: string | undefined;
         md?: string | undefined;
-        lg?: string | undefined;
         xl?: string | undefined;
     } | undefined;
     breakpoints?: {
         [x: string & {}]: string | undefined;
+        lg?: string | undefined;
         xs?: string | undefined;
         sm?: string | undefined;
         md?: string | undefined;
-        lg?: string | undefined;
         xl?: string | undefined;
     } | undefined;
     shadows?: {
         [x: string & {}]: string | undefined;
+        lg?: string | undefined;
         xs?: string | undefined;
         sm?: string | undefined;
         md?: string | undefined;
-        lg?: string | undefined;
         xl?: string | undefined;
     } | undefined;
     respectReducedMotion?: boolean | undefined;

package/dist/styles.css

@@ -1,4 +1,4 @@
-.rolder-prompt-input-root {
+.rolder-chat-input-root {
   background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
 
   &:focus-within {
@@ -8,13 +8,13 @@
   }
 }
 
-.rolder-prompt-input-textarea {
+.rolder-chat-input-textarea {
   border: 0;
   border-radius: 8px;
   overflow: hidden;
 }
 
-.rolder-prompt-input-file-action-action {
+.rolder-chat-input-file-action-action {
   color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
 
   &[data-disabled] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolder/kit",
-  "version": "3.0.0-alpha.21",
+  "version": "3.0.0-alpha.24",
   "type": "module",
   "exports": {
     ".": {
@@ -16,50 +16,52 @@
   "scripts": {
     "build": "rslib build",
     "dev": "rslib build --watch",
-    "check": "biome check --write && tsc --noEmit"
+    "check": "biome check --write && tsgo --noEmit"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.3.11",
-    "@rsbuild/plugin-react": "^1.4.2",
+    "@rsbuild/plugin-react": "^1.4.3",
     "@rslib/core": "^0.19.2",
-    "@types/bun": "^1.3.5",
+    "@types/bun": "^1.3.6",
     "@types/js-cookie": "^3.0.6",
     "@types/omgopass": "^3.2.3",
     "@types/react": "^19.2.8",
-    "react": "^19.2.3",
+    "@typescript/native-preview": "^7.0.0-dev.20260115.1",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "react": "^19.x",
-    "react-dom": "^19.x",
-    "clsx": "^2.x",
-    "@tiptap/extension-highlight": "^3.x",
-    "@tiptap/extension-placeholder": "^3.x",
-    "@tiptap/extension-table": "^3.x",
-    "@tiptap/extension-task-item": "^3.x",
-    "@tiptap/extension-task-list": "^3.x",
-    "@tiptap/extension-text-align": "^3.x",
-    "@tiptap/starter-kit": "^3.x",
-    "@codemirror/lang-json": "^6.x",
-    "@codemirror/lint": "^6.x",
-    "@uiw/codemirror-theme-vscode": "^4.x",
-    "@uiw/react-codemirror": "^4.x",
-    "@mantine/core": "^8.x",
-    "@mantine/hooks": "^8.x",
-    "@mantine/tiptap": "^8.x",
-    "@mantine/notifications": "^8.x",
-    "@tanstack/react-router": "^1.x",
-    "@tanstack/react-form": "^1.x",
-    "@tanstack/react-start": "^1.x",
-    "@tanstack/react-query": "^5.x",
-    "@tanstack/react-router-ssr-query": "^1.x",
-    "zod": "^4.x",
-    "js-cookie": "^3.x",
-    "nanostores": "^1.x",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "clsx": "^2.1.1",
+    "@tiptap/react": "^3.15.3",
+    "@tiptap/extension-highlight": "^3.15.3",
+    "@tiptap/extension-placeholder": "^3.15.3",
+    "@tiptap/extension-table": "^3.15.3",
+    "@tiptap/extension-task-item": "^3.15.3",
+    "@tiptap/extension-task-list": "^3.15.3",
+    "@tiptap/extension-text-align": "^3.15.3",
+    "@tiptap/starter-kit": "^3.15.3",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lint": "^6.9.2",
+    "@uiw/codemirror-theme-vscode": "^4.25.4",
+    "@uiw/react-codemirror": "^4.25.4",
+    "@mantine/core": "^8.3.12",
+    "@mantine/hooks": "^8.3.12",
+    "@mantine/tiptap": "^8.3.12",
+    "@mantine/notifications": "^8.3.12",
+    "@tanstack/react-router": "^1.150.0",
+    "@tanstack/react-form": "^1.27.7",
+    "@tanstack/react-start": "^1.150.0",
+    "@tanstack/react-query": "^5.90.17",
+    "@tanstack/react-router-ssr-query": "^1.150.0",
+    "zod": "^4.3.5",
+    "js-cookie": "^3.0.5",
+    "nanostores": "^1.1.0",
+    "@nanostores/react": "^1.0.0",
     "surrealdb": "^2.0.0-alpha.16",
-    "omgopass": "^3.x",
-    "ai": "^6.x",
-    "streamdown": "^2.x"
+    "omgopass": "^3.2.1",
+    "ai": "^6.0.37",
+    "@ai-sdk/react": "^3.0.39",
+    "streamdown": "^2.0.1"
   },
   "trustedDependencies": [
     "core-js",

package/dist/ai/ui/conversation/ConversationContext.d.ts

@@ -1,7 +0,0 @@
-export interface ConversationContext {
-    loading: boolean;
-    streaming: boolean;
-    empty: boolean;
-}
-export declare const ConversationContext: import("react").Context<ConversationContext | null>;
-export declare const useConversation: () => ConversationContext;

package/dist/ai/ui/conversation/ConversationContext.js

@@ -1,8 +0,0 @@
-import { createContext, useContext } from "react";
-const ConversationContext = createContext(null);
-const useConversation = ()=>{
-    const context = useContext(ConversationContext);
-    if (!context) throw new Error('useConversation must be used within a ConversationProvider');
-    return context;
-};
-export { ConversationContext, useConversation };

package/dist/ai/ui/conversation/ConversationProvider.d.ts

@@ -1,2 +0,0 @@
-import type { ConversationProps } from './types';
-export declare const Provider: ({ children, loading, streaming, empty, }: ConversationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ai/ui/conversation/ConversationProvider.js

@@ -1,14 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { ConversationContext } from "./ConversationContext.js";
-const Provider = ({ children, loading, streaming, empty })=>{
-    const value = {
-        loading,
-        streaming,
-        empty
-    };
-    return /*#__PURE__*/ jsx(ConversationContext.Provider, {
-        value: value,
-        children: children
-    });
-};
-export { Provider };

package/dist/ai/ui/conversation/File.d.ts

@@ -1,4 +0,0 @@
-import type { UIMessage } from 'ai';
-export declare const File: <T extends UIMessage>({ message }: {
-    message: T;
-}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/ai/ui/conversation/Message.d.ts

@@ -1,4 +0,0 @@
-import type { UIMessage } from 'ai';
-export declare const Message: <T extends UIMessage>({ message }: {
-    message: T;
-}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/ai/ui/conversation/Message.js

@@ -1,25 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Paper } from "@mantine/core";
-import { Streamdown } from "streamdown";
-import { useConversation } from "./ConversationContext.js";
-import { useChatMessage } from "./useChatMessage.js";
-const Message = ({ message })=>{
-    const textParts = message?.parts?.filter((i)=>'text' === i.type);
-    const lastTextPart = textParts?.[textParts.length - 1];
-    const chatMessage = useChatMessage(lastTextPart);
-    const { streaming } = useConversation();
-    return chatMessage && 'system' !== message.role ? /*#__PURE__*/ jsx(Paper, {
-        radius: "md",
-        px: "md",
-        py: "sm",
-        maw: "80%",
-        ml: 'user' === message.role ? 'auto' : void 0,
-        bg: 'user' === message.role ? 'var(--mantine-color-default-hover)' : 'var(--mantine-primary-color-light)',
-        fz: "sm",
-        children: /*#__PURE__*/ jsx(Streamdown, {
-            isAnimating: streaming && 'assistant' === message.role,
-            children: chatMessage
-        })
-    }) : null;
-};
-export { Message };

package/dist/ai/ui/conversation/Root.d.ts

@@ -1,2 +0,0 @@
-import type { ConversationProps } from './types';
-export declare const Root: ({ children, loading, streaming, empty, ...props }: ConversationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ai/ui/conversation/Root.js

@@ -1,26 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Paper, Stack } from "@mantine/core";
-import { ScrollArea } from "../../../ui/index.js";
-import { Provider } from "./ConversationProvider.js";
-const Root = ({ children, loading, streaming, empty, ...props })=>/*#__PURE__*/ jsx(Provider, {
-        loading: loading,
-        streaming: streaming,
-        empty: empty,
-        children: /*#__PURE__*/ jsx(Paper, {
-            withBorder: true,
-            radius: "md",
-            ...props,
-            children: /*#__PURE__*/ jsxs(ScrollArea, {
-                autoScroll: true,
-                scrollToBottomOnInit: true,
-                p: "md",
-                children: [
-                    /*#__PURE__*/ jsx(Stack, {
-                        children: children
-                    }),
-                    /*#__PURE__*/ jsx(ScrollArea.ScrollButton, {})
-                ]
-            })
-        })
-    });
-export { Root };

package/dist/ai/ui/conversation/index.d.ts

@@ -1,13 +0,0 @@
-export * from './types';
-export * from './useChatMessage';
-export declare const Conversation: {
-    Root: ({ children, loading, streaming, empty, ...props }: import("./types").ConversationProps) => import("react/jsx-runtime").JSX.Element;
-    Message: <T extends import("ai").UIMessage>({ message }: {
-        message: T;
-    }) => import("react/jsx-runtime").JSX.Element | null;
-    File: <T extends import("ai").UIMessage>({ message }: {
-        message: T;
-    }) => import("react/jsx-runtime").JSX.Element | null;
-    Loader: (props: import("@mantine/core").LoaderProps) => import("react/jsx-runtime").JSX.Element | null;
-    Empty: () => import("react/jsx-runtime").JSX.Element | null;
-};

package/dist/ai/ui/conversation/types.d.ts

@@ -1,7 +0,0 @@
-import type { PaperProps } from '@mantine/core';
-export interface ConversationProps extends PaperProps {
-    children?: React.ReactNode;
-    loading: boolean;
-    streaming: boolean;
-    empty: boolean;
-}

package/dist/ai/ui/conversation/useChatMessage.d.ts

@@ -1,2 +0,0 @@
-import type { TextUIPart } from 'ai';
-export declare const useChatMessage: (part: TextUIPart) => string;

package/dist/ai/ui/conversation/useChatMessage.js

@@ -1,12 +0,0 @@
-import { useEffect, useState } from "react";
-import { parseAiMessagePart } from "../../utils/index.js";
-const useChatMessage = (part)=>{
-    const [parsedText, setParsedText] = useState('');
-    useEffect(()=>{
-        parseAiMessagePart(part).then((i)=>setParsedText(i.text));
-    }, [
-        part
-    ]);
-    return parsedText;
-};
-export { useChatMessage };

package/dist/ai/ui/promptInput/PromptInputContext.d.ts

@@ -1,12 +0,0 @@
-export interface PromptInputContext {
-    text: string;
-    setText: (text: string) => void;
-    file?: File;
-    setFile: (file?: File) => void;
-    onSubmit: () => void;
-    submiting: boolean;
-    uploading: boolean;
-    accept?: string;
-}
-export declare const PromptInputContext: import("react").Context<PromptInputContext | null>;
-export declare const usePromptInput: () => PromptInputContext;

package/dist/ai/ui/promptInput/PromptInputContext.js

@@ -1,8 +0,0 @@
-import { createContext, useContext } from "react";
-const PromptInputContext = createContext(null);
-const usePromptInput = ()=>{
-    const context = useContext(PromptInputContext);
-    if (!context) throw new Error('usePromptInput must be used within a PromptInputProvider');
-    return context;
-};
-export { PromptInputContext, usePromptInput };

package/dist/ai/ui/promptInput/PromptInputProvider.d.ts

@@ -1,2 +0,0 @@
-import type { PromptInputProps } from './types';
-export declare const Provider: ({ children, onSubmit, submiting, uploading, accept, }: PromptInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ai/ui/promptInput/PromptInputProvider.js

@@ -1,50 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { PromptInputContext } from "./PromptInputContext.js";
-const Provider = ({ children, onSubmit, submiting, uploading, accept = [
-    'text',
-    'image',
-    'pdf'
-] })=>{
-    const [text, setText] = useState('');
-    const [file, setFile] = useState();
-    const value = {
-        text,
-        setText,
-        file,
-        setFile,
-        onSubmit: ()=>{
-            if (text.trim()) {
-                onSubmit({
-                    text: text.trim(),
-                    file
-                });
-                setText('');
-                setFile(void 0);
-            }
-        },
-        submiting,
-        uploading,
-        accept: accept.map((type)=>{
-            switch(type){
-                case 'text':
-                    return 'text/plain';
-                case 'image':
-                    return 'image/*';
-                case 'pdf':
-                    return 'application/pdf';
-                case 'excel':
-                    return 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
-                case 'word':
-                    return 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
-                default:
-                    return type;
-            }
-        }).join(',')
-    };
-    return /*#__PURE__*/ jsx(PromptInputContext.Provider, {
-        value: value,
-        children: children
-    });
-};
-export { Provider };

package/dist/ai/ui/promptInput/Root.d.ts

@@ -1,3 +0,0 @@
-import { type PaperProps } from '@mantine/core';
-import type { PromptInputProps } from './types';
-export declare const Root: ({ className, onSubmit, submiting, uploading, accept, ...props }: PaperProps & PromptInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ai/ui/promptInput/Root.js

@@ -1,17 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Paper } from "@mantine/core";
-import clsx from "clsx";
-import { Provider } from "./PromptInputProvider.js";
-const Root = ({ className, onSubmit, submiting, uploading, accept, ...props })=>/*#__PURE__*/ jsx(Provider, {
-        onSubmit: onSubmit,
-        submiting: submiting,
-        uploading: uploading,
-        accept: accept,
-        children: /*#__PURE__*/ jsx(Paper, {
-            radius: "md",
-            withBorder: true,
-            className: clsx('rolder-prompt-input-root', className),
-            ...props
-        })
-    });
-export { Root };

package/dist/ai/ui/promptInput/types.d.ts

@@ -1,11 +0,0 @@
-export type Accept = 'text' | 'image' | 'pdf' | 'excel' | 'word';
-export interface PromptInputProps {
-    children: React.ReactNode;
-    onSubmit: ({ text, file }: {
-        text: string;
-        file?: File;
-    }) => void;
-    submiting: boolean;
-    uploading: boolean;
-    accept?: Accept[];
-}